@pzerelles/headlessui-svelte 2.1.2-next.8 → 2.1.3-next.1

package/dist/button/Button.svelte

@@ -1,61 +1,88 @@
-<script lang="ts" module>const DEFAULT_BUTTON_TAG = "button";
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_BUTTON_TAG = "button" as const
+
+  export type ButtonRenderPropArg = {
+    disabled: boolean
+    hover: boolean
+    focus: boolean
+    active: boolean
+    autofocus: boolean
+  }
+
+  export type ButtonOwnProps = {
+    element?: HTMLElement
+    disabled?: boolean
+    autofocus?: boolean
+    type?: "button" | "submit" | "reset"
+  }
+
+  export type ButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, ButtonOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">import { useActivePress } from "../hooks/use-active-press.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  disabled: ownDisabled = false,
-  autofocus = false,
-  type = "button",
-  ...theirProps
-} = $props();
-const disabled = $derived(providedDisabled.value || ownDisabled);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
+<script lang="ts">
+  import { useActivePress } from "../hooks/use-active-press.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const providedDisabled = useDisabled()
+
+  let {
+    element = $bindable(),
+    disabled: ownDisabled = false,
+    autofocus = false,
+    type = "button",
+    ...theirProps
+  }: ButtonProps = $props()
+
+  const disabled = $derived(providedDisabled.current || ownDisabled)
+
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { pressed: active, pressProps } = $derived(
+    useActivePress({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+
+  const slots = $derived({
+    disabled,
+    hover,
+    focus,
+    active,
+    autofocus,
   })
-);
-const slot = $derived({
-  disabled,
-  hover,
-  focus,
-  active,
-  autofocus
-});
-const ourProps = $derived(
-  mergeProps(
-    {
-      type,
-      disabled: disabled || void 0,
-      autofocus
-    },
-    focusProps,
-    hoverProps,
-    pressProps
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        type,
+        disabled: disabled || undefined,
+        autofocus,
+      },
+      focusProps,
+      hoverProps,
+      pressProps
+    )
   )
-);
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slots} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:element />

package/dist/button/Button.svelte.d.ts

@@ -1,47 +1,19 @@
-import type { Props, ElementType } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_BUTTON_TAG: "button";
-type ButtonRenderPropArg = {
+export type ButtonRenderPropArg = {
     disabled: boolean;
     hover: boolean;
     focus: boolean;
     active: boolean;
     autofocus: boolean;
 };
-type ButtonPropsWeControl = never;
-export type ButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+export type ButtonOwnProps = {
+    element?: HTMLElement;
     disabled?: boolean;
     autofocus?: boolean;
     type?: "button" | "submit" | "reset";
-}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "type"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<ButtonRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: ButtonRenderPropArg) => string) | undefined;
-    } : {}) & {
-        disabled?: boolean;
-        autofocus?: boolean;
-        type?: "button" | "submit" | "reset";
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Button: $$IsomorphicComponent;
-type Button<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof Button<TTag>>;
+};
+export type ButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, ButtonOwnProps>;
+declare const Button: import("svelte").Component<ButtonProps, {}, "element">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/button/index.d.ts

@@ -1 +1 @@
-export { default as Button, type ButtonProps } from "./Button.svelte";
+export { default as Button, type ButtonProps, type ButtonRenderPropArg as ButtonSlot, type ButtonOwnProps, } from "./Button.svelte";

package/dist/button/index.js

@@ -1 +1 @@
-export { default as Button } from "./Button.svelte";
+export { default as Button, } from "./Button.svelte";

package/dist/checkbox/Checkbox.svelte

@@ -1,129 +1,186 @@
-<script lang="ts" module>let DEFAULT_CHECKBOX_TAG = "span";
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_CHECKBOX_TAG = "span" as const
+
+  export type CheckboxRenderPropArg = {
+    checked: boolean
+    changing: boolean
+    focus: boolean
+    active: boolean
+    hover: boolean
+    autofocus: boolean
+    disabled: boolean
+    indeterminate: boolean
+  }
+
+  type CheckboxPropsWeControl =
+    | "aria-checked"
+    | "aria-describedby"
+    | "aria-disabled"
+    | "aria-labelledby"
+    | "role"
+    | "tabIndex"
+
+  export type CheckboxOwnProps<TType = string> = {
+    element?: HTMLElement
+    id?: string
+    value?: TType
+    disabled?: boolean
+    indeterminate?: boolean
+    checked?: boolean
+    defaultChecked?: boolean
+    autofocus?: boolean
+    form?: string
+    name?: string
+    onchange?: (checked: boolean) => void
+  }
+
+  export type CheckboxProps<TType = string> = Props<
+    typeof DEFAULT_CHECKBOX_TAG,
+    CheckboxRenderPropArg,
+    CheckboxOwnProps<TType>
+  >
 </script>
 
