@msviderok/base-ui-solid 1.0.0-beta.1

package/cjs/collapsible/panel/useCollapsiblePanel.d.ts

@@ -0,0 +1,68 @@
+import { Setter, type Accessor, type JSX } from 'solid-js';
+import { type MaybeAccessor } from "../../solid-helpers.js";
+import { HTMLProps } from "../../utils/types.js";
+import type { AnimationType, Dimensions } from "../root/useCollapsibleRoot.js";
+export declare function useCollapsiblePanel<T extends HTMLElement>(parameters: useCollapsiblePanel.Parameters<T>): useCollapsiblePanel.ReturnValue<T>;
+export declare namespace useCollapsiblePanel {
+  interface Parameters<T extends HTMLElement> {
+    animationType: Accessor<AnimationType>;
+    setAnimationType: Setter<AnimationType>;
+    /**
+     * The height of the panel.
+     */
+    height: MaybeAccessor<number | undefined>;
+    /**
+     * Allows the browser’s built-in page search to find and expand the panel contents.
+     *
+     * Overrides the `keepMounted` prop and uses `hidden="until-found"`
+     * to hide the element without removing it from the DOM.
+     */
+    hiddenUntilFound: MaybeAccessor<boolean>;
+    /**
+     * The `id` attribute of the panel.
+     */
+    id: MaybeAccessor<JSX.HTMLAttributes<Element>['id']>;
+    /**
+     * Whether to keep the element in the DOM while the panel is closed.
+     * This prop is ignored when `hiddenUntilFound` is used.
+     */
+    keepMounted: MaybeAccessor<boolean>;
+    /**
+     * Whether the collapsible panel is currently mounted.
+     */
+    mounted: MaybeAccessor<boolean>;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Whether the collapsible panel is currently open.
+     */
+    open: MaybeAccessor<boolean>;
+    refs: {
+      abortControllerRef: AbortController | null;
+      panelRef: T | null | undefined;
+    };
+    runOnceAnimationsFinish: (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+    setDimensions: (nextDimensions: Dimensions) => void;
+    setMounted: (nextMounted: boolean) => void;
+    setOpen: (nextOpen: boolean) => void;
+    setVisible: (nextVisible: boolean) => void;
+    transitionDimension: Accessor<'height' | 'width' | null>;
+    setTransitionDimension: Setter<'height' | 'width' | null>;
+    /**
+     * The visible state of the panel used to determine the `[hidden]` attribute
+     * only when CSS keyframe animations are used.
+     */
+    visible: MaybeAccessor<boolean>;
+    /**
+     * The width of the panel.
+     */
+    width: MaybeAccessor<number | undefined>;
+  }
+  interface ReturnValue<T extends HTMLElement> {
+    ref: (el: T) => void;
+    /**
+     * TODO: provide better explanation
+     * Ref should be ommited as Solid handles refs differently than React.
+     */
+    props: HTMLProps;
+  }
+}

package/cjs/collapsible/panel/useCollapsiblePanel.js

@@ -0,0 +1,327 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCollapsiblePanel = useCollapsiblePanel;
+var _solidJs = require("solid-js");
+var _AccordionRootDataAttributes = require("../../accordion/root/AccordionRootDataAttributes");
+var _solidHelpers = require("../../solid-helpers");
+var _useAnimationFrame = require("../../utils/useAnimationFrame");
+var _warn = require("../../utils/warn");
+var _CollapsibleRootContext = require("../root/CollapsibleRootContext");
+var _CollapsiblePanelDataAttributes = require("./CollapsiblePanelDataAttributes");
+function useCollapsiblePanel(parameters) {
+  const height = () => (0, _solidHelpers.access)(parameters.height);
+  const hiddenUntilFound = () => (0, _solidHelpers.access)(parameters.hiddenUntilFound);
+  const id = () => (0, _solidHelpers.access)(parameters.id);
+  const keepMounted = () => (0, _solidHelpers.access)(parameters.keepMounted);
+  const mounted = () => (0, _solidHelpers.access)(parameters.mounted);
+  const open = () => (0, _solidHelpers.access)(parameters.open);
+  const visible = () => (0, _solidHelpers.access)(parameters.visible);
+  const width = () => (0, _solidHelpers.access)(parameters.width);
+  const {
+    setCodependentRefs
+  } = (0, _CollapsibleRootContext.useCollapsibleRootContext)();
+  let ref;
+  let isBeforeMatchRef = false;
+  let latestAnimationNameRef = null;
+  let shouldCancelInitialOpenAnimationRef = open();
+  let shouldCancelInitialOpenTransitionRef = open();
+
+  /**
+   * When opening, the `hidden` attribute is removed immediately.
+   * When closing, the `hidden` attribute is set after any exit animations runs.
+   */
+  const hidden = (0, _solidJs.createMemo)(() => {
+    if (parameters.animationType() === 'css-animation') {
+      return !visible();
+    }
+    return !open() && !mounted();
+  });
+
+  /**
+   * When `keepMounted` is `true` this runs once as soon as it exists in the DOM
+   * regardless of initial open state.
+   *
+   * When `keepMounted` is `false` this runs on every mount, typically every
+   * time it opens. If the panel is in the middle of a close transition that is
+   * interrupted and re-opens, this won't run as the panel was not unmounted.
+   */
+  function handlePanelRef(element) {
+    if (!element) {
+      return;
+    }
+    if (parameters.animationType() == null || parameters.transitionDimension() == null) {
+      const panelStyles = getComputedStyle(element);
+      const hasAnimation = panelStyles.animationName !== 'none' && panelStyles.animationName !== '';
+      const hasTransition = panelStyles.transitionDuration !== '0s' && panelStyles.transitionDuration !== '';
+
+      /**
+       * animationType is safe to read in render because it's only ever set
+       * once here during the first render and never again.
+       * https://react.dev/learn/referencing-values-with-refs#best-practices-for-refs
+       */
+      if (hasAnimation && hasTransition) {
+        if (process.env.NODE_ENV !== 'production') {
+          (0, _warn.warn)('CSS transitions and CSS animations both detected on Collapsible or Accordion panel.', 'Only one of either animation type should be used.');
+        }
+      } else if (panelStyles.animationName === 'none' && panelStyles.transitionDuration !== '0s') {
+        parameters.setAnimationType('css-transition');
+      } else if (panelStyles.animationName !== 'none' && panelStyles.transitionDuration === '0s') {
+        parameters.setAnimationType('css-animation');
+      } else {
+        parameters.setAnimationType('none');
+      }
+
+      /**
+       * We need to know in advance which side is being collapsed when using CSS
+       * transitions in order to set the value of width/height to `0px` momentarily.
+       * Setting both to `0px` will break layout.
+       */
+      if (element.getAttribute(_AccordionRootDataAttributes.AccordionRootDataAttributes.orientation) === 'horizontal' || panelStyles.transitionProperty.indexOf('width') > -1) {
+        parameters.setTransitionDimension('width');
+      } else {
+        parameters.setTransitionDimension('height');
+      }
+    }
+    if (parameters.animationType() !== 'css-transition') {
+      return;
+    }
+
+    /**
+     * Explicitly set `display` to ensure the panel is actually rendered before
+     * measuring anything. `!important` is to needed to override a conflicting
+     * Tailwind v4 default that sets `display: none !important` on `[hidden]`:
+     * https://github.com/tailwindlabs/tailwindcss/blob/cd154a4f471e7a63cc27cad15dada650de89d52b/packages/tailwindcss/preflight.css#L320-L326
+     */
+    element.style.setProperty('display', 'block', 'important');
+    if (height() === undefined || width() === undefined) {
+      parameters.setDimensions({
+        height: element.scrollHeight,
+        width: element.scrollWidth
+      });
+      element.style.removeProperty('display');
+      if (shouldCancelInitialOpenTransitionRef) {
+        element.style.setProperty('transition-duration', '0s');
+      }
+    }
+    let frame = -1;
+    let nextFrame = -1;
+    frame = _useAnimationFrame.AnimationFrame.request(() => {
+      shouldCancelInitialOpenTransitionRef = false;
+      nextFrame = _useAnimationFrame.AnimationFrame.request(() => {
+        /**
+         * This is slightly faster than another RAF and is the earliest
+         * opportunity to remove the temporary `transition-duration: 0s` that
+         * was applied to cancel opening transitions of initially open panels.
+         * https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/
+         */
+        setTimeout(() => {
+          element.style.removeProperty('transition-duration');
+        });
+      });
+    });
+    (0, _solidJs.onCleanup)(() => {
+      _useAnimationFrame.AnimationFrame.cancel(frame);
+      _useAnimationFrame.AnimationFrame.cancel(nextFrame);
+    });
+  }
+  (0, _solidJs.createEffect)((0, _solidJs.on)([parameters.animationType, hiddenUntilFound, keepMounted, mounted, open, parameters.transitionDimension], () => {
+    if (parameters.animationType() !== 'css-transition') {
+      return;
+    }
+    const panel = parameters.refs.panelRef;
+    if (!panel) {
+      return;
+    }
+    let resizeFrame = -1;
+    if (parameters.refs.abortControllerRef != null) {
+      parameters.refs.abortControllerRef.abort();
+      parameters.refs.abortControllerRef = null;
+    }
+    if (open()) {
+      /* opening */
+      panel.style.setProperty('display', 'block', 'important');
+
+      /**
+       * When `keepMounted={false}` and the panel is initially closed, the very
+       * first time it opens (not any subsequent opens) `data-starting-style` is
+       * off or missing by a frame so we need to set it manually. Otherwise any
+       * CSS properties expected to transition using [data-starting-style] may
+       * be mis-timed and appear to be complete skipped.
+       */
+      if (!shouldCancelInitialOpenTransitionRef && !keepMounted()) {
+        panel.setAttribute(_CollapsiblePanelDataAttributes.CollapsiblePanelDataAttributes.startingStyle, '');
+      }
+      parameters.setDimensions({
+        height: panel.scrollHeight,
+        width: panel.scrollWidth
+      });
+      resizeFrame = _useAnimationFrame.AnimationFrame.request(() => {
+        panel.style.removeProperty('display');
+      });
+    } else {
+      /* closing */
+      parameters.setDimensions({
+        height: panel.scrollHeight,
+        width: panel.scrollWidth
+      });
+      parameters.refs.abortControllerRef = new AbortController();
+      const signal = parameters.refs.abortControllerRef.signal;
+      let frame2 = -1;
+      const frame1 = _useAnimationFrame.AnimationFrame.request(() => {
+        // Wait until the `[data-ending-style]` attribute is added.
+        frame2 = _useAnimationFrame.AnimationFrame.request(() => {
+          parameters.runOnceAnimationsFinish(() => {
+            parameters.setDimensions({
+              height: 0,
+              width: 0
+            });
+            panel.style.removeProperty('content-visibility');
+            panel.style.removeProperty('display');
+            parameters.setMounted(false);
+            parameters.refs.abortControllerRef = null;
+          }, signal);
+        });
+      });
+      (0, _solidJs.onCleanup)(() => {
+        _useAnimationFrame.AnimationFrame.cancel(frame1);
+        _useAnimationFrame.AnimationFrame.cancel(frame2);
+      });
+      return;
+    }
+    (0, _solidJs.onCleanup)(() => {
+      _useAnimationFrame.AnimationFrame.cancel(resizeFrame);
+    });
+  }));
+  (0, _solidJs.createEffect)(() => {
+    if (parameters.animationType() !== 'css-animation') {
+      return;
+    }
+    const panel = parameters.refs.panelRef;
+    if (!panel) {
+      return;
+    }
+    latestAnimationNameRef = panel.style.animationName || latestAnimationNameRef;
+    panel.style.setProperty('animation-name', 'none');
+    parameters.setDimensions({
+      height: panel.scrollHeight,
+      width: panel.scrollWidth
+    });
+    if (!shouldCancelInitialOpenAnimationRef && !isBeforeMatchRef) {
+      panel.style.removeProperty('animation-name');
+    }
+    if (open()) {
+      if (parameters.refs.abortControllerRef != null) {
+        parameters.refs.abortControllerRef.abort();
+        parameters.refs.abortControllerRef = null;
+      }
+      parameters.setMounted(true);
+      parameters.setVisible(true);
+    } else {
+      parameters.refs.abortControllerRef = new AbortController();
+      parameters.runOnceAnimationsFinish(() => {
+        parameters.setMounted(false);
+        parameters.setVisible(false);
+        parameters.refs.abortControllerRef = null;
+      }, parameters.refs.abortControllerRef.signal);
+    }
+  });
+  (0, _solidJs.onMount)(() => {
+    const frame = _useAnimationFrame.AnimationFrame.request(() => {
+      shouldCancelInitialOpenAnimationRef = false;
+    });
+    (0, _solidJs.onCleanup)(() => _useAnimationFrame.AnimationFrame.cancel(frame));
+  });
+  (0, _solidJs.createEffect)(() => {
+    if (!hiddenUntilFound()) {
+      return;
+    }
+    const panel = parameters.refs.panelRef;
+    if (!panel) {
+      return;
+    }
+    let frame = -1;
+    let nextFrame = -1;
+    if (open() && isBeforeMatchRef) {
+      panel.style.transitionDuration = '0s';
+      parameters.setDimensions({
+        height: panel.scrollHeight,
+        width: panel.scrollWidth
+      });
+      frame = _useAnimationFrame.AnimationFrame.request(() => {
+        isBeforeMatchRef = false;
+        nextFrame = _useAnimationFrame.AnimationFrame.request(() => {
+          setTimeout(() => {
+            panel.style.removeProperty('transition-duration');
+          });
+        });
+      });
+    }
+    (0, _solidJs.onCleanup)(() => {
+      _useAnimationFrame.AnimationFrame.cancel(frame);
+      _useAnimationFrame.AnimationFrame.cancel(nextFrame);
+    });
+  });
+  (0, _solidJs.createEffect)(() => {
+    const panel = parameters.refs.panelRef;
+    if (panel && hiddenUntilFound() && hidden()) {
+      /**
+       * React only supports a boolean for the `hidden` attribute and forces
+       * legit string values to booleans so we have to force it back in the DOM
+       * when necessary: https://github.com/facebook/react/issues/24740
+       */
+      panel.setAttribute('hidden', 'until-found');
+      /**
+       * Set data-starting-style here to persist the closed styles, this is to
+       * prevent transitions from starting when the `hidden` attribute changes
+       * to `'until-found'` as they could have different `display` properties:
+       * https://github.com/tailwindlabs/tailwindcss/pull/14625
+       */
+      if (parameters.animationType() === 'css-transition') {
+        panel.setAttribute(_CollapsiblePanelDataAttributes.CollapsiblePanelDataAttributes.startingStyle, '');
+      }
+    }
+  });
+  (0, _solidJs.createEffect)(function registerBeforeMatchListener() {
+    const panel = parameters.refs.panelRef;
+    if (!panel) {
+      return;
+    }
+    function handleBeforeMatch() {
+      isBeforeMatchRef = true;
+      parameters.setOpen(true);
+      parameters.onOpenChange(true);
+    }
+    panel.addEventListener('beforematch', handleBeforeMatch);
+    (0, _solidJs.onCleanup)(() => {
+      panel.removeEventListener('beforematch', handleBeforeMatch);
+    });
+  });
+  (0, _solidJs.onMount)(() => {
+    setCodependentRefs('panel', {
+      explicitId: () => undefined,
+      ref: () => ref,
+      id: () => (0, _solidHelpers.access)(parameters.id)
+    });
+  });
+  return {
+    ref: el => {
+      ref = el;
+      /**
+       * TODO: putting it into onMount seems to properly time the measurement.
+       * Otherwise the ref is set slightly too early.
+       */
+      (0, _solidJs.onMount)(() => handlePanelRef(el));
+    },
+    props: {
+      get hidden() {
+        return hidden();
+      },
+      get id() {
+        return id();
+      }
+    }
+  };
+}

package/cjs/collapsible/root/CollapsibleRoot.d.ts

@@ -0,0 +1,41 @@
+import { BaseUIComponentProps } from "../../utils/types.js";
+import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+/**
+ * Groups all parts of the collapsible.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Collapsible](https://base-ui.com/solid/components/collapsible)
+ */
+export declare function CollapsibleRoot(componentProps: CollapsibleRoot.Props): import("solid-js").JSX.Element;
+export declare namespace CollapsibleRoot {
+  interface State {
+    open: boolean;
+    disabled: boolean;
+    transitionStatus: TransitionStatus;
+    hidden?: boolean;
+  }
+  interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * Whether the collapsible panel is currently open.
+     *
+     * To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
+     */
+    open?: boolean;
+    /**
+     * Whether the collapsible panel is initially open.
+     *
+     * To render a controlled collapsible, use the `open` prop instead.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Event handler called when the panel is opened or closed.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+  }
+}

package/cjs/collapsible/root/CollapsibleRoot.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsibleRoot = CollapsibleRoot;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _CollapsibleRootContext = require("./CollapsibleRootContext");
+var _styleHooks = require("./styleHooks");
+var _useCollapsibleRoot = require("./useCollapsibleRoot");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Groups all parts of the collapsible.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Collapsible](https://base-ui.com/solid/components/collapsible)
+ */
+function CollapsibleRoot(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['defaultOpen', 'disabled', 'onOpenChange', 'open']);
+  const defaultOpen = () => local.defaultOpen ?? false;
+  const disabled = () => local.disabled ?? false;
+  const onOpenChange = newOpen => {
+    local.onOpenChange?.(newOpen);
+  };
+  const collapsible = (0, _useCollapsibleRoot.useCollapsibleRoot)({
+    open: () => local.open,
+    defaultOpen,
+    onOpenChange,
+    disabled
+  });
+  const state = {
+    get open() {
+      return collapsible.open();
+    },
+    get disabled() {
+      return collapsible.disabled();
+    },
+    get transitionStatus() {
+      return collapsible.transitionStatus();
+    }
+  };
+  const contextValue = (0, _solidJs.mergeProps)(collapsible, {
+    onOpenChange,
+    state
+  });
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    props: elementProps,
+    customStyleHookMapping: _styleHooks.collapsibleStyleHookMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleRootContext.CollapsibleRootContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
+      when: componentProps.render !== null,
+      fallback: componentProps.children,
+      children: element()
+    })
+  });
+}

