From a342eb93573904abe0a8d48fe49bc271f9c45aab Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Thu, 4 Jan 2024 22:29:28 -0500
Subject: [PATCH] fix: tree shaking (#255)

---
 .changeset/olive-cats-compete.md              |   5 +
 .../components/accordion-content.svelte       |   9 +-
 .../components/accordion-header.svelte        |   5 +-
 .../components/accordion-item.svelte          |   8 +-
 .../components/accordion-trigger.svelte       |   8 +-
 .../accordion/components/accordion.svelte     |   5 +-
 src/lib/bits/accordion/ctx.ts                 |  67 ++++----
 .../components/alert-dialog-action.svelte     |   5 +-
 .../components/alert-dialog-cancel.svelte     |   5 +-
 .../components/alert-dialog-content.svelte    |   5 +-
 .../alert-dialog-description.svelte           |   5 +-
 .../components/alert-dialog-overlay.svelte    |   5 +-
 .../components/alert-dialog-portal.svelte     |   5 +-
 .../components/alert-dialog-title.svelte      |   5 +-
 .../components/alert-dialog-trigger.svelte    |   5 +-
 src/lib/bits/alert-dialog/ctx.ts              |  51 +++---
 .../avatar/components/avatar-fallback.svelte  |   5 +-
 .../avatar/components/avatar-image.svelte     |   6 +-
 src/lib/bits/avatar/components/avatar.svelte  |   5 +-
 src/lib/bits/avatar/ctx.ts                    |  22 ++-
 .../calendar/components/calendar-cell.svelte  |   5 +-
 .../calendar/components/calendar-day.svelte   |   5 +-
 .../components/calendar-grid-body.svelte      |   3 +-
 .../components/calendar-grid-head.svelte      |   9 +-
 .../components/calendar-grid-row.svelte       |   4 +-
 .../calendar/components/calendar-grid.svelte  |   5 +-
 .../components/calendar-head-cell.svelte      |   3 +-
 .../components/calendar-header.svelte         |   4 +-
 .../components/calendar-heading.svelte        |   5 +-
 .../components/calendar-next-button.svelte    |   5 +-
 .../components/calendar-prev-button.svelte    |   5 +-
 .../bits/calendar/components/calendar.svelte  |   5 +-
 src/lib/bits/calendar/ctx.ts                  |  54 +++---
 .../components/checkbox-indicator.svelte      |   5 +-
 .../bits/checkbox/components/checkbox.svelte  |   5 +-
 src/lib/bits/checkbox/ctx.ts                  |  28 ++--
 .../components/collapsible-content.svelte     |   5 +-
 .../components/collapsible-trigger.svelte     |   5 +-
 .../collapsible/components/collapsible.svelte |   5 +-
 src/lib/bits/collapsible/ctx.ts               |  25 +--
 .../components/context-menu-content.svelte    |   5 +-
 .../components/context-menu-trigger.svelte    |   5 +-
 src/lib/bits/context-menu/ctx.ts              |  63 +++----
 .../components/date-field-input.svelte        |   5 +-
 .../components/date-field-label.svelte        |   5 +-
 .../components/date-field-segment.svelte      |   5 +-
 src/lib/bits/date-field/ctx.ts                |  25 +--
 .../components/date-picker-arrow.svelte       |   5 +-
 .../components/date-picker-calendar.svelte    |   5 +-
 .../components/date-picker-cell.svelte        |   5 +-
 .../components/date-picker-close.svelte       |   5 +-
 .../components/date-picker-content.svelte     |   5 +-
 .../components/date-picker-day.svelte         |   5 +-
 .../components/date-picker-grid.svelte        |   5 +-
 .../components/date-picker-heading.svelte     |   5 +-
 .../components/date-picker-input.svelte       |   5 +-
 .../components/date-picker-label.svelte       |   5 +-
 .../components/date-picker-next-button.svelte |   5 +-
 .../components/date-picker-prev-button.svelte |   5 +-
 .../components/date-picker-segment.svelte     |   5 +-
 .../components/date-picker-trigger.svelte     |   5 +-
 src/lib/bits/date-picker/ctx.ts               |  44 +++--
 .../components/date-range-field-input.svelte  |   5 +-
 .../components/date-range-field-label.svelte  |   5 +-
 .../date-range-field-segment.svelte           |   5 +-
 src/lib/bits/date-range-field/ctx.ts          |  26 ++-
 .../components/date-range-picker-arrow.svelte |   5 +-
 .../date-range-picker-calendar.svelte         |   5 +-
 .../components/date-range-picker-cell.svelte  |   5 +-
 .../components/date-range-picker-close.svelte |   5 +-
 .../date-range-picker-content.svelte          |   5 +-
 .../components/date-range-picker-day.svelte   |   5 +-
 .../components/date-range-picker-grid.svelte  |   5 +-
 .../date-range-picker-heading.svelte          |   5 +-
 .../components/date-range-picker-input.svelte |   5 +-
 .../components/date-range-picker-label.svelte |   5 +-
 .../date-range-picker-next-button.svelte      |   5 +-
 .../date-range-picker-prev-button.svelte      |   5 +-
 .../date-range-picker-segment.svelte          |   5 +-
 .../date-range-picker-trigger.svelte          |   5 +-
 src/lib/bits/date-range-picker/ctx.ts         |  46 +++--
 .../dialog/components/dialog-close.svelte     |   5 +-
 .../dialog/components/dialog-content.svelte   |   5 +-
 .../components/dialog-description.svelte      |   5 +-
 .../dialog/components/dialog-overlay.svelte   |   5 +-
 .../dialog/components/dialog-portal.svelte    |   5 +-
 .../dialog/components/dialog-title.svelte     |   5 +-
 .../dialog/components/dialog-trigger.svelte   |   5 +-
 src/lib/bits/dialog/ctx.ts                    |  31 +++-
 src/lib/bits/floating/helpers.ts              |  22 +--
 src/lib/bits/label/components/label.svelte    |   3 +-
 src/lib/bits/label/ctx.ts                     |  13 +-
 .../components/link-preview-arrow.svelte      |   5 +-
 .../components/link-preview-content.svelte    |   5 +-
 .../components/link-preview-trigger.svelte    |   5 +-
 src/lib/bits/link-preview/ctx.ts              |  53 +++---
 .../bits/menu/components/menu-arrow.svelte    |   5 +-
 .../components/menu-checkbox-indicator.svelte |   3 +-
 .../menu/components/menu-checkbox-item.svelte |   5 +-
 .../bits/menu/components/menu-content.svelte  |   5 +-
 .../bits/menu/components/menu-group.svelte    |   4 +-
 src/lib/bits/menu/components/menu-item.svelte |   5 +-
 .../bits/menu/components/menu-label.svelte    |   4 +-
 .../menu/components/menu-radio-group.svelte   |   5 +-
 .../components/menu-radio-indicator.svelte    |   9 +-
 .../menu/components/menu-radio-item.svelte    |   5 +-
 .../menu/components/menu-separator.svelte     |   5 +-
 .../menu/components/menu-sub-content.svelte   |   5 +-
 .../menu/components/menu-sub-trigger.svelte   |   5 +-
 .../bits/menu/components/menu-trigger.svelte  |   5 +-
 src/lib/bits/menu/ctx.ts                      | 157 +++++++++++-------
 .../menubar/components/menubar-trigger.svelte |   5 +-
 .../bits/menubar/components/menubar.svelte    |   5 +-
 src/lib/bits/menubar/ctx.ts                   |  83 +++++----
 .../components/pagination-next-button.svelte  |   5 +-
 .../components/pagination-page.svelte         |   5 +-
 .../components/pagination-prev-button.svelte  |   5 +-
 .../pagination/components/pagination.svelte   |   5 +-
 src/lib/bits/pagination/ctx.ts                |  25 +--
 .../components/pin-input-hidden-input.svelte  |   5 +-
 .../components/pin-input-input.svelte         |   5 +-
 .../pin-input/components/pin-input.svelte     |   5 +-
 src/lib/bits/pin-input/ctx.ts                 |  26 +--
 .../popover/components/popover-arrow.svelte   |   5 +-
 .../popover/components/popover-close.svelte   |   5 +-
 .../popover/components/popover-content.svelte |   5 +-
 .../popover/components/popover-trigger.svelte |   5 +-
 src/lib/bits/popover/ctx.ts                   |  43 +++--
 .../bits/progress/components/progress.svelte  |   5 +-
 src/lib/bits/progress/ctx.ts                  |  15 +-
 .../components/radio-group-input.svelte       |   5 +-
 .../radio-group-item-indicator.svelte         |   8 +-
 .../components/radio-group-item.svelte        |   5 +-
 .../radio-group/components/radio-group.svelte |   5 +-
 src/lib/bits/radio-group/ctx.ts               |  40 +++--
 .../components/range-calendar-cell.svelte     |   5 +-
 .../components/range-calendar-day.svelte      |   5 +-
 .../range-calendar-grid-body.svelte           |   4 +-
 .../range-calendar-grid-head.svelte           |   3 +-
 .../components/range-calendar-grid-row.svelte |   3 +-
 .../components/range-calendar-grid.svelte     |   5 +-
 .../range-calendar-head-cell.svelte           |   4 +-
 .../components/range-calendar-header.svelte   |   4 +-
 .../components/range-calendar-heading.svelte  |   5 +-
 .../range-calendar-next-button.svelte         |   5 +-
 .../range-calendar-prev-button.svelte         |   5 +-
 .../components/range-calendar.svelte          |   5 +-
 src/lib/bits/range-calendar/ctx.ts            |  47 +++---
 .../select/components/select-arrow.svelte     |   5 +-
 .../select/components/select-content.svelte   |   5 +-
 .../select/components/select-group.svelte     |   4 +-
 .../select/components/select-input.svelte     |   5 +-
 .../components/select-item-indicator.svelte   |   4 +-
 .../bits/select/components/select-item.svelte |   5 +-
 .../select/components/select-label.svelte     |   4 +-
 .../select/components/select-trigger.svelte   |   5 +-
 .../select/components/select-value.svelte     |   5 +-
 src/lib/bits/select/ctx.ts                    |  80 +++++----
 .../separator/components/separator.svelte     |   5 +-
 src/lib/bits/separator/ctx.ts                 |  16 +-
 .../slider/components/slider-input.svelte     |   5 +-
 .../slider/components/slider-range.svelte     |   5 +-
 .../slider/components/slider-thumb.svelte     |   5 +-
 .../bits/slider/components/slider-tick.svelte |   5 +-
 src/lib/bits/slider/components/slider.svelte  |   5 +-
 src/lib/bits/slider/ctx.ts                    |  20 ++-
 .../switch/components/switch-thumb.svelte     |   5 +-
 src/lib/bits/switch/components/switch.svelte  |   5 +-
 src/lib/bits/switch/ctx.ts                    |  21 ++-
 .../bits/tabs/components/tabs-content.svelte  |   5 +-
 src/lib/bits/tabs/components/tabs-list.svelte |   5 +-
 .../bits/tabs/components/tabs-trigger.svelte  |   5 +-
 src/lib/bits/tabs/components/tabs.svelte      |   5 +-
 src/lib/bits/tabs/ctx.ts                      |  21 ++-
 .../components/toggle-group-item.svelte       |   5 +-
 .../components/toggle-group.svelte            |   5 +-
 src/lib/bits/toggle-group/ctx.ts              |  26 +--
 src/lib/bits/toggle/components/toggle.svelte  |   5 +-
 src/lib/bits/toggle/ctx.ts                    |  21 ++-
 .../toolbar/components/toolbar-button.svelte  |   5 +-
 .../components/toolbar-group-item.svelte      |   5 +-
 .../toolbar/components/toolbar-group.svelte   |   5 +-
 .../toolbar/components/toolbar-link.svelte    |   5 +-
 .../bits/toolbar/components/toolbar.svelte    |   5 +-
 src/lib/bits/toolbar/ctx.ts                   |  34 ++--
 .../tooltip/components/tooltip-arrow.svelte   |   5 +-
 .../tooltip/components/tooltip-content.svelte |   5 +-
 .../tooltip/components/tooltip-trigger.svelte |   5 +-
 src/lib/bits/tooltip/ctx.ts                   |  49 +++---
 189 files changed, 1257 insertions(+), 822 deletions(-)
 create mode 100644 .changeset/olive-cats-compete.md

diff --git a/.changeset/olive-cats-compete.md b/.changeset/olive-cats-compete.md
new file mode 100644
index 000000000..24cf55fb2
--- /dev/null
+++ b/.changeset/olive-cats-compete.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: issues with tree shaking
diff --git a/src/lib/bits/accordion/components/accordion-content.svelte b/src/lib/bits/accordion/components/accordion-content.svelte
index 3cfce7777..540163ca8 100644
--- a/src/lib/bits/accordion/components/accordion-content.svelte
+++ b/src/lib/bits/accordion/components/accordion-content.svelte
@@ -2,7 +2,7 @@
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/index.js";
 	import type { ContentProps } from "../types.js";
-	import { getContent, getAttrs } from "../ctx.js";
+	import { getContent } from "../ctx.js";
 
 	type T = $$Generic<Transition>;
 	type In = $$Generic<Transition>;
@@ -20,7 +20,12 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { content, isSelected, props } = getContent();
+	const {
+		elements: { content },
+		helpers: { isSelected },
+		props,
+		getAttrs
+	} = getContent();
 
 	const attrs = getAttrs("content");
 
diff --git a/src/lib/bits/accordion/components/accordion-header.svelte b/src/lib/bits/accordion/components/accordion-header.svelte
index 9efe0f826..4babb5823 100644
--- a/src/lib/bits/accordion/components/accordion-header.svelte
+++ b/src/lib/bits/accordion/components/accordion-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { HeaderProps } from "../types.js";
 
 	type $$Props = HeaderProps;
@@ -10,7 +10,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { heading: header }
+		elements: { heading: header },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("header");
diff --git a/src/lib/bits/accordion/components/accordion-item.svelte b/src/lib/bits/accordion/components/accordion-item.svelte
index 180075a8d..bab133571 100644
--- a/src/lib/bits/accordion/components/accordion-item.svelte
+++ b/src/lib/bits/accordion/components/accordion-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setItem, getAttrs } from "../ctx.js";
+	import { setItem } from "../ctx.js";
 	import type { ItemProps } from "../types.js";
 	type $$Props = ItemProps;
 
@@ -9,7 +9,11 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { item, props } = setItem({ value, disabled });
+	const {
+		elements: { item },
+		props,
+		getAttrs
+	} = setItem({ value, disabled });
 	const attrs = getAttrs("item");
 
 	$: builder = $item(props);
diff --git a/src/lib/bits/accordion/components/accordion-trigger.svelte b/src/lib/bits/accordion/components/accordion-trigger.svelte
index 559ce5e3e..1f4568e4b 100644
--- a/src/lib/bits/accordion/components/accordion-trigger.svelte
+++ b/src/lib/bits/accordion/components/accordion-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getTrigger, getAttrs } from "../ctx.js";
+	import { getTrigger } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -10,7 +10,11 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { trigger, props } = getTrigger();
+	const {
+		elements: { trigger },
+		props,
+		getAttrs
+	} = getTrigger();
 	const dispatch = createDispatcher();
 	const attrs = getAttrs("trigger");
 
diff --git a/src/lib/bits/accordion/components/accordion.svelte b/src/lib/bits/accordion/components/accordion.svelte
index 62403f5d2..47a5723a6 100644
--- a/src/lib/bits/accordion/components/accordion.svelte
+++ b/src/lib/bits/accordion/components/accordion.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import type { Props } from "../types.js";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 
 	type Multiple = $$Generic<boolean>;
 	type $$Props = Props<Multiple>;
