@pzerelles/headlessui-svelte 2.1.2-next.6 → 2.1.2-next.61

package/dist/dialog/InternalDialog.svelte

@@ -1,10 +1,9 @@
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { useMainTreeNode, useRootContainers } from "../hooks/use-root-containers.svelte.js"
   import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js"
   import { useNestedPortals } from "../portal/InternalPortal.svelte"
   import { getOwnerDocument } from "../utils/owner.js"
-  import { DEFAULT_DIALOG_TAG, DialogRenderFeatures, type DialogProps, type DialogRenderPropArg } from "./Dialog.svelte"
   import { useInertOthers } from "../hooks/use-inert-others.svelte.js"
   import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
   import { useEscape } from "../hooks/use-escape.svelte.js"
@@ -18,13 +17,15 @@
   import ForcePortalRoot from "../internal/ForcePortalRoot.svelte"
   import { createCloseContext } from "../internal/close-provider.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import type { ElementType } from "../utils/types.js"
   import { DialogStates, type DialogContext, type StateDefinition } from "./context.svelte.js"
   import { useDescriptions } from "../description/context.svelte.js"
+  import { BROWSER } from "esm-env"
+  import { DEFAULT_DIALOG_TAG, DialogRenderFeatures, type DialogProps, type DialogRenderPropArg } from "./Dialog.svelte"
+  import PortalWrapper from "../portal/PortalWrapper.svelte"
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-dialog-${internalId}`,
     open: theirOpen,
     onclose,
@@ -34,7 +35,7 @@
     __demoMode = false,
     unmount = false,
     ...theirProps
-  }: { as?: TTag } & DialogProps<TTag> = $props()
+  }: DialogProps = $props()
 
   let didWarnOnRole = $state(false)
 
@@ -53,15 +54,15 @@
     return "dialog"
   })
 
-  const usesOpenClosedState = useOpenClosed()
   // Update the `open` prop based on the open closed state
+  const usesOpenClosedState = useOpenClosed()
   const open = $derived(
     theirOpen === undefined && usesOpenClosedState !== null
       ? (usesOpenClosedState.value & State.Open) === State.Open
       : theirOpen
   )
 
-  const ownerDocument = $derived(getOwnerDocument(ref))
+  const ownerDocument = $derived(getOwnerDocument(element))
 
   const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed)
 
@@ -74,7 +75,8 @@
 
   const setTitleId = (id: string | null) => (_state.titleId = id)
 
-  const enabled = $derived(dialogState === DialogStates.Open)
+  const ready = BROWSER
+  const enabled = $derived(ready ? dialogState === DialogStates.Open : false)
   const nestedPortals = useNestedPortals()
   const { portals } = $derived(nestedPortals)
 
@@ -82,11 +84,7 @@
   // can result in `null` rather then the actual elements
   // This doesn't happen when using certain components like a
   // `<Dialog.Title>` because they cause the parent to re-render
-  const defaultContainer: { readonly current: HTMLElement | undefined } = {
-    get current() {
-      return _state.panelRef ?? ref
-    },
-  }
+  const defaultContainer = $derived(_state.panelRef ?? element)
 
   const mainTreeNode = useMainTreeNode()
   let { resolvedContainers: resolvedRootContainers } = $derived(
@@ -98,7 +96,7 @@
         return portals
       },
       get defaultContainers() {
-        return defaultContainer.current ? [defaultContainer.current] : []
+        return defaultContainer ? [defaultContainer] : []
       },
     })
   )
@@ -123,7 +121,7 @@
         return [
           // Allow the headlessui-portal of the Dialog to be interactive. This
           // contains the current dialog and the necessary focus guard elements.
-          ref?.closest<HTMLElement>("[data-headlessui-portal]") ?? null,
+          element?.closest<HTMLElement>("[data-headlessui-portal]") ?? null,
         ]
       },
       get disallowed() {
@@ -144,6 +142,7 @@
       return resolvedRootContainers
     },
     cb(event) {
+      console.log("close")
       event.preventDefault()
       close()
     },
@@ -199,7 +198,7 @@
       return enabled
     },
     get ref() {
-      return ref
+      return element
     },
     get ondisappear() {
       return close
@@ -215,6 +214,9 @@
     get panelRef() {
       return _state.panelRef
     },
+    set panelRef(value) {
+      _state.panelRef = value
+    },
     get dialogState() {
       return dialogState
     },
@@ -269,25 +271,27 @@
 
 <ForcePortalRoot force={true}>
   <Portal>
-    <PortalGroup target={ref ?? null}>
+    <PortalGroup target={element ?? null}>
       <ForcePortalRoot force={false}>
-        <FocusTrap
-          {initialFocus}
-          initialFocusFallback={ref}
-          containers={resolvedRootContainers}
-          features={focusTrapFeatures}
-        >
-          <ElementOrComponent
-            {ourProps}
-            {theirProps}
-            slots={slot}
-            defaultTag={DEFAULT_DIALOG_TAG}
-            features={DialogRenderFeatures}
-            visible={dialogState === DialogStates.Open}
-            name="Dialog"
-            bind:ref
-          />
-        </FocusTrap>
+        <PortalWrapper context={nestedPortals}>
+          <FocusTrap
+            {initialFocus}
+            initialFocusFallback={element}
+            containers={resolvedRootContainers}
+            features={focusTrapFeatures}
+          >
+            <ElementOrComponent
+              {ourProps}
+              theirProps={{ ...theirProps }}
+              slots={slot}
+              defaultTag={DEFAULT_DIALOG_TAG}
+              features={DialogRenderFeatures}
+              visible={dialogState === DialogStates.Open}
+              name="Dialog"
+              bind:element
+            />
+          </FocusTrap>
+        </PortalWrapper>
       </ForcePortalRoot>
     </PortalGroup>
   </Portal>

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

@@ -1,42 +1,4 @@
-import { DEFAULT_DIALOG_TAG, type DialogRenderPropArg } from "./Dialog.svelte";
-import type { ElementType } from "../utils/types.js";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | "unmount" | "static" | "id" | "role" | "onclose" | "initialFocus" | ("aria-describedby" | "aria-labelledby" | "aria-modal") | "open" | "transition" | "__demoMode"> 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<DialogRenderPropArg> | 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: DialogRenderPropArg) => string) | undefined;
-    } : {}) & {
-        static?: boolean | undefined;
-        unmount?: boolean | undefined;
-    } & {
-        id?: string;
-        open?: boolean;
-        onclose(value: boolean): void;
-        initialFocus?: HTMLElement;
-        role?: "dialog" | "alertdialog";
-        autofocus?: boolean;
-        transition?: boolean;
-        __demoMode?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_DIALOG_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_DIALOG_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 InternalDialog: $$IsomorphicComponent;
-type InternalDialog<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = InstanceType<typeof InternalDialog<TTag>>;
+import { type DialogProps } from "./Dialog.svelte";
+declare const InternalDialog: import("svelte").Component<DialogProps, {}, "element">;
+type InternalDialog = ReturnType<typeof InternalDialog>;
 export default InternalDialog;

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,99 @@
+<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
+    },
+    get asChild() {
+      return theirProps.asChild
+    },
+  })
+
+  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;