@pzerelles/headlessui-svelte 2.1.2-next.4 → 2.1.2-next.40

package/dist/description/context.svelte.js

@@ -1,8 +1,8 @@
 import { getContext, setContext } from "svelte";
 export function useDescriptionContext() {
-    let context = getContext("DescriptionContext");
-    if (context === null) {
-        let err = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
+    const context = getContext("DescriptionContext");
+    if (!context) {
+        const err = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useDescriptionContext);
         throw err;
@@ -18,10 +18,19 @@ export function useDescribedBy() {
     };
 }
 export const useDescriptions = (options = {}) => {
-    const { slot, name, props, inherit } = $derived(options);
-    let descriptionIds = $state([]);
+    const { slot, name, props } = $derived(options);
+    const descriptionIds = $state([]);
+    const register = (value) => {
+        descriptionIds.push(value);
+        return () => {
+            const idx = descriptionIds.indexOf(value);
+            if (idx !== -1)
+                descriptionIds.splice(idx, 1);
+        };
+    };
     const value = $derived(descriptionIds.length > 0 ? descriptionIds.join(" ") : undefined);
     const context = {
+        register,
         get slot() {
             return slot;
         },
@@ -34,17 +43,6 @@ export const useDescriptions = (options = {}) => {
         get value() {
             return value;
         },
-        register(value) {
-            descriptionIds.push(value);
-            return () => {
-                const clone = descriptionIds.slice();
-                const idx = clone.indexOf(value);
-                if (idx !== -1)
-                    clone.splice(idx, 1);
-                descriptionIds = clone;
-                return descriptionIds;
-            };
-        },
     };
     setContext("DescriptionContext", context);
     return context;

package/dist/description/index.d.ts

@@ -1 +1 @@
-export { default as Description, type DescriptionProps } from "./Description.svelte";
+export { default as Description, type DescriptionProps, type DescriptionOwnProps } from "./Description.svelte";

package/dist/dialog/Dialog.svelte

@@ -1,13 +1,9 @@
 <script lang="ts" module>
-  import { MainTreeProvider } from "../hooks/use-root-containers.svelte.js"
-  import { useOpenClosed } from "../internal/open-closed.js"
+  import type { Props } from "../utils/types.js"
   import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
-  import type { ElementType, Props } from "../utils/types.js"
-  import { getContext, type Component, type Snippet } from "svelte"
-  import InternalDialog from "./InternalDialog.svelte"
-  import Transition from "../transition/Transition.svelte"
 
   export const DEFAULT_DIALOG_TAG = "div" as const
+
   export type DialogRenderPropArg = {
     open: boolean
   }
@@ -15,31 +11,51 @@
 
   export const DialogRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<
-    TTag,
-    DialogRenderPropArg,
-    DialogPropsWeControl,
-    PropsForFeatures<typeof DialogRenderFeatures> & {
-      id?: string
-      open?: boolean
-      onclose(value: boolean): void
-      initialFocus?: HTMLElement
-      role?: "dialog" | "alertdialog"
-      autofocus?: boolean
-      transition?: boolean
-      __demoMode?: boolean
-    }
-  >
+  export type DialogOwnProps = PropsForFeatures<typeof DialogRenderFeatures> & {
+    element?: HTMLElement
+    id?: string
+    open?: boolean
+    onclose(value: boolean): void
+    initialFocus?: HTMLElement
+    role?: "dialog" | "alertdialog"
+    autofocus?: boolean
+    transition?: boolean
+    __demoMode?: boolean
+  }
 
-  export type DialogChildren = Snippet<[DialogRenderPropArg]>
+  export type DialogProps = Props<typeof DEFAULT_DIALOG_TAG, DialogRenderPropArg, DialogOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">
-  let { ref = $bindable(), transition = false, open, ...rest }: { as?: TTag } & DialogProps<TTag> = $props()
+<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 { 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"
+  import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js"
+  import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js"
+  import { setContext } from "svelte"
+  import { useIsTouchDevice } from "../hooks/use-is-touch-device.svelte.js"
+  import FocusTrap, { FocusTrapFeatures } from "../focus-trap/FocusTrap.svelte"
+  import Portal from "../portal/Portal.svelte"
+  import PortalGroup from "../portal/PortalGroup.svelte"
+  import ForcePortalRoot from "../internal/ForcePortalRoot.svelte"
+  import { createCloseContext } from "../internal/close-provider.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { DialogStates, type DialogContext, type StateDefinition } from "./context.svelte.js"
+  import { useDescriptions } from "../description/context.svelte.js"
+  import MainTreeProvider from "../internal/MainTreeProvider.svelte"
+  import Transition from "../transition/Transition.svelte"
+  import { BROWSER } from "esm-env"
+
+  let { element = $bindable(), transition = false, open: theirOpen, ...rest }: DialogProps = $props()
 
   // Validations
   const usesOpenClosedState = useOpenClosed()
-  const hasOpen = $derived(open !== undefined || usesOpenClosedState)
+  const hasOpen = $derived(theirOpen !== undefined || usesOpenClosedState)
   const hasOnClose = $derived(rest.hasOwnProperty("onclose"))
 
   $effect(() => {
@@ -68,19 +84,287 @@
     }
   })
 
-  const DialogComponent = InternalDialog as Component<DialogProps<TTag>, any>
+  const internalId = useId()
+  let {
+    id = `headlessui-dialog-${internalId}`,
+    onclose,
+    initialFocus,
+    role: theirRole = "dialog",
+    autofocus = true,
+    __demoMode = false,
+    unmount = false,
+    ...theirProps
+  } = $derived(rest)
+
+  let didWarnOnRole = $state(false)
+
+  const role = $derived.by(() => {
+    if (theirRole === "dialog" || theirRole === "alertdialog") {
+      return theirRole
+    }
+
+    if (!didWarnOnRole) {
+      didWarnOnRole = true
+      console.warn(
+        `Invalid role [${theirRole}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`
+      )
+    }
+
+    return "dialog"
+  })
+
+  // Update the `open` prop based on the open closed state
+  const open = $derived(
+    theirOpen === undefined && usesOpenClosedState !== null
+      ? (usesOpenClosedState.value & State.Open) === State.Open
+      : theirOpen
+  )
+
+  const ownerDocument = $derived(getOwnerDocument(element))
+
+  const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed)
+
+  let _state = $state({
+    titleId: null,
+    panelRef: null,
+  } as StateDefinition)
+
+  const close = $derived(() => onclose(false))
+
+  const setTitleId = (id: string | null) => (_state.titleId = id)
+
+  const ready = BROWSER
+  const enabled = $derived(ready ? dialogState === DialogStates.Open : false)
+  const nestedPortals = useNestedPortals()
+  const { portals } = $derived(nestedPortals)
+
+  // We use this because reading these values during initial render(s)
+  // 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 ?? element
+    },
+  }
+
+  const mainTreeNode = useMainTreeNode()
+  let { resolvedContainers: resolvedRootContainers } = $derived(
+    useRootContainers({
+      get mainTreeNode() {
+        return mainTreeNode.node
+      },
+      get portals() {
+        return portals
+      },
+      get defaultContainers() {
+        return defaultContainer.current ? [defaultContainer.current] : []
+      },
+    })
+  )
+
+  // When the `Dialog` is wrapped in a `Transition` (or another Headless UI component that exposes
+  // the OpenClosed state) then we get some information via context about its state. When the
+  // `Transition` is about to close, then the `State.Closing` state will be exposed. This allows us
+  // to enable/disable certain functionality in the `Dialog` upfront instead of waiting until the
+  // `Transition` is done transitioning.
+  const isClosing = $derived(
+    usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Closing) === State.Closing : false
+  )
+
+  // Ensure other elements can't be interacted with
+  const inertOthersEnabled = $derived(__demoMode ? false : isClosing ? false : enabled)
+  useInertOthers({
+    get enabled() {
+      return inertOthersEnabled
+    },
+    elements: {
+      get allowed() {
+        return [
+          // Allow the headlessui-portal of the Dialog to be interactive. This
+          // contains the current dialog and the necessary focus guard elements.
+          element?.closest<HTMLElement>("[data-headlessui-portal]") ?? null,
+        ]
+      },
+      get disallowed() {
+        return [
+          // Disallow the "main" tree root node
+          mainTreeNode.node?.closest<HTMLElement>("body > *:not(#headlessui-portal-root)") ?? null,
+        ]
+      },
+    },
+  })
+
+  // Close Dialog on outside click
+  useOutsideClick({
+    get enabled() {
+      return enabled
+    },
+    get containers() {
+      return resolvedRootContainers
+    },
+    cb(event) {
+      event.preventDefault()
+      close()
+    },
+  })
+
+  // Handle `Escape` to close
+  useEscape({
+    get enabled() {
+      return enabled
+    },
+    get view() {
+      return ownerDocument?.defaultView ?? null
+    },
+    cb(event) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      // Ensure that we blur the current activeElement to prevent maintaining
+      // focus and potentially scrolling the page to the end (because the Dialog
+      // is rendered in a Portal at the end of the document.body and the browser
+      // tries to keep the focused element in view)
+      //
+      // Typically only happens in Safari.
+      if (
+        document.activeElement &&
+        "blur" in document.activeElement &&
+        typeof document.activeElement.blur === "function"
+      ) {
+        document.activeElement.blur()
+      }
+
+      close()
+    },
+  })
+
+  // Scroll lock
+  const scrollLockEnabled = $derived(__demoMode ? false : isClosing ? false : enabled)
+  useScrollLock({
+    get enabled() {
+      return scrollLockEnabled
+    },
+    get ownerDocument() {
+      return ownerDocument
+    },
+    resolveAllowedContainers() {
+      return resolvedRootContainers
+    },
+  })
+
+  // Ensure we close the dialog as soon as the dialog itself becomes hidden
+  useOnDisappear({
+    get enabled() {
+      return enabled
+    },
+    get ref() {
+      return element
+    },
+    get ondisappear() {
+      return close
+    },
+  })
+
+  const describedby = useDescriptions()
+
+  setContext<DialogContext>("DialogContext", {
+    get titleId() {
+      return _state.titleId
+    },
+    get panelRef() {
+      return _state.panelRef
+    },
+    get dialogState() {
+      return dialogState
+    },
+    get close() {
+      return close
+    },
+    get unmount() {
+      return unmount
+    },
+    setTitleId,
+  })
+
+  const slot = $derived({ open: dialogState === DialogStates.Open } satisfies DialogRenderPropArg)
+
+  const ourProps = $derived({
+    id,
+    role,
+    tabIndex: -1,
+    "aria-modal": __demoMode ? undefined : dialogState === DialogStates.Open ? true : undefined,
+    "aria-labelledby": _state.titleId,
+    "aria-describedby": describedby.value,
+    unmount,
+  })
+
+  const shouldMoveFocusInside = !useIsTouchDevice().value
+  const focusTrapFeatures = $derived.by(() => {
+    let focusTrapFeatures = FocusTrapFeatures.None
+
+    if (enabled && !__demoMode) {
+      focusTrapFeatures |= FocusTrapFeatures.RestoreFocus
+      focusTrapFeatures |= FocusTrapFeatures.TabLock
+
+      if (autofocus) {
+        focusTrapFeatures |= FocusTrapFeatures.AutoFocus
+      }
+
+      if (shouldMoveFocusInside) {
+        focusTrapFeatures |= FocusTrapFeatures.InitialFocus
+      }
+    }
+
+    return focusTrapFeatures
+  })
+
+  clearOpenClosedContext()
+  createCloseContext({
+    get close() {
+      return close
+    },
+  })
 </script>
 
