@pzerelles/headlessui-svelte 2.1.2-next.42 → 2.1.2-next.44

package/dist/button/Button.svelte

@@ -63,7 +63,7 @@
     })
   )
 
-  const slot = $derived({
+  const slots = $derived({
     disabled,
     hover,
     focus,
@@ -85,4 +85,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:element />
+<ElementOrComponent {ourProps} {theirProps} {slots} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:element />

package/dist/checkbox/Checkbox.svelte

@@ -196,7 +196,7 @@
 <ElementOrComponent
   {ourProps}
   {theirProps}
-  {slot}
+  slots={slot}
   defaultTag={DEFAULT_CHECKBOX_TAG}
   name="Checkbox"
   bind:element

package/dist/data-interactive/DataInteractive.svelte

@@ -50,4 +50,4 @@
   const ourProps = $derived(mergeProps(focusProps, hoverProps, pressProps))
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} name="DataInteractive" />
+<ElementOrComponent {ourProps} {theirProps} slots={slot} name="DataInteractive" />

package/dist/description/Description.svelte

@@ -30,14 +30,14 @@
   })
 
   const disabled = $derived(providedDisabled.current || false)
-  const slot = $derived({ disabled })
+  const slots = $derived({ disabled })
   const ourProps = $derived({ id })
 </script>
 
 <ElementOrComponent
   {ourProps}
   {theirProps}
-  slots={slot}
+  {slots}
   defaultTag={DEFAULT_DESCRIPTION_TAG}
   name="Description"
   bind:element

package/dist/field/Field.svelte

@@ -48,7 +48,7 @@
 <ElementOrComponent
   {ourProps}
   theirProps={{ ...theirProps, children: wrapper }}
-  {slot}
+  slots={slot}
   defaultTag={DEFAULT_FIELD_TAG}
   name="Field"
   bind:element

package/dist/fieldset/Fieldset.svelte

@@ -46,4 +46,11 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELDSET_TAG} name="Fieldset" bind:element />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_FIELDSET_TAG}
+  name="Fieldset"
+  bind:element
+/>

package/dist/hooks/use-controllable.svelte.js

