@pzerelles/headlessui-svelte 2.1.2-next.13 → 2.1.2-next.15

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -25,7 +25,7 @@ export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG
 declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+    } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "value" | "checked" | "name" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
         children?: import("../utils/types.js").Children<CheckboxRenderPropArg> | undefined;
         ref?: HTMLElement;
     } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {

package/dist/description/context.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext } from "svelte";
 export function useDescriptionContext() {
     let context = getContext("DescriptionContext");
-    if (context === null) {
+    if (!context) {
         let err = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useDescriptionContext);

package/dist/dialog/DialogPanel.svelte

@@ -6,7 +6,6 @@ import { DialogStates, useDialogContext } from "./context.svelte.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 import { mergeProps } from "../utils/render.js";
 import TransitionChild from "../transition/TransitionChild.svelte";
-import { onMount } from "svelte";
 let internalId = useId();
 let {
   ref = $bindable(),

package/dist/dialog/context.svelte.js

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

package/dist/field/Field.svelte

@@ -8,7 +8,13 @@ import { setContext } from "svelte";
 import { useLabels } from "../label/context.svelte.js";
 import { useDescriptions } from "../description/context.svelte.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let { ref = $bindable(), disabled: ownDisabled = false, ...theirProps } = $props();
+import FormFieldsProvider from "../internal/FormFieldsProvider.svelte";
+let {
+  ref = $bindable(),
+  disabled: ownDisabled = false,
+  children: theirChildren,
+  ...theirProps
+} = $props();
 const inputId = `headlessui-control-${nanoid(8)}`;
 createIdContext(inputId);
 useLabels();
@@ -27,4 +33,17 @@ const ourProps = $derived({
 });
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELD_TAG} name="Field" bind:ref />
+{#snippet children(slot: FieldRenderPropArg, props: Record<string, any>)}
+  <FormFieldsProvider>
+    {#if theirChildren}{@render theirChildren(slot, props)}{/if}
+  </FormFieldsProvider>
+{/snippet}
+
+<ElementOrComponent
+  {ourProps}
+  theirProps={{ ...theirProps, children }}
+  {slot}
+  defaultTag={DEFAULT_FIELD_TAG}
+  name="Field"
+  bind:ref
+/>

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from "./label/index.js";
 export * from "./legend/index.js";
 export * from "./listbox/index.js";
 export * from "./menu/index.js";
+export * from "./select/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
 export * from "./textarea/index.js";

package/dist/index.js

@@ -11,6 +11,7 @@ export * from "./label/index.js";
 export * from "./legend/index.js";
 export * from "./listbox/index.js";
 export * from "./menu/index.js";
+export * from "./select/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
 export * from "./textarea/index.js";

package/dist/internal/FormFields.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { disposables } from "../utils/disposables.js";
 import { objectToFormEntries } from "../utils/form.js";
 import FormResolver from "./FormResolver.svelte";
-import HoistFormFields from "./HoistFormFields.svelte";
+import { hoistFormFields } from "./form-fields.svelte.js";
 import Hidden, { HiddenFeatures } from "./Hidden.svelte";
 import { compact } from "../utils/object.js";
 let {
@@ -18,25 +18,28 @@ $effect(() => {
   if (!form) return;
   return d.addEventListener(form, "reset", onReset);
 });
+const fields = $derived(
+  objectToFormEntries(data).map(
+    ([name, value]) => compact({
+      key: name,
+      as: "input",
+      type: "hidden",
+      form: formId,
+      disabled,
+      name,
+      value,
+      ...overrides
+    })
+  )
+);
+const hoisted = hoistFormFields(formFields);
 </script>
 
-<HoistFormFields>
+{#snippet formFields()}
   <FormResolver setForm={(value) => (form = value)} {formId} />
-  {#each objectToFormEntries(data) as [name, value]}
-    <Hidden
-      features={HiddenFeatures.Hidden}
-      {...compact({
-        key: name,
-        as: "input",
-        type: "hidden",
-        hidden: true,
-        readOnly: true,
-        form: formId,
-        disabled,
-        name,
-        value,
-        ...overrides,
-      })}
-    />
+  {#each fields as props}
+    <Hidden features={HiddenFeatures.Hidden} {...props} />
   {/each}
-</HoistFormFields>
+{/snippet}
+
+{#if !hoisted}{@render formFields()}{/if}

package/dist/internal/FormFieldsProvider.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import Hidden, { HiddenFeatures } from "./Hidden.svelte";
+import { createFormFieldsContext } from "./form-fields.svelte.js";
+const { children } = $props();
+const context = createFormFieldsContext();
+const { fields } = $derived(context);
+</script>
+
+{#if children}{@render children()}{/if}
+<Hidden features={HiddenFeatures.Hidden}>
+  {#each fields as field}
+    {@render field()}
+  {/each}
+</Hidden>

package/dist/internal/{HoistFormFields.svelte.d.ts → FormFieldsProvider.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { type Snippet } from "svelte";
+import type { Snippet } from "svelte";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,10 +12,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const HoistFormFields: $$__sveltets_2_IsomorphicComponent<{
-    children: Snippet;
+declare const FormFieldsProvider: $$__sveltets_2_IsomorphicComponent<{
+    children?: Snippet;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
-type HoistFormFields = InstanceType<typeof HoistFormFields>;
-export default HoistFormFields;
+type FormFieldsProvider = InstanceType<typeof FormFieldsProvider>;
+export default FormFieldsProvider;

package/dist/internal/Hidden.svelte

@@ -4,7 +4,13 @@ export * from "./HiddenFeatures.js";
 const DEFAULT_VISUALLY_HIDDEN_TAG = "span";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">let { ref = $bindable(), features = HiddenFeatures.None, ...theirProps } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">let {
+  ref = $bindable(),
+  value,
+  checked,
+  features = HiddenFeatures.None,
+  ...theirProps
+} = $props();
 let ourProps = {
   "aria-hidden": (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable ? true : theirProps["aria-hidden"] ?? void 0,
   hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : void 0,
@@ -25,4 +31,12 @@ let ourProps = {
 };
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:ref />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG}
+  name="Hidden"
+  bind:ref
+  {value}
+  {checked}
+/>

package/dist/internal/form-fields.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+export type FormFieldsContext = {
+    registerField: (field: Snippet) => () => void;
+};
+export declare const createFormFieldsContext: () => {
+    registerField: (field: Snippet) => () => boolean;
+    readonly fields: SvelteSet<Snippet<[]>>;
+};
+export declare const hoistFormFields: (fields: Snippet) => false | undefined;

package/dist/internal/form-fields.svelte.js

@@ -0,0 +1,22 @@
+import { getContext, setContext } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+export const createFormFieldsContext = () => {
+    const fields = new SvelteSet();
+    const context = {
+        registerField: (field) => {
+            fields.add(field);
+            return () => fields.delete(field);
+        },
+        get fields() {
+            return fields;
+        },
+    };
+    setContext("FormFieldsContext", context);
+    return context;
+};
+export const hoistFormFields = (fields) => {
+    const context = getContext("FormFieldsContext");
+    if (!context)
+        return false;
+    $effect(() => context.registerField(fields));
+};

package/dist/label/context.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext } from "svelte";
 export function useLabelContext() {
     let context = getContext("LabelContext");
-    if (context === null) {
+    if (!context) {
         let err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useLabelContext);

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

@@ -26,7 +26,7 @@ export * from "./context.svelte.js";
 declare class __sveltets_Render<TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "name" | "value" | "onchange" | "multiple" | "__demoMode" | "horizontal" | "defaultValue" | "by"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "value" | "name" | "onchange" | "multiple" | "__demoMode" | "horizontal" | "defaultValue" | "by"> 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<ListboxRenderPropArg<TType>> | 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) ? {

package/dist/listbox/context.svelte.js

@@ -26,7 +26,7 @@ export function useActions(component) {
 }
 export function useData(component) {
     const context = getContext("ListboxDataContext");
-    if (context === null) {
+    if (!context) {
         let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useData);

package/dist/menu/Menu.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
 import { useFloatingProvider } from "../internal/floating.svelte.js";
 import { createOpenClosedContext, State } from "../internal/open-closed.js";
-import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus-management.js";
+import { FocusableMode, isFocusableElement } from "../utils/focus-management.js";
 import { match } from "../utils/match.js";
 let DEFAULT_MENU_TAG = "svelte:fragment";
 </script>
@@ -11,180 +10,9 @@ let DEFAULT_MENU_TAG = "svelte:fragment";
 <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">import { setContext } from "svelte";
 import {
   ActivationTrigger,
-  MenuStates
+  MenuStates,
+  stateReducer
 } from "./context.svelte.js";
-function adjustOrderedState(state, adjustment = (i) => i) {
-  let currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null;
-  let sortedItems = sortByDomNode(adjustment(state.items.slice()), (item) => item.dataRef.current.domRef.current);
-  let adjustedActiveItemIndex = currentActiveItem ? sortedItems.indexOf(currentActiveItem) : null;
-  if (adjustedActiveItemIndex === -1) {
-    adjustedActiveItemIndex = null;
-  }
-  return {
-    items: sortedItems,
-    activeItemIndex: adjustedActiveItemIndex
-  };
-}
-const stateReducer = (initialState) => {
-  let _state2 = $state(initialState);
-  return {
-    get menuState() {
-      return _state2.menuState;
-    },
-    get buttonElement() {
-      return _state2.buttonElement;
-    },
-    get itemsElement() {
-      return _state2.itemsElement;
-    },
-    get items() {
-      return _state2.items;
-    },
-    get searchQuery() {
-      return _state2.searchQuery;
-    },
-    get activeItemIndex() {
-      return _state2.activeItemIndex;
-    },
-    get activationTrigger() {
-      return _state2.activationTrigger;
-    },
-    get __demoMode() {
-      return _state2.__demoMode;
-    },
-    closeMenu() {
-      if (_state2.menuState === MenuStates.Closed) return _state2;
-      _state2.activeItemIndex = null;
-      _state2.menuState = MenuStates.Closed;
-      return _state2;
-    },
-    openMenu() {
-      if (_state2.menuState === MenuStates.Open) return _state2;
-      _state2.__demoMode = false;
-      _state2.menuState = MenuStates.Open;
-      return _state2;
-    },
-    goToItem(action) {
-      if (_state2.menuState === MenuStates.Closed) return _state2;
-      _state2.searchQuery = "";
-      _state2.activationTrigger = action.trigger ?? ActivationTrigger.Other;
-      _state2.__demoMode = false;
-      if (action.focus === Focus.Nothing) {
-        _state2.activeItemIndex = null;
-        return _state2;
-      }
-      if (action.focus === Focus.Specific) {
-        _state2.activeItemIndex = _state2.items.findIndex((o) => o.id === action.id);
-        return _state2;
-      } else if (action.focus === Focus.Previous) {
-        let activeItemIdx = _state2.activeItemIndex;
-        if (activeItemIdx !== null) {
-          let currentDom = _state2.items[activeItemIdx].dataRef.current.domRef;
-          let previousItemIndex = calculateActiveIndex(action, {
-            resolveItems: () => _state2.items,
-            resolveActiveIndex: () => _state2.activeItemIndex,
-            resolveId: (item) => item.id,
-            resolveDisabled: (item) => item.dataRef.current.disabled
-          });
-          if (previousItemIndex !== null) {
-            let previousDom = _state2.items[previousItemIndex].dataRef.current.domRef;
-            if (
-              // Next to each other
-              currentDom.current?.previousElementSibling === previousDom.current || // Or already the first element
-              previousDom.current?.previousElementSibling === null
-            ) {
-              _state2.activeItemIndex = previousItemIndex;
-              return _state2;
-            }
-          }
-        }
-      } else if (action.focus === Focus.Next) {
-        let activeItemIdx = _state2.activeItemIndex;
-        if (activeItemIdx !== null) {
-          let currentDom = _state2.items[activeItemIdx].dataRef.current.domRef;
-          let nextItemIndex = calculateActiveIndex(action, {
-            resolveItems: () => _state2.items,
-            resolveActiveIndex: () => _state2.activeItemIndex,
-            resolveId: (item) => item.id,
-            resolveDisabled: (item) => item.dataRef.current.disabled
-          });
-          if (nextItemIndex !== null) {
-            let nextDom = _state2.items[nextItemIndex].dataRef.current.domRef;
-            if (
-              // Next to each other
-              currentDom.current?.nextElementSibling === nextDom.current || // Or already the last element
-              nextDom.current?.nextElementSibling === null
-            ) {
-              _state2.activeItemIndex = nextItemIndex;
-              return _state2;
-            }
-          }
-        }
-      }
-      let adjustedState = adjustOrderedState(_state2);
-      let activeItemIndex = calculateActiveIndex(action, {
-        resolveItems: () => adjustedState.items,
-        resolveActiveIndex: () => adjustedState.activeItemIndex,
-        resolveId: (item) => item.id,
-        resolveDisabled: (item) => item.dataRef.current.disabled
-      });
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = activeItemIndex;
-      return _state2;
-    },
-    search(value) {
-      let wasAlreadySearching = _state2.searchQuery !== "";
-      let offset = wasAlreadySearching ? 0 : 1;
-      let searchQuery = _state2.searchQuery + value.toLowerCase();
-      let reOrderedItems = _state2.activeItemIndex !== null ? _state2.items.slice(_state2.activeItemIndex + offset).concat(_state2.items.slice(0, _state2.activeItemIndex + offset)) : _state2.items;
-      let matchingItem = reOrderedItems.find(
-        (item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled
-      );
-      let matchIdx = matchingItem ? _state2.items.indexOf(matchingItem) : -1;
-      if (matchIdx === -1 || matchIdx === _state2.activeItemIndex) {
-        _state2.searchQuery = searchQuery;
-        return _state2;
-      }
-      _state2.searchQuery = searchQuery;
-      _state2.activeItemIndex = matchIdx;
-      _state2.activationTrigger = ActivationTrigger.Other;
-      return _state2;
-    },
-    clearSearch() {
-      if (_state2.searchQuery === "") return _state2;
-      _state2.searchQuery = "";
-      return _state2;
-    },
-    registerItem(id, dataRef) {
-      let item = { id, dataRef };
-      let adjustedState = adjustOrderedState(_state2, (items) => [...items, item]);
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = adjustedState.activeItemIndex;
-      return _state2;
-    },
-    unregisterItem(id) {
-      let adjustedState = adjustOrderedState(_state2, (items) => {
-        let idx = items.findIndex((a) => a.id === id);
-        if (idx !== -1) items.splice(idx, 1);
-        return items;
-      });
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = adjustedState.activeItemIndex;
-      _state2.activationTrigger = ActivationTrigger.Other;
-      return _state2;
-    },
-    setButtonElement(element) {
-      if (_state2.buttonElement === element) return _state2;
-      _state2.buttonElement = element;
-      return _state2;
-    },
-    setItemsElement(element) {
-      if (_state2.itemsElement === element) return _state2;
-      _state2.itemsElement = element;
-      return _state2;
-    }
-  };
-};
 let { ref = $bindable(), __demoMode = false, ...theirProps } = $props();
 const _state = stateReducer({
   __demoMode,

package/dist/menu/context.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Focus } from "../utils/calculate-active-index.js";
+import { Focus } from "../utils/calculate-active-index.js";
 import type { MutableRefObject } from "../utils/ref.svelte.js";
 export declare enum MenuStates {
     Open = 0,
@@ -45,3 +45,32 @@ export type MenuContext = StateDefinition & {
     setItemsElement(element: HTMLElement | null): void;
 };
 export declare function useMenuContext(component: string): MenuContext;
+export declare const stateReducer: (initialState: StateDefinition) => {
+    readonly menuState: MenuStates;
+    readonly buttonElement: HTMLButtonElement | null;
+    readonly itemsElement: HTMLElement | null;
+    readonly items: {
+        id: string;
+        dataRef: MenuItemDataRef;
+    }[];
+    readonly searchQuery: string;
+    readonly activeItemIndex: number | null;
+    readonly activationTrigger: ActivationTrigger;
+    readonly __demoMode: boolean;
+    closeMenu(): StateDefinition;
+    openMenu(): StateDefinition;
+    goToItem(action: {
+        focus: Focus.Specific;
+        id: string;
+        trigger?: ActivationTrigger;
+    } | {
+        focus: Exclude<Focus, Focus.Specific>;
+        trigger?: ActivationTrigger;
+    }): StateDefinition;
+    search(value: string): StateDefinition;
+    clearSearch(): StateDefinition;
+    registerItem(id: string, dataRef: MenuItemDataRef): StateDefinition;
+    unregisterItem(id: string): StateDefinition;
+    setButtonElement(element: HTMLButtonElement | null): StateDefinition;
+    setItemsElement(element: HTMLElement | null): StateDefinition;
+};

package/dist/menu/context.svelte.js

@@ -1,3 +1,5 @@
+import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
+import { sortByDomNode } from "../utils/focus-management.js";
 import { getContext } from "svelte";
 export var MenuStates;
 (function (MenuStates) {
@@ -19,3 +21,209 @@ export function useMenuContext(component) {
     }
     return context;
 }
+function adjustOrderedState(state, adjustment = (i) => i) {
+    let currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null;
+    let sortedItems = sortByDomNode(adjustment(state.items.slice()), (item) => item.dataRef.current.domRef.current);
+    // If we inserted an item before the current active item then the active item index
+    // would be wrong. To fix this, we will re-lookup the correct index.
+    let adjustedActiveItemIndex = currentActiveItem ? sortedItems.indexOf(currentActiveItem) : null;
+    // Reset to `null` in case the currentActiveItem was removed.
+    if (adjustedActiveItemIndex === -1) {
+        adjustedActiveItemIndex = null;
+    }
+    return {
+        items: sortedItems,
+        activeItemIndex: adjustedActiveItemIndex,
+    };
+}
+export const stateReducer = (initialState) => {
+    let _state = $state(initialState);
+    return {
+        get menuState() {
+            return _state.menuState;
+        },
+        get buttonElement() {
+            return _state.buttonElement;
+        },
+        get itemsElement() {
+            return _state.itemsElement;
+        },
+        get items() {
+            return _state.items;
+        },
+        get searchQuery() {
+            return _state.searchQuery;
+        },
+        get activeItemIndex() {
+            return _state.activeItemIndex;
+        },
+        get activationTrigger() {
+            return _state.activationTrigger;
+        },
+        get __demoMode() {
+            return _state.__demoMode;
+        },
+        closeMenu() {
+            if (_state.menuState === MenuStates.Closed)
+                return _state;
+            _state.activeItemIndex = null;
+            _state.menuState = MenuStates.Closed;
+            return _state;
+        },
+        openMenu() {
+            if (_state.menuState === MenuStates.Open)
+                return _state;
+            /* We can turn off demo mode once we re-open the `Menu` */
+            _state.__demoMode = false;
+            _state.menuState = MenuStates.Open;
+            return _state;
+        },
+        goToItem(action) {
+            if (_state.menuState === MenuStates.Closed)
+                return _state;
+            _state.searchQuery = "";
+            _state.activationTrigger = action.trigger ?? ActivationTrigger.Other;
+            _state.__demoMode = false;
+            // Optimization:
+            //
+            // There is no need to sort the DOM nodes if we know that we don't want to focus anything
+            if (action.focus === Focus.Nothing) {
+                _state.activeItemIndex = null;
+                return _state;
+            }
+            // Optimization:
+            //
+            // There is no need to sort the DOM nodes if we know exactly where to go
+            if (action.focus === Focus.Specific) {
+                _state.activeItemIndex = _state.items.findIndex((o) => o.id === action.id);
+                return _state;
+            }
+            // Optimization:
+            //
+            // If the current DOM node and the previous DOM node are next to each other,
+            // or if the previous DOM node is already the first DOM node, then we don't
+            // have to sort all the DOM nodes.
+            else if (action.focus === Focus.Previous) {
+                let activeItemIdx = _state.activeItemIndex;
+                if (activeItemIdx !== null) {
+                    let currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    let previousItemIndex = calculateActiveIndex(action, {
+                        resolveItems: () => _state.items,
+                        resolveActiveIndex: () => _state.activeItemIndex,
+                        resolveId: (item) => item.id,
+                        resolveDisabled: (item) => item.dataRef.current.disabled,
+                    });
+                    if (previousItemIndex !== null) {
+                        let previousDom = _state.items[previousItemIndex].dataRef.current.domRef;
+                        if (
+                        // Next to each other
+                        currentDom.current?.previousElementSibling === previousDom.current ||
+                            // Or already the first element
+                            previousDom.current?.previousElementSibling === null) {
+                            _state.activeItemIndex = previousItemIndex;
+                            return _state;
+                        }
+                    }
+                }
+            }
+            // Optimization:
+            //
+            // If the current DOM node and the next DOM node are next to each other, or
+            // if the next DOM node is already the last DOM node, then we don't have to
+            // sort all the DOM nodes.
+            else if (action.focus === Focus.Next) {
+                let activeItemIdx = _state.activeItemIndex;
+                if (activeItemIdx !== null) {
+                    let currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    let nextItemIndex = calculateActiveIndex(action, {
+                        resolveItems: () => _state.items,
+                        resolveActiveIndex: () => _state.activeItemIndex,
+                        resolveId: (item) => item.id,
+                        resolveDisabled: (item) => item.dataRef.current.disabled,
+                    });
+                    if (nextItemIndex !== null) {
+                        let nextDom = _state.items[nextItemIndex].dataRef.current.domRef;
+                        if (
+                        // Next to each other
+                        currentDom.current?.nextElementSibling === nextDom.current ||
+                            // Or already the last element
+                            nextDom.current?.nextElementSibling === null) {
+                            _state.activeItemIndex = nextItemIndex;
+                            return _state;
+                        }
+                    }
+                }
+            }
+            // Slow path:
+            //
+            // Ensure all the items are correctly sorted according to DOM position
+            let adjustedState = adjustOrderedState(_state);
+            let activeItemIndex = calculateActiveIndex(action, {
+                resolveItems: () => adjustedState.items,
+                resolveActiveIndex: () => adjustedState.activeItemIndex,
+                resolveId: (item) => item.id,
+                resolveDisabled: (item) => item.dataRef.current.disabled,
+            });
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = activeItemIndex;
+            return _state;
+        },
+        search(value) {
+            let wasAlreadySearching = _state.searchQuery !== "";
+            let offset = wasAlreadySearching ? 0 : 1;
+            let searchQuery = _state.searchQuery + value.toLowerCase();
+            let reOrderedItems = _state.activeItemIndex !== null
+                ? _state.items
+                    .slice(_state.activeItemIndex + offset)
+                    .concat(_state.items.slice(0, _state.activeItemIndex + offset))
+                : _state.items;
+            let matchingItem = reOrderedItems.find((item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled);
+            let matchIdx = matchingItem ? _state.items.indexOf(matchingItem) : -1;
+            if (matchIdx === -1 || matchIdx === _state.activeItemIndex) {
+                _state.searchQuery = searchQuery;
+                return _state;
+            }
+            _state.searchQuery = searchQuery;
+            _state.activeItemIndex = matchIdx;
+            _state.activationTrigger = ActivationTrigger.Other;
+            return _state;
+        },
+        clearSearch() {
+            if (_state.searchQuery === "")
+                return _state;
+            _state.searchQuery = "";
+            return _state;
+        },
+        registerItem(id, dataRef) {
+            let item = { id, dataRef };
+            let adjustedState = adjustOrderedState(_state, (items) => [...items, item]);
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = adjustedState.activeItemIndex;
+            return _state;
+        },
+        unregisterItem(id) {
+            let adjustedState = adjustOrderedState(_state, (items) => {
+                let idx = items.findIndex((a) => a.id === id);
+                if (idx !== -1)
+                    items.splice(idx, 1);
+                return items;
+            });
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = adjustedState.activeItemIndex;
+            _state.activationTrigger = ActivationTrigger.Other;
+            return _state;
+        },
+        setButtonElement(element) {
+            if (_state.buttonElement === element)
+                return _state;
+            _state.buttonElement = element;
+            return _state;
+        },
+        setItemsElement(element) {
+            if (_state.itemsElement === element)
+                return _state;
+            _state.itemsElement = element;
+            return _state;
+        },
+    };
+};

package/dist/select/Select.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" module>let DEFAULT_SELECT_TAG = "select";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECT_TAG">import { useId } from "../hooks/use-id.js";
+import { useProvidedId } from "../utils/id.js";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import { useHover } from "../hooks/use-hover.svelte.js";
+import { useActivePress } from "../hooks/use-active-press.svelte.js";
+import { useLabelledBy } from "../label/context.svelte.js";
+import { useDescribedBy } from "../description/context.svelte.js";
+import { mergeProps } from "../utils/render.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const internalId = useId();
+const providedId = useProvidedId();
+const providedDisabled = useDisabled();
+let {
+  ref = $bindable(),
+  id = providedId || `headlessui-select-${internalId}`,
+  disabled: theirDisabled = false,
+  invalid = false,
+  autofocus = false,
+  ...theirProps
+} = $props();
+const disabled = $derived(providedDisabled?.value ?? theirDisabled);
+const labelledBy = useLabelledBy();
+const describedBy = useDescribedBy();
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
+    }
+  })
+);
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const ourProps = $derived(
+  mergeProps(
+    {
+      id,
+      "aria-labelledby": labelledBy.value,
+      "aria-describedby": describedBy.value,
+      "aria-invalid": invalid ? "" : void 0,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps,
+    pressProps
+  )
+);
+const slot = $derived({
+  disabled,
+  invalid,
+  hover,
+  focus,
+  active,
+  autofocus
+});
+</script>
+
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SELECT_TAG} name="Select" bind:ref />

package/dist/select/Select.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
+declare let DEFAULT_SELECT_TAG: "select";
+type SelectRenderPropArg = {
+    disabled: boolean;
+    hover: boolean;
+    focus: boolean;
+    active: boolean;
+    autofocus: boolean;
+    invalid: boolean;
+};
+type SelectPropsWeControl = "aria-labelledby" | "aria-describedby";
+export type SelectProps<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> = Props<TTag, SelectRenderPropArg, SelectPropsWeControl, {
+    disabled?: boolean;
+    invalid?: boolean;
+    autofocus?: boolean;
+}>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "autofocus" | SelectPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("../utils/types.js").Children<SelectRenderPropArg> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
+        class?: PropsOf<TTag>["class"] | ((bag: SelectRenderPropArg) => string) | undefined;
+    } : {}) & {
+        disabled?: boolean;
+        invalid?: boolean;
+        autofocus?: boolean;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_SELECT_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_SELECT_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 Select: $$IsomorphicComponent;
+type Select<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> = InstanceType<typeof Select<TTag>>;
+export default Select;

package/dist/select/index.d.ts

@@ -0,0 +1 @@
+export { default as Select, type SelectProps } from "./Select.svelte";

package/dist/select/index.js

@@ -0,0 +1 @@
+export { default as Select } from "./Select.svelte";

package/dist/switch/Switch.svelte.d.ts

@@ -24,7 +24,7 @@ export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> =
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+    } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "value" | "checked" | "name" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
         children?: import("../utils/types.js").Children<SwitchRenderPropArg> | undefined;
         ref?: HTMLElement;
     } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {

package/dist/transition/context.svelte.js

@@ -10,14 +10,14 @@ export var TreeStates;
 })(TreeStates || (TreeStates = {}));
 export function useTransitionContext() {
     const context = getContext("TransitionContext");
-    if (context === null) {
+    if (!context) {
         throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
     }
     return context;
 }
 export function useParentNesting() {
     let context = getContext("NestingContext");
-    if (context === null) {
+    if (!context) {
         throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
     }
     return context;

package/dist/utils/ElementOrComponent.svelte

@@ -23,4 +23,4 @@ const hiddenProps = $derived(
 );
 </script>
 
-{#if render}<Generic {...rest} {...hiddenProps} {slot} tag={defaultTag} {name} bind:ref bind:value bind:checked />{/if}
+{#if render}<Generic {...rest} {...hiddenProps} {slot} tag={defaultTag} bind:ref bind:value bind:checked />{/if}

package/dist/utils/Generic.svelte

@@ -2,7 +2,6 @@
 let {
   slot = {},
   tag,
-  name,
   ref = $bindable(),
   value = $bindable(),
   checked = $bindable(),

package/dist/utils/Generic.svelte.d.ts

@@ -4,7 +4,6 @@ declare class __sveltets_Render<TTag extends keyof SvelteHTMLProps, TSlot, TValu
         as?: TTag | undefined;
         slot: TSlot;
         tag: ElementType;
-        name: string;
         ref?: HTMLElement;
         value?: TValue | undefined;
         checked?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.13",
+  "version": "2.1.2-next.15",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/dist/internal/HoistFormFields.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">import { getContext } from "svelte";
-import Portal from "./Portal.svelte";
-let { children } = $props();
-const formFieldsContext = getContext("FormFieldsContext");
-</script>
-
-{#if !formFieldsContext}
-  {@render children()}
-{:else if formFieldsContext.target}
-  <Portal target={formFieldsContext.target}>{@render children()}</Portal>
-{/if}