diff --git a/src/lib/components/description/Description.svelte b/src/lib/components/description/Description.svelte
index 80c1ea6..574c5ac 100644
--- a/src/lib/components/description/Description.svelte
+++ b/src/lib/components/description/Description.svelte
@@ -12,7 +12,6 @@
export let as: SupportedAs = "p";
export let use: HTMLActionArray = [];
- $: slotProps = $contextStore?.props?.slotProps ?? {};
const id = `headlessui-description-${useId()}`;
let contextStore = useDescriptionContext();
if (!contextStore) {
@@ -22,12 +21,15 @@
}
onMount(() => $contextStore?.register(id));
+
+ $: slotProps = $contextStore!.slotProps;
export interface DescriptionContext {
name?: string;
- props?: { slotProps?: object };
+ slotProps?: object;
+ props?: object;
register: (value: string) => void;
descriptionIds?: string;
}
@@ -19,16 +20,19 @@
import type { Readable, Writable } from "svelte/store";
import { writable } from "svelte/store";
export let name: string;
+ export let slotProps = {};
let descriptionIds: string[] = [];
let contextStore: Writable = writable({
name,
- register,
+ slotProps,
props: $$restProps,
+ register,
});
setContext(DESCRIPTION_CONTEXT_NAME, contextStore);
$: contextStore.set({
name,
+ slotProps,
props: $$restProps,
register,
descriptionIds:
diff --git a/src/lib/components/description/description.test.ts b/src/lib/components/description/description.test.ts
index 4a520dd..34b1c38 100644
--- a/src/lib/components/description/description.test.ts
+++ b/src/lib/components/description/description.test.ts
@@ -102,3 +102,33 @@ it("should be possible to use a DescriptionProvider and multiple Description com
`);
});
+
+it("should be possible to use a DescriptionProvider with slot props", async () => {
+ let { container } = render(svelte`
+
+
+ {num}
+ Contents
+
+
+ `);
+
+ expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+
+
+ 12345
+
+
+
+
+
+ Contents
+
+
+ `);
+});
+
diff --git a/src/lib/components/label/Label.svelte b/src/lib/components/label/Label.svelte
index 09d700a..45c6531 100644
--- a/src/lib/components/label/Label.svelte
+++ b/src/lib/components/label/Label.svelte
@@ -24,6 +24,9 @@
let allProps: any = {};
$: allProps = { ...$$restProps, ...$contextStore!.props, id };
+
+ $: slotProps = $contextStore!.slotProps;
+
if (passive) delete allProps["onClick"];
@@ -32,10 +35,11 @@
{...allProps}
name={"Label"}
{as}
+ {slotProps}
use={[...use, forwardEvents]}
on:click={(event) => {
if (!passive) allProps["onClick"]?.(event);
}}
>
-
+
diff --git a/src/lib/components/label/LabelProvider.svelte b/src/lib/components/label/LabelProvider.svelte
index 1080dff..d59bec9 100644
--- a/src/lib/components/label/LabelProvider.svelte
+++ b/src/lib/components/label/LabelProvider.svelte
@@ -1,6 +1,7 @@
-
-
+
+