@pzerelles/headlessui-svelte 2.1.2-next.32 → 2.1.2-next.33

package/dist/popover/PopoverButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_BUTTON_TAG: "button";
 export type PopoverButtonSlot = {
     open: boolean;
@@ -9,33 +9,11 @@ export type PopoverButtonSlot = {
     autofocus: boolean;
 };
 export type PopoverButtonPropsWeControl = "aria-controls" | "aria-expanded";
-export type PopoverButtonComponentProps = {
+export type PopoverButtonProps = Props<typeof DEFAULT_BUTTON_TAG, PopoverButtonSlot, {
+    element?: HTMLElement;
+    id?: string;
     disabled?: boolean;
     autofocus?: boolean;
-};
-export type PopoverButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, PopoverButtonSlot, PopoverButtonPropsWeControl, PopoverButtonComponentProps>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | PopoverButtonPropsWeControl | keyof PopoverButtonComponentProps> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[PopoverButtonSlot & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: PopoverButtonSlot) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & PopoverButtonComponentProps;
-    events(): {};
-    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']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const PopoverButton: $$IsomorphicComponent;
-type PopoverButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof PopoverButton<TTag>>;
+}>;
+declare const PopoverButton: import("svelte").Component<PopoverButtonProps, {}, "element">;
 export default PopoverButton;

package/dist/popover/PopoverGroup.svelte

@@ -1,25 +1,26 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { setContext } from "svelte"
 
   const DEFAULT_GROUP_TAG = "div" as const
   type GroupRenderPropArg = {}
-  type GroupPropsWeControl = never
 
-  export type PopoverGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<
-    TTag,
+  export type PopoverGroupProps = Props<
+    typeof DEFAULT_GROUP_TAG,
     GroupRenderPropArg,
-    GroupPropsWeControl
+    {
+      element?: HTMLElement
+    }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
+<script lang="ts">
   import type { PopoverGroupContext, PopoverRegisterBag } from "./context.svelte"
   import MainTreeProvider from "../internal/MainTreeProvider.svelte"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import { getOwnerDocument } from "../utils/owner.js"
 
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & PopoverGroupProps<TTag> = $props()
+  let { element = $bindable(), ...theirProps }: PopoverGroupProps = $props()
 
   const popovers = $state<PopoverRegisterBag[]>([])
 
@@ -34,17 +35,17 @@
   }
 
   const isFocusWithinPopoverGroup = () => {
-    const ownerDocument = getOwnerDocument(ref)
+    const ownerDocument = getOwnerDocument(element)
     if (!ownerDocument) return false
-    let element = ownerDocument.activeElement
+    const el = ownerDocument.activeElement
 
-    if (ref?.contains(element)) return true
+    if (element?.contains(element)) return true
 
     // Check if the focus is in one of the button or panel elements. This is important in case you are rendering inside a Portal.
     return popovers.some((bag) => {
       return (
-        ownerDocument!.getElementById(bag.buttonId!)?.contains(element) ||
-        ownerDocument!.getElementById(bag.panelId!)?.contains(element)
+        ownerDocument!.getElementById(bag.buttonId!)?.contains(el) ||
+        ownerDocument!.getElementById(bag.panelId!)?.contains(el)
       )
     })
   }
@@ -66,5 +67,5 @@
 </script>
 
 <MainTreeProvider>
-  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_GROUP_TAG} name="PopoverGroup" bind:ref />
+  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_GROUP_TAG} name="PopoverGroup" bind:element />
 </MainTreeProvider>

package/dist/popover/PopoverGroup.svelte.d.ts

@@ -1,30 +1,8 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_GROUP_TAG: "div";
 type GroupRenderPropArg = {};
