@signal9/era-ui 22.0.0 → 23.0.0

package/dist/ui/alert-dialog/alert-dialog-content.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { AlertDialog } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<AlertDialog.ContentProps> = $props();
+	}: OwnedPartProps<AlertDialog.ContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <AlertDialog.Portal>
 	<AlertDialog.Overlay class="fixed inset-0 z-overlay bg-overlay" />
 	<AlertDialog.Content
 		bind:ref
+		{...relay?.attrs}
 		class={cn(
 			'fixed top-1/2 left-1/2 z-overlay flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-gutter rounded-bar border border-divider bg-well p-card shadow-lg glass-blur',
 			className

package/dist/ui/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PartProps } from '../../utils/index.js';
-declare const AlertDialogContent: import("svelte").Component<PartProps<import("bits-ui").DialogContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const AlertDialogContent: import("svelte").Component<OwnedPartProps<import("bits-ui").DialogContentProps>, {}, "ref">;
 type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
 export default AlertDialogContent;

package/dist/ui/alert-dialog/alert-dialog-root.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { AlertDialog } from 'bits-ui';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
+
+	/*
+	 * era owns Root ONLY to open the axis channel — it renders no DOM, adds no
+	 * behaviour and forwards everything. There has to BE a component here: a
+	 * re-export (`export const Root = AlertDialog.Root`) has nowhere to put a context,
+	 * which is exactly why the axes could not cross the portal before.
+	 *
+	 * `open` is re-declared bindable because a spread cannot carry a two-way
+	 * binding, so wrapping a primitive breaks `bind:open` at every call site
+	 * unless the wrapper states it.
+	 */
+	let {
+		open = $bindable(false),
+		children,
+		...restProps
+	}: AlertDialog.RootProps & { children?: Snippet } = $props();
+
+	const relay = setAxisRelay();
+
+	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
+	// it, so a mount-time read runs once at page load and never again.
+	$effect(() => {
+		if (open) relay.refresh();
+	});
+</script>
+
+<AlertDialog.Root bind:open {...restProps}>
+	{@render children?.()}
+</AlertDialog.Root>

package/dist/ui/alert-dialog/alert-dialog-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { AlertDialog } from 'bits-ui';
+type $$ComponentProps = AlertDialog.RootProps & {
+    children?: Snippet;
+};
+declare const AlertDialogRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type AlertDialogRoot = ReturnType<typeof AlertDialogRoot>;
+export default AlertDialogRoot;

package/dist/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import type { Snippet } from 'svelte';
 	import { AlertDialog, type WithoutChildrenOrChild } from 'bits-ui';
 	import { Button, type ButtonVariants } from '../button';
@@ -17,6 +18,13 @@
 		ButtonVariants & {
 			children?: Snippet;
 		} = $props();
+
+	// The trigger is the last node still inside the subtree, so it is the
+	// anchor the axes are read FROM when the content opens.
+	const relay = getAxisRelay();
+	$effect(() => {
+		relay?.register(ref);
+	});
 </script>
 
 <AlertDialog.Trigger {...restProps}>

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

@@ -1,5 +1,5 @@
 import { AlertDialog } from 'bits-ui';
-export declare const Root: typeof AlertDialog.Root;
+export { default as Root } from './alert-dialog-root.svelte';
 export declare const Portal: typeof AlertDialog.Portal;
 export { default as Trigger } from './alert-dialog-trigger.svelte';
 export { default as Content } from './alert-dialog-content.svelte';

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

@@ -1,5 +1,5 @@
 import { AlertDialog } from 'bits-ui';
-export const Root = AlertDialog.Root;
+export { default as Root } from './alert-dialog-root.svelte';
 export const Portal = AlertDialog.Portal;
 export { default as Trigger } from './alert-dialog-trigger.svelte';
 export { default as Content } from './alert-dialog-content.svelte';

package/dist/ui/combobox/combobox-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { Combobox } from 'bits-ui';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<Combobox.TriggerProps> = $props();
+	}: OwnedPartProps<Combobox.TriggerProps> = $props();
 </script>
 
 <Combobox.Trigger

