@pzerelles/headlessui-svelte 2.1.2-next.22 → 2.1.2-next.23

package/dist/button/Button.svelte

@@ -15,7 +15,7 @@ let {
   type = "button",
   ...theirProps
 } = $props();
-const disabled = $derived(providedDisabled.value || ownDisabled);
+const disabled = $derived(providedDisabled.current || ownDisabled);
 const { isHovered: hover, hoverProps } = $derived(
   useHover({
     get disabled() {

package/dist/checkbox/Checkbox.svelte

@@ -45,7 +45,7 @@ const controllable = useControllable(
   defaultChecked ?? false
 );
 const { value: checked, onchange } = $derived(controllable);
-const disabled = $derived(providedDisabled?.value ?? theirDisabled);
+const disabled = $derived(providedDisabled.current || theirDisabled);
 const { isHovered: hover, hoverProps } = $derived(
   useHover({
     get disabled() {

package/dist/description/Description.svelte

@@ -1,28 +1,33 @@
 <script lang="ts" module>let DEFAULT_DESCRIPTION_TAG = "p";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">import { htmlid } from "../utils/id.js";
-import { stateFromSlot } from "../utils/state.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">import { useId } from "../hooks/use-id.js";
 import { useDisabled } from "../hooks/use-disabled.js";
-import { onMount } from "svelte";
 import { useDescriptionContext } from "./context.svelte.js";
-const internalId = htmlid();
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { untrack } from "svelte";
+const internalId = useId();
 const providedDisabled = useDisabled();
 let {
-  as,
+  ref = $bindable(),
   id = `headlessui-description-${internalId}`,
-  children,
   ...theirProps
 } = $props();
-const context = useDescriptionContext();
-onMount(() => {
-  context.register(id);
+const { register } = useDescriptionContext();
+$effect(() => {
+  id;
+  return untrack(() => register(id));
 });
-const disabled = $derived(providedDisabled.value || false);
+const disabled = $derived(providedDisabled.current || false);
 const slot = $derived({ disabled });
-const ourProps = $derived({ id, ...stateFromSlot(slot) });
+const ourProps = $derived({ id });
 </script>
 
-<svelte:element this={as ?? DEFAULT_DESCRIPTION_TAG} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot, {})}{/if}
-</svelte:element>
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_DESCRIPTION_TAG}
+  name="Description"
+  bind:ref
+/>

package/dist/description/Description.svelte.d.ts

@@ -14,7 +14,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DESCRI
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/description/context.svelte.js

@@ -1,8 +1,8 @@
 import { getContext, setContext } from "svelte";
 export function useDescriptionContext() {
-    let context = getContext("DescriptionContext");
+    const context = getContext("DescriptionContext");
     if (!context) {
-        let err = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
+        const err = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useDescriptionContext);
         throw err;
@@ -18,10 +18,19 @@ export function useDescribedBy() {
     };
 }
 export const useDescriptions = (options = {}) => {
-    const { slot, name, props, inherit } = $derived(options);
-    let descriptionIds = $state([]);
+    const { slot, name, props } = $derived(options);
+    const descriptionIds = $state([]);
+    const register = (value) => {
+        descriptionIds.push(value);
+        return () => {
+            const idx = descriptionIds.indexOf(value);
+            if (idx !== -1)
+                descriptionIds.splice(idx, 1);
+        };
+    };
     const value = $derived(descriptionIds.length > 0 ? descriptionIds.join(" ") : undefined);
     const context = {
+        register,
         get slot() {
             return slot;
         },
@@ -34,17 +43,6 @@ export const useDescriptions = (options = {}) => {
         get value() {
             return value;
         },
-        register(value) {
-            descriptionIds.push(value);
-            return () => {
-                const clone = descriptionIds.slice();
-                const idx = clone.indexOf(value);
-                if (idx !== -1)
-                    clone.splice(idx, 1);
-                descriptionIds = clone;
-                return descriptionIds;
-            };
-        },
     };
     setContext("DescriptionContext", context);
     return context;

package/dist/field/Field.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>let DEFAULT_FIELD_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">import { useDisabled } from "../hooks/use-disabled.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">import { provideDisabled } from "../hooks/use-disabled.js";
 import { createIdContext } from "../utils/id.js";
 import { nanoid } from "nanoid";
-import { setContext } from "svelte";
 import { useLabels } from "../label/context.svelte.js";
 import { useDescriptions } from "../description/context.svelte.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
@@ -19,13 +18,8 @@ const inputId = `headlessui-control-${nanoid(8)}`;
 createIdContext(inputId);
 useLabels();
 useDescriptions();
-const providedDisabled = useDisabled();
-const disabled = $derived(providedDisabled.value || ownDisabled);
-setContext("DisabledContext", {
-  get value() {
-    return disabled;
-  }
-});
+const disabledContext = provideDisabled(() => ownDisabled);
+const { current: disabled } = $derived(disabledContext);
 const slot = $derived({ disabled });
 const ourProps = $derived({
   disabled: disabled || void 0,

package/dist/fieldset/Fieldset.svelte

@@ -11,7 +11,7 @@ let {
   ...theirProps
 } = $props();
 const providedDisabled = useDisabled();
-const disabled = $derived(providedDisabled.value || ownDisabled);
+const disabled = $derived(providedDisabled.current || ownDisabled);
 setContext("DisabledContext", {
   get value() {
     return disabled;

package/dist/hooks/use-disabled.d.ts

@@ -1,3 +1,6 @@
 export declare const useDisabled: () => {
-    readonly value: boolean;
+    readonly current: boolean;
+};
+export declare const provideDisabled: (disabled: () => boolean) => {
+    readonly current: boolean;
 };

package/dist/hooks/use-disabled.js

@@ -1,9 +1,14 @@
-import { getContext } from "svelte";
+import { getContext, setContext } from "svelte";
 export const useDisabled = () => {
-    const context = getContext("DisabledContext");
-    return {
-        get value() {
-            return context?.value ?? false;
+    return getContext("DisabledContext") ?? { current: false };
+};
+export const provideDisabled = (disabled) => {
+    const parentDisabled = useDisabled();
+    const context = {
+        get current() {
+            return disabled() || parentDisabled.current;
         },
     };
+    setContext("DisabledContext", context);
+    return context;
 };

package/dist/input/Input.svelte

@@ -22,7 +22,7 @@ let {
   invalid = false,
   ...theirProps
 } = $props();
-const disabled = $derived(providedDisabled?.value ?? theirDisabled);
+const disabled = $derived(providedDisabled.current || theirDisabled);
 const labelledBy = useLabelledBy();
 const describedBy = useDescribedBy();
 const { isHovered: hover, hoverProps } = $derived(

package/dist/label/Label.svelte

@@ -45,7 +45,7 @@ let handleClick = (e) => {
     }
   }
 };
-const disabled = $derived(providedDisabled.value ?? false);
+const disabled = $derived(providedDisabled.current ?? false);
 const slot = $derived({ disabled });
 const ourProps = $derived({
   id,

package/dist/listbox/Listbox.svelte

@@ -213,7 +213,7 @@ let {
   ...theirProps
 } = $props();
 const providedDisabled = useDisabled();
-const disabled = $derived(providedDisabled.value || ownDisabled);
+const disabled = $derived(providedDisabled.current || ownDisabled);
 const orientation = horizontal ? "horizontal" : "vertical";
 const controllable = useControllable(
   {

package/dist/menu/Menu.svelte

@@ -7,14 +7,9 @@ import { match } from "../utils/match.js";
 let DEFAULT_MENU_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">import { setContext } from "svelte";
-import {
-  ActivationTrigger,
-  MenuStates,
-  stateReducer
-} from "./context.svelte.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">import { ActivationTrigger, createMenuContext, MenuStates } from "./context.svelte.js";
 let { ref = $bindable(), __demoMode = false, ...theirProps } = $props();
-const _state = stateReducer({
+const context = createMenuContext({
   __demoMode,
   menuState: __demoMode ? MenuStates.Open : MenuStates.Closed,
   buttonElement: null,
@@ -24,8 +19,7 @@ const _state = stateReducer({
   activeItemIndex: null,
   activationTrigger: ActivationTrigger.Other
 });
-const { menuState, itemsElement, buttonElement } = $derived(_state);
-setContext("MenuContext", _state);
+const { menuState, itemsElement, buttonElement } = $derived(context);
 const outsideClickEnabled = $derived(menuState === MenuStates.Open);
 useOutsideClick({
   get enabled() {
@@ -35,7 +29,7 @@ useOutsideClick({
     return [buttonElement, itemsElement];
   },
   cb: (event, target) => {
-    _state.closeMenu();
+    context.closeMenu();
     if (!isFocusableElement(target, FocusableMode.Loose)) {
       event.preventDefault();
       buttonElement?.focus();
@@ -43,8 +37,8 @@ useOutsideClick({
   }
 });
 const slot = $derived({
-  open: _state.menuState === MenuStates.Open,
-  close: _state.closeMenu
+  open: context.menuState === MenuStates.Open,
+  close: context.closeMenu
 });
 useFloatingProvider();
 const openClosed = $derived(

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

@@ -45,32 +45,4 @@ 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;
-};
+export declare const createMenuContext: (initialState: StateDefinition) => MenuContext;

package/dist/menu/context.svelte.js

@@ -1,6 +1,6 @@
 import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
 import { sortByDomNode } from "../utils/focus-management.js";
-import { getContext } from "svelte";
+import { getContext, setContext } from "svelte";
 export var MenuStates;
 (function (MenuStates) {
     MenuStates[MenuStates["Open"] = 0] = "Open";
@@ -14,7 +14,7 @@ export var ActivationTrigger;
 export function useMenuContext(component) {
     const context = getContext("MenuContext");
     if (!context) {
-        let err = new Error(`<${component} /> is missing a parent <Menu /> component.`);
+        const err = new Error(`<${component} /> is missing a parent <Menu /> component.`);
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useMenuContext);
         throw err;
@@ -22,8 +22,8 @@ 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);
+    const currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null;
+    const 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;
@@ -36,9 +36,9 @@ function adjustOrderedState(state, adjustment = (i) => i) {
         activeItemIndex: adjustedActiveItemIndex,
     };
 }
-export const stateReducer = (initialState) => {
-    let _state = $state(initialState);
-    return {
+export const createMenuContext = (initialState) => {
+    const _state = $state(initialState);
+    const context = {
         get menuState() {
             return _state.menuState;
         },
@@ -104,17 +104,17 @@ export const stateReducer = (initialState) => {
             // 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;
+                const activeItemIdx = _state.activeItemIndex;
                 if (activeItemIdx !== null) {
-                    let currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
-                    let previousItemIndex = calculateActiveIndex(action, {
+                    const currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    const 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;
+                        const previousDom = _state.items[previousItemIndex].dataRef.current.domRef;
                         if (
                         // Next to each other
                         currentDom.current?.previousElementSibling === previousDom.current ||
@@ -132,17 +132,17 @@ export const stateReducer = (initialState) => {
             // 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;
+                const activeItemIdx = _state.activeItemIndex;
                 if (activeItemIdx !== null) {
-                    let currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
-                    let nextItemIndex = calculateActiveIndex(action, {
+                    const currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    const 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;
+                        const nextDom = _state.items[nextItemIndex].dataRef.current.domRef;
                         if (
                         // Next to each other
                         currentDom.current?.nextElementSibling === nextDom.current ||
@@ -157,8 +157,8 @@ export const stateReducer = (initialState) => {
             // Slow path:
             //
             // Ensure all the items are correctly sorted according to DOM position
-            let adjustedState = adjustOrderedState(_state);
-            let activeItemIndex = calculateActiveIndex(action, {
+            const adjustedState = adjustOrderedState(_state);
+            const activeItemIndex = calculateActiveIndex(action, {
                 resolveItems: () => adjustedState.items,
                 resolveActiveIndex: () => adjustedState.activeItemIndex,
                 resolveId: (item) => item.id,
@@ -169,16 +169,16 @@ export const stateReducer = (initialState) => {
             return _state;
         },
         search(value) {
-            let wasAlreadySearching = _state.searchQuery !== "";
-            let offset = wasAlreadySearching ? 0 : 1;
-            let searchQuery = _state.searchQuery + value.toLowerCase();
-            let reOrderedItems = _state.activeItemIndex !== null
+            const wasAlreadySearching = _state.searchQuery !== "";
+            const offset = wasAlreadySearching ? 0 : 1;
+            const searchQuery = _state.searchQuery + value.toLowerCase();
+            const 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;
+            const matchingItem = reOrderedItems.find((item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled);
+            const matchIdx = matchingItem ? _state.items.indexOf(matchingItem) : -1;
             if (matchIdx === -1 || matchIdx === _state.activeItemIndex) {
                 _state.searchQuery = searchQuery;
                 return _state;
@@ -195,15 +195,15 @@ export const stateReducer = (initialState) => {
             return _state;
         },
         registerItem(id, dataRef) {
-            let item = { id, dataRef };
-            let adjustedState = adjustOrderedState(_state, (items) => [...items, item]);
+            const item = { id, dataRef };
+            const 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);
+            const adjustedState = adjustOrderedState(_state, (items) => {
+                const idx = items.findIndex((a) => a.id === id);
                 if (idx !== -1)
                     items.splice(idx, 1);
                 return items;
@@ -226,4 +226,6 @@ export const stateReducer = (initialState) => {
             return _state;
         },
     };
+    setContext("MenuContext", context);
+    return context;
 };

package/dist/select/Select.svelte

@@ -22,7 +22,7 @@ let {
   autofocus = false,
   ...theirProps
 } = $props();
-const disabled = $derived(providedDisabled?.value ?? theirDisabled);
+const disabled = $derived(providedDisabled.current ?? theirDisabled);
 const labelledBy = useLabelledBy();
 const describedBy = useDescribedBy();
 const { isFocusVisible: focus, focusProps } = $derived(

package/dist/switch/Switch.svelte

@@ -33,7 +33,7 @@ let {
   tabIndex,
   ...theirProps
 } = $props();
-const disabled = $derived(providedDisabled?.value ?? theirDisabled);
+const disabled = $derived(providedDisabled.current ?? theirDisabled);
 const groupContext = getContext("GroupContext");
 $effect(() => {
   if (groupContext) groupContext.switchElement = ref ?? null;

package/dist/textarea/Textarea.svelte

@@ -22,7 +22,7 @@ let {
   invalid = false,
   ...theirProps
 } = $props();
-const disabled = $derived(providedDisabled?.value ?? theirDisabled);
+const disabled = $derived(providedDisabled.current || theirDisabled);
 const labelledBy = useLabelledBy();
 const describedBy = useDescribedBy();
 const { isFocusVisible: focus, focusProps } = $derived(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.22",
+  "version": "2.1.2-next.23",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -40,7 +40,7 @@
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "publint": "^0.2.11",
-    "svelte": "5.0.0-next.249",
+    "svelte": "5.0.0-next.252",
     "svelte-check": "^3.8.6",
     "tailwindcss": "^3.4.12",
     "tslib": "^2.7.0",