@@ -1,7 +1,7 @@
 export function useControllable(input, onchange, defaultValue) {
     let internalValue = $state(defaultValue);
     const isControlled = $derived(input.controlledValue !== undefined);
-    let wasControlled = isControlled;
+    let wasControlled = (() => isControlled)();
     let didWarnOnUncontrolledToControlled = false;
     let didWarnOnControlledToUncontrolled = false;
     $effect(() => {

package/dist/hooks/use-element-size.svelte.js

@@ -10,7 +10,7 @@ export function useElementSize(options) {
     // compute the correct size as soon as possible. However, once the element is
     // stable, we also want to watch for changes to the element. The `identity`
     // state can be used to recompute the size.
-    let size = $state(computeSize(element));
+    let size = $state((() => computeSize(element))());
     const observeSize = (element) => {
         if (!element)
             return;

package/dist/hooks/use-focus-ring.svelte.js

@@ -2,7 +2,7 @@ import { isFocusVisible, useFocusVisibleListener } from "../utils/focusVisible.s
 export const useFocusRing = (options = {}) => {
     const { autofocus, within } = $derived(options);
     let focused = $state(false);
-    let _isFocusVisible = $state(autofocus || isFocusVisible());
+    let _isFocusVisible = $state((() => autofocus || isFocusVisible())());
     useFocusVisibleListener((isFocusVisible) => {
         _isFocusVisible = isFocusVisible;
     });

package/dist/hooks/use-is-top-layer.svelte.js

@@ -44,9 +44,9 @@ let hierarchyStores = new DefaultMap(() => createStore(() => [], {
  */
 export function useIsTopLayer(options) {
     const { enabled, scope } = $derived(options);
-    const hierarchyStore = hierarchyStores.get(scope);
+    const hierarchyStore = $derived(hierarchyStores.get(scope));
     const id = useId();
-    let hierarchy = $state(hierarchyStore.getSnapshot());
+    let hierarchy = $state((() => hierarchyStore.getSnapshot())());
     $effect(() => {
         const unsubscribe = hierarchyStore.subscribe(() => {
             hierarchy = hierarchyStore.getSnapshot();

package/dist/hooks/use-transition.svelte.js

@@ -37,8 +37,8 @@ export function transitionDataAttributes(data) {
 }
 export function useTransition(options) {
     const { enabled, element, show, events } = $derived(options);
-    let visible = $state(show);
-    let flags = $state(enabled && visible ? TransitionState.Enter | TransitionState.Closed : TransitionState.None);
+    let visible = $state((() => show)());
+    let flags = $state((() => (enabled && visible ? TransitionState.Enter | TransitionState.Closed : TransitionState.None))());
     let inFlight = $state(false);
     let cancelled = $state(false);
     const d = useDisposables();

package/dist/input/Input.svelte

@@ -90,7 +90,7 @@
 <ElementOrComponent
   {ourProps}
   {theirProps}
-  {slot}
+  slots={slot}
   defaultTag={DEFAULT_INPUT_TAG}
   name="Input"
   bind:element

package/dist/internal/frozen.svelte.js

@@ -1,7 +1,7 @@
 import { untrack } from "svelte";
 export function useFrozenData(options) {
     const { freeze, data } = $derived(options);
-    let frozenValue = $state(data);
+    let frozenValue = $state((() => data)());
     $effect(() => {
         // We should keep updating the frozen value, as long as we shouldn't freeze
         // the value yet. The moment we should freeze the value we stop updating it

package/dist/listbox/ListboxButton.svelte

@@ -180,4 +180,11 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="ListboxButton" bind:element />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_BUTTON_TAG}
+  name="ListboxButton"
+  bind:element
+/>

package/dist/listbox/ListboxOption.svelte

@@ -179,5 +179,12 @@
 </script>
 
 {#if selected || !usedInSelectedOption}
-  <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_OPTION_TAG} name="Listbox" bind:element />
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    slots={slot}
+    defaultTag={DEFAULT_OPTION_TAG}
+    name="Listbox"
+    bind:element
+  />
 {/if}

package/dist/listbox/ListboxSelectedOption.svelte

@@ -49,7 +49,7 @@
 
 <ElementOrComponent
   theirProps={{ ...theirProps, ...(theirProps.asChild ? {} : { children: option }) }}
-  slot={{ option }}
+  slots={{ option }}
   defaultTag={DEFAULT_SELECTED_OPTION_TAG}
   name="ListboxSelectedOption"
   bind:element

package/dist/menu/Menu.svelte

@@ -77,4 +77,4 @@
   })
 </script>
 
-<ElementOrComponent {theirProps} {slot} name="Menu" />
+<ElementOrComponent {theirProps} slots={slot} name="Menu" />

package/dist/menu/MenuButton.svelte

@@ -164,4 +164,11 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="MenuButton" bind:element />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_BUTTON_TAG}
+  name="MenuButton"
+  bind:element
+/>

package/dist/menu/MenuItem.svelte

@@ -144,4 +144,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_ITEM_TAG} name="MenuItem" bind:element />
+<ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_ITEM_TAG} name="MenuItem" bind:element />

package/dist/popover/Popover.svelte

@@ -114,7 +114,10 @@
     )
   }
 
-  $effect(() => registerPopover?.(registerBag))
+  $effect(() => {
+    registerBag
+    untrack(() => registerPopover?.(registerBag))
+  })
 
   const nestedPortals = useNestedPortals()
   const { portals } = $derived(nestedPortals)

package/dist/popover/PopoverButton.svelte

@@ -228,7 +228,7 @@
     autofocus,
   } satisfies PopoverButtonSlot)
 
-  const type = useResolveButtonType({
+  const buttonType = useResolveButtonType({
     get props() {
       return { type: theirProps.type ?? undefined, as: element ? element.tagName.toLowerCase() : DEFAULT_BUTTON_TAG }
     },
@@ -240,7 +240,7 @@
     isWithinPanel
       ? mergeProps(
           {
-            type,
+            type: buttonType.type,
             onkeydown: handleKeyDown,
             onclick: handleClick,
             disabled: disabled || undefined,
@@ -253,7 +253,7 @@
       : mergeProps(
           {
             id: context.buttonId,
-            type,
+            type: buttonType.type,
             "aria-expanded": context.popoverState === PopoverStates.Open,
             "aria-controls": context.panel ? context.panelId : undefined,
             disabled: disabled || undefined,

package/dist/radio-group/Radio.svelte

@@ -132,4 +132,11 @@
   } satisfies RadioRenderPropArg)
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_RADIO_TAG} bind:element name="RadioOption" />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_RADIO_TAG}
+  bind:element
+  name="RadioOption"
+/>

package/dist/radio-group/RadioGroup.svelte

@@ -97,7 +97,6 @@
   }
 
   const handleKeyDown = (event: KeyboardEvent) => {
-    console.log("handleKeyDown", event, element)
     let container = element
     if (!container) return
 
@@ -216,7 +215,7 @@
 <ElementOrComponent
   {ourProps}
   {theirProps}
-  {slot}
+  slots={slot}
   defaultTag={DEFAULT_RADIO_GROUP_TAG}
   bind:element
   name="RadioGroup"

package/dist/radio-group/RadioOption.svelte

@@ -135,4 +135,11 @@
   } satisfies RadioOptionRenderPropArg)
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_OPTION_TAG} bind:element name="RadioOption" />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_OPTION_TAG}
+  bind:element
+  name="RadioOption"
+/>

package/dist/select/Select.svelte

@@ -104,7 +104,7 @@
 <ElementOrComponent
   {ourProps}
   {theirProps}
-  {slot}
+  slots={slot}
   defaultTag={DEFAULT_SELECT_TAG}
   name="Select"
   bind:element

package/dist/switch/Switch.svelte

@@ -196,4 +196,4 @@
   />
 {/if}
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SWITCH_TAG} name="Switch" bind:element />
+<ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_SWITCH_TAG} name="Switch" bind:element />

package/dist/tabs/Tab.svelte

@@ -171,7 +171,7 @@
     disabled,
   } satisfies TabRenderPropArg)
 
-  const resolvedType = useResolveButtonType({
+  const buttonType = useResolveButtonType({
     get props() {
       return { type: theirProps.type ?? undefined, as: element ? element.tagName.toLowerCase() : DEFAULT_TAB_TAG }
     },
@@ -188,7 +188,7 @@
         onclick: handleSelection,
         id,
         role: "tab",
-        type: resolvedType.type,
+        type: buttonType.type,
         "aria-controls": panels[myIndex]?.current?.id,
         "aria-selected": selected,
         tabIndex: selected ? 0 : -1,
@@ -202,4 +202,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_TAB_TAG} name="Tab" bind:element />
+<ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_TAB_TAG} name="Tab" bind:element />

package/dist/tabs/TabList.svelte

@@ -30,4 +30,4 @@
   })
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_LIST_TAG} name="TabList" bind:element />
+<ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_LIST_TAG} name="TabList" bind:element />

package/dist/tabs/TabPanel.svelte

@@ -77,7 +77,7 @@
   <ElementOrComponent
     {ourProps}
     {theirProps}
-    {slot}
+    slots={slot}
     defaultTag={DEFAULT_PANEL_TAG}
     features={PanelRenderFeatures}
     name="TabPanel"

package/dist/tabs/TabPanels.svelte

@@ -22,4 +22,4 @@
   let { element = $bindable(), ...theirProps }: TabPanelsProps = $props()
 </script>
 
-<ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_PANELS_TAG} name="TabPanel" bind:element />
+<ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_PANELS_TAG} name="TabPanel" bind:element />