package/dist/ui/combobox/combobox-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { Combobox } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const ComboboxTrigger: import("svelte").Component<PartProps<Combobox.TriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const ComboboxTrigger: import("svelte").Component<OwnedPartProps<Combobox.TriggerProps>, {}, "ref">;
 type ComboboxTrigger = ReturnType<typeof ComboboxTrigger>;
 export default ComboboxTrigger;

package/dist/ui/context-menu/context-menu-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { ContextMenu } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 4,
 		...restProps
-	}: PartProps<ContextMenu.ContentProps> = $props();
+	}: OwnedPartProps<ContextMenu.ContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <ContextMenu.Portal>
 	<ContextMenu.Content
 		bind:ref
+		{...relay?.attrs}
 		align="start"
 		// p-menu, SURFACE-owned on purpose: 0 on flat — rows run the
 		// panel's full width, flush, and the first row sits directly under the

package/dist/ui/context-menu/context-menu-content.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PartProps } from '../../utils/index.js';
-declare const ContextMenuContent: import("svelte").Component<PartProps<import("bits-ui").DropdownMenuContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const ContextMenuContent: import("svelte").Component<OwnedPartProps<import("bits-ui").DropdownMenuContentProps>, {}, "ref">;
 type ContextMenuContent = ReturnType<typeof ContextMenuContent>;
 export default ContextMenuContent;

package/dist/ui/context-menu/context-menu-root.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { ContextMenu } from 'bits-ui';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
+
+	/*
+	 * era owns Root ONLY to open the axis channel — it renders no DOM, adds no
+	 * behaviour and forwards everything. There has to BE a component here: a
+	 * re-export (`export const Root = ContextMenu.Root`) has nowhere to put a context,
+	 * which is exactly why the axes could not cross the portal before.
+	 *
+	 * `open` is re-declared bindable because a spread cannot carry a two-way
+	 * binding, so wrapping a primitive breaks `bind:open` at every call site
+	 * unless the wrapper states it.
+	 */
+	let {
+		open = $bindable(false),
+		children,
+		...restProps
+	}: ContextMenu.RootProps & { children?: Snippet } = $props();
+
+	const relay = setAxisRelay();
+
+	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
+	// it, so a mount-time read runs once at page load and never again.
+	$effect(() => {
+		if (open) relay.refresh();
+	});
+</script>
+
+<ContextMenu.Root bind:open {...restProps}>
+	{@render children?.()}
+</ContextMenu.Root>

package/dist/ui/context-menu/context-menu-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { ContextMenu } from 'bits-ui';
+type $$ComponentProps = ContextMenu.RootProps & {
+    children?: Snippet;
+};
+declare const ContextMenuRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ContextMenuRoot = ReturnType<typeof ContextMenuRoot>;
+export default ContextMenuRoot;

package/dist/ui/context-menu/context-menu-sub-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { ContextMenu } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 4,
 		...restProps
-	}: PartProps<ContextMenu.SubContentProps> = $props();
+	}: OwnedPartProps<ContextMenu.SubContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <ContextMenu.Portal>
 	<ContextMenu.SubContent
 		bind:ref
+		{...relay?.attrs}
 		class={cn(
 			'z-overlay w-max overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur',
 			className

package/dist/ui/context-menu/context-menu-sub-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ContextMenu } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const ContextMenuSubContent: import("svelte").Component<PartProps<ContextMenu.SubContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const ContextMenuSubContent: import("svelte").Component<OwnedPartProps<ContextMenu.SubContentProps>, {}, "ref">;
 type ContextMenuSubContent = ReturnType<typeof ContextMenuSubContent>;
 export default ContextMenuSubContent;

package/dist/ui/context-menu/context-menu-sub-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { ContextMenu } from 'bits-ui';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<ContextMenu.SubTriggerProps> = $props();
+	}: OwnedPartProps<ContextMenu.SubTriggerProps> = $props();
 </script>
 
 <ContextMenu.SubTrigger

package/dist/ui/context-menu/context-menu-sub-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ContextMenu } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const ContextMenuSubTrigger: import("svelte").Component<PartProps<ContextMenu.SubTriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const ContextMenuSubTrigger: import("svelte").Component<OwnedPartProps<ContextMenu.SubTriggerProps>, {}, "ref">;
 type ContextMenuSubTrigger = ReturnType<typeof ContextMenuSubTrigger>;
 export default ContextMenuSubTrigger;