-type GroupPropsWeControl = never;
-export type PopoverGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: GroupRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_GROUP_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_GROUP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const PopoverGroup: $$IsomorphicComponent;
-type PopoverGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = InstanceType<typeof PopoverGroup<TTag>>;
+export type PopoverGroupProps = Props<typeof DEFAULT_GROUP_TAG, GroupRenderPropArg, {
+    element?: HTMLElement;
+}>;
+declare const PopoverGroup: import("svelte").Component<PopoverGroupProps, {}, "element">;
 export default PopoverGroup;

package/dist/popover/PopoverPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { RenderFeatures } from "../utils/render.js"
 
   const DEFAULT_PANEL_TAG = "div" as const
@@ -12,11 +12,12 @@
 
   type PanelPropsWeControl = "tabIndex"
 
-  export type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
-    TTag,
+  export type PopoverPanelProps = Props<
+    typeof DEFAULT_PANEL_TAG,
     PanelRenderPropArg,
-    PanelPropsWeControl,
     {
+      element?: HTMLElement
+      id?: string
       focus?: boolean
       anchor?: AnchorProps
       portal?: boolean
@@ -30,7 +31,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import { mergeProps } from "../utils/render.js"
@@ -63,15 +64,15 @@
 
   let internalId = useId()
   let {
-    ref = $bindable(),
-    id = `headlessui-popover-panel-${internalId}` as PropsOf<TTag>["id"],
+    element = $bindable(),
+    id = `headlessui-popover-panel-${internalId}`,
     focus = false,
     anchor: rawAnchor,
     portal: theirPortal = false,
     modal = false,
     transition = false,
     ...theirProps
-  }: { as?: TTag } & PopoverPanelProps<TTag> = $props()
+  }: PopoverPanelProps = $props()
 
   const context = usePopoverContext("PopoverPanel")
   const api = usePopoverAPIContext("PopoverPanel")
@@ -98,10 +99,10 @@
   const portal = $derived(!!anchor || theirPortal)
 
   $effect(() => {
-    if (anchor) setFloating(ref ?? null)
-    untrack(() => context.setPanel(ref))
+    if (anchor) setFloating(element ?? null)
+    untrack(() => context.setPanel(element))
   })