package/dist/textarea/Textarea.svelte

@@ -93,7 +93,7 @@
 <ElementOrComponent
   {ourProps}
   {theirProps}
-  {slot}
+  slots={slot}
   defaultTag={DEFAULT_TEXTAREA_TAG}
   name="Textarea"
   bind:element

package/dist/utils/ElementOrComponent.svelte

@@ -6,8 +6,7 @@
   let {
     ourProps,
     theirProps,
-    slots,
-    slot = slots,
+    slots: slot,
     defaultTag,
     features,
     visible = true,
@@ -18,7 +17,6 @@
   }: {
     ourProps?: Expand<Props<any, TSlot> & PropsForFeatures<TFeature>>
     theirProps: Expand<Props<any, TSlot, any>>
-    slot?: TSlot
     slots?: TSlot
     defaultTag?: string
     features?: TFeature

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

@@ -18,7 +18,6 @@ declare class __sveltets_Render<TFeature extends RenderFeatures, TSlot extends R
             unmount?: boolean;
         } : {}) ? T_1 extends any ? (x: T_1) => any : never : never : never) extends (x: infer R) => any ? R : never>> | undefined;
         theirProps: Expand<Props<any, TSlot_1, any>>;
-        slot?: TSlot | undefined;
         slots?: TSlot | undefined;
         defaultTag?: string;
         features?: TFeature | undefined;

package/dist/utils/floating-ui/svelte/inner.svelte.js

