@entry-ui/qwik 0.8.0 → 0.9.0

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

@@ -1,188 +1,34 @@
 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 as CollapsiblePanel$1 } from "../../../../_internal/components/collapsible-panel/collapsible-panel.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: _hiddenUntilFound = false, onOpenChangeComplete$, onBeforematch$, style, ...others } = props;
+  const { as = "div", ref: _ref, id, hiddenUntilFound = false, ...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" : _hiddenUntilFound ? disabled.value ? "0px" : "none" : "0px");
-  const isBeforeMatch = useSignal(false);
-  const preventInitialAnimation = useSignal(true);
-  const hiddenUntilFound = useComputed$(() => disabled.value ? false : _hiddenUntilFound);
-  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-collapsible-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-collapsible-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-collapsible-panel-height", "0px");
-            setTimeout(() => {
-              height.value = `${panelHeight}px`;
-              panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
-            }, 0);
-          } else {
-            height.value = `${panelHeight}px`;
-            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
-          }
-        } else {
-          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;
-          if (hiddenUntilFound.value) {
-            height.value = "none";
-            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "none");
-          } else {
-            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) => {
-    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$1, {
     as,
+    componentName: "Collapsible.Panel",
+    heightVariableName: "--entry-ui-qwik-collapsible-panel-height",
+    open: open.value,
+    setOpen$,
+    hiddenUntilFound,
+    disabled: disabled.value,
     ref: mergeRefs([
       _ref,
       ref
     ]),
     id: panelId.id.value,
     role: triggerId.id.value ? "group" : void 0,
-    hidden: hidden.value ? hiddenUntilFound.value ? "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, {})
   });

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

@@ -2,11 +2,10 @@ import { jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, useComputed$, useContextProvider, Slot } from "@qwik.dev/core";
 import { useControllable } from "../../../../hooks/use-controllable/use-controllable.qwik.mjs";
 import { useIdManager } from "../../../../_internal/hooks/use-id-manager/use-id-manager.qwik.mjs";