-{#if (open !== undefined || transition) && !rest.static}
+{#snippet internal(transitionProps?: Record<string, any>)}
+  <ForcePortalRoot force={true}>
+    <Portal>
+      <PortalGroup target={element ?? null}>
+        <ForcePortalRoot force={false}>
+          <FocusTrap
+            {initialFocus}
+            initialFocusFallback={element}
+            containers={resolvedRootContainers}
+            features={focusTrapFeatures}
+          >
+            <ElementOrComponent
+              {ourProps}
+              theirProps={{ ...theirProps, ...transitionProps }}
+              slots={slot}
+              defaultTag={DEFAULT_DIALOG_TAG}
+              features={DialogRenderFeatures}
+              visible={dialogState === DialogStates.Open}
+              name="Dialog"
+              bind:element
+            />
+          </FocusTrap>
+        </ForcePortalRoot>
+      </PortalGroup>
+    </Portal>
+  </ForcePortalRoot>
+{/snippet}
+
+{#if (open !== undefined || transition) && !theirProps.static}
   <MainTreeProvider>
-    <Transition show={open} {transition} unmount={rest.unmount} {ref}>
-      {#snippet children(slot, props)}
-        <DialogComponent bind:ref {...props} {...rest} />
+    <Transition asChild show={open} {transition} unmount={rest.unmount} {element}>
+      {#snippet children({ props })}
+        {@render internal(props)}
       {/snippet}
     </Transition>
   </MainTreeProvider>
 {:else}
   <MainTreeProvider>
-    <DialogComponent bind:ref {open} {...rest} />
+    {@render internal()}
   </MainTreeProvider>
 {/if}

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

@@ -1,13 +1,12 @@
+import type { Props } from "../utils/types.js";
 import { type PropsForFeatures } from "../utils/render.js";
-import type { ElementType, Props } from "../utils/types.js";
-import { type Snippet } from "svelte";
 export declare const DEFAULT_DIALOG_TAG: "div";
 export type DialogRenderPropArg = {
     open: boolean;
 };
-type DialogPropsWeControl = "aria-describedby" | "aria-labelledby" | "aria-modal";
 export declare const DialogRenderFeatures: number;
-export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & {
+export type DialogOwnProps = PropsForFeatures<typeof DialogRenderFeatures> & {
+    element?: HTMLElement;
     id?: string;
     open?: boolean;
     onclose(value: boolean): void;
@@ -16,45 +15,8 @@ export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> =
     autofocus?: boolean;
     transition?: boolean;
     __demoMode?: boolean;
-}>;
-export type DialogChildren = Snippet<[DialogRenderPropArg]>;
-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" | DialogPropsWeControl | "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 Dialog: $$IsomorphicComponent;
-type Dialog<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = InstanceType<typeof Dialog<TTag>>;
+};
+export type DialogProps = Props<typeof DEFAULT_DIALOG_TAG, DialogRenderPropArg, DialogOwnProps>;
+declare const Dialog: import("svelte").Component<DialogProps, {}, "element">;
+type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/dialog/DialogBackdrop.svelte

@@ -1,26 +1,23 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_BACKDROP_TAG = "div" as const
-  type BackdropRenderPropArg = {
+  export type BackdropRenderPropArg = {
     open: boolean
   }
 
-  export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<
-    TTag,
-    BackdropRenderPropArg,
-    never,
-    { transition?: boolean }
-  >
+  export type DialogBackdropOwnProps = { transition?: boolean; element?: HTMLElement }
+
+  export type DialogBackdropProps = Props<typeof DEFAULT_BACKDROP_TAG, BackdropRenderPropArg, DialogBackdropOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">
+<script lang="ts">
   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"
 
-  let { ref = $bindable(), transition = false, ...theirProps }: { as?: TTag } & DialogBackdropProps<TTag> = $props()
+  let { element = $bindable(), transition = false, ...theirProps }: DialogBackdropProps = $props()
   const _state = useDialogContext("Dialog.Panel")
   const { dialogState, unmount } = $derived(_state)
 
@@ -32,15 +29,15 @@
 </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_BACKDROP_TAG}
         name="DialogBackdrop"
-        bind:ref
+        bind:element
       />
     {/snippet}
   </TransitionChild>
@@ -51,6 +48,6 @@
     slots={slot}
     defaultTag={DEFAULT_BACKDROP_TAG}
     name="DialogBackdrop"
-    bind:ref
+    bind:element
   />
 {/if}

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

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