ui-ingredients 0.0.20 → 0.0.21

package/dist/file-upload/item-name.svelte

@@ -1,3 +1,25 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadItemNameProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadItemNameProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+  let itemProps = fileUploadItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemNameProps(itemProps)));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {itemProps.file.name}
+  {/if}
+</div>

package/dist/file-upload/item-name.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ItemName: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ItemName: $$__sveltets_2_IsomorphicComponent<FileUploadItemNameProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ItemName = InstanceType<typeof ItemName>;
 export default ItemName;

package/dist/file-upload/item-preview-image.svelte

@@ -1,3 +1,27 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadItemPreviewImageProps extends HtmlProps<'img'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
+
+  let {...props}: FileUploadItemPreviewImageProps = $props();
+
+  let url = $state('');
+
+  let fileUpload = fileUploadContext.get();
+  let itemProps = fileUploadItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemPreviewImageProps({url, ...itemProps})));
+
+  $effect(() => {
+    fileUpload.createFileUrl(itemProps.file, (result) => {
+      url = result;
+    });
+  });
+</script>
+
+<img {...attrs} />

package/dist/file-upload/item-preview-image.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ItemPreviewImage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ItemPreviewImage: $$__sveltets_2_IsomorphicComponent<FileUploadItemPreviewImageProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ItemPreviewImage = InstanceType<typeof ItemPreviewImage>;
 export default ItemPreviewImage;

package/dist/file-upload/item-preview.svelte

@@ -1,3 +1,21 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadItemPreviewProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadItemPreviewProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+  let itemProps = fileUploadItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemPreviewProps(itemProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/file-upload/item-preview.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ItemPreview: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ItemPreview: $$__sveltets_2_IsomorphicComponent<FileUploadItemPreviewProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ItemPreview = InstanceType<typeof ItemPreview>;
 export default ItemPreview;

package/dist/file-upload/item-size-text.svelte

@@ -1,3 +1,25 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadItemSizeTextProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadItemSizeTextProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+  let itemProps = fileUploadItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemSizeTextProps(itemProps)));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {fileUpload.getFileSize(itemProps.file)}
+  {/if}
+</div>

package/dist/file-upload/item-size-text.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ItemSizeText: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ItemSizeText: $$__sveltets_2_IsomorphicComponent<FileUploadItemSizeTextProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ItemSizeText = InstanceType<typeof ItemSizeText>;
 export default ItemSizeText;

package/dist/file-upload/item.svelte

@@ -1,3 +1,26 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {ItemProps} from '@zag-js/file-upload';
 
-<script lang="ts"></script>
+  export interface FileUploadItemProps extends Assign<HtmlProps<'div'>, ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext, fileUploadItemPropsContext} from './context.svelte.js';
+
+  let {file, children, ...props}: FileUploadItemProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+  let itemProps: ItemProps = $derived({
+    file,
+  });
+
+  let attrs = $derived(mergeProps(props, fileUpload.getItemProps(itemProps)));
+
+  fileUploadItemPropsContext.set(() => itemProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/file-upload/item.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Item: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Item: $$__sveltets_2_IsomorphicComponent<FileUploadItemProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Item = InstanceType<typeof Item>;
 export default Item;

package/dist/file-upload/label.svelte

@@ -1,3 +1,20 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadLabelProps extends HtmlProps<'label'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadLabelProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getLabelProps()));
+</script>
+
+<label {...attrs}>
+  {@render children?.()}
+</label>

package/dist/file-upload/label.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Label: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Label: $$__sveltets_2_IsomorphicComponent<FileUploadLabelProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Label = InstanceType<typeof Label>;
 export default Label;

package/dist/file-upload/root.svelte

@@ -1,3 +1,68 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {CreateFileUploadProps, CreateFileUploadReturn} from './create-file-upload.svelte.js';
 
-<script lang="ts"></script>
+  export interface FileUploadProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateFileUploadProps> {
+    children?: Snippet<[fileUpload: CreateFileUploadReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext} from './context.svelte.js';
+  import {createFileUpload} from './create-file-upload.svelte.js';
+
+  let {
+    id,
+    ids,
+    name,
+    accept,
+    locale,
+    capture,
+    required,
+    disabled,
+    validate,
+    allowDrop,
+    directory,
+    maxFiles,
+    maxFileSize,
+    minFileSize,
+    onFileAccept,
+    onFileChange,
+    onFileReject,
+    translations,
+    children,
+    ...props
+  }: FileUploadProps = $props();
+
+  let fileUpload = createFileUpload({
+    id,
+    ids,
+    name,
+    accept,
+    locale,
+    capture,
+    required,
+    disabled,
+    validate,
+    allowDrop,
+    directory,
+    maxFiles,
+    maxFileSize,
+    minFileSize,
+    onFileAccept,
+    onFileChange,
+    onFileReject,
+    translations,
+  });
+
+  let attrs = $derived(mergeProps(props, fileUpload.getRootProps()));
+
+  fileUploadContext.set(fileUpload);
+</script>
+
+<div {...attrs}>
+  {@render children?.(fileUpload)}
+</div>

package/dist/file-upload/root.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Root: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Root: $$__sveltets_2_IsomorphicComponent<FileUploadProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Root = InstanceType<typeof Root>;
 export default Root;

package/dist/file-upload/trigger.svelte

@@ -1,3 +1,20 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface FileUploadTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {fileUploadContext} from './context.svelte.js';
+
+  let {children, ...props}: FileUploadTriggerProps = $props();
+
+  let fileUpload = fileUploadContext.get();
+
+  let attrs = $derived(mergeProps(props, fileUpload.getTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/file-upload/trigger.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Trigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Trigger: $$__sveltets_2_IsomorphicComponent<FileUploadTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Trigger = InstanceType<typeof Trigger>;
 export default Trigger;

package/dist/hover-card/arrow-tip.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: HoverCardArrowTipProps = $props();
 
-  let context = hoverCardContext.get();
+  let hoverCard = hoverCardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
+  let attrs = $derived(mergeProps(props, hoverCard.getArrowTipProps()));
 </script>
 
 <div {...attrs}>

package/dist/hover-card/arrow.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: HoverCardArrowProps = $props();
 
-  let context = hoverCardContext.get();
+  let hoverCard = hoverCardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowProps()));
+  let attrs = $derived(mergeProps(props, hoverCard.getArrowProps()));
 </script>
 
 <div {...attrs}>

package/dist/hover-card/content.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: HoverCardContentProps = $props();
 
-  let context = hoverCardContext.get();
+  let hoverCard = hoverCardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getContentProps()));
+  let attrs = $derived(mergeProps(props, hoverCard.getContentProps()));
 </script>
 
 <div {...attrs}>

