@pzerelles/headlessui-svelte 2.1.2-next.5 → 2.1.2-next.51

package/dist/dialog/DialogPanel.svelte

@@ -1,37 +1,34 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_PANEL_TAG = "div" as const
-  type PanelRenderPropArg = {
+  export type PanelRenderPropArg = {
     open: boolean
   }
 
-  export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
-    TTag,
-    PanelRenderPropArg,
-    never,
-    {
-      id?: string
-      transition?: boolean
-    }
-  >
+  export type DialogPanelOwnProps = {
+    element?: HTMLElement
+    id?: string
+    transition?: boolean
+  }
+
+  export type DialogPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DialogPanelOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { DialogStates, useDialogContext } from "./context.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import { mergeProps } from "../utils/render.js"
   import TransitionChild from "../transition/TransitionChild.svelte"
-  import { onMount } from "svelte"
 
   let internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-dialog-panel-${internalId}`,
     transition = false,
     ...theirProps
-  }: { as?: TTag } & DialogPanelProps<TTag> = $props()
+  }: DialogPanelProps = $props()
   const _state = useDialogContext("Dialog.Panel")
   const { dialogState, unmount } = $derived(_state)
 
@@ -52,18 +49,25 @@
 </script>
 
 {#if transition}
-  <TransitionChild {unmount} {ref}>
-    {#snippet children(slot, props)}
+  <TransitionChild asChild {unmount} {element}>
+    {#snippet children({ props, ...slot })}
       <ElementOrComponent
         ourProps={{ ...ourProps, ...props }}
         {theirProps}
         slots={slot}
         defaultTag={DEFAULT_PANEL_TAG}
         name="DialogPanel"
-        bind:ref
+        bind:element
       />
     {/snippet}
   </TransitionChild>
 {:else}
-  <ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_PANEL_TAG} name="DialogPanel" bind:ref />
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    slots={slot}
+    defaultTag={DEFAULT_PANEL_TAG}
+    name="DialogPanel"
+    bind:element
+  />
 {/if}

package/dist/dialog/DialogPanel.svelte.d.ts

@@ -1,40 +1,14 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_PANEL_TAG: "div";
-type PanelRenderPropArg = {
+export type PanelRenderPropArg = {
     open: boolean;
 };
-export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, never, {
+export type DialogPanelOwnProps = {
+    element?: HTMLElement;
     id?: string;
     transition?: boolean;
-}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "id" | "transition"> 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<PanelRenderPropArg> | 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: PanelRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-        transition?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PANEL_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_PANEL_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 DialogPanel: $$IsomorphicComponent;
-type DialogPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = InstanceType<typeof DialogPanel<TTag>>;
+};
+export type DialogPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DialogPanelOwnProps>;
+declare const DialogPanel: import("svelte").Component<DialogPanelProps, {}, "element">;
+type DialogPanel = ReturnType<typeof DialogPanel>;
 export default DialogPanel;

package/dist/dialog/DialogTitle.svelte

@@ -1,17 +1,19 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_TITLE_TAG = "h2" as const
-  type TitleRenderPropArg = {
+  export type TitleRenderPropArg = {
     open: boolean
   }
 
-  export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>
+  export type DialogTitleOwnProps = { id?: string; element?: HTMLElement }
+
+  export type DialogTitleProps = Props<typeof DEFAULT_TITLE_TAG, TitleRenderPropArg, DialogTitleOwnProps>
 
   //
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TITLE_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { DialogStates, useDialogContext } from "./context.svelte.js"
   import { onMount } from "svelte"
@@ -20,10 +22,10 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
-    id = `headlessui-dialog-title-${internalId}` as PropsOf<TTag>[string],
+    element = $bindable(),
+    id = `headlessui-dialog-title-${internalId}`,
     ...theirProps
-  }: { as?: TTag } & DialogTitleProps<TTag> = $props()
+  }: DialogTitleProps = $props()
   const _state = useDialogContext("Dialog.Panel")
   const { dialogState, setTitleId } = $derived(_state)
 
@@ -41,4 +43,11 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_TITLE_TAG} name="DialogTitle" bind:ref />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_TITLE_TAG}
+  name="DialogTitle"
+  bind:element
+/>

package/dist/dialog/DialogTitle.svelte.d.ts

@@ -1,34 +1,13 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_TITLE_TAG: "h2";
-type TitleRenderPropArg = {
+export type TitleRenderPropArg = {
     open: boolean;
 };
-export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<TitleRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends 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?: PropsOf<TTag>["class"] | ((bag: TitleRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_TITLE_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_TITLE_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 DialogTitle: $$IsomorphicComponent;
-type DialogTitle<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = InstanceType<typeof DialogTitle<TTag>>;
+export type DialogTitleOwnProps = {
+    id?: string;
+    element?: HTMLElement;
+};
+export type DialogTitleProps = Props<typeof DEFAULT_TITLE_TAG, TitleRenderPropArg, DialogTitleOwnProps>;
+declare const DialogTitle: import("svelte").Component<DialogTitleProps, {}, "element">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
 export default DialogTitle;

package/dist/dialog/context.svelte.js

@@ -6,8 +6,8 @@ export var DialogStates;
 })(DialogStates || (DialogStates = {}));
 export function useDialogContext(component) {
     const context = getContext("DialogContext");
-    if (context === null) {
-        let err = new Error(`<${component} /> is missing a parent <Dialog /> component.`);
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Dialog /> component.`);
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useDialogContext);
         throw err;

