@pzerelles/headlessui-svelte 2.1.2-next.45 → 2.1.2-next.46

package/dist/disclosure/Disclosure.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_DISCLOSURE_TAG = "div" as const
+  export type DisclosureRenderPropArg = {
+    open: boolean
+    close: (focusableElement?: HTMLElement) => void
+  }
+
+  export type DisclosureOwnProps = {
+    defaultOpen?: boolean
+  }
+
+  export type DisclosureProps = Props<typeof DEFAULT_DISCLOSURE_TAG, DisclosureRenderPropArg, DisclosureOwnProps>
+
+  export * from "./context.svelte.js"
+</script>
+
+<script lang="ts">
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { createDisclosureAPIContext, createDisclosureContext, DisclosureStates } from "./context.svelte.js"
+  import { getOwnerDocument } from "../utils/owner.js"
+  import { createOpenClosedContext, State } from "../internal/open-closed.js"
+  import { createCloseContext } from "../internal/close-provider.js"
+
+  let { defaultOpen = false, ...theirProps }: DisclosureProps = $props()
+
+  const context = createDisclosureContext(defaultOpen)
+  const { buttonId, disclosureState } = $derived(context)
+
+  const close = (focusableElement?: HTMLElement) => {
+    context.closeDisclosure()
+    const ownerDocument = getOwnerDocument(undefined)
+    if (!ownerDocument) return
+    if (!buttonId) return
+
+    const restoreElement = (() => {
+      if (!focusableElement) return ownerDocument.getElementById(buttonId)
+      return focusableElement
+    })()
+
+    restoreElement?.focus()
+  }
+
+  createDisclosureAPIContext(close)
+
+  const slot = $derived({
+    open: disclosureState === DisclosureStates.Open,
+    close,
+  } satisfies DisclosureRenderPropArg)
+
+  createOpenClosedContext({
+    get value() {
+      return disclosureState === DisclosureStates.Open ? State.Open : State.Closed
+    },
+  })
+
+  createCloseContext({ close })
+</script>
+
+<ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_DISCLOSURE_TAG} name="Disclosure" />

package/dist/disclosure/Disclosure.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_DISCLOSURE_TAG: "div";
+export type DisclosureRenderPropArg = {
+    open: boolean;
+    close: (focusableElement?: HTMLElement) => void;
+};
+export type DisclosureOwnProps = {
+    defaultOpen?: boolean;
+};
+export type DisclosureProps = Props<typeof DEFAULT_DISCLOSURE_TAG, DisclosureRenderPropArg, DisclosureOwnProps>;
+export * from "./context.svelte.js";
+declare const Disclosure: import("svelte").Component<DisclosureProps, {}, "">;
+type Disclosure = ReturnType<typeof Disclosure>;
+export default Disclosure;

package/dist/disclosure/DisclosureButton.svelte

