@entry-ui/qwik 0.5.0 → 0.6.0

package/lib/_internal/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-id-manager';

package/lib/_internal/hooks/use-id-manager/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseIdManagerParams, UseIdManagerReturnValue } from './use-id-manager.types';
+export { useIdManager } from './use-id-manager';

package/lib/_internal/hooks/use-id-manager/use-id-manager.d.ts

@@ -0,0 +1,21 @@
+import type { UseIdManagerParams, UseIdManagerReturnValue } from './use-id-manager.types';
+/**
+ * A hook that manages unique identifiers with support for prefixes and manual state control.
+ *
+ * This hook provides a flexible way to handle DOM identifiers, ensuring
+ * accessibility and consistency across components. It encapsulates the
+ * complexity of generating unique IDs while offering granular control
+ * through dedicated `QRL` functions.
+ *
+ * The generated identifier follows a specific structure:
+ * `[prefix][baseId]`
+ * - prefix: A string prepended to the ID (defaults to `entry-ui-qwik-`).
+ * - baseId: Either a custom string provided via `generatedId` or a unique
+ * sequence generated by the Qwik's `useId` hook.
+ *
+ * Example Outputs:
+ * - Default: `"entry-ui-qwik-rs7mG5255s"` (where `"rs7mG5255s"` is the `autoId`)
+ * - Custom prefix: `"my-app-header-rs7mG5255s"`
+ * - Custom base: `"entry-ui-qwik-custom-id"`
+ */
+export declare const useIdManager: (params?: UseIdManagerParams) => UseIdManagerReturnValue;

package/lib/_internal/hooks/use-id-manager/use-id-manager.qwik.mjs

@@ -0,0 +1,25 @@
+import { useId, useConstant, useSignal, $ } from "@qwik.dev/core";
+const useIdManager = (params = {}) => {
+  const { prefix = "entry-ui-qwik-", generatedId, shouldInitialize = false } = params;
+  const autoId = useId();
+  const baseId = useConstant(() => generatedId ? generatedId.trim() : autoId);
+  const id = useSignal(shouldInitialize ? `${prefix.trim()}${baseId}` : void 0);
+  const set$ = $((value) => {
+    if (value && value.trim() !== "") {
+      id.value = value;
+    } else {
+      id.value = `${prefix}${baseId}`;
+    }
+  });
+  const delete$ = $(() => {
+    id.value = void 0;
+  });
+  return {
+    id,
+    set$,
+    delete$
+  };
+};
+export {
+  useIdManager
+};

package/lib/_internal/hooks/use-id-manager/use-id-manager.types.d.ts