@@ -16,7 +16,8 @@
 	const {
 		elements: { root },
 		states: { value: localValue },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		multiple,
 		disabled,
diff --git a/src/lib/bits/accordion/ctx.ts b/src/lib/bits/accordion/ctx.ts
index ec419c7d7..094b21f89 100644
--- a/src/lib/bits/accordion/ctx.ts
+++ b/src/lib/bits/accordion/ctx.ts
@@ -1,60 +1,61 @@
-import {
-	createAccordion,
-	type Accordion as AccordionReturn,
-	type CreateAccordionProps
-} from "@melt-ui/svelte";
+import { createAccordion, type CreateAccordionProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import type { ItemProps } from "./types.js";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 
-const NAME = "accordion";
-const ITEM_NAME = "accordion-item";
-const PARTS = ["root", "content", "header", "item", "trigger"] as const;
+function getAccordionData() {
+	const NAME = "accordion" as const;
+	const ITEM_NAME = "accordion-item";
+	const PARTS = ["root", "content", "header", "item", "trigger"] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
-
-type GetReturn = AccordionReturn;
+	return { NAME, ITEM_NAME, PARTS };
+}
 
 export function setCtx<Multiple extends boolean>(props: CreateAccordionProps<Multiple>) {
-	const accordion = createAccordion(removeUndefined(props));
-	setContext(NAME, accordion);
-	return {
-		...accordion,
-		updateOption: getOptionUpdater(accordion.options)
+	const initAccordion = createAccordion(removeUndefined(props));
+	const { NAME, PARTS } = getAccordionData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const accordion = {
+		...initAccordion,
+		getAttrs,
+		updateOption: getOptionUpdater(initAccordion.options)
 	};
+
+	setContext(NAME, accordion);
+	return accordion;
 }
 
 export function getCtx() {
-	return getContext<GetReturn>(NAME);
+	const { NAME } = getAccordionData();
+	return getContext<ReturnType<typeof setCtx>>(NAME);
 }
 
 export function setItem(props: ItemProps) {
+	const { ITEM_NAME } = getAccordionData();
 	setContext(ITEM_NAME, { ...props });
-	const {
-		elements: { item }
-	} = getCtx();
-	return { item, props };
+	const ctx = getCtx();
+	return { ...ctx, props };
 }
 
 export function getItemProps() {
-	const itemProps = getContext<ItemProps>(ITEM_NAME);
-	return itemProps;
+	const { ITEM_NAME } = getAccordionData();
+	return getContext<ItemProps>(ITEM_NAME);
 }
 
 export function getContent() {
-	const {
-		elements: { content },
-		helpers: { isSelected },
-		states: { value }
-	} = getCtx();
+	const ctx = getCtx();
 	const { value: props } = getItemProps();
-	return { content, props, isSelected, value };
+	return {
+		...ctx,
+		props
+	};
 }
 
 export function getTrigger() {
-	const {
-		elements: { trigger }
-	} = getCtx();
+	const ctx = getCtx();
 	const { value, disabled } = getItemProps();
-	return { props: { value, disabled }, trigger };
+	return {
+		...ctx,
+		props: { value, disabled }
+	};
 }
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
index ff5389963..664c990af 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { createDispatcher } from "$lib/internal/events.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ActionEvents, ActionProps } from "../types.js";
 
 	type $$Props = ActionProps;
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { close }
+		elements: { close },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
index d1c528832..ea148e944 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CancelEvents, CancelProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { close }
+		elements: { close },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
index 891fff5dd..e4b7b948c 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/index.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -23,7 +23,8 @@
 	const {
 		elements: { content },
 		states: { open },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("content");
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
index 972e323c2..cd95d0364 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { DescriptionProps } from "../types.js";
 
 	type $$Props = DescriptionProps;
@@ -11,7 +11,8 @@
 
 	const {
 		elements: { description },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("description");
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
index f510d1ca1..1aa9dca2b 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/index.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { OverlayProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -21,7 +21,8 @@
 
 	const {
 		elements: { overlay },
-		states: { open }
+		states: { open },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("overlay");
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
index 27ea86f9a..f0ef8dda5 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { PortalProps } from "../types.js";
 
 	type $$Props = PortalProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { portalled }
+		elements: { portalled },
+		getAttrs
 	} = getCtx();
 	const attrs = getAttrs("portal");
 
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
index 4b889ce01..a4b5dd3e8 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TitleProps } from "../types.js";
 
 	type $$Props = TitleProps;
@@ -12,7 +12,8 @@
 
 	const {
 		elements: { title },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("title");
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
index 0301e2669..e5837cc63 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { trigger }
+		elements: { trigger },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/alert-dialog/ctx.ts b/src/lib/bits/alert-dialog/ctx.ts
index 1c2404f17..ddb72e96c 100644
--- a/src/lib/bits/alert-dialog/ctx.ts
+++ b/src/lib/bits/alert-dialog/ctx.ts
@@ -1,40 +1,47 @@
-import {
-	createDialog,
-	type Dialog as AlertDialogReturn,
-	type CreateDialogProps as CreateAlertDialogProps
-} from "@melt-ui/svelte";
+import { createDialog, type CreateDialogProps as CreateAlertDialogProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 
-const NAME = "alert-dialog";
-const PARTS = [
-	"action",
-	"cancel",
-	"content",
-	"description",
-	"overlay",
-	"portal",
-	"title",
-	"trigger"
-] as const;
-
 type SetProps = CreateAlertDialogProps;
-type GetReturn = AlertDialogReturn;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getAlertDialogData() {
+	const NAME = "alert-dialog" as const;
+	const PARTS = [
+		"action",
+		"cancel",
+		"content",
+		"description",
+		"overlay",
+		"portal",
+		"title",
+		"trigger"
+	] as const;
+
+	return { NAME, PARTS };
+}
 
 export function setCtx(props: SetProps) {
-	const alertDialog = createDialog({
+	const { NAME, PARTS } = getAlertDialogData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const initAlertDialog = createDialog({
 		...removeUndefined(props),
 		role: "alertdialog"
 	});
+	const alertDialog = {
+		...initAlertDialog,
+		getAttrs,
+		updateOption: getOptionUpdater(initAlertDialog.options)
+	};
+
 	setContext(NAME, alertDialog);
 	return {
 		...alertDialog,
-		updateOption: getOptionUpdater(alertDialog.options)
+		updateOption: getOptionUpdater(alertDialog.options),
+		getAttrs
 	};
 }
 
 export function getCtx() {
-	return getContext<GetReturn>(NAME);
+	const { NAME } = getAlertDialogData();
+	return getContext<ReturnType<typeof setCtx>>(NAME);
 }
diff --git a/src/lib/bits/avatar/components/avatar-fallback.svelte b/src/lib/bits/avatar/components/avatar-fallback.svelte
index 30a08675d..1da4a78a0 100644
--- a/src/lib/bits/avatar/components/avatar-fallback.svelte
+++ b/src/lib/bits/avatar/components/avatar-fallback.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { FallbackProps } from "../types.js";
 
 	type $$Props = FallbackProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { fallback }
+		elements: { fallback },
+		getAttrs
 	} = getCtx();
 	const attrs = getAttrs("fallback");
 
diff --git a/src/lib/bits/avatar/components/avatar-image.svelte b/src/lib/bits/avatar/components/avatar-image.svelte
index 27f0a9cf7..9b2f29ab9 100644
--- a/src/lib/bits/avatar/components/avatar-image.svelte
+++ b/src/lib/bits/avatar/components/avatar-image.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getImage, getAttrs } from "../ctx.js";
+	import { getImage } from "../ctx.js";
 	import type { ImageProps } from "../types.js";
 
 	type $$Props = ImageProps;
@@ -10,7 +10,9 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const attrs = getAttrs("image");
+	const attrs = {
+		"data-bits-avatar-image": ""
+	};
 
 	$: image = getImage(src).elements.image;
 
diff --git a/src/lib/bits/avatar/components/avatar.svelte b/src/lib/bits/avatar/components/avatar.svelte
index 8cce89e2a..f5584de13 100644
--- a/src/lib/bits/avatar/components/avatar.svelte
+++ b/src/lib/bits/avatar/components/avatar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
@@ -12,7 +12,8 @@
 
 	const {
 		states: { loadingStatus: localLoadingStatus },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		src: "",
 		delayMs,
diff --git a/src/lib/bits/avatar/ctx.ts b/src/lib/bits/avatar/ctx.ts
index 87423a7cc..7fa2f2d3c 100644
--- a/src/lib/bits/avatar/ctx.ts
+++ b/src/lib/bits/avatar/ctx.ts
@@ -2,13 +2,23 @@ import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal
 import { createAvatar, type CreateAvatarProps, type Avatar as AvatarReturn } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 
-const NAME = "avatar";
-const PARTS = ["root", "image", "fallback"] as const;
+export function getAvatarData() {
+	const NAME = "avatar" as const;
+	const PARTS = ["root", "image", "fallback"] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		PARTS
+	};
+}
+
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateAvatarProps) {
-	const avatar = createAvatar(removeUndefined(props));
+	const { NAME, PARTS } = getAvatarData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const avatar = { ...createAvatar(removeUndefined(props)), getAttrs };
+
 	setContext(NAME, avatar);
 	return {
 		...avatar,
@@ -17,6 +27,7 @@ export function setCtx(props: CreateAvatarProps) {
 }
 
 export function getImage(src: string | undefined | null = "") {
+	const { NAME } = getAvatarData();
 	const avatar = getContext<AvatarReturn>(NAME);
 	if (!src) {
 		avatar.options.src.set("");
@@ -27,5 +38,6 @@ export function getImage(src: string | undefined | null = "") {
 }
 
 export function getCtx() {
-	return getContext<AvatarReturn>(NAME);
+	const { NAME } = getAvatarData();
+	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/calendar/components/calendar-cell.svelte b/src/lib/bits/calendar/components/calendar-cell.svelte
index bddaf2ae0..07d8a59bf 100644
--- a/src/lib/bits/calendar/components/calendar-cell.svelte
+++ b/src/lib/bits/calendar/components/calendar-cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CellProps } from "../types.js";
 
 	type $$Props = CellProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		helpers: { isDateDisabled, isDateUnavailable }
+		helpers: { isDateDisabled, isDateUnavailable },
+		getAttrs
 	} = getCtx();
 
 	$: attrs = {
diff --git a/src/lib/bits/calendar/components/calendar-day.svelte b/src/lib/bits/calendar/components/calendar-day.svelte
index c10ec830a..3fe8d479e 100644
--- a/src/lib/bits/calendar/components/calendar-day.svelte
+++ b/src/lib/bits/calendar/components/calendar-day.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { DayEvents, DayProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -14,7 +14,8 @@
 
 	const {
 		elements: { cell },
-		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
+		helpers: { isDateDisabled, isDateUnavailable, isDateSelected },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("day");
diff --git a/src/lib/bits/calendar/components/calendar-grid-body.svelte b/src/lib/bits/calendar/components/calendar-grid-body.svelte
index bba958217..316b2216d 100644
--- a/src/lib/bits/calendar/components/calendar-grid-body.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid-body.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { GridBodyProps } from "../types.js";
 
 	type $$Props = GridBodyProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
+	const { getAttrs } = getCtx();
 
 	const attrs = getAttrs("grid-body");
 </script>
diff --git a/src/lib/bits/calendar/components/calendar-grid-head.svelte b/src/lib/bits/calendar/components/calendar-grid-head.svelte
index 94b21cd63..641142d25 100644
--- a/src/lib/bits/calendar/components/calendar-grid-head.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid-head.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { GridHeadProps } from "../types.js";
 
 	type $$Props = GridHeadProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const attrs = { ...getAttrs("grid-head"), "aria-hidden": true };
+	const { getAttrs } = getCtx();
+
+	const attrs = {
+		...getAttrs("grid-head"),
+		"aria-hidden": true
+	};
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/calendar/components/calendar-grid-row.svelte b/src/lib/bits/calendar/components/calendar-grid-row.svelte
index 2df2ef4ff..811ebd41a 100644
--- a/src/lib/bits/calendar/components/calendar-grid-row.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid-row.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { GridRowProps } from "../types.js";
 
 	type $$Props = GridRowProps;
@@ -7,6 +7,8 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
+	const { getAttrs } = getCtx();
+
 	const attrs = getAttrs("grid-row");
 </script>
 
diff --git a/src/lib/bits/calendar/components/calendar-grid.svelte b/src/lib/bits/calendar/components/calendar-grid.svelte
index b88ccff26..faa3a1bce 100644
--- a/src/lib/bits/calendar/components/calendar-grid.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { GridProps } from "../types.js";
 
 	type $$Props = GridProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { grid }
+		elements: { grid },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("grid");
diff --git a/src/lib/bits/calendar/components/calendar-head-cell.svelte b/src/lib/bits/calendar/components/calendar-head-cell.svelte
index aba77b8fe..2ee7e8978 100644
--- a/src/lib/bits/calendar/components/calendar-head-cell.svelte
+++ b/src/lib/bits/calendar/components/calendar-head-cell.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { HeadCellProps } from "../types.js";
 
 	type $$Props = HeadCellProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
+	const { getAttrs } = getCtx();
 
 	const attrs = getAttrs("head-cell");
 </script>
diff --git a/src/lib/bits/calendar/components/calendar-header.svelte b/src/lib/bits/calendar/components/calendar-header.svelte
index b2462b943..92ad4808b 100644
--- a/src/lib/bits/calendar/components/calendar-header.svelte
+++ b/src/lib/bits/calendar/components/calendar-header.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { HeaderProps } from "../types.js";
 
 	type $$Props = HeaderProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
+	const { getAttrs } = getCtx();
+
 	const attrs = getAttrs("header");
 </script>
 
diff --git a/src/lib/bits/calendar/components/calendar-heading.svelte b/src/lib/bits/calendar/components/calendar-heading.svelte
index 6c4d69249..27d3a77a8 100644
--- a/src/lib/bits/calendar/components/calendar-heading.svelte
+++ b/src/lib/bits/calendar/components/calendar-heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { HeadingProps } from "../types.js";
 
 	type $$Props = HeadingProps;
@@ -10,7 +10,8 @@
 
 	const {
 		elements: { heading },
-		states: { headingValue }
+		states: { headingValue },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("heading");
diff --git a/src/lib/bits/calendar/components/calendar-next-button.svelte b/src/lib/bits/calendar/components/calendar-next-button.svelte
index e83418604..f8bd47d07 100644
--- a/src/lib/bits/calendar/components/calendar-next-button.svelte
+++ b/src/lib/bits/calendar/components/calendar-next-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { NextButtonEvents, NextButtonProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { nextButton }
+		elements: { nextButton },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("next-button");
diff --git a/src/lib/bits/calendar/components/calendar-prev-button.svelte b/src/lib/bits/calendar/components/calendar-prev-button.svelte
index 186e8952e..a7947989e 100644
--- a/src/lib/bits/calendar/components/calendar-prev-button.svelte
+++ b/src/lib/bits/calendar/components/calendar-prev-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { PrevButtonEvents, PrevButtonProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { prevButton }
+		elements: { prevButton },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("prev-button");
diff --git a/src/lib/bits/calendar/components/calendar.svelte b/src/lib/bits/calendar/components/calendar.svelte
index ae0f804a8..0c0389fda 100644
--- a/src/lib/bits/calendar/components/calendar.svelte
+++ b/src/lib/bits/calendar/components/calendar.svelte
@@ -5,7 +5,7 @@
 	import { createDispatcher } from "$lib/internal/events.js";
 	import { melt, type Month } from "@melt-ui/svelte";
 	import { onMount } from "svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type Multiple = $$Generic<boolean>;
@@ -49,7 +49,8 @@
 			weekdays
 		},
 		updateOption,
-		ids
+		ids,
+		getAttrs
 	} = setCtx({
 		defaultPlaceholder: placeholder,
 		defaultValue: value,
diff --git a/src/lib/bits/calendar/ctx.ts b/src/lib/bits/calendar/ctx.ts
index 291beb0ff..967d291e9 100644
--- a/src/lib/bits/calendar/ctx.ts
+++ b/src/lib/bits/calendar/ctx.ts
@@ -1,34 +1,37 @@
-import {
-	createCalendar,
-	type Calendar as CalendarReturn,
-	type CreateCalendarProps
-} from "@melt-ui/svelte";
+import { createCalendar, type CreateCalendarProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
 
-const NAME = "calendar";
-const PARTS = [
-	"root",
-	"prev-button",
-	"next-button",
-	"heading",
-	"grid",
-	"day",
-	"header",
-	"grid-head",
-	"head-cell",
-	"grid-body",
-	"cell",
-	"grid-row"
-] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
-
-type GetReturn = CalendarReturn;
+export function getCalendarData() {
+	const NAME = "calendar" as const;
+	const PARTS = [
+		"root",
+		"prev-button",
+		"next-button",
+		"heading",
+		"grid",
+		"day",
+		"header",
+		"grid-head",
+		"head-cell",
+		"grid-body",
+		"cell",
+		"grid-row"
+	] as const;
+
+	return { NAME, PARTS };
+}
+
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Multiple>) {
-	const calendar = createCalendar(removeUndefined(props));
+	const { NAME, PARTS } = getCalendarData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+
+	const calendar = { ...createCalendar(removeUndefined(props)), getAttrs };
+
 	setContext(NAME, calendar);
+
 	return {
 		...calendar,
 		updateOption: getOptionUpdater(calendar.options)
@@ -36,5 +39,6 @@ export function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Mult
 }
 
 export function getCtx() {
+	const { NAME } = getCalendarData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/checkbox/components/checkbox-indicator.svelte b/src/lib/bits/checkbox/components/checkbox-indicator.svelte
index e7733da56..99440121e 100644
--- a/src/lib/bits/checkbox/components/checkbox-indicator.svelte
+++ b/src/lib/bits/checkbox/components/checkbox-indicator.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { IndicatorProps } from "../types.js";
 
 	type $$Props = IndicatorProps;
@@ -9,7 +9,8 @@
 
 	const {
 		helpers: { isChecked, isIndeterminate },
-		states: { checked }
+		states: { checked },
+		getAttrs
 	} = getCtx();
 
 	function getStateAttr(state: boolean | "indeterminate") {
diff --git a/src/lib/bits/checkbox/components/checkbox.svelte b/src/lib/bits/checkbox/components/checkbox.svelte
index 8d1afc5fe..ea658c1f4 100644
--- a/src/lib/bits/checkbox/components/checkbox.svelte
+++ b/src/lib/bits/checkbox/components/checkbox.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props, Events } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -18,7 +18,8 @@
 	const {
 		elements: { root },
 		states: { checked: localChecked },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		defaultChecked: checked,
 		disabled,
diff --git a/src/lib/bits/checkbox/ctx.ts b/src/lib/bits/checkbox/ctx.ts
index d1eab1587..45d57977f 100644
--- a/src/lib/bits/checkbox/ctx.ts
+++ b/src/lib/bits/checkbox/ctx.ts
@@ -1,21 +1,24 @@
-import {
-	createCheckbox,
-	type Checkbox as CheckboxReturn,
-	type CreateCheckboxProps
-} from "@melt-ui/svelte";
+import { createCheckbox, type CreateCheckboxProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
 
-const NAME = "checkbox";
-const PARTS = ["root", "input", "indicator"] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
+export function getCheckboxData() {
+	const NAME = "checkbox" as const;
+	const PARTS = ["root", "input", "indicator"] as const;
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = CheckboxReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateCheckboxProps) {
-	const checkbox = createCheckbox(removeUndefined(props));
-	setContext(NAME, { ...checkbox });
+	const { NAME, PARTS } = getCheckboxData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+
+	const checkbox = { ...createCheckbox(removeUndefined(props)), getAttrs };
+	setContext(NAME, checkbox);
 
 	return {
 		...checkbox,
@@ -24,5 +27,6 @@ export function setCtx(props: CreateCheckboxProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getCheckboxData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/collapsible/components/collapsible-content.svelte b/src/lib/bits/collapsible/components/collapsible-content.svelte
index 4653fac4d..9ef9d21b3 100644
--- a/src/lib/bits/collapsible/components/collapsible-content.svelte
+++ b/src/lib/bits/collapsible/components/collapsible-content.svelte
@@ -2,7 +2,7 @@
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/types.js";
 	import type { ContentProps } from "../types.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 
 	type T = $$Generic<Transition>;
 	type In = $$Generic<Transition>;
@@ -20,7 +20,8 @@
 
 	const {
 		elements: { content },
-		states: { open }
+		states: { open },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("content");
diff --git a/src/lib/bits/collapsible/components/collapsible-trigger.svelte b/src/lib/bits/collapsible/components/collapsible-trigger.svelte
index 33378e774..a59186546 100644
--- a/src/lib/bits/collapsible/components/collapsible-trigger.svelte
+++ b/src/lib/bits/collapsible/components/collapsible-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { createDispatcher } from "$lib/internal/events.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 
 	type $$Props = TriggerProps;
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { trigger }
+		elements: { trigger },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/collapsible/components/collapsible.svelte b/src/lib/bits/collapsible/components/collapsible.svelte
index de668a757..edbe96caa 100644
--- a/src/lib/bits/collapsible/components/collapsible.svelte
+++ b/src/lib/bits/collapsible/components/collapsible.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
@@ -13,7 +13,8 @@
 	const {
 		elements: { root },
 		states: { open: localOpen },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		disabled,
 		forceVisible: true,
diff --git a/src/lib/bits/collapsible/ctx.ts b/src/lib/bits/collapsible/ctx.ts
index b71823f6e..03edb1c37 100644
--- a/src/lib/bits/collapsible/ctx.ts
+++ b/src/lib/bits/collapsible/ctx.ts
@@ -1,20 +1,24 @@
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-import {
-	createCollapsible,
-	type Collapsible as CollapsibleReturn,
-	type CreateCollapsibleProps
-} from "@melt-ui/svelte";
+import { createCollapsible, type CreateCollapsibleProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 
-const NAME = "collapsible";
-const PARTS = ["root", "content", "trigger"] as const;
+export function getCollapsibleData() {
+	const NAME = "collapsible" as const;
+	const PARTS = ["root", "content", "trigger"] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = CollapsibleReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateCollapsibleProps) {
-	const collapsible = createCollapsible(removeUndefined(props));
+	const { NAME, PARTS } = getCollapsibleData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+
+	const collapsible = { ...createCollapsible(removeUndefined(props)), getAttrs };
 	setContext(NAME, collapsible);
 	return {
 		...collapsible,
@@ -23,5 +27,6 @@ export function setCtx(props: CreateCollapsibleProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getCollapsibleData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/context-menu/components/context-menu-content.svelte b/src/lib/bits/context-menu/components/context-menu-content.svelte
index 84a32b9bf..185d7dcdd 100644
--- a/src/lib/bits/context-menu/components/context-menu-content.svelte
+++ b/src/lib/bits/context-menu/components/context-menu-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createDispatcher } from "$lib/internal/events.js";
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx, updatePositioning } from "../ctx.js";
+	import { getCtx, updatePositioning } from "../ctx.js";
 	import type { Transition } from "$lib/internal/types.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
@@ -29,7 +29,8 @@
 	const {
 		elements: { menu },
 		states: { open },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/context-menu/components/context-menu-trigger.svelte b/src/lib/bits/context-menu/components/context-menu-trigger.svelte
index 12171a286..73c5e0e30 100644
--- a/src/lib/bits/context-menu/components/context-menu-trigger.svelte
+++ b/src/lib/bits/context-menu/components/context-menu-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -13,7 +13,8 @@
 
 	const {
 		elements: { trigger },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/context-menu/ctx.ts b/src/lib/bits/context-menu/ctx.ts
index 625673600..a268fc7f8 100644
--- a/src/lib/bits/context-menu/ctx.ts
+++ b/src/lib/bits/context-menu/ctx.ts
@@ -1,39 +1,43 @@
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-import {
-	type ContextMenu as ContextMenuReturn,
-	createContextMenu,
-	type CreateContextMenuProps
-} from "@melt-ui/svelte";
+import { createContextMenu, type CreateContextMenuProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import type { Writable } from "svelte/store";
 import { getPositioningUpdater } from "$lib/bits/floating/helpers.js";
 import type { FloatingConfig } from "$lib/bits/floating/floating-config.js";
 import type { FloatingProps } from "$lib/bits/floating/_types.js";
 
-const NAME = "menu";
+export function getContextMenuData() {
+	const NAME = "menu";
 
-const PARTS = [
-	"arrow",
-	"checkbox-indicator",
-	"checkbox-item",
-	"content",
-	"group",
-	"item",
-	"label",
-	"radio-group",
-	"radio-item",
-	"separator",
-	"sub-content",
-	"sub-trigger",
-	"trigger"
-] as const;
+	const PARTS = [
+		"arrow",
+		"checkbox-indicator",
+		"checkbox-item",
+		"content",
+		"group",
+		"item",
+		"label",
+		"radio-group",
+		"radio-item",
+		"separator",
+		"sub-content",
+		"sub-trigger",
+		"trigger"
+	] as const;
 
-export const getAttrs = createBitAttrs("menu", PARTS);
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = ContextMenuReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateContextMenuProps) {
-	const contextMenu = createContextMenu(removeUndefined(props));
+	const { NAME, PARTS } = getContextMenuData();
+	const getAttrs = createBitAttrs("menu", PARTS);
+
+	const contextMenu = { ...createContextMenu(removeUndefined(props)), getAttrs };
 	setContext(NAME, contextMenu);
 	return {
 		...contextMenu,
@@ -42,15 +46,16 @@ export function setCtx(props: CreateContextMenuProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getContextMenuData();
 	return getContext<GetReturn>(NAME);
 }
 
-const defaultPlacement = {
-	side: "bottom",
-	align: "start"
-} satisfies FloatingProps;
-
 export function updatePositioning(props: FloatingProps) {
+	const defaultPlacement = {
+		side: "bottom",
+		align: "start"
+	} satisfies FloatingProps;
+
 	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
diff --git a/src/lib/bits/date-field/components/date-field-input.svelte b/src/lib/bits/date-field/components/date-field-input.svelte
index 955dcb7de..f272fc9cd 100644
--- a/src/lib/bits/date-field/components/date-field-input.svelte
+++ b/src/lib/bits/date-field/components/date-field-input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { InputProps } from "../types.js";
 
 	type $$Props = InputProps;
@@ -12,7 +12,8 @@
 	const {
 		elements: { field },
 		states: { segmentContents },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	$: if (id) {
diff --git a/src/lib/bits/date-field/components/date-field-label.svelte b/src/lib/bits/date-field/components/date-field-label.svelte
index 82e4e2361..3a8444525 100644
--- a/src/lib/bits/date-field/components/date-field-label.svelte
+++ b/src/lib/bits/date-field/components/date-field-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { LabelProps } from "../types.js";
 
 	type $$Props = LabelProps;
@@ -11,7 +11,8 @@
 
 	const {
 		elements: { label },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	if (id) {
diff --git a/src/lib/bits/date-field/components/date-field-segment.svelte b/src/lib/bits/date-field/components/date-field-segment.svelte
index 212e38de7..c95c1b6b6 100644
--- a/src/lib/bits/date-field/components/date-field-segment.svelte
+++ b/src/lib/bits/date-field/components/date-field-segment.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { SegmentEvents, SegmentProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -14,7 +14,8 @@
 
 	const {
 		elements: { segment },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	$: if (id && part !== "literal") {
diff --git a/src/lib/bits/date-field/ctx.ts b/src/lib/bits/date-field/ctx.ts
index fee76f929..6d7220dca 100644
--- a/src/lib/bits/date-field/ctx.ts
+++ b/src/lib/bits/date-field/ctx.ts
@@ -1,20 +1,24 @@
-import {
-	createDateField,
-	type DateField as DateFieldReturn,
-	type CreateDateFieldProps
-} from "@melt-ui/svelte";
+import { createDateField, type CreateDateFieldProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
 
-const NAME = "date-field";
-const PARTS = ["label", "input", "segment"] as const;
+export function getDateFieldData() {
+	const NAME = "date-field" as const;
+	const PARTS = ["label", "input", "segment"] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = DateFieldReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateDateFieldProps) {
-	const dateField = createDateField(removeUndefined(props));
+	const { NAME, PARTS } = getDateFieldData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+
+	const dateField = { ...createDateField(removeUndefined(props)), getAttrs };
 	setContext(NAME, dateField);
 
 	return {
@@ -24,5 +28,6 @@ export function setCtx(props: CreateDateFieldProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getDateFieldData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/date-picker/components/date-picker-arrow.svelte b/src/lib/bits/date-picker/components/date-picker-arrow.svelte
index 5b1e5ec65..8e8188e28 100644
--- a/src/lib/bits/date-picker/components/date-picker-arrow.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-arrow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getPopoverAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import { melt } from "@melt-ui/svelte";
 	import type { ArrowProps } from "../types.js";
 
@@ -11,7 +11,8 @@
 
 	const {
 		elements: { arrow },
-		updateOption
+		updateOption,
+		getPopoverAttrs
 	} = getCtx();
 
 	const attrs = getPopoverAttrs("arrow");
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar.svelte b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
index dbccc5b83..e61643913 100644
--- a/src/lib/bits/date-picker/components/date-picker-calendar.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt, type Month } from "@melt-ui/svelte";
-	import { getCtx, getCalendarAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CalendarEvents, CalendarProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 	import type { DateValue } from "@internationalized/date";
@@ -15,7 +15,8 @@
 	const {
 		elements: { calendar },
 		states: { months: localMonths, weekdays },
-		ids
+		ids,
+		getCalendarAttrs
 	} = getCtx();
 
 	$: if (id) {
diff --git a/src/lib/bits/date-picker/components/date-picker-cell.svelte b/src/lib/bits/date-picker/components/date-picker-cell.svelte
index 4e6a5fb41..1e9a4064b 100644
--- a/src/lib/bits/date-picker/components/date-picker-cell.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCtx, getCalendarAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CellProps } from "../types.js";
 
 	type $$Props = CellProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		helpers: { isDateDisabled, isDateUnavailable }
+		helpers: { isDateDisabled, isDateUnavailable },
+		getCalendarAttrs
 	} = getCtx();
 
 	$: attrs = {
diff --git a/src/lib/bits/date-picker/components/date-picker-close.svelte b/src/lib/bits/date-picker/components/date-picker-close.svelte
index 1cf18b845..d32f376df 100644
--- a/src/lib/bits/date-picker/components/date-picker-close.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-close.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getPopoverAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CloseProps, CloseEvents } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { close }
+		elements: { close },
+		getPopoverAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/date-picker/components/date-picker-content.svelte b/src/lib/bits/date-picker/components/date-picker-content.svelte
index 28d3df4d8..1ffe89705 100644
--- a/src/lib/bits/date-picker/components/date-picker-content.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/index.js";
-	import { getCtx, getPopoverAttrs, updatePositioning } from "../ctx.js";
+	import { getCtx, updatePositioning } from "../ctx.js";
 	import type { ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -34,7 +34,8 @@
 	const {
 		elements: { content },
 		states: { open },
-		ids
+		ids,
+		getPopoverAttrs
 	} = getCtx();
 
 	const attrs = getPopoverAttrs("content");
diff --git a/src/lib/bits/date-picker/components/date-picker-day.svelte b/src/lib/bits/date-picker/components/date-picker-day.svelte
index 72c3e1cd8..63b031e9c 100644
--- a/src/lib/bits/date-picker/components/date-picker-day.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-day.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getCalendarAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { DayEvents, DayProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -14,7 +14,8 @@
 
 	const {
 		elements: { cell },
-		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
+		helpers: { isDateDisabled, isDateUnavailable, isDateSelected },
+		getCalendarAttrs
 	} = getCtx();
 
 	const attrs = getCalendarAttrs("day");
diff --git a/src/lib/bits/date-picker/components/date-picker-grid.svelte b/src/lib/bits/date-picker/components/date-picker-grid.svelte
index 2785ed897..49512ead4 100644
--- a/src/lib/bits/date-picker/components/date-picker-grid.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-grid.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { GridProps } from "../types.js";
 
 	type $$Props = GridProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { grid }
+		elements: { grid },
+		getCalendarAttrs
 	} = getCtx();
 
 	const attrs = getCalendarAttrs("grid");
diff --git a/src/lib/bits/date-picker/components/date-picker-heading.svelte b/src/lib/bits/date-picker/components/date-picker-heading.svelte
index 2750f93c4..8cd99e460 100644
--- a/src/lib/bits/date-picker/components/date-picker-heading.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { HeadingProps } from "../types.js";
 
 	type $$Props = HeadingProps;
@@ -10,7 +10,8 @@
 
 	const {
 		elements: { heading },
-		states: { headingValue }
+		states: { headingValue },
+		getCalendarAttrs
 	} = getCtx();
 
 	const attrs = getCalendarAttrs("heading");
diff --git a/src/lib/bits/date-picker/components/date-picker-input.svelte b/src/lib/bits/date-picker/components/date-picker-input.svelte
index b53005452..8b7a30a50 100644
--- a/src/lib/bits/date-picker/components/date-picker-input.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getFieldAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { InputProps } from "../types.js";
 
 	type $$Props = InputProps;
@@ -12,7 +12,8 @@
 	const {
 		elements: { field },
 		states: { segmentContents },
-		ids
+		ids,
+		getFieldAttrs
 	} = getCtx();
 
 	$: if (id) {
diff --git a/src/lib/bits/date-picker/components/date-picker-label.svelte b/src/lib/bits/date-picker/components/date-picker-label.svelte
index 5da074010..dd6eb7dce 100644
--- a/src/lib/bits/date-picker/components/date-picker-label.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getFieldAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { LabelProps } from "../types.js";
 
 	type $$Props = LabelProps;
@@ -11,7 +11,8 @@
 
 	const {
 		elements: { label },
-		ids
+		ids,
+		getFieldAttrs
 	} = getCtx();
 
 	if (id) {
diff --git a/src/lib/bits/date-picker/components/date-picker-next-button.svelte b/src/lib/bits/date-picker/components/date-picker-next-button.svelte
index 59fe8142e..f1daf051c 100644
--- a/src/lib/bits/date-picker/components/date-picker-next-button.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-next-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { NextButtonEvents, NextButtonProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { nextButton }
+		elements: { nextButton },
+		getCalendarAttrs
 	} = getCtx();
 
 	const attrs = getCalendarAttrs("next-button");
diff --git a/src/lib/bits/date-picker/components/date-picker-prev-button.svelte b/src/lib/bits/date-picker/components/date-picker-prev-button.svelte
index 8d9955e06..4209de0f0 100644
--- a/src/lib/bits/date-picker/components/date-picker-prev-button.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-prev-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { PrevButtonEvents, PrevButtonProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { prevButton }
+		elements: { prevButton },
+		getCalendarAttrs
 	} = getCtx();
 
 	const attrs = getCalendarAttrs("prev-button");
diff --git a/src/lib/bits/date-picker/components/date-picker-segment.svelte b/src/lib/bits/date-picker/components/date-picker-segment.svelte
index f758d92a5..e654d8ec3 100644
--- a/src/lib/bits/date-picker/components/date-picker-segment.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-segment.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getFieldAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { SegmentEvents, SegmentProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -14,7 +14,8 @@
 
 	const {
 		elements: { segment },
-		ids
+		ids,
+		getFieldAttrs
 	} = getCtx();
 
 	$: if (id && part !== "literal") {
diff --git a/src/lib/bits/date-picker/components/date-picker-trigger.svelte b/src/lib/bits/date-picker/components/date-picker-trigger.svelte
index f160787e0..069c9bce0 100644
--- a/src/lib/bits/date-picker/components/date-picker-trigger.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getPopoverAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -13,7 +13,8 @@
 
 	const {
 		elements: { trigger },
-		ids
+		ids,
+		getPopoverAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/date-picker/ctx.ts b/src/lib/bits/date-picker/ctx.ts
index 15ba5b20e..09f92af29 100644
--- a/src/lib/bits/date-picker/ctx.ts
+++ b/src/lib/bits/date-picker/ctx.ts
@@ -1,39 +1,55 @@
 import { createDatePicker, type CreateDatePickerProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import { removeUndefined, getOptionUpdater } from "$lib/internal/index.js";
-import { getAttrs as getCalendarAttrs } from "$lib/bits/calendar/ctx.js";
-import { getAttrs as getFieldAttrs } from "$lib/bits/date-field/ctx.js";
-import { getAttrs as getPopoverAttrs } from "$lib/bits/popover/ctx.js";
+import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
+import { getCalendarData } from "$lib/bits/calendar/ctx.js";
+import { getDateFieldData } from "$lib/bits/date-field/ctx.js";
+import { getPopoverData } from "$lib/bits/popover/ctx.js";
 import { getPositioningUpdater } from "$lib/bits/floating/helpers.js";
 import type { Writable } from "svelte/store";
 import type { FloatingConfig } from "$lib/bits/floating/floating-config.js";
 import type { FloatingProps } from "$lib/bits/floating/_types.js";
 
-const NAME = "date-picker";
-
-export { getCalendarAttrs, getFieldAttrs, getPopoverAttrs };
+function getDatePickerData() {
+	const NAME = "date-picker" as const;
+	return {
+		NAME
+	};
+}
 
 export function setCtx(props: CreateDatePickerProps) {
-	const datePicker = createDatePicker(removeUndefined(props));
+	const { NAME } = getDatePickerData();
+	const { NAME: CALENDAR_NAME, PARTS: CALENDAR_PARTS } = getCalendarData();
+	const getCalendarAttrs = createBitAttrs(CALENDAR_NAME, CALENDAR_PARTS);
+	const { NAME: FIELD_NAME, PARTS: FIELD_PARTS } = getDateFieldData();
+	const getFieldAttrs = createBitAttrs(FIELD_NAME, FIELD_PARTS);
+	const { NAME: POPOVER_NAME, PARTS: POPOVER_PARTS } = getPopoverData();
+	const getPopoverAttrs = createBitAttrs(POPOVER_NAME, POPOVER_PARTS);
+
+	const datePicker = {
+		...createDatePicker(removeUndefined(props)),
+		getCalendarAttrs,
+		getFieldAttrs,
+		getPopoverAttrs
+	};
 	const updateOption = getOptionUpdater(datePicker.options);
 	setContext(NAME, { ...datePicker, updateOption });
 
 	return {
 		...datePicker,
-		updateOption: getOptionUpdater(datePicker.options)
+		updateOption
 	};
 }
 
 export function getCtx() {
+	const { NAME } = getDatePickerData();
 	return getContext<ReturnType<typeof setCtx>>(NAME);
 }
 
-const defaultPlacement = {
-	side: "bottom",
-	align: "center"
-} satisfies FloatingProps;
-
 export function updatePositioning(props: FloatingProps) {
+	const defaultPlacement = {
+		side: "bottom",
+		align: "center"
+	} satisfies FloatingProps;
 	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
diff --git a/src/lib/bits/date-range-field/components/date-range-field-input.svelte b/src/lib/bits/date-range-field/components/date-range-field-input.svelte
index 863a45b2e..d06dc4089 100644
--- a/src/lib/bits/date-range-field/components/date-range-field-input.svelte
+++ b/src/lib/bits/date-range-field/components/date-range-field-input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { InputProps } from "../types.js";
 
 	type $$Props = InputProps;
@@ -12,7 +12,8 @@
 	const {
 		elements: { field },
 		states: { segmentContents },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	$: if (id) {
diff --git a/src/lib/bits/date-range-field/components/date-range-field-label.svelte b/src/lib/bits/date-range-field/components/date-range-field-label.svelte
index 6a5b44fff..7d4ea5724 100644
--- a/src/lib/bits/date-range-field/components/date-range-field-label.svelte
+++ b/src/lib/bits/date-range-field/components/date-range-field-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { LabelProps } from "../types.js";
 
 	type $$Props = LabelProps;
@@ -11,7 +11,8 @@
 
 	const {
 		elements: { label },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	if (id) {
diff --git a/src/lib/bits/date-range-field/components/date-range-field-segment.svelte b/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
index b9a5ab26c..92c662220 100644
--- a/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
+++ b/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { SegmentProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -14,7 +14,8 @@
 
 	const {
 		elements: { startSegment, endSegment },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	$: if (id && part !== "literal") {
diff --git a/src/lib/bits/date-range-field/ctx.ts b/src/lib/bits/date-range-field/ctx.ts
index d722b426e..b5cf6fbf8 100644
--- a/src/lib/bits/date-range-field/ctx.ts
+++ b/src/lib/bits/date-range-field/ctx.ts
@@ -1,28 +1,24 @@
-import {
-	type DateRangeField as DateRangeFieldReturn,
-	type CreateDateRangeFieldProps,
-	createDateRangeField
-} from "@melt-ui/svelte";
+import { type CreateDateRangeFieldProps, createDateRangeField } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
+import { getDateFieldData } from "../date-field/ctx";
 
-const NAME = "date-field";
-const PARTS = ["label", "field", "input", "segment"] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
-
-type GetReturn = DateRangeFieldReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateDateRangeFieldProps) {
-	const dateField = createDateRangeField(removeUndefined(props));
-	setContext(NAME, dateField);
+	const { NAME, PARTS } = getDateFieldData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const dateRangeField = { ...createDateRangeField(removeUndefined(props)), getAttrs };
+
+	setContext(NAME, dateRangeField);
 
 	return {
-		...dateField,
-		updateOption: getOptionUpdater(dateField.options)
+		...dateRangeField,
+		updateOption: getOptionUpdater(dateRangeField.options)
 	};
 }
 
 export function getCtx() {
+	const { NAME } = getDateFieldData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte
index 5b1e5ec65..8e8188e28 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getPopoverAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import { melt } from "@melt-ui/svelte";
 	import type { ArrowProps } from "../types.js";
 
@@ -11,7 +11,8 @@
 
 	const {
 		elements: { arrow },
-		updateOption
+		updateOption,
+		getPopoverAttrs
 	} = getCtx();
 
 	const attrs = getPopoverAttrs("arrow");
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte
index f96ce1159..dc656eb58 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt, type Month } from "@melt-ui/svelte";
-	import { getCtx, getCalendarAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CalendarProps } from "../types.js";
 	import type { DateValue } from "@internationalized/date";
 
@@ -13,7 +13,8 @@
 	const {
 		elements: { calendar },
 		states: { months: localMonths, weekdays },
-		ids
+		ids,
+		getCalendarAttrs
 	} = getCtx();
 
 	$: if (id) {
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-cell.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-cell.svelte
index 4e6a5fb41..1e9a4064b 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-cell.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCtx, getCalendarAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CellProps } from "../types.js";
 
 	type $$Props = CellProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		helpers: { isDateDisabled, isDateUnavailable }
+		helpers: { isDateDisabled, isDateUnavailable },
+		getCalendarAttrs
 	} = getCtx();
 
 	$: attrs = {
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte
index 1cf18b845..d32f376df 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getPopoverAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CloseProps, CloseEvents } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { close }
+		elements: { close },
+		getPopoverAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
index 19963beee..847d01fa0 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/index.js";
-	import { getCtx, getPopoverAttrs, updatePositioning } from "../ctx.js";
+	import { getCtx, updatePositioning } from "../ctx.js";
 	import type { ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -34,7 +34,8 @@
 	const {
 		elements: { content },
 		states: { open },
-		ids
+		ids,
+		getPopoverAttrs
 	} = getCtx();
 
 	const attrs = getPopoverAttrs("content");
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-day.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-day.svelte
index 267485d92..58ff695de 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-day.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-day.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getCalendarAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { DayProps } from "../types.js";
 
 	type $$Props = DayProps;
@@ -12,7 +12,8 @@
 
 	const {
 		elements: { cell },
-		helpers: { isDateDisabled, isDateUnavailable }
+		helpers: { isDateDisabled, isDateUnavailable },
+		getCalendarAttrs
 	} = getCtx();
 
 	const attrs = getCalendarAttrs("day");
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte
index 2785ed897..49512ead4 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { GridProps } from "../types.js";
 
 	type $$Props = GridProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { grid }
+		elements: { grid },
+		getCalendarAttrs
 	} = getCtx();
 
 	const attrs = getCalendarAttrs("grid");
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte
index 43aaa4751..59a14f94e 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { HeadingProps } from "../types.js";
 
 	type $$Props = HeadingProps;
@@ -10,7 +10,8 @@
 
 	const {
 		elements: { heading },
-		states: { headingValue }
+		states: { headingValue },
+		getCalendarAttrs
 	} = getCtx();
 
 	const attrs = getCalendarAttrs("heading");
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte
index f932394d2..8ea653e03 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getFieldAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { InputProps } from "../types.js";
 
 	type $$Props = InputProps;
@@ -12,7 +12,8 @@
 	const {
 		elements: { field },
 		states: { segmentContents },
-		ids
+		ids,
+		getFieldAttrs
 	} = getCtx();
 
 	$: if (id) {
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte
index b8fa418f9..9c84a5fa0 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getFieldAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { LabelProps } from "../types.js";
 
 	type $$Props = LabelProps;
@@ -11,7 +11,8 @@
 
 	const {
 		elements: { label },
-		ids
+		ids,
+		getFieldAttrs
 	} = getCtx();
 
 	if (id) {
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte
index a2e8eed89..91c8720bd 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { NextButtonProps } from "../types.js";
 
 	type $$Props = NextButtonProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { nextButton }
+		elements: { nextButton },
+		getCalendarAttrs
 	} = getCtx();
 
 	const attrs = getCalendarAttrs("next-button");
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte
index eed8d33c2..bb6fddcf5 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { PrevButtonProps } from "../types.js";
 
 	type $$Props = PrevButtonProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { prevButton }
+		elements: { prevButton },
+		getCalendarAttrs
 	} = getCtx();
 
 	const attrs = getCalendarAttrs("prev-button");
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte
index dbcd2733d..0ab7d9a44 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getFieldAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { SegmentProps } from "../types.js";
 
 	type $$Props = SegmentProps;
@@ -13,7 +13,8 @@
 
 	const {
 		elements: { startSegment, endSegment },
-		ids
+		ids,
+		getFieldAttrs
 	} = getCtx();
 
 	$: if (id && part !== "literal") {
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte
index f160787e0..069c9bce0 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getPopoverAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -13,7 +13,8 @@
 
 	const {
 		elements: { trigger },
-		ids
+		ids,
+		getPopoverAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/date-range-picker/ctx.ts b/src/lib/bits/date-range-picker/ctx.ts
index 6fcee2ec0..5a8bd0b6e 100644
--- a/src/lib/bits/date-range-picker/ctx.ts
+++ b/src/lib/bits/date-range-picker/ctx.ts
@@ -1,39 +1,57 @@
 import { createDateRangePicker, type CreateDateRangePickerProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import type { Writable } from "svelte/store";
-import { removeUndefined, getOptionUpdater } from "$lib/internal/index.js";
-import { getAttrs as getCalendarAttrs } from "$lib/bits/calendar/ctx.js";
-import { getAttrs as getFieldAttrs } from "$lib/bits/date-field/ctx.js";
-import { getAttrs as getPopoverAttrs } from "$lib/bits/popover/ctx.js";
+import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
+import { getCalendarData } from "$lib/bits/calendar/ctx.js";
+import { getDateFieldData } from "$lib/bits/date-field/ctx.js";
+import { getPopoverData } from "$lib/bits/popover/ctx.js";
 import type { FloatingConfig } from "$lib/bits/floating/floating-config.js";
 import { getPositioningUpdater } from "$lib/bits/floating/helpers.js";
 import type { FloatingProps } from "$lib/bits/floating/_types.js";
 
-const NAME = "date-range-picker";
-
-export { getCalendarAttrs, getFieldAttrs, getPopoverAttrs };
+function getDateRangePickerData() {
+	const NAME = "date-range-picker" as const;
+	return {
+		NAME
+	};
+}
 
 export function setCtx(props: CreateDateRangePickerProps) {
-	const dateRangePicker = createDateRangePicker(removeUndefined(props));
+	const { NAME } = getDateRangePickerData();
+
+	const { NAME: CALENDAR_NAME, PARTS: CALENDAR_PARTS } = getCalendarData();
+	const getCalendarAttrs = createBitAttrs(CALENDAR_NAME, CALENDAR_PARTS);
+	const { NAME: FIELD_NAME, PARTS: FIELD_PARTS } = getDateFieldData();
+	const getFieldAttrs = createBitAttrs(FIELD_NAME, FIELD_PARTS);
+	const { NAME: POPOVER_NAME, PARTS: POPOVER_PARTS } = getPopoverData();
+	const getPopoverAttrs = createBitAttrs(POPOVER_NAME, POPOVER_PARTS);
+
+	const dateRangePicker = {
+		...createDateRangePicker(removeUndefined(props)),
+		getCalendarAttrs,
+		getFieldAttrs,
+		getPopoverAttrs
+	};
 	const updateOption = getOptionUpdater(dateRangePicker.options);
 	setContext(NAME, { ...dateRangePicker, updateOption });
 
 	return {
 		...dateRangePicker,
-		updateOption: getOptionUpdater(dateRangePicker.options)
+		updateOption
 	};
 }
 
 export function getCtx() {
+	const { NAME } = getDateRangePickerData();
 	return getContext<ReturnType<typeof setCtx>>(NAME);
 }
 
-const defaultPlacement = {
-	side: "bottom",
-	align: "center"
-} satisfies FloatingProps;
-
 export function updatePositioning(props: FloatingProps) {
+	const defaultPlacement = {
+		side: "bottom",
+		align: "center"
+	} satisfies FloatingProps;
+
 	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
diff --git a/src/lib/bits/dialog/components/dialog-close.svelte b/src/lib/bits/dialog/components/dialog-close.svelte
index e5366ba2a..999a73dab 100644
--- a/src/lib/bits/dialog/components/dialog-close.svelte
+++ b/src/lib/bits/dialog/components/dialog-close.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CloseEvents, CloseProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { close }
+		elements: { close },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/dialog/components/dialog-content.svelte b/src/lib/bits/dialog/components/dialog-content.svelte
index a57d7180d..3119769ae 100644
--- a/src/lib/bits/dialog/components/dialog-content.svelte
+++ b/src/lib/bits/dialog/components/dialog-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/index.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -24,7 +24,8 @@
 	const {
 		elements: { content },
 		states: { open },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 	const attrs = getAttrs("content");
 
diff --git a/src/lib/bits/dialog/components/dialog-description.svelte b/src/lib/bits/dialog/components/dialog-description.svelte
index 815b8584c..228cdabc2 100644
--- a/src/lib/bits/dialog/components/dialog-description.svelte
+++ b/src/lib/bits/dialog/components/dialog-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { DescriptionProps } from "../types.js";
 
 	type $$Props = DescriptionProps;
@@ -11,7 +11,8 @@
 
 	const {
 		elements: { description },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 	const attrs = getAttrs("description");
 
diff --git a/src/lib/bits/dialog/components/dialog-overlay.svelte b/src/lib/bits/dialog/components/dialog-overlay.svelte
index 56ec7694b..a9a0dacfd 100644
--- a/src/lib/bits/dialog/components/dialog-overlay.svelte
+++ b/src/lib/bits/dialog/components/dialog-overlay.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/index.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { OverlayEvents, OverlayProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -22,7 +22,8 @@
 
 	const {
 		elements: { overlay },
-		states: { open }
+		states: { open },
+		getAttrs
 	} = getCtx();
 	const attrs = getAttrs("overlay");
 
diff --git a/src/lib/bits/dialog/components/dialog-portal.svelte b/src/lib/bits/dialog/components/dialog-portal.svelte
index 1c3d28433..b46a51724 100644
--- a/src/lib/bits/dialog/components/dialog-portal.svelte
+++ b/src/lib/bits/dialog/components/dialog-portal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { PortalProps } from "../types.js";
 
 	type $$Props = PortalProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { portalled }
+		elements: { portalled },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("portal");
diff --git a/src/lib/bits/dialog/components/dialog-title.svelte b/src/lib/bits/dialog/components/dialog-title.svelte
index 4b889ce01..a4b5dd3e8 100644
--- a/src/lib/bits/dialog/components/dialog-title.svelte
+++ b/src/lib/bits/dialog/components/dialog-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TitleProps } from "../types.js";
 
 	type $$Props = TitleProps;
@@ -12,7 +12,8 @@
 
 	const {
 		elements: { title },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("title");
diff --git a/src/lib/bits/dialog/components/dialog-trigger.svelte b/src/lib/bits/dialog/components/dialog-trigger.svelte
index 314102391..415ea90c6 100644
--- a/src/lib/bits/dialog/components/dialog-trigger.svelte
+++ b/src/lib/bits/dialog/components/dialog-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { trigger }
+		elements: { trigger },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/dialog/ctx.ts b/src/lib/bits/dialog/ctx.ts
index b1edc6ade..3cbcdd5c3 100644
--- a/src/lib/bits/dialog/ctx.ts
+++ b/src/lib/bits/dialog/ctx.ts
@@ -1,18 +1,34 @@
-import { createDialog, type CreateDialogProps, type Dialog as DialogReturn } from "@melt-ui/svelte";
+import { createDialog, type CreateDialogProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 
-const NAME = "dialog";
-const PARTS = ["close", "content", "description", "overlay", "portal", "title", "trigger"] as const;
+export function getDialogData() {
+	const NAME = "dialog" as const;
+	const PARTS = [
+		"close",
+		"content",
+		"description",
+		"overlay",
+		"portal",
+		"title",
+		"trigger"
+	] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		PARTS
+	};
+}
 
 type SetProps = CreateDialogProps;
-
-type GetReturn = DialogReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: SetProps) {
-	const dialog = createDialog({ ...removeUndefined(props), role: "dialog" });
+	const { NAME, PARTS } = getDialogData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+
+	const dialog = { ...createDialog({ ...removeUndefined(props), role: "dialog" }), getAttrs };
+
 	setContext(NAME, dialog);
 	return {
 		...dialog,
@@ -21,5 +37,6 @@ export function setCtx(props: SetProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getDialogData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/floating/helpers.ts b/src/lib/bits/floating/helpers.ts
index c2dff351b..eacb99c01 100644
--- a/src/lib/bits/floating/helpers.ts
+++ b/src/lib/bits/floating/helpers.ts
@@ -5,17 +5,6 @@ import type { FloatingProps } from "./_types.js";
 type Side = "top" | "right" | "bottom" | "left";
 type Align = "start" | "center" | "end";
 
-const defaultPositioningProps = {
-	side: "bottom",
-	align: "center",
-	sideOffset: 0,
-	alignOffset: 0,
-	sameWidth: false,
-	avoidCollisions: true,
-	collisionPadding: 8,
-	fitViewport: false
-} satisfies FloatingProps;
-
 export function getPositioningUpdater(store: Writable<FloatingConfig>) {
 	return (props: FloatingProps = {}) => {
 		return updatePositioning(store, props);
@@ -23,6 +12,17 @@ export function getPositioningUpdater(store: Writable<FloatingConfig>) {
 }
 
 export function updatePositioning(store: Writable<FloatingConfig>, props: FloatingProps) {
+	const defaultPositioningProps = {
+		side: "bottom",
+		align: "center",
+		sideOffset: 0,
+		alignOffset: 0,
+		sameWidth: false,
+		avoidCollisions: true,
+		collisionPadding: 8,
+		fitViewport: false
+	} satisfies FloatingProps;
+
 	const withDefaults = { ...defaultPositioningProps, ...props } satisfies FloatingProps;
 	store.update((prev) => {
 		return {
diff --git a/src/lib/bits/label/components/label.svelte b/src/lib/bits/label/components/label.svelte
index 4455d6d7c..45c3f620c 100644
--- a/src/lib/bits/label/components/label.svelte
+++ b/src/lib/bits/label/components/label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt, createLabel } from "@melt-ui/svelte";
-	import { getAttrs } from "../ctx.js";
+	import { getLabelData } from "../ctx.js";
 	import type { Events, Props } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -15,6 +15,7 @@
 	} = createLabel();
 
 	const dispatch = createDispatcher();
+	const { getAttrs } = getLabelData();
 	const attrs = getAttrs("root");
 
 	$: builder = $root;
diff --git a/src/lib/bits/label/ctx.ts b/src/lib/bits/label/ctx.ts
index 4a8983ddd..7636039cf 100644
--- a/src/lib/bits/label/ctx.ts
+++ b/src/lib/bits/label/ctx.ts
@@ -1,6 +1,13 @@
 import { createBitAttrs } from "$lib/internal";
 
-const NAME = "label";
-const PARTS = ["root"];
+export function getLabelData() {
+	const NAME = "label";
+	const PARTS = ["root"];
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	const getAttrs = createBitAttrs(NAME, PARTS);
+
+	return {
+		NAME,
+		getAttrs
+	};
+}
diff --git a/src/lib/bits/link-preview/components/link-preview-arrow.svelte b/src/lib/bits/link-preview/components/link-preview-arrow.svelte
index dfada3ff5..562ff0fb2 100644
--- a/src/lib/bits/link-preview/components/link-preview-arrow.svelte
+++ b/src/lib/bits/link-preview/components/link-preview-arrow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setArrow, getAttrs } from "../ctx.js";
+	import { setArrow } from "../ctx.js";
 	import { melt } from "@melt-ui/svelte";
 	import type { ArrowProps } from "../types.js";
 
@@ -10,7 +10,8 @@
 	export let size = 8;
 
 	const {
-		elements: { arrow }
+		elements: { arrow },
+		getAttrs
 	} = setArrow(size);
 	const attrs = getAttrs("arrow");
 
diff --git a/src/lib/bits/link-preview/components/link-preview-content.svelte b/src/lib/bits/link-preview/components/link-preview-content.svelte
index a6bd9593b..5de9b7c5c 100644
--- a/src/lib/bits/link-preview/components/link-preview-content.svelte
+++ b/src/lib/bits/link-preview/components/link-preview-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { createDispatcher, type Transition } from "$lib/internal/index.js";
-	import { getCtx, getAttrs, updatePositioning } from "../ctx.js";
+	import { getCtx, updatePositioning } from "../ctx.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -35,7 +35,8 @@
 	const {
 		elements: { content },
 		states: { open },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	$: if (id) {
diff --git a/src/lib/bits/link-preview/components/link-preview-trigger.svelte b/src/lib/bits/link-preview/components/link-preview-trigger.svelte
index 4e6a65477..7b35e2068 100644
--- a/src/lib/bits/link-preview/components/link-preview-trigger.svelte
+++ b/src/lib/bits/link-preview/components/link-preview-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -13,7 +13,8 @@
 
 	const {
 		elements: { trigger },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/link-preview/ctx.ts b/src/lib/bits/link-preview/ctx.ts
index bf980d413..a99aa8610 100644
--- a/src/lib/bits/link-preview/ctx.ts
+++ b/src/lib/bits/link-preview/ctx.ts
@@ -1,31 +1,35 @@
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-import {
-	createLinkPreview,
-	type CreateLinkPreviewProps,
-	type LinkPreview as LinkPreviewReturn
-} from "@melt-ui/svelte";
+import { createLinkPreview, type CreateLinkPreviewProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { getPositioningUpdater } from "../floating/helpers.js";
 import type { FloatingProps } from "../floating/_types.js";
 import type { Writable } from "svelte/store";
 import type { FloatingConfig } from "../floating/floating-config.js";
 
-const NAME = "link-preview";
-const PARTS = ["arrow", "content", "trigger"];
+export function getLinkPreviewData() {
+	const NAME = "link-preview" as const;
+	const PARTS = ["arrow", "content", "trigger"];
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
-
-type GetReturn = LinkPreviewReturn;
-
-export function getCtx() {
-	return getContext<GetReturn>(NAME);
+	return {
+		NAME,
+		PARTS
+	};
 }
 
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
+
 export function setCtx(props: CreateLinkPreviewProps) {
-	const linkPreview = createLinkPreview({
-		...removeUndefined(props),
-		forceVisible: true
-	});
+	const { NAME, PARTS } = getLinkPreviewData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+
+	const linkPreview = {
+		...createLinkPreview({
+			...removeUndefined(props),
+			forceVisible: true
+		}),
+		getAttrs
+	};
+
 	setContext(NAME, linkPreview);
 	return {
 		...linkPreview,
@@ -33,18 +37,23 @@ export function setCtx(props: CreateLinkPreviewProps) {
 	};
 }
 
+export function getCtx() {
+	const { NAME } = getLinkPreviewData();
+	return getContext<GetReturn>(NAME);
+}
+
 export function setArrow(size = 8) {
 	const linkPreview = getCtx();
 	linkPreview.options.arrowSize.set(size);
 	return linkPreview;
 }
 
-const defaultPlacement = {
-	side: "bottom",
-	align: "center"
-} satisfies FloatingProps;
-
 export function updatePositioning(props: FloatingProps) {
+	const defaultPlacement = {
+		side: "bottom",
+		align: "center"
+	} satisfies FloatingProps;
+
 	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
diff --git a/src/lib/bits/menu/components/menu-arrow.svelte b/src/lib/bits/menu/components/menu-arrow.svelte
index c2241d872..770fd0b47 100644
--- a/src/lib/bits/menu/components/menu-arrow.svelte
+++ b/src/lib/bits/menu/components/menu-arrow.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setArrow, getAttrs } from "../ctx.js";
+	import { setArrow } from "../ctx.js";
 	import type { ArrowProps } from "../types.js";
 
 	type $$Props = ArrowProps;
@@ -10,7 +10,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { arrow }
+		elements: { arrow },
+		getAttrs
 	} = setArrow(size);
 
 	const attrs = getAttrs("arrow");
diff --git a/src/lib/bits/menu/components/menu-checkbox-indicator.svelte b/src/lib/bits/menu/components/menu-checkbox-indicator.svelte
index 391e09f93..d2c072bc5 100644
--- a/src/lib/bits/menu/components/menu-checkbox-indicator.svelte
+++ b/src/lib/bits/menu/components/menu-checkbox-indicator.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import type { CheckboxIndicatorProps } from "../types.js";
-	import { getAttrs, getCheckboxIndicator } from "../ctx.js";
+	import { getCheckboxIndicator, getCtx } from "../ctx.js";
 
 	type $$Props = CheckboxIndicatorProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
 	const checked = getCheckboxIndicator();
+	const { getAttrs } = getCtx();
 	const attrs = getAttrs("checkbox-indicator");
 </script>
 
diff --git a/src/lib/bits/menu/components/menu-checkbox-item.svelte b/src/lib/bits/menu/components/menu-checkbox-item.svelte
index 8acd61ad5..2b578ef17 100644
--- a/src/lib/bits/menu/components/menu-checkbox-item.svelte
+++ b/src/lib/bits/menu/components/menu-checkbox-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCheckboxItem, getAttrs } from "../ctx.js";
+	import { setCheckboxItem } from "../ctx.js";
 	import type { CheckboxItemEvents, CheckboxItemProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -16,7 +16,8 @@
 	const {
 		elements: { checkboxItem },
 		states: { checked: localChecked },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCheckboxItem({
 		disabled,
 		defaultChecked: checked,
diff --git a/src/lib/bits/menu/components/menu-content.svelte b/src/lib/bits/menu/components/menu-content.svelte
index d44d4a374..6d6a05603 100644
--- a/src/lib/bits/menu/components/menu-content.svelte
+++ b/src/lib/bits/menu/components/menu-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createDispatcher } from "$lib/internal/events.js";
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx, updatePositioning } from "../ctx.js";
+	import { getCtx, updatePositioning } from "../ctx.js";
 	import type { Transition } from "$lib/internal/types.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
@@ -35,7 +35,8 @@
 	const {
 		elements: { menu },
 		states: { open },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/menu/components/menu-group.svelte b/src/lib/bits/menu/components/menu-group.svelte
index a34484ed9..706850d9e 100644
--- a/src/lib/bits/menu/components/menu-group.svelte
+++ b/src/lib/bits/menu/components/menu-group.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setGroupCtx, getAttrs } from "../ctx.js";
+	import { setGroupCtx } from "../ctx.js";
 	import type { GroupProps } from "../types.js";
 	type $$Props = GroupProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { group, id } = setGroupCtx();
+	const { group, id, getAttrs } = setGroupCtx();
 	const attrs = getAttrs("group");
 
 	$: builder = $group(id);
diff --git a/src/lib/bits/menu/components/menu-item.svelte b/src/lib/bits/menu/components/menu-item.svelte
index 746b04b9b..2ae03225d 100644
--- a/src/lib/bits/menu/components/menu-item.svelte
+++ b/src/lib/bits/menu/components/menu-item.svelte
@@ -2,7 +2,7 @@
 	import { createDispatcher } from "$lib/internal/events.js";
 	import { disabledAttrs } from "$lib/internal/index.js";
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ItemEvents, ItemProps } from "../types.js";
 
 	type $$Props = ItemProps;
@@ -14,7 +14,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { item }
+		elements: { item },
+		getAttrs
 	} = getCtx();
 	const dispatch = createDispatcher();
 
diff --git a/src/lib/bits/menu/components/menu-label.svelte b/src/lib/bits/menu/components/menu-label.svelte
index ed4069df1..0d039fad6 100644
--- a/src/lib/bits/menu/components/menu-label.svelte
+++ b/src/lib/bits/menu/components/menu-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getGroupLabel, getAttrs } from "../ctx.js";
+	import { getGroupLabel } from "../ctx.js";
 	import type { LabelProps } from "../types.js";
 
 	type $$Props = LabelProps;
@@ -8,7 +8,7 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { groupLabel, id } = getGroupLabel();
+	const { groupLabel, id, getAttrs } = getGroupLabel();
 	const attrs = getAttrs("label");
 
 	$: builder = $groupLabel(id);
diff --git a/src/lib/bits/menu/components/menu-radio-group.svelte b/src/lib/bits/menu/components/menu-radio-group.svelte
index 8320525b5..6bdb3f951 100644
--- a/src/lib/bits/menu/components/menu-radio-group.svelte
+++ b/src/lib/bits/menu/components/menu-radio-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setRadioGroupCtx, getAttrs } from "../ctx.js";
+	import { setRadioGroupCtx } from "../ctx.js";
 	import type { RadioGroupProps } from "../types.js";
 
 	type $$Props = RadioGroupProps;
@@ -12,7 +12,8 @@
 
 	const {
 		elements: { radioGroup },
-		states: { value: localValue }
+		states: { value: localValue },
+		getAttrs
 	} = setRadioGroupCtx({
 		defaultValue: value,
 		onValueChange: ({ next }) => {
diff --git a/src/lib/bits/menu/components/menu-radio-indicator.svelte b/src/lib/bits/menu/components/menu-radio-indicator.svelte
index b84b0487c..9a135a271 100644
--- a/src/lib/bits/menu/components/menu-radio-indicator.svelte
+++ b/src/lib/bits/menu/components/menu-radio-indicator.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
 	import type { RadioIndicatorProps } from "../types.js";
-	import { getAttrs, getRadioIndicator } from "../ctx.js";
+	import { getRadioIndicator } from "../ctx.js";
 
 	type $$Props = RadioIndicatorProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { isChecked, value } = getRadioIndicator();
+	const {
+		helpers: { isChecked },
+		value,
+		getAttrs
+	} = getRadioIndicator();
+
 	const attrs = getAttrs("radio-indicator");
 	$: checked = $isChecked(value);
 </script>
diff --git a/src/lib/bits/menu/components/menu-radio-item.svelte b/src/lib/bits/menu/components/menu-radio-item.svelte
index 347274862..a424958e0 100644
--- a/src/lib/bits/menu/components/menu-radio-item.svelte
+++ b/src/lib/bits/menu/components/menu-radio-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setRadioItem, getAttrs } from "../ctx.js";
+	import { setRadioItem } from "../ctx.js";
 	import type { RadioItemEvents, RadioItemProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -12,7 +12,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { radioItem }
+		elements: { radioItem },
+		getAttrs
 	} = setRadioItem(value);
 
 	const attrs = getAttrs("radio-item");
diff --git a/src/lib/bits/menu/components/menu-separator.svelte b/src/lib/bits/menu/components/menu-separator.svelte
index e7a42c0cd..4682a2f83 100644
--- a/src/lib/bits/menu/components/menu-separator.svelte
+++ b/src/lib/bits/menu/components/menu-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { SeparatorProps } from "../types.js";
 
 	type $$Props = SeparatorProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { separator }
+		elements: { separator },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("separator");
diff --git a/src/lib/bits/menu/components/menu-sub-content.svelte b/src/lib/bits/menu/components/menu-sub-content.svelte
index fbfe12a45..6e52c4740 100644
--- a/src/lib/bits/menu/components/menu-sub-content.svelte
+++ b/src/lib/bits/menu/components/menu-sub-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { createDispatcher, type Transition } from "$lib/internal/index.js";
-	import { getAttrs, getSubmenuCtx, updateSubPositioning } from "../ctx.js";
+	import { getSubmenuCtx, updateSubPositioning } from "../ctx.js";
 	import type { SubContentEvents, SubContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -34,7 +34,8 @@
 	const {
 		elements: { subMenu },
 		states: { subOpen },
-		ids
+		ids,
+		getAttrs
 	} = getSubmenuCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/menu/components/menu-sub-trigger.svelte b/src/lib/bits/menu/components/menu-sub-trigger.svelte
index 18260404c..5a522a6bc 100644
--- a/src/lib/bits/menu/components/menu-sub-trigger.svelte
+++ b/src/lib/bits/menu/components/menu-sub-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { disabledAttrs } from "$lib/internal/index.js";
-	import { getSubTrigger, getAttrs } from "../ctx.js";
+	import { getSubTrigger } from "../ctx.js";
 	import type { SubTriggerEvents, SubTriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -16,7 +16,8 @@
 
 	const {
 		elements: { subTrigger },
-		ids
+		ids,
+		getAttrs
 	} = getSubTrigger();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/menu/components/menu-trigger.svelte b/src/lib/bits/menu/components/menu-trigger.svelte
index fcae95de1..19cd5d677 100644
--- a/src/lib/bits/menu/components/menu-trigger.svelte
+++ b/src/lib/bits/menu/components/menu-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type {
 		DropdownTriggerEvents,
 		DropdownTriggerProps
@@ -16,7 +16,8 @@
 
 	const {
 		elements: { trigger },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/menu/ctx.ts b/src/lib/bits/menu/ctx.ts
index 0011bdc45..aa4336942 100644
--- a/src/lib/bits/menu/ctx.ts
+++ b/src/lib/bits/menu/ctx.ts
@@ -6,57 +6,71 @@ import {
 } from "$lib/internal/index.js";
 import {
 	type CreateDropdownSubmenuProps as DropdownSubmenuProps,
-	type DropdownMenu as DropdownMenuReturn,
 	type CreateMenuRadioGroupProps as DropdownRadioGroupProps,
-	type DropdownMenuRadioGroup as DropdownRadioGroupReturn,
-	type DropdownMenuSubmenu as DropdownSubmenuReturn,
 	type Checkbox as CheckboxReturn,
 	type CreateDropdownMenuCheckboxItemProps as DropdownCheckboxItemProps,
 	type CreateDropdownMenuProps,
 	createDropdownMenu
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import type { Readable, Writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 import { getPositioningUpdater } from "../floating/helpers.js";
 import type { FloatingConfig } from "../floating/floating-config.js";
 import type { FloatingProps } from "../floating/_types.js";
 
-const NAME = "menu";
-const SUB_NAME = "menu-submenu";
-const RADIO_GROUP_NAME = "menu-radiogroup";
-const CHECKBOX_ITEM_NAME = "menu-checkboxitem";
-const RADIO_ITEM_NAME = "menu-radioitem";
-const GROUP_NAME = "menu-group";
-
-const PARTS = [
-	"arrow",
-	"checkbox-indicator",
-	"checkbox-item",
-	"content",
-	"group",
-	"item",
-	"label",
-	"radio-group",
-	"radio-item",
-	"radio-indicator",
-	"separator",
-	"sub-content",
-	"sub-trigger",
-	"trigger"
-] as const;
-
-export const getAttrs = createBitAttrs("menu", PARTS);
-
-type GetReturn = DropdownMenuReturn;
-type GetSubReturn = DropdownSubmenuReturn;
-type GetRadioGroupReturn = DropdownRadioGroupReturn;
+export function getMenuData() {
+	const NAME = "menu" as const;
+	const SUB_NAME = "menu-submenu";
+	const RADIO_GROUP_NAME = "menu-radiogroup";
+	const CHECKBOX_ITEM_NAME = "menu-checkboxitem";
+	const RADIO_ITEM_NAME = "menu-radioitem";
+	const GROUP_NAME = "menu-group";
+
+	const PARTS = [
+		"arrow",
+		"checkbox-indicator",
+		"checkbox-item",
+		"content",
+		"group",
+		"item",
+		"label",
+		"radio-group",
+		"radio-item",
+		"radio-indicator",
+		"separator",
+		"sub-content",
+		"sub-trigger",
+		"trigger"
+	] as const;
+
+	return {
+		NAME,
+		SUB_NAME,
+		RADIO_GROUP_NAME,
+		CHECKBOX_ITEM_NAME,
+		RADIO_ITEM_NAME,
+		GROUP_NAME,
+		PARTS
+	};
+}
+
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
+type GetSubReturn = Omit<ReturnType<typeof setSubMenuCtx>, "updateOption">;
+type GetRadioGroupReturn = ReturnType<typeof setRadioGroupCtx>;
+type GetRadioItem = ReturnType<typeof setRadioItem>;
 
 export function getCtx() {
+	const { NAME } = getMenuData();
 	return getContext<GetReturn>(NAME);
 }
 
 export function setCtx(props: CreateDropdownMenuProps) {
-	const dropdownMenu = createDropdownMenu({ ...removeUndefined(props), forceVisible: true });
+	const { NAME, PARTS } = getMenuData();
+	const getAttrs = createBitAttrs("menu", PARTS);
+	const dropdownMenu = {
+		...createDropdownMenu({ ...removeUndefined(props), forceVisible: true }),
+		getAttrs
+	};
 	setContext(NAME, dropdownMenu);
 	return {
 		...dropdownMenu,
@@ -65,10 +79,12 @@ export function setCtx(props: CreateDropdownMenuProps) {
 }
 
 export function setSubMenuCtx(props: DropdownSubmenuProps) {
+	const { SUB_NAME } = getMenuData();
 	const {
-		builders: { createSubmenu }
+		builders: { createSubmenu },
+		getAttrs
 	} = getCtx();
-	const sub = createSubmenu(removeUndefined(props));
+	const sub = { ...createSubmenu(removeUndefined(props)), getAttrs };
 	setContext(SUB_NAME, sub);
 	return {
 		...sub,
@@ -77,67 +93,87 @@ export function setSubMenuCtx(props: DropdownSubmenuProps) {
 }
 
 export function setRadioGroupCtx(props: DropdownRadioGroupProps) {
+	const { RADIO_GROUP_NAME } = getMenuData();
 	const {
-		builders: { createMenuRadioGroup }
+		builders: { createMenuRadioGroup },
+		getAttrs
 	} = getCtx();
 	const radioGroup = createMenuRadioGroup(props);
-	setContext(RADIO_GROUP_NAME, radioGroup);
-	return radioGroup;
+	setContext(RADIO_GROUP_NAME, { ...radioGroup, getAttrs });
+	return {
+		...radioGroup,
+		getAttrs
+	};
 }
 
 export function setRadioItem(value: string) {
+	const { RADIO_ITEM_NAME, RADIO_GROUP_NAME } = getMenuData();
 	const dropdownMenu = getContext<GetRadioGroupReturn>(RADIO_GROUP_NAME);
-	setContext(RADIO_ITEM_NAME, { isChecked: dropdownMenu.helpers.isChecked, value });
-	return dropdownMenu;
+	setContext(RADIO_ITEM_NAME, { ...dropdownMenu, value });
+	return {
+		...dropdownMenu,
+		value
+	};
 }
 
 export function getRadioIndicator() {
-	return getContext<{
-		isChecked: Readable<(itemValue: string) => boolean>;
-		value: string;
-	}>(RADIO_ITEM_NAME);
+	const { RADIO_ITEM_NAME } = getMenuData();
+	const radioItem = getContext<GetRadioItem>(RADIO_ITEM_NAME);
+	return {
+		...radioItem
+	};
 }
 
 export function getSubTrigger() {
+	const { SUB_NAME } = getMenuData();
 	const submenu = getContext<GetSubReturn>(SUB_NAME);
 	return submenu;
 }
 
 export function getSubmenuCtx() {
+	const { SUB_NAME } = getMenuData();
 	return getContext<GetSubReturn>(SUB_NAME);
 }
 
 export function setCheckboxItem(props: DropdownCheckboxItemProps) {
+	const { CHECKBOX_ITEM_NAME } = getMenuData();
 	const {
-		builders: { createCheckboxItem }
+		builders: { createCheckboxItem },
+		getAttrs
 	} = getCtx();
 	const checkboxItem = createCheckboxItem(removeUndefined(props));
 	setContext(CHECKBOX_ITEM_NAME, checkboxItem.states.checked);
 
 	return {
 		...checkboxItem,
-		updateOption: getOptionUpdater(checkboxItem.options)
+		updateOption: getOptionUpdater(checkboxItem.options),
+		getAttrs
 	};
 }
 
 export function getCheckboxIndicator() {
+	const { CHECKBOX_ITEM_NAME } = getMenuData();
 	return getContext<CheckboxReturn["states"]["checked"]>(CHECKBOX_ITEM_NAME);
 }
 export function setGroupCtx() {
+	const { GROUP_NAME } = getMenuData();
 	const {
-		elements: { group }
+		elements: { group },
+		getAttrs
 	} = getCtx();
 	const id = generateId();
 	setContext(GROUP_NAME, id);
-	return { group, id };
+	return { group, id, getAttrs };
 }
 
 export function getGroupLabel() {
+	const { GROUP_NAME } = getMenuData();
 	const id = getContext<string>(GROUP_NAME) ?? generateId();
 	const {
-		elements: { groupLabel }
+		elements: { groupLabel },
+		getAttrs
 	} = getCtx();
-	return { groupLabel, id };
+	return { groupLabel, id, getAttrs };
 }
 
 export function setArrow(size = 8) {
@@ -146,12 +182,11 @@ export function setArrow(size = 8) {
 	return menu;
 }
 
-const defaultPlacement = {
-	side: "bottom",
-	align: "center"
-} satisfies FloatingProps;
-
 export function updatePositioning(props: FloatingProps) {
+	const defaultPlacement = {
+		side: "bottom",
+		align: "center"
+	} satisfies FloatingProps;
 	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
@@ -161,12 +196,12 @@ export function updatePositioning(props: FloatingProps) {
 	updater(withDefaults);
 }
 
-const defaultSubPlacement = {
-	side: "right",
-	align: "start"
-} satisfies FloatingProps;
-
 export function updateSubPositioning(props: FloatingProps) {
+	const defaultSubPlacement = {
+		side: "right",
+		align: "start"
+	} satisfies FloatingProps;
+
 	const withDefaults = { ...defaultSubPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
diff --git a/src/lib/bits/menubar/components/menubar-trigger.svelte b/src/lib/bits/menubar/components/menubar-trigger.svelte
index 8ab632304..900bee8df 100644
--- a/src/lib/bits/menubar/components/menubar-trigger.svelte
+++ b/src/lib/bits/menubar/components/menubar-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getMenuCtx, getAttrs } from "../ctx.js";
+	import { getMenuCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -13,7 +13,8 @@
 
 	const {
 		elements: { trigger },
-		ids
+		ids,
+		getAttrs
 	} = getMenuCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/menubar/components/menubar.svelte b/src/lib/bits/menubar/components/menubar.svelte
index aa26c1dc8..4670f2af9 100644
--- a/src/lib/bits/menubar/components/menubar.svelte
+++ b/src/lib/bits/menubar/components/menubar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getMenubarAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 	import { derived } from "svelte/store";
 
@@ -15,7 +15,8 @@
 	const {
 		elements: { menubar },
 		updateOption,
-		ids
+		ids,
+		getMenubarAttrs
 	} = setCtx({ loop, closeOnEscape });
 
 	const idValues = derived([ids.menubar], ([$menubarId]) => ({
diff --git a/src/lib/bits/menubar/ctx.ts b/src/lib/bits/menubar/ctx.ts
index 18806aa26..7c0931b92 100644
--- a/src/lib/bits/menubar/ctx.ts
+++ b/src/lib/bits/menubar/ctx.ts
@@ -1,11 +1,8 @@
 import {
 	createMenubar,
-	type Menubar as MenubarReturn,
 	type CreateMenubarProps as MenubarProps,
-	type MenubarMenu as MenubarMenuReturn,
 	type CreateMenubarSubmenuProps,
-	type CreateMenubarMenuProps,
-	type MenubarMenuSubmenu as MenubarSubReturn
+	type CreateMenubarMenuProps
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
@@ -15,35 +12,44 @@ import type { FloatingConfig } from "../floating/floating-config.js";
 import type { FloatingProps } from "../floating/_types.js";
 import { getSubmenuCtx } from "../menu/ctx";
 
-const NAME = "menubar";
-const MENU_NAME = "menu";
-const SUB_NAME = "menu-submenu";
-
-const PARTS = [
-	"arrow",
-	"checkbox-indicator",
-	"checkbox-item",
-	"content",
-	"group",
-	"item",
-	"label",
-	"radio-group",
-	"radio-item",
-	"separator",
-	"sub-content",
-	"sub-trigger",
-	"trigger"
-] as const;
-
-export const getMenubarAttrs = createBitAttrs(NAME, ["root"]);
-export const getAttrs = createBitAttrs("menu", PARTS);
-
-type GetReturn = MenubarReturn;
-type GetMenuReturn = MenubarMenuReturn;
-type GetSubmenuReturn = MenubarSubReturn;
+function getMenubarData() {
+	const NAME = "menubar" as const;
+	const MENU_NAME = "menu" as const;
+	const SUB_NAME = "menu-submenu";
+
+	const PARTS = [
+		"arrow",
+		"checkbox-indicator",
+		"checkbox-item",
+		"content",
+		"group",
+		"item",
+		"label",
+		"radio-group",
+		"radio-item",
+		"separator",
+		"sub-content",
+		"sub-trigger",
+		"trigger"
+	] as const;
+
+	return {
+		NAME,
+		MENU_NAME,
+		SUB_NAME,
+		PARTS
+	};
+}
+
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
+type GetMenuReturn = Omit<ReturnType<typeof setMenuCtx>, "updateOption">;
+type GetSubmenuReturn = Omit<ReturnType<typeof setSubMenuCtx>, "updateOption">;
 
 export function setCtx(props: MenubarProps) {
-	const menubar = createMenubar(removeUndefined(props));
+	const { NAME, PARTS, MENU_NAME } = getMenubarData();
+	const getMenubarAttrs = createBitAttrs(NAME, ["root"]);
+	const getAttrs = createBitAttrs(MENU_NAME, PARTS);
+	const menubar = { ...createMenubar(removeUndefined(props)), getAttrs, getMenubarAttrs };
 	setContext(NAME, menubar);
 
 	return {
@@ -52,15 +58,18 @@ export function setCtx(props: MenubarProps) {
 	};
 }
 export function getCtx() {
+	const { NAME } = getMenubarData();
 	return getContext<GetReturn>(NAME);
 }
 
 export function setMenuCtx(props: CreateMenubarMenuProps) {
+	const { MENU_NAME } = getMenubarData();
 	const {
-		builders: { createMenu }
+		builders: { createMenu },
+		getAttrs
 	} = getCtx();
 
-	const menu = createMenu({ ...removeUndefined(props), forceVisible: false });
+	const menu = { ...createMenu({ ...removeUndefined(props), forceVisible: false }), getAttrs };
 	setContext(MENU_NAME, menu);
 	return {
 		...menu,
@@ -69,14 +78,17 @@ export function setMenuCtx(props: CreateMenubarMenuProps) {
 }
 
 export function getMenuCtx() {
+	const { MENU_NAME } = getMenubarData();
 	return getContext<GetMenuReturn>(MENU_NAME);
 }
 
 export function setSubMenuCtx(props: CreateMenubarSubmenuProps) {
+	const { SUB_NAME } = getMenubarData();
 	const {
-		builders: { createSubmenu }
+		builders: { createSubmenu },
+		getAttrs
 	} = getMenuCtx();
-	const sub = createSubmenu(removeUndefined(props));
+	const sub = { ...createSubmenu(removeUndefined(props)), getAttrs };
 	setContext(SUB_NAME, sub);
 	return {
 		...sub,
@@ -84,6 +96,7 @@ export function setSubMenuCtx(props: CreateMenubarSubmenuProps) {
 	};
 }
 export function getSubMenuCtx() {
+	const { SUB_NAME } = getMenubarData();
 	return getContext<GetSubmenuReturn>(SUB_NAME);
 }
 
diff --git a/src/lib/bits/pagination/components/pagination-next-button.svelte b/src/lib/bits/pagination/components/pagination-next-button.svelte
index 33e63a1e0..fe2eb3818 100644
--- a/src/lib/bits/pagination/components/pagination-next-button.svelte
+++ b/src/lib/bits/pagination/components/pagination-next-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { NextButtonEvents, NextButtonProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import { melt } from "@melt-ui/svelte";
 
 	type $$Props = NextButtonProps;
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { nextButton }
+		elements: { nextButton },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("next-button");
diff --git a/src/lib/bits/pagination/components/pagination-page.svelte b/src/lib/bits/pagination/components/pagination-page.svelte
index d82154898..cd5fa72c4 100644
--- a/src/lib/bits/pagination/components/pagination-page.svelte
+++ b/src/lib/bits/pagination/components/pagination-page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createDispatcher } from "$lib/internal/events.js";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import { melt } from "@melt-ui/svelte";
 	import type { PageEvents, PageProps } from "../types.js";
 
@@ -12,7 +12,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { pageTrigger }
+		elements: { pageTrigger },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("page");
diff --git a/src/lib/bits/pagination/components/pagination-prev-button.svelte b/src/lib/bits/pagination/components/pagination-prev-button.svelte
index 202084b6e..6fd7756ca 100644
--- a/src/lib/bits/pagination/components/pagination-prev-button.svelte
+++ b/src/lib/bits/pagination/components/pagination-prev-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { PrevButtonEvents, PrevButtonProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import { melt } from "@melt-ui/svelte";
 
 	type $$Props = PrevButtonProps;
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { prevButton }
+		elements: { prevButton },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("prev-button");
diff --git a/src/lib/bits/pagination/components/pagination.svelte b/src/lib/bits/pagination/components/pagination.svelte
index 2c4d407ba..c5e2eba49 100644
--- a/src/lib/bits/pagination/components/pagination.svelte
+++ b/src/lib/bits/pagination/components/pagination.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, setCtx } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
@@ -15,7 +15,8 @@
 
 	const {
 		elements: { root },
-		states: { pages, range }
+		states: { pages, range },
+		getAttrs
 	} = setCtx({
 		count,
 		perPage,
diff --git a/src/lib/bits/pagination/ctx.ts b/src/lib/bits/pagination/ctx.ts
index 97b66cb1b..81e60e3e1 100644
--- a/src/lib/bits/pagination/ctx.ts
+++ b/src/lib/bits/pagination/ctx.ts
@@ -1,20 +1,24 @@
-import {
-	createPagination,
-	type CreatePaginationProps,
-	type Pagination as PaginationReturn
-} from "@melt-ui/svelte";
+import { createPagination, type CreatePaginationProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal";
 
-const NAME = "pagination";
-const PARTS = ["root", "prev-button", "next-button", "page"] as const;
+export function getPaginationData() {
+	const NAME = "pagination" as const;
+	const PARTS = ["root", "prev-button", "next-button", "page"] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = PaginationReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreatePaginationProps) {
-	const pagination = createPagination(removeUndefined(props));
+	const { NAME, PARTS } = getPaginationData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+
+	const pagination = { ...createPagination(removeUndefined(props)), getAttrs };
 	setContext(NAME, pagination);
 
 	return {
@@ -24,5 +28,6 @@ export function setCtx(props: CreatePaginationProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getPaginationData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/pin-input/components/pin-input-hidden-input.svelte b/src/lib/bits/pin-input/components/pin-input-hidden-input.svelte
index 2e32542bd..c289f3747 100644
--- a/src/lib/bits/pin-input/components/pin-input-hidden-input.svelte
+++ b/src/lib/bits/pin-input/components/pin-input-hidden-input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { HiddenInputProps } from "../types.js";
 
 	type $$Props = HiddenInputProps;
@@ -10,7 +10,8 @@
 
 	const {
 		elements: { hiddenInput },
-		options: { disabled }
+		options: { disabled },
+		getAttrs
 	} = getCtx();
 
 	$: attrs = {
diff --git a/src/lib/bits/pin-input/components/pin-input-input.svelte b/src/lib/bits/pin-input/components/pin-input-input.svelte
index 169605cc5..4d4bb5bfb 100644
--- a/src/lib/bits/pin-input/components/pin-input-input.svelte
+++ b/src/lib/bits/pin-input/components/pin-input-input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { InputEvents, InputProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { input }
+		elements: { input },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/pin-input/components/pin-input.svelte b/src/lib/bits/pin-input/components/pin-input.svelte
index 9270b3665..5b37f3487 100644
--- a/src/lib/bits/pin-input/components/pin-input.svelte
+++ b/src/lib/bits/pin-input/components/pin-input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 	import { derived } from "svelte/store";
 
@@ -20,7 +20,8 @@
 		elements: { root },
 		states: { value: localValue },
 		updateOption,
-		ids
+		ids,
+		getAttrs
 	} = setCtx({
 		placeholder,
 		defaultValue: value,
diff --git a/src/lib/bits/pin-input/ctx.ts b/src/lib/bits/pin-input/ctx.ts
index ce0398050..92fd52503 100644
--- a/src/lib/bits/pin-input/ctx.ts
+++ b/src/lib/bits/pin-input/ctx.ts
@@ -1,21 +1,24 @@
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-import {
-	createPinInput,
-	type PinInput as PinInputReturn,
-	type CreatePinInputProps as PinInputProps
-} from "@melt-ui/svelte";
+import { createPinInput, type CreatePinInputProps as PinInputProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 
-const NAME = "pin-input";
+export function getPinInputData() {
+	const NAME = "pin-input" as const;
+	const PARTS = ["root", "input", "hidden-input"] as const;
 
-const PARTS = ["root", "input", "hidden-input"] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = PinInputReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: PinInputProps) {
-	const pinInput = createPinInput(removeUndefined(props));
+	const { NAME, PARTS } = getPinInputData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+
+	const pinInput = { ...createPinInput(removeUndefined(props)), getAttrs };
 	setContext(NAME, pinInput);
 	return {
 		...pinInput,
@@ -24,5 +27,6 @@ export function setCtx(props: PinInputProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getPinInputData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/popover/components/popover-arrow.svelte b/src/lib/bits/popover/components/popover-arrow.svelte
index 70844b7f3..0b0e7f437 100644
--- a/src/lib/bits/popover/components/popover-arrow.svelte
+++ b/src/lib/bits/popover/components/popover-arrow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setArrow, getAttrs } from "../ctx.js";
+	import { setArrow } from "../ctx.js";
 	import { melt } from "@melt-ui/svelte";
 	import type { ArrowProps } from "../types.js";
 
@@ -10,7 +10,8 @@
 	export let size = 8;
 
 	const {
-		elements: { arrow }
+		elements: { arrow },
+		getAttrs
 	} = setArrow(size);
 
 	const attrs = getAttrs("arrow");
diff --git a/src/lib/bits/popover/components/popover-close.svelte b/src/lib/bits/popover/components/popover-close.svelte
index c9cffb0e8..c99432ccd 100644
--- a/src/lib/bits/popover/components/popover-close.svelte
+++ b/src/lib/bits/popover/components/popover-close.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CloseProps, CloseEvents } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { close }
+		elements: { close },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/popover/components/popover-content.svelte b/src/lib/bits/popover/components/popover-content.svelte
index 0839a5d08..050bd4a2a 100644
--- a/src/lib/bits/popover/components/popover-content.svelte
+++ b/src/lib/bits/popover/components/popover-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/index.js";
-	import { getCtx, getAttrs, updatePositioning } from "../ctx.js";
+	import { getCtx, updatePositioning } from "../ctx.js";
 	import type { ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -32,7 +32,8 @@
 	const {
 		elements: { content },
 		states: { open },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("content");
diff --git a/src/lib/bits/popover/components/popover-trigger.svelte b/src/lib/bits/popover/components/popover-trigger.svelte
index 9f27b18ad..1ec992c64 100644
--- a/src/lib/bits/popover/components/popover-trigger.svelte
+++ b/src/lib/bits/popover/components/popover-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -13,7 +13,8 @@
 
 	const {
 		elements: { trigger },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/popover/ctx.ts b/src/lib/bits/popover/ctx.ts
index 81a9d9ae7..863a98ea8 100644
--- a/src/lib/bits/popover/ctx.ts
+++ b/src/lib/bits/popover/ctx.ts
@@ -1,8 +1,4 @@
-import {
-	createPopover,
-	type CreatePopoverProps,
-	type Popover as PopoverReturn
-} from "@melt-ui/svelte";
+import { createPopover, type CreatePopoverProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 import { getPositioningUpdater } from "$lib/bits/floating/helpers.js";
@@ -10,18 +6,28 @@ import type { Writable } from "svelte/store";
 import type { FloatingConfig } from "$lib/bits/floating/floating-config.js";
 import type { FloatingProps } from "$lib/bits/floating/_types.js";
 
-const NAME = "popover";
-const PARTS = ["arrow", "close", "content", "trigger"] as const;
+export function getPopoverData() {
+	const NAME = "popover" as const;
+	const PARTS = ["arrow", "close", "content", "trigger"] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = PopoverReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreatePopoverProps) {
-	const popover = createPopover({
-		...removeUndefined(props),
-		forceVisible: true
-	});
+	const { NAME, PARTS } = getPopoverData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const popover = {
+		...createPopover({
+			...removeUndefined(props),
+			forceVisible: true
+		}),
+		getAttrs
+	};
 	setContext(NAME, popover);
 	return {
 		...popover,
@@ -30,6 +36,7 @@ export function setCtx(props: CreatePopoverProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getPopoverData();
 	return getContext<GetReturn>(NAME);
 }
 
@@ -39,12 +46,12 @@ export function setArrow(size = 8) {
 	return popover;
 }
 
-const defaultPlacement = {
-	side: "bottom",
-	align: "center"
-} satisfies FloatingProps;
-
 export function updatePositioning(props: FloatingProps) {
+	const defaultPlacement = {
+		side: "bottom",
+		align: "center"
+	} satisfies FloatingProps;
+
 	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
diff --git a/src/lib/bits/progress/components/progress.svelte b/src/lib/bits/progress/components/progress.svelte
index 2c9174a80..192707f0a 100644
--- a/src/lib/bits/progress/components/progress.svelte
+++ b/src/lib/bits/progress/components/progress.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
@@ -14,7 +14,8 @@
 	const {
 		elements: { root },
 		states: { value: localValue },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		max,
 		defaultValue: value,
diff --git a/src/lib/bits/progress/ctx.ts b/src/lib/bits/progress/ctx.ts
index 757ef67e5..ce2fc39ac 100644
--- a/src/lib/bits/progress/ctx.ts
+++ b/src/lib/bits/progress/ctx.ts
@@ -1,13 +1,20 @@
 import { createProgress, type CreateProgressProps } from "@melt-ui/svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 
-const NAME = "progress";
-const PARTS = ["root"] as const;
+function getProgressData() {
+	const NAME = "progress" as const;
+	const PARTS = ["root"] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		PARTS
+	};
+}
 
 export function setCtx(props: CreateProgressProps) {
-	const progress = createProgress(removeUndefined(props));
+	const { NAME, PARTS } = getProgressData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const progress = { ...createProgress(removeUndefined(props)), getAttrs };
 
 	return {
 		...progress,
diff --git a/src/lib/bits/radio-group/components/radio-group-input.svelte b/src/lib/bits/radio-group/components/radio-group-input.svelte
index f3d2c2c43..435bb8e1c 100644
--- a/src/lib/bits/radio-group/components/radio-group-input.svelte
+++ b/src/lib/bits/radio-group/components/radio-group-input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import type { InputProps } from "../types.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 
 	type $$Props = InputProps;
 
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { hiddenInput }
+		elements: { hiddenInput },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("input");
diff --git a/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte b/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
index 9f2d4803a..eb120f183 100644
--- a/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
+++ b/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getRadioIndicator, getAttrs } from "../ctx.js";
+	import { getRadioIndicator } from "../ctx.js";
 	import type { ItemIndicatorProps } from "../types.js";
 
 	type $$Props = ItemIndicatorProps;
@@ -7,7 +7,11 @@
 	export let asChild = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { isChecked, value } = getRadioIndicator();
+	const {
+		helpers: { isChecked },
+		value,
+		getAttrs
+	} = getRadioIndicator();
 
 	const attrs = getAttrs("item-indicator");
 	$: checked = $isChecked(value);
diff --git a/src/lib/bits/radio-group/components/radio-group-item.svelte b/src/lib/bits/radio-group/components/radio-group-item.svelte
index 50e6a5aee..e8d216a48 100644
--- a/src/lib/bits/radio-group/components/radio-group-item.svelte
+++ b/src/lib/bits/radio-group/components/radio-group-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setItemCtx, getAttrs } from "../ctx.js";
+	import { setItemCtx } from "../ctx.js";
 	import type { ItemEvents, ItemProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -13,7 +13,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { item }
+		elements: { item },
+		getAttrs
 	} = setItemCtx(value);
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/radio-group/components/radio-group.svelte b/src/lib/bits/radio-group/components/radio-group.svelte
index 223a5090d..9ae62038b 100644
--- a/src/lib/bits/radio-group/components/radio-group.svelte
+++ b/src/lib/bits/radio-group/components/radio-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
@@ -16,7 +16,8 @@
 	const {
 		elements: { root },
 		states: { value: localValue },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		required,
 		disabled,
diff --git a/src/lib/bits/radio-group/ctx.ts b/src/lib/bits/radio-group/ctx.ts
index 527545618..2c42581cd 100644
--- a/src/lib/bits/radio-group/ctx.ts
+++ b/src/lib/bits/radio-group/ctx.ts
@@ -1,23 +1,26 @@
 import { createBitAttrs, getOptionUpdater } from "$lib/internal/index.js";
-import {
-	createRadioGroup,
-	type CreateRadioGroupProps,
-	type RadioGroup as RadioGroupReturn
-} from "@melt-ui/svelte";
+import { createRadioGroup, type CreateRadioGroupProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined } from "$lib/internal/index.js";
-import type { Readable } from "svelte/store";
 
-const NAME = "radio-group";
-const ITEM_NAME = "radio-group-item";
-const PARTS = ["root", "item", "input", "item-indicator"] as const;
+function getRadioGroupData() {
+	const NAME = "radio-group" as const;
+	const ITEM_NAME = "radio-group-item";
+	const PARTS = ["root", "item", "input", "item-indicator"] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		ITEM_NAME,
+		PARTS
+	};
+}
 
-type GetReturn = RadioGroupReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateRadioGroupProps) {
-	const radioGroup = createRadioGroup(removeUndefined(props));
+	const { NAME, PARTS } = getRadioGroupData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const radioGroup = { ...createRadioGroup(removeUndefined(props)), getAttrs };
 	setContext(NAME, radioGroup);
 	return {
 		...radioGroup,
@@ -26,18 +29,19 @@ export function setCtx(props: CreateRadioGroupProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getRadioGroupData();
 	return getContext<GetReturn>(NAME);
 }
 
 export function setItemCtx(value: string) {
-	const radioGroup = getCtx();
-	setContext(ITEM_NAME, { value, isChecked: radioGroup.helpers.isChecked });
+	const { ITEM_NAME } = getRadioGroupData();
+	const radioGroup = { ...getCtx(), value };
+	setContext(ITEM_NAME, radioGroup);
 	return radioGroup;
 }
 
+type GetItemReturn = Omit<ReturnType<typeof setItemCtx>, "updateOption">;
 export function getRadioIndicator() {
-	return getContext<{
-		isChecked: Readable<(itemValue: string) => boolean>;
-		value: string;
-	}>(ITEM_NAME);
+	const { ITEM_NAME } = getRadioGroupData();
+	return getContext<GetItemReturn>(ITEM_NAME);
 }
diff --git a/src/lib/bits/range-calendar/components/range-calendar-cell.svelte b/src/lib/bits/range-calendar/components/range-calendar-cell.svelte
index 17964f0d8..941f3a75e 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-cell.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { CellProps } from "../types.js";
 
 	type $$Props = CellProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		helpers: { isDateDisabled, isDateUnavailable }
+		helpers: { isDateDisabled, isDateUnavailable },
+		getAttrs
 	} = getCtx();
 
 	$: attrs = {
diff --git a/src/lib/bits/range-calendar/components/range-calendar-day.svelte b/src/lib/bits/range-calendar/components/range-calendar-day.svelte
index 91c6d2bc8..433e4c6f4 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-day.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-day.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { DayEvents, DayProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -14,7 +14,8 @@
 
 	const {
 		elements: { cell },
-		helpers: { isDateDisabled, isDateUnavailable }
+		helpers: { isDateDisabled, isDateUnavailable },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("day");
diff --git a/src/lib/bits/range-calendar/components/range-calendar-grid-body.svelte b/src/lib/bits/range-calendar/components/range-calendar-grid-body.svelte
index ce5ed7496..4188bcf34 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-grid-body.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-grid-body.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { GridBodyProps } from "../types.js";
 
 	type $$Props = GridBodyProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
+	const { getAttrs } = getCtx();
+
 	const attrs = getAttrs("grid-body");
 </script>
 
diff --git a/src/lib/bits/range-calendar/components/range-calendar-grid-head.svelte b/src/lib/bits/range-calendar/components/range-calendar-grid-head.svelte
index 908454a70..819d14a43 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-grid-head.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-grid-head.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { GridHeadProps } from "../types.js";
 
 	type $$Props = GridHeadProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
+	const { getAttrs } = getCtx();
 
 	const attrs = { ...getAttrs("grid-head"), "aria-hidden": true };
 </script>
diff --git a/src/lib/bits/range-calendar/components/range-calendar-grid-row.svelte b/src/lib/bits/range-calendar/components/range-calendar-grid-row.svelte
index 2df2ef4ff..b991e62fd 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-grid-row.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-grid-row.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { GridRowProps } from "../types.js";
 
 	type $$Props = GridRowProps;
 
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
+	const { getAttrs } = getCtx();
 
 	const attrs = getAttrs("grid-row");
 </script>
diff --git a/src/lib/bits/range-calendar/components/range-calendar-grid.svelte b/src/lib/bits/range-calendar/components/range-calendar-grid.svelte
index 3a6cd10c5..a67b6c2c6 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-grid.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-grid.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { GridProps } from "../types.js";
 
 	type $$Props = GridProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { grid }
+		elements: { grid },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("grid");
diff --git a/src/lib/bits/range-calendar/components/range-calendar-head-cell.svelte b/src/lib/bits/range-calendar/components/range-calendar-head-cell.svelte
index 54483c33a..abfeb2f4a 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-head-cell.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-head-cell.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { HeadCellProps } from "../types.js";
 
 	type $$Props = HeadCellProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
+	const { getAttrs } = getCtx();
+
 	const attrs = getAttrs("head-cell");
 </script>
 
diff --git a/src/lib/bits/range-calendar/components/range-calendar-header.svelte b/src/lib/bits/range-calendar/components/range-calendar-header.svelte
index b2462b943..92ad4808b 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-header.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-header.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { HeaderProps } from "../types.js";
 
 	type $$Props = HeaderProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
+	const { getAttrs } = getCtx();
+
 	const attrs = getAttrs("header");
 </script>
 
diff --git a/src/lib/bits/range-calendar/components/range-calendar-heading.svelte b/src/lib/bits/range-calendar/components/range-calendar-heading.svelte
index 6c4d69249..27d3a77a8 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-heading.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { HeadingProps } from "../types.js";
 
 	type $$Props = HeadingProps;
@@ -10,7 +10,8 @@
 
 	const {
 		elements: { heading },
-		states: { headingValue }
+		states: { headingValue },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("heading");
diff --git a/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte b/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
index bfd207d0e..22d045cbd 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { NextButtonEvents, NextButtonProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { nextButton }
+		elements: { nextButton },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("next-button");
diff --git a/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte b/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
index 9035f3a69..080364af2 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { PrevButtonEvents, PrevButtonProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { prevButton }
+		elements: { prevButton },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("prev-button");
diff --git a/src/lib/bits/range-calendar/components/range-calendar.svelte b/src/lib/bits/range-calendar/components/range-calendar.svelte
index 77200551a..cc13ceb1f 100644
--- a/src/lib/bits/range-calendar/components/range-calendar.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt, type Month } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Events, Props } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 	import { onMount } from "svelte";
@@ -50,7 +50,8 @@
 			endValue
 		},
 		updateOption,
-		ids
+		ids,
+		getAttrs
 	} = setCtx({
 		defaultPlaceholder: placeholder,
 		defaultValue: value,
diff --git a/src/lib/bits/range-calendar/ctx.ts b/src/lib/bits/range-calendar/ctx.ts
index 2d4dd9838..4fdbae6ed 100644
--- a/src/lib/bits/range-calendar/ctx.ts
+++ b/src/lib/bits/range-calendar/ctx.ts
@@ -1,33 +1,33 @@
-import {
-	type RangeCalendar as RangeCalendarReturn,
-	type CreateRangeCalendarProps,
-	createRangeCalendar
-} from "@melt-ui/svelte";
+import { type CreateRangeCalendarProps, createRangeCalendar } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
 
-const NAME = "calendar";
-const PARTS = [
-	"root",
-	"prev-button",
-	"next-button",
-	"heading",
-	"grid",
-	"day",
-	"header",
-	"grid-head",
-	"head-cell",
-	"grid-body",
-	"cell",
-	"grid-row"
-] as const;
+function getRangeCalendarData() {
+	const NAME = "calendar" as const;
+	const PARTS = [
+		"root",
+		"prev-button",
+		"next-button",
+		"heading",
+		"grid",
+		"day",
+		"header",
+		"grid-head",
+		"head-cell",
+		"grid-body",
+		"cell",
+		"grid-row"
+	] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return { NAME, PARTS };
+}
 
-type GetReturn = RangeCalendarReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateRangeCalendarProps) {
-	const rangeCalendar = createRangeCalendar(removeUndefined(props));
+	const { NAME, PARTS } = getRangeCalendarData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const rangeCalendar = { ...createRangeCalendar(removeUndefined(props)), getAttrs };
 	setContext(NAME, rangeCalendar);
 	return {
 		...rangeCalendar,
@@ -36,5 +36,6 @@ export function setCtx(props: CreateRangeCalendarProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getRangeCalendarData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/select/components/select-arrow.svelte b/src/lib/bits/select/components/select-arrow.svelte
index d0ea393f0..d8f21f01a 100644
--- a/src/lib/bits/select/components/select-arrow.svelte
+++ b/src/lib/bits/select/components/select-arrow.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setArrow, getAttrs } from "../ctx.js";
+	import { setArrow } from "../ctx.js";
 	import type { ArrowProps } from "../types.js";
 
 	type $$Props = ArrowProps;
@@ -10,7 +10,8 @@
 	export let size = 8;
 
 	const {
-		elements: { arrow }
+		elements: { arrow },
+		getAttrs
 	} = setArrow(size);
 
 	const attrs = getAttrs("arrow");
diff --git a/src/lib/bits/select/components/select-content.svelte b/src/lib/bits/select/components/select-content.svelte
index fe8b298f2..0d1b30087 100644
--- a/src/lib/bits/select/components/select-content.svelte
+++ b/src/lib/bits/select/components/select-content.svelte
@@ -3,7 +3,7 @@
 
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/types.js";
-	import { getCtx, getAttrs, updatePositioning } from "../ctx.js";
+	import { getCtx, updatePositioning } from "../ctx.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -34,7 +34,8 @@
 	const {
 		elements: { menu },
 		states: { open },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/select/components/select-group.svelte b/src/lib/bits/select/components/select-group.svelte
index 86c882b61..dce01be8e 100644
--- a/src/lib/bits/select/components/select-group.svelte
+++ b/src/lib/bits/select/components/select-group.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setGroupCtx, getAttrs } from "../ctx.js";
+	import { setGroupCtx } from "../ctx.js";
 	import type { GroupProps } from "../types.js";
 
 	type $$Props = GroupProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { group, id } = setGroupCtx();
+	const { group, id, getAttrs } = setGroupCtx();
 	const attrs = getAttrs("group");
 
 	$: builder = $group(id);
diff --git a/src/lib/bits/select/components/select-input.svelte b/src/lib/bits/select/components/select-input.svelte
index 4f0835585..c5d1da6fa 100644
--- a/src/lib/bits/select/components/select-input.svelte
+++ b/src/lib/bits/select/components/select-input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { InputProps } from "../types.js";
 
 	type $$Props = InputProps;
@@ -10,7 +10,8 @@
 
 	const {
 		elements: { hiddenInput },
-		options: { disabled }
+		options: { disabled },
+		getAttrs
 	} = getCtx();
 
 	$: attrs = {
diff --git a/src/lib/bits/select/components/select-item-indicator.svelte b/src/lib/bits/select/components/select-item-indicator.svelte
index 857fab4e8..6752dcb7a 100644
--- a/src/lib/bits/select/components/select-item-indicator.svelte
+++ b/src/lib/bits/select/components/select-item-indicator.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getAttrs, getItemIndicator } from "../ctx.js";
+	import { getItemIndicator } from "../ctx.js";
 	import type { IndicatorProps } from "../types.js";
 
 	type $$Props = IndicatorProps;
@@ -7,7 +7,7 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { isSelected, value } = getItemIndicator();
+	const { isSelected, value, getAttrs } = getItemIndicator();
 	const attrs = getAttrs("indicator");
 </script>
 
diff --git a/src/lib/bits/select/components/select-item.svelte b/src/lib/bits/select/components/select-item.svelte
index ad4297972..b070df732 100644
--- a/src/lib/bits/select/components/select-item.svelte
+++ b/src/lib/bits/select/components/select-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setItemCtx, getAttrs } from "../ctx.js";
+	import { setItemCtx } from "../ctx.js";
 	import type { ItemEvents, ItemProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -14,7 +14,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { option: item }
+		elements: { option: item },
+		getAttrs
 	} = setItemCtx(value);
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/select/components/select-label.svelte b/src/lib/bits/select/components/select-label.svelte
index d98568676..13fb6c402 100644
--- a/src/lib/bits/select/components/select-label.svelte
+++ b/src/lib/bits/select/components/select-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getGroupLabel, getAttrs, getCtx } from "../ctx.js";
+	import { getGroupLabel, getCtx } from "../ctx.js";
 	import type { LabelEvents, LabelProps } from "../types.js";
 
 	type $$Props = LabelProps;
@@ -10,7 +10,7 @@
 	export let id: $$Props["id"] = undefined;
 	export let el: $$Props["el"] = undefined;
 
-	const { ids } = getCtx();
+	const { ids, getAttrs } = getCtx();
 	const { groupLabel, id: groupId } = getGroupLabel();
 	const attrs = getAttrs("label");
 
diff --git a/src/lib/bits/select/components/select-trigger.svelte b/src/lib/bits/select/components/select-trigger.svelte
index 9f27b18ad..1ec992c64 100644
--- a/src/lib/bits/select/components/select-trigger.svelte
+++ b/src/lib/bits/select/components/select-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -13,7 +13,8 @@
 
 	const {
 		elements: { trigger },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/select/components/select-value.svelte b/src/lib/bits/select/components/select-value.svelte
index 9deb3ac6d..319cbd26c 100644
--- a/src/lib/bits/select/components/select-value.svelte
+++ b/src/lib/bits/select/components/select-value.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ValueProps } from "../types.js";
 
 	type $$Props = ValueProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		states: { selectedLabel }
+		states: { selectedLabel },
+		getAttrs
 	} = getCtx();
 	const attrs = getAttrs("value");
 
diff --git a/src/lib/bits/select/ctx.ts b/src/lib/bits/select/ctx.ts
index e157ec66f..a97f70c3a 100644
--- a/src/lib/bits/select/ctx.ts
+++ b/src/lib/bits/select/ctx.ts
@@ -1,4 +1,4 @@
-import { type CreateSelectProps, type Select as SelectReturn, createSelect } from "@melt-ui/svelte";
+import { type CreateSelectProps, createSelect } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import {
 	createBitAttrs,
@@ -11,27 +11,35 @@ import type { Writable } from "svelte/store";
 import type { FloatingConfig } from "../floating/floating-config.js";
 import type { FloatingProps } from "../floating/_types.js";
 
-const NAME = "select";
-const GROUP_NAME = "select-group";
-const ITEM_NAME = "select-item";
+function getSelectData() {
+	const NAME = "select" as const;
+	const GROUP_NAME = "select-group";
+	const ITEM_NAME = "select-item";
+
+	const PARTS = [
+		"arrow",
+		"content",
+		"group",
+		"item",
+		"indicator",
+		"input",
+		"label",
+		"trigger",
+		"value"
+	] as const;
 
-const PARTS = [
-	"arrow",
-	"content",
-	"group",
-	"item",
-	"indicator",
-	"input",
-	"label",
-	"trigger",
-	"value"
-] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		GROUP_NAME,
+		ITEM_NAME,
+		PARTS
+	};
+}
 
-type GetReturn = SelectReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function getCtx() {
+	const { NAME } = getSelectData();
 	return getContext<GetReturn>(NAME);
 }
 
@@ -48,7 +56,10 @@ export function setCtx<T = unknown, M extends boolean = false>(
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	props: Props<T, M>
 ) {
-	const select = createSelect<T, M>(removeUndefined(props));
+	const { NAME, PARTS } = getSelectData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+
+	const select = { ...createSelect<T, M>(removeUndefined(props)), getAttrs };
 	setContext(NAME, select);
 	return {
 		...select,
@@ -57,36 +68,44 @@ export function setCtx<T = unknown, M extends boolean = false>(
 }
 
 export function setGroupCtx() {
+	const { GROUP_NAME } = getSelectData();
 	const id = generateId();
 	setContext(GROUP_NAME, id);
 	const {
-		elements: { group }
+		elements: { group },
+		getAttrs
 	} = getCtx();
-	return { group, id };
+	return { group, id, getAttrs };
 }
 
 export function setItemCtx(value: unknown) {
+	const { ITEM_NAME } = getSelectData();
 	const select = getCtx();
 	setContext(ITEM_NAME, value);
 	return select;
 }
 
 export function getGroupLabel() {
+	const { GROUP_NAME } = getSelectData();
 	const id = getContext<string>(GROUP_NAME);
 	const {
-		elements: { groupLabel }
+		elements: { groupLabel },
+		getAttrs
 	} = getCtx();
-	return { groupLabel, id };
+	return { groupLabel, id, getAttrs };
 }
 
 export function getItemIndicator() {
+	const { ITEM_NAME } = getSelectData();
 	const {
-		helpers: { isSelected }
+		helpers: { isSelected },
+		getAttrs
 	} = getCtx();
 	const value = getContext<unknown>(ITEM_NAME);
 	return {
 		value,
-		isSelected
+		isSelected,
+		getAttrs
 	};
 }
 
@@ -96,13 +115,12 @@ export function setArrow(size = 8) {
 	return select;
 }
 
-const defaultPlacement = {
-	side: "bottom",
-	align: "center",
-	sameWidth: true
-} satisfies FloatingProps;
-
 export function updatePositioning(props: FloatingProps) {
+	const defaultPlacement = {
+		side: "bottom",
+		align: "center",
+		sameWidth: true
+	} satisfies FloatingProps;
 	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
diff --git a/src/lib/bits/separator/components/separator.svelte b/src/lib/bits/separator/components/separator.svelte
index 7f42a19fc..01ffb4125 100644
--- a/src/lib/bits/separator/components/separator.svelte
+++ b/src/lib/bits/separator/components/separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
@@ -12,7 +12,8 @@
 
 	const {
 		elements: { root },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({ orientation, decorative });
 
 	const attrs = getAttrs("root");
diff --git a/src/lib/bits/separator/ctx.ts b/src/lib/bits/separator/ctx.ts
index 42a0e7d09..a45413616 100644
--- a/src/lib/bits/separator/ctx.ts
+++ b/src/lib/bits/separator/ctx.ts
@@ -1,13 +1,19 @@
 import { createSeparator, type CreateSeparatorProps } from "@melt-ui/svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 
-const NAME = "separator";
-const PARTS = ["root"] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getSeparatorData() {
+	const NAME = "separator" as const;
+	const PARTS = ["root"] as const;
+	return {
+		NAME,
+		PARTS
+	};
+}
 
 export function setCtx(props: CreateSeparatorProps) {
-	const separator = createSeparator(removeUndefined(props));
+	const { NAME, PARTS } = getSeparatorData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const separator = { ...createSeparator(removeUndefined(props)), getAttrs };
 	return {
 		...separator,
 		updateOption: getOptionUpdater(separator.options)
diff --git a/src/lib/bits/slider/components/slider-input.svelte b/src/lib/bits/slider/components/slider-input.svelte
index 300c74bab..73fb030ef 100644
--- a/src/lib/bits/slider/components/slider-input.svelte
+++ b/src/lib/bits/slider/components/slider-input.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { InputProps } from "../types.js";
 	import { srOnlyStyles } from "$lib/internal/style.js";
 
@@ -7,7 +7,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		states: { value }
+		states: { value },
+		getAttrs
 	} = getCtx();
 
 	function getValue(value: number[]) {
diff --git a/src/lib/bits/slider/components/slider-range.svelte b/src/lib/bits/slider/components/slider-range.svelte
index ddac24529..96abbf9f1 100644
--- a/src/lib/bits/slider/components/slider-range.svelte
+++ b/src/lib/bits/slider/components/slider-range.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { RangeProps } from "../types.js";
 
 	type $$Props = RangeProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { range }
+		elements: { range },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("range");
diff --git a/src/lib/bits/slider/components/slider-thumb.svelte b/src/lib/bits/slider/components/slider-thumb.svelte
index 8d22b254e..a0dae1c52 100644
--- a/src/lib/bits/slider/components/slider-thumb.svelte
+++ b/src/lib/bits/slider/components/slider-thumb.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ThumbEvents, ThumbProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { thumb }
+		elements: { thumb },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/slider/components/slider-tick.svelte b/src/lib/bits/slider/components/slider-tick.svelte
index bd320fc97..aed985b45 100644
--- a/src/lib/bits/slider/components/slider-tick.svelte
+++ b/src/lib/bits/slider/components/slider-tick.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TickProps } from "../types.js";
 
 	type $$Props = TickProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { tick }
+		elements: { tick },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("tick");
diff --git a/src/lib/bits/slider/components/slider.svelte b/src/lib/bits/slider/components/slider.svelte
index ff0b8c480..63eaec6ad 100644
--- a/src/lib/bits/slider/components/slider.svelte
+++ b/src/lib/bits/slider/components/slider.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
@@ -18,7 +18,8 @@
 	const {
 		elements: { root },
 		states: { value: localValue, ticks },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		disabled,
 		min,
diff --git a/src/lib/bits/slider/ctx.ts b/src/lib/bits/slider/ctx.ts
index 32905e89c..07a174613 100644
--- a/src/lib/bits/slider/ctx.ts
+++ b/src/lib/bits/slider/ctx.ts
@@ -1,16 +1,23 @@
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-import { createSlider, type CreateSliderProps, type Slider as SliderReturn } from "@melt-ui/svelte";
+import { createSlider, type CreateSliderProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 
-const NAME = "slider";
-const PARTS = ["root", "input", "range", "thumb", "tick"] as const;
+function getSliderData() {
+	const NAME = "slider" as const;
+	const PARTS = ["root", "input", "range", "thumb", "tick"] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = SliderReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateSliderProps) {
-	const slider = createSlider(removeUndefined(props));
+	const { NAME, PARTS } = getSliderData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const slider = { ...createSlider(removeUndefined(props)), getAttrs };
 	setContext(NAME, slider);
 	return {
 		...slider,
@@ -19,5 +26,6 @@ export function setCtx(props: CreateSliderProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getSliderData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/switch/components/switch-thumb.svelte b/src/lib/bits/switch/components/switch-thumb.svelte
index 784ae3c6a..f67b02c2c 100644
--- a/src/lib/bits/switch/components/switch-thumb.svelte
+++ b/src/lib/bits/switch/components/switch-thumb.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ThumbProps } from "../types.js";
 
 	type $$Props = ThumbProps;
@@ -8,7 +8,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		states: { checked }
+		states: { checked },
+		getAttrs
 	} = getCtx();
 
 	$: attrs = {
diff --git a/src/lib/bits/switch/components/switch.svelte b/src/lib/bits/switch/components/switch.svelte
index 37f0c5bed..180041485 100644
--- a/src/lib/bits/switch/components/switch.svelte
+++ b/src/lib/bits/switch/components/switch.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Events, Props } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 	import SwitchInput from "./switch-input.svelte";
@@ -21,7 +21,8 @@
 	const {
 		elements: { root },
 		states: { checked: localChecked },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		disabled,
 		name,
diff --git a/src/lib/bits/switch/ctx.ts b/src/lib/bits/switch/ctx.ts
index b212b29ed..dfcf43084 100644
--- a/src/lib/bits/switch/ctx.ts
+++ b/src/lib/bits/switch/ctx.ts
@@ -1,16 +1,22 @@
-import { createSwitch, type CreateSwitchProps, type Switch as SwitchReturn } from "@melt-ui/svelte";
+import { createSwitch, type CreateSwitchProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 
-const NAME = "switch";
-const PARTS = ["root", "input", "thumb"] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getSwitchData() {
+	const NAME = "switch" as const;
+	const PARTS = ["root", "input", "thumb"] as const;
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = SwitchReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateSwitchProps) {
-	const Switch = createSwitch(removeUndefined(props));
+	const { NAME, PARTS } = getSwitchData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const Switch = { ...createSwitch(removeUndefined(props)), getAttrs };
 	setContext(NAME, Switch);
 	return {
 		...Switch,
@@ -19,5 +25,6 @@ export function setCtx(props: CreateSwitchProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getSwitchData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/tabs/components/tabs-content.svelte b/src/lib/bits/tabs/components/tabs-content.svelte
index c3846aacf..2b483af4f 100644
--- a/src/lib/bits/tabs/components/tabs-content.svelte
+++ b/src/lib/bits/tabs/components/tabs-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ContentProps } from "../types.js";
 
 	type $$Props = ContentProps;
@@ -10,7 +10,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { content }
+		elements: { content },
+		getAttrs
 	} = getCtx();
 	const attrs = getAttrs("content");
 
diff --git a/src/lib/bits/tabs/components/tabs-list.svelte b/src/lib/bits/tabs/components/tabs-list.svelte
index 280e722c0..f56955137 100644
--- a/src/lib/bits/tabs/components/tabs-list.svelte
+++ b/src/lib/bits/tabs/components/tabs-list.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ListProps } from "../types.js";
 
 	type $$Props = ListProps;
@@ -9,7 +9,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { list }
+		elements: { list },
+		getAttrs
 	} = getCtx();
 
 	const attrs = getAttrs("list");
diff --git a/src/lib/bits/tabs/components/tabs-trigger.svelte b/src/lib/bits/tabs/components/tabs-trigger.svelte
index 58a1a2e3f..179bf94cb 100644
--- a/src/lib/bits/tabs/components/tabs-trigger.svelte
+++ b/src/lib/bits/tabs/components/tabs-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -13,7 +13,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { trigger }
+		elements: { trigger },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/tabs/components/tabs.svelte b/src/lib/bits/tabs/components/tabs.svelte
index 1c50371ba..374ebcf82 100644
--- a/src/lib/bits/tabs/components/tabs.svelte
+++ b/src/lib/bits/tabs/components/tabs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
@@ -16,7 +16,8 @@
 	const {
 		elements: { root },
 		states: { value: localValue },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		orientation,
 		activateOnFocus,
diff --git a/src/lib/bits/tabs/ctx.ts b/src/lib/bits/tabs/ctx.ts
index b2d8b5c9c..706443729 100644
--- a/src/lib/bits/tabs/ctx.ts
+++ b/src/lib/bits/tabs/ctx.ts
@@ -1,16 +1,22 @@
-import { createTabs, type CreateTabsProps, type Tabs as TabsReturn } from "@melt-ui/svelte";
+import { createTabs, type CreateTabsProps } from "@melt-ui/svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 import { getContext, setContext } from "svelte";
 
-const NAME = "tabs";
-const PARTS = ["root", "content", "list", "trigger"] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getTabsData() {
+	const NAME = "tabs" as const;
+	const PARTS = ["root", "content", "list", "trigger"] as const;
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = TabsReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateTabsProps) {
-	const tabs = createTabs(removeUndefined(props));
+	const { NAME, PARTS } = getTabsData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const tabs = { ...createTabs(removeUndefined(props)), getAttrs };
 	setContext(NAME, tabs);
 	return {
 		...tabs,
@@ -19,5 +25,6 @@ export function setCtx(props: CreateTabsProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getTabsData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/toggle-group/components/toggle-group-item.svelte b/src/lib/bits/toggle-group/components/toggle-group-item.svelte
index b5fe7d3a9..52cf1fe67 100644
--- a/src/lib/bits/toggle-group/components/toggle-group-item.svelte
+++ b/src/lib/bits/toggle-group/components/toggle-group-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ItemProps, ItemEvents } from "../types.js";
 	import { createDispatcher } from "$lib/internal";
 
@@ -13,7 +13,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { item }
+		elements: { item },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/toggle-group/components/toggle-group.svelte b/src/lib/bits/toggle-group/components/toggle-group.svelte
index faeb81257..90be30528 100644
--- a/src/lib/bits/toggle-group/components/toggle-group.svelte
+++ b/src/lib/bits/toggle-group/components/toggle-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type T = $$Generic<"single" | "multiple">;
@@ -18,7 +18,8 @@
 	const {
 		elements: { root },
 		states: { value: localValue },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx<T>({
 		disabled,
 		type,
diff --git a/src/lib/bits/toggle-group/ctx.ts b/src/lib/bits/toggle-group/ctx.ts
index 08f85d37f..a6d8fba12 100644
--- a/src/lib/bits/toggle-group/ctx.ts
+++ b/src/lib/bits/toggle-group/ctx.ts
@@ -1,20 +1,23 @@
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-import {
-	createToggleGroup,
-	type CreateToggleGroupProps,
-	type ToggleGroup as ToggleGroupReturn
-} from "@melt-ui/svelte";
+import { createToggleGroup, type CreateToggleGroupProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 
-const NAME = "toggle-group";
-const PARTS = ["root", "item"] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getToggleGroupData() {
+	const NAME = "toggle-group" as const;
+	const PARTS = ["root", "item"] as const;
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = ToggleGroupReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx<T extends "single" | "multiple">(props: CreateToggleGroupProps<T>) {
-	const toggleGroup = createToggleGroup(removeUndefined(props));
+	const { NAME, PARTS } = getToggleGroupData();
+
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const toggleGroup = { ...createToggleGroup(removeUndefined(props)), getAttrs };
 	setContext(NAME, toggleGroup);
 	return {
 		...toggleGroup,
@@ -23,5 +26,6 @@ export function setCtx<T extends "single" | "multiple">(props: CreateToggleGroup
 }
 
 export function getCtx() {
+	const { NAME } = getToggleGroupData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/toggle/components/toggle.svelte b/src/lib/bits/toggle/components/toggle.svelte
index 7475ead4c..93fda3bab 100644
--- a/src/lib/bits/toggle/components/toggle.svelte
+++ b/src/lib/bits/toggle/components/toggle.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Events, Props } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -16,7 +16,8 @@
 	const {
 		elements: { root },
 		states: { pressed: localPressed },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		disabled,
 		defaultPressed: pressed,
diff --git a/src/lib/bits/toggle/ctx.ts b/src/lib/bits/toggle/ctx.ts
index 13fee80c6..791e68374 100644
--- a/src/lib/bits/toggle/ctx.ts
+++ b/src/lib/bits/toggle/ctx.ts
@@ -1,16 +1,22 @@
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-import { createToggle, type CreateToggleProps, type Toggle as ToggleReturn } from "@melt-ui/svelte";
+import { createToggle, type CreateToggleProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 
-const NAME = "toggle";
-const PARTS = ["root", "input"] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getToggleData() {
+	const NAME = "toggle" as const;
+	const PARTS = ["root", "input"] as const;
+	return {
+		NAME,
+		PARTS
+	};
+}
 
-type GetReturn = ToggleReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx(props: CreateToggleProps) {
-	const toggle = createToggle(removeUndefined(props));
+	const { NAME, PARTS } = getToggleData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const toggle = { ...createToggle(removeUndefined(props)), getAttrs };
 	setContext(NAME, toggle);
 	return {
 		...toggle,
@@ -19,5 +25,6 @@ export function setCtx(props: CreateToggleProps) {
 }
 
 export function getCtx() {
+	const { NAME } = getToggleData();
 	return getContext<GetReturn>(NAME);
 }
diff --git a/src/lib/bits/toolbar/components/toolbar-button.svelte b/src/lib/bits/toolbar/components/toolbar-button.svelte
index b3d1dc51c..c07bc6866 100644
--- a/src/lib/bits/toolbar/components/toolbar-button.svelte
+++ b/src/lib/bits/toolbar/components/toolbar-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { ButtonEvents, ButtonProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { button }
+		elements: { button },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/toolbar/components/toolbar-group-item.svelte b/src/lib/bits/toolbar/components/toolbar-group-item.svelte
index 311427229..3b7ffc1c9 100644
--- a/src/lib/bits/toolbar/components/toolbar-group-item.svelte
+++ b/src/lib/bits/toolbar/components/toolbar-group-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getGroupCtx, getAttrs } from "../ctx.js";
+	import { getGroupCtx } from "../ctx.js";
 	import type { GroupItemProps, GroupItemEvents } from "../types.js";
 	import { createDispatcher, disabledAttrs } from "$lib/internal/index.js";
 
@@ -13,7 +13,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { item }
+		elements: { item },
+		getAttrs
 	} = getGroupCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/toolbar/components/toolbar-group.svelte b/src/lib/bits/toolbar/components/toolbar-group.svelte
index 637bcde6c..c05446021 100644
--- a/src/lib/bits/toolbar/components/toolbar-group.svelte
+++ b/src/lib/bits/toolbar/components/toolbar-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setGroupCtx, getAttrs } from "../ctx.js";
+	import { setGroupCtx } from "../ctx.js";
 	import type { GroupProps } from "../types.js";
 
 	type T = $$Generic<"single" | "multiple">;
@@ -16,7 +16,8 @@
 	const {
 		elements: { group },
 		states: { value: localValue },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setGroupCtx<T>({
 		disabled,
 		type,
diff --git a/src/lib/bits/toolbar/components/toolbar-link.svelte b/src/lib/bits/toolbar/components/toolbar-link.svelte
index 2743de7a6..26ff0a642 100644
--- a/src/lib/bits/toolbar/components/toolbar-link.svelte
+++ b/src/lib/bits/toolbar/components/toolbar-link.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { LinkEvents, LinkProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
@@ -11,7 +11,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { link }
+		elements: { link },
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/toolbar/components/toolbar.svelte b/src/lib/bits/toolbar/components/toolbar.svelte
index ceb670070..4b96dd908 100644
--- a/src/lib/bits/toolbar/components/toolbar.svelte
+++ b/src/lib/bits/toolbar/components/toolbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
@@ -12,7 +12,8 @@
 
 	const {
 		elements: { root },
-		updateOption
+		updateOption,
+		getAttrs
 	} = setCtx({
 		loop,
 		orientation
diff --git a/src/lib/bits/toolbar/ctx.ts b/src/lib/bits/toolbar/ctx.ts
index e0df73e90..7f94d49e2 100644
--- a/src/lib/bits/toolbar/ctx.ts
+++ b/src/lib/bits/toolbar/ctx.ts
@@ -1,25 +1,29 @@
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 import {
 	createToolbar,
-	type Toolbar as ToolbarReturn,
-	type ToolbarGroup as ToolbarGroupReturn,
 	type CreateToolbarProps as ToolbarProps,
 	type CreateToolbarGroupProps as ToolbarGroupProps
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 
-const NAME = "toolbar";
-const GROUP_NAME = "toolbar-group";
-
-const PARTS = ["root", "button", "link", "group", "group-item"] as const;
-
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getToolbarData() {
+	const NAME = "toolbar" as const;
+	const GROUP_NAME = "toolbar-group";
+	const PARTS = ["root", "button", "link", "group", "group-item"] as const;
+	return {
+		NAME,
+		GROUP_NAME,
+		PARTS
+	};
+}
 
-type GetReturn = ToolbarReturn;
-type GetGroupReturn = ToolbarGroupReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
+type GetGroupReturn = Omit<ReturnType<typeof setGroupCtx>, "updateOption">;
 
 export function setCtx(props: ToolbarProps) {
-	const toolbar = createToolbar(removeUndefined(props));
+	const { NAME, PARTS } = getToolbarData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const toolbar = { ...createToolbar(removeUndefined(props)), getAttrs };
 	setContext(NAME, toolbar);
 	return {
 		...toolbar,
@@ -29,9 +33,11 @@ export function setCtx(props: ToolbarProps) {
 
 export function setGroupCtx<T extends "single" | "multiple">(props: ToolbarGroupProps<T>) {
 	const {
-		builders: { createToolbarGroup }
+		builders: { createToolbarGroup },
+		getAttrs
 	} = getCtx();
-	const group = createToolbarGroup(removeUndefined(props));
+	const group = { ...createToolbarGroup(removeUndefined(props)), getAttrs };
+	const { GROUP_NAME } = getToolbarData();
 	setContext(GROUP_NAME, group);
 	return {
 		...group,
@@ -40,9 +46,11 @@ export function setGroupCtx<T extends "single" | "multiple">(props: ToolbarGroup
 }
 
 export function getCtx() {
+	const { NAME } = getToolbarData();
 	return getContext<GetReturn>(NAME);
 }
 
 export function getGroupCtx() {
+	const { GROUP_NAME } = getToolbarData();
 	return getContext<GetGroupReturn>(GROUP_NAME);
 }
diff --git a/src/lib/bits/tooltip/components/tooltip-arrow.svelte b/src/lib/bits/tooltip/components/tooltip-arrow.svelte
index 2490d0619..050bd4097 100644
--- a/src/lib/bits/tooltip/components/tooltip-arrow.svelte
+++ b/src/lib/bits/tooltip/components/tooltip-arrow.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setArrow, getAttrs } from "../ctx.js";
+	import { setArrow } from "../ctx.js";
 	import type { ArrowProps } from "../types.js";
 
 	type $$Props = ArrowProps;
@@ -10,7 +10,8 @@
 	export let el: $$Props["el"] = undefined;
 
 	const {
-		elements: { arrow }
+		elements: { arrow },
+		getAttrs
 	} = setArrow(size);
 
 	const attrs = getAttrs("arrow");
diff --git a/src/lib/bits/tooltip/components/tooltip-content.svelte b/src/lib/bits/tooltip/components/tooltip-content.svelte
index f5083b76a..216742106 100644
--- a/src/lib/bits/tooltip/components/tooltip-content.svelte
+++ b/src/lib/bits/tooltip/components/tooltip-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { createDispatcher, type Transition } from "$lib/internal/index.js";
-	import { getCtx, getAttrs, updatePositioning } from "../ctx.js";
+	import { getCtx, updatePositioning } from "../ctx.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -35,7 +35,8 @@
 	const {
 		elements: { content },
 		states: { open },
-		ids
+		ids,
+		getAttrs
 	} = getCtx(sideOffset);
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/tooltip/components/tooltip-trigger.svelte b/src/lib/bits/tooltip/components/tooltip-trigger.svelte
index 38eb3c47b..74f5b0875 100644
--- a/src/lib/bits/tooltip/components/tooltip-trigger.svelte
+++ b/src/lib/bits/tooltip/components/tooltip-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { createDispatcher } from "$lib/internal/index.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 
 	type $$Props = TriggerProps;
@@ -13,7 +13,8 @@
 
 	const {
 		elements: { trigger },
-		ids
+		ids,
+		getAttrs
 	} = getCtx();
 
 	const dispatch = createDispatcher();
diff --git a/src/lib/bits/tooltip/ctx.ts b/src/lib/bits/tooltip/ctx.ts
index 9c5898841..ff86f2437 100644
--- a/src/lib/bits/tooltip/ctx.ts
+++ b/src/lib/bits/tooltip/ctx.ts
@@ -1,8 +1,4 @@
-import {
-	createTooltip,
-	type Tooltip as TooltipReturn,
-	type CreateTooltipProps
-} from "@melt-ui/svelte";
+import { createTooltip, type CreateTooltipProps } from "@melt-ui/svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 import { getContext, setContext } from "svelte";
 import { getPositioningUpdater } from "../floating/helpers.js";
@@ -10,21 +6,30 @@ import type { Writable } from "svelte/store";
 import type { FloatingConfig } from "../floating/floating-config.js";
 import type { FloatingProps } from "../floating/_types.js";
 
-const NAME = "tooltip";
-const PARTS = ["arrow", "content", "trigger"] as const;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
-
-type GetReturn = TooltipReturn;
+function getTooltipData() {
+	const NAME = "tooltip" as const;
+	const PARTS = ["arrow", "content", "trigger"] as const;
+	return {
+		NAME,
+		PARTS
+	};
+}
 
 export function setCtx(props: CreateTooltipProps) {
-	const tooltip = createTooltip({
-		positioning: {
-			placement: "top"
-		},
-		openDelay: 700,
-		...removeUndefined(props)
-	});
+	const { NAME, PARTS } = getTooltipData();
+	const getAttrs = createBitAttrs(NAME, PARTS);
+	const tooltip = {
+		...createTooltip({
+			positioning: {
+				placement: "top"
+			},
+			openDelay: 700,
+			...removeUndefined(props)
+		}),
+		getAttrs
+	};
 	setContext(NAME, tooltip);
 	return {
 		...tooltip,
@@ -33,6 +38,7 @@ export function setCtx(props: CreateTooltipProps) {
 }
 
 export function getCtx(sideOffset = 0) {
+	const { NAME } = getTooltipData();
 	const tooltip = getContext<GetReturn>(NAME);
 
 	const {
@@ -49,12 +55,11 @@ export function setArrow(size = 8) {
 	return tooltip;
 }
 
-const defaultPlacement = {
-	side: "top",
-	align: "center"
-} satisfies FloatingProps;
-
 export function updatePositioning(props: FloatingProps) {
+	const defaultPlacement = {
+		side: "top",
+		align: "center"
+	} satisfies FloatingProps;
 	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }