ui-ingredients 0.31.2 → 1.0.0

package/dist/editable/editable-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateEditableProps,
     CreateEditableReturn,
@@ -8,7 +8,7 @@
   export interface EditableProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateEditableReturn>,
-      CreateEditableProps
+      Optional<CreateEditableProps, 'id'>
     > {}
 </script>
 
@@ -20,22 +20,25 @@
   import {setEditableContext} from './editable-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: EditableProps = $props();
 
+  let uid = $props.id();
+
   let [createEditableProps, localProps] = $derived(
-    createSplitProps<CreateEditableProps>([
+    createSplitProps<Omit<CreateEditableProps, 'id'>>([
       'activationMode',
       'autoResize',
+      'defaultEdit',
+      'defaultValue',
       'disabled',
       'edit',
-      'editControlled',
       'finalFocusEl',
       'form',
-      'id',
       'ids',
       'invalid',
       'maxLength',
@@ -57,7 +60,10 @@
     ])(props),
   );
 
-  let editable = createEditable(reflect(() => createEditableProps));
+  let editable = createEditable(
+    reflect(() => ({...createEditableProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(mergeProps(editable.getRootProps(), localProps));
 
   setEditableContext(editable);

package/dist/editable/editable-root.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateEditableProps, CreateEditableReturn } from './create-editable.svelte.js';
-export interface EditableProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateEditableReturn>, CreateEditableProps> {
+export interface EditableProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateEditableReturn>, Optional<CreateEditableProps, 'id'>> {
 }
 declare const EditableRoot: import("svelte").Component<EditableProps, {}, "ref">;
 type EditableRoot = ReturnType<typeof EditableRoot>;

package/dist/field/create-field.svelte.d.ts

@@ -5,9 +5,10 @@ interface ElementIds {
     control?: string;
     errorText?: string;
     helperText?: string;
+    requiredIndicator?: string;
 }
 export interface CreateFieldProps {
-    id?: string;
+    id: string;
     ids?: ElementIds;
     invalid?: boolean;
     required?: boolean;

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

@@ -1,21 +1,22 @@
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 import { ariaAttr, dataAttr, getDocument, getWindow } from '@zag-js/dom-query';
 import { reflect } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 import { parts } from './field-anatomy.js';
 export function createField(props) {
+    const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id_ = createUniqueId();
     const { 
     /**/
     ids, invalid, disabled, required, readOnly, } = $derived.by(() => {
-        const id = props.id ?? id_;
+        const id = props.id;
         const ids = {
             root: props.ids?.root ?? `field:${id}`,
             label: props.ids?.label ?? `field:${id}:label`,
             control: props.ids?.control ?? `field:${id}:control`,
             errorText: props.ids?.errorText ?? `field:${id}:error-text`,
             helperText: props.ids?.helperText ?? `field:${id}:helper-text`,
+            requiredIndicator: props.ids?.requiredIndicator ?? `field:${id}:required-indicator`,
         };
         return {
             ids,
@@ -41,6 +42,7 @@ export function createField(props) {
         return {
             ...parts.root.attrs,
             id: ids.root,
+            dir: locale?.dir,
             role: 'group',
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
@@ -52,6 +54,7 @@ export function createField(props) {
         return {
             ...parts.label.attrs,
             id: ids.label,
+            dir: locale?.dir,
             for: ids.control,
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
@@ -62,6 +65,8 @@ export function createField(props) {
     function getRequiredIndicatorProps() {
         return {
             ...parts.requiredIndicator.attrs,
+            id: ids.requiredIndicator,
+            dir: locale?.dir,
             hidden: !required,
             'aria-hidden': true,
             'data-invalid': dataAttr(invalid),
@@ -73,6 +78,7 @@ export function createField(props) {
         return {
             ...parts.errorText.attrs,
             id: ids.errorText,
+            dir: locale?.dir,
             hidden: !hasErrorText,
             'aria-live': 'polite',
             'data-invalid': dataAttr(invalid),
@@ -85,6 +91,7 @@ export function createField(props) {
         return {
             ...parts.helperText.attrs,
             id: ids.helperText,
+            dir: locale?.dir,
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
@@ -94,6 +101,7 @@ export function createField(props) {
     function getControlProps() {
         return {
             id: ids.control,
+            dir: locale?.dir,
             disabled,
             required,
             'aria-describedby': ariaDescribedby,

package/dist/field/field-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateFieldProps,
     CreateFieldReturn,
@@ -8,7 +8,7 @@
   export interface FieldProps
     extends Assign<
         HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>,
-        CreateFieldProps
+        Optional<CreateFieldProps, 'id'>
       >,
       PresenceStrategyProps {}
 </script>
@@ -23,30 +23,35 @@
   import {setFieldContext} from './field-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: FieldProps = $props();
 
-  let [presenceStrategyProps, rest] = $derived(
+  let uid = $props.id();
+
+  let [presenceStrategyProps, fieldProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['keepMounted', 'lazyMount'])(
       props,
     ),
   );
 
   let [createFieldProps, localProps] = $derived(
-    createSplitProps<CreateFieldProps>([
-      'id',
+    createSplitProps<Omit<CreateFieldProps, 'id'>>([
       'ids',
       'invalid',
       'disabled',
       'readOnly',
       'required',
-    ])(rest),
+    ])(fieldProps),
+  );
+
+  let field = createField(
+    reflect(() => ({...createFieldProps, id: id ?? uid})),
   );
 
-  let field = createField(reflect(() => createFieldProps));
   let mergedProps = $derived(mergeProps(field.getRootProps(), localProps));
 
   setFieldContext(field);

package/dist/field/field-root.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateFieldProps, CreateFieldReturn } from './create-field.svelte.js';
-export interface FieldProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>, CreateFieldProps>, PresenceStrategyProps {
+export interface FieldProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>, Optional<CreateFieldProps, 'id'>>, PresenceStrategyProps {
 }
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
 declare const FieldRoot: import("svelte").Component<FieldProps, {}, "ref">;

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

@@ -1,6 +1,5 @@
 import * as fileUpload from '@zag-js/file-upload';
-export interface CreateFileUploadProps extends Omit<fileUpload.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateFileUploadProps extends Omit<fileUpload.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateFileUploadReturn extends fileUpload.Api<any> {
 }

package/dist/file-upload/create-file-upload.svelte.js

@@ -1,16 +1,13 @@
 import * as fileUpload from '@zag-js/file-upload';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 import { getFieldContext } from '../field/field-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createFileUpload(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(fileUpload.machine, () => ({
         dir: locale?.dir,
         ids: {
             label: field?.ids.label,
@@ -23,15 +20,14 @@ export function createFileUpload(props) {
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(fileUpload.machine(context), { context });
     return reflect(() => {
-        const o = fileUpload.connect(state, send, normalizeProps);
+        const api = fileUpload.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getHiddenInputProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],
-                    ...o.getHiddenInputProps(),
+                    ...api.getHiddenInputProps(),
                 };
             },
         };

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateFileUploadProps,
     CreateFileUploadReturn,
@@ -8,7 +8,7 @@
   export interface FileUploadProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateFileUploadReturn>,
-      CreateFileUploadProps
+      Optional<CreateFileUploadProps, 'id'>
     > {}
 </script>
 
@@ -20,27 +20,28 @@
   import {setFileUploadContext} from './file-upload-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: FileUploadProps = $props();
 
+  let uid = $props.id();
+
   let [createFileUploadProps, localProps] = $derived(
-    createSplitProps<CreateFileUploadProps>([
+    createSplitProps<Omit<CreateFileUploadProps, 'id'>>([
       'accept',
       'allowDrop',
       'capture',
       'directory',
       'disabled',
-      'id',
       'ids',
       'invalid',
       'locale',
       'maxFileSize',
       'maxFiles',
       'minFileSize',
-      'minFileSize',
       'name',
       'onFileAccept',
       'onFileChange',
@@ -52,7 +53,9 @@
     ])(props),
   );
 
-  let fileUpload = createFileUpload(reflect(() => createFileUploadProps));
+  let fileUpload = createFileUpload(
+    reflect(() => ({...createFileUploadProps, id: id ?? uid})),
+  );
 
   let mergedProps = $derived(mergeProps(fileUpload.getRootProps(), localProps));
 

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

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateFileUploadProps, CreateFileUploadReturn } from './create-file-upload.svelte.js';
-export interface FileUploadProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateFileUploadReturn>, CreateFileUploadProps> {
+export interface FileUploadProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateFileUploadReturn>, Optional<CreateFileUploadProps, 'id'>> {
 }
 declare const FileUploadRoot: import("svelte").Component<FileUploadProps, {}, "ref">;
 type FileUploadRoot = ReturnType<typeof FileUploadRoot>;

package/dist/floating-panel/create-floating-panel.svelte.d.ts

@@ -1,6 +1,5 @@
 import * as floatingPanel from '@zag-js/floating-panel';
-export interface CreateFloatingPanelProps extends Omit<floatingPanel.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateFloatingPanelProps extends Omit<floatingPanel.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateFloatingPanelReturn extends floatingPanel.Api {
 }

package/dist/floating-panel/create-floating-panel.svelte.js

@@ -1,18 +1,14 @@
 import * as floatingPanel from '@zag-js/floating-panel';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createFloatingPanel(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(floatingPanel.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(floatingPanel.machine(context), { context });
-    return reflect(() => floatingPanel.connect(state, send, normalizeProps));
+    return reflect(() => floatingPanel.connect(service, normalizeProps));
 }

package/dist/floating-panel/floating-panel-anatomy.d.ts

@@ -1 +1 @@
-export { anatomy } from '@zag-js/floating-panel';
+export { floating as anatomy } from '@zag-js/floating-panel';

package/dist/floating-panel/floating-panel-anatomy.js

@@ -1 +1 @@
-export { anatomy } from '@zag-js/floating-panel';
+export { floating as anatomy } from '@zag-js/floating-panel';

package/dist/floating-panel/floating-panel-root.svelte

@@ -1,13 +1,14 @@
 <script lang="ts" module>
   import type {Snippet} from 'svelte';
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Optional} from '../types.js';
   import type {
     CreateFloatingPanelProps,
     CreateFloatingPanelReturn,
   } from './create-floating-panel.svelte.js';
 
   export interface FloatingPanelProps
-    extends CreateFloatingPanelProps,
+    extends Optional<CreateFloatingPanelProps, 'id'>,
       PresenceStrategyProps {
     children?: Snippet<[CreateFloatingPanelReturn]>;
   }
@@ -21,7 +22,9 @@
   import {createFloatingPanel} from './create-floating-panel.svelte.js';
   import {setFloatingPanelContext} from './floating-panel-context.svelte.js';
 
-  let {children, ...props}: FloatingPanelProps = $props();
+  let {id, children, ...props}: FloatingPanelProps = $props();
+
+  let uid = $props.id();
 
   let [presenceStrategyProps, createFloatingPanelProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
@@ -30,7 +33,7 @@
   );
 
   let floatingPanel = createFloatingPanel(
-    reflect(() => createFloatingPanelProps),
+    reflect(() => ({...createFloatingPanelProps, id: id ?? uid})),
   );
 
   let presence = createPresence(

package/dist/floating-panel/floating-panel-root.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Optional } from '../types.js';
 import type { CreateFloatingPanelProps, CreateFloatingPanelReturn } from './create-floating-panel.svelte.js';
-export interface FloatingPanelProps extends CreateFloatingPanelProps, PresenceStrategyProps {
+export interface FloatingPanelProps extends Optional<CreateFloatingPanelProps, 'id'>, PresenceStrategyProps {
     children?: Snippet<[CreateFloatingPanelReturn]>;
 }
 declare const FloatingPanelRoot: import("svelte").Component<FloatingPanelProps, {}, "">;

package/dist/focus-trap/focus-trap.svelte

@@ -0,0 +1,104 @@
+<script module>
+  import * as focusTrap from '@zag-js/focus-trap';
+
+  interface FocusTrapOptions
+    extends Omit<focusTrap.FocusTrapOptions, 'document'> {
+    disabled?: boolean;
+  }
+
+  export interface FocusTrapProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, never, Action>,
+      FocusTrapOptions
+    > {}
+
+  function noop() {}
+
+  const trapFocus: Action<HTMLElement, FocusTrapOptions> = (node, options) => {
+    let destroy: () => void = noop;
+
+    function update(newOptions: FocusTrapOptions) {
+      if (newOptions.disabled) {
+        destroy();
+        destroy = noop;
+      } else {
+        destroy = focusTrap.trapFocus(node, newOptions);
+      }
+    }
+
+    update(options);
+
+    return {
+      update,
+      destroy,
+    };
+  };
+</script>
+
+<script lang="ts">
+  import {browser} from '$app/environment';
+  import {getEnvironmentContext} from '../environment-provider/enviroment-provider-context.svelte.js';
+  import type {Action, ActionReturn} from 'svelte/action';
+  import {createSplitProps} from '../create-split-props.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: FocusTrapProps = $props();
+
+  let [focusTrapProps, localProps] = $derived(
+    createSplitProps<FocusTrapOptions>([
+      'allowOutsideClick',
+      'checkCanFocusTrap',
+      'checkCanReturnFocus',
+      'clickOutsideDeactivates',
+      'delayInitialFocus',
+      'disabled',
+      'escapeDeactivates',
+      'fallbackFocus',
+      'initialFocus',
+      'isKeyBackward',
+      'isKeyForward',
+      'onActivate',
+      'onDeactivate',
+      'onPause',
+      'onPostActivate',
+      'onPostDeactivate',
+      'onPostPause',
+      'onPostUnpause',
+      'onUnpause',
+      'preventScroll',
+      'returnFocusOnDeactivate',
+      'setReturnFocus',
+      'trapStack',
+    ])(props),
+  );
+
+  let environment = getEnvironmentContext();
+
+  let focusTrapOptions: focusTrap.FocusTrapOptions = $derived({
+    ...focusTrapProps,
+    document: browser ? environment?.getDocument() : undefined,
+  });
+
+  let mergedProps = $derived({
+    ...localProps,
+    'data-scope': 'focus-trap',
+    'data-part': 'root',
+  });
+</script>
+
+{#if asChild}
+  {@render asChild(
+    (node: HTMLElement) =>
+      trapFocus(node, focusTrapOptions) as unknown as ActionReturn,
+    mergedProps,
+  )}
+{:else}
+  <div bind:this={ref} use:trapFocus={focusTrapOptions} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/focus-trap/focus-trap.svelte.d.ts

@@ -0,0 +1,11 @@
+import * as focusTrap from '@zag-js/focus-trap';
+interface FocusTrapOptions extends Omit<focusTrap.FocusTrapOptions, 'document'> {
+    disabled?: boolean;
+}
+export interface FocusTrapProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, never, Action>, FocusTrapOptions> {
+}
+import type { Action } from 'svelte/action';
+import type { Assign, HtmlIngredientProps } from '../types.js';
+declare const FocusTrap: import("svelte").Component<FocusTrapProps, {}, "ref">;
+type FocusTrap = ReturnType<typeof FocusTrap>;
+export default FocusTrap;

package/dist/focus-trap/index.d.ts

@@ -0,0 +1 @@
+export { default as FocusTrap, type FocusTrapProps } from './focus-trap.svelte';

package/dist/focus-trap/index.js

@@ -0,0 +1 @@
+export { default as FocusTrap } from './focus-trap.svelte';

package/dist/highlight/highlight.svelte

@@ -25,12 +25,18 @@
   );
 
   let chunks = $derived(highlightWord(highlightWordProps));
+
+  let mergedProps = $derived({
+    ...localProps,
+    'data-scope': 'highlight',
+    'data-part': 'root',
+  });
 </script>
 
 {#if asChild}
-  {@render asChild(localProps)}
+  {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={ref} data-scope="highlight" data-part="root" {...localProps}>
+  <div bind:this={ref} {...mergedProps}>
     {#each chunks as chunk}
       {#if chunk.match}
         <mark>{chunk.text}</mark>

package/dist/hover-card/create-hover-card.svelte.d.ts

@@ -1,7 +1,5 @@
 import * as hoverCard from '@zag-js/hover-card';
-export interface CreateHoverCardProps extends Omit<hoverCard.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
-    id?: string;
-    openControlled?: boolean;
+export interface CreateHoverCardProps extends Omit<hoverCard.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateHoverCardReturn extends hoverCard.Api {
 }

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

@@ -1,19 +1,14 @@
 import * as hoverCard from '@zag-js/hover-card';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createHoverCard(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(hoverCard.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
         ...props,
     }));
-    const [state, send] = useMachine(hoverCard.machine(context), { context });
-    return reflect(() => hoverCard.connect(state, send, normalizeProps));
+    return reflect(() => hoverCard.connect(service, normalizeProps));
 }

package/dist/hover-card/hover-card-root.svelte

@@ -1,13 +1,14 @@
 <script lang="ts" module>
   import type {Snippet} from 'svelte';
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Optional} from '../types.js';
   import type {
     CreateHoverCardProps,
     CreateHoverCardReturn,
   } from './create-hover-card.svelte.js';
 
   export interface HoverCardProps
-    extends CreateHoverCardProps,
+    extends Optional<CreateHoverCardProps, 'id'>,
       PresenceStrategyProps {
     children?: Snippet<[CreateHoverCardReturn]>;
   }
@@ -21,22 +22,29 @@
   import {createHoverCard} from './create-hover-card.svelte.js';
   import {setHoverCardContext} from './hover-card-context.svelte.js';
 
-  let {children, ...props}: HoverCardProps = $props();
+  let {id, children, ...props}: HoverCardProps = $props();
+
+  let uid = $props.id();
 
   let [createHoverCardProps, presenceStrategyProps] = $derived(
-    createSplitProps<CreateHoverCardProps>([
+    createSplitProps<Omit<CreateHoverCardProps, 'id'>>([
       'closeDelay',
-      'id',
+      'defaultOpen',
       'ids',
+      'onFocusOutside',
+      'onInteractOutside',
       'onOpenChange',
+      'onPointerDownOutside',
       'open',
-      'openControlled',
       'openDelay',
       'positioning',
     ])(props),
   );
 
-  let hoverCard = createHoverCard(reflect(() => createHoverCardProps));
+  let hoverCard = createHoverCard(
+    reflect(() => ({...createHoverCardProps, id: id ?? uid})),
+  );
+
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/hover-card/hover-card-root.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Optional } from '../types.js';
 import type { CreateHoverCardProps, CreateHoverCardReturn } from './create-hover-card.svelte.js';
-export interface HoverCardProps extends CreateHoverCardProps, PresenceStrategyProps {
+export interface HoverCardProps extends Optional<CreateHoverCardProps, 'id'>, PresenceStrategyProps {
     children?: Snippet<[CreateHoverCardReturn]>;
 }
 declare const HoverCardRoot: import("svelte").Component<HoverCardProps, {}, "">;