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

package/dist/button/Button.svelte

@@ -0,0 +1,65 @@
+<script lang="ts" context="module">const DEFAULT_BUTTON_TAG = "button";
+</script>
+
+<script lang="ts" generics="TTag extends keyof SvelteHTMLElements, TType">import { useActivePress } from "../hooks/use-active-press.svelte.js";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { stateFromSlot } from "../utils/state.js";
+import { useHover } from "../hooks/use-hover.svelte.js";
+import { mergeProps } from "../utils/render.js";
+const providedDisabled = useDisabled();
+let {
+  as,
+  disabled: ownDisabled = false,
+  autofocus = false,
+  type = "button",
+  children,
+  ...theirProps
+} = $props();
+const disabled = $derived(providedDisabled.value || ownDisabled);
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
+    }
+  })
+);
+const slot = $derived({
+  disabled,
+  hover,
+  focus,
+  active,
+  autofocus
+});
+const ourProps = $derived(
+  mergeProps(
+    {
+      type,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps,
+    pressProps,
+    stateFromSlot(slot)
+  )
+);
+</script>
+
+<svelte:element this={as ?? DEFAULT_BUTTON_TAG} {...ourProps} {...theirProps}>
+  {#if children}{@render children(slot)}{/if}
+</svelte:element>

package/dist/button/Button.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { SvelteHTMLElements } from "svelte/elements";
+export type ButtonProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_BUTTON_TAG> = SvelteHTMLElements[TTag] & {
+    as?: TTag;
+    disabled?: boolean;
+    autofocus?: boolean;
+    type?: "button" | "submit" | "reset";
+    children?: Snippet<[
+        {
+            disabled: boolean;
+            hover: boolean;
+            focus: boolean;
+            active: boolean;
+            autofocus: boolean;
+        }
+    ]>;
+};
+declare const DEFAULT_BUTTON_TAG: "button";
+import type { Snippet } from "svelte";
+declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements, TType> {
+    props(): ButtonProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends keyof SvelteHTMLElements, 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 keyof SvelteHTMLElements, 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 Button: $$IsomorphicComponent;
+type Button<TTag extends keyof SvelteHTMLElements, TType> = InstanceType<typeof Button<TTag, TType>>;
+export default Button;

package/dist/button/index.d.ts

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

package/dist/button/index.js

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

package/dist/checkbox/Checkbox.svelte

@@ -2,18 +2,20 @@
 </script>
 
 <script lang="ts" generics="TTag extends keyof SvelteHTMLElements, TType">import { tick } from "svelte";
-import { createHover } from "svelte-interactions";
 import { attemptSubmit } from "../utils/form.js";
 import { getIdContext, htmlid } from "../utils/id.js";
-import { createActivePress } from "../actions/activePress.svelte.js";
-import { createFocusRing } from "../actions/focusRing.svelte.js";
+import { useActivePress } from "../hooks/use-active-press.svelte.js";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
 import FormFields from "../internal/FormFields.svelte";
-import { getLabelContext } from "../label/Label.svelte";
-import { getDisabledContext } from "../utils/disabled.js";
+import { useDisabled } from "../hooks/use-disabled.js";
 import { stateFromSlot } from "../utils/state.js";
+import { useLabelledBy } from "../label/Label.svelte";
+import { useDescribedBy } from "../description/Description.svelte";
+import { useHover } from "../hooks/use-hover.svelte.js";
+import { mergeProps } from "../utils/render.js";
 const internalId = htmlid();
 const providedId = getIdContext();
-const providedDisabled = getDisabledContext();
+const providedDisabled = useDisabled();
 let {
   id = providedId || `headlessui-checkbox-${internalId}`,
   as,
@@ -22,19 +24,37 @@ let {
   indeterminate = false,
   defaultChecked,
   checked = $bindable(defaultChecked ?? false),
-  autoFocus,
+  autofocus,
   form,
   name,
   onchange,
   children,
   ...theirProps
 } = $props();
-const disabled = $derived(providedDisabled?.disabled || ownDisabled);
-const { hoverAction: hover, isHovered } = $derived(createHover({ isDisabled: disabled }));
-const ap = $derived(createActivePress({ disabled }));
-const fr = createFocusRing({ autoFocus });
-const labelContext = getLabelContext();
-const labelledBy = $derived(labelContext?.labelledBy);
+const disabled = $derived(providedDisabled.value || ownDisabled);
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
+    }
+  })
+);
+const labelledBy = useLabelledBy();
+const describedBy = useDescribedBy();
 let changing = $state(false);
 const toggle = () => {
   changing = true;
@@ -45,8 +65,7 @@ const toggle = () => {
   });
 };
 const handleClick = (event) => {
-  if (disabled)
-    return event.preventDefault();
+  if (disabled) return event.preventDefault();
   event.preventDefault();
   toggle();
 };
