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/menu/anatomy/option-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 { MenuItemContext } from '../modules/item-context.js';
+	import { MenuRootContext } from '../modules/root-context.js';
 	import { splitOptionItemProps } from '@zag-js/menu';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: MenuOptionItemProps = $props();
-	const menu = RootContext.consume();
+	const menu = MenuRootContext.consume();
 	const [itemProps, componentProps] = $derived(splitOptionItemProps(props));
 	const { element, children, ...rest } = $derived(componentProps);
 	const attributes = $derived(mergeProps(menu().getOptionItemProps(itemProps), rest));
-	ItemContext.provide(() => itemProps);
+	MenuItemContext.provide(() => itemProps);
 </script>
 {#if element}

package/dist/components/menu/anatomy/positioner.svelte CHANGED Viewed

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

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

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

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

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

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

@@ -9,12 +9,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
-	import { TriggerItemContext } from '../modules/trigger-item-context.js';
+	import { MenuRootContext } from '../modules/root-context.js';
+	import { MenuTriggerItemContext } from '../modules/trigger-item-context.js';
 	const props: MenuRootProviderProps = $props();
-	const parentMenu = RootContext.consume();
+	const parentMenu = MenuRootContext.consume();
 	const { children, value: menu } = $derived(props);
@@ -28,8 +28,8 @@
 		}),
 	);
-	RootContext.provide(() => menu());
-	TriggerItemContext.provide(() => parentMenu?.().getTriggerItemProps(menu()));
+	MenuRootContext.provide(() => menu());
+	MenuTriggerItemContext.provide(() => parentMenu?.().getTriggerItemProps(menu()));
 </script>
 {@render children?.()}

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

@@ -8,14 +8,14 @@
 <script lang="ts">
 	import { useMenu } from '../modules/provider.svelte';
-	import { RootContext } from '../modules/root-context.js';
-	import { TriggerItemContext } from '../modules/trigger-item-context.js';
+	import { MenuRootContext } from '../modules/root-context.js';
+	import { MenuTriggerItemContext } from '../modules/trigger-item-context.js';
 	import { splitProps } from '@zag-js/menu';
 	import { untrack } from 'svelte';
 	const props: MenuRootProps = $props();
-	const parentMenu = RootContext.consume();
+	const parentMenu = MenuRootContext.consume();
 	const [menuProps, componentProps] = $derived(splitProps(props));
 	const { children } = $derived(componentProps);
@@ -36,8 +36,8 @@
 		}),
 	);
-	RootContext.provide(() => menu());
-	TriggerItemContext.provide(() => parentMenu?.().getTriggerItemProps(menu()));
+	MenuRootContext.provide(() => menu());
+	MenuTriggerItemContext.provide(() => parentMenu?.().getTriggerItemProps(menu()));
 </script>
 {@render children?.()}

package/dist/components/menu/anatomy/separator.svelte CHANGED Viewed

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

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

@@ -6,21 +6,21 @@
 </script>
 <script lang="ts">
-	import { ItemContext } from '../modules/item-context.js';
-	import { TriggerItemContext } from '../modules/trigger-item-context.js';
+	import { MenuItemContext } from '../modules/item-context.js';
+	import { MenuTriggerItemContext } from '../modules/trigger-item-context.js';
 	import { splitItemProps, type ItemProps } from '@zag-js/menu';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: MenuTriggerItemProps = $props();
-	const triggerItemProps = TriggerItemContext.consume();
+	const triggerItemProps = MenuTriggerItemContext.consume();
 	const [itemProps, componentProps] = $derived(splitItemProps(props));
 	const { element, children, ...rest } = $derived(componentProps);
 	const attributes = $derived(mergeProps(triggerItemProps(), rest));
-	ItemContext.provide(() => itemProps);
+	MenuItemContext.provide(() => itemProps);
 </script>
 {#if element}

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 import type { ItemGroupProps } from '@zag-js/menu';
-export declare const ItemGroupContext: {
-    key: symbol;
+export declare const MenuItemGroupContext: {
     consume(): () => ItemGroupProps;
-    provide(value: () => ItemGroupProps): () => ItemGroupProps;
+    provide: (context: () => ItemGroupProps) => () => ItemGroupProps;
 };

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 import type { useMenu } from './provider.svelte.js';
-export declare const TriggerItemContext: {
-    key: symbol;
+export declare const MenuTriggerItemContext: {
     consume(): () => ReturnType<ReturnType<ReturnType<typeof useMenu>>["getTriggerItemProps"]>;
-    provide(value: () => ReturnType<ReturnType<ReturnType<typeof useMenu>>["getTriggerItemProps"]>): () => ReturnType<ReturnType<ReturnType<typeof useMenu>>["getTriggerItemProps"]>;
+    provide: (context: () => ReturnType<ReturnType<ReturnType<typeof useMenu>>["getTriggerItemProps"]>) => () => ReturnType<ReturnType<ReturnType<typeof useMenu>>["getTriggerItemProps"]>;
 };

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

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

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

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

package/dist/components/navigation/anatomy/footer.svelte CHANGED Viewed

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

package/dist/components/navigation/anatomy/group.svelte CHANGED Viewed

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

package/dist/components/navigation/anatomy/header.svelte CHANGED Viewed

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

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

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

package/dist/components/navigation/anatomy/menu.svelte CHANGED Viewed

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

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

@@ -1,6 +1,7 @@
 <script lang="ts" module>
 	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
 	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import { LocaleProviderRootContext } from '../../locale-provider/modules/root-context.js';
 	export interface NavigationRootProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
 		/**
@@ -13,15 +14,19 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { NavigationRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: NavigationRootProps = $props();
+	const locale = LocaleProviderRootContext.consume();
 	const { layout = 'bar', element, children, ...rest } = $derived(props);
 	const attributes = $derived(
 		mergeProps(
 			{
+				dir: locale().dir,
 				'data-scope': 'navigation',
 				'data-part': 'root',
 				'data-layout': layout,
@@ -30,7 +35,7 @@
 		),
 	);
-	RootContext.provide(() => ({ layout }));
+	NavigationRootContext.provide(() => ({ layout }));
 </script>
 {#if element}

package/dist/components/navigation/anatomy/trigger-anchor.svelte CHANGED Viewed

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

package/dist/components/navigation/anatomy/trigger-text.svelte CHANGED Viewed

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

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

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

package/dist/components/navigation/modules/root-context.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import type { NavigationRootProps } from '../anatomy/root.svelte';
-export declare const RootContext: {
-    key: symbol;
+export declare const NavigationRootContext: {
     consume(): () => Pick<NavigationRootProps, "layout">;
-    provide(value: () => Pick<NavigationRootProps, "layout">): () => Pick<NavigationRootProps, "layout">;
+    provide: (context: () => Pick<NavigationRootProps, "layout">) => () => Pick<NavigationRootProps, "layout">;
 };

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

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

package/dist/components/pagination/anatomy/ellipsis.svelte CHANGED Viewed

@@ -7,12 +7,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { PaginationRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: PaginationEllipsisProps = $props();
-	const pagination = RootContext.consume();
+	const pagination = PaginationRootContext.consume();
 	const [ellipsisProps, componentProps] = $derived(splitEllipsisProps(props));
 	const { element, children, ...rest } = $derived(componentProps);

package/dist/components/pagination/anatomy/first-trigger.svelte CHANGED Viewed

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

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

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

package/dist/components/pagination/anatomy/last-trigger.svelte CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/popover/anatomy/anchor.svelte CHANGED Viewed

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