package/dist/dialog/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Dialog, type DialogProps } from "./Dialog.svelte";
-export { default as DialogBackdrop, type DialogBackdropProps } from "./DialogBackdrop.svelte";
-export { default as DialogPanel, type DialogPanelProps } from "./DialogPanel.svelte";
-export { default as DialogTitle, type DialogTitleProps } from "./DialogTitle.svelte";
+export { default as Dialog, type DialogProps, type DialogRenderPropArg as DialogSlot, type DialogOwnProps, } from "./Dialog.svelte";
+export { default as DialogBackdrop, type DialogBackdropProps, type BackdropRenderPropArg as DialogBackdropSlot, type DialogBackdropOwnProps, } from "./DialogBackdrop.svelte";
+export { default as DialogPanel, type DialogPanelProps, type PanelRenderPropArg as DialogPanelSlot, type DialogPanelOwnProps, } from "./DialogPanel.svelte";
+export { default as DialogTitle, type DialogTitleProps, type TitleRenderPropArg as DialogTitleSlot, type DialogTitleOwnProps, } from "./DialogTitle.svelte";

package/dist/dialog/index.js

@@ -1,4 +1,4 @@
-export { default as Dialog } from "./Dialog.svelte";
-export { default as DialogBackdrop } from "./DialogBackdrop.svelte";
-export { default as DialogPanel } from "./DialogPanel.svelte";
-export { default as DialogTitle } from "./DialogTitle.svelte";
+export { default as Dialog, } from "./Dialog.svelte";
+export { default as DialogBackdrop, } from "./DialogBackdrop.svelte";
+export { default as DialogPanel, } from "./DialogPanel.svelte";
+export { default as DialogTitle, } from "./DialogTitle.svelte";

package/dist/disclosure/Disclosure.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_DISCLOSURE_TAG = "div" as const
+  export type DisclosureRenderPropArg = {
+    open: boolean
+    close: (focusableElement?: HTMLElement) => void
+  }
+
+  export type DisclosureOwnProps = {
+    defaultOpen?: boolean
+  }
+
+  export type DisclosureProps = Props<typeof DEFAULT_DISCLOSURE_TAG, DisclosureRenderPropArg, DisclosureOwnProps>
+
+  export * from "./context.svelte.js"
+</script>
+
+<script lang="ts">
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { createDisclosureAPIContext, createDisclosureContext, DisclosureStates } from "./context.svelte.js"
+  import { getOwnerDocument } from "../utils/owner.js"
+  import { createOpenClosedContext, State } from "../internal/open-closed.js"
+  import { createCloseContext } from "../internal/close-provider.js"
+
+  let { defaultOpen = false, ...theirProps }: DisclosureProps = $props()
+
+  const context = createDisclosureContext(defaultOpen)
+  const { buttonId, disclosureState } = $derived(context)
+
+  const close = (focusableElement?: HTMLElement) => {
+    context.closeDisclosure()
+    const ownerDocument = getOwnerDocument(undefined)
+    if (!ownerDocument) return
+    if (!buttonId) return
+
+    const restoreElement = (() => {
+      if (!focusableElement) return ownerDocument.getElementById(buttonId)
+      return focusableElement
+    })()
+
+    restoreElement?.focus()
+  }
+
+  createDisclosureAPIContext(close)
+
+  const slot = $derived({
+    open: disclosureState === DisclosureStates.Open,
+    close,
+  } satisfies DisclosureRenderPropArg)
+
+  createOpenClosedContext({
+    get value() {
+      return disclosureState === DisclosureStates.Open ? State.Open : State.Closed
+    },
+  })
+
+  createCloseContext({ close })
+</script>
+
+<ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_DISCLOSURE_TAG} name="Disclosure" />

