@pzerelles/headlessui-svelte 2.0.0-next.1

package/dist/internal/FormFields.svelte

@@ -0,0 +1,44 @@
+<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 Hidden, { HiddenFeatures } from "./Hidden.svelte";
+import { compact } from "../utils/object.js";
+let {
+  data,
+  form: formId,
+  disabled,
+  onReset,
+  overrides
+} = $props();
+let form = $state(null);
+const d = disposables();
+$effect(() => {
+  if (!onReset)
+    return;
+  if (!form)
+    return;
+  return d.addEventListener(form, "reset", onReset);
+});
+</script>
+
+<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,
+      })}
+    />
+  {/each}
+</HoistFormFields>

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

@@ -0,0 +1,22 @@
+/// <reference types="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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const FormFields: $$__sveltets_2_IsomorphicComponent<{
+    data: Record<string, any>;
+    overrides?: Record<string, any> | undefined;
+    form?: string | undefined;
+    disabled?: boolean | undefined;
+    onReset?: ((e: Event) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type FormFields = InstanceType<typeof FormFields>;
+export default FormFields;

package/dist/internal/FormResolver.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import Hidden, { HiddenFeatures } from "./Hidden.svelte";
+let { setForm, formId } = $props();
+$effect(() => {
+  if (formId) {
+    let resolvedForm = document.getElementById(formId);
+    if (resolvedForm)
+      setForm(resolvedForm);
+  }
+});
+</script>
+
+{#if !formId}
+  <Hidden
+    features={HiddenFeatures.Hidden}
+    as="input"
+    type="hidden"
+    hidden
+    readonly
+    ref={(el) => {
+      if (!el) return
+      let resolvedForm = el.closest("form")
+      if (resolvedForm) setForm(resolvedForm)
+    }}
+  />
+{/if}

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

@@ -0,0 +1,19 @@
+/// <reference types="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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const FormResolver: $$__sveltets_2_IsomorphicComponent<{
+    setForm: (form: HTMLFormElement) => void;
+    formId?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type FormResolver = InstanceType<typeof FormResolver>;
+export default FormResolver;

package/dist/internal/Hidden.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" context="module">export var HiddenFeatures = /* @__PURE__ */ ((HiddenFeatures2) => {
+  HiddenFeatures2[HiddenFeatures2["None"] = 1] = "None";
+  HiddenFeatures2[HiddenFeatures2["Focusable"] = 2] = "Focusable";
+  HiddenFeatures2[HiddenFeatures2["Hidden"] = 4] = "Hidden";
+  return HiddenFeatures2;
+})(HiddenFeatures || {});
+</script>
+
+<script lang="ts">import { onMount } from "svelte";
+const DEFAULT_VISUALLY_HIDDEN_TAG = "div";
+let { as = "div", features = HiddenFeatures.None, ref: applyRef, ...theirProps } = $props();
+let ref = $state();
+onMount(() => {
+  applyRef?.(ref);
+});
+let ourProps = {
+  "aria-hidden": (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable ? true : theirProps["aria-hidden"] ?? void 0,
+  hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : void 0,
+  style: [
+    "position: fixed",
+    "top: 1px",
+    "left: 1px",
+    "width: 1px",
+    "height: 0",
+    "padding: 0",
+    "margin: -1px",
+    "overflow: hidden",
+    "clip: rect(0, 0, 0, 0)",
+    "whiteSpace: nowrap",
+    "borderWidth: 0",
+    ...(features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden && !((features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable) ? ["display: none"] : []
+  ].join("; ")
+};
+</script>
+
+<svelte:element this={as} {...theirProps} {...ourProps} bind:this={ref} />

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

@@ -0,0 +1,26 @@
+/// <reference types="svelte" />
+export declare enum HiddenFeatures {
+    None = 1,
+    Focusable = 2,
+    Hidden = 4
+}
+import type { HTMLInputAttributes } from "svelte/elements";
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const Hidden: $$__sveltets_2_IsomorphicComponent<Omit<HTMLInputAttributes, "style"> & {
+    as?: string | undefined;
+    features?: HiddenFeatures | undefined;
+    ref?: ((el: HTMLElement) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type Hidden = InstanceType<typeof Hidden>;
+export default Hidden;

package/dist/internal/HoistFormFields.svelte

@@ -0,0 +1,11 @@
+<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}

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

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const HoistFormFields: $$__sveltets_2_IsomorphicComponent<{
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type HoistFormFields = InstanceType<typeof HoistFormFields>;
+export default HoistFormFields;

package/dist/internal/Portal.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">import { onDestroy, onMount } from "svelte";
+let { target, children } = $props();
+let ref = $state();
+onMount(() => {
+  target.appendChild(ref);
+});
+onDestroy(() => {
+  const _ref = ref;
+  setTimeout(() => {
+    if (_ref?.parentNode) {
+      _ref.parentNode?.removeChild(_ref);
+    }
+  });
+});
+</script>
+
+<div bind:this={ref}>{@render children()}</div>

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

@@ -0,0 +1,19 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const Portal: $$__sveltets_2_IsomorphicComponent<{
+    target: HTMLElement;
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type Portal = InstanceType<typeof Portal>;
+export default Portal;

package/dist/label/Label.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" context="module">import { setContext, untrack } from "svelte";
+const DEFAULT_LABEL_TAG = "label";
+export const createLabelContext = () => {
+  let labelledBy = $state();
+  const context = {
+    get labelledBy() {
+      return labelledBy;
+    },
+    register(id) {
+      labelledBy = untrack(() => labelledBy === void 0 ? id : `${labelledBy} ${id}`.trim());
+    },
+    unregister(id) {
+      labelledBy = untrack(
+        () => labelledBy?.split(" ").filter((value) => value !== id).join(" ")
+      );
+    }
+  };
+  return setContext("Label", context);
+};
+export const getLabelContext = () => getContext("Label");
+const validateLabelContext = () => {
+  const context = getLabelContext();
+  if (context === void 0) {
+    const err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
+    if (Error.captureStackTrace)
+      Error.captureStackTrace(err, validateLabelContext);
+    throw err;
+  }
+  return context;
+};
+</script>
+
+<script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { getContext } from "svelte";
+import { getIdContext, htmlid } from "../utils/id.js";
+import { getDisabledContext } from "../utils/disabled.js";
+import { stateFromSlot } from "../utils/state.js";
+const internalId = htmlid();
+const context = validateLabelContext();
+const providedHtmlFor = getIdContext();
+const providedDisabled = getDisabledContext();
+let {
+  as,
+  id = `headlessui-label-${internalId}`,
+  htmlFor = providedHtmlFor,
+  passive = false,
+  children,
+  ...theirOriginalProps
+} = $props();
+$effect(() => {
+  context.register(id);
+  const registeredId = id;
+  return () => {
+    context.unregister(registeredId);
+  };
+});
+let handleClick = (e) => {
+  let current = e.currentTarget;
+  if (current instanceof HTMLLabelElement) {
+    e.preventDefault();
+  }
+  if (current instanceof HTMLLabelElement) {
+    let target = document.getElementById(current.getAttribute("htmlFor") ?? "");
+    if (target) {
+      let actuallyDisabled = target.getAttribute("disabled");
+      if (actuallyDisabled === "true" || actuallyDisabled === "") {
+        return;
+      }
+      let ariaDisabled = target.getAttribute("aria-disabled");
+      if (ariaDisabled === "true" || ariaDisabled === "") {
+        return;
+      }
+      if (target instanceof HTMLInputElement && (target.type === "radio" || target.type === "checkbox") || target.role === "radio" || target.role === "checkbox" || target.role === "switch") {
+        target.click();
+      }
+      target.focus({ preventScroll: true });
+    }
+  }
+};
+const disabled = $derived(providedDisabled?.disabled ?? false);
+const slot = $derived({ disabled });
+const ourProps = $derived({
+  id,
+  htmlFor: passive ? void 0 : htmlFor,
+  onclick: passive ? void 0 : handleClick,
+  ...stateFromSlot(slot)
+});
+const theirProps = $derived.by(() => {
+  if (passive) {
+    const { onclick: _, ...props } = theirOriginalProps;
+    return props;
+  } else {
+    return theirOriginalProps;
+  }
+});
+</script>
+
+<svelte:element this={as ?? (htmlFor ? DEFAULT_LABEL_TAG : "div")} {...ourProps} {...theirProps}>
+  {#if children}{@render children(slot)}{/if}
+</svelte:element>

package/dist/label/Label.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { SvelteHTMLElements } from "svelte/elements";
+export type LabelProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_LABEL_TAG> = SvelteHTMLElements[TTag] & {
+    as?: TTag;
+    passive?: boolean;
+    htmlFor?: string;
+    children?: Snippet<[
+        {
+            disabled: boolean;
+        }
+    ]>;
+};
+declare const DEFAULT_LABEL_TAG: "label";
+export type LabelContext = {
+    labelledBy?: string;
+    register: (id: string) => void;
+    unregister: (id: string) => void;
+};
+export declare const createLabelContext: () => LabelContext;
+export declare const getLabelContext: () => LabelContext | undefined;
+import { type Snippet } from "svelte";
+declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements> {
+    props(): LabelProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends keyof SvelteHTMLElements>(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 keyof SvelteHTMLElements>(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 Label: $$IsomorphicComponent;
+type Label<TTag extends keyof SvelteHTMLElements> = InstanceType<typeof Label<TTag>>;
+export default Label;

package/dist/label/index.d.ts

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

package/dist/label/index.js

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

package/dist/legend/Legend.svelte

@@ -0,0 +1,7 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import Label from "../label/Label.svelte";
+let { ...props } = $props();
+</script>
+
+<Label as="div" {...props} />

package/dist/legend/Legend.svelte.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="svelte" />
+export type LegendProps = SvelteHTMLElements["div"];
+import type { SvelteHTMLElements } from "svelte/elements";
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const Legend: $$__sveltets_2_IsomorphicComponent<import("svelte/elements").HTMLAttributes<HTMLDivElement>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type Legend = InstanceType<typeof Legend>;
+export default Legend;

package/dist/legend/index.d.ts

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

package/dist/legend/index.js

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

package/dist/utils/disabled.d.ts

@@ -0,0 +1,3 @@
+export declare const getDisabledContext: () => {
+    readonly disabled: boolean;
+} | undefined;

package/dist/utils/disabled.js

@@ -0,0 +1,2 @@
+import { getContext } from "svelte";
+export const getDisabledContext = () => getContext("Disabled");

package/dist/utils/disposables.d.ts

@@ -0,0 +1,24 @@
+export type Disposables = ReturnType<typeof disposables>;
+/**
+ * Disposables are a way to manage event handlers and functions like
+ * `setTimeout` and `requestAnimationFrame` that need to be cleaned up when they
+ * are no longer needed.
+ *
+ *
+ * When you register a disposable function, it is added to a collection of
+ * disposables. Each disposable in the collection provides a `dispose` clean up
+ * function that can be called when it's no longer needed. There is also a
+ * `dispose` function on the collection itself that can be used to clean up all
+ * pending disposables in that collection.
+ */
+export declare function disposables(): {
+    addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions): () => void;
+    requestAnimationFrame(callback: FrameRequestCallback): () => void;
+    nextFrame(callback: FrameRequestCallback): () => void;
+    setTimeout(callback: (args: void) => void, ms?: number | undefined): () => void;
+    microTask(cb: () => void): () => void;
+    style(node: HTMLElement, property: string, value: string): () => void;
+    group(cb: (d: typeof this) => void): () => void;
+    add(cb: () => void): () => void;
+    dispose(): void;
+};

package/dist/utils/disposables.js

@@ -0,0 +1,78 @@
+import { microTask } from "./microTask.js";
+/**
+ * Disposables are a way to manage event handlers and functions like
+ * `setTimeout` and `requestAnimationFrame` that need to be cleaned up when they
+ * are no longer needed.
+ *
+ *
+ * When you register a disposable function, it is added to a collection of
+ * disposables. Each disposable in the collection provides a `dispose` clean up
+ * function that can be called when it's no longer needed. There is also a
+ * `dispose` function on the collection itself that can be used to clean up all
+ * pending disposables in that collection.
+ */
+export function disposables() {
+    let _disposables = [];
+    let api = {
+        addEventListener(element, name, listener, options) {
+            element.addEventListener(name, listener, options);
+            return api.add(() => element.removeEventListener(name, listener, options));
+        },
+        requestAnimationFrame(...args) {
+            let raf = requestAnimationFrame(...args);
+            return api.add(() => cancelAnimationFrame(raf));
+        },
+        nextFrame(...args) {
+            return api.requestAnimationFrame(() => {
+                return api.requestAnimationFrame(...args);
+            });
+        },
+        setTimeout(...args) {
+            let timer = setTimeout(...args);
+            return api.add(() => clearTimeout(timer));
+        },
+        microTask(...args) {
+            let task = { current: true };
+            microTask(() => {
+                if (task.current) {
+                    args[0]();
+                }
+            });
+            return api.add(() => {
+                task.current = false;
+            });
+        },
+        style(node, property, value) {
+            let previous = node.style.getPropertyValue(property);
+            Object.assign(node.style, { [property]: value });
+            return this.add(() => {
+                Object.assign(node.style, { [property]: previous });
+            });
+        },
+        group(cb) {
+            let d = disposables();
+            cb(d);
+            return this.add(() => d.dispose());
+        },
+        add(cb) {
+            // Ensure we don't add the same callback twice
+            if (!_disposables.includes(cb)) {
+                _disposables.push(cb);
+            }
+            return () => {
+                let idx = _disposables.indexOf(cb);
+                if (idx >= 0) {
+                    for (let dispose of _disposables.splice(idx, 1)) {
+                        dispose();
+                    }
+                }
+            };
+        },
+        dispose() {
+            for (let dispose of _disposables.splice(0)) {
+                dispose();
+            }
+        },
+    };
+    return api;
+}

package/dist/utils/dom.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="node" />
+export declare const getOwnerDocument: (el: Element | null | undefined) => Document;
+export declare const getOwnerWindow: (el: (Window & typeof global) | Element | null | undefined) => Window & typeof global;

package/dist/utils/dom.js

@@ -0,0 +1,10 @@
+export const getOwnerDocument = (el) => {
+    return el?.ownerDocument ?? document;
+};
+export const getOwnerWindow = (el) => {
+    if (el && "window" in el && el.window === el) {
+        return el;
+    }
+    const doc = getOwnerDocument(el);
+    return doc.defaultView || window;
+};

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

@@ -0,0 +1,50 @@
+export type Modality = "keyboard" | "pointer" | "virtual";
+export type FocusVisibleHandler = (isFocusVisible: boolean) => void;
+export interface FocusVisibleProps {
+    /** Whether the element is a text input. */
+    isTextInput?: boolean;
+    /** Whether the element will be auto focused. */
+    autoFocus?: boolean;
+}
+export interface FocusVisibleResult {
+    /** Whether keyboard focus is visible globally. */
+    isFocusVisible: boolean;
+}
+interface GlobalListenerData {
+    focus: () => void;
+}
+export declare let hasSetupGlobalListeners: Map<Window, GlobalListenerData>;
+/**
+ * EXPERIMENTAL
+ * Adds a window (i.e. iframe) to the list of windows that are being tracked for focus visible.
+ *
+ * Sometimes apps render portions of their tree into an iframe. In this case, we cannot accurately track if the focus
+ * is visible because we cannot see interactions inside the iframe. If you have this in your application's architecture,
+ * then this function will attach event listeners inside the iframe. You should call `addWindowFocusTracking` with an
+ * element from inside the window you wish to add. We'll retrieve the relevant elements based on that.
+ * Note, you do not need to call this for the default window, as we call it for you.
+ *
+ * When you are ready to stop listening, but you do not wish to unmount the iframe, you may call the cleanup function
+ * returned by `addWindowFocusTracking`. Otherwise, when you unmount the iframe, all listeners and state will be cleaned
+ * up automatically for you.
+ *
+ * @param element @default document.body - The element provided will be used to get the window to add.
+ * @returns A function to remove the event listeners and cleanup the state.
+ */
+export declare function addWindowFocusTracking(element?: HTMLElement | null): () => void;
+/**
+ * If true, keyboard focus is visible.
+ */
+export declare function isFocusVisible(): boolean;
+export declare function getInteractionModality(): Modality | null;
+export declare function setInteractionModality(modality: Modality): void;
+/**
+ * Manages focus visible state for the page, and subscribes individual components for updates.
+ */
+/**
+ * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
+ */
+export declare function useFocusVisibleListener(fn: FocusVisibleHandler, opts?: {
+    isTextInput?: boolean;
+}): void;
+export {};