@@ -0,0 +1,191 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_BUTTON_TAG = "button" as const
+  export type ButtonRenderPropArg = {
+    open: boolean
+    hover: boolean
+    active: boolean
+    disabled: boolean
+    focus: boolean
+    autofocus: boolean
+  }
+  type ButtonPropsWeControl = "aria-controls" | "aria-expanded"
+
+  export type DisclosureButtonOwnProps = {
+    element?: HTMLButtonElement
+    disabled?: boolean
+    autofocus?: boolean
+  }
+
+  export type DisclosureButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, DisclosureButtonOwnProps>
+</script>
+
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
+  import { DisclosureStates, useDisclosureContext, useDisclosurePanelContext } from "./context.svelte.js"
+  import { onMount, untrack } from "svelte"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { useActivePress } from "../hooks/use-active-press.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-disclosure-button-${internalId}`,
+    disabled = false,
+    autofocus = false,
+    ...theirProps
+  }: DisclosureButtonProps = $props()
+
+  const context = useDisclosureContext("DisclosureButton")
+  const panelContext = useDisclosurePanelContext()
+  const isWithinPanel = $derived(!panelContext ? false : panelContext.panelId === context.panelId)
+
+  onMount(() => {
+    context.setButtonElement(element)
+  })
+
+  $effect(() => {
+    if (isWithinPanel) return
+    ;[id]
+    return untrack(() => {
+      context.setButtonId(id ?? undefined)
+      return () => {
+        context.setButtonId(undefined)
+      }
+    })
+  })
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (isWithinPanel) {
+      if (context.disclosureState === DisclosureStates.Closed) return
+
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          event.preventDefault()
+          event.stopPropagation()
+          context.toggleDisclosure()
+          context.buttonElement?.focus()
+          break
+      }
+    } else {
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          event.preventDefault()
+          event.stopPropagation()
+          context.toggleDisclosure()
+          break
+      }
+    }
+  }
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case " ":
+        // Required for firefox, event.preventDefault() in handleKeyDown for
+        // the Space key doesn't cancel the handleKeyUp, which in turn
+        // triggers a *click*.
+        event.preventDefault()
+        break
+    }
+  }
+
+  const handleClick = (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return
+    if (disabled) return
+
+    if (isWithinPanel) {
+      context.toggleDisclosure()
+      context.buttonElement?.focus()
+    } else {
+      context.toggleDisclosure()
+    }
+  }
+
+  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({
+    open: context.disclosureState === DisclosureStates.Open,
+    hover,
+    active,
+    disabled,
+    focus,
+    autofocus,
+  } satisfies ButtonRenderPropArg)
+
+  const buttonType = useResolveButtonType({
+    get props() {
+      return { type: theirProps.type ?? undefined, as: DEFAULT_BUTTON_TAG }
+    },
+    get ref() {
+      return { current: context.buttonElement }
+    },
+  })
+
+  const ourProps = $derived(
+    isWithinPanel
+      ? mergeProps(
+          {
+            type: buttonType.type,
+            disabled: disabled || undefined,
+            autofocus,
+            onkeydown: handleKeyDown,
+            onclick: handleClick,
+          },
+          focusProps,
+          hoverProps,
+          pressProps
+        )
+      : mergeProps(
+          {
+            id,
+            type: buttonType.type,
+            "aria-expanded": context.disclosureState === DisclosureStates.Open,
+            "aria-controls": context.panelElement ? context.panelId : undefined,
+            disabled: disabled || undefined,
+            autofocus,
+            onkeydown: handleKeyDown,
+            onkeyup: handleKeyUp,
+            onclick: handleClick,
+          },
+          focusProps,
+          hoverProps,
+          pressProps
+        )
+  )
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_BUTTON_TAG}
+  name="DisclosureButton"
+  bind:element
+/>

package/dist/disclosure/DisclosureButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_BUTTON_TAG: "button";
+export type ButtonRenderPropArg = {
+    open: boolean;
+    hover: boolean;
+    active: boolean;
+    disabled: boolean;
+    focus: boolean;
+    autofocus: boolean;
+};
+export type DisclosureButtonOwnProps = {
+    element?: HTMLButtonElement;
+    disabled?: boolean;
+    autofocus?: boolean;
+};
+export type DisclosureButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, DisclosureButtonOwnProps>;
+declare const DisclosureButton: import("svelte").Component<DisclosureButtonProps, {}, "element">;
+type DisclosureButton = ReturnType<typeof DisclosureButton>;
+export default DisclosureButton;

package/dist/disclosure/DisclosurePanel.svelte