package/cjs/collapsible/root/CollapsibleRootContext.d.ts

@@ -0,0 +1,11 @@
+import { type Accessor } from 'solid-js';
+import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { CollapsibleRoot } from "./CollapsibleRoot.js";
+import type { useCollapsibleRoot } from "./useCollapsibleRoot.js";
+export interface CollapsibleRootContext extends useCollapsibleRoot.ReturnValue {
+  onOpenChange: (open: boolean) => void;
+  state: CollapsibleRoot.State;
+  transitionStatus: Accessor<TransitionStatus>;
+}
+export declare const CollapsibleRootContext: import("solid-js").Context<CollapsibleRootContext | undefined>;
+export declare function useCollapsibleRootContext(): CollapsibleRootContext;

package/cjs/collapsible/root/CollapsibleRootContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsibleRootContext = void 0;
+exports.useCollapsibleRootContext = useCollapsibleRootContext;
+var _solidJs = require("solid-js");
+const CollapsibleRootContext = exports.CollapsibleRootContext = (0, _solidJs.createContext)();
+function useCollapsibleRootContext() {
+  const context = (0, _solidJs.useContext)(CollapsibleRootContext);
+  if (context === undefined) {
+    throw new Error('Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>.');
+  }
+  return context;
+}

package/cjs/collapsible/root/styleHooks.d.ts