-import { mergeStyles } from "../../../../utilities/merge-styles/merge-styles.qwik.mjs";
 import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
 import { CollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
 const CollapsibleRoot = component$((props) => {
-  const { as = "div", defaultOpen, open: _open, onOpenChange$, disabled: _disabled = false, style, ...others } = props;
+  const { as = "div", defaultOpen, open: _open, onOpenChange$, disabled: _disabled = false, ...others } = props;
   const { state: open, setState$: setOpen$ } = useControllable({
     defaultValue: defaultOpen ?? false,
     controlledSignal: _open,
@@ -31,22 +30,6 @@ const CollapsibleRoot = component$((props) => {
     "data-entry-ui-qwik-collapsible-root": "",
     "data-state": open.value ? "open" : "closed",
     "data-disabled": disabled.value ? "" : void 0,
-    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 component
-        // 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 the collapsible panel 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 collapsible component as an independent unit.
-        contain: "layout style"
-      },
-      style
-    ]),
     ...others,
     children: /* @__PURE__ */ jsx(Slot, {})
   });

package/lib/components/copy-button/parts/copy-button-indicator/copy-button-indicator.qwik.mjs

@@ -1,25 +1,16 @@
 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 { useCopyButtonRootContext } from "../../contexts/copy-button-root-context/copy-button-root-context.qwik.mjs";
 const CopyButtonIndicator = component$((props) => {
-  const { as = "span", style, ...others } = props;
+  const { as = "span", ...others } = props;
   const { copied, error, disabled } = useCopyButtonRootContext();
-  return /* @__PURE__ */ jsx(Primitive.span, {
+  return /* @__PURE__ */ jsx(Indicator, {
     as,
-    "aria-hidden": "true",
     "data-entry-ui-qwik-copy-button-indicator": "",
     "data-copied": copied.value ? "" : void 0,
     "data-error": error.value ? "" : void 0,
     "data-disabled": disabled.value ? "" : void 0,
-    style: mergeStyles([
-      {
-        pointerEvents: "none",
-        userSelect: "none"
-      },
-      style
-    ]),
     ...others,
     children: /* @__PURE__ */ jsx(Slot, {})
   });

package/lib/components/index.d.ts

@@ -2,5 +2,7 @@ export * from './accordion';
 export * from './alert';
 export * from './collapsible';
 export * from './copy-button';
+export * from './roving-focus-group';
 export * from './separator';
+export * from './tabs';
 export * from './toggle';

package/lib/components/roving-focus-group/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './roving-focus-group-root-context';
+export * from './roving-focus-group-item-context';

package/lib/components/roving-focus-group/contexts/roving-focus-group-item-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { RovingFocusGroupItemContextValue } from './roving-focus-group-item-context.types';
+export { RovingFocusGroupItemContext } from './roving-focus-group-item-context';

package/lib/components/roving-focus-group/contexts/roving-focus-group-item-context/roving-focus-group-item-context.d.ts

@@ -0,0 +1,6 @@
+import type { RovingFocusGroupItemContextValue } from './roving-focus-group-item-context.types';
+/**
+ * Provides the context for the `RovingFocusGroup.Item` component, allowing descendant
+ * components to access readonly signals without prop drilling.
+ */
+export declare const RovingFocusGroupItemContext: import("@qwik.dev/core").ContextId<RovingFocusGroupItemContextValue>;

package/lib/components/roving-focus-group/contexts/roving-focus-group-item-context/roving-focus-group-item-context.qwik.mjs

@@ -0,0 +1,5 @@
+import { createContextId } from "@qwik.dev/core";
+const RovingFocusGroupItemContext = createContextId("entry-ui-qwik-roving-focus-group-item-context");
+export {
+  RovingFocusGroupItemContext
+};

package/lib/components/roving-focus-group/contexts/roving-focus-group-item-context/roving-focus-group-item-context.types.d.ts

@@ -0,0 +1,22 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value provided by the `RovingFocusGroupItemContext` context.
+ * Contains the readonly signals shared with descendant components.
+ */
+export interface RovingFocusGroupItemContextValue {
+    /**
+     * A readonly signal whose value is the unique identifier for the specific roving focus item.
+     * This ID is used to track and manage the item's active state within the group.
+     */
+    tabStopId: ReadonlySignal<string>;
+    /**
+     * A readonly signal whose value indicates whether this specific item is currently the active tab stop.
+     * When `true`, the item's `tabIndex` is set to `0`, allowing it to receive keyboard focus.
+     */
+    active: ReadonlySignal<boolean>;
+    /**
+     * A readonly signal specifying if the item is capable of receiving focus.
+     * When `false`, the item is skipped during navigation and cannot be activated by the user.
+     */
+    focusable: ReadonlySignal<boolean>;
+}

package/lib/components/roving-focus-group/contexts/roving-focus-group-root-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { RovingFocusGroupRootContextValue } from './roving-focus-group-root-context.types';
+export { RovingFocusGroupRootContext, useRovingFocusGroupRootContext } from './roving-focus-group-root-context';

package/lib/components/roving-focus-group/contexts/roving-focus-group-root-context/roving-focus-group-root-context.d.ts

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

package/lib/components/roving-focus-group/contexts/roving-focus-group-root-context/roving-focus-group-root-context.qwik.mjs

@@ -0,0 +1,10 @@
+import { createContextId, useContext } from "@qwik.dev/core";
+const RovingFocusGroupRootContext = createContextId("entry-ui-qwik-roving-focus-group-root-context");
+const useRovingFocusGroupRootContext = () => {
+  const context = useContext(RovingFocusGroupRootContext);
+  return context;
+};
+export {
+  RovingFocusGroupRootContext,
+  useRovingFocusGroupRootContext
+};

package/lib/components/roving-focus-group/contexts/roving-focus-group-root-context/roving-focus-group-root-context.types.d.ts

@@ -0,0 +1,37 @@
+import type { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * The value provided by the `RovingFocusGroupRootContext` context.
+ * Contains the readonly signals and `QRL` functions shared with descendant components.
+ */
+export interface RovingFocusGroupRootContextValue {
+    /**
+     * A readonly signal whose value is a string representing the ID of the item that is currently active.
+     * This signal reflects the internal state of which item within the group holds the tab stop.
+     */
+    currentTabStopId: ReadonlySignal<string>;
+    /**
+     * A `QRL` function used to programmatically set the active tab stop.
+     * This function takes a string representing the ID of the item that should become focusable.
+     */
+    setCurrentTabStopId$: QRL<(tabStopId: string) => void>;
+    /**
+     * A `QRL` function that retrieves an ordered array of focusable HTML elements within the group.
+     * This is used to calculate the next or previous item during keyboard navigation, filtering out disabled elements.
+     */
+    getItems$: QRL<() => HTMLElement[]>;
+    /**
+     * A readonly signal indicating whether the keyboard navigation should wrap around
+     * when reaching the first or last item in the group.
+     */
+    loopFocus: ReadonlySignal<boolean>;
+    /**
+     * A readonly signal representing the reading direction of the group.
+     * This affects how horizontal arrow keys navigate through the items.
+     */
+    dir: ReadonlySignal<'ltr' | 'rtl'>;
+    /**
+     * A readonly signal specifying the allowed navigation axes.
+     * It determines whether the group responds to horizontal, vertical, or both sets of arrow keys.
+     */
+    orientation: ReadonlySignal<'horizontal' | 'vertical' | 'both'>;
+}

package/lib/components/roving-focus-group/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-roving-focus-group-root-context';
+export * from './use-roving-focus-group-item-context';

package/lib/components/roving-focus-group/hooks/use-roving-focus-group-item-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseRovingFocusGroupItemContextReturnValue } from './use-roving-focus-group-item-context.types';
+export { useRovingFocusGroupItemContext } from './use-roving-focus-group-item-context';

package/lib/components/roving-focus-group/hooks/use-roving-focus-group-item-context/use-roving-focus-group-item-context.d.ts

@@ -0,0 +1,7 @@
+import type { UseRovingFocusGroupItemContextReturnValue } from './use-roving-focus-group-item-context.types';
+/**
+ * A hook that provides access to the `RovingFocusGroup.Item` component's internal state.
+ * It exposes readonly signals that allow descendant components to react to the item's
+ * active state, its identifier, and whether it is currently focusable within the group.
+ */
+export declare const useRovingFocusGroupItemContext: () => UseRovingFocusGroupItemContextReturnValue;

package/lib/components/roving-focus-group/hooks/use-roving-focus-group-item-context/use-roving-focus-group-item-context.qwik.mjs

@@ -0,0 +1,13 @@
+import { useContext } from "@qwik.dev/core";
+import { RovingFocusGroupItemContext } from "../../contexts/roving-focus-group-item-context/roving-focus-group-item-context.qwik.mjs";
+const useRovingFocusGroupItemContext = () => {
+  const { tabStopId, active, focusable } = useContext(RovingFocusGroupItemContext);
+  return {
+    tabStopId,
+    active,
+    focusable
+  };
+};
+export {
+  useRovingFocusGroupItemContext
+};

package/lib/components/roving-focus-group/hooks/use-roving-focus-group-item-context/use-roving-focus-group-item-context.types.d.ts

@@ -0,0 +1,22 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value returned by the `useRovingFocusGroupItemContext` hook.
+ * Provides access to the roving focus item's readonly signals for descendant components.
+ */
+export interface UseRovingFocusGroupItemContextReturnValue {
+    /**
+     * A readonly signal whose value is the unique identifier for the specific roving focus item.
+     * This ID is used to track and manage the item's active state within the group.
+     */
+    tabStopId: ReadonlySignal<string>;
+    /**
+     * A readonly signal whose value indicates whether this specific item is currently the active tab stop.
+     * When `true`, the item's `tabIndex` is set to `0`, allowing it to receive keyboard focus.
+     */
+    active: ReadonlySignal<boolean>;
+    /**
+     * A readonly signal specifying if the item is capable of receiving focus.
+     * When `false`, the item is skipped during navigation and cannot be activated by the user.
+     */
+    focusable: ReadonlySignal<boolean>;
+}

package/lib/components/roving-focus-group/hooks/use-roving-focus-group-root-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseRovingFocusGroupRootContextReturnValue } from './use-roving-focus-group-root-context.types';
+export { useRovingFocusGroupRootContext } from './use-roving-focus-group-root-context';

package/lib/components/roving-focus-group/hooks/use-roving-focus-group-root-context/use-roving-focus-group-root-context.d.ts

@@ -0,0 +1,8 @@
+import type { UseRovingFocusGroupRootContextReturnValue } from './use-roving-focus-group-root-context.types';
+/**
+ * A hook that provides access to the `RovingFocusGroup.Root` component's internal state.
+ * It exposes readonly signals and a `QRL` function to interact with the roving focus state,
+ * allowing descendant components to synchronize with or programmatically control
+ * which item currently holds the tab stop and is eligible for focus.
+ */
+export declare const useRovingFocusGroupRootContext: () => UseRovingFocusGroupRootContextReturnValue;

package/lib/components/roving-focus-group/hooks/use-roving-focus-group-root-context/use-roving-focus-group-root-context.qwik.mjs

@@ -0,0 +1,13 @@
+import { useContext } from "@qwik.dev/core";
+import { RovingFocusGroupRootContext } from "../../contexts/roving-focus-group-root-context/roving-focus-group-root-context.qwik.mjs";
+const useRovingFocusGroupRootContext = () => {
+  const { currentTabStopId, setCurrentTabStopId$, orientation } = useContext(RovingFocusGroupRootContext);
+  return {
+    currentTabStopId,
+    setCurrentTabStopId$,
+    orientation
+  };
+};
+export {
+  useRovingFocusGroupRootContext
+};

package/lib/components/roving-focus-group/hooks/use-roving-focus-group-root-context/use-roving-focus-group-root-context.types.d.ts

@@ -0,0 +1,22 @@
+import type { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * The value returned by the `useRovingFocusGroupRootContext` hook.
+ * Provides access to the roving focus group's readonly signals and `QRL` function for descendant components.
+ */
+export interface UseRovingFocusGroupRootContextReturnValue {
+    /**
+     * A readonly signal whose value is a string representing the ID of the item that is currently active.
+     * This signal reflects the internal state of which item within the group holds the tab stop.
+     */
+    currentTabStopId: ReadonlySignal<string>;
+    /**
+     * A `QRL` function used to programmatically set the active tab stop.
+     * This function takes a string representing the ID of the item that should become focusable.
+     */
+    setCurrentTabStopId$: QRL<(tabStopId: string) => void>;
+    /**
+     * A readonly signal specifying the allowed navigation axes.
+     * It determines whether the group responds to horizontal, vertical, or both sets of arrow keys.
+     */
+    orientation: ReadonlySignal<'horizontal' | 'vertical' | 'both'>;
+}

package/lib/components/roving-focus-group/index.d.ts

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

package/lib/components/roving-focus-group/index.qwik.mjs

@@ -0,0 +1,8 @@
+import * as index from "./parts/index.qwik.mjs";
+import { useRovingFocusGroupRootContext } from "./hooks/use-roving-focus-group-root-context/use-roving-focus-group-root-context.qwik.mjs";
+import { useRovingFocusGroupItemContext } from "./hooks/use-roving-focus-group-item-context/use-roving-focus-group-item-context.qwik.mjs";
+export {
+  index as RovingFocusGroup,
+  useRovingFocusGroupItemContext,
+  useRovingFocusGroupRootContext
+};

package/lib/components/roving-focus-group/parts/index.d.ts

@@ -0,0 +1,4 @@
+export type { RovingFocusGroupRootProps as RootProps } from './roving-focus-group-root';
+export type { RovingFocusGroupItemProps as ItemProps } from './roving-focus-group-item';
+export { RovingFocusGroupRoot as Root } from './roving-focus-group-root';
+export { RovingFocusGroupItem as Item } from './roving-focus-group-item';

package/lib/components/roving-focus-group/parts/index.qwik.mjs

@@ -0,0 +1,6 @@
+import { RovingFocusGroupRoot } from "./roving-focus-group-root/roving-focus-group-root.qwik.mjs";
+import { RovingFocusGroupItem } from "./roving-focus-group-item/roving-focus-group-item.qwik.mjs";
+export {
+  RovingFocusGroupItem as Item,
+  RovingFocusGroupRoot as Root
+};

package/lib/components/roving-focus-group/parts/roving-focus-group-item/index.d.ts

@@ -0,0 +1,2 @@
+export type { RovingFocusGroupItemProps } from './roving-focus-group-item.types';
+export { RovingFocusGroupItem } from './roving-focus-group-item';

package/lib/components/roving-focus-group/parts/roving-focus-group-item/roving-focus-group-item.d.ts

@@ -0,0 +1,7 @@
+import type { RovingFocusGroupItemProps } from './roving-focus-group-item.types';
+/**
+ * An individual item within the roving focus group.
+ *
+ * Renders a `<div>` element.
+ */
+export declare const RovingFocusGroupItem: import("@qwik.dev/core").Component<RovingFocusGroupItemProps>;