diff --git a/src/lib/button/Button.svelte b/src/lib/button/Button.svelte index 9845863..e632238 100644 --- a/src/lib/button/Button.svelte +++ b/src/lib/button/Button.svelte @@ -1,5 +1,6 @@ - - {#if typeof as === "string"} - - {@render children?.(snippetProps)} - - {:else} - {@const AsComponent = as} - - {@render children?.(snippetProps)} - - {/if} - + + + {#if typeof as === "string"} + + {@render children?.(snippetProps)} + + {:else} + {@const AsComponent = as} + + {@render children?.(snippetProps)} + + {/if} + + diff --git a/src/lib/fieldset/Fieldset.svelte b/src/lib/fieldset/Fieldset.svelte index 6cfe2ba..9a996e6 100644 --- a/src/lib/fieldset/Fieldset.svelte +++ b/src/lib/fieldset/Fieldset.svelte @@ -1,6 +1,7 @@ - - {#snippet labelledBy({ labelIds })} - {#if typeof as === "string"} - - {@render children?.(snippetProps)} - - {:else} - {@const AsComponent = as} - - {@render children?.(snippetProps)} - - {/if} - {/snippet} - + + + {#snippet labelledBy({ labelIds })} + {#if typeof as === "string"} + + {@render children?.(snippetProps)} + + {:else} + {@const AsComponent = as} + + {@render children?.(snippetProps)} + + {/if} + {/snippet} + + diff --git a/src/lib/input/Input.svelte b/src/lib/input/Input.svelte index 1fa69e5..d5106b9 100644 --- a/src/lib/input/Input.svelte +++ b/src/lib/input/Input.svelte @@ -2,6 +2,7 @@ import { type Component, type Snippet } from "svelte"; import { useId } from "../../hooks/use-id"; import { useLabelledBy } from "$lib/label/LabelProvider.svelte"; + import { useDisabled } from "$lib/internal/DisabledProvider.svelte"; type Props = { /** The element or component the input should render as. */ @@ -32,7 +33,7 @@ id = `headlessui-input-${useId()}`, as = "input", autofocus = false, - disabled = false, + disabled = useDisabled() || false, invalid = false, children, ...theirProps diff --git a/src/lib/internal/DisabledProvider.svelte b/src/lib/internal/DisabledProvider.svelte new file mode 100644 index 0000000..62155ca --- /dev/null +++ b/src/lib/internal/DisabledProvider.svelte @@ -0,0 +1,28 @@ + + + + + +{@render children?.({ disabled })} diff --git a/src/lib/label/Label.svelte b/src/lib/label/Label.svelte index 598b99d..7274116 100644 --- a/src/lib/label/Label.svelte +++ b/src/lib/label/Label.svelte @@ -2,6 +2,7 @@ import { type Component, onMount, type Snippet } from "svelte"; import { useId } from "../../hooks/use-id"; import { useLabelContext } from "./LabelProvider.svelte"; + import { useDisabled } from "$lib/internal/DisabledProvider.svelte"; type Props = { /** The element or component the input should render as. */ @@ -40,7 +41,7 @@ onclick, }); - let disabled = false; + let disabled = useDisabled() || false; let snippetProps: SnippetProps = $derived({ disabled, diff --git a/src/lib/switch/Switch.svelte b/src/lib/switch/Switch.svelte index 8a9e761..2cf0461 100644 --- a/src/lib/switch/Switch.svelte +++ b/src/lib/switch/Switch.svelte @@ -2,6 +2,7 @@ import type { Component, Snippet } from "svelte"; import { resolveButtonType } from "../../utils/resolve-button-type"; import { useId } from "../../hooks/use-id"; + import { useDisabled } from "$lib/internal/DisabledProvider.svelte"; type Props = { /** The element or component the Switch should render as. */ @@ -53,7 +54,7 @@ as = "button", // checked = $bindable(false), checked = false, - disabled = false, + disabled = useDisabled() || false, tabIndex = 0, type = undefined, children, diff --git a/src/routes/examples/fieldset/+page.svelte b/src/routes/examples/fieldset/+page.svelte index e3835c2..f6b0dfd 100644 --- a/src/routes/examples/fieldset/+page.svelte +++ b/src/routes/examples/fieldset/+page.svelte @@ -7,7 +7,7 @@
-
+
Shipping details