-<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG">import { tick } from "svelte";
-import { attemptSubmit } from "../utils/form.js";
-import { getIdContext, htmlid } from "../utils/id.js";
-import { useActivePress } from "../hooks/use-active-press.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import FormFields from "../internal/FormFields.svelte";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useLabelledBy } from "../label/context.svelte.js";
-import { useDescribedBy } from "../description/context.svelte.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { useControllable } from "../hooks/use-controllable.svelte.js";
-const internalId = htmlid();
-const providedId = getIdContext();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  id = providedId || `headlessui-checkbox-${internalId}`,
-  disabled: theirDisabled = false,
-  autofocus = false,
-  checked: controlledChecked = $bindable(),
-  defaultChecked: _defaultChecked,
-  onchange: controlledOnChange,
-  name,
-  value,
-  form,
-  indeterminate = false,
-  ...theirProps
-} = $props();
-const defaultChecked = _defaultChecked;
-const controllable = useControllable(
-  {
-    get controlledValue() {
-      return controlledChecked;
+<script lang="ts" generics="TType">
+  import { tick } from "svelte"
+  import { attemptSubmit } from "../utils/form.js"
+  import { useProvidedId, htmlid } from "../utils/id.js"
+  import { useActivePress } from "../hooks/use-active-press.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import FormFields from "../internal/FormFields.svelte"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useControllable } from "../hooks/use-controllable.svelte.js"
+
+  const internalId = htmlid()
+  const providedId = useProvidedId()
+  const providedDisabled = useDisabled()
+
+  let {
+    element = $bindable(),
+    id = providedId || `headlessui-checkbox-${internalId}`,
+    disabled: theirDisabled = false,
+    autofocus = false,
+    checked: controlledChecked = $bindable(),
+    defaultChecked: _defaultChecked,
+    onchange: controlledOnChange,
+    name,
+    value,
+    form,
+    indeterminate = false,
+    ...theirProps
+  }: CheckboxProps<TType> = $props()
+
+  const defaultChecked = $derived(_defaultChecked)
+  const controllable = useControllable(
+    {
+      get controlledValue() {
+        return controlledChecked
+      },
+      set controlledValue(checked) {
+        controlledChecked = checked
+      },
     },
-    set controlledValue(checked2) {
-      controlledChecked = checked2;
-    }
-  },
-  controlledOnChange,
-  defaultChecked ?? false
-);
-const { value: checked, onchange } = $derived(controllable);
-const disabled = $derived(providedDisabled?.value ?? theirDisabled);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
+    (() => controlledOnChange)(),
+    (() => defaultChecked)() ?? false
+  )
+  const { value: checked, onchange } = $derived(controllable)
+
+  const disabled = $derived(providedDisabled.current || theirDisabled)
+
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { pressed: active, pressProps } = $derived(
+    useActivePress({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+
+  const labelledBy = useLabelledBy()
+  const describedBy = useDescribedBy()
+
+  let changing = $state(false)
+
+  const toggle = () => {
+    changing = true
+    onchange?.(!checked)
+    tick().then(() => {
+      changing = false
+    })
+  }
+
+  const handleClick = (event: MouseEvent) => {
+    if (disabled) return event.preventDefault()
+    event.preventDefault()
+    toggle()
+  }
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    if (event.key === " ") {
+      event.preventDefault()
+      toggle()
+    } else if (event.key === "Enter") {
+      if (event.currentTarget) attemptSubmit(event.currentTarget as HTMLElement)
     }
-  })
-);
-const labelledBy = useLabelledBy();
-const describedBy = useDescribedBy();
-let changing = $state(false);
-const toggle = () => {
-  changing = true;
-  onchange?.(!checked);
-  tick().then(() => {
-    changing = false;
-  });
-};
-const handleClick = (event) => {
-  if (disabled) return event.preventDefault();
-  event.preventDefault();
-  toggle();
-};
-const handleKeyUp = (event) => {
-  if (event.key === " ") {
-    event.preventDefault();
-    toggle();
-  } else if (event.key === "Enter") {
-    if (event.currentTarget) attemptSubmit(event.currentTarget);
   }
-};
-const handleKeyPress = (event) => event.preventDefault();
-const slot = $derived({
-  checked,
-  changing,
-  focus,
-  active,
-  hover,
-  autofocus: autofocus ?? false,
-  disabled,
-  indeterminate
-});
-const ourProps = $derived(
-  mergeProps(
-    {
-      id,
-      role: "checkbox",
-      "aria-checked": indeterminate ? "mixed" : checked ? true : false,
-      "aria-labelledby": labelledBy.value,
-      "aria-describedby": describedBy.value,
-      "aria-disabled": disabled ? true : void 0,
-      tabindex: disabled ? void 0 : 0,
-      onkeyup: disabled ? void 0 : handleKeyUp,
-      onkeypress: disabled ? void 0 : handleKeyPress,
-      onclick: disabled ? void 0 : handleClick
-    },
-    focusProps,
-    hoverProps,
-    pressProps
+
+  const handleKeyPress = (event: KeyboardEvent) => event.preventDefault()
+
+  const slot = $derived({
+    checked,
+    changing,
+    focus,
+    active,
+    hover,
+    autofocus: autofocus ?? false,
+    disabled,
+    indeterminate,
+  })
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        role: "checkbox",
+        "aria-checked": indeterminate ? ("mixed" as "mixed") : checked ? true : false,
+        "aria-labelledby": labelledBy.value,
+        "aria-describedby": describedBy.value,
+        "aria-disabled": disabled ? true : undefined,
+        tabindex: disabled ? undefined : 0,
+        onkeyup: disabled ? undefined : handleKeyUp,
+        onkeypress: disabled ? undefined : handleKeyPress,
+        onclick: disabled ? undefined : handleClick,
+      },
+      focusProps,
+      hoverProps,
+      pressProps
+    )
   )
