add attr helper

src/lib/bits/accordion/components/Accordion.svelte

@@ -12,6 +12,8 @@
 	export let disabled = false;
 	export let asChild = false;
 
+	const attrs = ctx.getAttrs("root");
+
 	const {
 		elements: { root },
 		states: { value: localValue },
@@ -37,13 +39,14 @@
 
 	$: updateOption("multiple", multiple);
 	$: updateOption("disabled", disabled);
+
+	$: builder = $root;
 </script>
 
 {#if asChild}
-	<slot builder={$root} />
+	<slot {builder} {attrs} />
 {:else}
-	{@const builder = $root}
-	<div use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {/if}

src/lib/bits/accordion/components/AccordionContent.svelte

@@ -22,39 +22,38 @@
 	export let asChild = false;
 
 	const { content, isSelected, props } = ctx.getContent();
+
+	const attrs = ctx.getAttrs("content");
+
+	$: builder = $content(props);
 </script>
 
 {#if asChild && $isSelected(props)}
-	{@const builder = $content(props)}
-	<slot {builder} />
+	<slot {builder} {attrs} />
 {:else if transition && $isSelected(props)}
-	{@const builder = $content(props)}
-	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {:else if inTransition && outTransition && $isSelected(props)}
-	{@const builder = $content(props)}
 	<div
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
+		{...attrs}
 	>
-		<slot {builder} />
+		<slot {builder} {attrs} />
 	</div>
 {:else if inTransition && $isSelected(props)}
-	{@const builder = $content(props)}
-	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {:else if outTransition && $isSelected(props)}
-	{@const builder = $content(props)}
-	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {:else if $isSelected(props)}
-	{@const builder = $content(props)}
-	<div {...$$restProps}>
-		<slot {builder} />
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {/if}

src/lib/bits/accordion/components/AccordionHeader.svelte

@@ -6,14 +6,16 @@
 	type $$Props = HeaderProps;
 	export let level = 3;
 	export let asChild = false;
-	const heading = ctx.get().elements.heading;
+	const header = ctx.get().elements.heading;
+	const attrs = ctx.getAttrs("header");
+
+	$: builder = $header(level);
 </script>
 
 {#if asChild}
-	<slot builder={$heading(level)} />
+	<slot {builder} {attrs} />
 {:else}
-	{@const builder = $heading(level)}
-	<div use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {/if}

src/lib/bits/accordion/components/AccordionItem.svelte

@@ -8,13 +8,15 @@
 	export let disabled: $$Props["disabled"] = undefined;
 	export let asChild = false;
 	const { item, props } = ctx.setItem({ value, disabled });
+
+	$: builder = $item(props);
+	const attrs = ctx.getAttrs("item");
 </script>
 
 {#if asChild}
-	<slot builder={$item(props)} />
+	<slot {builder} {attrs} />
 {:else}
-	{@const builder = $item(props)}
-	<div use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {/if}

src/lib/bits/accordion/components/AccordionTrigger.svelte

@@ -10,13 +10,21 @@
 	const { trigger, props } = ctx.getTrigger();
 
 	const dispatch = createDispatcher();
+
+	$: builder = $trigger(props);
+	const attrs = ctx.getAttrs("trigger");
 </script>
 
 {#if asChild}
-	<slot builder={$trigger(props)} />
+	<slot {builder} {attrs} />
 {:else}
-	{@const builder = $trigger(props)}
-	<button use:melt={builder} {...$$restProps} on:m-keydown={dispatch} on:m-click={dispatch}>
-		<slot {builder} />
+	<button
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-keydown={dispatch}
+		on:m-click={dispatch}
+	>
+		<slot {builder} {attrs} />
 	</button>
 {/if}

src/lib/bits/accordion/ctx.ts

@@ -5,18 +5,22 @@ import {
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import type { AccordionItemProps } from "./types.js";
-import { getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
+import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 
-const NAME = "Accordion";
-const ITEM_NAME = "AccordionItem";
+const NAME = "accordion";
+const ITEM_NAME = "accordion-item";
+const PARTS = ["root", "content", "header", "item", "trigger"] as const;
+
+const getAttrs = createBitAttrs(NAME, PARTS);
 
 export const ctx = {
 	set,
 	get,
 	setItem,
 	getItemProps,
 	getContent,
-	getTrigger
+	getTrigger,
+	getAttrs
 };
 
 type GetReturn = AccordionReturn;

src/lib/bits/alert-dialog/attrs.ts

@@ -0,0 +1,26 @@
+export const ATTRS = {
+	action: {
+		"data-bits-alert-dialog-action": ""
+	},
+	cancel: {
+		"data-bits-alert-dialog-cancel": ""
+	},
+	content: {
+		"data-bits-alert-dialog-content": ""
+	},
+	description: {
+		"data-bits-alert-dialog-description": ""
+	},
+	overlay: {
+		"data-bits-alert-dialog-overlay": ""
+	},
+	portal: {
+		"data-bits-alert-dialog-portal": ""
+	},
+	title: {
+		"data-bits-alert-dialog-title": ""
+	},
+	trigger: {
+		"data-bits-alert-dialog-trigger": ""
+	}
+};

src/lib/bits/alert-dialog/components/AlertDialogAction.svelte

@@ -3,6 +3,7 @@
 	import { createDispatcher } from "$lib/internal/events.js";
 	import { ctx } from "../ctx.js";
 	import type { ActionEvents, ActionProps } from "../types.js";
+	import { ATTRS } from "../attrs.js";
 
 	type $$Props = ActionProps;
 	type $$Events = ActionEvents;
@@ -12,13 +13,21 @@
 	} = ctx.get();
 
 	const dispatch = createDispatcher();
+
+	$: builder = $close;
+	const attrs = ATTRS.action;
 </script>
 
 {#if asChild}
-	<slot builder={$close} />
+	<slot {builder} {attrs} />
 {:else}
-	{@const builder = $close}
-	<button use:melt={builder} {...$$restProps} on:m-click={dispatch} on:m-keydown={dispatch}>
-		<slot {builder} />
+	<button
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} {attrs} />
 	</button>
 {/if}

src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte

@@ -3,6 +3,7 @@
 	import { ctx } from "../ctx.js";
 	import type { CancelEvents, CancelProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
+	import { ATTRS } from "../attrs.js";
 
 	type $$Props = CancelProps;
 	type $$Events = CancelEvents;
@@ -12,13 +13,20 @@
 	} = ctx.get();
 
 	const dispatch = createDispatcher();
+	$: builder = $close;
+	const attrs = ATTRS.cancel;
 </script>
 
 {#if asChild}
-	<slot builder={$close} />
+	<slot {builder} {attrs} />
 {:else}
-	{@const builder = $close}
-	<button use:melt={builder} on:m-click={dispatch} on:m-keydown={dispatch} {...$$restProps}>
-		<slot {builder} />
+	<button
+		use:melt={builder}
+		on:m-click={dispatch}
+		on:m-keydown={dispatch}
+		{...$$restProps}
+		{...attrs}
+	>
+		<slot {builder} {attrs} />
 	</button>
 {/if}

src/lib/bits/alert-dialog/components/AlertDialogContent.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { ATTRS } from "../attrs.js";
+
 	import { melt } from "@melt-ui/svelte";
 	import { setTransitionTimes, type Transition } from "$lib/internal/index.js";
 	import { ctx } from "../ctx.js";
@@ -33,39 +35,37 @@
 		outTransition,
 		outTransitionConfig
 	});
+
+	$: builder = $content;
+	const attrs = ATTRS.content;
 </script>
 
 {#if asChild && $tOpen}
-	{@const builder = $content}
-	<slot {builder} />
+	<slot {builder} {attrs} />
 {:else if transition && $tOpen}
-	{@const builder = $content}
-	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {:else if inTransition && outTransition && $tOpen}
-	{@const builder = $content}
 	<div
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
+		{...attrs}
 	>
-		<slot {builder} />
+		<slot {builder} {attrs} />
 	</div>
 {:else if inTransition && $tOpen}
-	{@const builder = $content}
-	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {:else if outTransition && $tOpen}
-	{@const builder = $content}
-	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {:else if $tOpen}
-	{@const builder = $content}
-	<div use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {/if}

src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte

@@ -2,19 +2,22 @@
 	import { melt } from "@melt-ui/svelte";
 	import { ctx } from "../ctx.js";
 	import type { DescriptionProps } from "../types.js";
+	import { ATTRS } from "../attrs.js";
 
 	type $$Props = DescriptionProps;
 	export let asChild = false;
 	const {
 		elements: { description }
 	} = ctx.get();
+
+	$: builder = $description;
+	const attrs = ATTRS.description;
 </script>
 
 {#if asChild}
-	<slot builder={$description} />
+	<slot {builder} {attrs} />
 {:else}
-	{@const builder = $description}
-	<div use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {/if}