@skeletonlabs/skeleton-svelte 4.6.0 → 4.7.0

package/dist/components/progress/anatomy/label.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesProgress } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: ProgressLabelProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			progress().getLabelProps(),
 			{
-				class: classesProgress.label,
+				class: classes.progress.label,
 			},
 			rest,
 		),

package/dist/components/progress/anatomy/range.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesProgress } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: ProgressRangeProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			progress().getRangeProps(),
 			{
-				class: classesProgress.range,
+				class: classes.progress.range,
 			},
 			rest,
 		),

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

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesProgress } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: ProgressRootProviderProps = $props();
@@ -21,7 +21,7 @@
 		mergeProps(
 			avatar().getRootProps(),
 			{
-				class: classesProgress.root,
+				class: classes.progress.root,
 			},
 			rest,
 		),

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

@@ -9,7 +9,7 @@
 <script lang="ts">
 	import { useProgress } from '../modules/provider.svelte';
 	import { RootContext } from '../modules/root-context.js';
-	import { classesProgress } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitProps } from '@zag-js/progress';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -28,7 +28,7 @@
 		mergeProps(
 			avatar().getRootProps(),
 			{
-				class: classesProgress.root,
+				class: classes.progress.root,
 			},
 			rest,
 		),

package/dist/components/progress/anatomy/track.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesProgress } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: ProgressTrackProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			progress().getTrackProps(),
 			{
-				class: classesProgress.track,
+				class: classes.progress.track,
 			},
 			rest,
 		),

package/dist/components/progress/anatomy/value-text.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesProgress } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: ProgressValueTextProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			progress().getValueTextProps(),
 			{
-				class: classesProgress.valueText,
+				class: classes.progress.valueText,
 			},
 			rest,
 		),

package/dist/components/rating-group/anatomy/control.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: RatingGroupControlProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			ratingGroup().getControlProps(),
 			{
-				class: classesRatingGroup.control,
+				class: classes.ratingGroup.control,
 			},
 			rest,
 		),

package/dist/components/rating-group/anatomy/hidden-input.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: RatingGroupHiddenInputProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			ratingGroup().getHiddenInputProps(),
 			{
-				class: classesRatingGroup.hiddenInput,
+				class: classes.ratingGroup.hiddenInput,
 			},
 			rest,
 		),

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

@@ -30,7 +30,7 @@
 	import StarFull from '../../../internal/components/star-full.svelte';
 	import StarHalf from '../../../internal/components/star-half.svelte';
 	import { RootContext } from '../modules/root-context.js';
-	import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitItemProps } from '@zag-js/rating-group';
 	import { mergeProps } from '@zag-js/svelte';
 	import type { Snippet } from 'svelte';
@@ -48,7 +48,7 @@
 		mergeProps(
 			ratingGroup().getItemProps(itemProps),
 			{
-				class: classesRatingGroup.item,
+				class: classes.ratingGroup.item,
 			},
 			rest,
 		),

package/dist/components/rating-group/anatomy/label.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: RatingGroupLabelProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			ratingGroup().getControlProps(),
 			{
-				class: classesRatingGroup.label,
+				class: classes.ratingGroup.label,
 			},
 			rest,
 		),

package/dist/components/rating-group/anatomy/root-provider.svelte

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: RatingGroupRootProviderProps = $props();
@@ -21,7 +21,7 @@
 		mergeProps(
 			ratingGroup().getRootProps(),
 			{
-				class: classesRatingGroup.root,
+				class: classes.ratingGroup.root,
 			},
 			rest,
 		),

package/dist/components/rating-group/anatomy/root.svelte

@@ -9,7 +9,7 @@
 <script lang="ts">
 	import { useRatingGroup } from '../modules/provider.svelte';
 	import { RootContext } from '../modules/root-context.js';
-	import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitProps } from '@zag-js/rating-group';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -28,7 +28,7 @@
 		mergeProps(
 			ratingGroup().getRootProps(),
 			{
-				class: classesRatingGroup.root,
+				class: classes.ratingGroup.root,
 			},
 			rest,
 		),

package/dist/components/segmented-control/anatomy/control.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <script lang="ts">
-	import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SegmentedControlControlProps = $props();
@@ -16,7 +16,7 @@
 	const attributes = $derived(
 		mergeProps(
 			{
-				class: classesSegmentedControl.control,
+				class: classes.segmentedControl.control,
 			},
 			rest,
 		),

package/dist/components/segmented-control/anatomy/indicator.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SegmentedControlIndicatorProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			segmentedControl().getIndicatorProps(),
 			{
-				class: classesSegmentedControl.indicator,
+				class: classes.segmentedControl.indicator,
 			},
 			rest,
 		),

package/dist/components/segmented-control/anatomy/item-hidden-input.svelte

@@ -8,7 +8,7 @@
 <script lang="ts">
 	import { ItemContext } from '../modules/item-context.js';
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SegmentedControlItemHiddenInputProps = $props();
@@ -22,7 +22,7 @@
 		mergeProps(
 			segmentedcontrol().getItemHiddenInputProps(itemProps()),
 			{
-				class: classesSegmentedControl.itemHiddenInput,
+				class: classes.segmentedControl.itemHiddenInput,
 			},
 			rest,
 		),

package/dist/components/segmented-control/anatomy/item-text.svelte

@@ -8,7 +8,7 @@
 <script lang="ts">
 	import { ItemContext } from '../modules/item-context.js';
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SegmentedControlItemTextProps = $props();
@@ -22,7 +22,7 @@
 		mergeProps(
 			segmentedcontrol().getItemTextProps(itemProps()),
 			{
-				class: classesSegmentedControl.itemText,
+				class: classes.segmentedControl.itemText,
 			},
 			rest,
 		),

