bits-ui 1.0.0-next.6 → 1.0.0-next.61

package/dist/bits/dropdown-menu/components/dropdown-menu-content.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ContentProps } from "../index.js";
+import type { DropdownMenuContentProps } 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 DropdownMenuContent: $$__sveltets_2_IsomorphicComponent<ContentProps, {
+declare const DropdownMenuContent: $$__sveltets_2_IsomorphicComponent<DropdownMenuContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DropdownMenuContent = InstanceType<typeof DropdownMenuContent>;

package/dist/bits/dropdown-menu/exports.d.ts

@@ -0,0 +1,18 @@
+export { default as Root } from "../menu/components/menu.svelte";
+export { default as Sub } from "../menu/components/menu-sub.svelte";
+export { default as Item } from "../menu/components/menu-item.svelte";
+export { default as Group } from "../menu/components/menu-group.svelte";
+export { default as GroupHeading } from "../menu/components/menu-group-heading.svelte";
+export { default as Arrow } from "../menu/components/menu-arrow.svelte";
+export { default as Content } from "./components/dropdown-menu-content.svelte";
+export { default as ContentStatic } from "./components/dropdown-menu-content-static.svelte";
+export { default as Trigger } from "../menu/components/menu-trigger.svelte";
+export { default as RadioItem } from "../menu/components/menu-radio-item.svelte";
+export { default as Separator } from "../menu/components/menu-separator.svelte";
+export { default as RadioGroup } from "../menu/components/menu-radio-group.svelte";
+export { default as SubContent } from "../menu/components/menu-sub-content.svelte";
+export { default as SubContentStatic } from "../menu/components/menu-sub-content-static.svelte";
+export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
+export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export type { DropdownMenuArrowProps as ArrowProps, DropdownMenuCheckboxItemProps as CheckboxItemProps, DropdownMenuContentProps as ContentProps, DropdownMenuContentStaticProps as ContentStaticProps, DropdownMenuGroupProps as GroupProps, DropdownMenuItemProps as ItemProps, DropdownMenuGroupHeadingProps as GroupHeadingProps, DropdownMenuRootProps as RootProps, DropdownMenuRadioGroupProps as RadioGroupProps, DropdownMenuRadioItemProps as RadioItemProps, DropdownMenuSeparatorProps as SeparatorProps, DropdownMenuSubContentProps as SubContentProps, DropdownMenuSubContentStaticProps as SubContentStaticProps, DropdownMenuSubProps as SubProps, DropdownMenuSubTriggerProps as SubTriggerProps, DropdownMenuTriggerProps as TriggerProps, DropdownMenuPortalProps as PortalProps, } from "./types.js";

package/dist/bits/dropdown-menu/exports.js

@@ -0,0 +1,17 @@
+export { default as Root } from "../menu/components/menu.svelte";
+export { default as Sub } from "../menu/components/menu-sub.svelte";
+export { default as Item } from "../menu/components/menu-item.svelte";
+export { default as Group } from "../menu/components/menu-group.svelte";
+export { default as GroupHeading } from "../menu/components/menu-group-heading.svelte";
+export { default as Arrow } from "../menu/components/menu-arrow.svelte";
+export { default as Content } from "./components/dropdown-menu-content.svelte";
+export { default as ContentStatic } from "./components/dropdown-menu-content-static.svelte";
+export { default as Trigger } from "../menu/components/menu-trigger.svelte";
+export { default as RadioItem } from "../menu/components/menu-radio-item.svelte";
+export { default as Separator } from "../menu/components/menu-separator.svelte";
+export { default as RadioGroup } from "../menu/components/menu-radio-group.svelte";
+export { default as SubContent } from "../menu/components/menu-sub-content.svelte";
+export { default as SubContentStatic } from "../menu/components/menu-sub-content-static.svelte";
+export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
+export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";

package/dist/bits/dropdown-menu/index.d.ts

@@ -1,18 +1 @@
-export { default as Root } from "../menu/components/menu.svelte";
-export { default as Sub } from "../menu/components/menu-sub.svelte";
-export { default as Item } from "../menu/components/menu-item.svelte";
-export { default as Group } from "../menu/components/menu-group.svelte";
-export { default as GroupHeading } from "../menu/components/menu-group-heading.svelte";
-export { default as Arrow } from "../menu/components/menu-arrow.svelte";
-export { default as Content } from "./components/dropdown-menu-content.svelte";
-export { default as ContentStatic } from "./components/dropdown-menu-content-static.svelte";
-export { default as Trigger } from "../menu/components/menu-trigger.svelte";
-export { default as RadioItem } from "../menu/components/menu-radio-item.svelte";
-export { default as Separator } from "../menu/components/menu-separator.svelte";
-export { default as RadioGroup } from "../menu/components/menu-radio-group.svelte";
-export { default as SubContent } from "../menu/components/menu-sub-content.svelte";
-export { default as SubContentStatic } from "../menu/components/menu-sub-content-static.svelte";
-export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
-export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { DropdownMenuArrowProps as ArrowProps, DropdownMenuCheckboxItemProps as CheckboxItemProps, DropdownMenuContentProps as ContentProps, DropdownMenuContentStaticProps as ContentStaticProps, DropdownMenuGroupProps as GroupProps, DropdownMenuItemProps as ItemProps, DropdownMenuGroupHeadingProps as GroupHeadingProps, DropdownMenuRootProps as RootProps, DropdownMenuRadioGroupProps as RadioGroupProps, DropdownMenuRadioItemProps as RadioItemProps, DropdownMenuSeparatorProps as SeparatorProps, DropdownMenuSubContentProps as SubContentProps, DropdownMenuSubContentStaticProps as SubContentStaticProps, DropdownMenuSubProps as SubProps, DropdownMenuSubTriggerProps as SubTriggerProps, DropdownMenuTriggerProps as TriggerProps, DropdownMenuPortalProps as PortalProps, } from "./types.js";
+export * as DropdownMenu from "./exports.js";

package/dist/bits/dropdown-menu/index.js

@@ -1,17 +1 @@
-export { default as Root } from "../menu/components/menu.svelte";
-export { default as Sub } from "../menu/components/menu-sub.svelte";
-export { default as Item } from "../menu/components/menu-item.svelte";
-export { default as Group } from "../menu/components/menu-group.svelte";
-export { default as GroupHeading } from "../menu/components/menu-group-heading.svelte";
-export { default as Arrow } from "../menu/components/menu-arrow.svelte";
-export { default as Content } from "./components/dropdown-menu-content.svelte";
-export { default as ContentStatic } from "./components/dropdown-menu-content-static.svelte";
-export { default as Trigger } from "../menu/components/menu-trigger.svelte";
-export { default as RadioItem } from "../menu/components/menu-radio-item.svelte";
-export { default as Separator } from "../menu/components/menu-separator.svelte";
-export { default as RadioGroup } from "../menu/components/menu-radio-group.svelte";
-export { default as SubContent } from "../menu/components/menu-sub-content.svelte";
-export { default as SubContentStatic } from "../menu/components/menu-sub-content-static.svelte";
-export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
-export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
+export * as DropdownMenu from "./exports.js";

package/dist/bits/dropdown-menu/types.d.ts

@@ -1,2 +1,2 @@
-export type { ArrowProps as DropdownMenuArrowProps, CheckboxItemProps as DropdownMenuCheckboxItemProps, ContentProps as DropdownMenuContentProps, ContentStaticProps as DropdownMenuContentStaticProps, GroupProps as DropdownMenuGroupProps, ItemProps as DropdownMenuItemProps, GroupHeadingProps as DropdownMenuGroupHeadingProps, RootProps as DropdownMenuRootProps, RadioGroupProps as DropdownMenuRadioGroupProps, RadioItemProps as DropdownMenuRadioItemProps, SeparatorProps as DropdownMenuSeparatorProps, SubContentProps as DropdownMenuSubContentProps, SubContentStaticProps as DropdownMenuSubContentStaticProps, SubProps as DropdownMenuSubProps, SubTriggerProps as DropdownMenuSubTriggerProps, TriggerProps as DropdownMenuTriggerProps, PortalProps as DropdownMenuPortalProps, } from "../menu/index.js";
+export type { MenuArrowProps as DropdownMenuArrowProps, MenuCheckboxItemProps as DropdownMenuCheckboxItemProps, MenuContentProps as DropdownMenuContentProps, MenuContentStaticProps as DropdownMenuContentStaticProps, MenuGroupProps as DropdownMenuGroupProps, MenuItemProps as DropdownMenuItemProps, MenuGroupHeadingProps as DropdownMenuGroupHeadingProps, MenuRootProps as DropdownMenuRootProps, MenuRadioGroupProps as DropdownMenuRadioGroupProps, MenuRadioItemProps as DropdownMenuRadioItemProps, MenuSeparatorProps as DropdownMenuSeparatorProps, MenuSubContentProps as DropdownMenuSubContentProps, MenuSubContentStaticProps as DropdownMenuSubContentStaticProps, MenuSubProps as DropdownMenuSubProps, MenuSubTriggerProps as DropdownMenuSubTriggerProps, MenuTriggerProps as DropdownMenuTriggerProps, MenuPortalProps as DropdownMenuPortalProps, } from "../menu/types.js";
 export type { MenuRootPropsWithoutHTML as DropdownMenuRootPropsWithoutHTML, MenuArrowPropsWithoutHTML as DropdownMenuArrowPropsWithoutHTML, MenuCheckboxItemPropsWithoutHTML as DropdownMenuCheckboxItemPropsWithoutHTML, MenuContentPropsWithoutHTML as DropdownMenuContentPropsWithoutHTML, MenuContentStaticPropsWithoutHTML as DropdownMenuContentStaticPropsWithoutHTML, MenuGroupPropsWithoutHTML as DropdownMenuGroupPropsWithoutHTML, MenuItemPropsWithoutHTML as DropdownMenuItemPropsWithoutHTML, MenuGroupHeadingPropsWithoutHTML as DropdownMenuGroupHeadingPropsWithoutHTML, MenuRadioGroupPropsWithoutHTML as DropdownMenuRadioGroupPropsWithoutHTML, MenuRadioItemPropsWithoutHTML as DropdownMenuRadioItemPropsWithoutHTML, MenuSeparatorPropsWithoutHTML as DropdownMenuSeparatorPropsWithoutHTML, MenuSubPropsWithoutHTML as DropdownMenuSubPropsWithoutHTML, MenuSubTriggerPropsWithoutHTML as DropdownMenuSubTriggerPropsWithoutHTML, MenuSubContentPropsWithoutHTML as DropdownMenuSubContentPropsWithoutHTML, MenuSubContentStaticPropsWithoutHTML as DropdownMenuSubContentStaticPropsWithoutHTML, MenuTriggerPropsWithoutHTML as DropdownMenuTriggerPropsWithoutHTML, MenuPortalPropsWithoutHTML as DropdownMenuPortalPropsWithoutHTML, } from "../menu/types.js";

package/dist/bits/index.d.ts

@@ -1,39 +1,38 @@
-export * as Accordion from "./accordion/index.js";
-export * as AlertDialog from "./alert-dialog/index.js";
-export * as AspectRatio from "./aspect-ratio/index.js";
-export * as Avatar from "./avatar/index.js";
-export * as Button from "./button/index.js";
-export * as Calendar from "./calendar/index.js";
-export * as Checkbox from "./checkbox/index.js";
-export * as Collapsible from "./collapsible/index.js";
-export * as Combobox from "./combobox/index.js";
-export * as Command from "./command/index.js";
-export * as ContextMenu from "./context-menu/index.js";
-export * as DateField from "./date-field/index.js";
-export * as DatePicker from "./date-picker/index.js";
-export * as DateRangeField from "./date-range-field/index.js";
-export * as DateRangePicker from "./date-range-picker/index.js";
-export * as Dialog from "./dialog/index.js";
-export * as DropdownMenu from "./dropdown-menu/index.js";
-export * as Label from "./label/index.js";
-export * as LinkPreview from "./link-preview/index.js";
-export * as Listbox from "./listbox/index.js";
-export * as Menubar from "./menubar/index.js";
-export * as NavigationMenu from "./navigation-menu/index.js";
-export * as Pagination from "./pagination/index.js";
-export * as PinInput from "./pin-input/index.js";
-export * as Popover from "./popover/index.js";
-export * as Progress from "./progress/index.js";
-export * as RadioGroup from "./radio-group/index.js";
-export * as RangeCalendar from "./range-calendar/index.js";
-export * as ScrollArea from "./scroll-area/index.js";
-export * as Select from "./select/index.js";
-export * as Separator from "./separator/index.js";
-export * as Slider from "./slider/index.js";
-export * as Switch from "./switch/index.js";
-export * as Tabs from "./tabs/index.js";
-export * as Toggle from "./toggle/index.js";
-export * as ToggleGroup from "./toggle-group/index.js";
-export * as Toolbar from "./toolbar/index.js";
-export * as Tooltip from "./tooltip/index.js";
+export { Accordion } from "./accordion/index.js";
+export { AlertDialog } from "./alert-dialog/index.js";
+export { AspectRatio } from "./aspect-ratio/index.js";
+export { Avatar } from "./avatar/index.js";
+export { Button } from "./button/index.js";
+export { Calendar } from "./calendar/index.js";
+export { Checkbox } from "./checkbox/index.js";
+export { Collapsible } from "./collapsible/index.js";
+export { Combobox } from "./combobox/index.js";
+export { Command } from "./command/index.js";
+export { ContextMenu } from "./context-menu/index.js";
+export { DateField } from "./date-field/index.js";
+export { DatePicker } from "./date-picker/index.js";
+export { DateRangeField } from "./date-range-field/index.js";
+export { DateRangePicker } from "./date-range-picker/index.js";
+export { Dialog } from "./dialog/index.js";
+export { DropdownMenu } from "./dropdown-menu/index.js";
+export { Label } from "./label/index.js";
+export { LinkPreview } from "./link-preview/index.js";
+export { Menubar } from "./menubar/index.js";
+export { NavigationMenu } from "./navigation-menu/index.js";
+export { Pagination } from "./pagination/index.js";
+export { PinInput } from "./pin-input/index.js";
+export { Popover } from "./popover/index.js";
+export { Progress } from "./progress/index.js";
+export { RadioGroup } from "./radio-group/index.js";
+export { RangeCalendar } from "./range-calendar/index.js";
+export { ScrollArea } from "./scroll-area/index.js";
+export { Select } from "./select/index.js";
+export { Separator } from "./separator/index.js";
+export { Slider } from "./slider/index.js";
+export { Switch } from "./switch/index.js";
+export { Tabs } from "./tabs/index.js";
+export { Toggle } from "./toggle/index.js";
+export { ToggleGroup } from "./toggle-group/index.js";
+export { Toolbar } from "./toolbar/index.js";
+export { Tooltip } from "./tooltip/index.js";
 export { default as Portal } from "./utilities/portal/portal.svelte";

package/dist/bits/index.js

@@ -1,39 +1,38 @@
-export * as Accordion from "./accordion/index.js";
-export * as AlertDialog from "./alert-dialog/index.js";
-export * as AspectRatio from "./aspect-ratio/index.js";
-export * as Avatar from "./avatar/index.js";
-export * as Button from "./button/index.js";
-export * as Calendar from "./calendar/index.js";
-export * as Checkbox from "./checkbox/index.js";
-export * as Collapsible from "./collapsible/index.js";
-export * as Combobox from "./combobox/index.js";
-export * as Command from "./command/index.js";
-export * as ContextMenu from "./context-menu/index.js";
-export * as DateField from "./date-field/index.js";
-export * as DatePicker from "./date-picker/index.js";
-export * as DateRangeField from "./date-range-field/index.js";
-export * as DateRangePicker from "./date-range-picker/index.js";
-export * as Dialog from "./dialog/index.js";
-export * as DropdownMenu from "./dropdown-menu/index.js";
-export * as Label from "./label/index.js";
-export * as LinkPreview from "./link-preview/index.js";
-export * as Listbox from "./listbox/index.js";
-export * as Menubar from "./menubar/index.js";
-export * as NavigationMenu from "./navigation-menu/index.js";
-export * as Pagination from "./pagination/index.js";
-export * as PinInput from "./pin-input/index.js";
-export * as Popover from "./popover/index.js";
-export * as Progress from "./progress/index.js";
-export * as RadioGroup from "./radio-group/index.js";
-export * as RangeCalendar from "./range-calendar/index.js";
-export * as ScrollArea from "./scroll-area/index.js";
-export * as Select from "./select/index.js";
-export * as Separator from "./separator/index.js";
-export * as Slider from "./slider/index.js";
-export * as Switch from "./switch/index.js";
-export * as Tabs from "./tabs/index.js";
-export * as Toggle from "./toggle/index.js";
-export * as ToggleGroup from "./toggle-group/index.js";
-export * as Toolbar from "./toolbar/index.js";
-export * as Tooltip from "./tooltip/index.js";
+export { Accordion } from "./accordion/index.js";
+export { AlertDialog } from "./alert-dialog/index.js";
+export { AspectRatio } from "./aspect-ratio/index.js";
+export { Avatar } from "./avatar/index.js";
+export { Button } from "./button/index.js";
+export { Calendar } from "./calendar/index.js";
+export { Checkbox } from "./checkbox/index.js";
+export { Collapsible } from "./collapsible/index.js";
+export { Combobox } from "./combobox/index.js";
+export { Command } from "./command/index.js";
+export { ContextMenu } from "./context-menu/index.js";
+export { DateField } from "./date-field/index.js";
+export { DatePicker } from "./date-picker/index.js";
+export { DateRangeField } from "./date-range-field/index.js";
+export { DateRangePicker } from "./date-range-picker/index.js";
+export { Dialog } from "./dialog/index.js";
+export { DropdownMenu } from "./dropdown-menu/index.js";
+export { Label } from "./label/index.js";
+export { LinkPreview } from "./link-preview/index.js";
+export { Menubar } from "./menubar/index.js";
+export { NavigationMenu } from "./navigation-menu/index.js";
+export { Pagination } from "./pagination/index.js";
+export { PinInput } from "./pin-input/index.js";
+export { Popover } from "./popover/index.js";
+export { Progress } from "./progress/index.js";
+export { RadioGroup } from "./radio-group/index.js";
+export { RangeCalendar } from "./range-calendar/index.js";
+export { ScrollArea } from "./scroll-area/index.js";
+export { Select } from "./select/index.js";
+export { Separator } from "./separator/index.js";
+export { Slider } from "./slider/index.js";
+export { Switch } from "./switch/index.js";
+export { Tabs } from "./tabs/index.js";
+export { Toggle } from "./toggle/index.js";
+export { ToggleGroup } from "./toggle-group/index.js";
+export { Toolbar } from "./toolbar/index.js";
+export { Tooltip } from "./tooltip/index.js";
 export { default as Portal } from "./utilities/portal/portal.svelte";

package/dist/bits/label/components/label.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { LabelRootProps } from "../types.js";
 	import { setLabelRootState } from "../label.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -12,7 +11,7 @@
 		ref = $bindable(null),
 		for: forProp,
 		...restProps
-	}: RootProps = $props();
+	}: LabelRootProps = $props();
 
 	const rootState = setLabelRootState({
 		id: box.with(() => id),

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { LabelRootProps } 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 Label: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Label: $$__sveltets_2_IsomorphicComponent<LabelRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type Label = InstanceType<typeof Label>;

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

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

package/dist/bits/label/exports.js

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

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

@@ -1,2 +1 @@
-export { default as Root } from "./components/label.svelte";
-export type { LabelRootProps as RootProps } from "./types.js";
+export * as Label from "./exports.js";

package/dist/bits/label/index.js

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

package/dist/bits/label/label.svelte.js

@@ -1,4 +1,4 @@
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { useRefById } from "svelte-toolbelt";
 const ROOT_ATTR = "data-label-root";
 class LabelRootState {
     #id;

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

@@ -1,4 +1,4 @@
 import type { WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveLabelAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveLabelAttributes } from "../../shared/attributes.js";
 export type LabelRootPropsWithoutHTML = WithChild;
-export type LabelRootProps = LabelRootPropsWithoutHTML & Without<PrimitiveLabelAttributes, LabelRootPropsWithoutHTML>;
+export type LabelRootProps = LabelRootPropsWithoutHTML & Without<BitsPrimitiveLabelAttributes, LabelRootPropsWithoutHTML>;

package/dist/bits/link-preview/components/link-preview-content-static.svelte

@@ -1,21 +1,30 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentStaticProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { LinkPreviewContentProps } from "../types.js";
 	import { useLinkPreviewContent } from "../link-preview.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		children,
 		child,
 		id = useId(),
 		ref = $bindable(null),
+		side = "top",
+		sideOffset = 0,
+		align = "center",
+		avoidCollisions = true,
+		arrowPadding = 0,
+		sticky = "partial",
+		hideWhenDetached = false,
+		collisionPadding = 0,
 		onInteractOutside,
 		onEscapeKeydown,
 		forceMount = false,
 		...restProps
-	}: ContentStaticProps = $props();
+	}: LinkPreviewContentProps = $props();
 
 	const contentState = useLinkPreviewContent({
 		id: box.with(() => id),
@@ -25,37 +34,86 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
+	const floatingProps = $derived({
+		side,
+		sideOffset,
+		align,
+		avoidCollisions,
+		arrowPadding,
+		sticky,
+		hideWhenDetached,
+		collisionPadding,
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
 
-<PopperLayer
-	isStatic={true}
-	{...mergedProps}
-	present={contentState.root.open.current || forceMount}
-	{id}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside?.(e);
 		if (e.defaultPrevented) return;
-		contentState.root.immediateClose();
-	}}
-	onEscapeKeydown={(e) => {
+		contentState.root.handleClose();
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown?.(e);
 		if (e.defaultPrevented) return;
-		contentState.root.immediateClose();
-	}}
-	onOpenAutoFocus={(e) => e.preventDefault()}
-	onCloseAutoFocus={(e) => e.preventDefault()}
-	trapFocus={false}
-	loop={false}
-	preventScroll={false}
->
-	{#snippet popper({ props })}
-		{#if child}
-			{@render child({ props, ...contentState.snippetProps })}
-		{:else}
-			<div {...props}>
-				{@render children?.(contentState.snippetProps)}
-			</div>
-		{/if}
-	{/snippet}
-</PopperLayer>
+		contentState.root.handleClose();
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		enabled={contentState.root.open.current}
+		isStatic
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={true}
+	>
+		{#snippet popper({ props })}
+			{@const mergedProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("link-preview"),
+			})}
+			{#if child}
+				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		present={contentState.root.open.current}
+		isStatic
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={false}
+	>
+		{#snippet popper({ props })}
+			{@const mergedProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("link-preview"),
+			})}
+			{#if child}
+				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/link-preview/components/link-preview-content-static.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ContentStaticProps } from "../index.js";
+import type { LinkPreviewContentProps } 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 LinkPreviewContentStatic: $$__sveltets_2_IsomorphicComponent<ContentStaticProps, {
+declare const LinkPreviewContentStatic: $$__sveltets_2_IsomorphicComponent<LinkPreviewContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type LinkPreviewContentStatic = InstanceType<typeof LinkPreviewContentStatic>;