@@ -0,0 +1,3 @@
+import type { CustomStyleHookMapping } from "../../utils/getStyleHookProps.js";
+import type { CollapsibleRoot } from "./CollapsibleRoot.js";
+export declare const collapsibleStyleHookMapping: CustomStyleHookMapping<CollapsibleRoot.State>;

package/cjs/collapsible/root/styleHooks.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collapsibleStyleHookMapping = void 0;
+var _collapsibleOpenStateMapping = require("../../utils/collapsibleOpenStateMapping");
+var _styleHookMapping = require("../../utils/styleHookMapping");
+const collapsibleStyleHookMapping = exports.collapsibleStyleHookMapping = {
+  ..._collapsibleOpenStateMapping.collapsibleOpenStateMapping,
+  ..._styleHookMapping.transitionStatusMapping
+};

package/cjs/collapsible/root/useCollapsibleRoot.d.ts

@@ -0,0 +1,83 @@
+import { type Accessor, type JSX, type Setter } from 'solid-js';
+import { type SetStoreFunction, type Store } from 'solid-js/store';
+import { type CodependentRefs, type MaybeAccessor } from "../../solid-helpers.js";
+import { TransitionStatus } from "../../utils/useTransitionStatus.js";
+export type AnimationType = 'css-transition' | 'css-animation' | 'none' | null;
+export interface Dimensions {
+  height: number | undefined;
+  width: number | undefined;
+}
+export declare function useCollapsibleRoot(parameters: useCollapsibleRoot.Parameters): useCollapsibleRoot.ReturnValue;
+export declare namespace useCollapsibleRoot {
+  interface Parameters {
+    /**
+     * Whether the collapsible panel is currently open.
+     *
+     * To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
+     */
+    open?: MaybeAccessor<boolean | undefined>;
+    /**
+     * Whether the collapsible panel is initially open.
+     *
+     * To render a controlled collapsible, use the `open` prop instead.
+     * @default false
+     */
+    defaultOpen?: MaybeAccessor<boolean | undefined>;
+    /**
+     * Event handler called when the panel is opened or closed.
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled: MaybeAccessor<boolean>;
+  }
+  interface ReturnValue {
+    animationType: Accessor<AnimationType>;
+    setAnimationType: Setter<AnimationType>;
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: Accessor<boolean>;
+    handleTrigger: () => void;
+    /**
+     * The height of the panel.
+     */
+    height: Accessor<number | undefined>;
+    /**
+     * Whether the collapsible panel is currently mounted.
+     */
+    mounted: Accessor<boolean>;
+    /**
+     * Whether the collapsible panel is currently open.
+     */
+    open: Accessor<boolean>;
+    codependentRefs: Store<CodependentRefs<['panel']>>;
+    setCodependentRefs: SetStoreFunction<CodependentRefs<['panel']>>;
+    panelId: Accessor<JSX.HTMLAttributes<Element>['id']>;
+    refs: {
+      abortControllerRef: AbortController | null;
+      panelRef: HTMLElement | null | undefined;
+    };
+    runOnceAnimationsFinish: (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+    setDimensions: Setter<Dimensions>;
+    setHiddenUntilFound: Setter<boolean>;
+    setKeepMounted: Setter<boolean>;
+    setMounted: (open: boolean) => void;
+    setOpen: (open: boolean) => void;
+    setVisible: Setter<boolean>;
+    transitionDimension: Accessor<'height' | 'width' | null>;
+    setTransitionDimension: Setter<'height' | 'width' | null>;
+    transitionStatus: Accessor<TransitionStatus>;
+    /**
+     * The visible state of the panel used to determine the `[hidden]` attribute
+     * only when CSS keyframe animations are used.
+     */
+    visible: Accessor<boolean>;
+    /**
+     * The width of the panel.
+     */
+    width: Accessor<number | undefined>;
+  }
+}