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/collapsible/anatomy/trigger.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: CollapsibleTriggerProps = $props();
-	const collapsible = RootContext.consume();
+	const collapsible = CollapsibleRootContext.consume();
 	const { element, children, ...rest } = $derived(props);

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

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

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

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

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

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

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

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

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

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

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

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

@@ -7,15 +7,15 @@
 </script>
 <script lang="ts">
-	import { ItemGroupContext } from '../modules/item-group-context.js';
-	import { RootContext } from '../modules/root-context.js';
+	import { ComboboxItemGroupContext } from '../modules/item-group-context.js';
+	import { ComboboxRootContext } from '../modules/root-context.js';
 	import { type ItemGroupLabelProps, splitItemGroupLabelProps } from '@zag-js/combobox';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ComboboxItemGroupLabelProps = $props();
-	const combobox = RootContext.consume();
-	const itemGroupProps = ItemGroupContext.consume();
+	const combobox = ComboboxRootContext.consume();
+	const itemGroupProps = ComboboxItemGroupContext.consume();
 	const [itemGroupLabelProps] = $derived(
 		splitItemGroupLabelProps({

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

@@ -7,14 +7,14 @@
 </script>
 <script lang="ts">
-	import { ItemGroupContext } from '../modules/item-group-context.js';
-	import { RootContext } from '../modules/root-context.js';
+	import { ComboboxItemGroupContext } from '../modules/item-group-context.js';
+	import { ComboboxRootContext } from '../modules/root-context.js';
 	import { splitItemGroupProps } from '@zag-js/combobox';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ComboboxItemGroupProps = $props();
-	const combobox = RootContext.consume();
+	const combobox = ComboboxRootContext.consume();
 	const id = $props.id();
 	const [itemGroupProps, componentProps] = $derived(
@@ -27,7 +27,7 @@
 	const attributes = $derived(mergeProps(combobox().getItemGroupProps(itemGroupProps), rest));
-	ItemGroupContext.provide(() => itemGroupProps);
+	ComboboxItemGroupContext.provide(() => itemGroupProps);
 </script>
 {#if element}

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

@@ -7,14 +7,14 @@
 <script lang="ts">
 	import Check from '../../../internal/components/check.svelte';
-	import { ItemContext } from '../modules/item-context.js';
-	import { RootContext } from '../modules/root-context.js';
+	import { ComboboxItemContext } from '../modules/item-context.js';
+	import { ComboboxRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ComboboxItemIndicatorProps = $props();
-	const combobox = RootContext.consume();
-	const itemProps = ItemContext.consume();
+	const combobox = ComboboxRootContext.consume();
+	const itemProps = ComboboxItemContext.consume();
 	const { element, children = check, ...rest } = $derived(props);

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

package/dist/components/combobox/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 { ComboboxItemContext } from '../modules/item-context.js';
+	import { ComboboxRootContext } from '../modules/root-context.js';
 	import { splitItemProps } from '@zag-js/combobox';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ComboboxItemProps = $props();
-	const combobox = RootContext.consume();
+	const combobox = ComboboxRootContext.consume();
 	const [itemProps, componentProps] = $derived(splitItemProps(props));
 	const { element, children, ...rest } = $derived(componentProps);
 	const attributes = $derived(mergeProps(combobox().getItemProps(itemProps), rest));
-	ItemContext.provide(() => itemProps);
+	ComboboxItemContext.provide(() => itemProps);
 </script>
 {#if element}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -7,12 +7,12 @@
 <script lang="ts">
 	import ChevronDownIcon from '../../../internal/components/chevron-down.svelte';
-	import { RootContext } from '../modules/root-context.js';
+	import { ComboboxRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: ComboboxTriggerProps = $props();
-	const combobox = RootContext.consume();
+	const combobox = ComboboxRootContext.consume();
 	const { element, children = chevronDown, ...rest } = $derived(props);

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/date-picker/anatomy/content.svelte CHANGED Viewed

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

package/dist/components/date-picker/anatomy/control.svelte CHANGED Viewed

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

package/dist/components/date-picker/anatomy/input.svelte CHANGED Viewed

@@ -7,13 +7,13 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { DatePickerRootContext } from '../modules/root-context.js';
 	import { splitInputProps } from '@zag-js/date-picker';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: DatePickerInputProps = $props();
-	const datePicker = RootContext.consume();
+	const datePicker = DatePickerRootContext.consume();
 	const [inputProps, componentProps] = $derived(splitInputProps(props));
 	const { element, ...rest } = $derived(componentProps);

package/dist/components/date-picker/anatomy/label.svelte CHANGED Viewed

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

package/dist/components/date-picker/anatomy/month-select.svelte CHANGED Viewed

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

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

@@ -7,14 +7,14 @@
 <script lang="ts">
 	import ChevronRightIcon from '../../../internal/components/chevron-right.svelte';
-	import { RootContext } from '../modules/root-context.js';
-	import { ViewContext } from '../modules/view-context.js';
+	import { DatePickerRootContext } from '../modules/root-context.js';
+	import { DatePickerViewContext } from '../modules/view-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: DatePickerNextTriggerProps = $props();
-	const datePicker = RootContext.consume();
-	const viewProps = ViewContext.consume();
+	const datePicker = DatePickerRootContext.consume();
+	const viewProps = DatePickerViewContext.consume();
 	const { element, children = chevronRight, ...rest } = $derived(props);

package/dist/components/date-picker/anatomy/positioner.svelte CHANGED Viewed

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

package/dist/components/date-picker/anatomy/preset-trigger.svelte CHANGED Viewed

@@ -7,13 +7,13 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { DatePickerRootContext } from '../modules/root-context.js';
 	import { splitPresetTriggerProps } from '@zag-js/date-picker';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: DatePickerPresetTriggerProps = $props();
-	const datePicker = RootContext.consume();
+	const datePicker = DatePickerRootContext.consume();
 	const [presetTriggerProps, componentProps] = $derived(splitPresetTriggerProps(props));
 	const { element, children, ...rest } = $derived(componentProps);

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

@@ -7,14 +7,14 @@
 <script lang="ts">
 	import ChevronLeftIcon from '../../../internal/components/chevron-left.svelte';
-	import { RootContext } from '../modules/root-context.js';
-	import { ViewContext } from '../modules/view-context.js';
+	import { DatePickerRootContext } from '../modules/root-context.js';
+	import { DatePickerViewContext } from '../modules/view-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: DatePickerPrevTriggerProps = $props();
-	const datePicker = RootContext.consume();
-	const viewProps = ViewContext.consume();
+	const datePicker = DatePickerRootContext.consume();
+	const viewProps = DatePickerViewContext.consume();
 	const { element, children = chevronLeft, ...rest } = $derived(props);

package/dist/components/date-picker/anatomy/range-text.svelte CHANGED Viewed

@@ -6,12 +6,12 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
+	import { DatePickerRootContext } from '../modules/root-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: DatePickerRangeTextProps = $props();
-	const datePicker = RootContext.consume();
+	const datePicker = DatePickerRootContext.consume();
 	const rangeText = $derived(Array.from(new Set([datePicker().visibleRangeText.start, datePicker().visibleRangeText.end])).join(' - '));

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

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

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

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

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

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

package/dist/components/date-picker/anatomy/root.svelte CHANGED Viewed

@@ -9,7 +9,7 @@
 <script lang="ts">
 	import { useDatePicker } from '../modules/provider.svelte';
-	import { RootContext } from '../modules/root-context.js';
+	import { DatePickerRootContext } from '../modules/root-context.js';
 	import { splitProps } from '@zag-js/date-picker';
 	import { mergeProps } from '@zag-js/svelte';
@@ -26,7 +26,7 @@
 	const attributes = $derived(mergeProps(datePicker().getRootProps(), rest));
-	RootContext.provide(() => datePicker());
+	DatePickerRootContext.provide(() => datePicker());
 </script>
 {#if element}

package/dist/components/date-picker/anatomy/table-body.svelte CHANGED Viewed

@@ -6,14 +6,14 @@
 </script>
 <script lang="ts">
-	import { RootContext } from '../modules/root-context.js';
-	import { ViewContext } from '../modules/view-context.js';
+	import { DatePickerRootContext } from '../modules/root-context.js';
+	import { DatePickerViewContext } from '../modules/view-context.js';
 	import { mergeProps } from '@zag-js/svelte';
 	const props: DatePickerTableBodyProps = $props();
-	const datePicker = RootContext.consume();
-	const viewProps = ViewContext.consume();
+	const datePicker = DatePickerRootContext.consume();
+	const viewProps = DatePickerViewContext.consume();
 	const { element, children, ...rest } = $derived(props);