-);
-const reset = $derived(() => {
-  if (defaultChecked === void 0) return;
-  return onchange?.(defaultChecked);
-});
+
+  const reset = $derived(() => {
+    if (defaultChecked === undefined) return
+    return onchange?.(defaultChecked)
+  })
 </script>
 
 {#if name}
@@ -135,12 +192,13 @@ const reset = $derived(() => {
     onReset={reset}
   />
 {/if}
+
 <ElementOrComponent
   {ourProps}
   {theirProps}
-  {slot}
+  slots={slot}
   defaultTag={DEFAULT_CHECKBOX_TAG}
   name="Checkbox"
-  bind:ref
+  bind:element
   bind:value
 />

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { ElementType, Props } from "../utils/types.js";
-declare let DEFAULT_CHECKBOX_TAG: "span";
-type CheckboxRenderPropArg = {
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_CHECKBOX_TAG: "span";
+export type CheckboxRenderPropArg = {
     checked: boolean;
     changing: boolean;
     focus: boolean;
@@ -10,8 +10,8 @@ type CheckboxRenderPropArg = {
     disabled: boolean;
     indeterminate: boolean;
 };
-type CheckboxPropsWeControl = "aria-checked" | "aria-describedby" | "aria-disabled" | "aria-labelledby" | "role" | "tabIndex";
-export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string> = Props<TTag, CheckboxRenderPropArg, CheckboxPropsWeControl, {
+export type CheckboxOwnProps<TType = string> = {
+    element?: HTMLElement;
     id?: string;
     value?: TType;
     disabled?: boolean;
@@ -22,43 +22,22 @@ export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG
     form?: string;
     name?: string;
     onchange?: (checked: boolean) => void;
-}>;
-declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "id" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<CheckboxRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: CheckboxRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-        value?: TType | undefined;
-        disabled?: boolean;
-        indeterminate?: boolean;
-        checked?: boolean;
-        defaultChecked?: boolean;
-        autofocus?: boolean;
-        form?: string;
-        name?: string;
-        onchange?: (checked: boolean) => void;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+};
+export type CheckboxProps<TType = string> = Props<typeof DEFAULT_CHECKBOX_TAG, CheckboxRenderPropArg, CheckboxOwnProps<TType>>;
+declare class __sveltets_Render<TType> {
+    props(): CheckboxProps<TType>;
+    events(): {};
     slots(): {};
-    bindings(): "ref" | "checked";
+    bindings(): "element" | "checked";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType, TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType, TTag>['props']>, ReturnType<__sveltets_Render<TType, TTag>['events']>, ReturnType<__sveltets_Render<TType, TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TType, TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TType, TTag>['exports']>;
-    <TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TType, TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TType, TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TType, TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType>['props']>, ReturnType<__sveltets_Render<TType>['events']>, ReturnType<__sveltets_Render<TType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType>['exports']>;
+    <TType>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Checkbox: $$IsomorphicComponent;
-type Checkbox<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> = InstanceType<typeof Checkbox<TType, TTag>>;
+type Checkbox<TType> = InstanceType<typeof Checkbox<TType>>;
 export default Checkbox;

package/dist/checkbox/index.d.ts

@@ -1 +1 @@
-export { default as Checkbox, type CheckboxProps } from "./Checkbox.svelte";
+export { default as Checkbox, type CheckboxProps, type CheckboxRenderPropArg as CheckboxSlot, type CheckboxOwnProps, } from "./Checkbox.svelte";

package/dist/checkbox/index.js

@@ -1 +1 @@
-export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Checkbox, } from "./Checkbox.svelte";

package/dist/close-button/CloseButton.svelte

@@ -1,11 +1,14 @@
-<script lang="ts" module>import Button, {} from "../button/Button.svelte";
-import { useClose } from "../internal/close-provider.js";
-let DEFAULT_BUTTON_TAG = "button";
+<script lang="ts" module>
+  import Button, { type ButtonProps } from "../button/Button.svelte"
+  import { useClose } from "../hooks/use-close.svelte.js"
+
+  export type CloseButtonProps = ButtonProps
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">const closeContext = useClose();
-const close = $derived(closeContext?.close);
-let { ...props } = $props();
+<script lang="ts">
+  const closeContext = useClose()
+  const close = $derived(closeContext?.close)
+  let { element = $bindable(), ...props }: CloseButtonProps = $props()
 </script>
 
-<Button onclick={close} {...props} />
+<Button {...props} onclick={close} bind:element />