diff --git a/packages/oruga/src/components/carousel/Carousel.vue b/packages/oruga/src/components/carousel/Carousel.vue
index e0eb94f41..b70011ab1 100644
--- a/packages/oruga/src/components/carousel/Carousel.vue
+++ b/packages/oruga/src/components/carousel/Carousel.vue
@@ -88,6 +88,7 @@ function restartTimer(): void {
     startTimer();
 }
 
+// provided data is a computed ref to enjure reactivity
 const provideData = computed<CarouselComponent>(() => ({
     restartTimer,
     itemWidth: itemWidth.value,
@@ -96,8 +97,8 @@ const provideData = computed<CarouselComponent>(() => ({
     setActive: (index: number): void => switchTo(index),
 }));
 
-/** Provide functionalities and data to child item components */
-const { childItems } = useProviderParent(rootRef, { data: provideData });
+/** provide functionalities and data to child item components */
+const { childItems } = useProviderParent({ rootRef, data: provideData });
 
 const activeIndex = defineModel<number>({ default: 0 });
 const scrollIndex = ref(props.modelValue);
@@ -471,6 +472,7 @@ function indicatorItemAppliedClasses(index: number): ClassBind[] {
                 -->
                 <slot />
             </div>
+
             <!--
                 @slot Override the arrows
                 @binding {boolean} has-prev has prev arrow button 
@@ -545,6 +547,7 @@ function indicatorItemAppliedClasses(index: number): ClassBind[] {
                 </div>
             </template>
         </slot>
+
         <template v-if="overlay">
             <!-- @slot Overlay element -->
             <slot name="overlay" />
diff --git a/packages/oruga/src/components/carousel/CarouselItem.vue b/packages/oruga/src/components/carousel/CarouselItem.vue
index 39a801a69..ce0eb859e 100644
--- a/packages/oruga/src/components/carousel/CarouselItem.vue
+++ b/packages/oruga/src/components/carousel/CarouselItem.vue
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<CarouselItemProps>(), {
     ariaRole: () => getDefault("carousel.ariaRole", "option"),
 });
 
-// Inject functionalities and data from the parent carousel component
+/** inject functionalities and data from the parent component */
 const { parent, item } = useProviderChild<CarouselComponent>();
 
 const isActive = computed(() => parent.value.activeIndex === item.value.index);
@@ -54,8 +54,8 @@ const itemClasses = defineClasses(
         v-if="parent"
         :class="itemClasses"
         :style="itemStyle"
-        :data-id="`carousel-${item.identifier}`"
         data-oruga="carousel-item"
+        :data-id="`carousel-${item.identifier}`"
         :role="ariaRole"
         aria-roledescription="item"
         :aria-selected="isActive"
diff --git a/packages/oruga/src/components/dropdown/Dropdown.vue b/packages/oruga/src/components/dropdown/Dropdown.vue
index df2b0a54d..a8baa1bc0 100644
--- a/packages/oruga/src/components/dropdown/Dropdown.vue
+++ b/packages/oruga/src/components/dropdown/Dropdown.vue
@@ -343,7 +343,7 @@ function selectItem(value: T): void {
     }
 }
 
-// Provided data is a computed ref to enjure reactivity.
+// provided data is a computed ref to enjure reactivity
 const provideData = computed<DropdownComponent<T>>(() => ({
     disabled: props.disabled,
     multiple: isTrueish(props.multiple),
@@ -351,8 +351,8 @@ const provideData = computed<DropdownComponent<T>>(() => ({
     selectItem,
 }));
 
-/** Provide functionalities and data to child item components */
-useProviderParent(contentRef, { data: provideData });
+/** provide functionalities and data to child item components */
+useProviderParent({ data: provideData });
 
 // --- Computed Component Classes ---
 
diff --git a/packages/oruga/src/components/dropdown/DropdownItem.vue b/packages/oruga/src/components/dropdown/DropdownItem.vue
index 5b30d9b97..3a7569ab6 100644
--- a/packages/oruga/src/components/dropdown/DropdownItem.vue
+++ b/packages/oruga/src/components/dropdown/DropdownItem.vue
@@ -39,8 +39,8 @@ const emits = defineEmits<{
     click: [value: T, event: Event];
 }>();
 
-// Inject functionalities and data from the parent component
-const { parent } = useProviderChild<DropdownComponent<T>>();
+/** inject functionalities and data from the parent component */
+const { parent, item } = useProviderChild<DropdownComponent<T>>();
 
 const isClickable = computed(
     () => !parent.value.disabled && !props.disabled && props.clickable,
@@ -81,12 +81,14 @@ const rootClasses = defineClasses(
     <component
         :is="tag"
         :class="rootClasses"
+        data-oruga="dropdown-item"
+        :data-id="`dropdown-${item.identifier}`"
         :role="ariaRole"
         :tabindex="tabindex"
-        data-oruga="dropdown-item"
         :aria-selected="isActive"
         :aria-disabled="disabled"
-        @click="selectItem">
+        @click="selectItem"
+        @keypress.enter="selectItem">
         <!--
             @slot Override the label, default is label prop 
         -->
diff --git a/packages/oruga/src/components/menu/Menu.vue b/packages/oruga/src/components/menu/Menu.vue
index 684578a9f..951db9755 100644
--- a/packages/oruga/src/components/menu/Menu.vue
+++ b/packages/oruga/src/components/menu/Menu.vue
@@ -46,7 +46,8 @@ const provideData = computed<MenuComponent>(() => ({
 }));
 
 /** provide functionalities and data to child item components */
-const { childItems } = useProviderParent<MenuItemComponent>(rootRef, {
+const { childItems } = useProviderParent<MenuItemComponent>({
+    rootRef,
     data: provideData,
 });
 
diff --git a/packages/oruga/src/components/menu/MenuItem.vue b/packages/oruga/src/components/menu/MenuItem.vue
index d19f788de..970c91d60 100644
--- a/packages/oruga/src/components/menu/MenuItem.vue
+++ b/packages/oruga/src/components/menu/MenuItem.vue
@@ -60,12 +60,12 @@ const providedData = computed<MenuItemComponent>(() => ({
     reset,
 }));
 
-// inject functionalities and data from the parent menu component
+/** inject functionalities and data from the parent menu component */
 const { parent, item } = useProviderChild<MenuComponent, MenuItemComponent>({
     data: providedData,
 });
 
-// inject functionalities and data from the parent menu-item component
+/** inject functionalities and data from the parent menu-item component */
 const providedItem = useProviderChild<MenuItemProvider>({
     key: "menu-item",
     needParent: false,
@@ -114,7 +114,7 @@ const provideData = computed<MenuItemProvider>(() => ({
 }));
 
 /** provide functionalities and data to child item components */
-useProviderParent(rootRef, { key: "menu-item", data: provideData });
+useProviderParent({ rootRef, key: "menu-item", data: provideData });
 
 // --- Computed Component Classes ---
 
@@ -148,8 +148,8 @@ const submenuClasses = defineClasses([
         ref="rootElement"
         :role="ariaRole"
         :class="itemClasses"
-        :data-id="identifier"
         data-oruga="menu-item"
+        :data-id="identifier"
         aria-roledescription="item">
         <component
             :is="tag"
diff --git a/packages/oruga/src/components/slider/Slider.vue b/packages/oruga/src/components/slider/Slider.vue
index d0781df2d..94341a506 100644
--- a/packages/oruga/src/components/slider/Slider.vue
+++ b/packages/oruga/src/components/slider/Slider.vue
@@ -75,14 +75,14 @@ const sliderRef = useTemplateRef("sliderElement");
 const thumbStartRef = useTemplateRef("thumbStartComponent");
 const thumbEndRef = useTemplateRef("thumbEndComponent");
 
-// Provided data is a computed ref to enjure reactivity.
+// provided data is a computed ref to enjure reactivity
 const provideData = computed<SliderComponent>(() => ({
     max: props.max,
     min: props.min,
 }));
 
-/** Provide functionalities and data to child item components */
-useProviderParent(undefined, { data: provideData });
+/** provide functionalities and data to child item components */
+useProviderParent({ data: provideData });
 
 const valueStart = ref<number>(0);
 const valueEnd = ref<number>(0);
diff --git a/packages/oruga/src/components/slider/SliderTick.vue b/packages/oruga/src/components/slider/SliderTick.vue
index 005cf7508..5fb9f8896 100644
--- a/packages/oruga/src/components/slider/SliderTick.vue
+++ b/packages/oruga/src/components/slider/SliderTick.vue
@@ -37,8 +37,8 @@ const props = defineProps({
     },
 });
 
-// Inject functionalities and data from the parent carousel component
-const { parent } = useProviderChild<SliderComponent>();
+/** inject functionalities and data from the parent component */
+const { parent } = useProviderChild<SliderComponent>({ register: false });
 
 const position = computed(() => {
     const pos =
diff --git a/packages/oruga/src/components/steps/StepItem.vue b/packages/oruga/src/components/steps/StepItem.vue
index 41f138981..1928f6e9b 100644
--- a/packages/oruga/src/components/steps/StepItem.vue
+++ b/packages/oruga/src/components/steps/StepItem.vue
@@ -47,6 +47,7 @@ const itemValue = props.value || useId();
 
 const slots = useSlots();
 
+// provided data is a computed ref to enjure reactivity
 const providedData = computed<StepItemComponent<T>>(() => ({
     ...props,
     value: itemValue,
@@ -60,7 +61,7 @@ const providedData = computed<StepItemComponent<T>>(() => ({
     deactivate,
 }));
 
-// inject functionalities and data from the parent carousel component
+/** inject functionalities and data from the parent component */
 const { parent, item } = useProviderChild<StepsComponent>({
     data: providedData,
 });
@@ -180,8 +181,8 @@ const panelClasses = defineClasses(["stepPanelClass", "o-steps__panel"]);
             v-bind="$attrs"
             :id="`tabpanel-${item.identifier}`"
             :class="panelClasses"
-            :data-id="`steps-${item.identifier}`"
             data-oruga="steps-item"
+            :data-id="`steps-${item.identifier}`"
             :aria-labelledby="`tab-${item.identifier}`"
             aria-roledescription="item">
             <template v-if="!parent.destroyOnHide || (isActive && visible)">
diff --git a/packages/oruga/src/components/steps/Steps.vue b/packages/oruga/src/components/steps/Steps.vue
index b0fdcceca..a1c0a1271 100644
--- a/packages/oruga/src/components/steps/Steps.vue
+++ b/packages/oruga/src/components/steps/Steps.vue
@@ -89,7 +89,7 @@ const rootRef = useTemplateRef("rootElement");
 /** The selected item value, use v-model to make it two-way binding */
 const vmodel = defineModel<ModelValue>({ default: undefined });
 
-// Provided data is a computed ref to enjure reactivity.
+// provided data is a computed ref to enjure reactivity
 const provideData = computed<StepsComponent>(() => ({
     activeIndex: activeItem.value?.index || 0,
     labelPosition: props.labelPosition,
@@ -101,10 +101,10 @@ const provideData = computed<StepsComponent>(() => ({
     variant: props.variant,
 }));
 
-/** Provide functionalities and data to child item components */
-const { childItems } = useProviderParent<StepItemComponent<T>>(rootRef, {
+/** provide functionalities and data to child item components */
+const { childItems } = useProviderParent<StepItemComponent<T>>({
+    rootRef,
     data: provideData,
-    sorted: true,
 });
 
 const items = computed<StepItem<T>[]>(() => {
diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
index e4ddf8417..c808f7317 100644
--- a/packages/oruga/src/components/table/Table.vue
+++ b/packages/oruga/src/components/table/Table.vue
@@ -352,9 +352,9 @@ const provideData = computed<TableComponent>(() => ({
 }));
 
 /** provide functionalities and data to child item components */
-const { childItems } = useProviderParent<TableColumnComponent<T>>(slotRef, {
+const { childItems } = useProviderParent<TableColumnComponent<T>>({
+    rootRef: slotRef,
     data: provideData,
-    sorted: true,
 });
 
 /** all defined columns */
diff --git a/packages/oruga/src/components/table/TableColumn.vue b/packages/oruga/src/components/table/TableColumn.vue
index 597d0dfff..49fd210e9 100644
--- a/packages/oruga/src/components/table/TableColumn.vue
+++ b/packages/oruga/src/components/table/TableColumn.vue
@@ -45,6 +45,7 @@ const isHeaderUnselectable = computed(
 
 const vm = getCurrentInstance();
 
+// provided data is a computed ref to enjure reactivity
 const providedData = computed<TableColumnComponent<T>>(() => ({
     ...props,
     $el: vm!.proxy!,
@@ -54,6 +55,7 @@ const providedData = computed<TableColumnComponent<T>>(() => ({
     tdClasses: tdClasses.value,
 }));
 
+/** inject functionalities and data from the parent component */
 const { parent, item } = useProviderChild<TableComponent>({
     data: providedData,
 });
@@ -120,7 +122,7 @@ const filters = {} as Record<string, string>;
 </script>
 
 <template>
-    <span :data-id="item.identifier" data-oruga="table-column">
+    <span data-oruga="table-column" :data-id="item.identifier">
         {{ label }}
 
         <!--
diff --git a/packages/oruga/src/components/tabs/TabItem.vue b/packages/oruga/src/components/tabs/TabItem.vue
index e8aaf8a73..f53beaef1 100644
--- a/packages/oruga/src/components/tabs/TabItem.vue
+++ b/packages/oruga/src/components/tabs/TabItem.vue
@@ -44,6 +44,7 @@ const itemValue = props.value || useId();
 
 const slots = useSlots();
 
+// provided data is a computed ref to enjure reactivity
 const providedData = computed<TabItemComponent<T>>(() => ({
     ...props,
     value: itemValue,
@@ -57,7 +58,7 @@ const providedData = computed<TabItemComponent<T>>(() => ({
     deactivate,
 }));
 
-// Inject functionalities and data from the parent component
+/** inject functionalities and data from the parent component */
 const { parent, item } = useProviderChild<TabsComponent>({
     data: providedData,
 });
@@ -164,8 +165,8 @@ const panelClasses = defineClasses(["tabPanelClass", "o-tabs__panel"]);
             v-bind="$attrs"
             :id="`tabpanel-${item.identifier}`"
             :class="panelClasses"
-            :data-id="`tabs-${item.identifier}`"
             data-oruga="tabs-item"
+            :data-id="`tabs-${item.identifier}`"
             :aria-labelledby="`tab-${item.identifier}`"
             aria-roledescription="item">
             <template v-if="!parent.destroyOnHide || (isActive && visible)">
diff --git a/packages/oruga/src/components/tabs/Tabs.vue b/packages/oruga/src/components/tabs/Tabs.vue
index 652aad922..89e2590f5 100644
--- a/packages/oruga/src/components/tabs/Tabs.vue
+++ b/packages/oruga/src/components/tabs/Tabs.vue
@@ -81,7 +81,7 @@ const rootRef = useTemplateRef("rootElement");
 /** The selected item value, use v-model to make it two-way binding */
 const vmodel = defineModel<ModelValue>({ default: undefined });
 
-// Provided data is a computed ref to enjure reactivity.
+// provided data is a computed ref to enjure reactivity
 const provideData = computed<TabsComponent>(() => ({
     activeIndex: activeItem.value?.index || 0,
     type: props.type,
@@ -92,10 +92,10 @@ const provideData = computed<TabsComponent>(() => ({
     destroyOnHide: props.destroyOnHide,
 }));
 
-/** Provide functionalities and data to child item components */
-const { childItems } = useProviderParent<TabItemComponent<T>>(rootRef, {
+/** provide functionalities and data to child item components */
+const { childItems } = useProviderParent<TabItemComponent<T>>({
+    rootRef,
     data: provideData,
-    sorted: true,
 });
 
 const items = computed<TabItem<T>[]>(() => {
diff --git a/packages/oruga/src/composables/useParentProvider.ts b/packages/oruga/src/composables/useParentProvider.ts
index ff6e63210..75d3257b2 100644
--- a/packages/oruga/src/composables/useParentProvider.ts
+++ b/packages/oruga/src/composables/useParentProvider.ts
@@ -27,6 +27,10 @@ type PovidedData<P, I = unknown> = {
 };
 
 type ProviderParentOptions<T = unknown> = {
+    /**
+     * Root element of the provider component
+     */
+    rootRef?: MaybeRefOrGetter<HTMLElement | Component | null | undefined>;
     /**
      * Override the provide/inject key.
      * Default is the component configField attribute
@@ -36,20 +40,13 @@ type ProviderParentOptions<T = unknown> = {
      * Additional data provided for the child to the item
      */
     data?: ComputedRef<T>;
-    /**
-     * When items are added/removed sort them according to their DOM position
-     */
-    sorted?: boolean;
 };
 
 /**
  * Provide functionalities and data to child components
- * @param rootRef Root element of the provider component
- * @param data Additional data to provide
- * @param options additional options
+ * @param options parent provider options
  */
 export function useProviderParent<ItemData = unknown, ParentData = unknown>(
-    rootRef?: MaybeRefOrGetter<HTMLElement | Component | null | undefined>,
     options?: ProviderParentOptions<ParentData>,
 ): {
     childItems: Ref<UnwrapNestedRefs<ProviderItem<ItemData>[]>>;
@@ -65,12 +62,11 @@ export function useProviderParent<ItemData = unknown, ParentData = unknown>(
     const key = options?.key || configField;
 
     const childItems = ref<ProviderItem<ItemData>[]>([]);
-    const sequence = ref(1);
 
-    if (options?.sorted) {
+    if (options?.rootRef) {
         // debounced sort function
         const sortHandler = useDebounce((items: typeof childItems.value) => {
-            const parent = unrefElement(rootRef);
+            const parent = unrefElement(options.rootRef);
             if (!parent) return;
 
             // create a list of child item ids
@@ -96,7 +92,8 @@ export function useProviderParent<ItemData = unknown, ParentData = unknown>(
             items.sort((a, b) => a.index - b.index);
         }, 500);
 
-        // watch change of the child list (no deep change - only list update)
+        // when child items are added/removed (no deep change - only list update)
+        // sort them according to their DOM position
         watch(childItems, sortHandler);
     }
 
@@ -118,8 +115,9 @@ export function useProviderParent<ItemData = unknown, ParentData = unknown>(
         childItems.value = childItems.value.filter((i) => i !== item);
     }
 
+    let sequence = 1;
     function nextSequence(): string {
-        return String(sequence.value++);
+        return String(sequence++);
     }
 
     /** Provide functionality for child components via dependency injection. */
@@ -157,21 +155,32 @@ type ProviderChildOptions<T = unknown> = {
 };
 
 export function useProviderChild<ParentData, ItemData = unknown>(
-    options?: Omit<ProviderChildOptions<ItemData>, "needParent" | "register">,
+    options: Omit<ProviderChildOptions<ItemData>, "needParent"> & {
+        needParent: true;
+    },
 ): {
     parent: Ref<ParentData>;
-    item: Ref<ProviderItem<ItemData>>;
+    item: Ref<ProviderItem<ItemData> | undefined>;
 };
 
 export function useProviderChild<ParentData, ItemData = unknown>(
-    options: Omit<ProviderChildOptions<ItemData>, "needParent" | "register"> & {
-        needParent: true;
+    options: Omit<ProviderChildOptions<ItemData>, "needParent"> & {
+        needParent: false;
     },
 ): {
-    parent: Ref<ParentData>;
+    parent: Ref<ParentData | undefined>;
     item: Ref<ProviderItem<ItemData> | undefined>;
 };
 
+export function useProviderChild<ParentData, ItemData = unknown>(
+    options: Omit<ProviderChildOptions<ItemData>, "needParent"> & {
+        register: false;
+    },
+): {
+    parent: Ref<ParentData>;
+    item: Ref<undefined>;
+};
+
 export function useProviderChild<ParentData, ItemData = unknown>(
     options: Omit<ProviderChildOptions<ItemData>, "needParent" | "register"> & {
         needParent: true;
@@ -183,12 +192,10 @@ export function useProviderChild<ParentData, ItemData = unknown>(
 };
 
 export function useProviderChild<ParentData, ItemData = unknown>(
-    options: Omit<ProviderChildOptions<ItemData>, "needParent"> & {
-        needParent?: false;
-    },
+    options?: Omit<ProviderChildOptions<ItemData>, "needParent">,
 ): {
-    parent: Ref<ParentData | undefined>;
-    item: Ref<ProviderItem<ItemData> | undefined>;
+    parent: Ref<ParentData>;
+    item: Ref<ProviderItem<ItemData>>;
 };
 
 /**