@pzerelles/headlessui-svelte 2.1.2-next.2 → 2.1.2-next.4

package/dist/label/Label.svelte

@@ -1,65 +1,99 @@
-<script lang="ts" module>let DEFAULT_LABEL_TAG = "label";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+
+  let DEFAULT_LABEL_TAG = "label" as const
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">import { onMount } from "svelte";
-import { getIdContext, 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 = getIdContext();
-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();
+  export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & {
+    passive?: boolean
+    htmlFor?: string
   }
-  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();
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">
+  import { onMount } from "svelte"
+  import { getIdContext, 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 = getIdContext()
+  const providedDisabled = useDisabled()
+
+  let {
+    ref = $bindable(),
+    id = `headlessui-label-${internalId}` as PropsOf<TTag>["id"],
+    htmlFor = providedHtmlFor,
+    passive = false,
+    ...theirOriginalProps
+  }: { as?: TTag } & LabelProps<TTag> = $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()
+    }
+
+    if (current instanceof HTMLLabelElement) {
+      let target = document.getElementById(current.getAttribute("htmlFor") ?? "")
+      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.value ?? 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;
-  }
-});
+
+  const disabled = $derived(providedDisabled.value ?? false)
+  const slot = $derived({ disabled })
+  const ourProps = $derived({
+    id,
+    htmlFor: 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

package/dist/legend/Legend.svelte

@@ -1,8 +1,23 @@
-<script lang="ts" module>import { Label } from "../index.js";
-const DEFAULT_LEGEND_TAG = Label;
+<script lang="ts" module>
+  import { Label, type LabelProps } from "../index.js"
+  import type { ElementType, Props } from "../utils/types.js"
+  import type { Component } from "svelte"
+
+  const DEFAULT_LEGEND_TAG = Label as Component<LabelProps, any>
+
+  type LegendRenderPropArg = {}
+  type LegendPropsWeControl = never
+
+  export type LegendProps<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = Props<
+    TTag,
+    LegendRenderPropArg,
+    LegendPropsWeControl,
+    {}
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LEGEND_TAG">let { ...props } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LEGEND_TAG">
+  let { ...props }: { as?: TTag } & LegendProps<TTag> = $props()
 </script>
 
 <Label as="div" {...props} />