package/dist/hover-card/create-hover-card.svelte.js

@@ -4,14 +4,14 @@ import { createUniqueId } from '../utils.svelte.js';
 import * as hoverCard from '@zag-js/hover-card';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createHoverCard(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(hoverCard.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
+        dir: locale?.dir,
         open: props.defaultOpen,
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
     }));
     const api = $derived(reflect(() => hoverCard.connect(state, send, normalizeProps)));

package/dist/hover-card/positioner.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: HoverCardPositionerProps = $props();
 
-  let context = hoverCardContext.get();
+  let hoverCard = hoverCardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPositionerProps()));
+  let attrs = $derived(mergeProps(props, hoverCard.getPositionerProps()));
 </script>
 
 <div {...attrs}>

package/dist/hover-card/root.svelte

@@ -3,7 +3,7 @@
   import type {CreateHoverCardProps, CreateHoverCardReturn} from './create-hover-card.svelte.js';
 
   export interface HoverCardProps extends CreateHoverCardProps {
-    children?: Snippet<[api: CreateHoverCardReturn]>;
+    children?: Snippet<[hoverCard: CreateHoverCardReturn]>;
   }
 </script>
 
@@ -13,9 +13,9 @@
 
   let {id, children, ...props}: HoverCardProps = $props();
 
-  let context = createHoverCard({id, ...props});
+  let hoverCard = createHoverCard({id, ...props});
 
-  hoverCardContext.set(context);
+  hoverCardContext.set(hoverCard);
 </script>
 
-{@render children?.(context)}
+{@render children?.(hoverCard)}

package/dist/hover-card/trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: HoverCardTriggerProps = $props();
 
-  let context = hoverCardContext.get();
+  let hoverCard = hoverCardContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+  let attrs = $derived(mergeProps(props, hoverCard.getTriggerProps()));
 </script>
 
 <a {...attrs}>

package/dist/locale-provider/root.svelte

@@ -13,12 +13,12 @@
 
   let {children, ...props}: LocaleProviderProps = $props();
 
-  let context: Locale = $derived({
+  let locale: Locale = $derived({
     locale: props.locale,
     dir: isRTL(props.locale) ? 'rtl' : 'ltr',
   });
 
-  localeContext.set(() => context);
+  localeContext.set(() => locale);
 </script>
 
 {@render children()}

package/dist/menu/arrow-tip.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuArrowTipProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
+  let attrs = $derived(mergeProps(props, menu.getArrowTipProps()));
 </script>
 
 <div {...attrs}>

package/dist/menu/arrow.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuArrowProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowProps()));
+  let attrs = $derived(mergeProps(props, menu.getArrowProps()));
 </script>
 
 <div {...attrs}>

package/dist/menu/context-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuContextTriggerProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getContextTriggerProps()));
+  let attrs = $derived(mergeProps(props, menu.getContextTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/menu/create-menu.svelte.js

@@ -4,14 +4,14 @@ import { createUniqueId } from '../utils.svelte.js';
 import * as menu from '@zag-js/menu';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createMenu(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(menu.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
+        dir: locale?.dir,
         open: props.defaultOpen,
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
     }));
     const api = $derived(reflect(() => menu.connect(state, send, normalizeProps)));

package/dist/menu/indicator.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: MenuIndicatorProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
+  let attrs = $derived(mergeProps(props, menu.getIndicatorProps()));
 </script>
 
 <span {...attrs}>

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

@@ -10,14 +10,13 @@
 
   let {children, ...props}: MenuItemGroupLabelProps = $props();
 
-  let context = menuContext.get();
-
+  let menu = menuContext.get();
   let itemGroupProps = menuItemGroupPropsContext.get();
 
   let attrs = $derived(
     mergeProps(
       props,
-      context.getItemGroupLabelProps({
+      menu.getItemGroupLabelProps({
         htmlFor: itemGroupProps.id,
       }),
     ),

package/dist/menu/item-group.svelte

@@ -13,7 +13,7 @@
 
   let {id, children, ...props}: MenuItemGroupProps = $props();
 
-  let context = menuContext.get();
+  let menu = menuContext.get();
 
   let uid = createUniqueId();
 
@@ -21,7 +21,7 @@
     id: id ?? uid,
   });
 
-  let attrs = $derived(mergeProps(props, context.getItemGroupProps(itemGroupProps)));
+  let attrs = $derived(mergeProps(props, menu.getItemGroupProps(itemGroupProps)));
 
   menuItemGroupPropsContext.set(() => itemGroupProps);
 </script>