@signal9/era-ui 22.0.0 → 23.1.0

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

@@ -1,12 +1,37 @@
 <script lang="ts">
 	import { Menubar } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
 
-	let { ref = $bindable(null), class: className, ...restProps }: Menubar.RootProps = $props();
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: Menubar.RootProps = $props();
+
+	const relay = setAxisRelay();
+
+	/*
+	 * Menubar's "open" is `value` — WHICH menu is open, not whether one is — so
+	 * the capture keys off a non-empty value. Same reason as everywhere else:
+	 * bits-ui mounts content eagerly, so reading at mount reads page load.
+	 *
+	 * The root ELEMENT is the anchor here rather than a trigger. A menubar's
+	 * triggers are inside it, so the bar sits at the same place in the tree for
+	 * axis purposes, and it exists whether or not any menu has been opened.
+	 */
+	$effect(() => {
+		relay.register(ref);
+	});
+	$effect(() => {
+		if (value) relay.refresh();
+	});
 </script>
 
 <Menubar.Root
 	bind:ref
+	bind:value
 	class={cn('flex h-bar items-center rounded-bar bg-well px-gutter shadow-sm', className)}
 	{...restProps}
 />

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

@@ -1,4 +1,4 @@
 import { Menubar } from 'bits-ui';
-declare const MenubarRoot: import("svelte").Component<Menubar.RootProps, {}, "ref">;
+declare const MenubarRoot: import("svelte").Component<Menubar.RootProps, {}, "value" | "ref">;
 type MenubarRoot = ReturnType<typeof MenubarRoot>;
 export default MenubarRoot;

package/dist/ui/menubar/menubar-sub-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { Menubar } 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<Menubar.SubContentProps> = $props();
+	}: OwnedPartProps<Menubar.SubContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <Menubar.Portal>
 	<Menubar.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/menubar/menubar-sub-content.svelte.d.ts

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

package/dist/ui/menubar/menubar-sub-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { Menubar } 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<Menubar.SubTriggerProps> = $props();
+	}: OwnedPartProps<Menubar.SubTriggerProps> = $props();
 </script>
 
 <Menubar.SubTrigger

package/dist/ui/menubar/menubar-sub-trigger.svelte.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as Bar } from './nav-bar.svelte';
+export { default as Item } from './nav-item.svelte';

package/dist/ui/nav/index.js

@@ -0,0 +1,2 @@
+export { default as Bar } from './nav-bar.svelte';
+export { default as Item } from './nav-item.svelte';