package/dist/components/segmented-control/anatomy/item.svelte

@@ -9,7 +9,7 @@
 <script lang="ts">
 	import { ItemContext } from '../modules/item-context.js';
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitItemProps } from '@zag-js/radio-group';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -24,7 +24,7 @@
 		mergeProps(
 			segmentedControl().getItemProps(itemProps),
 			{
-				class: classesSegmentedControl.item,
+				class: classes.segmentedControl.item,
 			},
 			rest,
 		),

package/dist/components/segmented-control/anatomy/label.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SegmentedControlLabelProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			segmentedControl().getLabelProps(),
 			{
-				class: classesSegmentedControl.label,
+				class: classes.segmentedControl.label,
 			},
 			rest,
 		),

package/dist/components/segmented-control/anatomy/root-provider.svelte

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SegmentedControlRootProviderProps = $props();
@@ -21,7 +21,7 @@
 		mergeProps(
 			segmentedControl().getRootProps(),
 			{
-				class: classesSegmentedControl.root,
+				class: classes.segmentedControl.root,
 			},
 			rest,
 		),

package/dist/components/segmented-control/anatomy/root.svelte

@@ -9,7 +9,7 @@
 <script lang="ts">
 	import { useSegmentedControl } from '../modules/provider.svelte';
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitProps } from '@zag-js/radio-group';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -28,7 +28,7 @@
 		mergeProps(
 			segmentedControl().getRootProps(),
 			{
-				class: classesSegmentedControl.root,
+				class: classes.segmentedControl.root,
 			},
 			rest,
 		),

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

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SliderControlProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			slider().getControlProps(),
 			{
-				class: classesSlider.control,
+				class: classes.slider.control,
 			},
 			rest,
 		),

package/dist/components/slider/anatomy/hidden-input.svelte

@@ -8,7 +8,7 @@
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
 	import { ThumbContext } from '../modules/thumb-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SliderHiddenInputProps = $props();
@@ -22,7 +22,7 @@
 		mergeProps(
 			slider().getHiddenInputProps(thumbProps()),
 			{
-				class: classesSlider.hiddenInput,
+				class: classes.slider.hiddenInput,
 			},
 			rest,
 		),

package/dist/components/slider/anatomy/label.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SliderLabelProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			slider().getLabelProps(),
 			{
-				class: classesSlider.label,
+				class: classes.slider.label,
 			},
 			rest,
 		),

package/dist/components/slider/anatomy/marker-group.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SliderMarkerGroupProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			slider().getMarkerGroupProps(),
 			{
-				class: classesSlider.markerGroup,
+				class: classes.slider.markerGroup,
 			},
 			rest,
 		),

package/dist/components/slider/anatomy/marker.svelte

@@ -8,7 +8,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SliderMarkerProps = $props();
@@ -21,7 +21,7 @@
 		mergeProps(
 			slider().getMarkerProps({ value }),
 			{
-				class: classesSlider.marker,
+				class: classes.slider.marker,
 			},
 			rest,
 		),

package/dist/components/slider/anatomy/range.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SliderRangeProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			slider().getRangeProps(),
 			{
-				class: classesSlider.range,
+				class: classes.slider.range,
 			},
 			rest,
 		),

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

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SliderRootProviderProps = $props();
@@ -21,7 +21,7 @@
 		mergeProps(
 			slider().getRootProps(),
 			{
-				class: classesSlider.root,
+				class: classes.slider.root,
 			},
 			rest,
 		),

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

@@ -12,7 +12,7 @@
 <script lang="ts">
 	import { useSlider } from '../modules/provider.svelte';
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { splitProps } from '@zag-js/slider';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -31,7 +31,7 @@
 		mergeProps(
 			slider().getRootProps(),
 			{
-				class: classesSlider.root,
+				class: classes.slider.root,
 			},
 			rest,
 		),

package/dist/components/slider/anatomy/thumb.svelte

@@ -9,7 +9,7 @@
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
 	import { ThumbContext } from '../modules/thumb-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SliderThumbProps = $props();
@@ -23,7 +23,7 @@
 		mergeProps(
 			slider().getThumbProps(thumbProps),
 			{
-				class: classesSlider.thumb,
+				class: classes.slider.thumb,
 			},
 			rest,
 		),

package/dist/components/slider/anatomy/track.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SliderTrackProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			slider().getTrackProps(),
 			{
-				class: classesSlider.track,
+				class: classes.slider.track,
 			},
 			rest,
 		),

package/dist/components/slider/anatomy/value-text.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import { RootContext } from '../modules/root-context.js';
-	import { classesSlider } from '@skeletonlabs/skeleton-common';
+	import * as classes from '@skeletonlabs/skeleton-common/classes';
 	import { mergeProps } from '@zag-js/svelte';
 
 	const props: SliderValueTextProps = $props();
@@ -20,7 +20,7 @@
 		mergeProps(
 			slider().getValueTextProps(),
 			{
-				class: classesSlider.valueText,
+				class: classes.slider.valueText,
 			},
 			rest,
 		),

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

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { ItemProps } from '@zag-js/steps';
+
+	export interface StepsContentProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<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: StepsContentProps = $props();
+
+	const steps = RootContext.consume();
+
+	// @zag-js/steps does not currently provide a splitItemProps function, so manually destructure
+	const { element, children, index, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			steps().getContentProps({ index }),
+			{
+				class: classes.steps.content,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/steps/anatomy/content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { ItemProps } from '@zag-js/steps';
+export interface StepsContentProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const Content: import("svelte").Component<StepsContentProps, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;