@skeletonlabs/skeleton-svelte 4.3.4 → 4.4.1

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

@@ -2,7 +2,7 @@
 	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
 	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
-	export interface ComboboxInputProps extends PropsWithElement<'input'>, HTMLAttributes<'input'> {}
+	export interface ComboboxInputProps extends PropsWithElement<'input'>, HTMLAttributes<'input', 'children'> {}
 </script>
 
 <script lang="ts">

package/dist/components/combobox/anatomy/input.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from '../../../internal/html-attributes.js';
 import type { PropsWithElement } from '../../../internal/props-with-element.js';
-export interface ComboboxInputProps extends PropsWithElement<'input'>, HTMLAttributes<'input'> {
+export interface ComboboxInputProps extends PropsWithElement<'input'>, HTMLAttributes<'input', 'children'> {
 }
 declare const Input: import("svelte").Component<ComboboxInputProps, {}, "">;
 type Input = ReturnType<typeof Input>;

package/dist/components/menu/anatomy/arrow-tip.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface MenuArrowTipProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuArrowTipProps = $props();
+
+	const menu = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getArrowTipProps(),
+			{
+				class: classesMenu.arrowTip,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/anatomy/arrow-tip.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface MenuArrowTipProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const ArrowTip: import("svelte").Component<MenuArrowTipProps, {}, "">;
+type ArrowTip = ReturnType<typeof ArrowTip>;
+export default ArrowTip;
+//# sourceMappingURL=arrow-tip.svelte.d.ts.map

package/dist/components/menu/anatomy/arrow.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface MenuArrowProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuArrowProps = $props();
+
+	const menu = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getArrowProps(),
+			{
+				class: classesMenu.arrow,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/anatomy/arrow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface MenuArrowProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const Arrow: import("svelte").Component<MenuArrowProps, {}, "">;
+type Arrow = ReturnType<typeof Arrow>;
+export default Arrow;
+//# sourceMappingURL=arrow.svelte.d.ts.map

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

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface MenuContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuContentProps = $props();
+
+	const menu = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getContentProps(),
+			{
+				class: classesMenu.content,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/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';
+export interface MenuContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const Content: import("svelte").Component<MenuContentProps, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;
+//# sourceMappingURL=content.svelte.d.ts.map

package/dist/components/menu/anatomy/context-trigger.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface MenuContextTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuContextTriggerProps = $props();
+
+	const menu = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getContextTriggerProps(),
+			{
+				class: classesMenu.contextTrigger,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/menu/anatomy/context-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface MenuContextTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button', 'id' | 'dir'> {
+}
+declare const ContextTrigger: import("svelte").Component<MenuContextTriggerProps, {}, "">;
+type ContextTrigger = ReturnType<typeof ContextTrigger>;
+export default ContextTrigger;
+//# sourceMappingURL=context-trigger.svelte.d.ts.map

package/dist/components/menu/anatomy/indicator.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface MenuIndicatorProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuIndicatorProps = $props();
+
+	const menu = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getIndicatorProps(),
+			{
+				class: classesMenu.indicator,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/anatomy/indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface MenuIndicatorProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const Indicator: import("svelte").Component<MenuIndicatorProps, {}, "">;
+type Indicator = ReturnType<typeof Indicator>;
+export default Indicator;
+//# sourceMappingURL=indicator.svelte.d.ts.map

package/dist/components/menu/anatomy/item-group-label.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { ItemGroupLabelProps } from '@zag-js/menu';
+
+	export interface MenuItemGroupLabelProps
+		extends Omit<ItemGroupLabelProps, 'htmlFor'>,
+			PropsWithElement<'div'>,
+			HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { ItemGroupContext } from '../modules/item-group-context.js';
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { splitItemGroupLabelProps } from '@zag-js/menu';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuItemGroupLabelProps = $props();
+
+	const menu = RootContext.consume();
+	const itemGroupProps = ItemGroupContext.consume();
+
+	const [labelProps, componentProps] = $derived(
+		splitItemGroupLabelProps({
+			htmlFor: itemGroupProps().id,
+			...props,
+		}),
+	);
+	const { element, children, ...rest } = $derived(componentProps);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getItemGroupLabelProps(labelProps),
+			{
+				class: classesMenu.itemGroupLabel,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/anatomy/item-group-label.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { ItemGroupLabelProps } from '@zag-js/menu';
+export interface MenuItemGroupLabelProps extends Omit<ItemGroupLabelProps, 'htmlFor'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const ItemGroupLabel: import("svelte").Component<MenuItemGroupLabelProps, {}, "">;
+type ItemGroupLabel = ReturnType<typeof ItemGroupLabel>;
+export default ItemGroupLabel;
+//# sourceMappingURL=item-group-label.svelte.d.ts.map

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

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { ItemGroupProps } from '@zag-js/menu';
+
+	export interface MenuItemGroupProps extends Omit<ItemGroupProps, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { ItemGroupContext } from '../modules/item-group-context.js';
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { splitItemGroupProps } from '@zag-js/menu';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuItemGroupProps = $props();
+
+	const menu = RootContext.consume();
+
+	const id = $props.id();
+	const [itemGroupProps, componentProps] = $derived(
+		splitItemGroupProps({
+			id,
+			...props,
+		}),
+	);
+	const { element, children, ...rest } = $derived(componentProps);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getItemGroupProps(itemGroupProps),
+			{
+				class: classesMenu.itemGroup,
+			},
+			rest,
+		),
+	);
+
+	ItemGroupContext.provide(() => itemGroupProps);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/anatomy/item-group.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { ItemGroupProps } from '@zag-js/menu';
+export interface MenuItemGroupProps extends Omit<ItemGroupProps, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const ItemGroup: import("svelte").Component<MenuItemGroupProps, {}, "">;
+type ItemGroup = ReturnType<typeof ItemGroup>;
+export default ItemGroup;
+//# sourceMappingURL=item-group.svelte.d.ts.map

package/dist/components/menu/anatomy/item-indicator.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';
+
+	export interface MenuItemIndicatorProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { ItemContext } from '../modules/item-context.js';
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuItemIndicatorProps = $props();
+
+	const menu = RootContext.consume();
+	const itemProps = ItemContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getItemIndicatorProps(itemProps()),
+			{
+				class: classesMenu.itemIndicator,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/anatomy/item-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface MenuItemIndicatorProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const ItemIndicator: import("svelte").Component<MenuItemIndicatorProps, {}, "">;
+type ItemIndicator = ReturnType<typeof ItemIndicator>;
+export default ItemIndicator;
+//# sourceMappingURL=item-indicator.svelte.d.ts.map

package/dist/components/menu/anatomy/item-text.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';
+
+	export interface MenuItemTextProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { ItemContext } from '../modules/item-context.js';
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuItemTextProps = $props();
+
+	const menu = RootContext.consume();
+	const itemProps = ItemContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getItemTextProps(itemProps()),
+			{
+				class: classesMenu.itemText,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/anatomy/item-text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface MenuItemTextProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const ItemText: import("svelte").Component<MenuItemTextProps, {}, "">;
+type ItemText = ReturnType<typeof ItemText>;
+export default ItemText;
+//# sourceMappingURL=item-text.svelte.d.ts.map

package/dist/components/menu/anatomy/item.svelte

@@ -0,0 +1,42 @@
+<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/menu';
+
+	export interface MenuItemProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { ItemContext } from '../modules/item-context.js';
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { splitItemProps } from '@zag-js/menu';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuItemProps = $props();
+
+	const menu = RootContext.consume();
+
+	const [itemProps, componentProps] = $derived(splitItemProps(props));
+	const { element, children, ...rest } = $derived(componentProps);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getItemProps(itemProps),
+			{
+				class: classesMenu.item,
+			},
+			rest,
+		),
+	);
+
+	ItemContext.provide(() => itemProps);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/anatomy/item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { ItemProps } from '@zag-js/menu';
+export interface MenuItemProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const Item: import("svelte").Component<MenuItemProps, {}, "">;
+type Item = ReturnType<typeof Item>;
+export default Item;
+//# sourceMappingURL=item.svelte.d.ts.map

package/dist/components/menu/anatomy/option-item.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { OptionItemProps } from '@zag-js/menu';
+
+	export interface MenuOptionItemProps extends OptionItemProps, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { ItemContext } from '../modules/item-context.js';
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { splitOptionItemProps } from '@zag-js/menu';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuOptionItemProps = $props();
+
+	const menu = RootContext.consume();
+
+	const [itemProps, componentProps] = $derived(splitOptionItemProps(props));
+	const { element, children, ...rest } = $derived(componentProps);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getOptionItemProps(itemProps),
+			{
+				class: classesMenu.item,
+			},
+			rest,
+		),
+	);
+
+	ItemContext.provide(() => itemProps);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/anatomy/option-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { OptionItemProps } from '@zag-js/menu';
+export interface MenuOptionItemProps extends OptionItemProps, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const OptionItem: import("svelte").Component<MenuOptionItemProps, {}, "">;
+type OptionItem = ReturnType<typeof OptionItem>;
+export default OptionItem;
+//# sourceMappingURL=option-item.svelte.d.ts.map

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

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface MenuPositionerProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesMenu } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: MenuPositionerProps = $props();
+
+	const menu = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			menu().getPositionerProps(),
+			{
+				class: classesMenu.positioner,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/menu/anatomy/positioner.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface MenuPositionerProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const Positioner: import("svelte").Component<MenuPositionerProps, {}, "">;
+type Positioner = ReturnType<typeof Positioner>;
+export default Positioner;
+//# sourceMappingURL=positioner.svelte.d.ts.map

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

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+	import type { useMenu } from '../modules/provider.svelte.js';
+	import type { Snippet } from 'svelte';
+
+	export interface MenuRootContextProps {
+		children: Snippet<[ReturnType<typeof useMenu>]>;
+	}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+
+	const props: MenuRootContextProps = $props();
+
+	const menu = RootContext.consume();
+
+	const { children } = $derived(props);
+</script>
+
+{@render children(menu)}

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

@@ -0,0 +1,10 @@
+import type { useMenu } from '../modules/provider.svelte.js';
+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;
+//# sourceMappingURL=root-context.svelte.d.ts.map