package/dist/ui/context-menu/context-menu-trigger.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { ContextMenu } from 'bits-ui';
 
 	// Pattern A: no extra DOM, so children flow through restProps untouched.
@@ -7,6 +8,13 @@
 		class: className,
 		...restProps
 	}: ContextMenu.TriggerProps = $props();
+
+	// The trigger is the last node still inside the subtree, so it is the
+	// anchor the axes are read FROM when the content opens.
+	const relay = getAxisRelay();
+	$effect(() => {
+		relay?.register(ref);
+	});
 </script>
 
 <ContextMenu.Trigger bind:ref class={className} {...restProps} />

package/dist/ui/context-menu/index.d.ts

@@ -1,5 +1,5 @@
 import { ContextMenu } from 'bits-ui';
-export declare const Root: typeof ContextMenu.Root;
+export { default as Root } from './context-menu-root.svelte';
 export declare const Group: typeof ContextMenu.Group;
 export declare const RadioGroup: typeof ContextMenu.RadioGroup;
 export declare const Sub: typeof ContextMenu.Sub;

package/dist/ui/context-menu/index.js

@@ -1,5 +1,5 @@
 import { ContextMenu } from 'bits-ui';
-export const Root = ContextMenu.Root;
+export { default as Root } from './context-menu-root.svelte';
 export const Group = ContextMenu.Group;
 export const RadioGroup = ContextMenu.RadioGroup;
 export const Sub = ContextMenu.Sub;

package/dist/ui/date-picker/date-picker-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { DatePicker } from 'bits-ui';
 	import CalendarDays from '@lucide/svelte/icons/calendar-days';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<DatePicker.TriggerProps> = $props();
+	}: OwnedPartProps<DatePicker.TriggerProps> = $props();
 </script>
 
 <DatePicker.Trigger

package/dist/ui/date-picker/date-picker-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { DatePicker } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const DatePickerTrigger: import("svelte").Component<PartProps<DatePicker.TriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const DatePickerTrigger: import("svelte").Component<OwnedPartProps<DatePicker.TriggerProps>, {}, "ref">;
 type DatePickerTrigger = ReturnType<typeof DatePickerTrigger>;
 export default DatePickerTrigger;

package/dist/ui/date-range-picker/date-range-picker-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { DateRangePicker } from 'bits-ui';
 	import CalendarDays from '@lucide/svelte/icons/calendar-days';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<DateRangePicker.TriggerProps> = $props();
+	}: OwnedPartProps<DateRangePicker.TriggerProps> = $props();
 </script>
 
 <DateRangePicker.Trigger

package/dist/ui/date-range-picker/date-range-picker-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { DateRangePicker } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const DateRangePickerTrigger: import("svelte").Component<PartProps<DateRangePicker.TriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const DateRangePickerTrigger: import("svelte").Component<OwnedPartProps<DateRangePicker.TriggerProps>, {}, "ref">;
 type DateRangePickerTrigger = ReturnType<typeof DateRangePickerTrigger>;
 export default DateRangePickerTrigger;

package/dist/ui/dialog/dialog-content.svelte

@@ -2,7 +2,8 @@
 	import type { Snippet } from 'svelte';
 	import { Dialog } from 'bits-ui';
 	import Overlay from './dialog-overlay.svelte';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 
 	let {
 		ref = $bindable(null),
@@ -10,7 +11,7 @@
 		header,
 		class: className,
 		...restProps
-	}: PartProps<Dialog.ContentProps> & {
+	}: OwnedPartProps<Dialog.ContentProps> & {
 		/**
 		 * A top bar in the pane's grammar — pass `Dialog.Header` (usually holding
 		 * `Dialog.Title`). With it the panel goes sectioned like a Card: the bar
@@ -20,6 +21,13 @@
 		 */
 		header?: Snippet;
 	} = $props();
