bits-ui 1.0.0-next.1 → 1.0.0-next.10

package/dist/bits/accordion/accordion.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Box, ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
-import { type UseRovingFocusReturn } from "../../internal/useRovingFocus.svelte.js";
+import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Orientation } from "../../shared/index.js";
 type AccordionBaseStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
@@ -55,9 +55,6 @@ export declare class AccordionItemState {
     isDisabled: boolean;
     constructor(props: AccordionItemStateProps);
     updateValue: () => void;
-    createTrigger(props: AccordionTriggerStateProps): AccordionTriggerState;
-    createContent(props: AccordionContentStateProps): AccordionContentState;
-    createHeader(props: AccordionHeaderStateProps): AccordionHeaderState;
     props: {
         readonly id: string;
         readonly "data-state": "open" | "closed";

package/dist/bits/accordion/accordion.svelte.js

@@ -1,9 +1,9 @@
-import { afterTick } from "../../internal/afterTick.js";
+import { afterTick } from "../../internal/after-tick.js";
 import { getAriaDisabled, getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
-import { createContext } from "../../internal/createContext.js";
+import { useRefById } from "../../internal/use-ref-by-id.svelte.js";
+import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
+import { createContext } from "../../internal/create-context.js";
 const ACCORDION_ROOT_ATTR = "data-accordion-root";
 const ACCORDION_TRIGGER_ATTR = "data-accordion-trigger";
 const ACCORDION_CONTENT_ATTR = "data-accordion-content";
@@ -96,15 +96,6 @@ export class AccordionItemState {
     updateValue = () => {
         this.root.toggleItem(this.value.current);
     };
-    createTrigger(props) {
-        return new AccordionTriggerState(props, this);
-    }
-    createContent(props) {
-        return new AccordionContentState(props, this);
-    }
-    createHeader(props) {
-        return new AccordionHeaderState(props, this);
-    }
     props = $derived.by(() => ({
         id: this.#id.current,
         "data-state": getDataOpenClosed(this.isActive),
@@ -271,11 +262,14 @@ export function useAccordionItem(props) {
     return setAccordionItemContext(new AccordionItemState({ ...props, rootState }));
 }
 export function useAccordionTrigger(props) {
-    return getAccordionItemContext().createTrigger(props);
+    const item = getAccordionItemContext();
+    return new AccordionTriggerState(props, item);
 }
 export function useAccordionContent(props) {
-    return getAccordionItemContext().createContent(props);
+    const item = getAccordionItemContext();
+    return new AccordionContentState(props, item);
 }
 export function useAccordionHeader(props) {
-    return getAccordionItemContext().createHeader(props);
+    const item = getAccordionItemContext();
+    return new AccordionHeaderState(props, item);
 }

package/dist/bits/accordion/components/accordion-content.svelte

@@ -3,8 +3,8 @@
 	import { useAccordionContent } from "../accordion.svelte.js";
 	import type { AccordionContentProps } from "../types.js";
 	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		child,

package/dist/bits/accordion/components/accordion-header.svelte

@@ -2,8 +2,8 @@
 	import { box } from "svelte-toolbelt";
 	import type { AccordionHeaderProps } from "../types.js";
 	import { useAccordionHeader } from "../accordion.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),

package/dist/bits/accordion/components/accordion-item.svelte

@@ -2,8 +2,8 @@
 	import { box } from "svelte-toolbelt";
 	import type { AccordionItemProps } from "../types.js";
 	import { useAccordionItem } from "../accordion.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),

package/dist/bits/accordion/components/accordion-trigger.svelte

@@ -2,8 +2,8 @@
 	import { box } from "svelte-toolbelt";
 	import type { AccordionTriggerProps } from "../types.js";
 	import { useAccordionTrigger } from "../accordion.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		disabled = false,

package/dist/bits/accordion/components/accordion.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { type WritableBox, box } from "svelte-toolbelt";
 	import { useAccordionRoot } from "../accordion.svelte.js";
-	import type { RootProps } from "../index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import type { AccordionRootProps } from "../types.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/callbacks.js";
 
 	let {
@@ -19,7 +19,7 @@
 		orientation = "vertical",
 		controlledValue = false,
 		...restProps
-	}: RootProps = $props();
+	}: AccordionRootProps = $props();
 
 	value === undefined && (value = type === "single" ? "" : []);
 

package/dist/bits/accordion/components/accordion.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { AccordionRootProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Accordion: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Accordion: $$__sveltets_2_IsomorphicComponent<AccordionRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "value" | "ref">;
 type Accordion = InstanceType<typeof Accordion>;

package/dist/bits/accordion/exports.d.ts

@@ -0,0 +1,6 @@
+export { default as Root } from "./components/accordion.svelte";
+export { default as Item } from "./components/accordion-item.svelte";
+export { default as Header } from "./components/accordion-header.svelte";
+export { default as Trigger } from "./components/accordion-trigger.svelte";
+export { default as Content } from "./components/accordion-content.svelte";
+export type { AccordionRootProps as RootProps, AccordionItemProps as ItemProps, AccordionHeaderProps as HeaderProps, AccordionTriggerProps as TriggerProps, AccordionContentProps as ContentProps, } from "./types.js";

package/dist/bits/accordion/exports.js

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/accordion.svelte";
+export { default as Item } from "./components/accordion-item.svelte";
+export { default as Header } from "./components/accordion-header.svelte";
+export { default as Trigger } from "./components/accordion-trigger.svelte";
+export { default as Content } from "./components/accordion-content.svelte";

package/dist/bits/accordion/index.d.ts

@@ -1,6 +1 @@
-export { default as Root } from "./components/accordion.svelte";
-export { default as Item } from "./components/accordion-item.svelte";
-export { default as Header } from "./components/accordion-header.svelte";
-export { default as Trigger } from "./components/accordion-trigger.svelte";
-export { default as Content } from "./components/accordion-content.svelte";
-export type { AccordionRootProps as RootProps, AccordionItemProps as ItemProps, AccordionHeaderProps as HeaderProps, AccordionTriggerProps as TriggerProps, AccordionContentProps as ContentProps, } from "./types.js";
+export * as Accordion from "./exports.js";

package/dist/bits/accordion/index.js

@@ -1,5 +1 @@
-export { default as Root } from "./components/accordion.svelte";
-export { default as Item } from "./components/accordion-item.svelte";
-export { default as Header } from "./components/accordion-header.svelte";
-export { default as Trigger } from "./components/accordion-trigger.svelte";
-export { default as Content } from "./components/accordion-content.svelte";
+export * as Accordion from "./exports.js";

package/dist/bits/accordion/types.d.ts

@@ -16,7 +16,7 @@ export type BaseAccordionRootPropsWithoutHTML = {
      */
     loop?: boolean;
     /**
-     * The orienation of the accordion.
+     * The orientation of the accordion.
      *
      * @defaultValue "vertical"
      */

package/dist/bits/alert-dialog/components/alert-dialog-action.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { ActionProps } from "../index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
-	import { useDialogClose } from "../../dialog/dialog.svelte.js";
+	import type { AlertDialogActionProps } from "../types.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { useAlertDialogAction } from "../../dialog/dialog.svelte.js";
 
 	let {
 		children,
@@ -11,10 +11,9 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: ActionProps = $props();
+	}: AlertDialogActionProps = $props();
 
-	const closeState = useDialogClose({
-		variant: box.with(() => "action"),
+	const actionState = useAlertDialogAction({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -22,7 +21,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, closeState.props));
+	const mergedProps = $derived(mergeProps(restProps, actionState.props));
 </script>
 
 {#if child}

package/dist/bits/alert-dialog/components/alert-dialog-action.svelte.d.ts

@@ -11,7 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AlertDialogAction: $$__sveltets_2_IsomorphicComponent<import("../index.js").TriggerProps, {
+declare const AlertDialogAction: $$__sveltets_2_IsomorphicComponent<import("../types.js").AlertDialogTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type AlertDialogAction = InstanceType<typeof AlertDialogAction>;

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { CancelProps } from "../index.js";
+	import type { AlertDialogCancelProps } from "../types.js";
 	import { useAlertDialogCancel } from "../../dialog/dialog.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
 
 	let {
 		id = useId(),
@@ -11,7 +11,7 @@
 		children,
 		child,
 		...restProps
-	}: CancelProps = $props();
+	}: AlertDialogCancelProps = $props();
 
 	const cancelState = useAlertDialogCancel({
 		id: box.with(() => id),

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte.d.ts

@@ -11,7 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AlertDialogCancel: $$__sveltets_2_IsomorphicComponent<import("../index.js").TriggerProps, {
+declare const AlertDialogCancel: $$__sveltets_2_IsomorphicComponent<import("../types.js").AlertDialogTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type AlertDialogCancel = InstanceType<typeof AlertDialogCancel>;

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { ContentProps } from "../index.js";
+	import type { AlertDialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
 	import FocusScope from "../../utilities/focus-scope/focus-scope.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import TextSelectionLayer from "../../utilities/text-selection-layer/text-selection-layer.svelte";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/callbacks.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
 	import { useDialogContent } from "../../dialog/dialog.svelte.js";
@@ -26,7 +26,7 @@
 		preventScroll = true,
 		trapFocus = true,
 		...restProps
-	}: ContentProps = $props();
+	}: AlertDialogContentProps = $props();
 
 	const contentState = useDialogContent({
 		id: box.with(() => id),

package/dist/bits/alert-dialog/components/alert-dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import type { AlertDialogRootProps } from "../types.js";
 	import { noop } from "../../../internal/callbacks.js";
 	import { useDialogRoot } from "../../dialog/dialog.svelte.js";
 
@@ -9,7 +9,7 @@
 		onOpenChange = noop,
 		controlledOpen = false,
 		children,
-	}: RootProps = $props();
+	}: AlertDialogRootProps = $props();
 
 	useDialogRoot({
 		variant: box.with(() => "alert-dialog"),

package/dist/bits/alert-dialog/exports.d.ts

@@ -0,0 +1,10 @@
+export { default as Root } from "./components/alert-dialog.svelte";
+export { default as Title } from "../dialog/components/dialog-title.svelte";
+export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/alert-dialog-content.svelte";
+export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
+export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
+export { default as Description } from "../dialog/components/dialog-description.svelte";
+export type { AlertDialogRootProps as RootProps, AlertDialogTitleProps as TitleProps, AlertDialogActionProps as ActionProps, AlertDialogCancelProps as CancelProps, AlertDialogPortalProps as PortalProps, AlertDialogContentProps as ContentProps, AlertDialogOverlayProps as OverlayProps, AlertDialogTriggerProps as TriggerProps, AlertDialogDescriptionProps as DescriptionProps, } from "./types.js";

package/dist/bits/alert-dialog/exports.js

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/alert-dialog.svelte";
+export { default as Title } from "../dialog/components/dialog-title.svelte";
+export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/alert-dialog-content.svelte";
+export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
+export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
+export { default as Description } from "../dialog/components/dialog-description.svelte";

package/dist/bits/alert-dialog/index.d.ts

@@ -1,10 +1 @@
-export { default as Root } from "./components/alert-dialog.svelte";
-export { default as Title } from "../dialog/components/dialog-title.svelte";
-export { default as Action } from "./components/alert-dialog-action.svelte";
-export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export { default as Content } from "./components/alert-dialog-content.svelte";
-export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
-export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
-export { default as Description } from "../dialog/components/dialog-description.svelte";
-export type { AlertDialogRootProps as RootProps, AlertDialogTitleProps as TitleProps, AlertDialogActionProps as ActionProps, AlertDialogCancelProps as CancelProps, AlertDialogPortalProps as PortalProps, AlertDialogContentProps as ContentProps, AlertDialogOverlayProps as OverlayProps, AlertDialogTriggerProps as TriggerProps, AlertDialogDescriptionProps as DescriptionProps, } from "./types.js";
+export * as AlertDialog from "./exports.js";

package/dist/bits/alert-dialog/index.js

@@ -1,9 +1 @@
-export { default as Root } from "./components/alert-dialog.svelte";
-export { default as Title } from "../dialog/components/dialog-title.svelte";
-export { default as Action } from "./components/alert-dialog-action.svelte";
-export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export { default as Content } from "./components/alert-dialog-content.svelte";
-export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
-export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
-export { default as Description } from "../dialog/components/dialog-description.svelte";
+export * as AlertDialog from "./exports.js";

package/dist/bits/aspect-ratio/aspect-ratio.svelte.js

@@ -1,4 +1,4 @@
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { useRefById } from "../../internal/use-ref-by-id.svelte.js";
 const ASPECT_RATIO_ROOT_ATTR = "data-aspect-ratio-root";
 export class AspectRatioRootState {
     #ref;

package/dist/bits/aspect-ratio/components/aspect-ratio.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import type { AspectRatioRootProps } from "../types.js";
 	import { useAspectRatioRoot } from "../aspect-ratio.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 		children,
 		child,
 		...restProps
-	}: RootProps = $props();
+	}: AspectRatioRootProps = $props();
 
 	const rootState = useAspectRatioRoot({
 		id: box.with(() => id),

package/dist/bits/aspect-ratio/components/aspect-ratio.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { AspectRatioRootProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AspectRatio: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const AspectRatio: $$__sveltets_2_IsomorphicComponent<AspectRatioRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type AspectRatio = InstanceType<typeof AspectRatio>;

package/dist/bits/aspect-ratio/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/aspect-ratio.svelte";
+export type { AspectRatioRootProps as RootProps } from "./types.js";

package/dist/bits/aspect-ratio/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/aspect-ratio.svelte";

package/dist/bits/aspect-ratio/index.d.ts

@@ -1,2 +1 @@
-export { default as Root } from "./components/aspect-ratio.svelte";
-export type { AspectRatioProps as RootProps } from "./types.js";
+export * as AspectRatio from "./exports.js";

package/dist/bits/aspect-ratio/index.js

@@ -1 +1 @@
-export { default as Root } from "./components/aspect-ratio.svelte";
+export * as AspectRatio from "./exports.js";

package/dist/bits/aspect-ratio/types.d.ts

@@ -1,6 +1,6 @@
 import type { WithChild, Without } from "../../internal/types.js";
 import type { PrimitiveDivAttributes } from "../../shared/attributes.js";
-export type AspectRatioPropsWithoutHTML = WithChild<{
+export type AspectRatioRootPropsWithoutHTML = WithChild<{
     /**
      * The aspect ratio of the image.
      *
@@ -8,4 +8,4 @@ export type AspectRatioPropsWithoutHTML = WithChild<{
      */
     ratio?: number;
 }>;
-export type AspectRatioProps = AspectRatioPropsWithoutHTML & Without<PrimitiveDivAttributes, AspectRatioPropsWithoutHTML>;
+export type AspectRatioRootProps = AspectRatioRootPropsWithoutHTML & Without<PrimitiveDivAttributes, AspectRatioRootPropsWithoutHTML>;

package/dist/bits/avatar/avatar.svelte.d.ts

@@ -1,7 +1,10 @@
 import type { ReadableBox, WritableBox } from "svelte-toolbelt";
+import type { HTMLImgAttributes } from "svelte/elements";
 import type { AvatarImageLoadingStatus } from "./types.js";
 import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
+type CrossOrigin = HTMLImgAttributes["crossorigin"];
+type ReferrerPolicy = HTMLImgAttributes["referrerpolicy"];
 /**
  * ROOT
  */
@@ -15,25 +18,23 @@ declare class AvatarRootState {
     delayMs: AvatarRootStateProps["delayMs"];
     loadingStatus: AvatarRootStateProps["loadingStatus"];
     constructor(props: AvatarRootStateProps);
-    loadImage(src: string): () => void;
+    loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): () => void;
     props: {
         readonly id: string;
         readonly "data-avatar-root": "";
         readonly "data-status": AvatarImageLoadingStatus;
     };
-    createImage(props: AvatarImageStateProps): AvatarImageState;
-    createFallback(props: AvatarFallbackStateProps): AvatarFallbackState;
 }
 /**
  * IMAGE
  */
 type AvatarImageStateProps = WithRefProps<ReadableBoxedValues<{
     src: AvatarImageSrc;
+    crossOrigin: CrossOrigin;
+    referrerPolicy: ReferrerPolicy;
 }>>;
 declare class AvatarImageState {
     #private;
-    src: AvatarImageStateProps["src"];
-    root: AvatarRootState;
     constructor(props: AvatarImageStateProps, root: AvatarRootState);
     props: {
         readonly id: string;
@@ -43,6 +44,8 @@ declare class AvatarImageState {
         readonly "data-status": AvatarImageLoadingStatus;
         readonly "data-avatar-image": "";
         readonly src: AvatarImageSrc;
+        readonly crossorigin: "" | "anonymous" | "use-credentials" | null | undefined;
+        readonly referrerpolicy: globalThis.ReferrerPolicy | null | undefined;
     };
 }
 /**
@@ -51,7 +54,6 @@ declare class AvatarImageState {
 type AvatarFallbackStateProps = WithRefProps;
 declare class AvatarFallbackState {
     #private;
-    root: AvatarRootState;
     constructor(props: AvatarFallbackStateProps, root: AvatarRootState);
     props: {
         readonly style: {

package/dist/bits/avatar/avatar.svelte.js

@@ -1,6 +1,6 @@
 import { untrack } from "svelte";
-import { createContext } from "../../internal/createContext.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { createContext } from "../../internal/create-context.js";
+import { useRefById } from "../../internal/use-ref-by-id.svelte.js";
 const AVATAR_ROOT_ATTR = "data-avatar-root";
 const AVATAR_IMAGE_ATTR = "data-avatar-image";
 const AVATAR_FALLBACK_ATTR = "data-avatar-fallback";
@@ -19,13 +19,17 @@ class AvatarRootState {
             ref: this.#ref,
         });
     }
-    loadImage(src) {
+    loadImage(src, crossorigin, referrerPolicy) {
         let imageTimerId;
         const image = new Image();
         image.src = src;
+        if (crossorigin !== undefined)
+            image.crossOrigin = crossorigin;
+        if (referrerPolicy)
+            image.referrerPolicy = referrerPolicy;
         this.loadingStatus.current = "loading";
         image.onload = () => {
-            imageTimerId = setTimeout(() => {
+            imageTimerId = window.setTimeout(() => {
                 this.loadingStatus.current = "loaded";
             }, this.delayMs.current);
         };
@@ -41,49 +45,51 @@ class AvatarRootState {
         [AVATAR_ROOT_ATTR]: "",
         "data-status": this.loadingStatus.current,
     }));
-    createImage(props) {
-        return new AvatarImageState(props, this);
-    }
-    createFallback(props) {
-        return new AvatarFallbackState(props, this);
-    }
 }
 class AvatarImageState {
     #id;
     #ref;
-    src;
-    root;
+    #crossOrigin;
+    #referrerPolicy;
+    #src;
+    #root;
     constructor(props, root) {
-        this.root = root;
-        this.src = props.src;
+        this.#root = root;
+        this.#src = props.src;
         this.#id = props.id;
         this.#ref = props.ref;
+        this.#crossOrigin = props.crossOrigin;
+        this.#referrerPolicy = props.referrerPolicy;
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
         $effect.pre(() => {
-            if (!this.src.current)
+            if (!this.#src.current)
                 return;
-            untrack(() => this.root.loadImage(this.src.current ?? ""));
+            // dependency on crossorigin
+            this.#crossOrigin.current;
+            untrack(() => this.#root.loadImage(this.#src.current ?? "", this.#crossOrigin.current, this.#referrerPolicy.current));
         });
     }
     props = $derived.by(() => ({
         id: this.#id.current,
         style: {
-            display: this.root.loadingStatus.current === "loaded" ? "block" : "none",
+            display: this.#root.loadingStatus.current === "loaded" ? "block" : "none",
         },
-        "data-status": this.root.loadingStatus.current,
+        "data-status": this.#root.loadingStatus.current,
         [AVATAR_IMAGE_ATTR]: "",
-        src: this.src.current,
+        src: this.#src.current,
+        crossorigin: this.#crossOrigin.current,
+        referrerpolicy: this.#referrerPolicy.current,
     }));
 }
 class AvatarFallbackState {
     #id;
     #ref;
-    root;
+    #root;
     constructor(props, root) {
-        this.root = root;
+        this.#root = root;
         this.#id = props.id;
         this.#ref = props.ref;
         useRefById({
@@ -93,9 +99,9 @@ class AvatarFallbackState {
     }
     props = $derived.by(() => ({
         style: {
-            display: this.root.loadingStatus.current === "loaded" ? "none" : undefined,
+            display: this.#root.loadingStatus.current === "loaded" ? "none" : undefined,
         },
-        "data-status": this.root.loadingStatus.current,
+        "data-status": this.#root.loadingStatus.current,
         [AVATAR_FALLBACK_ATTR]: "",
     }));
 }
@@ -107,8 +113,10 @@ export function useAvatarRoot(props) {
     return setAvatarRootContext(new AvatarRootState(props));
 }
 export function useAvatarImage(props) {
-    return getAvatarRootContext().createImage(props);
+    const root = getAvatarRootContext();
+    return new AvatarImageState(props, root);
 }
 export function useAvatarFallback(props) {
-    return getAvatarRootContext().createFallback(props);
+    const root = getAvatarRootContext();
+    return new AvatarFallbackState(props, root);
 }