-  const ownerDocument = $derived(getOwnerDocument(ref))
+  const ownerDocument = $derived(getOwnerDocument(element))
 
   $effect(() => {
     id
@@ -119,7 +120,7 @@
       return transition
     },
     get element() {
-      return ref
+      return element
     },
     get show() {
       return usesOpenClosedState !== null
@@ -157,8 +158,8 @@
     switch (event.key) {
       case "Escape":
         if (context.popoverState !== PopoverStates.Open) return
-        if (!ref) return
-        if (ownerDocument?.activeElement && !ref.contains(ownerDocument.activeElement)) {
+        if (!element) return
+        if (ownerDocument?.activeElement && !element.contains(ownerDocument.activeElement)) {
           return
         }
         event.preventDefault()
@@ -183,12 +184,12 @@
     if (context.__demoMode) return
     if (!focus) return
     if (context.popoverState !== PopoverStates.Open) return
-    if (!ref) return
+    if (!element) return
 
     const activeElement = ownerDocument?.activeElement as HTMLElement
-    if (ref.contains(activeElement)) return // Already focused within Dialog
+    if (element.contains(activeElement)) return // Already focused within Dialog
 
-    focusIn(ref, Focus.First)
+    focusIn(element, Focus.First)
   }) //, [state.__demoMode, focus, internalPanelRef.current, state.popoverState])
 
   const slot = $derived({
@@ -211,8 +212,8 @@
           ? (event: FocusEvent) => {
               let el = event.relatedTarget as HTMLElement
               if (!el) return
-              if (!ref) return
-              if (ref.contains(el)) return
+              if (!element) return
+              if (element.contains(el)) return
 
               context.closePopover()
 
@@ -229,7 +230,7 @@
 
   const direction = useTabDirection()
   const handleBeforeFocus = () => {
-    let el = ref as HTMLElement
+    let el = element as HTMLElement
     if (!el) return
 
     function run() {
@@ -259,7 +260,7 @@
   }
 
   const handleAfterFocus = () => {
-    let el = ref as HTMLElement
+    let el = element as HTMLElement
     if (!el) return
 
     function run() {
@@ -277,7 +278,7 @@
 
           // Ignore sentinel buttons and items inside the panel
           for (const element of combined.slice()) {
-            if (element.dataset.headlessuiFocusGuard === "true" || ref?.contains(element)) {
+            if (element.dataset.headlessuiFocusGuard === "true" || element?.contains(element)) {
               let idx = combined.indexOf(element)
               if (idx !== -1) combined.splice(idx, 1)
             }
@@ -322,15 +323,17 @@
 
 <Portal enabled={portal ? theirProps.static || visible : false}>
   {#if visible && isPortalled}
-    <Hidden
-      id={beforePanelSentinelId}
-      bind:ref={context.beforePanelSentinel as HTMLElement}
-      features={HiddenFeatures.Focusable}
-      data-headlessui-focus-guard
-      as="button"
-      type="button"
-      onfocus={handleBeforeFocus}
-    />
+    <Hidden asChild id={beforePanelSentinelId} features={HiddenFeatures.Focusable}>
+      {#snippet children({ props })}
+        <button
+          {...props}
+          type="button"
+          data-headlessui-focus-guard
+          onfocus={handleBeforeFocus}
+          bind:this={context.beforePanelSentinel}>&zwnj;</button
+        >
+      {/snippet}
+    </Hidden>
   {/if}
   <ElementOrComponent
     {ourProps}
@@ -340,17 +343,19 @@
     features={PanelRenderFeatures}
     {visible}
     name="PopoverPanel"
-    bind:ref
+    bind:element
   />
   {#if visible && isPortalled}
-    <Hidden
-      id={afterPanelSentinelId}
-      bind:ref={context.afterPanelSentinel as HTMLElement}
-      features={HiddenFeatures.Focusable}
-      data-headlessui-focus-guard
-      as="button"
-      type="button"
-      onfocus={handleAfterFocus}
-    />
+    <Hidden asChild id={afterPanelSentinelId} features={HiddenFeatures.Focusable}>
+      {#snippet children({ props })}
+        <button
+          {...props}
+          type="button"
+          data-headlessui-focus-guard
+          onfocus={handleAfterFocus}
+          bind:this={context.afterPanelSentinel}>&zwnj;</button
+        >
+      {/snippet}
+    </Hidden>
   {/if}
 </Portal>

package/dist/popover/PopoverPanel.svelte.d.ts

@@ -1,11 +1,12 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_PANEL_TAG: "div";
 type PanelRenderPropArg = {
     open: boolean;
     close: (focusableElement?: HTMLElement) => void;
 };
-type PanelPropsWeControl = "tabIndex";
-export type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, {
+export type PopoverPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, {
+    element?: HTMLElement;
+    id?: string;
     focus?: boolean;
     anchor?: AnchorProps;
     portal?: boolean;
@@ -15,36 +16,5 @@ export type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TA
     unmount?: boolean;
 }>;
 import { type AnchorProps } from "../internal/floating.svelte.js";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "focus" | "anchor" | "unmount" | "static" | "tabIndex" | "transition" | "portal" | "modal"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[PanelRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: PanelRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        focus?: boolean;
-        anchor?: AnchorProps;
-        portal?: boolean;
-        modal?: boolean;
-        transition?: boolean;
-        static?: boolean;
-        unmount?: boolean;
-    };
-    events(): {};
-    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']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const PopoverPanel: $$IsomorphicComponent;
-type PopoverPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = InstanceType<typeof PopoverPanel<TTag>>;
+declare const PopoverPanel: import("svelte").Component<PopoverPanelProps, {}, "element">;
 export default PopoverPanel;

package/dist/popover/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Popover, type PopoverProps } from "./Popover.svelte";
 export { default as PopoverBackdrop, type PopoverBackdropProps } from "./PopoverBackdrop.svelte";
-export { default as PopoverButton, type PopoverButtonProps, type PopoverButtonComponentProps, type PopoverButtonSlot, type PopoverButtonPropsWeControl, } from "./PopoverButton.svelte";
+export { default as PopoverButton, type PopoverButtonProps, type PopoverButtonSlot, type PopoverButtonPropsWeControl, } from "./PopoverButton.svelte";
 export { default as PopoverGroup, type PopoverGroupProps } from "./PopoverGroup.svelte";
 export { default as PopoverPanel, type PopoverPanelProps } from "./PopoverPanel.svelte";

package/dist/portal/InternalPortal.svelte

@@ -3,8 +3,9 @@
   import { getOwnerDocument } from "../utils/owner.js"
   import { getContext, onMount, setContext } from "svelte"
   import { env } from "../utils/env.js"
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import type { PortalGroupContext } from "./PortalGroup.svelte"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   function usePortalTarget(options: { element: HTMLElement | null }): { readonly target: HTMLElement | null } {
     const { element } = $derived(options)
@@ -96,24 +97,24 @@
   type PortalRenderPropArg = {}
   type PortalPropsWeControl = never
 
-  export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<
-    TTag,
+  export type PortalProps = Props<
+    typeof DEFAULT_PORTAL_TAG,
     PortalRenderPropArg,
-    PortalPropsWeControl,
     {
+      element?: HTMLElement
       enabled?: boolean
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">
+<script lang="ts">
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & PortalProps<TTag> = $props()
+  let { element = $bindable(), ...theirProps }: PortalProps = $props()
 
   const portalTarget = usePortalTarget({
     get element() {
-      return ref ?? null
+      return element ?? null
     },
   })
   const { target } = $derived(portalTarget)
@@ -121,24 +122,24 @@
   //const ready = useServerHandoffComplete()
 
   $effect(() => {
-    if (!target || !ref) return
+    if (!target || !element) return
 
     // Element already exists in target, always calling target.appendChild(element) will cause a
     // brief unmount/remount.
-    if (ref.parentNode !== target) {
-      ref.setAttribute("data-headlessui-portal", "")
-      target.appendChild(ref)
+    if (element.parentNode !== target) {
+      element.setAttribute("data-headlessui-portal", "")
+      target.appendChild(element)
     }
   })
 
   onMount(() => {
-    if (parent) parent.register(ref!)
+    if (parent) parent.register(element!)
 
     return () => {
-      if (!target || !ref) return
+      if (!target || !element) return
 
-      if (ref instanceof Node && target.contains(ref)) {
-        target.removeChild(ref)
+      if (element instanceof Node && target.contains(element)) {
+        target.removeChild(element)
       }
 
       if (target.childNodes.length <= 0) {
@@ -149,5 +150,5 @@
 </script>
 
 {#if target}
-  <ElementOrComponent {theirProps} defaultTag={DEFAULT_PORTAL_TAG} name="InternalPortal" bind:ref />
+  <ElementOrComponent {theirProps} defaultTag={DEFAULT_PORTAL_TAG} name="InternalPortal" bind:element />
 {/if}

package/dist/portal/InternalPortal.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 type PortalParentContext = {
     register: (portal: HTMLElement) => () => void;
     unregister: (portal: HTMLElement) => void;
@@ -7,34 +7,9 @@ type PortalParentContext = {
 export declare function useNestedPortals(): PortalParentContext;
 export declare const DEFAULT_PORTAL_TAG = "div";
 type PortalRenderPropArg = {};
-type PortalPropsWeControl = never;
-export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<TTag, PortalRenderPropArg, PortalPropsWeControl, {
+export type PortalProps = Props<typeof DEFAULT_PORTAL_TAG, PortalRenderPropArg, {
+    element?: HTMLElement;
     enabled?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "enabled"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: PortalRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        enabled?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PORTAL_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_PORTAL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const InternalPortal: $$IsomorphicComponent;
-type InternalPortal<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = InstanceType<typeof InternalPortal<TTag>>;
+declare const InternalPortal: import("svelte").Component<PortalProps, {}, "element">;
 export default InternalPortal;

package/dist/portal/Portal.svelte

@@ -1,10 +1,11 @@
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">
-  import type { ElementType } from "../utils/types.js"
-  import InternalPortal, { DEFAULT_PORTAL_TAG, type PortalProps } from "./InternalPortal.svelte"
+<script lang="ts">
+  import InternalPortal, { type PortalProps } from "./InternalPortal.svelte"
 
-  let { ref = $bindable(), enabled = true, ...theirProps }: PortalProps<TTag> = $props()
+  let { element = $bindable(), enabled = true, ...theirProps }: PortalProps = $props()
 </script>
 
 {#if enabled}
-  <InternalPortal {...theirProps} bind:ref />
-{:else if theirProps.children}{@render theirProps.children()}{/if}
+  <InternalPortal {...theirProps} bind:element />
+{:else}
+  {@render theirProps.children?.({})}
+{/if}

package/dist/portal/Portal.svelte.d.ts

@@ -1,19 +1,3 @@
-import type { ElementType } from "../utils/types.js";
-import { DEFAULT_PORTAL_TAG, type PortalProps } from "./InternalPortal.svelte";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> {
-    props(): PortalProps<TTag>;
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PORTAL_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_PORTAL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Portal: $$IsomorphicComponent;
-type Portal<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = InstanceType<typeof Portal<TTag>>;
+import { type PortalProps } from "./InternalPortal.svelte";
+declare const Portal: import("svelte").Component<PortalProps, {}, "element">;
 export default Portal;

package/dist/portal/PortalGroup.svelte

@@ -1,29 +1,21 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { PropsAsChild } from "../utils/types.js"
 
   const DEFAULT_GROUP_TAG = "svelte:fragment"
   type GroupRenderPropArg = {}
-  type GroupPropsWeControl = never
 
   export type PortalGroupContext = {
     readonly target: HTMLElement | null
   }
 
-  export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<
-    TTag,
-    GroupRenderPropArg,
-    GroupPropsWeControl,
-    {
-      target: HTMLElement | null
-    }
-  >
+  export type PortalGroupProps = PropsAsChild<GroupRenderPropArg, { target: HTMLElement | null }>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
+<script lang="ts">
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import { setContext } from "svelte"
 
-  let { ref = $bindable(), target, ...theirProps }: { as?: TTag } & PortalGroupProps<TTag> = $props()
+  let { target, ...theirProps }: PortalGroupProps = $props()
 
   setContext("PortalGroupContext", {
     get target() {
@@ -32,4 +24,4 @@
   })
 </script>
 
-<ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="PortalGroup" bind:ref />
+<ElementOrComponent {theirProps} name="PortalGroup" />

package/dist/portal/PortalGroup.svelte.d.ts

@@ -1,37 +1,10 @@
-import type { ElementType, Props } from "../utils/types.js";
-declare const DEFAULT_GROUP_TAG = "svelte:fragment";
+import type { PropsAsChild } from "../utils/types.js";
 type GroupRenderPropArg = {};
-type GroupPropsWeControl = never;
 export type PortalGroupContext = {
     readonly target: HTMLElement | null;
 };
-export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl, {
+export type PortalGroupProps = PropsAsChild<GroupRenderPropArg, {
     target: HTMLElement | null;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "target"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: GroupRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        target: HTMLElement | null;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_GROUP_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_GROUP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const PortalGroup: $$IsomorphicComponent;
-type PortalGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = InstanceType<typeof PortalGroup<TTag>>;
+declare const PortalGroup: import("svelte").Component<PortalGroupProps, {}, "">;
 export default PortalGroup;