package/dist/ui/nav/nav-bar.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	// Bar's geometry, imported rather than restated. A re-export here would be a
+	// second name for one thing; anyone who wants the variants imports them from
+	// Bar, which is where they are defined.
+	import { barVariants } from '../bar/bar.svelte';
+
+	let {
+		ref = $bindable(null),
+		size = 'bar',
+		content = 'tier',
+		label = 'Main',
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLElement> & {
+		ref?: HTMLElement | null;
+		/** Height tier, exactly as Bar's — the geometry is Bar's, not a second copy. */
+		size?: 'chip' | 'control' | 'bar';
+		/** Tier of the items inside, so the wall stays concentric to them. */
+		content?: 'tier' | 'pill';
+		/**
+		 * The accessible name for this landmark. A page may hold several
+		 * navigations (primary, breadcrumb, pagination, footer) and a screen
+		 * reader lists them all by name — unnamed, they read as "navigation",
+		 * "navigation", "navigation". Defaults to "Main" rather than nothing so
+		 * the common case is named without anyone having to know this.
+		 */
+		label?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<!--
+	A <nav> LANDMARK, not a styled div, which is the entire reason this exists
+	next to Bar. Bar is a layout primitive: a flex row on a tier with concentric
+	walls, and deliberately semantics-free, so consumers were building tab bars
+	out of it and shipping a row of links no assistive technology could find or
+	skip. Nav.Bar is that same geometry — it literally reuses barVariants rather
+	than restating it — with the landmark and the name attached.
+-->
+<nav
+	bind:this={ref}
+	aria-label={label}
+	class={cn(barVariants({ size, content }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</nav>

package/dist/ui/nav/nav-bar.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    ref?: HTMLElement | null;
+    /** Height tier, exactly as Bar's — the geometry is Bar's, not a second copy. */
+    size?: 'chip' | 'control' | 'bar';
+    /** Tier of the items inside, so the wall stays concentric to them. */
+    content?: 'tier' | 'pill';
+    /**
+     * The accessible name for this landmark. A page may hold several
+     * navigations (primary, breadcrumb, pagination, footer) and a screen
+     * reader lists them all by name — unnamed, they read as "navigation",
+     * "navigation", "navigation". Defaults to "Main" rather than nothing so
+     * the common case is named without anyone having to know this.
+     */
+    label?: string;
+    children?: Snippet;
+};
+declare const NavBar: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type NavBar = ReturnType<typeof NavBar>;
+export default NavBar;

package/dist/ui/nav/nav-item.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import { buttonVariants } from '../button/variants.js';
+
+	let {
+		ref = $bindable(null),
+		href,
+		current = false,
+		size = 'control',
+		lead,
+		trail,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAnchorAttributes & {
+		ref?: HTMLAnchorElement | null;
+		href: string;
+		/**
+		 * Whether this item points at the page you are on.
+		 *
+		 * There is deliberately no `active` prop beside this one. `active` would
+		 * be a second source of truth for one fact, and the two drift the moment
+		 * a route changes and someone updates the styling flag but not the
+		 * announcement — leaving a tab that LOOKS current to sighted users and
+		 * announces nothing to a screen reader, or the reverse. This sets
+		 * `aria-current="page"`, and the styling below keys off that attribute,
+		 * so the look and the announcement cannot disagree: there is one fact
+		 * and it is the accessible one.
+		 */
+		current?: boolean;
+		/** Tier, matching Button's rungs so an item nests in a bar the same way. */
+		size?: 'control' | 'chip' | 'pill' | 'icon';
+		/** Icon before the label, outside it — same contract as Button's. */
+		lead?: Snippet;
+		/** Icon after the label, outside it. */
+		trail?: Snippet;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<!--
+	GEOMETRY IS BUTTON'S, borrowed rather than restated: an item in a bar is a
+	control on a rung, and a nav that invented its own heights would fall off the
+	ladder the first time the density axis moved.
+
+	The latched face is Button's too — bg-fill, the pressed shadow, held on hover
+	so it does not spring back up on bevel — but it is driven by
+	[aria-current='page'] instead of a class the caller sets. That is the whole
+	design: the attribute a screen reader reads IS the selector that paints.
+-->
+<!-- Nav.Item takes app routes and external URLs alike; resolution is the caller's. -->
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+<a
+	bind:this={ref}
+	{href}
+	aria-current={current ? 'page' : undefined}
+	class={cn(
+		buttonVariants({ size }),
+		'no-underline aria-[current=page]:bg-fill aria-[current=page]:text-bright aria-[current=page]:shadow-pressed aria-[current=page]:hover:shadow-pressed',
+		className
+	)}
+	{...restProps}
+>
+	<span
+		data-button-content
+		class="inline-flex items-center justify-center [gap:inherit] not-has-[svg]:era-label-ink"
+	>
+		{#if lead || trail}
+			{@render lead?.()}
+			{#if children}<span class="era-text-trim">{@render children()}</span>{/if}
+			{@render trail?.()}
+		{:else}
+			{@render children?.()}
+		{/if}
+	</span>
+</a>
+<!-- eslint-enable svelte/no-navigation-without-resolve -->

package/dist/ui/nav/nav-item.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAnchorAttributes & {
+    ref?: HTMLAnchorElement | null;
+    href: string;
+    /**
+     * Whether this item points at the page you are on.
+     *
+     * There is deliberately no `active` prop beside this one. `active` would
+     * be a second source of truth for one fact, and the two drift the moment
+     * a route changes and someone updates the styling flag but not the
+     * announcement — leaving a tab that LOOKS current to sighted users and
+     * announces nothing to a screen reader, or the reverse. This sets
+     * `aria-current="page"`, and the styling below keys off that attribute,
+     * so the look and the announcement cannot disagree: there is one fact
+     * and it is the accessible one.
+     */
+    current?: boolean;
+    /** Tier, matching Button's rungs so an item nests in a bar the same way. */
+    size?: 'control' | 'chip' | 'pill' | 'icon';
+    /** Icon before the label, outside it — same contract as Button's. */
+    lead?: Snippet;
+    /** Icon after the label, outside it. */
+    trail?: Snippet;
+    children?: Snippet;
+};
+declare const NavItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;

package/dist/ui/provider/axes.d.ts

@@ -15,7 +15,20 @@ export interface AxisMeta {
     key: string;
     /** Default level value. */
     default: string;
-    /** Must be set on <html> so portalled content inherits it. */
+    /**
+     * Set this axis on <html> for a whole-document default.
+     *
+     * This used to read "MUST be set on <html> so portalled content inherits
+     * it", which was not a description of the axis but a surrender: portalled
+     * content is reparented to <body>, so it stopped inheriting from its subtree,
+     * and hoisting to the root was the only way to make it look right. That cost
+     * subtree scoping for the eight portalling components, and it was not even
+     * always available — an app that scopes a surface to part of itself cannot
+     * hoist without restyling the rest.
+     *
+     * The axes now cross the portal on their own (provider/axis-relay.svelte.ts),
+     * so this is a convenience, not a requirement.
+     */
     onHtml: boolean;
     /** Selectable levels, in scale order. */
     levels: readonly AxisLevel[];

package/dist/ui/provider/axis-relay.svelte.d.ts

@@ -0,0 +1,34 @@
+export declare class AxisRelay {
+    #private;
+    /** Attributes to stamp on portalled content. Empty until a capture runs. */
+    attrs: Record<string, string>;
+    /** `dark` / `light` when a scoped one is in force, else undefined. */
+    scheme: "dark" | "light" | undefined;
+    /** Called by the Trigger once it has an element. */
+    register(el: HTMLElement | null | undefined): void;
+    /**
+     * Read the axes in force at the anchor and remember them.
+     *
+     * CALLED WHEN THE CONTENT OPENS, not when the trigger mounts. Capturing at
+     * mount looks equivalent and is not: an axis can change while a trigger sits
+     * there — the docs' own pickers do it on every click, and a consumer toggling
+     * a theme or pinning a panel to dense does it too — and a value read once at
+     * mount is then wrong for every subsequent open. Content is created fresh on
+     * each open, so refreshing there is both correct and self-scheduling.
+     *
+     * Nearest-ancestor per axis, INDEPENDENTLY: a subtree can override density
+     * without touching surface, and closest() answers each question separately,
+     * which is what makes the axes orthogonal in the first place.
+     */
+    refresh(): void;
+    /** The class string portalled content should carry. */
+    get schemeClass(): string;
+}
+/** Called by era's Root for a portalling component. */
+export declare function setAxisRelay(): AxisRelay;
+/**
+ * Called by a Trigger or Content. Returns null outside an era Root — a consumer
+ * using bits-ui's own Root directly still gets working components, just without
+ * the relay, so this must never throw.
+ */
+export declare function getAxisRelay(): AxisRelay | null;

package/dist/ui/provider/axis-relay.svelte.js

@@ -0,0 +1,109 @@
+import { getContext, hasContext, setContext } from 'svelte';
+import { axisKeys, axisRegistry } from './axes.js';
+/*
+ * CARRYING THE AXES ACROSS A PORTAL.
+ *
+ * Eight components render their content through a Portal, which moves it to
+ * document.body. Everything era styles with is inherited — the density ladder
+ * and the roundness scale are custom properties on `*`, surfaces re-baseline a
+ * token contract, the font axis publishes an inherited stack — so content that
+ * leaves its subtree stops inheriting from it and starts inheriting from :root.
+ *
+ * The consequence was not subtle and it was not theoretical. A dialog opened
+ * from inside a `data-surface="bevel"` panel rendered flat. A dropdown inside a
+ * pinned-dense sidebar rendered at the page's density, so its rows were the
+ * wrong tier and every concentric gap inside it was computed against heights it
+ * did not have. A menu inside a scoped theme rendered the page's colours. The
+ * library's answer was the `onHtml: true` flag in the axis registry — "must be
+ * set on <html> so portalled content inherits it" — which is not a fix, it is
+ * the instruction to give up subtree scoping for these eight components. And it
+ * is not always available: signalnine.org scopes `data-surface` to five app
+ * surfaces precisely so its marketing pages are NOT bevelled, so hoisting to
+ * <html> would have been a worse bug than the one it fixed.
+ *
+ * WHY A RELAY RATHER THAN READING AT THE CONTENT. The content cannot answer the
+ * question itself: by the time it exists it is already a child of <body>, and
+ * every ancestor it can see is the wrong one. The value has to be captured from
+ * a node that is still in the subtree, and handed across.
+ *
+ * The trigger is that node. It is a real element, it lives exactly where the
+ * content logically belongs, and it is present for every component here. The
+ * root sets up the channel (era owns Root for all eight now — it did not, which
+ * is why there was nowhere to put this), the trigger fills it from its own DOM
+ * position, and the content spreads it onto itself.
+ *
+ * WHAT IT DOES NOT DO. A trigger-less flow — a dialog driven purely by
+ * `bind:open` with no Trigger rendered — has nothing to capture from, and the
+ * content falls back to inheriting from :root exactly as it does today. That is
+ * unchanged behaviour rather than a regression, and the relay is written so the
+ * absence is a null, not a crash.
+ */
+const KEY = Symbol('era.axis-relay');
+/** The axis attributes, plus the theme pair, which is not in the axis registry. */
+const THEME_ATTR = 'data-theme';
+const SCHEME_CLASSES = ['dark', 'light'];
+export class AxisRelay {
+    /** Attributes to stamp on portalled content. Empty until a capture runs. */
+    attrs = $state({});
+    /** `dark` / `light` when a scoped one is in force, else undefined. */
+    scheme = $state(undefined);
+    /** The trigger's element — the last node still inside the subtree. */
+    #anchor = null;
+    /** Called by the Trigger once it has an element. */
+    register(el) {
+        this.#anchor = el ?? null;
+    }
+    /**
+     * Read the axes in force at the anchor and remember them.
+     *
+     * CALLED WHEN THE CONTENT OPENS, not when the trigger mounts. Capturing at
+     * mount looks equivalent and is not: an axis can change while a trigger sits
+     * there — the docs' own pickers do it on every click, and a consumer toggling
+     * a theme or pinning a panel to dense does it too — and a value read once at
+     * mount is then wrong for every subsequent open. Content is created fresh on
+     * each open, so refreshing there is both correct and self-scheduling.
+     *
+     * Nearest-ancestor per axis, INDEPENDENTLY: a subtree can override density
+     * without touching surface, and closest() answers each question separately,
+     * which is what makes the axes orthogonal in the first place.
+     */
+    refresh() {
+        const el = this.#anchor;
+        if (!el?.closest)
+            return;
+        const next = {};
+        for (const key of axisKeys) {
+            const attr = axisRegistry[key].attr;
+            const value = el.closest(`[${attr}]`)?.getAttribute(attr);
+            if (value)
+                next[attr] = value;
+        }
+        // Theme is not an axis in the registry (it has no picker contract), but it
+        // is inherited the same way and breaks across a portal the same way.
+        const theme = el.closest(`[${THEME_ATTR}]`)?.getAttribute(THEME_ATTR);
+        if (theme)
+            next[THEME_ATTR] = theme;
+        this.attrs = next;
+        // The colour-scheme pair is a CLASS, not an attribute, so it is separate.
+        const schemeHost = el.closest('.dark, .light');
+        this.scheme = SCHEME_CLASSES.find((c) => schemeHost?.classList.contains(c)) ?? undefined;
+    }
+    /** The class string portalled content should carry. */
+    get schemeClass() {
+        return this.scheme ?? '';
+    }
+}
+/** Called by era's Root for a portalling component. */
+export function setAxisRelay() {
+    const relay = new AxisRelay();
+    setContext(KEY, relay);
+    return relay;
+}
+/**
+ * Called by a Trigger or Content. Returns null outside an era Root — a consumer
+ * using bits-ui's own Root directly still gets working components, just without
+ * the relay, so this must never throw.
+ */
+export function getAxisRelay() {
+    return hasContext(KEY) ? getContext(KEY) : null;
+}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Select } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,7 +8,7 @@
 		class: className,
 		sideOffset = 0,
 		...restProps
-	}: PartProps<Select.ContentProps> = $props();
+	}: OwnedPartProps<Select.ContentProps> = $props();
 </script>
 
 <Select.Content

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

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

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

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { Select } 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<Select.TriggerProps> = $props();
+	}: OwnedPartProps<Select.TriggerProps> = $props();
 </script>
 
 <Select.Trigger

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	import { cn, tv, type PartProps } from '../../utils/index.js';
+	import { cn, tv, type OwnedPartProps } from '../../utils/index.js';
 
 	// A Sheet is a Dialog pinned to a screen edge — the idiomatic mobile drawer
 	// (bottom for controls, left/right for navigation). Positioning + which
@@ -36,6 +36,7 @@
 </script>
 
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import type { Snippet } from 'svelte';
 	import { Dialog } from 'bits-ui';
 	import Overlay from '../dialog/dialog-overlay.svelte';
@@ -47,18 +48,23 @@
 		header,
 		class: className,
 		...restProps
-	}: PartProps<Dialog.ContentProps> & {
+	}: OwnedPartProps<Dialog.ContentProps> & {
 		/** Screen edge the sheet is anchored to. */
 		side?: 'top' | 'right' | 'bottom' | 'left';
 		/** A top bar in the pane's grammar — pass `Sheet.Header` holding `Sheet.Title`. */
 		header?: Snippet;
 	} = $props();
+
+	// Sheet is a Dialog pinned to an edge — it reuses Dialog's Root and Trigger,
+	// so the relay is already open by the time this renders.
+	const relay = getAxisRelay();
 </script>
 
 <Dialog.Portal>
 	<Overlay />
 	<Dialog.Content
 		bind:ref
+		{...relay?.attrs}
 		class={cn(sheetVariants({ side, header: header != null }), className)}
 		{...restProps}
 	>

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

@@ -1,4 +1,4 @@
-import { type PartProps } from '../../utils/index.js';
+import { type OwnedPartProps } from '../../utils/index.js';
 export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
     side: {
         top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-(--sheet-rd)";
@@ -56,7 +56,7 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
 }, undefined>>;
 import type { Snippet } from 'svelte';
 import { Dialog } from 'bits-ui';
-type $$ComponentProps = PartProps<Dialog.ContentProps> & {
+type $$ComponentProps = OwnedPartProps<Dialog.ContentProps> & {
     /** Screen edge the sheet is anchored to. */
     side?: 'top' | 'right' | 'bottom' | 'left';
     /** A top bar in the pane's grammar — pass `Sheet.Header` holding `Sheet.Title`. */

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

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { Collapsible } 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<Collapsible.ContentProps> = $props();
+	}: OwnedPartProps<Collapsible.ContentProps> = $props();
 </script>
 
 <!-- Height animates on the outer (padding-free) element via era-collapse, which

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

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

package/dist/ui/step/step-summary.svelte

@@ -5,7 +5,7 @@
 	import CircleX from '@lucide/svelte/icons/circle-x';
 	import CircleDashed from '@lucide/svelte/icons/circle-dashed';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 	import { getStepContext } from './context.js';
 
 	let {
@@ -13,7 +13,7 @@
 		children,
 		class: className,
 		...restProps
-	}: PartProps<Collapsible.TriggerProps> = $props();
+	}: OwnedPartProps<Collapsible.TriggerProps> = $props();
 
 	const step = getStepContext();
 </script>

package/dist/ui/step/step-summary.svelte.d.ts

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

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

@@ -1,6 +1,6 @@
 import { Tooltip } from 'bits-ui';
 export declare const Provider: typeof Tooltip.Provider;
-export declare const Root: typeof Tooltip.Root;
+export { default as Root } from './tooltip-root.svelte';
 export declare const Portal: typeof Tooltip.Portal;
 export declare const Arrow: typeof Tooltip.Arrow;
 export { default as Trigger } from './tooltip-trigger.svelte';

package/dist/ui/tooltip/index.js

@@ -1,6 +1,6 @@
 import { Tooltip } from 'bits-ui';
 export const Provider = Tooltip.Provider;
-export const Root = Tooltip.Root;
+export { default as Root } from './tooltip-root.svelte';
 export const Portal = Tooltip.Portal;
 export const Arrow = Tooltip.Arrow;
 export { default as Trigger } from './tooltip-trigger.svelte';