@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.1-next.1

package/dist/listbox/ListboxOptions.svelte

@@ -0,0 +1,267 @@
+<script lang="ts" context="module">import { mergeProps, RenderFeatures } from "../utils/render.js";
+import {
+  useFloatingPanel,
+  useFloatingPanelProps,
+  useResolvedAnchor
+} from "../internal/floating.svelte.js";
+const DEFAULT_OPTIONS_TAG = "div";
+let OptionsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
+</script>
+
+<script lang="ts" generics="TTag extends ElementType">import { useId } from "../hooks/use-id.js";
+import { ListboxStates, useActions, useData, ValueMode } from "./Listbox.svelte";
+import { getOwnerDocument } from "../utils/owner.js";
+import { State, useOpenClosed } from "../internal/open-closed.js";
+import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js";
+import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js";
+import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js";
+import { useInertOthers } from "../hooks/use-inert-others.svelte.js";
+import { useDidElementMove } from "../hooks/use-did-element-move.svelte.js";
+import { useFrozenData } from "../internal/frozen.svelte.js";
+import { useDisposables } from "../utils/disposables.js";
+import { match } from "../utils/match.js";
+import { Focus } from "../utils/calculate-active-index.js";
+import { focusFrom, Focus as FocusManagementFocus } from "../utils/focus-management.js";
+import { useElementSize } from "../hooks/use-element-size.svelte.js";
+import { getContext, setContext } from "svelte";
+import Hidden from "../internal/Hidden.svelte";
+import Portal from "../portal/Portal.svelte";
+import { stateFromSlot } from "../utils/state.js";
+const internalId = useId();
+let {
+  as = DEFAULT_OPTIONS_TAG,
+  ref = $bindable(),
+  id = `headlessui-listbox-options-${internalId}`,
+  anchor: rawAnchor,
+  portal = false,
+  modal = true,
+  transition = false,
+  children,
+  static: isStatic = false,
+  unmount = true,
+  ...theirProps
+} = $props();
+const anchor = $derived(useResolvedAnchor(rawAnchor));
+$effect(() => {
+  if (anchor) {
+    portal = true;
+  }
+});
+const data = useData("ListboxOptions");
+const actions = useActions("ListboxOptions");
+const ownerDocument = $derived(getOwnerDocument(data.optionsRef.current));
+const usesOpenClosedState = useOpenClosed();
+const show = $derived(
+  usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : data.listboxState === ListboxStates.Open
+);
+const _transition = useTransition({
+  get enabled() {
+    return transition;
+  },
+  get element() {
+    return ref;
+  },
+  get show() {
+    return show;
+  }
+});
+const { visible, data: transitionData } = $derived(_transition);
+useOnDisappear({
+  get enabled() {
+    return visible;
+  },
+  get ref() {
+    return data.buttonRef.current;
+  },
+  get ondisappear() {
+    return actions.closeListbox;
+  }
+});
+const scrollLockEnabled = $derived(data.__demoMode ? false : modal && data.listboxState === ListboxStates.Open);
+useScrollLock({
+  get enabled() {
+    return scrollLockEnabled;
+  },
+  get ownerDocument() {
+    return ownerDocument;
+  }
+});
+const inertOthersEnabled = $derived(data.__demoMode ? false : modal && data.listboxState === ListboxStates.Open);
+useInertOthers({
+  get enabled() {
+    return inertOthersEnabled;
+  },
+  elements: {
+    get allowed() {
+      return () => [data.buttonRef.current, data.optionsRef.current];
+    }
+  }
+});
+const didElementMoveEnabled = $derived(data.listboxState !== ListboxStates.Open);
+const didButtonMove = useDidElementMove({
+  get enabled() {
+    return didElementMoveEnabled;
+  },
+  get element() {
+    return data.buttonRef.current;
+  }
+});
+const panelEnabled = $derived(didButtonMove.value ? false : visible);
+const shouldFreeze = $derived(visible && data.listboxState === ListboxStates.Closed);
+const frozenValue = useFrozenData({
+  get freeze() {
+    return shouldFreeze;
+  },
+  get data() {
+    return data.value;
+  }
+});
+const isSelected = (compareValue) => data.compare(frozenValue, compareValue);
+const selectedOptionIndex = () => {
+  if (anchor == null) return null;
+  if (!anchor?.to?.includes("selection")) return null;
+  let idx = data.options.findIndex((option) => isSelected(option.dataRef.current.value));
+  if (idx === -1) idx = 0;
+  return idx;
+};
+const anchorOptions = (() => {
+  if (anchor == null) return void 0;
+  if (selectedOptionIndex === null) return { ...anchor, inner: void 0 };
+  let elements = Array.from(data.listRef.current.values());
+  return {
+    ...anchor,
+    inner: {
+      listRef: { current: elements },
+      index: selectedOptionIndex
+    }
+  };
+})();
+const floatingPanel = useFloatingPanel(anchorOptions);
+const { setFloating, style } = $derived(floatingPanel);
+const getFloatingPanelProps = useFloatingPanelProps();
+$effect(() => {
+  data.optionsRef.current = ref || null;
+  if (anchor) setFloating(ref);
+});
+const searchDisposables = useDisposables();
+const { listboxState, optionsRef } = $derived(data);
+$effect(() => {
+  let container = optionsRef.current;
+  if (!container) return;
+  if (listboxState !== ListboxStates.Open) return;
+  if (container === getOwnerDocument(container)?.activeElement) return;
+  container?.focus({ preventScroll: true });
+});
+const handleKeyDown = (event) => {
+  searchDisposables.dispose();
+  switch (event.key) {
+    case " ":
+      if (data.searchQuery !== "") {
+        event.preventDefault();
+        event.stopPropagation();
+        return actions.search(event.key);
+      }
+    case "Enter":
+      event.preventDefault();
+      event.stopPropagation();
+      if (data.activeOptionIndex !== null) {
+        let { dataRef } = data.options[data.activeOptionIndex];
+        actions.onChange(dataRef.current.value);
+      }
+      if (data.mode === ValueMode.Single) {
+        actions.closeListbox();
+        data.buttonRef.current?.focus({ preventScroll: true });
+      }
+      break;
+    case match(data.orientation, { vertical: "ArrowDown", horizontal: "ArrowRight" }):
+      event.preventDefault();
+      event.stopPropagation();
+      return actions.goToOption(Focus.Next);
+    case match(data.orientation, { vertical: "ArrowUp", horizontal: "ArrowLeft" }):
+      event.preventDefault();
+      event.stopPropagation();
+      return actions.goToOption(Focus.Previous);
+    case "Home":
+    case "PageUp":
+      event.preventDefault();
+      event.stopPropagation();
+      return actions.goToOption(Focus.First);
+    case "End":
+    case "PageDown":
+      event.preventDefault();
+      event.stopPropagation();
+      return actions.goToOption(Focus.Last);
+    case "Escape":
+      event.preventDefault();
+      event.stopPropagation();
+      actions.closeListbox();
+      data.buttonRef.current?.focus({ preventScroll: true });
+      return;
+    case "Tab":
+      event.preventDefault();
+      event.stopPropagation();
+      actions.closeListbox();
+      focusFrom(data.buttonRef.current, event.shiftKey ? FocusManagementFocus.Previous : FocusManagementFocus.Next);
+      break;
+    default:
+      if (event.key.length === 1) {
+        actions.search(event.key);
+        searchDisposables.setTimeout(() => actions.clearSearch(), 350);
+      }
+      break;
+  }
+};
+const labelledby = $derived(data.buttonRef.current?.id);
+const slot = $derived({
+  open: data.listboxState === ListboxStates.Open
+});
+const buttonSize = useElementSize({
+  get element() {
+    return data.buttonRef.current;
+  },
+  unit: true
+});
+const ourProps = $derived(
+  mergeProps(anchor ? getFloatingPanelProps() : {}, {
+    id,
+    ref: optionsRef,
+    "aria-activedescendant": data.activeOptionIndex === null ? void 0 : data.options[data.activeOptionIndex]?.id,
+    "aria-multiselectable": data.mode === ValueMode.Multi ? true : void 0,
+    "aria-labelledby": labelledby,
+    "aria-orientation": data.orientation,
+    onkeydown: handleKeyDown,
+    role: "listbox",
+    // When the `Listbox` is closed, it should not be focusable. This allows us
+    // to skip focusing the `ListboxOptions` when pressing the tab key on an
+    // open `Listbox`, and go to the next focusable element.
+    tabIndex: data.listboxState === ListboxStates.Open ? 0 : void 0,
+    style: [theirProps.style, style, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
+    ...transitionDataAttributes(transitionData),
+    ...stateFromSlot(slot)
+  })
+);
+const derivedData = {
+  ...data,
+  get isSelected() {
+    return data.mode === ValueMode.Multi ? data.isSelected : isSelected;
+  }
+};
+setContext("ListboxDataContext", derivedData);
+</script>
+
+<Portal enabled={portal ? isStatic || visible : false}>
+  {#if !panelEnabled && unmount && !isStatic}
+    <Hidden as="span" bind:ref aria-hidden="true" {...ourProps} />
+  {:else}
+    <svelte:element
+      this={as}
+      bind:this={ref}
+      {...ourProps}
+      {...theirProps}
+      hidden={isStatic || panelEnabled ? undefined : true}
+      style={isStatic || panelEnabled ? theirProps.style : "display: none;"}
+    >
+      {#if children}{@render children(slot)}{/if}
+    </svelte:element>
+  {/if}
+</Portal>

package/dist/listbox/ListboxOptions.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { ElementType, HTMLElementType, Props } from "../utils/types.js";
+import { type PropsForFeatures } from "../utils/render.js";
+import { type AnchorPropsWithSelection } from "../internal/floating.svelte.js";
+declare const DEFAULT_OPTIONS_TAG: "div";
+type OptionsRenderPropArg = {
+    open: boolean;
+};
+type OptionsPropsWeControl = "aria-activedescendant" | "aria-labelledby" | "aria-multiselectable" | "aria-orientation" | "role" | "tabIndex";
+declare let OptionsRenderFeatures: number;
+export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, {
+    anchor?: AnchorPropsWithSelection;
+    portal?: boolean;
+    modal?: boolean;
+    transition?: boolean;
+    ref?: HTMLElementType<TTag> | null;
+} & PropsForFeatures<typeof OptionsRenderFeatures>>;
+export type ListboxOptionsChildren = Snippet<[OptionsRenderPropArg]>;
+import { type Snippet } from "svelte";
+declare class __sveltets_Render<TTag extends ElementType> {
+    props(): ListboxOptionsProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType>(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>(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 ListboxOptions: $$IsomorphicComponent;
+type ListboxOptions<TTag extends ElementType> = InstanceType<typeof ListboxOptions<TTag>>;
+export default ListboxOptions;

package/dist/listbox/ListboxSelectedOption.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" context="module">const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType, TType">import { useData, ValueMode } from "./Listbox.svelte";
+import { setContext } from "svelte";
+let {
+  as = DEFAULT_SELECTED_OPTION_TAG,
+  options,
+  placeholder,
+  ...theirProps
+} = $props();
+const data = useData("ListboxSelectedOption");
+const shouldShowPlaceholder = $derived(
+  data.value === void 0 || data.value === null || data.mode === ValueMode.Multi && Array.isArray(data.value) && data.value.length === 0
+);
+setContext("SelectedOptionContext", true);
+</script>
+
+<svelte:element this={as} {...theirProps}>
+  {#if placeholder && shouldShowPlaceholder}
+    <svelte:component this={placeholder} />
+  {:else}
+    <svelte:component this={options} />
+  {/if}
+</svelte:element>

package/dist/listbox/ListboxSelectedOption.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { ElementType, Props } from "../utils/types.js";
+import type { Component } from "svelte";
+declare const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
+type SelectedOptionRenderPropArg = {};
+type SelectedOptionPropsWeControl = never;
+export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<TTag, SelectedOptionRenderPropArg, SelectedOptionPropsWeControl, {
+    options: Component;
+    placeholder?: Component;
+}>;
+declare class __sveltets_Render<TTag extends ElementType, TType> {
+    props(): ListboxSelectedOptionProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType, TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType>['props']>, ReturnType<__sveltets_Render<TTag, TType>['events']>, ReturnType<__sveltets_Render<TTag, TType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TTag, TType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TTag, TType>['exports']>;
+    <TTag extends ElementType, TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
+    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ListboxSelectedOption: $$IsomorphicComponent;
+type ListboxSelectedOption<TTag extends ElementType, TType> = InstanceType<typeof ListboxSelectedOption<TTag, TType>>;
+export default ListboxSelectedOption;

package/dist/listbox/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Listbox, type ListboxProps, type ListboxChildren } from "./Listbox.svelte";
+export { default as ListboxButton, type ListboxButtonProps, type ListboxButtonChildren } from "./ListboxButton.svelte";
+export { default as ListboxOption, type ListboxOptionProps, type ListboxOptionChildren } from "./ListboxOption.svelte";
+export { default as ListboxOptions, type ListboxOptionsProps, type ListboxOptionsChildren, } from "./ListboxOptions.svelte";
+export { default as ListboxSelectedOption, type ListboxSelectedOptionProps } from "./ListboxSelectedOption.svelte";

package/dist/listbox/index.js

@@ -0,0 +1,5 @@
+export { default as Listbox } from "./Listbox.svelte";
+export { default as ListboxButton } from "./ListboxButton.svelte";
+export { default as ListboxOption } from "./ListboxOption.svelte";
+export { default as ListboxOptions, } from "./ListboxOptions.svelte";
+export { default as ListboxSelectedOption } from "./ListboxSelectedOption.svelte";

package/dist/portal/InternalPortal.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" context="module">import { usePortalRoot } from "../internal/portal-force-root.svelte.js";
+import { getOwnerDocument } from "../utils/owner.js";
+import { getContext, onMount, setContext } from "svelte";
+import { env } from "../utils/env.js";
+import Portal from "../internal/Portal.svelte";
+function usePortalTarget(options) {
+  const { element } = $derived(options);
+  const forceInRoot = usePortalRoot();
+  const groupTarget = getContext("PortalGroupContext");
+  const ownerDocument = $derived(getOwnerDocument(element));
+  const initialTarget = () => {
+    if (!forceInRoot && groupTarget !== null) return groupTarget.current ?? null;
+    if (env.isServer) return null;
+    let existingRoot = ownerDocument?.getElementById("headlessui-portal-root");
+    if (existingRoot) return existingRoot;
+    if (ownerDocument === null) return null;
+    let root = ownerDocument.createElement("div");
+    root.setAttribute("id", "headlessui-portal-root");
+    return ownerDocument.body.appendChild(root);
+  };
+  let target = $state(initialTarget());
+  $effect(() => {
+    if (target === null) return;
+    if (!ownerDocument?.body.contains(target)) {
+      ownerDocument?.body.appendChild(target);
+    }
+  });
+  $effect(() => {
+    if (forceInRoot) return;
+    if (groupTarget === null) return;
+    target = groupTarget.current;
+  });
+  return {
+    get target() {
+      return target;
+    }
+  };
+}
+export function useNestedPortals() {
+  const parent = getContext("PortalParentContext");
+  const portals = $state([]);
+  const register = (portal) => {
+    portals.push(portal);
+    if (parent) parent.register(portal);
+    return () => unregister(portal);
+  };
+  const unregister = (portal) => {
+    let idx = portals.indexOf(portal);
+    if (idx !== -1) portals.splice(idx, 1);
+    if (parent) parent.unregister(portal);
+  };
+  const context = {
+    register,
+    unregister,
+    get portals() {
+      return portals;
+    }
+  };
+  setContext("PortalParentContext", context);
+  return context;
+}
+export const DEFAULT_PORTAL_TAG = "svelte:fragment";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType">let { as = DEFAULT_PORTAL_TAG, children, ...theirProps } = $props();
+let internalPortalRootRef = $state(null);
+const portalRef = $derived(internalPortalRootRef);
+const ownerDocument = $derived(getOwnerDocument(internalPortalRootRef));
+const portalTarget = usePortalTarget({
+  get element() {
+    return internalPortalRootRef;
+  }
+});
+const { target } = $derived(portalTarget);
+const element = $derived(env.isServer ? null : ownerDocument?.createElement("div") ?? null);
+const parent = getContext("PortalParentContext");
+$effect(() => {
+  if (!target || !element) return;
+  if (!target.contains(element)) {
+    element.setAttribute("data-headlessui-portal", "");
+    target.appendChild(element);
+  }
+});
+$effect(() => {
+  if (!element) return;
+  if (!parent) return;
+  return parent.register(element);
+});
+onMount(() => {
+  return () => {
+    if (!target || !element) return;
+    if (element instanceof Node && target.contains(element)) {
+      target.removeChild(element);
+    }
+    if (target.childNodes.length <= 0) {
+      target.parentElement?.removeChild(target);
+    }
+  };
+});
+</script>
+
+{#if target && element}
+  <Portal target={element}>
+    <svelte:element this={as} bind:this={internalPortalRootRef} {...theirProps}>
+      {#if children}{@render children({})}{/if}
+    </svelte:element>
+  </Portal>
+{/if}

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

@@ -0,0 +1,34 @@
+import type { ElementType, Props } from "../utils/types.js";
+type PortalParentContext = {
+    register: (portal: HTMLElement) => () => void;
+    unregister: (portal: HTMLElement) => void;
+    readonly portals: HTMLElement[];
+};
+export declare function useNestedPortals(): PortalParentContext;
+export declare const DEFAULT_PORTAL_TAG = "svelte:fragment";
+type PortalRenderPropArg = {};
+type PortalPropsWeControl = never;
+export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<TTag, PortalRenderPropArg, PortalPropsWeControl, {
+    enabled?: boolean;
+}>;
+declare class __sveltets_Render<TTag extends ElementType> {
+    props(): PortalProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType>(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>(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 InternalPortal: $$IsomorphicComponent;
+type InternalPortal<TTag extends ElementType> = InstanceType<typeof InternalPortal<TTag>>;
+export default InternalPortal;

package/dist/portal/Portal.svelte

@@ -0,0 +1,11 @@
+<script lang="ts" generics="TTag extends ElementType">import InternalPortal, { DEFAULT_PORTAL_TAG } from "./InternalPortal.svelte";
+let { as = DEFAULT_PORTAL_TAG, enabled = true, children, ...theirProps } = $props();
+</script>
+
+{#if enabled}
+  <InternalPortal {...theirProps} />
+{:else}
+  <svelte:element this={as} {...theirProps}>
+    {#if children}{@render children({})}{/if}
+  </svelte:element>
+{/if}

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

@@ -0,0 +1,23 @@
+import type { ElementType } from "../utils/types.js";
+import { type PortalProps } from "./InternalPortal.svelte";
+declare class __sveltets_Render<TTag extends ElementType> {
+    props(): PortalProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType>(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>(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 Portal: $$IsomorphicComponent;
+type Portal<TTag extends ElementType> = InstanceType<typeof Portal<TTag>>;
+export default Portal;

package/dist/portal/PortalGroup.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" context="module">const DEFAULT_GROUP_TAG = "svelte:fragment";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType">import { setContext } from "svelte";
+let { as = DEFAULT_GROUP_TAG, target, children, ...theirProps } = $props();
+setContext("PortalGroupContext", {
+  get target() {
+    return target;
+  }
+});
+</script>
+
+<svelte:element this={as} {...theirProps}>
+  {#if children}{@render children({})}{/if}
+</svelte:element>

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

@@ -0,0 +1,31 @@
+import type { ElementType, Props } from "../utils/types.js";
+declare const DEFAULT_GROUP_TAG = "svelte:fragment";
+type GroupRenderPropArg = {};
+type GroupPropsWeControl = never;
+export type PortalGroupContext = {
+    readonly element: HTMLElement | null;
+};
+export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl, {
+    target: HTMLElement | null;
+}>;
+declare class __sveltets_Render<TTag extends ElementType> {
+    props(): PortalGroupProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType>(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>(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 PortalGroup: $$IsomorphicComponent;
+type PortalGroup<TTag extends ElementType> = InstanceType<typeof PortalGroup<TTag>>;
+export default PortalGroup;