@@ -90,7 +90,7 @@ export function useInnerOffset(options) {
     const { context, props } = $derived(options);
     const { open, elements } = $derived(context);
     const { enabled = true, overflowRef, scrollRef, onChange: unstable_onChange } = $derived(props);
-    const onChange = unstable_onChange;
+    const onChange = (() => unstable_onChange)();
     const controlledScrollingRef = $state({ current: false });
     const prevScrollTopRef = $state({ current: null });
     const initialOverflowRef = $state({ current: null });

package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js

@@ -12,16 +12,16 @@ import { stylePropsToString } from "../../style.js";
 export function useFloating(options = {}) {
     const { placement = "bottom", strategy = "absolute", middleware = [], platform, elements: externalElements = {}, transform = true, whileElementsMounted, open, } = $derived(options);
     const { reference: externalReference, floating: externalFloating } = $derived(externalElements);
-    let data = $state({
+    let data = $state((() => ({
         x: 0,
         y: 0,
         strategy,
         placement,
         middlewareData: {},
         isPositioned: false,
-    });
+    }))());
     const setData = (value) => (data = value);
-    let latestMiddleware = $state(middleware);
+    let latestMiddleware = $state((() => middleware)());
     $effect(() => {
         if (!deepEqual(latestMiddleware, middleware)) {
             latestMiddleware = middleware;
@@ -45,8 +45,8 @@ export function useFloating(options = {}) {
     const floatingEl = $derived(externalFloating || _floating);
     const referenceRef = $state({ current: null });
     const floatingRef = $state({ current: null });
-    const dataRef = $state({ current: data });
-    const hasWhileElementsMounted = whileElementsMounted != null;
+    const dataRef = $state((() => ({ current: data }))());
+    const hasWhileElementsMounted = $derived(whileElementsMounted != null);
     const whileElementsMountedRef = useLatestRef({
         get value() {
             return whileElementsMounted;
@@ -107,6 +107,7 @@ export function useFloating(options = {}) {
         };
     });
     $effect(() => {
+        hasWhileElementsMounted;
         if (referenceEl)
             referenceRef.current = referenceEl;
         if (floatingEl)

package/package.json

@@ -1,6 +1,22 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.42",
+  "version": "2.1.2-next.44",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "package:watch": "svelte-package --watch",
+    "prepublishOnly": "bun run package",
+    "test": "bun run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest",
+    "release": "bun run package && changeset publish"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -16,38 +32,38 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.12",
-    "@changesets/types": "^6.0.0",
-    "@playwright/test": "^1.50.0",
-    "@pzerelles/heroicons-svelte": "^2.1.5",
+    "@changesets/cli": "^2.28.1",
+    "@changesets/types": "^6.1.0",
+    "@playwright/test": "^1.50.1",
+    "@pzerelles/heroicons-svelte": "^2.2.0",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.16.1",
-    "@sveltejs/package": "^2.3.9",
-    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@sveltejs/kit": "^2.17.2",
+    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.6",
+    "@testing-library/svelte": "^5.2.7",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^20.17.16",
+    "@types/node": "^22.13.5",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.19.0",
+    "eslint": "^9.21.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.46.1",
-    "globals": "^15.14.0",
+    "globals": "^16.0.0",
     "jsdom": "^25.0.1",
     "outdent": "^0.8.0",
-    "postcss": "^8.5.1",
-    "prettier": "^3.4.2",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.2",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "publint": "^0.3.2",
-    "svelte": "^5.19.6",
+    "publint": "^0.3.6",
+    "svelte": "^5.20.2",
     "svelte-check": "^4.1.4",
     "tailwindcss": "^3.4.17",
     "tslib": "^2.8.1",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.22.0",
-    "vite": "^5.4.14",
-    "vitest": "^2.1.8"
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.1.1",
+    "vitest": "^3.0.6"
   },
   "dependencies": {
     "@floating-ui/core": "^1.6.9",
@@ -55,24 +71,9 @@
     "@floating-ui/utils": "^0.2.9",
     "clsx": "^2.1.1",
     "esm-env": "^1.2.2",
-    "nanoid": "^5.0.9"
+    "nanoid": "^5.1.0"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "package:watch": "svelte-package --watch",
-    "test": "npm run test:integration && npm run test:unit",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write .",
-    "test:integration": "playwright test",
-    "test:unit": "vitest",
-    "release": "pnpm package && changeset publish"
-  }
-}
+  "type": "module"
+}