@pzerelles/headlessui-svelte 2.1.2-next.60 → 2.1.2-next.62

package/dist/internal/FormFields.svelte

@@ -2,9 +2,9 @@
   import { disposables } from "../utils/disposables.js"
   import { objectToFormEntries } from "../utils/form.js"
   import FormResolver from "./FormResolver.svelte"
-  import { hoistFormFields } from "./form-fields.svelte.js"
   import Hidden, { HiddenFeatures } from "./Hidden.svelte"
   import { compact } from "../utils/object.js"
+  import HoistFormFields from "./HoistFormFields.svelte"
 
   let {
     data,
@@ -20,7 +20,7 @@
     onReset?: (e: Event) => void
   } = $props()
 
-  let form = $state<HTMLFormElement | null>(null)
+  let form = $state<HTMLFormElement>()
   const d = disposables()
 
   $effect(() => {
@@ -29,30 +29,25 @@
 
     return d.addEventListener(form, "reset", onReset)
   })
+</script>
 
-  const fields = $derived(
-    objectToFormEntries(data).map(([name, value]) =>
-      compact({
+<HoistFormFields>
+  <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,
-      })
-    )
-  )
-
-  const hoisted = hoistFormFields(formFields)
-</script>
-
-{#snippet formFields()}
-  <FormResolver setForm={(value) => (form = value)} {formId} />
-  {#each fields as props}
-    <Hidden features={HiddenFeatures.Hidden} {...props} />
+      })}
+    />
   {/each}