@@ -0,0 +1,98 @@
+<script lang="ts" module>
+  import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_PANEL_TAG = "div" as const
+  export type PanelRenderPropArg = {
+    open: boolean
+    close: (focusableElement?: HTMLElement) => void
+  }
+
+  let PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
+
+  export type DisclosurePanelOwnProps = {
+    element?: HTMLElement
+    transition?: boolean
+  } & PropsForFeatures<typeof PanelRenderFeatures>
+
+  export type DisclosurePanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DisclosurePanelOwnProps>
+</script>
+
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { mergeProps } from "../utils/render.js"
+  import TransitionChild from "../transition/TransitionChild.svelte"
+  import {
+    createDisclosurePanelContext,
+    DisclosureStates,
+    useDisclosureAPIContext,
+    useDisclosureContext,
+  } from "./context.svelte.js"
+  import { onMount, untrack } from "svelte"
+  import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js"
+  import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js"
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-disclosure-panel-${internalId}`,
+    transition = false,
+    ...theirProps
+  }: DisclosurePanelProps = $props()
+  const context = useDisclosureContext("DisclosurePanel")
+  const { close } = useDisclosureAPIContext("DisclosurePanel")
+
+  onMount(() => {
+    context.setPanelElement(element)
+  })
+
+  $effect(() => {
+    ;[id]
+    return untrack(() => {
+      context.setPanelId(id ?? undefined)
+      return () => {
+        context.setPanelId(undefined)
+      }
+    })
+  })
+
+  const usesOpenClosedState = useOpenClosed()
+  const _transition = useTransition({
+    get enabled() {
+      return transition
+    },
+    get element() {
+      return element
+    },
+    get show() {
+      return usesOpenClosedState !== null
+        ? (usesOpenClosedState.value & State.Open) === State.Open
+        : context.disclosureState === DisclosureStates.Open
+    },
+  })
+
+  const slot = $derived({
+    open: context.disclosureState === DisclosureStates.Open,
+    close,
+  } satisfies PanelRenderPropArg)
+
+  const ourProps = $derived({
+    id,
+    ...transitionDataAttributes(_transition.data),
+  })
+
+  createDisclosurePanelContext(() => context.panelId)
+  clearOpenClosedContext()
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_PANEL_TAG}
+  features={PanelRenderFeatures}
+  visible={_transition.visible}
+  name="DisclosurePanel"
+  bind:element
+/>

package/dist/disclosure/DisclosurePanel.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type PropsForFeatures } from "../utils/render.js";
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_PANEL_TAG: "div";
+export type PanelRenderPropArg = {
+    open: boolean;
+    close: (focusableElement?: HTMLElement) => void;
+};
+declare let PanelRenderFeatures: number;
+export type DisclosurePanelOwnProps = {
+    element?: HTMLElement;
+    transition?: boolean;
+} & PropsForFeatures<typeof PanelRenderFeatures>;
+export type DisclosurePanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DisclosurePanelOwnProps>;
+declare const DisclosurePanel: import("svelte").Component<DisclosurePanelProps, {}, "element">;
+type DisclosurePanel = ReturnType<typeof DisclosurePanel>;
+export default DisclosurePanel;

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

@@ -0,0 +1,32 @@
+export declare enum DisclosureStates {
+    Open = 0,
+    Closed = 1
+}
+export interface StateDefinition {
+    disclosureState: DisclosureStates;
+    buttonElement?: HTMLButtonElement;
+    panelElement?: HTMLElement;
+    buttonId?: string;
+    panelId?: string;
+}
+export interface StateActions {
+    toggleDisclosure(): void;
+    closeDisclosure(): void;
+    setButtonId(buttonId: string | undefined): void;
+    setPanelId(panelId: string | undefined): void;
+    setButtonElement(element: HTMLButtonElement | undefined): void;
+    setPanelElement(element: HTMLElement | undefined): void;
+}
+export type DisclosureContext = StateDefinition & StateActions;
+export declare function createDisclosureContext(defaultOpen: boolean): DisclosureContext;
+export declare function useDisclosureContext(component: string): DisclosureContext;
+export interface DisclosureAPIContext {
+    close: (focusableElement?: HTMLElement) => void;
+}
+export declare function createDisclosureAPIContext(close: (focusableElement?: HTMLElement) => void): DisclosureAPIContext;
+export declare function useDisclosureAPIContext(component: string): DisclosureAPIContext;
+export interface DisclosurePanelContext {
+    panelId: string | undefined;
+}
+export declare function createDisclosurePanelContext(panelId: () => string | undefined): DisclosurePanelContext;
+export declare function useDisclosurePanelContext(): DisclosurePanelContext | undefined;

package/dist/disclosure/context.svelte.js

@@ -0,0 +1,94 @@
+import { getContext, setContext } from "svelte";
+export var DisclosureStates;
+(function (DisclosureStates) {
+    DisclosureStates[DisclosureStates["Open"] = 0] = "Open";
+    DisclosureStates[DisclosureStates["Closed"] = 1] = "Closed";
+})(DisclosureStates || (DisclosureStates = {}));
+export function createDisclosureContext(defaultOpen) {
+    let disclosureState = $state(defaultOpen ? DisclosureStates.Open : DisclosureStates.Closed);
+    let buttonElement = $state();
+    let panelElement = $state();
+    let buttonId = $state();
+    let panelId = $state();
+    const context = {
+        get disclosureState() {
+            return disclosureState;
+        },
+        get buttonElement() {
+            return buttonElement;
+        },
+        get panelElement() {
+            return panelElement;
+        },
+        get buttonId() {
+            return buttonId;
+        },
+        get panelId() {
+            return panelId;
+        },
+        toggleDisclosure() {
+            disclosureState = disclosureState === DisclosureStates.Open ? DisclosureStates.Closed : DisclosureStates.Open;
+        },
+        closeDisclosure() {
+            if (disclosureState !== DisclosureStates.Closed)
+                disclosureState = DisclosureStates.Closed;
+        },
+        setButtonId(id) {
+            if (id !== buttonId)
+                buttonId = id;
+        },
+        setPanelId(id) {
+            if (id !== panelId)
+                panelId = id;
+        },
+        setButtonElement(element) {
+            if (element !== buttonElement)
+                buttonElement = element;
+        },
+        setPanelElement(element) {
+            if (element !== panelElement)
+                panelElement = element;
+        },
+    };
+    setContext("DisclosureContext", context);
+    return context;
+}
+export function useDisclosureContext(component) {
+    const context = getContext("DisclosureContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Disclosure /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useDisclosureContext);
+        throw err;
+    }
+    return context;
+}
+export function createDisclosureAPIContext(close) {
+    const context = {
+        close,
+    };
+    setContext("DisclosureAPIContext", context);
+    return context;
+}
+export function useDisclosureAPIContext(component) {
+    const context = getContext("DisclosureAPIContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Disclosure /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useDisclosureAPIContext);
+        throw err;
+    }
+    return context;
+}
+export function createDisclosurePanelContext(panelId) {
+    const context = {
+        get panelId() {
+            return panelId();
+        },
+    };
+    setContext("DisclosurePanelContext", context);
+    return context;
+}
+export function useDisclosurePanelContext() {
+    return getContext("DisclosurePanelContext");
+}

package/dist/disclosure/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Disclosure, type DisclosureProps, type DisclosureRenderPropArg as DisclosureSlot, type DisclosureOwnProps, } from "./Disclosure.svelte";
+export { default as DisclosureButton, type DisclosureButtonProps, type ButtonRenderPropArg as DisclosureButtonSlot, type DisclosureButtonOwnProps, } from "./DisclosureButton.svelte";
+export { default as DisclosurePanel, type DisclosurePanelProps, type PanelRenderPropArg as DisclosurePanelSlot, type DisclosurePanelOwnProps, } from "./DisclosurePanel.svelte";

package/dist/disclosure/index.js

@@ -0,0 +1,3 @@
+export { default as Disclosure, } from "./Disclosure.svelte";
+export { default as DisclosureButton, } from "./DisclosureButton.svelte";
+export { default as DisclosurePanel, } from "./DisclosurePanel.svelte";

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from "./close-button/index.js";
 export * from "./data-interactive/index.js";
 export * from "./description/index.js";
 export * from "./dialog/index.js";
+export * from "./disclosure/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./input/index.js";

package/dist/index.js

@@ -4,6 +4,7 @@ export * from "./close-button/index.js";
 export * from "./data-interactive/index.js";
 export * from "./description/index.js";
 export * from "./dialog/index.js";
+export * from "./disclosure/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./input/index.js";

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

@@ -59,7 +59,7 @@ export declare function useFloatingReference(): {
 export declare function useFloatingReferenceProps(): {
     readonly getReferenceProps: (userProps?: import("svelte/elements.js").HTMLAttributes<Element>) => Record<string, unknown>;
 };
-export declare function useFloatingPanelProps(): (userProps?: import("svelte/elements.js").HTMLAttributes<HTMLElement> | undefined) => Record<string, unknown> & {
+export declare function useFloatingPanelProps(): (...args: Parameters<(userProps?: import("svelte/elements.js").HTMLAttributes<HTMLElement>) => Record<string, unknown>>) => Record<string, unknown> & {
     "data-anchor": Placement | "top end" | "top start" | "right end" | "right start" | "bottom end" | "bottom start" | "left end" | "left start" | "selection" | "selection end" | "selection start" | undefined;
 };
 export declare function useFloatingPanel(options?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.45",
+  "version": "2.1.2-next.46",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -34,36 +34,36 @@
   "devDependencies": {
     "@changesets/cli": "^2.28.1",
     "@changesets/types": "^6.1.0",
-    "@playwright/test": "^1.50.1",
+    "@playwright/test": "^1.51.0",
     "@pzerelles/heroicons-svelte": "^2.2.0",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.17.2",
+    "@sveltejs/kit": "^2.19.0",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.7",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.13.5",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.21.0",
+    "@types/node": "^22.13.10",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.22.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.46.1",
     "globals": "^16.0.0",
     "jsdom": "^25.0.1",
     "outdent": "^0.8.0",
     "postcss": "^8.5.3",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "publint": "^0.3.6",
-    "svelte": "^5.20.2",
-    "svelte-check": "^4.1.4",
+    "publint": "^0.3.9",
+    "svelte": "^5.23.0",
+    "svelte-check": "^4.1.5",
     "tailwindcss": "^3.4.17",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.24.1",
-    "vite": "^6.1.1",
-    "vitest": "^3.0.6"
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.26.1",
+    "vite": "^6.2.1",
+    "vitest": "^3.0.8"
   },
   "dependencies": {
     "@floating-ui/core": "^1.6.9",
@@ -71,7 +71,7 @@
     "@floating-ui/utils": "^0.2.9",
     "clsx": "^2.1.1",
     "esm-env": "^1.2.2",
-    "nanoid": "^5.1.0"
+    "nanoid": "^5.1.3"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",