@pzerelles/headlessui-svelte 2.1.2-next.31 → 2.1.2-next.33

package/dist/internal/Hidden.svelte

@@ -1,42 +1,49 @@
-<script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { HiddenFeatures } from "./HiddenFeatures.js";
-export * from "./HiddenFeatures.js";
-const DEFAULT_VISUALLY_HIDDEN_TAG = "span";
+<script lang="ts" module>
+  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"
+
+  const DEFAULT_VISUALLY_HIDDEN_TAG = "span" as const
+
+  type HiddenRenderPropArg = {}
+  type HiddenPropsWeControl = never
+  export type HiddenProps = Props<
+    typeof DEFAULT_VISUALLY_HIDDEN_TAG,
+    HiddenRenderPropArg,
+    { element?: HTMLElement; features?: HiddenFeatures }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">let {
-  ref = $bindable(),
-  value,
-  checked,
-  features = HiddenFeatures.None,
-  ...theirProps
-} = $props();
-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 lang="ts">
+  let { element = $bindable(), features = HiddenFeatures.None, ...theirProps }: HiddenProps = $props()
+
+  let ourProps = {
+    "aria-hidden":
+      (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable
+        ? true
+        : (theirProps["aria-hidden"] ?? undefined),
+    hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : undefined,
+    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>
 
-<ElementOrComponent
-  {ourProps}
-  {theirProps}
-  defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG}
-  name="Hidden"
-  bind:ref
-  {value}
-  {checked}
-/>
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:element />

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

@@ -1,37 +1,11 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import { HiddenFeatures } from "./HiddenFeatures.js";
 export * from "./HiddenFeatures.js";
 declare const DEFAULT_VISUALLY_HIDDEN_TAG: "span";
 type HiddenRenderPropArg = {};
-type HiddenPropsWeControl = never;
-export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<TTag, HiddenRenderPropArg, HiddenPropsWeControl, {
+export type HiddenProps = Props<typeof DEFAULT_VISUALLY_HIDDEN_TAG, HiddenRenderPropArg, {
+    element?: HTMLElement;
     features?: HiddenFeatures;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "features"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            slot: HiddenRenderPropArg;
-            props: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: HiddenRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        features?: HiddenFeatures;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG>(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 ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Hidden: $$IsomorphicComponent;
-type Hidden<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = InstanceType<typeof Hidden<TTag>>;
+declare const Hidden: import("svelte").Component<HiddenProps, {}, "element">;
 export default Hidden;

package/dist/internal/MainTreeProvider.svelte

@@ -1,45 +1,98 @@
-<script lang="ts" module>import { getContext, onMount } from "svelte";
-export function useMainTreeNode(options = {}) {
-  const { fallbackMainTreeNode = null } = $derived(options);
-  return getContext("MainTreeContext") ?? {
-    get node() {
-      return fallbackMainTreeNode;
-    }
-  };
-}
-</script>
+<script lang="ts" module>
+  import { getContext, onMount } from "svelte"
 
-<script lang="ts">import { setContext } from "svelte";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-import { getOwnerDocument } from "../utils/owner.js";
-let { node, children } = $props();
-let mainTreeNode = $state(null);
-const resolvedMainTreeNode = useMainTreeNode({
-  get fallbackMainTreeNode() {
-    return node ?? mainTreeNode;
-  }
-});
-setContext("MainTreeContext", {
-  get node() {
-    return resolvedMainTreeNode.node;
+  type MainTreeContext = { node: HTMLElement | null }
+
+  /**
+   * Get the main tree node from context or fallback to the optionally provided node.
+   */
+  export function useMainTreeNode(options: { fallbackMainTreeNode?: HTMLElement | null } = {}) {
+    const { fallbackMainTreeNode = null } = $derived(options)
+
+    // Prefer the main tree node from context, but fallback to the provided node.
+    return (
+      getContext<MainTreeContext>("MainTreeContext") ?? {
+        get node() {
+          return fallbackMainTreeNode
+        },
+      }
+    )
   }
-});
-let el = $state();
-onMount(() => {
-  if (!el) return;
-  for (let container of getOwnerDocument(el)?.querySelectorAll("html > *, body > *") ?? []) {
-    if (container === document.body) continue;
-    if (container === document.head) continue;
-    if (!(container instanceof HTMLElement)) continue;
-    if (container?.contains(el)) {
-      mainTreeNode = container;
-      break;
+</script>
+
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+  import { getOwnerDocument } from "../utils/owner.js"
+  /**
+   * A provider for the main tree node.
+   *
+   * When a component is rendered in a `Portal`, it is no longer part of the main
+   * tree. This provider helps to find the main tree node and pass it along to the
+   * components that need it.
+   *
+   * The main tree node is used for features such as outside click behavior, where
+   * we allow clicks in 3rd party containers, but not in the parent of the "main
+   * tree".
+   *
+   * In case of a `Popover`, we can use the `PopoverButton` as a marker in the
+   * "main tree", the `PopoverPanel` can't be used because it could be rendered in
+   * a `Portal` (e.g. when using the `anchor` props).
+   *
+   * However, we can't use the `PopoverButton` when it's nested inside of another
+   * `Popover`'s `PopoverPanel` component if the parent `PopoverPanel` is
+   * rendered in a `Portal`.
+   *
+   * This is where the `MainTreeProvider` comes in. It will find the "main tree"
+   * node and pass it on. The top-level `PopoverButton` will be used as a marker
+   * in the "main tree" and nested `Popover` will use this button as well.
+   */
+  let { node, children }: { children: Snippet; node?: HTMLElement | null } = $props()
+
+  let mainTreeNode = $state<HTMLElement | null>(null)
+
+  // 1. Prefer the main tree node from context
+  // 2. Prefer the provided node
+  // 3. Create a new node at this point, and find the main tree node
+  const resolvedMainTreeNode = useMainTreeNode({
+    get fallbackMainTreeNode() {
+      return node ?? mainTreeNode
+    },
+  })
+
+  setContext("MainTreeContext", {
+    get node() {
+      return resolvedMainTreeNode.node
+    },
+  })
+
+  /**
+   * If no main tree node is found at this point, then we briefly render an
+   * element to find the main tree node and pass it along.
+   */
+  let el = $state<HTMLElement>()
+  onMount(() => {
+    if (!el) return
+
+    // We will only render this when no `mainTreeNode` is found. This
+    // means that if we render this element and use it as the
+    // `mainTreeNode` that we will be unmounting it later.
+    //
+    // However, we can resolve the actual root container of the main
+    // tree node and use that instead.
+    for (let container of getOwnerDocument(el)?.querySelectorAll("html > *, body > *") ?? []) {
+      if (container === document.body) continue // Skip `<body>`
+      if (container === document.head) continue // Skip `<head>`
+      if (!(container instanceof HTMLElement)) continue // Skip non-HTMLElements
+      if (container?.contains(el)) {
+        mainTreeNode = container
+        break
+      }
     }
-  }
-});
+  })
 </script>
 
 {#if children}{@render children()}{/if}
 {#if resolvedMainTreeNode === null}
-  <Hidden features={HiddenFeatures.Hidden} bind:ref={el} />
+  <Hidden features={HiddenFeatures.Hidden} bind:element={el} />
 {/if}

package/dist/internal/Portal.svelte

@@ -1,17 +1,21 @@
-<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 lang="ts">
+  import { onDestroy, onMount, type Snippet } from "svelte"
+
+  let { target, children }: { target: HTMLElement; children: Snippet } = $props()
+  let ref = $state<HTMLDivElement>()
+
+  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/label/Label.svelte

@@ -1,66 +1,107 @@
-<script lang="ts" module>let DEFAULT_LABEL_TAG = "label";
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_LABEL_TAG = "label" as const
+
+  export type LabelProps = Props<
+    typeof DEFAULT_LABEL_TAG,
+    {},
+    {
+      element?: HTMLElement
+      id?: string
+      passive?: boolean
+      htmlFor?: string
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">import { onMount } from "svelte";
-import { useProvidedId, htmlid } from "../utils/id.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { stateFromSlot } from "../utils/state.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { useLabelContext } from "./context.svelte.js";
-const internalId = htmlid();
-const context = useLabelContext();
-const providedHtmlFor = useProvidedId();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  id = `headlessui-label-${internalId}`,
-  htmlFor = providedHtmlFor,
-  passive = false,
-  ...theirOriginalProps
-} = $props();
-onMount(() => {
-  context.register(id);
-});
-let handleClick = (e) => {
-  let current = e.currentTarget;
-  if (current instanceof HTMLLabelElement) {
-    e.preventDefault();
-  }
-  console.log("click", providedHtmlFor);
-  if (current instanceof HTMLLabelElement) {
-    let target = document.getElementById(current.getAttribute("for") ?? "");
-    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();
+<script lang="ts">
+  import { onMount } from "svelte"
+  import { useProvidedId, htmlid } from "../utils/id.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { stateFromSlot } from "../utils/state.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useLabelContext } from "./context.svelte.js"
+
+  const internalId = htmlid()
+  const context = useLabelContext()
+  const providedHtmlFor = useProvidedId()
+  const providedDisabled = useDisabled()
+
+  let {
+    element = $bindable(),
+    id = `headlessui-label-${internalId}`,
+    htmlFor = providedHtmlFor,
+    passive = false,
+    ...theirOriginalProps
+  }: LabelProps = $props()
+
+  onMount(() => {
+    context.register(id)
+  })
+
+  let handleClick = (e: MouseEvent) => {
+    let current = e.currentTarget
+
+    // Labels connected to 'real' controls will already click the element. But we don't know that
+    // ahead of time. This will prevent the default click, such that only a single click happens
+    // instead of two. Otherwise this results in a visual no-op.
+    if (current instanceof HTMLLabelElement) {
+      e.preventDefault()
+    }
+
+    console.log("click", providedHtmlFor)
+
+    if (current instanceof HTMLLabelElement) {
+      let target = document.getElementById(current.getAttribute("for") ?? "")
+      if (target) {
+        // Bail if the target element is disabled
+        let actuallyDisabled = target.getAttribute("disabled")
+        if (actuallyDisabled === "true" || actuallyDisabled === "") {
+          return
+        }
+
+        let ariaDisabled = target.getAttribute("aria-disabled")
+        if (ariaDisabled === "true" || ariaDisabled === "") {
+          return
+        }
+
+        // Ensure we click the element this label is bound to. This is necessary for elements that
+        // immediately require state changes, e.g.: Radio & Checkbox inputs need to be checked (or
+        // unchecked).
+        if (
+          (target instanceof HTMLInputElement && (target.type === "radio" || target.type === "checkbox")) ||
+          target.role === "radio" ||
+          target.role === "checkbox" ||
+          target.role === "switch"
+        ) {
+          target.click()
+        }
+
+        // Move focus to the element, this allows you to start using keyboard shortcuts since the
+        // bound element is now focused.
+        target.focus({ preventScroll: true })
       }
-      target.focus({ preventScroll: true });
     }
   }
-};
-const disabled = $derived(providedDisabled.current ?? false);
-const slot = $derived({ disabled });
-const ourProps = $derived({
-  id,
-  for: 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;
-  }
-});
+
+  const disabled = $derived(providedDisabled.current ?? false)
+  const slot = $derived({ disabled })
+  const ourProps = $derived({
+    id,
+    for: passive ? undefined : htmlFor,
+    onclick: passive ? undefined : handleClick,
+    ...stateFromSlot(slot),
+  })
+
+  const theirProps = $derived.by(() => {
+    if (passive) {
+      const { onclick: _, ...props } = theirOriginalProps
+      return props
+    } else {
+      return theirOriginalProps
+    }
+  })
 </script>
 
 <ElementOrComponent
@@ -68,5 +109,5 @@ const theirProps = $derived.by(() => {
   {theirProps}
   defaultTag={htmlFor ? DEFAULT_LABEL_TAG : "div"}
   name={context.name || "Label"}
-  bind:ref
+  bind:element
 />

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

@@ -1,35 +1,10 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
-declare let DEFAULT_LABEL_TAG: "label";
-export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & {
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_LABEL_TAG: "label";
+export type LabelProps = Props<typeof DEFAULT_LABEL_TAG, {}, {
+    element?: HTMLElement;
+    id?: string;
     passive?: boolean;
     htmlFor?: string;
-};
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            slot: {};
-            props: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: {}) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        passive?: boolean;
-        htmlFor?: string;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(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 ElementType = typeof DEFAULT_LABEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Label: $$IsomorphicComponent;
-type Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = InstanceType<typeof Label<TTag>>;
+}>;
+declare const Label: import("svelte").Component<LabelProps, {}, "element">;
 export default Label;

package/dist/legend/Legend.svelte

@@ -1,8 +1,31 @@
-<script lang="ts" module>import { Label } from "../index.js";
-const DEFAULT_LEGEND_TAG = "div";
+<script lang="ts" module>
+  import { Label } from "../index.js"
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_LEGEND_TAG = "div" as const
+
+  export type LegendProps = Props<
+    typeof DEFAULT_LEGEND_TAG,
+    {},
+    {
+      element?: HTMLElement
+      class?: string
+    }
+  >
 </script>
 
-<script lang="ts">let { ...props } = $props();
+<script lang="ts">
+  let { asChild, children: theirChildren, ...props }: LegendProps = $props()
 </script>
 
-<Label as="div" {...props} />
+<Label asChild>
+  {#snippet children({ props: childProps })}
+    {#if asChild}
+      {@render theirChildren?.({ props: { ...props, ...childProps } })}
+    {:else}
+      <div {...props} {...childProps}>
+        {@render theirChildren?.({ props: {} })}
+      </div>
+    {/if}
+  {/snippet}
+</Label>

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

@@ -1,7 +1,8 @@
 import type { Props } from "../utils/types.js";
 declare const DEFAULT_LEGEND_TAG: "div";
-type LegendRenderPropArg = {};
-type LegendPropsWeControl = never;
-export type LegendProps = Props<typeof DEFAULT_LEGEND_TAG, LegendRenderPropArg, LegendPropsWeControl, {}>;
+export type LegendProps = Props<typeof DEFAULT_LEGEND_TAG, {}, {
+    element?: HTMLElement;
+    class?: string;
+}>;
 declare const Legend: import("svelte").Component<LegendProps, {}, "">;
 export default Legend;