@entry-ui/qwik 0.8.0 → 0.9.0

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

@@ -0,0 +1,13 @@
+import type { CollapsiblePanelProps } from './collapsible-panel.types';
+/**
+ * Internal component used as a base for expandable panels, such as `Collapsible` or `Accordion`.
+ * It provides advanced height synchronization, CSS transition support, and seamless
+ * integration with the browser's native search-and-reveal (`hidden="until-found"`) functionality.
+ *
+ * This component is designed for internal library use to ensure consistent animation
+ * behaviors, state management (open/closed), and accessibility across different
+ * disclosure-pattern implementations.
+ *
+ * Renders a `<div>` element.
+ */
+export declare const CollapsiblePanel: import("@qwik.dev/core").Component<CollapsiblePanelProps>;

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

@@ -0,0 +1,195 @@
+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 { getWindow } from "@entry-ui/utilities/get-window";
+import { addEventListenerOnce } from "@entry-ui/utilities/add-event-listener-once";
+import { mergeStyles } from "../../../utilities/merge-styles/merge-styles.qwik.mjs";
+import { mergeRefs } from "../../../utilities/merge-refs/merge-refs.qwik.mjs";
+import { warn } from "../../utilities/warn/warn.qwik.mjs";
+import { Primitive } from "../primitive/primitive.qwik.mjs";
+const CollapsiblePanel = component$((props) => {
+  const { as = "div", ref: _ref, componentName, heightVariableName, open = false, setOpen$, hiddenUntilFound: _hiddenUntilFound = false, disabled = false, onOpenChangeComplete$, onBeforematch$, style, ...others } = props;
+  const ref = useSignal(void 0);
+  const hidden = useSignal(!open);
+  const state = useSignal(open ? "open" : "closed");
+  const height = useSignal(open ? "auto" : _hiddenUntilFound ? disabled ? "0px" : "none" : "0px");
+  const isBeforeMatch = useSignal(false);
+  const preventInitialAnimation = useSignal(true);
+  const hiddenUntilFound = useComputed$(() => disabled ? false : _hiddenUntilFound);
+  const mergedStyles = useComputed$(() => mergeStyles([
+    {
+      // When the panel is hidden, we use "none !important" to ensure it's removed
+      // from the visual flow unless hidden="until-found" is active.
+      // In the latter case, we set display to undefined to allow the browser's
+      // internal search engine to manage visibility and reveal the content.
+      display: hidden.value ? hiddenUntilFound.value ? void 0 : "none !important" : void 0,
+      transitionDuration: preventInitialAnimation.value ? "0s" : void 0,
+      animationDuration: preventInitialAnimation.value ? "0s" : void 0,
+      [heightVariableName]: height.value
+    },
+    style
+  ]));
+  useTask$(({ track }) => {
+    const isHiddenUntilFound = track(() => hiddenUntilFound.value);
+    const panelRef = ref.value;
+    if (isBrowser && panelRef) {
+      const panelHeight = open ? "auto" : isHiddenUntilFound ? "none" : "0px";
+      height.value = panelHeight;
+      panelRef.style.setProperty(heightVariableName, panelHeight);
+    }
+  });
+  useTask$(({ track, cleanup }) => {
+    const isOpen = track(() => open);
+    const panelRef = ref.value;
+    if (isBrowser && panelRef) {
+      if (preventInitialAnimation.value && !isBeforeMatch.value) {
+        preventInitialAnimation.value = false;
+        panelRef.style.removeProperty("transition-duration");
+        panelRef.style.removeProperty("animation-duration");
+      }
+      if (isOpen) {
+        hidden.value = false;
+        panelRef.removeAttribute("hidden");
+        if (hiddenUntilFound.value) {
+          isBeforeMatch.value = false;
+        } else {
+          panelRef.style.removeProperty("display");
+        }
+        state.value = "open";
+        panelRef.setAttribute("data-state", "open");
+        const { animationDuration: animationDuration2, transitionDuration: transitionDuration2 } = getComputedStyle(panelRef);
+        const panelHeight = getHiddenElementHeight(panelRef);
+        const win = getWindow(panelRef);
+        if (transitionDuration2 === "0s" && animationDuration2 === "0s") {
+          height.value = `${panelHeight}px`;
+          panelRef.style.setProperty(heightVariableName, `${panelHeight}px`);
+        } else if (transitionDuration2 !== "0s") {
+          if (height.value === "none") {
+            height.value = "0px";
+            panelRef.style.setProperty(heightVariableName, "0px");
+            win.setTimeout(() => {
+              height.value = `${panelHeight}px`;
+              panelRef.style.setProperty(heightVariableName, `${panelHeight}px`);
+            }, 0);
+          } else {
+            height.value = `${panelHeight}px`;
+            panelRef.style.setProperty(heightVariableName, `${panelHeight}px`);
+          }
+        } else if (animationDuration2 !== "0s") {
+          height.value = `${panelHeight}px`;
+          panelRef.style.setProperty(heightVariableName, `${panelHeight}px`);
+        }
+      } else {
+        state.value = "closed";
+        panelRef.setAttribute("data-state", "closed");
+        const { animationDuration: animationDuration2, transitionDuration: transitionDuration2 } = getComputedStyle(panelRef);
+        const panelHeight = getHiddenElementHeight(panelRef);
+        const win = getWindow(panelRef);
+        if (transitionDuration2 === "0s" && animationDuration2 === "0s") {
+          height.value = "0px";
+          panelRef.style.setProperty(heightVariableName, "0px");
+        } else if (transitionDuration2 !== "0s") {
+          if (height.value === "auto") {
+            height.value = `${panelHeight}px`;
+            panelRef.style.setProperty(heightVariableName, `${panelHeight}px`);
+            win.setTimeout(() => {
+              height.value = "0px";
+              panelRef.style.setProperty(heightVariableName, "0px");
+            }, 0);
+          } else {
+            height.value = "0px";
+            panelRef.style.setProperty(heightVariableName, "0px");
+          }
+        } else if (animationDuration2 !== "0s") {
+          height.value = `${panelHeight}px`;
+          panelRef.style.setProperty(heightVariableName, `${panelHeight}px`);
+        }
+      }
+      const applyFinalState = () => {
+        if (isOpen) {
+          height.value = "auto";
+          panelRef.style.setProperty(heightVariableName, "auto");
+        } else {
+          hidden.value = true;
+          if (hiddenUntilFound.value) {
+            height.value = "none";
+            panelRef.style.setProperty(heightVariableName, "none");
+          } else {
+            height.value = "0px";
+            panelRef.style.setProperty(heightVariableName, "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 ${componentName} 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) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented) {
+      event.preventDefault();
+    }
+  });
+  const handleBeforeMatch$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented) {
+      isBeforeMatch.value = true;
+      preventInitialAnimation.value = true;
+      if (setOpen$) {
+        setOpen$(true);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    ref: mergeRefs([
+      _ref,
+      ref
+    ]),
+    hidden: hidden.value ? hiddenUntilFound.value ? "until-found" : "hidden" : void 0,
+    "data-state": state.value,
+    "data-disabled": disabled ? "" : void 0,
+    onBeforematch$: [
+      onBeforematch$,
+      handleBeforeMatchSync$,
+      handleBeforeMatch$
+    ],
+    style: mergedStyles.value,
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  CollapsiblePanel
+};

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

@@ -0,0 +1,62 @@
+import { PropsOf, Component, QRL } from '@qwik.dev/core';
+/**
+ * Props for the internal `CollapsiblePanel` 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;
+    /**
+     * The name of the parent component using this panel (e.g., "Accordion.ItemPanel").
+     * Used primarily for developer warnings and debugging.
+     */
+    componentName: string;
+    /**
+     * The name of the CSS custom property (variable) used to synchronize the panel's height.
+     */
+    heightVariableName: `--${string}`;
+    /**
+     * The controlled open state of the panel.
+     * When `true`, the panel expands to reveal its content.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * A `QRL` callback that updates the `open` state.
+     * Triggered automatically by internal logic, such as the browser's "beforematch" event.
+     *
+     * @default undefined
+     */
+    setOpen$?: QRL<(open: boolean) => void>;
+    /**
+     * When `true`, the panel utilizes the browser's native `hidden="until-found"` attribute.
+     * This enables "find-in-page" support, allowing the browser to automatically reveal
+     * the panel when a match is found inside its content.
+     *
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * If `true`, the panel is considered inactive.
+     * This prevents the `hiddenUntilFound` behavior and ensures the panel remains
+     * closed and non-interactable.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * A `QRL` callback invoked once the expansion or collapse transition has fully completed.
+     * It fires after the CSS `transitionend` or `animationend` events, or immediately
+     * if no animations are defined.
+     *
+     * @default undefined
+     */
+    onOpenChangeComplete$?: QRL<(open: boolean) => void>;
+}

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

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

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

@@ -1 +1,3 @@
+export * from './collapsible-panel';
+export * from './indicator';
 export * from './primitive';

package/lib/_internal/components/indicator/index.d.ts

@@ -0,0 +1,2 @@
+export type { IndicatorProps } from './indicator.types';
+export { Indicator } from './indicator';

package/lib/_internal/components/indicator/indicator.d.ts

@@ -0,0 +1,11 @@
+import type { IndicatorProps } from './indicator.types';
+/**
+ * Internal component used as a base for various state indicators.
+ * It provides common accessibility attributes, styling resets, and composition support.
+ *
+ * This component is intended for internal library use to ensure consistent
+ * behavior across different indicator implementations.
+ *
+ * Renders a `<span>` element.
+ */
+export declare const Indicator: import("@qwik.dev/core").Component<IndicatorProps>;

package/lib/_internal/components/indicator/indicator.qwik.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useComputed$, Slot } from "@qwik.dev/core";
+import { mergeStyles } from "../../../utilities/merge-styles/merge-styles.qwik.mjs";
+import { Primitive } from "../primitive/primitive.qwik.mjs";
+const Indicator = component$((props) => {
+  const { as = "span", style, ...others } = props;
+  const mergedStyles = useComputed$(() => mergeStyles([
+    {
+      pointerEvents: "none",
+      userSelect: "none",
+      // Ensures text selection is disabled on older versions of Safari
+      // and iOS browsers using the WebKit engine.
+      WebkitUserSelect: "none"
+    },
+    style
+  ]));
+  return /* @__PURE__ */ jsx(Primitive.span, {
+    as,
+    "aria-hidden": "true",
+    style: mergedStyles.value,
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  Indicator
+};

package/lib/_internal/components/indicator/indicator.types.d.ts

@@ -0,0 +1,15 @@
+import { PropsOf, Component } from '@qwik.dev/core';
+/**
+ * Props for the internal `Indicator` component.
+ * Extends the standard HTML attributes for a `<span>` element.
+ */
+export interface IndicatorProps 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/accordion/parts/accordion-item-indicator/accordion-item-indicator.qwik.mjs

@@ -1,23 +1,15 @@
 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 { Indicator } from "../../../../_internal/components/indicator/indicator.qwik.mjs";
 import { useAccordionItemContext } from "../../contexts/accordion-item-context/accordion-item-context.qwik.mjs";
 const AccordionItemIndicator = component$((props) => {
-  const { style, ...others } = props;
+  const { as = "span", ...others } = props;
   const { open, disabled } = useAccordionItemContext();
-  return /* @__PURE__ */ jsx(Primitive.span, {
-    "aria-hidden": "true",
+  return /* @__PURE__ */ jsx(Indicator, {
+    as,
     "data-entry-ui-qwik-accordion-item-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, {})
   });

package/lib/components/accordion/parts/accordion-item-panel/accordion-item-panel.qwik.mjs

@@ -1,195 +1,36 @@
 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 { component$, useSignal, $, Slot } from "@qwik.dev/core";
 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 { CollapsiblePanel } from "../../../../_internal/components/collapsible-panel/collapsible-panel.qwik.mjs";
 import { useAccordionRootContext } from "../../contexts/accordion-root-context/accordion-root-context.qwik.mjs";
 import { useAccordionItemContext } from "../../contexts/accordion-item-context/accordion-item-context.qwik.mjs";
 const AccordionItemPanel = component$((props) => {
-  const { as = "div", ref: _ref, id, hiddenUntilFound: _hiddenUntilFound = false, onOpenChangeComplete$, onBeforematch$, style, ...others } = props;
+  const { as = "div", ref: _ref, id, hiddenUntilFound = false, ...others } = props;
   const { hiddenUntilFound: rootHiddenUntilFound } = useAccordionRootContext();
   const { open, setOpen$, disabled, panelId, triggerId } = useAccordionItemContext();
   const ref = useSignal(void 0);
-  const hidden = useSignal(!open.value);
-  const state = useSignal(open.value ? "open" : "closed");
-  const height = useSignal(() => {
-    if (open.value) {
-      return "auto";
-    }
-    return _hiddenUntilFound || rootHiddenUntilFound.value ? disabled.value ? "0px" : "none" : "0px";
-  });
-  const isBeforeMatch = useSignal(false);
-  const preventInitialAnimation = useSignal(true);
-  const hiddenUntilFound = useComputed$(() => disabled.value ? false : _hiddenUntilFound || rootHiddenUntilFound.value);
-  const mergedStyles = useComputed$(() => mergeStyles([
-    {
-      display: hidden.value ? hiddenUntilFound.value ? void 0 : "none !important" : void 0,
-      transitionDuration: preventInitialAnimation.value ? "0s" : void 0,
-      animationDuration: preventInitialAnimation.value ? "0s" : void 0,
-      "--entry-ui-qwik-accordion-item-panel-height": height.value
-    },
-    style
-  ]));
   useLifecycle({
     element: ref,
     onMount$: $(() => panelId.set$(id)),
     onUnmount$: $(() => panelId.delete$())
   });
-  useTask$(({ track }) => {
-    const isHiddenUntilFound = track(() => hiddenUntilFound.value);
-    const panelRef = ref.value;
-    if (isBrowser && panelRef) {
-      const panelHeight = open.value ? "auto" : isHiddenUntilFound ? "none" : "0px";
-      height.value = panelHeight;
-      panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", panelHeight);
-    }
-  });
-  useTask$(({ track, cleanup }) => {
-    const isOpen = track(() => open.value);
-    const panelRef = ref.value;
-    if (isBrowser && panelRef) {
-      if (preventInitialAnimation.value && !isBeforeMatch.value) {
-        preventInitialAnimation.value = false;
-        panelRef.style.removeProperty("transition-duration");
-        panelRef.style.removeProperty("animation-duration");
-      }
-      if (isOpen) {
-        hidden.value = false;
-        panelRef.removeAttribute("hidden");
-        if (hiddenUntilFound.value) {
-          isBeforeMatch.value = false;
-        } else {
-          panelRef.style.removeProperty("display");
-        }
-        state.value = "open";
-        panelRef.setAttribute("data-state", "open");
-        const { animationDuration: animationDuration2, transitionDuration: transitionDuration2 } = getComputedStyle(panelRef);
-        const panelHeight = getHiddenElementHeight(panelRef);
-        if (animationDuration2 === "0s" && transitionDuration2 !== "0s") {
-          if (height.value === "none") {
-            height.value = "0px";
-            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "0px");
-            setTimeout(() => {
-              height.value = `${panelHeight}px`;
-              panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", `${panelHeight}px`);
-            }, 0);
-          } else {
-            height.value = `${panelHeight}px`;
-            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", `${panelHeight}px`);
-          }
-        } else {
-          height.value = `${panelHeight}px`;
-          panelRef.style.setProperty("--entry-ui-qwik-accordion-item-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-accordion-item-panel-height", `${panelHeight}px`);
-            setTimeout(() => {
-              height.value = "0px";
-              panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "0px");
-            }, 0);
-          } else {
-            height.value = "0px";
-            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "0px");
-          }
-        } else {
-          height.value = `${panelHeight}px`;
-          panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", `${panelHeight}px`);
-        }
-      }
-      const applyFinalState = () => {
-        if (isOpen) {
-          height.value = "auto";
-          panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "auto");
-        } else {
-          hidden.value = true;
-          if (hiddenUntilFound.value) {
-            height.value = "none";
-            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "none");
-          } else {
-            height.value = "0px";
-            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-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 'Accordion.ItemPanel' 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) => {
-    const entryUIQwikEvent = event;
-    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented) {
-      event.preventDefault();
-    }
-  });
-  const handleBeforeMatch$ = $((event) => {
-    const entryUIQwikEvent = event;
-    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented) {
-      isBeforeMatch.value = true;
-      preventInitialAnimation.value = true;
-      setOpen$(true);
-    }
-  });
-  return /* @__PURE__ */ jsx(Primitive.div, {
+  return /* @__PURE__ */ jsx(CollapsiblePanel, {
     as,
+    componentName: "Accordion.ItemPanel",
+    heightVariableName: "--entry-ui-qwik-accordion-item-panel-height",
+    open: open.value,
+    setOpen$,
+    hiddenUntilFound: hiddenUntilFound || rootHiddenUntilFound.value,
+    disabled: disabled.value,
     ref: mergeRefs([
       _ref,
       ref
     ]),
     id: panelId.id.value,
     role: triggerId.id.value ? "region" : void 0,
-    hidden: hidden.value ? hiddenUntilFound.value ? "until-found" : "hidden" : void 0,
     "aria-labelledby": triggerId.id.value,
     "data-entry-ui-qwik-accordion-item-panel": "",
-    "data-state": state.value,
-    "data-disabled": disabled.value ? "" : void 0,
-    onBeforematch$: [
-      onBeforematch$,
-      handleBeforeMatchSync$,
-      handleBeforeMatch$
-    ],
-    style: mergedStyles.value,
     ...others,
     children: /* @__PURE__ */ jsx(Slot, {})
   });

package/lib/components/accordion/parts/accordion-root/accordion-root.qwik.mjs

@@ -1,13 +1,13 @@
 import { jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, useComputed$, $, sync$, useContextProvider, Slot } from "@qwik.dev/core";
 import { isDev } from "@qwik.dev/core/build";
+import { focusElement } from "@entry-ui/utilities/focus-element";
 import { useControllable } from "../../../../hooks/use-controllable/use-controllable.qwik.mjs";
-import { mergeStyles } from "../../../../utilities/merge-styles/merge-styles.qwik.mjs";
 import { warn } from "../../../../_internal/utilities/warn/warn.qwik.mjs";
 import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
 import { AccordionRootContext } from "../../contexts/accordion-root-context/accordion-root-context.qwik.mjs";
 const AccordionRoot = component$((props) => {
-  const { as = "div", defaultValue, value: _value, onValueChange$, multiple = false, loopFocus = true, hiddenUntilFound: _hiddenUntilFound = false, disabled: _disabled = false, onKeyDown$, style, ...others } = props;
+  const { as = "div", defaultValue, value: _value, onValueChange$, multiple = false, loopFocus = true, hiddenUntilFound: _hiddenUntilFound = false, disabled: _disabled = false, onKeyDown$, ...others } = props;
   const { state: value, setState$: setValue$ } = useControllable({
     defaultValue: defaultValue ?? [],
     controlledSignal: _value,
@@ -91,7 +91,10 @@ const AccordionRoot = component$((props) => {
           break;
       }
       if (nextIndex > -1) {
-        enabledTriggers[nextIndex]?.focus();
+        focusElement({
+          element: enabledTriggers[nextIndex],
+          focusVisible: true
+        });
       }
     }
   });
@@ -112,22 +115,6 @@ const AccordionRoot = component$((props) => {
       handleKeyDownSync$,
       handleKeyDown$
     ],
-    style: mergeStyles([
-      {
-        // Performance optimization
-        // The `contain: layout style;` CSS property is used here to improve rendering performance.
-        // `contain: layout;` tells the browser that the internal layout of this accordion
-        // is self-contained and does not affect the layout of elements outside of it. This prevents
-        // costly re-calculations of the entire page layout when an accordion item expands or collapses,
-        // which is especially beneficial during animations.
-        // `contain: style;` ensures that CSS properties that can affect the rest of the page,
-        // like counters, are isolated to this element.
-        // Together, these properties create a performance "bubble", allowing the browser to optimize
-        // rendering by treating the accordion component as an independent unit.
-        contain: "layout style"
-      },
-      style
-    ]),
     ...others,
     children: /* @__PURE__ */ jsx(Slot, {})
   });

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

@@ -1,23 +1,15 @@
 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 { Indicator } from "../../../../_internal/components/indicator/indicator.qwik.mjs";
 import { useCollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
 const CollapsibleIndicator = component$((props) => {
-  const { style, ...others } = props;
+  const { as = "span", ...others } = props;
   const { open, disabled } = useCollapsibleRootContext();
-  return /* @__PURE__ */ jsx(Primitive.span, {
-    "aria-hidden": "true",
+  return /* @__PURE__ */ jsx(Indicator, {
+    as,
     "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, {})
   });