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

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

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/slider/anatomy/thumb.svelte CHANGED Viewed

@@ -7,20 +7,20 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
-	import { ThumbContext } from '../modules/thumb-context.js';
+	import { SliderRootContext } from '../modules/root-context.js';
+	import { SliderThumbContext } from '../modules/thumb-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: SliderThumbProps = $props();
-	const slider = RootContext.consume();
+	const slider = SliderRootContext.consume();
 	const [thumbProps, componentProps] = $derived(splitThumbProps(props));
 	const { element, children, ...rest } = $derived(componentProps);
 	const attributes = $derived(mergeProps(slider().getThumbProps(thumbProps), rest));
-	ThumbContext.provide(() => thumbProps);
+	SliderThumbContext.provide(() => thumbProps);
 </script>
 {#if element}

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

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

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

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

package/dist/components/slider/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/slider';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 export function useSlider(props) {
-    const service = useMachine(machine, props);
+    const locale = LocaleProviderRootContext.consume();
+    const service = useMachine(machine, () => ({
+        dir: locale().dir,
+        ...(typeof props === 'function' ? props() : props),
+    }));
     const slider = $derived(connect(service, normalizeProps));
     return () => slider;
 }

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

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

package/dist/components/slider/modules/thumb-context.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import type { ThumbProps } from '@zag-js/slider';
-export declare const ThumbContext: {
-    key: symbol;
+export declare const SliderThumbContext: {
     consume(): () => ThumbProps;
-    provide(value: () => ThumbProps): () => ThumbProps;
+    provide: (context: () => ThumbProps) => () => ThumbProps;
 };

package/dist/components/slider/modules/thumb-context.js CHANGED Viewed

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

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

@@ -7,12 +7,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { StepsRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: StepsContentProps = $props();
-	const steps = RootContext.consume();
+	const steps = StepsRootContext.consume();
 	// @zag-js/steps does not currently provide a splitItemProps function, so manually destructure
 	const { element, children, index, ...rest } = $derived(props);

package/dist/components/steps/anatomy/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 { StepsItemContext } from '../modules/item-context.js';
+	import { StepsRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: StepsIndicatorProps = $props();
-	const steps = RootContext.consume();
-	const itemProps = ItemContext.consume();
+	const steps = StepsRootContext.consume();
+	const itemProps = StepsItemContext.consume();
 	const { element, children, ...rest } = $derived(props);

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

@@ -7,13 +7,13 @@
 </script>
 <script lang="ts">
-	import { ItemContext } from '../modules/item-context.js';
-	import { RootContext } from '../modules/root-context.js';
+	import { StepsItemContext } from '../modules/item-context.js';
+	import { StepsRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: StepsItemProps = $props();
-	const steps = RootContext.consume();
+	const steps = StepsRootContext.consume();
 	// @zag-js/steps does not currently provide a splitItemProps function, so manually destructure
 	const { element, children, index, ...rest } = $derived(props);
@@ -21,7 +21,7 @@
 	const attributes = $derived(mergeProps(steps().getItemProps(itemProps), rest));
-	ItemContext.provide(() => itemProps);
+	StepsItemContext.provide(() => itemProps);
 </script>
 {#if element}

package/dist/components/steps/anatomy/list.svelte CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/steps/anatomy/separator.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 { StepsItemContext } from '../modules/item-context.js';
+	import { StepsRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: StepsSeparatorProps = $props();
-	const steps = RootContext.consume();
-	const itemProps = ItemContext.consume();
+	const steps = StepsRootContext.consume();
+	const itemProps = StepsItemContext.consume();
 	const { element, children, ...rest } = $derived(props);

package/dist/components/steps/anatomy/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 { StepsItemContext } from '../modules/item-context.js';
+	import { StepsRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: StepsTriggerProps = $props();
-	const steps = RootContext.consume();
-	const itemProps = ItemContext.consume();
+	const steps = StepsRootContext.consume();
+	const itemProps = StepsItemContext.consume();
 	const { element, children, ...rest } = $derived(props);

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

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

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

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

package/dist/components/steps/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/steps';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 export function useSteps(props) {
-    const service = useMachine(machine, props);
+    const locale = LocaleProviderRootContext.consume();
+    const service = useMachine(machine, () => ({
+        dir: locale().dir,
+        ...(typeof props === 'function' ? props() : props),
+    }));
     const steps = $derived(connect(service, normalizeProps));
     return () => steps;
 }

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

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

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

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

package/dist/components/switch/anatomy/hidden-input.svelte CHANGED Viewed

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

package/dist/components/switch/anatomy/label.svelte CHANGED Viewed

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

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

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

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

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

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

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

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

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

package/dist/components/switch/anatomy/thumb.svelte CHANGED Viewed

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

package/dist/components/switch/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/switch';
 export function useSwitch(props) {
-    const service = useMachine(machine, props);
+    const locale = LocaleProviderRootContext.consume();
+    const service = useMachine(machine, () => ({
+        dir: locale().dir,
+        ...(typeof props === 'function' ? props() : props),
+    }));
     const switch_ = $derived(connect(service, normalizeProps));
     return () => switch_;
 }

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

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

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

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

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

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

package/dist/components/tabs/anatomy/list.svelte CHANGED Viewed

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

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

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

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

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

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

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

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

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

package/dist/components/tabs/anatomy/trigger.svelte CHANGED Viewed

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

package/dist/components/tabs/modules/anatomy.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import Content from '../anatomy/content.svelte';
 import Indicator from '../anatomy/indicator.svelte';
 import List from '../anatomy/list.svelte';
-import RootContext from '../anatomy/root-context.svelte';
+import TabsRootContext from '../anatomy/root-context.svelte';
 import RootProvider from '../anatomy/root-provider.svelte';
 import Root from '../anatomy/root.svelte';
 import Trigger from '../anatomy/trigger.svelte';
 export const Tabs = Object.assign(Root, {
     Provider: RootProvider,
-    Context: RootContext,
+    Context: TabsRootContext,
     List: List,
     Trigger: Trigger,
     Indicator: Indicator,