ui-ingredients 0.31.2 → 1.0.0

package/dist/toast/create-toaster.svelte.js

@@ -1,11 +1,5 @@
-import { normalizeProps, reflect } from 'zagjs-legacy-svelte';
-import * as toast from 'zagjs-legacy-toast';
-import { createUniqueId } from '../create-unique-id.js';
+import * as toast from '@zag-js/toast';
 export function createToaster(props) {
-    const id = createUniqueId();
-    const machine = $derived(toast.group.machine({ id, ...props }));
-    return reflect(() => ({
-        machine,
-        ...toast.group.connect(machine, machine.send, normalizeProps),
-    }));
+    const store = $derived(toast.createStore(props));
+    return store;
 }

package/dist/toast/index.d.ts

@@ -6,8 +6,6 @@ export type { ToastGhostAfterProps } from './toast-ghost-after.svelte';
 export type { ToastGhostBeforeProps } from './toast-ghost-before.svelte';
 export type { ToastProps } from './toast-root.svelte';
 export type { ToastTitleProps } from './toast-title.svelte';
-export { createToast, type CreateToastProps, type CreateToastReturn, } from './create-toast.svelte.js';
-export { anatomy as toastAnatomy } from './toast-anatomy.js';
-export { getToastContext, setToastContext } from './toast-context.svelte.js';
 export { createToaster, type CreateToasterProps, type CreateToasterReturn, } from './create-toaster.svelte.js';
+export { anatomy as toastAnatomy } from './toast-anatomy.js';
 export { default as Toaster, type ToasterProps } from './toaster.svelte';

package/dist/toast/index.js

@@ -1,6 +1,4 @@
 export * as Toast from './toast.js';
-export { createToast, } from './create-toast.svelte.js';
-export { anatomy as toastAnatomy } from './toast-anatomy.js';
-export { getToastContext, setToastContext } from './toast-context.svelte.js';
 export { createToaster, } from './create-toaster.svelte.js';
+export { anatomy as toastAnatomy } from './toast-anatomy.js';
 export { default as Toaster } from './toaster.svelte';

package/dist/toast/toast-anatomy.d.ts

@@ -1 +1 @@
-export { anatomy } from 'zagjs-legacy-toast';
+export { anatomy } from '@zag-js/toast';

package/dist/toast/toast-anatomy.js

@@ -1 +1 @@
-export { anatomy } from 'zagjs-legacy-toast';
+export { anatomy } from '@zag-js/toast';

package/dist/toast/toast-context.svelte.js

@@ -1,2 +1,3 @@
+import * as toast from '@zag-js/toast';
 import { createContext } from '../create-context.svelte.js';
 export const [getToastContext, setToastContext] = createContext('Toast');

package/dist/toast/toast-provider.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
+  import * as toast from '@zag-js/toast';
+  import type {Snippet} from 'svelte';
+  import {setToastContext} from './toast-context.svelte.js';
+
+  interface Props {
+    index: number;
+    toast: toast.Options;
+    parent: toast.GroupService;
+    children: Snippet<[toast: toast.Api]>;
+  }
+
+  let props: Props = $props();
+
+  let service = useMachine(toast.machine, () => ({
+    ...props.toast,
+    index: props.index,
+    parent: props.parent,
+  }));
+
+  let api = reflect(() => toast.connect(service, normalizeProps));
+
+  setToastContext(api);
+</script>
+
+{@render props.children?.(api)}

package/dist/toast/toast-provider.svelte.d.ts

@@ -0,0 +1,11 @@
+import * as toast from '@zag-js/toast';
+import type { Snippet } from 'svelte';
+interface Props {
+    index: number;
+    toast: toast.Options;
+    parent: toast.GroupService;
+    children: Snippet<[toast: toast.Api]>;
+}
+declare const ToastProvider: import("svelte").Component<Props, {}, "">;
+type ToastProvider = ReturnType<typeof ToastProvider>;
+export default ToastProvider;

package/dist/toast/toast-root.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
+  import type {Api} from '@zag-js/toast';
   import type {HtmlIngredientProps} from '../types.js';