+
+	const relay = getAxisRelay();
+	// Content is created fresh on every open, so this reads the axes as they are
+	// NOW rather than as they were when the trigger mounted.
+	$effect(() => {
+		relay?.refresh();
+	});
 </script>
 
 <Dialog.Portal>
@@ -27,9 +35,15 @@
 	<!-- border-divider: the pane's hairline-edge law. A floating panel must be
 	     separable from what's behind it, and on the flat surface shadow-lg
 	     collapses to none — without the hairline the whole edge was a tone step. -->
+	<!-- The axes the trigger was standing in, re-declared here — see
+	     provider/axis-relay.svelte.ts. Portalled content is a child of <body>,
+	     so without this it inherits the page's density, surface, corners, font,
+	     motion and theme rather than the subtree's. -->
 	<Dialog.Content
 		bind:ref
+		{...relay?.attrs}
 		class={cn(
+			relay?.schemeClass,
 			'fixed top-1/2 left-1/2 z-overlay flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col border border-divider bg-well shadow-lg glass-blur',
 			header ? 'rounded-control' : 'gap-gutter rounded-bar p-card',
 			className

package/dist/ui/dialog/dialog-content.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import { Dialog } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-type $$ComponentProps = PartProps<Dialog.ContentProps> & {
+import { type OwnedPartProps } from '../../utils/index.js';
+type $$ComponentProps = OwnedPartProps<Dialog.ContentProps> & {
     /**
      * A top bar in the pane's grammar — pass `Dialog.Header` (usually holding
      * `Dialog.Title`). With it the panel goes sectioned like a Card: the bar

package/dist/ui/dialog/dialog-root.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Dialog } from 'bits-ui';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
+
+	/*
+	 * era owns Root ONLY to open the axis channel. It renders no DOM, adds no
+	 * behaviour and forwards everything — it is bits-ui's Root plus a context.
+	 *
+	 * There has to BE a component here, though, which is the whole reason the
+	 * axes could not cross the portal for as long as they could not: `export
+	 * const Root = Dialog.Root` is a re-export, and a re-export has nowhere to
+	 * put a context.
+	 *
+	 * `open` is declared bindable explicitly. A spread cannot carry a two-way
+	 * binding, so wrapping a primitive silently breaks `bind:open` at every call
+	 * site unless the wrapper re-declares it — which is exactly what happened the
+	 * first time this was written, caught by svelte-check on a real consumer.
+	 */
+	let {
+		open = $bindable(false),
+		children,
+		...restProps
+	}: Dialog.RootProps & { children?: Snippet } = $props();
+
+	const relay = setAxisRelay();
+
+	/*
+	 * CAPTURE ON OPEN, which is not the same as capture on mount and was the
+	 * first thing this got wrong. bits-ui mounts content eagerly and toggles it,
+	 * so a refresh scheduled by the content's own mount runs once at page load —
+	 * before a consumer has scoped anything, and never again. Reading when `open`
+	 * turns true is the moment the answer is actually needed, and it re-reads on
+	 * every open, so an axis that changed in between is picked up.
+	 */
+	$effect(() => {
+		if (open) relay.refresh();
+	});
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	{@render children?.()}
+</Dialog.Root>

package/dist/ui/dialog/dialog-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { Dialog } from 'bits-ui';
+type $$ComponentProps = Dialog.RootProps & {
+    children?: Snippet;
+};
+declare const DialogRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type DialogRoot = ReturnType<typeof DialogRoot>;
+export default DialogRoot;

package/dist/ui/dialog/dialog-trigger.svelte

@@ -2,6 +2,12 @@
 	import type { Snippet } from 'svelte';
 	import { Dialog, type WithoutChildrenOrChild } from 'bits-ui';
 	import { Button, type ButtonVariants } from '../button';
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
+
+	// The trigger is the last node still inside the subtree, so it is the anchor
+	// the axes are read FROM. It only registers itself; the reading happens when
+	// the content opens, because an axis can change under a mounted trigger.
+	const relay = getAxisRelay();
 
 	let {
 		ref = $bindable(null),
@@ -17,6 +23,10 @@
 		ButtonVariants & {
 			children?: Snippet;
 		} = $props();
+
+	$effect(() => {
+		relay?.register(ref);
+	});
 </script>
 
 <Dialog.Trigger {...restProps}>

package/dist/ui/dialog/index.d.ts

@@ -1,5 +1,5 @@
 import { Dialog } from 'bits-ui';
-export declare const Root: typeof Dialog.Root;
+export { default as Root } from './dialog-root.svelte';
 export declare const Portal: typeof Dialog.Portal;
 export { default as Trigger } from './dialog-trigger.svelte';
 export { default as Content } from './dialog-content.svelte';

package/dist/ui/dialog/index.js

@@ -1,5 +1,5 @@
 import { Dialog } from 'bits-ui';
-export const Root = Dialog.Root;
+export { default as Root } from './dialog-root.svelte';
 export const Portal = Dialog.Portal;
 export { default as Trigger } from './dialog-trigger.svelte';
 export { default as Content } from './dialog-content.svelte';

package/dist/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { DropdownMenu } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 4,
 		...restProps
-	}: PartProps<DropdownMenu.ContentProps> = $props();
+	}: OwnedPartProps<DropdownMenu.ContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <DropdownMenu.Portal>
 	<DropdownMenu.Content
 		bind:ref
+		{...relay?.attrs}
 		align="start"
 		// p-menu, SURFACE-owned on purpose: 0 on flat — rows run the
 		// panel's full width, flush, and the first row sits directly under the

package/dist/ui/dropdown-menu/dropdown-menu-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import { DropdownMenu } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const DropdownMenuContent: import("svelte").Component<PartProps<DropdownMenu.ContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const DropdownMenuContent: import("svelte").Component<OwnedPartProps<DropdownMenu.ContentProps>, {}, "ref">;
 type DropdownMenuContent = ReturnType<typeof DropdownMenuContent>;
 export default DropdownMenuContent;

package/dist/ui/dropdown-menu/dropdown-menu-root.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { DropdownMenu } from 'bits-ui';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
+
+	/*
+	 * era owns Root ONLY to open the axis channel — it renders no DOM, adds no
+	 * behaviour and forwards everything. There has to BE a component here: a
+	 * re-export (`export const Root = DropdownMenu.Root`) has nowhere to put a context,
+	 * which is exactly why the axes could not cross the portal before.
+	 *
+	 * `open` is re-declared bindable because a spread cannot carry a two-way
+	 * binding, so wrapping a primitive breaks `bind:open` at every call site
+	 * unless the wrapper states it.
+	 */
+	let {
+		open = $bindable(false),
+		children,
+		...restProps
+	}: DropdownMenu.RootProps & { children?: Snippet } = $props();
+
+	const relay = setAxisRelay();
+
+	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
+	// it, so a mount-time read runs once at page load and never again.
+	$effect(() => {
+		if (open) relay.refresh();
+	});
+</script>
+
+<DropdownMenu.Root bind:open {...restProps}>
+	{@render children?.()}
+</DropdownMenu.Root>

package/dist/ui/dropdown-menu/dropdown-menu-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { DropdownMenu } from 'bits-ui';
+type $$ComponentProps = DropdownMenu.RootProps & {
+    children?: Snippet;
+};
+declare const DropdownMenuRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type DropdownMenuRoot = ReturnType<typeof DropdownMenuRoot>;
+export default DropdownMenuRoot;

package/dist/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { DropdownMenu } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 4,
 		...restProps
-	}: PartProps<DropdownMenu.SubContentProps> = $props();
+	}: OwnedPartProps<DropdownMenu.SubContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <DropdownMenu.Portal>
 	<DropdownMenu.SubContent
 		bind:ref
+		{...relay?.attrs}
 		class={cn(
 			'z-overlay w-max overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur',
 			className

package/dist/ui/dropdown-menu/dropdown-menu-sub-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import { DropdownMenu } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const DropdownMenuSubContent: import("svelte").Component<PartProps<DropdownMenu.SubContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const DropdownMenuSubContent: import("svelte").Component<OwnedPartProps<DropdownMenu.SubContentProps>, {}, "ref">;
 type DropdownMenuSubContent = ReturnType<typeof DropdownMenuSubContent>;
 export default DropdownMenuSubContent;