package/dist/disclosure/Disclosure.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_DISCLOSURE_TAG: "div";
+export type DisclosureRenderPropArg = {
+    open: boolean;
+    close: (focusableElement?: HTMLElement) => void;
+};
+export type DisclosureOwnProps = {
+    defaultOpen?: boolean;
+};
+export type DisclosureProps = Props<typeof DEFAULT_DISCLOSURE_TAG, DisclosureRenderPropArg, DisclosureOwnProps>;
+export * from "./context.svelte.js";
+declare const Disclosure: import("svelte").Component<DisclosureProps, {}, "">;
+type Disclosure = ReturnType<typeof Disclosure>;
+export default Disclosure;

package/dist/disclosure/DisclosureButton.svelte

@@ -0,0 +1,191 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_BUTTON_TAG = "button" as const
+  export type ButtonRenderPropArg = {
+    open: boolean
+    hover: boolean
+    active: boolean
+    disabled: boolean
+    focus: boolean
+    autofocus: boolean
+  }
+  type ButtonPropsWeControl = "aria-controls" | "aria-expanded"
+
+  export type DisclosureButtonOwnProps = {
+    element?: HTMLButtonElement
+    disabled?: boolean
+    autofocus?: boolean
+  }
+
+  export type DisclosureButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, DisclosureButtonOwnProps>
+</script>
+
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
+  import { DisclosureStates, useDisclosureContext, useDisclosurePanelContext } from "./context.svelte.js"
+  import { onMount, untrack } from "svelte"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { useActivePress } from "../hooks/use-active-press.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-disclosure-button-${internalId}`,
+    disabled = false,
+    autofocus = false,
+    ...theirProps
+  }: DisclosureButtonProps = $props()
+
+  const context = useDisclosureContext("DisclosureButton")
+  const panelContext = useDisclosurePanelContext()
+  const isWithinPanel = $derived(!panelContext ? false : panelContext.panelId === context.panelId)
+
+  onMount(() => {
+    context.setButtonElement(element)
+  })
+
+  $effect(() => {
+    if (isWithinPanel) return
+    ;[id]
+    return untrack(() => {
+      context.setButtonId(id ?? undefined)
+      return () => {
+        context.setButtonId(undefined)
+      }
+    })
+  })
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (isWithinPanel) {
+      if (context.disclosureState === DisclosureStates.Closed) return
+
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          event.preventDefault()
+          event.stopPropagation()
+          context.toggleDisclosure()
+          context.buttonElement?.focus()
+          break
+      }
+    } else {
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          event.preventDefault()
+          event.stopPropagation()
+          context.toggleDisclosure()
+          break
+      }
+    }
+  }
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case " ":
+        // Required for firefox, event.preventDefault() in handleKeyDown for
+        // the Space key doesn't cancel the handleKeyUp, which in turn
+        // triggers a *click*.
+        event.preventDefault()
+        break
+    }
+  }
+
+  const handleClick = (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return
+    if (disabled) return
+
+    if (isWithinPanel) {
+      context.toggleDisclosure()
+      context.buttonElement?.focus()
+    } else {
+      context.toggleDisclosure()
+    }
+  }
+
+  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 slot = $derived({
+    open: context.disclosureState === DisclosureStates.Open,
+    hover,
+    active,
+    disabled,
+    focus,
+    autofocus,
+  } satisfies ButtonRenderPropArg)
+
+  const buttonType = useResolveButtonType({
+    get props() {
+      return { type: theirProps.type ?? undefined, as: DEFAULT_BUTTON_TAG }
+    },
+    get ref() {
+      return { current: context.buttonElement }
+    },
+  })
+
+  const ourProps = $derived(
+    isWithinPanel
+      ? mergeProps(
+          {
+            type: buttonType.type,
+            disabled: disabled || undefined,
+            autofocus,
+            onkeydown: handleKeyDown,
+            onclick: handleClick,
+          },
+          focusProps,
+          hoverProps,
+          pressProps
+        )
+      : mergeProps(
+          {
+            id,
+            type: buttonType.type,
+            "aria-expanded": context.disclosureState === DisclosureStates.Open,
+            "aria-controls": context.panelElement ? context.panelId : undefined,
+            disabled: disabled || undefined,
+            autofocus,
+            onkeydown: handleKeyDown,
+            onkeyup: handleKeyUp,
+            onclick: handleClick,
+          },
+          focusProps,
+          hoverProps,
+          pressProps
+        )
+  )
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_BUTTON_TAG}
+  name="DisclosureButton"
+  bind:element
+/>