@@ -0,0 +1,56 @@
+import { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * Configuration parameters for the `useIdManager` hook.
+ */
+export interface UseIdManagerParams {
+    /**
+     * An optional prefix to prepend to the generated or provided identifier.
+     * This is useful for namespacing IDs to avoid collisions in the DOM,
+     * especially when multiple instances of the same component are present.
+     *
+     * @default "entry-ui-qwik-"
+     */
+    prefix?: string;
+    /**
+     * An optional value to override the internal identifier.
+     * When provided, this value will be used as the base for the identifier.
+     * If omitted, the hook will fall back to a unique ID automatically
+     * generated by the Qwik's `useId` hook.
+     *
+     * @default undefined
+     */
+    generatedId?: string;
+    /**
+     * Determines whether the identifier should be initialized immediately upon hook creation.
+     * If set to `true`, the `id` readonly signal will be populated with the combined prefix and base ID on mount.
+     * If `false`, the `id` readonly signal remains `undefined` until manually set via `set$`.
+     *
+     * @default false
+     */
+    shouldInitialize?: boolean;
+}
+/**
+ * Represents the object returned by the `useIdManager` hook.
+ */
+export interface UseIdManagerReturnValue {
+    /**
+     * A readonly signal representing the current state of the identifier.
+     * This signal is read-only, meaning its value can only be modified by calling
+     * specific `QRL` functions like `set$` or `delete$`, ensuring consistent
+     * and predictable state updates across the component tree.
+     */
+    id: ReadonlySignal<string | undefined>;
+    /**
+     * A `QRL` function that directly sets the identifier to a specific string value.
+     * If a non-empty string is provided, it will be used as the new ID.
+     * If the provided value is empty or undefined, the function will fall back
+     * to the default format, combining the defined prefix and the base ID.
+     */
+    set$: QRL<(value: string | undefined) => void>;
+    /**
+     * A `QRL` function that clears the current identifier by setting its value to `undefined`.
+     * This is particularly useful for resetting the state during component unmounting
+     * or when the identifier is no longer required in the DOM.
+     */
+    delete$: QRL<() => void>;
+}

package/lib/_internal/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './hooks';
 export * from './utilities';

package/lib/_internal/utilities/error/error.qwik.mjs

@@ -0,0 +1,10 @@
+import { error as error$1 } from "@entry-ui/utilities/error";
+const error = (messages) => {
+  error$1({
+    prefix: "[Entry UI Qwik]",
+    messages
+  });
+};
+export {
+  error
+};

package/lib/_internal/utilities/warn/warn.qwik.mjs

@@ -0,0 +1,10 @@
+import { warn as warn$1 } from "@entry-ui/utilities/warn";
+const warn = (messages) => {
+  warn$1({
+    prefix: "[Entry UI Qwik]",
+    messages
+  });
+};
+export {
+  warn
+};

package/lib/components/collapsible/contexts/collapsible-root-context/collapsible-root-context.d.ts

@@ -0,0 +1,11 @@
+import type { CollapsibleRootContextValue } from './collapsible-root-context.types';
+/**
+ * Provides the context for the `Collapsible.Root` component, allowing descendant
+ * components to access readonly signals and `QRL` functions without prop drilling.
+ */
+export declare const CollapsibleRootContext: import("@qwik.dev/core").ContextId<CollapsibleRootContextValue>;
+/**
+ * A hook that provides access to the `Collapsible.Root` component's internal state.
+ * It exposes readonly signals and `QRL` functions to interact with the component's state,
+ */
+export declare const useCollapsibleRootContext: () => CollapsibleRootContextValue;

package/lib/components/collapsible/contexts/collapsible-root-context/collapsible-root-context.qwik.mjs

@@ -0,0 +1,10 @@
+import { createContextId, useContext } from "@qwik.dev/core";
+const CollapsibleRootContext = createContextId("entry-ui-qwik-collapsible-root-context");
+const useCollapsibleRootContext = () => {
+  const context = useContext(CollapsibleRootContext);
+  return context;
+};
+export {
+  CollapsibleRootContext,
+  useCollapsibleRootContext
+};

package/lib/components/collapsible/contexts/collapsible-root-context/collapsible-root-context.types.d.ts

@@ -0,0 +1,58 @@
+import type { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * The value provided by the `CollapsibleRootContext` context.
+ * Contains the readonly signals and `QRL` functions shared with descendant components.
+ */
+export interface CollapsibleRootContextValue {
+    /**
+     * A readonly signal whose value indicates the collapsible's current open state.
+     * It is `true` when the collapsible is open, and `false` when closed.
+     */
+    open: ReadonlySignal<boolean>;
+    /**
+     * A `QRL` function used to programmatically set the open state of the collapsible.
+     * When invoked with `true`, the collapsible will open; with `false`, it will close.
+     */
+    setOpen$: QRL<(open: boolean) => void>;
+    /**
+     * A readonly signal whose value indicates the collapsible's current disabled state.
+     * It is `true` when the collapsible is prevented from user interaction.
+     */
+    disabled: ReadonlySignal<boolean>;
+    /**
+     * An object containing the identifier state and management `QRL` functions for the trigger element.
+     * This is used to link the trigger and the collapsible panel for accessibility purposes (WAI-ARIA).
+     */
+    triggerId: {
+        /**
+         * A readonly signal representing the unique identifier of the trigger.
+         */
+        id: ReadonlySignal<string | undefined>;
+        /**
+         * A `QRL` function to manually set or update the trigger's identifier.
+         */
+        set$: QRL<(value: string | undefined) => void>;
+        /**
+         * A `QRL` function to clear the trigger's identifier.
+         */
+        delete$: QRL<() => void>;
+    };
+    /**
+     * An object containing the identifier state and management functions for the panel element.
+     * This ensures the content panel can be correctly referenced by the trigger's `aria-controls` attribute.
+     */
+    panelId: {
+        /**
+         * A readonly signal representing the unique identifier of the collapsible panel.
+         */
+        id: ReadonlySignal<string | undefined>;
+        /**
+         * A `QRL` function to manually set or update the panel's identifier.
+         */
+        set$: QRL<(value: string | undefined) => void>;
+        /**
+         * A `QRL` function to clear the panel's identifier.
+         */
+        delete$: QRL<() => void>;
+    };
+}

package/lib/components/collapsible/contexts/collapsible-root-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { CollapsibleRootContextValue } from './collapsible-root-context.types';
+export { CollapsibleRootContext, useCollapsibleRootContext } from './collapsible-root-context';

package/lib/components/collapsible/contexts/collapsible-trigger-context/collapsible-trigger-context.d.ts

@@ -0,0 +1,6 @@
+import type { CollapsibleTriggerContextValue } from './collapsible-trigger-context.types';
+/**
+ * Provides the context for the `Collapsible.Trigger` component, allowing descendant
+ * components to access readonly signal without prop drilling.
+ */
+export declare const CollapsibleTriggerContext: import("@qwik.dev/core").ContextId<CollapsibleTriggerContextValue>;

package/lib/components/collapsible/contexts/collapsible-trigger-context/collapsible-trigger-context.qwik.mjs

@@ -0,0 +1,5 @@
+import { createContextId } from "@qwik.dev/core";
+const CollapsibleTriggerContext = createContextId("entry-ui-qwik-collapsible-trigger-context");
+export {
+  CollapsibleTriggerContext
+};

package/lib/components/collapsible/contexts/collapsible-trigger-context/collapsible-trigger-context.types.d.ts

@@ -0,0 +1,13 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value provided by the `CollapsibleTriggerContext` context.
+ * Contains the readonly signal shared with descendant components.
+ */
+export interface CollapsibleTriggerContextValue {
+    /**
+     * A readonly signal representing the effective disabled state of the trigger.
+     * This value is computed by prioritizing the trigger's own 'disabled' prop,
+     * falling back to the 'Collapsible.Root' disabled state if not explicitly set.
+     */
+    disabled: ReadonlySignal<boolean>;
+}

package/lib/components/collapsible/contexts/collapsible-trigger-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { CollapsibleTriggerContextValue } from './collapsible-trigger-context.types';
+export { CollapsibleTriggerContext } from './collapsible-trigger-context';

package/lib/components/collapsible/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './collapsible-root-context';
+export * from './collapsible-trigger-context';

package/lib/components/collapsible/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-collapsible-root-context';
+export * from './use-collapsible-trigger-context';

package/lib/components/collapsible/hooks/use-collapsible-root-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseCollapsibleRootContextReturnValue } from './use-collapsible-root-context.types';
+export { useCollapsibleRootContext } from './use-collapsible-root-context';

package/lib/components/collapsible/hooks/use-collapsible-root-context/use-collapsible-root-context.d.ts

@@ -0,0 +1,7 @@
+import type { UseCollapsibleRootContextReturnValue } from './use-collapsible-root-context.types';
+/**
+ * A hook that provides access to the `Collapsible.Root` component's internal state.
+ * It exposes readonly signals and `QRL` function to interact with the collapsible's state,
+ * allowing descendant components to control or react to its expanded/collapsed state.
+ */
+export declare const useCollapsibleRootContext: () => UseCollapsibleRootContextReturnValue;

package/lib/components/collapsible/hooks/use-collapsible-root-context/use-collapsible-root-context.qwik.mjs

@@ -0,0 +1,13 @@
+import { useContext } from "@qwik.dev/core";
+import { CollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
+const useCollapsibleRootContext = () => {
+  const { open, setOpen$, disabled } = useContext(CollapsibleRootContext);
+  return {
+    open,
+    setOpen$,
+    disabled
+  };
+};
+export {
+  useCollapsibleRootContext
+};

package/lib/components/collapsible/hooks/use-collapsible-root-context/use-collapsible-root-context.types.d.ts

@@ -0,0 +1,22 @@
+import type { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * The value returned by the `useCollapsibleRootContext` hook.
+ * Provides access to the collapsible's readonly signals and `QRL` function for descendant components.
+ */
+export interface UseCollapsibleRootContextReturnValue {
+    /**
+     * A readonly signal whose value indicates the collapsible's current open state.
+     * It is `true` when the collapsible is open, and `false` when closed.
+     */
+    open: ReadonlySignal<boolean>;
+    /**
+     * A `QRL` function used to programmatically set the open state of the collapsible.
+     * When invoked with `true`, the collapsible will open; with `false`, it will close.
+     */
+    setOpen$: QRL<(open: boolean) => void>;
+    /**
+     * A readonly signal whose value indicates the collapsible's current disabled state.
+     * It is `true` when the collapsible is prevented from user interaction.
+     */
+    disabled: ReadonlySignal<boolean>;
+}

package/lib/components/collapsible/hooks/use-collapsible-trigger-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseCollapsibleTriggerContextReturnValue } from './use-collapsible-trigger-context.types';
+export { useCollapsibleTriggerContext } from './use-collapsible-trigger-context';

package/lib/components/collapsible/hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.d.ts

@@ -0,0 +1,7 @@
+import type { UseCollapsibleTriggerContextReturnValue } from './use-collapsible-trigger-context.types';
+/**
+ * A hook that provides access to the `Collapsible.Trigger` component's internal state.
+ * It exposes readonly signal to interact with the trigger's state,
+ * allowing descendant components to react to its disabled/enabled state.
+ */
+export declare const useCollapsibleTriggerContext: () => UseCollapsibleTriggerContextReturnValue;

package/lib/components/collapsible/hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.qwik.mjs

@@ -0,0 +1,11 @@
+import { useContext } from "@qwik.dev/core";
+import { CollapsibleTriggerContext } from "../../contexts/collapsible-trigger-context/collapsible-trigger-context.qwik.mjs";
+const useCollapsibleTriggerContext = () => {
+  const { disabled } = useContext(CollapsibleTriggerContext);
+  return {
+    disabled
+  };
+};
+export {
+  useCollapsibleTriggerContext
+};

package/lib/components/collapsible/hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.types.d.ts

@@ -0,0 +1,13 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value returned by the `useCollapsibleTriggerContext` hook.
+ * Provides access to the trigger's readonly signal for descendant components.
+ */
+export interface UseCollapsibleTriggerContextReturnValue {
+    /**
+     * A readonly signal representing the effective disabled state of the trigger.
+     * This value is computed by prioritizing the trigger's own 'disabled' prop,
+     * falling back to the 'Collapsible.Root' disabled state if not explicitly set.
+     */
+    disabled: ReadonlySignal<boolean>;
+}

package/lib/components/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+export * as Collapsible from './parts';
+export * from './hooks';

package/lib/components/collapsible/index.qwik.mjs

@@ -0,0 +1,8 @@
+import * as index from "./parts/index.qwik.mjs";
+import { useCollapsibleRootContext } from "./hooks/use-collapsible-root-context/use-collapsible-root-context.qwik.mjs";
+import { useCollapsibleTriggerContext } from "./hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.qwik.mjs";
+export {
+  index as Collapsible,
+  useCollapsibleRootContext,
+  useCollapsibleTriggerContext
+};

package/lib/components/collapsible/parts/collapsible-indicator/collapsible-indicator.d.ts

@@ -0,0 +1,8 @@
+import type { CollapsibleIndicatorProps } from './collapsible-indicator.types';
+/**
+ * An optional visual indicator that reflects the collapsible's open or closed state.
+ * It typically displays an icon or other visual cue to show the current status.
+ *
+ * Renders a `<span>` element.
+ */
+export declare const CollapsibleIndicator: import("@qwik.dev/core").Component<CollapsibleIndicatorProps>;

package/lib/components/collapsible/parts/collapsible-indicator/collapsible-indicator.qwik.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, Slot } from "@qwik.dev/core";
+import { mergeStyles } from "../../../../utilities/merge-styles/merge-styles.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { useCollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
+const CollapsibleIndicator = component$((props) => {
+  const { style, ...others } = props;
+  const { open, disabled } = useCollapsibleRootContext();
+  return /* @__PURE__ */ jsx(Primitive.span, {
+    "aria-hidden": "true",
+    "data-entry-ui-qwik-collapsible-indicator": "",
+    "data-state": open.value ? "open" : "closed",
+    "data-disabled": disabled.value ? "" : void 0,
+    style: mergeStyles([
+      {
+        pointerEvents: "none",
+        userSelect: "none"
+      },
+      style
+    ]),
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  CollapsibleIndicator
+};

package/lib/components/collapsible/parts/collapsible-indicator/collapsible-indicator.types.d.ts

@@ -0,0 +1,15 @@
+import { PropsOf, Component } from '@qwik.dev/core';
+/**
+ * Props for the `Collapsible.Indicator` component.
+ * Extends the standard HTML attributes for a `<span>` element.
+ */
+export interface CollapsibleIndicatorProps extends PropsOf<'span'> {
+    /**
+     * The element or component this component should render as.
+     *
+     * @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
+     *
+     * @default "span"
+     */
+    as?: string | Component;
+}

package/lib/components/collapsible/parts/collapsible-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export type { CollapsibleIndicatorProps } from './collapsible-indicator.types';
+export { CollapsibleIndicator } from './collapsible-indicator';

package/lib/components/collapsible/parts/collapsible-panel/collapsible-panel.d.ts

@@ -0,0 +1,7 @@
+import type { CollapsiblePanelProps } from './collapsible-panel.types';
+/**
+ * A panel with the collapsible contents.
+ *
+ * Renders a `<div>` element.
+ */
+export declare const CollapsiblePanel: import("@qwik.dev/core").Component<CollapsiblePanelProps>;

package/lib/components/collapsible/parts/collapsible-panel/collapsible-panel.qwik.mjs

@@ -0,0 +1,169 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, useComputed$, $, useTask$, isBrowser, isDev, sync$, Slot } from "@qwik.dev/core";
+import { getComputedStyle } from "@entry-ui/utilities/get-computed-style";
+import { getHiddenElementHeight } from "@entry-ui/utilities/get-hidden-element-height";
+import { addEventListenerOnce } from "@entry-ui/utilities/add-event-listener-once";
+import { useLifecycle } from "../../../../hooks/use-lifecycle/use-lifecycle.qwik.mjs";
+import { mergeStyles } from "../../../../utilities/merge-styles/merge-styles.qwik.mjs";
+import { mergeRefs } from "../../../../utilities/merge-refs/merge-refs.qwik.mjs";
+import { warn } from "../../../../_internal/utilities/warn/warn.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { useCollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
+const CollapsiblePanel = component$((props) => {
+  const { as = "div", ref: _ref, id, hiddenUntilFound = false, onOpenChangeComplete$, onBeforematch$, style, ...others } = props;
+  const { open, setOpen$, disabled, panelId, triggerId } = useCollapsibleRootContext();
+  const ref = useSignal(void 0);
+  const hidden = useSignal(!open.value);
+  const state = useSignal(open.value ? "open" : "closed");
+  const height = useSignal(open.value ? "auto" : "0px");
+  const preventInitialAnimation = useSignal(true);
+  const mergedStyles = useComputed$(() => mergeStyles([
+    {
+      display: hidden.value ? hiddenUntilFound ? void 0 : "none" : void 0,
+      contentVisibility: hidden.value ? hiddenUntilFound ? "hidden" : void 0 : void 0,
+      // When using hidden="until-found", the panel automatically opens when a search
+      // match occurs. However, Chromium-based browsers (like Chrome) will fail to
+      // highlight the matched text if the element has an overflow value other than
+      // "visible". Firefox handles this regardless of the overflow setting, but we force
+      // visible here to ensure cross-browser consistency for the "Find-in-page" feature.
+      overflow: hidden.value ? hiddenUntilFound ? "visible" : void 0 : void 0,
+      transitionDuration: preventInitialAnimation.value ? "0s" : void 0,
+      animationDuration: preventInitialAnimation.value ? "0s" : void 0,
+      "--entry-ui-qwik-collapsible-panel-height": height.value
+    },
+    style
+  ]));
+  useLifecycle({
+    element: ref,
+    onMount$: $(() => panelId.set$(id)),
+    onUnmount$: $(() => panelId.delete$())
+  });
+  useTask$(({ track, cleanup }) => {
+    const isOpen = track(() => open.value);
+    const panelRef = ref.value;
+    if (isBrowser && panelRef) {
+      if (preventInitialAnimation.value) {
+        preventInitialAnimation.value = false;
+        panelRef.style.removeProperty("transition-duration");
+        panelRef.style.removeProperty("animation-duration");
+      }
+      if (isOpen) {
+        hidden.value = false;
+        panelRef.removeAttribute("hidden");
+        if (hiddenUntilFound) {
+          panelRef.style.removeProperty("content-visibility");
+          panelRef.style.removeProperty("overflow");
+        } else {
+          panelRef.style.removeProperty("display");
+        }
+        state.value = "open";
+        panelRef.setAttribute("data-state", "open");
+        const panelHeight = getHiddenElementHeight(panelRef);
+        height.value = `${panelHeight}px`;
+        panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+      } else {
+        state.value = "closed";
+        panelRef.setAttribute("data-state", "closed");
+        const { animationDuration: animationDuration2, transitionDuration: transitionDuration2 } = getComputedStyle(panelRef);
+        const panelHeight = getHiddenElementHeight(panelRef);
+        if (animationDuration2 === "0s" && transitionDuration2 !== "0s") {
+          if (height.value === "auto") {
+            height.value = `${panelHeight}px`;
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+            setTimeout(() => {
+              height.value = "0px";
+              panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "0px");
+            }, 0);
+          } else {
+            height.value = "0px";
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "0px");
+          }
+        } else {
+          height.value = `${panelHeight}px`;
+          panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+        }
+      }
+      const applyFinalState = () => {
+        if (isOpen) {
+          height.value = "auto";
+          panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "auto");
+        } else {
+          hidden.value = true;
+          height.value = "0px";
+          panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "0px");
+        }
+        if (onOpenChangeComplete$) {
+          onOpenChangeComplete$(isOpen);
+        }
+      };
+      const { transitionDuration, animationDuration } = getComputedStyle(panelRef);
+      if (isDev && transitionDuration !== "0s" && animationDuration !== "0s") {
+        warn([
+          `Both CSS transitions and CSS animations are detected on 'Collapsible.Panel' component.`,
+          `Using both at the same time may cause unpredictable behavior.`,
+          `Please use only one animation method.`
+        ]);
+        applyFinalState();
+      } else if (transitionDuration !== "0s") {
+        const removeTransitionEndListener = addEventListenerOnce({
+          target: panelRef,
+          type: "transitionend",
+          listener: applyFinalState
+        });
+        cleanup(() => {
+          removeTransitionEndListener();
+        });
+      } else if (animationDuration !== "0s") {
+        const removeAnimationEndListener = addEventListenerOnce({
+          target: panelRef,
+          type: "animationend",
+          listener: applyFinalState
+        });
+        cleanup(() => {
+          removeAnimationEndListener();
+        });
+      } else {
+        applyFinalState();
+      }
+    }
+  });
+  const handleBeforeMatchSync$ = sync$((event) => {
+    event.preventDefault();
+  });
+  const handleBeforeMatch$ = $((_, currentTarget) => {
+    setOpen$(true);
+    if ("scrollIntoViewIfNeeded" in currentTarget) {
+      currentTarget.scrollIntoViewIfNeeded(true);
+    } else {
+      currentTarget.scrollIntoView({
+        behavior: "auto",
+        block: "center",
+        inline: "nearest"
+      });
+    }
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    ref: mergeRefs([
+      _ref,
+      ref
+    ]),
+    id: panelId.id.value,
+    hidden: hidden.value ? hiddenUntilFound ? "until-found" : "hidden" : void 0,
+    "aria-labelledby": triggerId.id.value,
+    "data-entry-ui-qwik-collapsible-panel": "",
+    "data-state": state.value,
+    "data-disabled": disabled.value ? "" : void 0,
+    onBeforematch$: [
+      onBeforematch$,
+      handleBeforeMatchSync$,
+      handleBeforeMatch$
+    ],
+    style: mergedStyles.value,
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  CollapsiblePanel
+};

package/lib/components/collapsible/parts/collapsible-panel/collapsible-panel.types.d.ts

@@ -0,0 +1,31 @@
+import { PropsOf, Component, QRL } from '@qwik.dev/core';
+/**
+ * Props for the `Collapsible.Panel` component.
+ * Extends the standard HTML attributes for a `<div>` element.
+ */
+export interface CollapsiblePanelProps extends PropsOf<'div'> {
+    /**
+     * The element or component this component should render as.
+     *
+     * @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
+     *
+     * @default "div"
+     */
+    as?: string | Component;
+    /**
+     * When `true`, the panel uses the `hidden="until-found"` attribute when closed.
+     * This allows the browser to search and reveal content within the panel
+     * even before it is manually opened.
+     *
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * A `QRL` callback invoked once the panel's expansion or collapse has fully settled.
+     * If CSS transitions or animations are present, it triggers after they finish;
+     * otherwise, it executes immediately upon the state change.
+     *
+     * @default undefined
+     */
+    onOpenChangeComplete$?: QRL<(open: boolean) => void>;
+}

package/lib/components/collapsible/parts/collapsible-panel/index.d.ts

@@ -0,0 +1,2 @@
+export type { CollapsiblePanelProps } from './collapsible-panel.types';
+export { CollapsiblePanel } from './collapsible-panel';