npm - @skeletonlabs/skeleton-svelte - Versions diffs - 5.0.0-next.1 → 5.0.0-next.10 - Mend

@skeletonlabs/skeleton-svelte 5.0.0-next.1 → 5.0.0-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (445) hide show

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

@@ -6,14 +6,14 @@
 </script>
 <script lang="ts">
-	import { ItemContext } from '../modules/item-context.js';
-	import { RootContext } from '../modules/root-context.js';
+	import { AccordionItemContext } from '../modules/item-context.js';
+	import { AccordionRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: AccordionItemContentProps = $props();
-	const accordion = RootContext.consume();
-	const itemProps = ItemContext.consume();
+	const accordion = AccordionRootContext.consume();
+	const itemProps = AccordionItemContext.consume();
 	const { element, children, ...rest } = $derived(props);

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

@@ -6,14 +6,14 @@
 </script>
 <script lang="ts">
-	import { ItemContext } from '../modules/item-context.js';
-	import { RootContext } from '../modules/root-context.js';
+	import { AccordionItemContext } from '../modules/item-context.js';
+	import { AccordionRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: AccordionItemIndicatorProps = $props();
-	const accordion = RootContext.consume();
-	const itemProps = ItemContext.consume();
+	const accordion = AccordionRootContext.consume();
+	const itemProps = AccordionItemContext.consume();
 	const { element, children, ...rest } = $derived(props);

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

@@ -6,14 +6,14 @@
 </script>
 <script lang="ts">
-	import { ItemContext } from '../modules/item-context.js';
-	import { RootContext } from '../modules/root-context.js';
+	import { AccordionItemContext } from '../modules/item-context.js';
+	import { AccordionRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: AccordionItemTriggerProps = $props();
-	const accordion = RootContext.consume();
-	const itemProps = ItemContext.consume();
+	const accordion = AccordionRootContext.consume();
+	const itemProps = AccordionItemContext.consume();
 	const { element, children, ...rest } = $derived(props);

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

@@ -7,21 +7,21 @@
 </script>
 <script lang="ts">
-	import { ItemContext } from '../modules/item-context.js';
-	import { RootContext } from '../modules/root-context.js';
+	import { AccordionItemContext } from '../modules/item-context.js';
+	import { AccordionRootContext } from '../modules/root-context.js';
 	import { splitItemProps } from '@zag-js/accordion';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: AccordionItemProps = $props();
-	const accordion = RootContext.consume();
+	const accordion = AccordionRootContext.consume();
 	const [itemProps, componentProps] = $derived(splitItemProps(props));
 	const { element, children, ...rest } = $derived(componentProps);
 	const attributes = $derived(mergeProps(accordion().getItemProps(itemProps), rest));
-	ItemContext.provide(() => itemProps);
+	AccordionItemContext.provide(() => itemProps);
 </script>
 {#if element}

package/dist/components/accordion/anatomy/root-context.svelte CHANGED Viewed

@@ -8,11 +8,11 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { AccordionRootContext } from '../modules/root-context.js';
 	const props: AccordionRootContextProps = $props();
-	const accordion = RootContext.consume();
+	const accordion = AccordionRootContext.consume();
 	const { children } = $derived(props);
 </script>

package/dist/components/accordion/anatomy/root-context.svelte.d.ts CHANGED Viewed

@@ -3,7 +3,6 @@ import type { Snippet } from 'svelte';
 export interface AccordionRootContextProps {
     children: Snippet<[ReturnType<typeof useAccordion>]>;
 }
-import { RootContext } from '../modules/root-context.js';
 declare const RootContext: import("svelte").Component<AccordionRootContextProps, {}, "">;
 type RootContext = ReturnType<typeof RootContext>;
 export default RootContext;

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

@@ -9,7 +9,7 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { AccordionRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: AccordionRootProviderProps = $props();
@@ -18,7 +18,7 @@
 	const attributes = $derived(mergeProps(accordion().getRootProps(), rest));
-	RootContext.provide(() => accordion());
+	AccordionRootContext.provide(() => accordion());
 </script>
 {#if element}

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

@@ -8,7 +8,7 @@
 <script lang="ts">
 	import { useAccordion } from '../modules/provider.svelte';
-	import { RootContext } from '../modules/root-context.js';
+	import { AccordionRootContext } from '../modules/root-context.js';
 	import { splitProps } from '@zag-js/accordion';
 	import { mergeProps } from '@zag-js/svelte';
@@ -25,7 +25,7 @@
 	const attributes = $derived(mergeProps(accordion().getRootProps(), rest));
-	RootContext.provide(() => accordion());
+	AccordionRootContext.provide(() => accordion());
 </script>
 {#if element}

package/dist/components/accordion/modules/item-context.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import type { ItemProps } from '@zag-js/accordion';
-export declare const ItemContext: {
-    key: symbol;
+export declare const AccordionItemContext: {
     consume(): () => ItemProps;
-    provide(value: () => ItemProps): () => ItemProps;
+    provide: (context: () => ItemProps) => () => ItemProps;
 };

package/dist/components/accordion/modules/item-context.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { createContext } from '../../../internal/create-context.js';
-export const ItemContext = createContext();
+export const AccordionItemContext = createContext();

package/dist/components/accordion/modules/provider.svelte.js CHANGED Viewed

@@ -1,7 +1,12 @@
+import { LocaleProviderRootContext } from '../../locale-provider/modules/root-context.js';
 import { connect, machine } from '@zag-js/accordion';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 export function useAccordion(props) {
-    const service = useMachine(machine, props);
+    const locale = LocaleProviderRootContext.consume();
+    const service = useMachine(machine, () => ({
+        dir: locale().dir,
+        ...(typeof props === 'function' ? props() : props),
+    }));
     const accordion = $derived(connect(service, normalizeProps));
     return () => accordion;
 }

package/dist/components/accordion/modules/root-context.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { createContext } from '../../../internal/create-context.js';
-export const RootContext = createContext();
+export const AccordionRootContext = createContext();

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

@@ -6,15 +6,19 @@
 </script>
 <script lang="ts">
+	import { LocaleProviderRootContext } from '../../locale-provider/modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: AppBarRootProps = $props();
+	const locale = LocaleProviderRootContext.consume();
 	const { element, children, ...rest } = $derived(props);
 	const attributes = $derived(
 		mergeProps(
 			{
+				dir: locale().dir,
 				'data-scope': 'app-bar',
 				'data-part': 'root',
 			},

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

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { AvatarRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: AvatarFallbackProps = $props();
-	const avatar = RootContext.consume();
+	const avatar = AvatarRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

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

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { AvatarRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: AvatarImageProps = $props();
-	const avatar = RootContext.consume();
+	const avatar = AvatarRootContext.consume();
 	const { element, ...rest } = $derived(props);

package/dist/components/avatar/anatomy/root-context.svelte CHANGED Viewed

@@ -8,11 +8,11 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { AvatarRootContext } from '../modules/root-context.js';
 	const props: AvatarRootContextProps = $props();
-	const avatar = RootContext.consume();
+	const avatar = AvatarRootContext.consume();
 	const { children } = $derived(props);
 </script>

package/dist/components/avatar/anatomy/root-context.svelte.d.ts CHANGED Viewed

@@ -3,7 +3,6 @@ import type { Snippet } from 'svelte';
 export interface AvatarRootContextProps {
     children: Snippet<[ReturnType<typeof useAvatar>]>;
 }
-import { RootContext } from '../modules/root-context.js';
 declare const RootContext: import("svelte").Component<AvatarRootContextProps, {}, "">;
 type RootContext = ReturnType<typeof RootContext>;
 export default RootContext;

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

@@ -9,7 +9,7 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { AvatarRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: AvatarRootProviderProps = $props();
@@ -18,7 +18,7 @@
 	const attributes = $derived(mergeProps(avatar().getRootProps(), rest));
-	RootContext.provide(() => avatar());
+	AvatarRootContext.provide(() => avatar());
 </script>
 {#if element}

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

@@ -8,7 +8,7 @@
 <script lang="ts">
 	import { useAvatar } from '../modules/provider.svelte';
-	import { RootContext } from '../modules/root-context.js';
+	import { AvatarRootContext } from '../modules/root-context.js';
 	import { splitProps } from '@zag-js/avatar';
 	import { mergeProps } from '@zag-js/svelte';
@@ -25,7 +25,7 @@
 	const attributes = $derived(mergeProps(avatar().getRootProps(), rest));
-	RootContext.provide(() => avatar());
+	AvatarRootContext.provide(() => avatar());
 </script>
 {#if element}

package/dist/components/avatar/modules/provider.svelte.js CHANGED Viewed

@@ -1,7 +1,12 @@
+import { LocaleProviderRootContext } from '../../locale-provider/modules/root-context.js';
 import { connect, machine } from '@zag-js/avatar';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 export function useAvatar(props) {
-    const service = useMachine(machine, props);
+    const locale = LocaleProviderRootContext.consume();
+    const service = useMachine(machine, () => ({
+        dir: locale().dir,
+        ...(typeof props === 'function' ? props() : props),
+    }));
     const avatar = $derived(connect(service, normalizeProps));
     return () => avatar;
 }

package/dist/components/avatar/modules/root-context.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { createContext } from '../../../internal/create-context.js';
-export const RootContext = createContext();
+export const AvatarRootContext = createContext();

package/dist/components/carousel/anatomy/autoplay-trigger.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CarouselAutoplayTriggerProps = $props();
-	const carousel = RootContext.consume();
+	const carousel = CarouselRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/carousel/anatomy/control.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CarouselControlProps = $props();
-	const carousel = RootContext.consume();
+	const carousel = CarouselRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/carousel/anatomy/indicator-group.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CarouselIndicatorGroupProps = $props();
-	const carousel = RootContext.consume();
+	const carousel = CarouselRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/carousel/anatomy/indicator.svelte CHANGED Viewed

@@ -7,13 +7,13 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { splitIndicatorProps } from '@zag-js/carousel';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CarouselIndicatorProps = $props();
-	const carousel = RootContext.consume();
+	const carousel = CarouselRootContext.consume();
 	const [indicatorProps, componentProps] = $derived(splitIndicatorProps(props));
 	const { element, children, ...rest } = $derived(componentProps);

package/dist/components/carousel/anatomy/item-group.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CarouselItemGroupProps = $props();
-	const carousel = RootContext.consume();
+	const carousel = CarouselRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/carousel/anatomy/item.svelte CHANGED Viewed

@@ -7,13 +7,13 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { splitItemProps } from '@zag-js/carousel';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CarouselItemProps = $props();
-	const carousel = RootContext.consume();
+	const carousel = CarouselRootContext.consume();
 	const [itemProps, componentProps] = $derived(splitItemProps(props));
 	const { element, children, ...rest } = $derived(componentProps);

package/dist/components/carousel/anatomy/next-trigger.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CarouselNextTriggerProps = $props();
-	const carousel = RootContext.consume();
+	const carousel = CarouselRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/carousel/anatomy/prev-trigger.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CarouselPrevTriggerProps = $props();
-	const carousel = RootContext.consume();
+	const carousel = CarouselRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/carousel/anatomy/progress-text.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CarouselProgressTextProps = $props();
-	const carousel = RootContext.consume();
+	const carousel = CarouselRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/carousel/anatomy/root-context.svelte CHANGED Viewed

@@ -8,11 +8,11 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	const props: CarouselRootContextProps = $props();
-	const carousel = RootContext.consume();
+	const carousel = CarouselRootContext.consume();
 	const { children } = $derived(props);
 </script>

package/dist/components/carousel/anatomy/root-context.svelte.d.ts CHANGED Viewed

@@ -3,7 +3,6 @@ import type { Snippet } from 'svelte';
 export interface CarouselRootContextProps {
     children: Snippet<[ReturnType<typeof useCarousel>]>;
 }
-import { RootContext } from '../modules/root-context.js';
 declare const RootContext: import("svelte").Component<CarouselRootContextProps, {}, "">;
 type RootContext = ReturnType<typeof RootContext>;
 export default RootContext;

package/dist/components/carousel/anatomy/root-provider.svelte CHANGED Viewed

@@ -9,7 +9,7 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CarouselRootProviderProps = $props();
@@ -17,7 +17,7 @@
 	const attributes = $derived(mergeProps(carousel().getRootProps(), rest));
-	RootContext.provide(() => carousel());
+	CarouselRootContext.provide(() => carousel());
 </script>
 {#if element}

package/dist/components/carousel/anatomy/root.svelte CHANGED Viewed

@@ -8,7 +8,7 @@
 <script lang="ts">
 	import { useCarousel } from '../modules/provider.svelte';
-	import { RootContext } from '../modules/root-context.js';
+	import { CarouselRootContext } from '../modules/root-context.js';
 	import { splitProps } from '@zag-js/carousel';
 	import { mergeProps } from '@zag-js/svelte';
@@ -25,7 +25,7 @@
 	const attributes = $derived(mergeProps(carousel().getRootProps(), rest));
-	RootContext.provide(() => carousel());
+	CarouselRootContext.provide(() => carousel());
 </script>
 {#if element}

package/dist/components/carousel/modules/provider.svelte.js CHANGED Viewed

@@ -1,7 +1,12 @@
+import { LocaleProviderRootContext } from '../../locale-provider/modules/root-context.js';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 import { connect, machine } from '@zag-js/carousel';
 export function useCarousel(props) {
-    const service = useMachine(machine, props);
+    const locale = LocaleProviderRootContext.consume();
+    const service = useMachine(machine, () => ({
+        dir: locale().dir,
+        ...(typeof props === 'function' ? props() : props),
+    }));
     const carousel = $derived(connect(service, normalizeProps));
     return () => carousel;
 }

package/dist/components/carousel/modules/root-context.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { createContext } from '../../../internal/create-context.js';
-export const RootContext = createContext();
+export const CarouselRootContext = createContext();

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

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CollapsibleRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CollapsibleContentProps = $props();
-	const collapsible = RootContext.consume();
+	const collapsible = CollapsibleRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

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

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CollapsibleRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CollapsibleIndicatorProps = $props();
-	const collapsible = RootContext.consume();
+	const collapsible = CollapsibleRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/collapsible/anatomy/root-context.svelte CHANGED Viewed

@@ -8,11 +8,11 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CollapsibleRootContext } from '../modules/root-context.js';
 	const props: CollapsibleRootContextProps = $props();
-	const collapsible = RootContext.consume();
+	const collapsible = CollapsibleRootContext.consume();
 	const { children } = $derived(props);
 </script>

package/dist/components/collapsible/anatomy/root-context.svelte.d.ts CHANGED Viewed

@@ -3,7 +3,6 @@ import type { Snippet } from 'svelte';
 export interface CollapsibleRootContextProps {
     children: Snippet<[ReturnType<typeof useCollapsible>]>;
 }
-import { RootContext } from '../modules/root-context.js';
 declare const RootContext: import("svelte").Component<CollapsibleRootContextProps, {}, "">;
 type RootContext = ReturnType<typeof RootContext>;
 export default RootContext;

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

@@ -9,7 +9,7 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { CollapsibleRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: CollapsibleRootProviderProps = $props();
@@ -18,7 +18,7 @@
 	const attributes = $derived(mergeProps(collapsible().getRootProps(), rest));
-	RootContext.provide(() => collapsible());
+	CollapsibleRootContext.provide(() => collapsible());
 </script>
 {#if element}

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

@@ -8,7 +8,7 @@
 <script lang="ts">
 	import { useCollapsible } from '../modules/provider.svelte';
-	import { RootContext } from '../modules/root-context.js';
+	import { CollapsibleRootContext } from '../modules/root-context.js';
 	import { splitProps } from '@zag-js/collapsible';
 	import { mergeProps } from '@zag-js/svelte';
@@ -25,7 +25,7 @@
 	const attributes = $derived(mergeProps(collapsible().getRootProps(), rest));
-	RootContext.provide(() => collapsible());
+	CollapsibleRootContext.provide(() => collapsible());
 </script>
 {#if element}