@@ -55,40 +74,42 @@ const handleKeyUp = (event) => {
     event.preventDefault();
     toggle();
   } else if (event.key === "Enter") {
-    if (event.currentTarget)
-      attemptSubmit(event.currentTarget);
+    if (event.currentTarget) attemptSubmit(event.currentTarget);
   }
 };
 const handleKeyPress = (event) => event.preventDefault();
 const slot = $derived({
   checked,
   changing,
-  focus: fr.focusVisible,
-  active: ap.pressed,
-  hover: $isHovered,
-  autofocus: autoFocus ?? false,
+  focus,
+  active,
+  hover,
+  autofocus: autofocus ?? false,
   disabled,
   indeterminate
 });
-const states = $derived(
-  Object.entries(slot).filter(([, value2]) => value2).map(([key]) => key)
+const ownProps = $derived(
+  mergeProps(
+    {
+      id,
+      role: "checkbox",
+      "aria-checked": indeterminate ? "mixed" : checked ? true : false,
+      "aria-labelledby": labelledBy.value,
+      "aria-describedby": describedBy.value,
+      "aria-disabled": disabled ? true : void 0,
+      tabindex: disabled ? void 0 : 0,
+      onkeyup: disabled ? void 0 : handleKeyUp,
+      onkeypress: disabled ? void 0 : handleKeyPress,
+      onclick: disabled ? void 0 : handleClick
+    },
+    focusProps,
+    hoverProps,
+    pressProps,
+    stateFromSlot(slot)
+  )
 );
-const ownProps = $derived({
-  id,
-  role: "checkbox",
-  "aria-checked": indeterminate ? "mixed" : checked ? true : false,
-  "aria-labelledby": labelledBy,
-  "aria-describedby": void 0,
-  "aria-disabled": disabled ? true : void 0,
-  tabindex: disabled ? void 0 : 0,
-  onkeyup: disabled ? void 0 : handleKeyUp,
-  onkeypress: disabled ? void 0 : handleKeyPress,
-  onclick: disabled ? void 0 : handleClick,
-  ...stateFromSlot(slot)
-});
 const reset = $derived(() => {
-  if (defaultChecked === void 0)
-    return;
+  if (defaultChecked === void 0) return;
   return onchange?.(defaultChecked);
 });
 </script>
@@ -102,13 +123,6 @@ const reset = $derived(() => {
     onReset={reset}
   />
 {/if}
-<svelte:element
-  this={as ?? DEFAULT_CHECKBOX_TAG}
-  use:hover
-  use:ap.activePressAction
-  use:fr.focusRingAction
-  {...ownProps}
-  {...theirProps}
->
+<svelte:element this={as ?? DEFAULT_CHECKBOX_TAG} {...ownProps} {...theirProps}>
   {#if children}{@render children(slot)}{/if}
 </svelte:element>

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

@@ -6,7 +6,7 @@ export type CheckboxProps<TType = string, TTag extends keyof SvelteHTMLElements
     indeterminate?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
-    autoFocus?: boolean;
+    autofocus?: boolean;
     form?: string;
     name?: string;
     onchange?: (checked: boolean) => void;

package/dist/close-button/CloseButton.svelte

@@ -0,0 +1,10 @@
+<script lang="ts" context="module">import Button, {} from "../button/Button.svelte";
+import { getCloseContext } from "../utils/close.js";
+const DEFAULT_BUTTON_TAG = "button";
+</script>
+
+<script lang="ts" generics="TTag extends keyof SvelteHTMLElements, TType">const close = getCloseContext();
+let { ...props } = $props();
+</script>
+
+<Button onclick={close} {...props} />

package/dist/close-button/CloseButton.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { SvelteHTMLElements } from "svelte/elements";
+import { type ButtonProps } from "../button/Button.svelte";
+export type CloseButtonProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_BUTTON_TAG> = ButtonProps<TTag>;
+declare const DEFAULT_BUTTON_TAG: "button";
+declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements, TType> {
+    props(): CloseButtonProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends keyof SvelteHTMLElements, 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 keyof SvelteHTMLElements, 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 CloseButton: $$IsomorphicComponent;
+type CloseButton<TTag extends keyof SvelteHTMLElements, TType> = InstanceType<typeof CloseButton<TTag, TType>>;
+export default CloseButton;

package/dist/close-button/index.d.ts

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

package/dist/close-button/index.js

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

package/dist/combobox/Combobox.svelte

@@ -0,0 +1,6 @@
+<script lang="ts" context="module">const DEFAULT_COMBOBOX_TAG = "svelte:fragment";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType, TType">import { useDisabled } from "../hooks/use-disabled.js";
+const providedDisabled = useDisabled();
+</script>

package/dist/combobox/Combobox.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { ElementType, EnsureArray, Props } from "../utils/types.js";
+import type { ByComparator } from "../hooks/use-by-comparator.js";
+declare const DEFAULT_COMBOBOX_TAG: "svelte:fragment";
+type ComboboxRenderPropArg<TValue, TActive = TValue> = {
+    open: boolean;
+    disabled: boolean;
+    activeIndex: number | null;
+    activeOption: TActive | null;
+    value: TValue;
+};
+export type CheckboxProps<TValue, TMultiple extends boolean | undefined, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG> = Props<TTag, ComboboxRenderPropArg<NoInfer<TValue>>, "value" | "defaultValue" | "multiple" | "onChange" | "by", {
+    value?: TMultiple extends true ? EnsureArray<TValue> : TValue;
+    defaultValue?: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue>;
+    onChange?(value: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue> | null): void;
+    by?: ByComparator<TMultiple extends true ? EnsureArray<NoInfer<TValue>>[number] : NoInfer<TValue>>;
+    /** @deprecated The `<Combobox />` is now nullable default */
+    nullable?: boolean;
+    multiple?: TMultiple;
+    disabled?: boolean;
+    form?: string;
+    name?: string;
+    immediate?: boolean;
+    virtual?: {
+        options: NoInfer<TValue>[];
+        disabled?: (value: NoInfer<TValue>) => boolean;
+    } | null;
+    onClose?(): void;
+    __demoMode?: boolean;
+}>;
+declare class __sveltets_Render<TTag extends ElementType, TType> {
+    props(): Record<string, never>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): string;
+    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: {
+        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
+    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<TTag extends ElementType, TType> = InstanceType<typeof Combobox<TTag, TType>>;
+export default Combobox;

package/dist/description/Description.svelte

@@ -1,49 +1,67 @@
-<script lang="ts" context="module">import { getContext, setContext, untrack } from "svelte";
+<script lang="ts" context="module">import { getContext, setContext } from "svelte";
 const DEFAULT_DESCRIPTION_TAG = "p";
-export const createDescriptionContext = () => {
-  let describedBy = $state();
-  setContext("Description", {
-    get describedBy() {
-      return describedBy;
+export function useDescriptionContext() {
+  let context = getContext("DescriptionContext");
+  if (context === null) {
+    let 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;
+  }
+  return context;
+}
+export function useDescribedBy() {
+  const context = getContext("DescriptionContext");
+  return {
+    get value() {
+      return context?.value;
+    }
+  };
+}
+export const useDescriptions = (options = {}) => {
+  const { slot, name, props, inherit } = $derived(options);
+  let descriptionIds = $state([]);
+  const value = $derived(descriptionIds.length > 0 ? descriptionIds.join(" ") : void 0);
+  const context = {
+    get slot() {
+      return slot;
+    },
+    get name() {
+      return name;
     },
-    register(id) {
-      describedBy = untrack(() => describedBy === void 0 ? id : `${describedBy} ${id}`.trim());
+    get props() {
+      return props;
     },
-    unregister(id) {
-      describedBy = untrack(
-        () => describedBy?.split(" ").filter((value) => value !== id).join(" ")
-      );
+    get value() {
+      return value;
+    },
+    register(value2) {
+      descriptionIds.push(value2);
+      return () => {
+        const clone = descriptionIds.slice();
+        const idx = clone.indexOf(value2);
+        if (idx !== -1) clone.splice(idx, 1);
+        descriptionIds = clone;
+        return descriptionIds;
+      };
     }
-  });
-};
-export const getDescriptionContext = () => getContext("Description");
-const validateDescriptionContext = () => {
-  const context = getDescriptionContext();
-  if (context === void 0) {
-    const err = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
-    if (Error.captureStackTrace)
-      Error.captureStackTrace(err, validateDescriptionContext);
-    throw err;
-  }
+  };
+  setContext("DescriptionContext", context);
   return context;
 };
 </script>
 
 <script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { htmlid } from "../utils/id.js";
 import { stateFromSlot } from "../utils/state.js";
-import { getDisabledContext } from "../utils/disabled.js";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { onMount } from "svelte";
 const internalId = htmlid();
-const providedDisabled = getDisabledContext();
+const providedDisabled = useDisabled();
 let { as, id = `headlessui-description-${internalId}`, children, ...theirProps } = $props();
-const context = validateDescriptionContext();
-$effect(() => {
+const context = useDescriptionContext();
+onMount(() => {
   context.register(id);
-  const registeredId = id;
-  return () => {
-    context.unregister(registeredId);
-  };
 });
-const disabled = $derived(providedDisabled?.disabled || false);
+const disabled = $derived(providedDisabled.value || false);
 const slot = $derived({ disabled });
 const ourProps = $derived({ id, ...stateFromSlot(slot) });
 </script>

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

@@ -9,13 +9,22 @@ export type DescriptionProps<TTag extends keyof SvelteHTMLElements = typeof DEFA
     ]>;
 };
 declare const DEFAULT_DESCRIPTION_TAG: "p";
+interface SharedData {
+    slot?: {};
+    name?: string;
+    props?: Record<string, any>;
+}
 export type DescriptionContext = {
-    describedBy?: string;
-    register: (id: string) => void;
-    unregister: (id: string) => void;
+    value: string | undefined;
+    register(value: string): () => void;
+} & SharedData;
+export declare function useDescriptionContext(): DescriptionContext;
+export declare function useDescribedBy(): {
+    readonly value: string | undefined;
 };
-export declare const createDescriptionContext: () => void;
-export declare const getDescriptionContext: () => DescriptionContext;
+export declare const useDescriptions: (options?: SharedData & {
+    inherit?: boolean;
+}) => DescriptionContext;
 declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements> {
     props(): DescriptionProps<TTag>;
     events(): {} & {

package/dist/field/Field.svelte

@@ -1,22 +1,22 @@
 <script lang="ts" context="module">const DEFAULT_FIELD_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { createDescriptionContext } from "../description/Description.svelte";
-import { createLabelContext } from "../label/Label.svelte";
-import { getDisabledContext } from "../utils/disabled.js";
+<script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { useDisabled } from "../hooks/use-disabled.js";
 import { createIdContext } from "../utils/id.js";
 import { stateFromSlot } from "../utils/state.js";
 import { nanoid } from "nanoid";
 import { setContext } from "svelte";
+import { useLabels } from "../label/Label.svelte";
+import { useDescriptions } from "../description/Description.svelte";
 let { as, disabled: ownDisabled = false, children, ...theirProps } = $props();
 const inputId = `headlessui-control-${nanoid(8)}`;
 createIdContext(inputId);
-createLabelContext();
-createDescriptionContext();
-const providedDisabled = getDisabledContext();
-const disabled = $derived(providedDisabled?.disabled || ownDisabled);
-setContext("Disabled", {
-  get disabled() {
+useLabels();
+useDescriptions();
+const providedDisabled = useDisabled();
+const disabled = $derived(providedDisabled.value || ownDisabled);
+setContext("DisabledContext", {
+  get value() {
     return disabled;
   }
 });

package/dist/fieldset/Fieldset.svelte

@@ -2,26 +2,26 @@
 </script>
 
 <script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { setContext } from "svelte";
-import { getDisabledContext } from "../utils/disabled.js";
-import { createLabelContext } from "../label/Label.svelte";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { useLabels } from "../label/Label.svelte";
 let { as, disabled: ownDisabled = false, children, ...theirProps } = $props();
-const providedDisabled = getDisabledContext();
-const disabled = $derived(providedDisabled?.disabled || ownDisabled);
-setContext("Disabled", {
-  get disabled() {
+const providedDisabled = useDisabled();
+const disabled = $derived(providedDisabled.value || ownDisabled);
+setContext("DisabledContext", {
+  get value() {
     return disabled;
   }
 });
 const tag = $state(as ?? DEFAULT_FIELDSET_TAG);
-const labelContext = createLabelContext();
+const labelledBy = useLabels();
 const slot = $derived({ disabled });
 const ourProps = $derived(
   tag === "fieldset" ? {
-    "aria-labelledby": labelContext.labelledBy,
+    "aria-labelledby": labelledBy.value,
     disabled: disabled || void 0
   } : {
     role: "group",
-    "aria-labelledby": labelContext.labelledBy,
+    "aria-labelledby": labelledBy.value,
     "aria-disabled": disabled || void 0
   }
 );

package/dist/hooks/document-overflow/adjust-scrollbar-padding.d.ts

@@ -0,0 +1,2 @@
+import type { ScrollLockStep } from "./overflow-store.js";
+export declare function adjustScrollbarPadding(): ScrollLockStep;

package/dist/hooks/document-overflow/adjust-scrollbar-padding.js

@@ -0,0 +1,18 @@
+export function adjustScrollbarPadding() {
+    let scrollbarWidthBefore;
+    return {
+        before({ doc }) {
+            let documentElement = doc.documentElement;
+            let ownerWindow = doc.defaultView ?? window;
+            scrollbarWidthBefore = Math.max(0, ownerWindow.innerWidth - documentElement.clientWidth);
+        },
+        after({ doc, d }) {
+            let documentElement = doc.documentElement;
+            // Account for the change in scrollbar width
+            // NOTE: This is a bit of a hack, but it's the only way to do this
+            let scrollbarWidthAfter = Math.max(0, documentElement.clientWidth - documentElement.offsetWidth);
+            let scrollbarWidth = Math.max(0, scrollbarWidthBefore - scrollbarWidthAfter);
+            d.style(documentElement, "paddingRight", `${scrollbarWidth}px`);
+        },
+    };
+}

package/dist/hooks/document-overflow/handle-ios-locking.d.ts

@@ -0,0 +1,6 @@
+import type { ScrollLockStep } from "./overflow-store.js";
+interface ContainerMetadata {
+    containers: (() => HTMLElement[])[];
+}
+export declare function handleIOSLocking(): ScrollLockStep<ContainerMetadata>;
+export {};