ui-ingredients 0.31.2 → 1.0.0

package/dist/accordion/accordion-item.svelte

@@ -27,6 +27,8 @@
     ...props
   }: AccordionItemProps = $props();
 
+  let uid = $props.id();
+
   let accordion = getAccordionContext();
 
   let [itemProps, localProps] = $derived(
@@ -37,6 +39,7 @@
   let contentProps = $derived(accordion.getItemContentProps(itemProps));
   let collapsible = createCollapsible(
     reflect(() => ({
+      id: uid,
       ids: {content: contentProps.id},
       open: itemState.expanded,
       disabled: itemState.disabled,

package/dist/accordion/accordion-root.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateAccordionProps,
     CreateAccordionReturn,
@@ -9,7 +9,7 @@
   export interface AccordionProps
     extends Assign<
         HtmlIngredientProps<'div', HTMLDivElement, CreateAccordionReturn>,
-        CreateAccordionProps
+        Optional<CreateAccordionProps, 'id'>
       >,
       PresenceStrategyProps {}
 </script>
@@ -23,33 +23,39 @@
   import {createAccordion} from './create-accordion.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: AccordionProps = $props();
 
-  let [presenceStrategyProps, rest] = $derived(
+  let uid = $props.id();
+
+  let [presenceStrategyProps, accordionProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
   let [createAccordionProps, localProps] = $derived(
-    createSplitProps<CreateAccordionProps>([
+    createSplitProps<Omit<CreateAccordionProps, 'id'>>([
       'collapsible',
+      'defaultValue',
       'disabled',
-      'id',
       'ids',
       'multiple',
       'onFocusChange',
       'onValueChange',
       'orientation',
       'value',
-    ])(rest),
+    ])(accordionProps),
+  );
+
+  let accordion = createAccordion(
+    reflect(() => ({...createAccordionProps, id: id ?? uid})),
   );
 
-  let accordion = createAccordion(reflect(() => createAccordionProps));
   let mergedProps = $derived(mergeProps(accordion.getRootProps(), localProps));
 
   setAccordionContext(accordion);

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

@@ -1,7 +1,7 @@
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateAccordionProps, CreateAccordionReturn } from './create-accordion.svelte.js';
-export interface AccordionProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateAccordionReturn>, CreateAccordionProps>, PresenceStrategyProps {
+export interface AccordionProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateAccordionReturn>, Optional<CreateAccordionProps, 'id'>>, PresenceStrategyProps {
 }
 declare const AccordionRoot: import("svelte").Component<AccordionProps, {}, "ref">;
 type AccordionRoot = ReturnType<typeof AccordionRoot>;

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

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

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

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

package/dist/alert/alert-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 {
     CreateAlertProps,
     CreateAlertReturn,
@@ -8,29 +8,35 @@
   export interface AlertProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateAlertReturn>,
-      CreateAlertProps
+      Optional<CreateAlertProps, 'id'>
     > {}
 </script>
 
 <script lang="ts">
-  import {createSplitProps} from '../create-split-props.js';
   import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {setAlertContext} from './alert-context.js';
   import {createAlert} from './create-alert.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: AlertProps = $props();
 
+  let uid = $props.id();
+
   let [createAlertProps, localProps] = $derived(
-    createSplitProps<CreateAlertProps>(['id'])(props),
+    createSplitProps<Omit<CreateAlertProps, 'id'>>(['ids'])(props),
+  );
+
+  let alert = createAlert(
+    reflect(() => ({...createAlertProps, id: id ?? uid})),
   );
 
-  let alert = createAlert(reflect(() => createAlertProps));
   let mergedProps = $derived(mergeProps(alert.getRootProps(), localProps));
 
   setAlertContext(alert);

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

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

@@ -6,7 +6,7 @@ interface ElementIds {
     indicator: string;
 }
 export interface CreateAlertProps {
-    id?: string;
+    id: string;
     ids?: ElementIds;
 }
 export interface CreateAlertReturn {

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

@@ -1,13 +1,11 @@
-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 { getDocument, getWindow } from '@zag-js/dom-query';
+import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 import { parts } from './alert-anatomy.js';
 export function createAlert(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const uid = createUniqueId();
-    const id = $derived(props.id ?? uid);
+    const id = $derived(props.id);
     const ids = $derived({
         root: props.ids?.root ?? `alert:${id}`,
         title: props.ids?.title ?? `alert:${id}:title`,

package/dist/alert-dialog/alert-dialog-anatomy.js

@@ -1,3 +1,3 @@
 import { anatomy as _ } from '@zag-js/dialog';
-export const anatomy = _.rename('alertdialog');
+export const anatomy = _.rename('alert-dialog');
 export const parts = anatomy.build();

package/dist/alert-dialog/alert-dialog-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 {
     CreateAlertDialogProps,
     CreateAlertDialogReturn,
   } from './create-alert-dialog.svelte.js';
 
   export interface AlertDialogProps
-    extends CreateAlertDialogProps,
+    extends Optional<CreateAlertDialogProps, 'id'>,
       PresenceStrategyProps {
     children?: Snippet<[CreateAlertDialogReturn]>;
   }
@@ -24,7 +25,9 @@
   import {setAlertDialogContext} from './alert-dialog-context.svelte.js';
   import {createAlertDialog} from './create-alert-dialog.svelte.js';
 
-  let {children, ...props}: AlertDialogProps = $props();
+  let {id, children, ...props}: AlertDialogProps = $props();
+
+  let uid = $props.id();
 
   let [presenceStrategyProps, createDialogProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
@@ -32,7 +35,10 @@
     ),
   );
 
-  let alertDialog = createAlertDialog(reflect(() => createDialogProps));
+  let alertDialog = createAlertDialog(
+    reflect(() => ({...createDialogProps, id: id ?? uid})),
+  );
+
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/alert-dialog/alert-dialog-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 { CreateAlertDialogProps, CreateAlertDialogReturn } from './create-alert-dialog.svelte.js';
-export interface AlertDialogProps extends CreateAlertDialogProps, PresenceStrategyProps {
+export interface AlertDialogProps extends Optional<CreateAlertDialogProps, 'id'>, PresenceStrategyProps {
     children?: Snippet<[CreateAlertDialogReturn]>;
 }
 declare const AlertDialogRoot: import("svelte").Component<AlertDialogProps, {}, "">;

package/dist/alert-dialog/create-alert-dialog.svelte.d.ts

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

package/dist/alert-dialog/create-alert-dialog.svelte.js

@@ -1,47 +1,42 @@
 import * as dialog from '@zag-js/dialog';
 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';
 import { mergeProps } from '../merge-props.js';
 import { parts } from './alert-dialog-anatomy.js';
 export function createAlertDialog(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(dialog.machine, () => ({
         dir: locale?.dir,
         role: 'alertdialog',
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
         ...props,
     }));
-    const [state, send] = useMachine(dialog.machine(context), { context });
     return reflect(() => {
-        const o = dialog.connect(state, send, normalizeProps);
+        const api = dialog.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getBackdropProps() {
-                return mergeProps(o.getBackdropProps(), parts.backdrop.attrs);
+                return mergeProps(api.getBackdropProps(), parts.backdrop.attrs);
             },
             getCloseTriggerProps() {
-                return mergeProps(o.getCloseTriggerProps(), parts.closeTrigger.attrs);
+                return mergeProps(api.getCloseTriggerProps(), parts.closeTrigger.attrs);
             },
             getContentProps() {
-                return mergeProps(o.getContentProps(), parts.content.attrs);
+                return mergeProps(api.getContentProps(), parts.content.attrs);
             },
             getDescriptionProps() {
-                return mergeProps(o.getDescriptionProps(), parts.description.attrs);
+                return mergeProps(api.getDescriptionProps(), parts.description.attrs);
             },
             getPositionerProps() {
-                return mergeProps(o.getPositionerProps(), parts.positioner.attrs);
+                return mergeProps(api.getPositionerProps(), parts.positioner.attrs);
             },
             getTitleProps() {
-                return mergeProps(o.getTitleProps(), parts.title.attrs);
+                return mergeProps(api.getTitleProps(), parts.title.attrs);
             },
             getTriggerProps() {
-                return mergeProps(o.getTriggerProps(), parts.trigger.attrs);
+                return mergeProps(api.getTriggerProps(), parts.trigger.attrs);
             },
         };
     });

package/dist/angle-slider/angle-slider-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 CreateAngleSliderProps,
     type CreateAngleSliderReturn,
@@ -8,7 +8,7 @@
   export interface AngleSliderProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateAngleSliderReturn>,
-      CreateAngleSliderProps
+      Optional<CreateAngleSliderProps, 'id'>
     > {}
 </script>
 
@@ -20,16 +20,18 @@
   import {createAngleSlider} from './create-angle-slider.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: AngleSliderProps = $props();
+  let uid = $props.id();
 
   let [createAngleSliderProps, localProps] = $derived(
-    createSplitProps<CreateAngleSliderProps>([
+    createSplitProps<Omit<CreateAngleSliderProps, 'id'>>([
+      'defaultValue',
       'disabled',
-      'id',
       'ids',
       'invalid',
       'name',
@@ -41,7 +43,10 @@
     ])(props),
   );
 
-  let angleSlider = createAngleSlider(reflect(() => createAngleSliderProps));
+  let angleSlider = createAngleSlider(
+    reflect(() => ({...createAngleSliderProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(
     mergeProps(angleSlider.getRootProps(), localProps),
   );

package/dist/angle-slider/angle-slider-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 CreateAngleSliderProps, type CreateAngleSliderReturn } from './create-angle-slider.svelte.js';
-export interface AngleSliderProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateAngleSliderReturn>, CreateAngleSliderProps> {
+export interface AngleSliderProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateAngleSliderReturn>, Optional<CreateAngleSliderProps, 'id'>> {
 }
 declare const AngleSliderRoot: import("svelte").Component<AngleSliderProps, {}, "ref">;
 type AngleSliderRoot = ReturnType<typeof AngleSliderRoot>;

package/dist/angle-slider/create-angle-slider.svelte.d.ts

@@ -1,6 +1,5 @@
 import * as angleSlider from '@zag-js/angle-slider';
-export interface CreateAngleSliderProps extends Omit<angleSlider.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateAngleSliderProps extends Omit<angleSlider.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateAngleSliderReturn extends angleSlider.Api {
 }

package/dist/angle-slider/create-angle-slider.svelte.js

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

package/dist/avatar/avatar-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 CreateAvatarProps,
     type CreateAvatarReturn,
@@ -8,7 +8,7 @@
   export interface AvatarProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateAvatarReturn>,
-      CreateAvatarProps
+      Optional<CreateAvatarProps, 'id'>
     > {}
 </script>
 
@@ -20,17 +20,25 @@
   import {createAvatar} from './create-avatar.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: AvatarProps = $props();
 
+  let uid = $props.id();
+
   let [createAvatarProps, localProps] = $derived(
-    createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
+    createSplitProps<Omit<CreateAvatarProps, 'id'>>(['ids', 'onStatusChange'])(
+      props,
+    ),
+  );
+
+  let avatar = createAvatar(
+    reflect(() => ({...createAvatarProps, id: id ?? uid})),
   );
 
-  let avatar = createAvatar(reflect(() => createAvatarProps));
   let mergedProps = $derived(mergeProps(avatar.getRootProps(), localProps));
 
   setAvatarContext(avatar);

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

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

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

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

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

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

@@ -1,2 +1,5 @@
+/**
+ * @deprecated
+ */
 export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"root" | "list" | "item" | "link" | "separator">;
 export declare const parts: Record<"root" | "list" | "item" | "link" | "separator", import("@zag-js/anatomy").AnatomyPart>;

package/dist/breadcrumbs/breadcrumbs-anatomy.js

@@ -1,3 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
+/**
+ * @deprecated
+ */
 export const anatomy = createAnatomy('breadcrumbs').parts('root', 'list', 'item', 'link', 'separator');
 export const parts = anatomy.build();

package/dist/breadcrumbs/breadcrumbs-context.svelte.d.ts

@@ -1,2 +1,5 @@
 import type { CreateBreadcrumbsReturn } from './create-breadcrumbs.js';
+/**
+ * @deprecated
+ */
 export declare const getBreadcrumbsContext: () => CreateBreadcrumbsReturn, setBreadcrumbsContext: (context: CreateBreadcrumbsReturn | (() => CreateBreadcrumbsReturn)) => void;

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

@@ -1,2 +1,5 @@
 import { createContext } from '../create-context.svelte.js';
+/**
+ * @deprecated
+ */
 export const [getBreadcrumbsContext, setBreadcrumbsContext] = createContext('Breadcrumbs');

package/dist/breadcrumbs/breadcrumbs-item.svelte

@@ -20,6 +20,11 @@
   let mergedProps = $derived(mergeProps(breadcrumbs.getItemProps(), props));
 </script>
 
+<!-- 
+  @component
+  @deprecated
+ -->
+
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}

package/dist/breadcrumbs/breadcrumbs-item.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { HtmlIngredientProps } from '../types.js';
 export interface BreadcrumbsItemProps extends HtmlIngredientProps<'li', HTMLLIElement> {
 }
+/** @deprecated */
 declare const BreadcrumbsItem: import("svelte").Component<BreadcrumbsItemProps, {}, "ref">;
 type BreadcrumbsItem = ReturnType<typeof BreadcrumbsItem>;
 export default BreadcrumbsItem;

package/dist/breadcrumbs/breadcrumbs-link.svelte

@@ -28,6 +28,11 @@
   );
 </script>
 
+<!-- 
+  @component
+  @deprecated
+ -->
+
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}

package/dist/breadcrumbs/breadcrumbs-link.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { LinkProps } from './create-breadcrumbs.js';
 export interface BreadcrumbsLinkProps extends Assign<HtmlIngredientProps<'a', HTMLAnchorElement>, LinkProps> {
 }
+/** @deprecated */
 declare const BreadcrumbsLink: import("svelte").Component<BreadcrumbsLinkProps, {}, "ref">;
 type BreadcrumbsLink = ReturnType<typeof BreadcrumbsLink>;
 export default BreadcrumbsLink;

package/dist/breadcrumbs/breadcrumbs-list.svelte

@@ -20,6 +20,11 @@
   let mergedProps = $derived(mergeProps(breadcrumbs.getListProps(), props));
 </script>
 
+<!-- 
+  @component
+  @deprecated
+ -->
+
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}

package/dist/breadcrumbs/breadcrumbs-list.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { HtmlIngredientProps } from '../types.js';
 export interface BreadcrumbsListProps extends HtmlIngredientProps<'ol', HTMLOListElement> {
 }
+/** @deprecated */
 declare const BreadcrumbsList: import("svelte").Component<BreadcrumbsListProps, {}, "ref">;
 type BreadcrumbsList = ReturnType<typeof BreadcrumbsList>;
 export default BreadcrumbsList;

package/dist/breadcrumbs/breadcrumbs-root.svelte

@@ -24,6 +24,11 @@
   setBreadcrumbsContext(breadcrumbs);
 </script>
 
+<!-- 
+  @component
+  @deprecated
+ -->
+
 {#if asChild}
   {@render asChild(mergedProps, breadcrumbs)}
 {:else}

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

@@ -2,6 +2,7 @@ import type { HtmlIngredientProps } from '../types.js';
 import type { CreateBreadcrumbsReturn } from './create-breadcrumbs.js';
 export interface BreadcrumbsProps extends HtmlIngredientProps<'nav', HTMLElement, CreateBreadcrumbsReturn> {
 }
+/** @deprecated */
 declare const BreadcrumbsRoot: import("svelte").Component<BreadcrumbsProps, {}, "ref">;
 type BreadcrumbsRoot = ReturnType<typeof BreadcrumbsRoot>;
 export default BreadcrumbsRoot;