package/dist/disclosure/DisclosureButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_BUTTON_TAG: "button";
+export type ButtonRenderPropArg = {
+    open: boolean;
+    hover: boolean;
+    active: boolean;
+    disabled: boolean;
+    focus: boolean;
+    autofocus: boolean;
+};
+export type DisclosureButtonOwnProps = {
+    element?: HTMLButtonElement;
+    disabled?: boolean;
+    autofocus?: boolean;
+};
+export type DisclosureButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, DisclosureButtonOwnProps>;
+declare const DisclosureButton: import("svelte").Component<DisclosureButtonProps, {}, "element">;
+type DisclosureButton = ReturnType<typeof DisclosureButton>;
+export default DisclosureButton;

package/dist/disclosure/DisclosurePanel.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+  import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_PANEL_TAG = "div" as const
+  export type PanelRenderPropArg = {
+    open: boolean
+    close: (focusableElement?: HTMLElement) => void
+  }
+
+  let PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
+
+  export type DisclosurePanelOwnProps = {
+    element?: HTMLElement
+    transition?: boolean
+  } & PropsForFeatures<typeof PanelRenderFeatures>
+
+  export type DisclosurePanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DisclosurePanelOwnProps>
+</script>
+
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import {
+    createDisclosurePanelContext,
+    DisclosureStates,
+    useDisclosureAPIContext,
+    useDisclosureContext,
+  } from "./context.svelte.js"
+  import { onMount, untrack } from "svelte"
+  import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js"
+  import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js"
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-disclosure-panel-${internalId}`,
+    transition = false,
+    ...theirProps
+  }: DisclosurePanelProps = $props()
+  const context = useDisclosureContext("DisclosurePanel")
+  const { close } = useDisclosureAPIContext("DisclosurePanel")
+
+  onMount(() => {
+    context.setPanelElement(element)
+  })
+
+  $effect(() => {
+    ;[id]
+    return untrack(() => {
+      context.setPanelId(id ?? undefined)
+      return () => {
+        context.setPanelId(undefined)
+      }
+    })
+  })
+
+  const usesOpenClosedState = useOpenClosed()
+  const _transition = useTransition({
+    get enabled() {
+      return transition
+    },
+    get element() {
+      return element
+    },
+    get show() {
+      return usesOpenClosedState !== null
+        ? (usesOpenClosedState.value & State.Open) === State.Open
+        : context.disclosureState === DisclosureStates.Open
+    },
+  })
+
+  const slot = $derived({
+    open: context.disclosureState === DisclosureStates.Open,
+    close,
+  } satisfies PanelRenderPropArg)
+
+  const ourProps = $derived({
+    id,
+    ...transitionDataAttributes(_transition.data),
+  })
+
+  createDisclosurePanelContext(() => context.panelId)
+  clearOpenClosedContext()
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_PANEL_TAG}
+  features={PanelRenderFeatures}
+  visible={_transition.visible}
+  name="DisclosurePanel"
+  bind:element
+/>

package/dist/disclosure/DisclosurePanel.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type PropsForFeatures } from "../utils/render.js";
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_PANEL_TAG: "div";
+export type PanelRenderPropArg = {
+    open: boolean;
+    close: (focusableElement?: HTMLElement) => void;
+};
+declare let PanelRenderFeatures: number;
+export type DisclosurePanelOwnProps = {
+    element?: HTMLElement;
+    transition?: boolean;
+} & PropsForFeatures<typeof PanelRenderFeatures>;
+export type DisclosurePanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DisclosurePanelOwnProps>;
+declare const DisclosurePanel: import("svelte").Component<DisclosurePanelProps, {}, "element">;
+type DisclosurePanel = ReturnType<typeof DisclosurePanel>;
+export default DisclosurePanel;