-{/snippet}
-
-{#if !hoisted}{@render formFields()}{/if}
+</HoistFormFields>

package/dist/internal/FormFieldsProvider.svelte

@@ -1,17 +1,23 @@
+<script lang="ts" module>
+  export type FormFieldsContext = {
+    target: HTMLElement | undefined
+  }
+</script>
+
 <script lang="ts">
-  import type { Snippet } from "svelte"
+  import { setContext, type Snippet } from "svelte"
   import Hidden, { HiddenFeatures } from "./Hidden.svelte"
-  import { createFormFieldsContext } from "./form-fields.svelte.js"
 
-  const { children }: { children?: Snippet } = $props()
+  const { children }: { children: Snippet } = $props()
 
-  const context = createFormFieldsContext()
-  const { fields } = $derived(context)
+  let target = $state<HTMLElement>()
+  const context: FormFieldsContext = {
+    get target() {
+      return target
+    },
+  }
+  setContext("FormFieldsContext", context)
 </script>
 
-{#if children}{@render children()}{/if}
-<Hidden features={HiddenFeatures.Hidden}>
-  {#each fields as field}
-    {@render field()}
-  {/each}
-</Hidden>
+{@render children()}
+<Hidden features={HiddenFeatures.Hidden} bind:element={target} />

package/dist/internal/FormFieldsProvider.svelte.d.ts

@@ -1,6 +1,9 @@
-import type { Snippet } from "svelte";
+export type FormFieldsContext = {
+    target: HTMLElement | undefined;
+};
+import { type Snippet } from "svelte";
 type $$ComponentProps = {
-    children?: Snippet;
+    children: Snippet;
 };
 declare const FormFieldsProvider: import("svelte").Component<$$ComponentProps, {}, "">;
 type FormFieldsProvider = ReturnType<typeof FormFieldsProvider>;

package/dist/internal/FormResolver.svelte

@@ -21,9 +21,5 @@
 </script>
 
 {#if !formId}
-  <Hidden asChild features={HiddenFeatures.Hidden}>
-    {#snippet children({ props })}
-      <input {...props} type="hidden" hidden readonly bind:this={element} />
-    {/snippet}
-  </Hidden>
+  <Hidden features={HiddenFeatures.Hidden} as="input" type="hidden" hidden readonly bind:element />
 {/if}

package/dist/internal/Hidden.svelte

@@ -2,7 +2,6 @@
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import type { Props } from "../utils/types.js"
   import { HiddenFeatures } from "./HiddenFeatures.js"
-  import type { SvelteHTMLElements } from "svelte/elements"
 
   export * from "./HiddenFeatures.js"
 
@@ -11,14 +10,19 @@
   export type HiddenRenderPropArg = {}
   type HiddenPropsWeControl = never
   export type HiddenProps = Props<
-    typeof DEFAULT_VISUALLY_HIDDEN_TAG,
+    "input",
     HiddenRenderPropArg,
-    { element?: HTMLElement; features?: HiddenFeatures }
+    { as?: string; element?: HTMLElement; features?: HiddenFeatures }
   >
 </script>
 
 <script lang="ts">
-  let { element = $bindable(), features = HiddenFeatures.None, ...theirProps }: HiddenProps = $props()
+  let {
+    as = DEFAULT_VISUALLY_HIDDEN_TAG,
+    element = $bindable(),
+    features = HiddenFeatures.None,
+    ...theirProps
+  }: HiddenProps = $props()
 
   let ourProps = {
     "aria-hidden":
@@ -46,4 +50,4 @@
   }
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:element />
+<ElementOrComponent {ourProps} {theirProps} defaultTag={as} name="Hidden" bind:element />

package/dist/internal/Hidden.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Props } from "../utils/types.js";
 import { HiddenFeatures } from "./HiddenFeatures.js";
 export * from "./HiddenFeatures.js";
-declare const DEFAULT_VISUALLY_HIDDEN_TAG: "span";
 export type HiddenRenderPropArg = {};
-export type HiddenProps = Props<typeof DEFAULT_VISUALLY_HIDDEN_TAG, HiddenRenderPropArg, {
+export type HiddenProps = Props<"input", HiddenRenderPropArg, {
+    as?: string;
     element?: HTMLElement;
     features?: HiddenFeatures;
 }>;

package/dist/internal/HoistFormFields.svelte

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

package/dist/internal/HoistFormFields.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const HoistFormFields: import("svelte").Component<$$ComponentProps, {}, "">;
+type HoistFormFields = ReturnType<typeof HoistFormFields>;
+export default HoistFormFields;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.60",
+  "version": "2.1.2-next.62",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -20,7 +20,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "files": [
@@ -32,37 +33,37 @@
     "svelte": "^5.16.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.4",
+    "@changesets/cli": "^2.29.5",
     "@changesets/types": "^6.1.0",
-    "@playwright/test": "^1.52.0",
-    "@pzerelles/heroicons-svelte": "^2.2.1",
+    "@playwright/test": "^1.53.1",
+    "@pzerelles/heroicons-svelte": "^2.2.2",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.21.1",
-    "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/vite": "^4.1.8",
+    "@sveltejs/kit": "^2.22.2",
+    "@sveltejs/package": "^2.3.12",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@tailwindcss/vite": "^4.1.10",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.8",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.15.29",
-    "eslint": "^9.28.0",
+    "@types/node": "^22.15.33",
+    "eslint": "^9.29.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.46.1",
     "globals": "^16.2.0",
     "jsdom": "^25.0.1",
     "outdent": "^0.8.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.1",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.6.12",
+    "prettier-plugin-tailwindcss": "^0.6.13",
     "publint": "^0.3.12",
-    "svelte": "^5.33.14",
-    "svelte-check": "^4.2.1",
-    "tailwindcss": "^4.1.8",
+    "svelte": "^5.34.8",
+    "svelte-check": "^4.2.2",
+    "tailwindcss": "^4.1.10",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.33.1",
+    "typescript-eslint": "^8.35.0",
     "vite": "^6.3.5",
-    "vitest": "^3.2.0"
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "@floating-ui/core": "^1.7.1",

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

@@ -1,10 +0,0 @@
-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) => boolean;

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

@@ -1,23 +0,0 @@
-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));
-    return true;
-};