-  import type {CreateToastReturn} from './create-toast.svelte.js';
 
   export interface ToastProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, CreateToastReturn> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement, Api> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,6 @@
+import type { Api } from '@zag-js/toast';
 import type { HtmlIngredientProps } from '../types.js';
-import type { CreateToastReturn } from './create-toast.svelte.js';
-export interface ToastProps extends HtmlIngredientProps<'div', HTMLDivElement, CreateToastReturn> {
+export interface ToastProps extends HtmlIngredientProps<'div', HTMLDivElement, Api> {
 }
 declare const ToastRoot: import("svelte").Component<ToastProps, {}, "ref">;
 type ToastRoot = ReturnType<typeof ToastRoot>;

package/dist/toast/toaster.svelte

@@ -1,61 +1,47 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-  import type {CreateToastReturn} from './create-toast.svelte.js';
-  import type {CreateToasterReturn} from './create-toaster.svelte.js';
-
-  export interface ToasterProps
-    extends Omit<
-      HtmlIngredientProps<'div', HTMLDivElement, CreateToastReturn>,
-      'asChild'
-    > {
-    toaster: CreateToasterReturn;
+  export interface ToasterProps {
+    label?: string;
+    toaster: toast.Store;
+    children: Snippet<[toast: toast.Api]>;
   }
 </script>
 
 <script lang="ts">
-  import {normalizeProps, portal, useMachine} from 'zagjs-legacy-svelte';
-  import * as toast from 'zagjs-legacy-toast';
+  import {normalizeProps, portal, reflect, useMachine} from '@zag-js/svelte';
+  import * as toast from '@zag-js/toast';
+  import type {Snippet} from 'svelte';
   import {getEnvironmentContext} from '../environment-provider/enviroment-provider-context.svelte.js';
-  import {getLocaleContext} from '../locale-provider/local-provider-context.svelte.js';
-  import {mergeProps} from '../merge-props.js';
+  import {getLocaleContext} from '../locale-provider/locale-provider-context.svelte.js';
   import {getPortalProviderPropsContext} from '../portal/portal-context.svelte.js';
-  import ToastActor from './toast-actor.svelte';
+  import ToastProvider from './toast-provider.svelte';
 
-  let {
-    ref = $bindable(null),
-    toaster,
-    children,
-    ...props
-  }: ToasterProps = $props();
+  let {label, toaster, children}: ToasterProps = $props();
 
+  let id = $props.id();
   let locale = getLocaleContext();
   let environment = getEnvironmentContext();
   let portalProviderProps = getPortalProviderPropsContext();
 
-  let [state, send] = useMachine(toaster.machine, {
-    context: {
-      get dir() {
-        return locale?.dir;
-      },
-      getRootNode: environment?.getRootNode,
-    },
-  });
+  let service = useMachine(toast.group.machine, () => ({
+    id,
+    dir: locale?.dir,
+    store: toaster,
+    getRootNode: environment?.getRootNode,
+  }));
 
-  let placement = $derived(state.context.placement);
-  let api = $derived(toast.group.connect(state, send, normalizeProps));
-  let toasts = $derived(api.getToastsByPlacement(placement));
-  let mergedProps = $derived(mergeProps(api.getGroupProps({placement}), props));
+  let api = reflect(() => toast.group.connect(service, normalizeProps));
+  let toasts = $derived(api.getToasts());
 </script>
 
 <div
-  bind:this={ref}
   use:portal={{
+    disabled: false,
     container: portalProviderProps?.container ?? undefined,
     getRootNode: environment?.getRootNode,
   }}
-  {...mergedProps}
+  {...api.getGroupProps({label})}
 >
-  {#each toasts as toast (toast.id)}
-    <ToastActor actor={toast} {children} />
+  {#each toasts as toast, index (toast.id)}
+    <ToastProvider {index} {children} {toast} parent={service} />
   {/each}
 </div>

package/dist/toast/toaster.svelte.d.ts

@@ -1,9 +1,10 @@
-import type { HtmlIngredientProps } from '../types.js';
-import type { CreateToastReturn } from './create-toast.svelte.js';
-import type { CreateToasterReturn } from './create-toaster.svelte.js';
-export interface ToasterProps extends Omit<HtmlIngredientProps<'div', HTMLDivElement, CreateToastReturn>, 'asChild'> {
-    toaster: CreateToasterReturn;
+export interface ToasterProps {
+    label?: string;
+    toaster: toast.Store;
+    children: Snippet<[toast: toast.Api]>;
 }
-declare const Toaster: import("svelte").Component<ToasterProps, {}, "ref">;
+import * as toast from '@zag-js/toast';
+import type { Snippet } from 'svelte';
+declare const Toaster: import("svelte").Component<ToasterProps, {}, "">;
 type Toaster = ReturnType<typeof Toaster>;
 export default Toaster;

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

@@ -1,16 +1,6 @@
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface PressedChangeDetails {
-    pressed: boolean;
+import * as toggle from '@zag-js/toggle';
+export interface CreateToggleProps extends toggle.Props {
 }
-export interface CreateToggleProps {
-    disabled?: boolean;
-    pressed?: boolean;
-    onPressedChange?: (detail: PressedChangeDetails) => void;
-}
-export interface CreateToggleReturn {
-    pressed: boolean;
-    setPressed: (pressed: boolean) => void;
-    getRootProps(): HTMLButtonAttributes;
+export interface CreateToggleReturn extends toggle.Api {
 }
 export declare function createToggle(props: CreateToggleProps): any;
-export {};

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

@@ -1,33 +1,6 @@
-import { ariaAttr, dataAttr } from '@zag-js/dom-query';
-import { reflect } from '@zag-js/svelte';
-import { parts } from './toggle-anatomy.js';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import * as toggle from '@zag-js/toggle';
 export function createToggle(props) {
-    let pressed = $state(props.pressed ?? false);
-    function setPressed(value) {
-        props.onPressedChange?.({ pressed: value });
-        pressed = value;
-    }
-    function getRootProps() {
-        return {
-            disabled: props.disabled,
-            onclick() {
-                if (props.disabled)
-                    return;
-                setPressed(!pressed);
-            },
-            'aria-pressed': ariaAttr(pressed),
-            'data-state': pressed ? 'on' : 'off',
-            'data-pressed': dataAttr(pressed),
-            'data-disabled': dataAttr(props.disabled),
-            ...parts.root.attrs,
-        };
-    }
-    $effect(() => {
-        pressed = props.pressed ?? false;
-    });
-    return reflect(() => ({
-        pressed,
-        setPressed,
-        getRootProps,
-    }));
+    const service = useMachine(toggle.machine, props);
+    return reflect(() => toggle.connect(service, normalizeProps));
 }

package/dist/toggle/index.d.ts

@@ -1,4 +1,5 @@
 export * as Toggle from './toggle.js';
+export type { ToggleIndicatorProps } from './toggle-indicator.svelte';
 export type { ToggleProps } from './toggle-root.svelte';
 export { createToggle, type CreateToggleProps, type CreateToggleReturn, } from './create-toggle.svelte.js';
 export { anatomy as toggleAnatomy } from './toggle-anatomy.js';

package/dist/toggle/toggle-anatomy.d.ts

@@ -1,2 +1 @@
-export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"root">;
-export declare const parts: Record<"root", import("@zag-js/anatomy").AnatomyPart>;
+export { anatomy } from '@zag-js/toggle';

package/dist/toggle/toggle-anatomy.js

@@ -1,3 +1 @@
-import { createAnatomy } from '@zag-js/anatomy';
-export const anatomy = createAnatomy('toggle').parts('root');
-export const parts = anatomy.build();
+export { anatomy } from '@zag-js/toggle';

package/dist/toggle/toggle-indicator.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ToggleIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getToggleContext} from './toggle-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ToggleIndicatorProps = $props();
+
+  let toggle = getToggleContext();
+  let mergedProps = $derived(mergeProps(toggle.getIndicatorProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/toggle/toggle-indicator.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ToggleIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const ToggleIndicator: import("svelte").Component<ToggleIndicatorProps, {}, "ref">;
+type ToggleIndicator = ReturnType<typeof ToggleIndicator>;
+export default ToggleIndicator;

package/dist/toggle/toggle-root.svelte

@@ -28,6 +28,7 @@
 
   let [createToggleProps, localProps] = $derived(
     createSplitProps<CreateToggleProps>([
+      'defaultPressed',
       'disabled',
       'onPressedChange',
       'pressed',

package/dist/toggle/toggle.d.ts

@@ -1 +1,2 @@
+export { default as Indicator } from './toggle-indicator.svelte';
 export { default as Root } from './toggle-root.svelte';

package/dist/toggle/toggle.js

@@ -1 +1,2 @@
+export { default as Indicator } from './toggle-indicator.svelte';
 export { default as Root } from './toggle-root.svelte';

package/dist/toggle-group/create-toggle-group.svelte.d.ts

@@ -1,6 +1,5 @@
 import * as toggleGroup from '@zag-js/toggle-group';
-export interface CreateToggleGroupProps extends Omit<toggleGroup.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateToggleGroupProps extends Omit<toggleGroup.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateToggleGroupReturn extends toggleGroup.Api {
 }

package/dist/toggle-group/create-toggle-group.svelte.js

@@ -1,18 +1,14 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as toggleGroup from '@zag-js/toggle-group';
-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 createToggleGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(toggleGroup.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(toggleGroup.machine(context), { context });
-    return reflect(() => toggleGroup.connect(state, send, normalizeProps));
+    return reflect(() => toggleGroup.connect(service, normalizeProps));
 }

package/dist/toggle-group/toggle-group-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 {
     CreateToggleGroupProps,
     CreateToggleGroupReturn,
@@ -8,7 +8,7 @@
   export interface ToggleGroupProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateToggleGroupReturn>,
-      CreateToggleGroupProps
+      Optional<CreateToggleGroupProps, 'id'>
     > {}
 </script>
 
@@ -20,16 +20,19 @@
   import {setToggleGroupContext} from './toggle-group-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: ToggleGroupProps = $props();
 
+  let uid = $props.id();
+
   let [createToggleGroupProps, localProps] = $derived(
-    createSplitProps<CreateToggleGroupProps>([
+    createSplitProps<Omit<CreateToggleGroupProps, 'id'>>([
+      'defaultValue',
       'disabled',
-      'id',
       'ids',
       'loopFocus',
       'multiple',
@@ -40,7 +43,10 @@
     ])(props),
   );
 
-  let toggleGroup = createToggleGroup(reflect(() => createToggleGroupProps));
+  let toggleGroup = createToggleGroup(
+    reflect(() => ({...createToggleGroupProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(
     mergeProps(toggleGroup.getRootProps(), localProps),
   );

package/dist/toggle-group/toggle-group-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 { CreateToggleGroupProps, CreateToggleGroupReturn } from './create-toggle-group.svelte.js';
-export interface ToggleGroupProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateToggleGroupReturn>, CreateToggleGroupProps> {
+export interface ToggleGroupProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateToggleGroupReturn>, Optional<CreateToggleGroupProps, 'id'>> {
 }
 declare const ToggleGroupRoot: import("svelte").Component<ToggleGroupProps, {}, "ref">;
 type ToggleGroupRoot = ReturnType<typeof ToggleGroupRoot>;

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

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

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

@@ -1,19 +1,14 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tooltip from '@zag-js/tooltip';
-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 createTooltip(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(tooltip.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
         ...props,
     }));
-    const [state, send] = useMachine(tooltip.machine(context), { context });
-    return reflect(() => tooltip.connect(state, send, normalizeProps));
+    return reflect(() => tooltip.connect(service, normalizeProps));
 }

package/dist/tooltip/tooltip-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 {
     CreateTooltipProps,
     CreateTooltipReturn,
   } from './create-tooltip.svelte.js';
 
   export interface TooltipProps
-    extends CreateTooltipProps,
+    extends Optional<CreateTooltipProps, 'id'>,
       PresenceStrategyProps {
     children?: Snippet<[CreateTooltipReturn]>;
   }
@@ -21,7 +22,9 @@
   import {createTooltip} from './create-tooltip.svelte.js';
   import {setTooltipContext} from './tooltip-context.svelte.js';
 
-  let {children, ...props}: TooltipProps = $props();
+  let {id, children, ...props}: TooltipProps = $props();
+
+  let uid = $props.id();
 
   let [presenceStrategyProps, createTooltipProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
@@ -29,7 +32,10 @@
     ),
   );
 
-  let tooltip = createTooltip(reflect(() => createTooltipProps));
+  let tooltip = createTooltip(
+    reflect(() => ({...createTooltipProps, id: id ?? uid})),
+  );
+
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/tooltip/tooltip-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 { CreateTooltipProps, CreateTooltipReturn } from './create-tooltip.svelte.js';
-export interface TooltipProps extends CreateTooltipProps, PresenceStrategyProps {
+export interface TooltipProps extends Optional<CreateTooltipProps, 'id'>, PresenceStrategyProps {
     children?: Snippet<[CreateTooltipReturn]>;
 }
 declare const TooltipRoot: import("svelte").Component<TooltipProps, {}, "">;

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

@@ -1,9 +1,13 @@
 import * as tour from '@zag-js/tour';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-export interface TourStepDetails extends Omit<tour.StepDetails, 'id'> {
+import type { Optional } from '../types.js';
+export interface TourStepDetails extends Optional<tour.StepDetails, 'id'> {
 }
-export interface CreateTourProps extends Omit<tour.Context, 'id' | 'dir' | 'steps' | 'getRootNode'> {
-    id?: string;
+export interface ElementIds extends tour.ElementIds {
+    trigger?: string;
+}
+export interface CreateTourProps extends Omit<tour.Props, 'ids' | 'dir' | 'steps' | 'getRootNode'> {
+    ids?: ElementIds;
     steps?: TourStepDetails[];
 }
 export interface CreateTourReturn extends tour.Api<any> {

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

@@ -1,37 +1,34 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tour from '@zag-js/tour';
-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';
 import { parts } from './tour-anatomy.js';
 export function createTour(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
     const steps = $derived.by(() => {
-        return props.steps?.map((step) => ({
-            id: createUniqueId(),
+        return props.steps?.map((step, index) => ({
+            id: `tour:${props.id}:step:${index}`,
             ...step,
         }));
     });
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(tour.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
         steps,
     }));
-    const [state, send] = useMachine(tour.machine(context), { context });
     return reflect(() => {
-        const o = tour.connect(state, send, normalizeProps);
+        const api = tour.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getTriggerProps() {
                 return {
+                    id: `tour:${props.id}:trigger`,
                     onclick() {
-                        o.start();
+                        api.start();
                     },
-                    'data-state': o.open ? 'open' : 'closed',
+                    'data-state': api.open ? 'open' : 'closed',
                     ...parts.trigger.attrs,
                 };
             },

package/dist/tour/tour-root.svelte

@@ -1,12 +1,15 @@
 <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 {
     CreateTourProps,
     CreateTourReturn,
   } from './create-tour.svelte.js';
 
-  export interface TourProps extends CreateTourProps, PresenceStrategyProps {
+  export interface TourProps
+    extends Optional<CreateTourProps, 'id'>,
+      PresenceStrategyProps {
     children?: Snippet<[CreateTourReturn]>;
   }
 </script>
@@ -22,7 +25,9 @@
   import {createTour} from './create-tour.svelte.js';
   import {setTourContext} from './tour-context.svelte.js';
 
-  let {children, ...props}: TourProps = $props();
+  let {id, children, ...props}: TourProps = $props();
+
+  let uid = $props.id();
 
   let [presenceStrategyProps, createTourProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
@@ -30,7 +35,8 @@
     ),
   );
 
-  let tour = createTour(reflect(() => createTourProps));
+  let tour = createTour(reflect(() => ({...createTourProps, id: id ?? uid})));
+
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/tour/tour-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 { CreateTourProps, CreateTourReturn } from './create-tour.svelte.js';
-export interface TourProps extends CreateTourProps, PresenceStrategyProps {
+export interface TourProps extends Optional<CreateTourProps, 'id'>, PresenceStrategyProps {
     children?: Snippet<[CreateTourReturn]>;
 }
 declare const TourRoot: import("svelte").Component<TourProps, {}, "">;