fix: dynamic accordions now get proper index

Author: thejackshelton

apps/website/src/routes/docs/headless/modal/index.mdx

@@ -259,6 +259,8 @@ Unfortunately, to create modals that open on page load in the web, it needs to b
 
 ## API
 
+### Modal.Root
+
 <APITable
   propDescriptors={[
     {
@@ -273,20 +275,13 @@ Unfortunately, to create modals that open on page load in the web, it needs to b
       description: 'A way to tell the modal to not hide when the ::backdrop is clicked.',
     },
     {
-      name: '<dialog>-Attributes',
-      type: `Qwik`,
-      description:
-        'A way to configure the modal with all native attributes the HTMLDialog defines.',
-      info: `PropsOf<'dialog'>`,
-    },
-    {
-      name: 'onClose()$',
+      name: 'onClose$',
       type: 'function',
       info: '() => void',
       description: 'An event hook that gets notified whenever the modal gets closed.',
     },
     {
-      name: 'onShow()$',
+      name: 'onShow$',
       type: 'function',
       info: '() => void',
       description: 'An event hook that gets notified whenever the modal shows up.',

packages/kit-headless/src/components/accordion/accordion-item.tsx

@@ -2,6 +2,7 @@ import {
   PropsOf,
   Slot,
   component$,
+  useComputed$,
   useContext,
   useContextProvider,
   useId,
@@ -26,22 +27,26 @@ export const HAccordionItem = component$(
     const context = useContext(accordionContextId);
     const localId = useId();
     const itemId = id ?? localId + '-item';
-    const localIndexSig = useSignal<number>(_index!);
+
+    // gets the index dynamically
+    const localIndexSig = useComputed$(() => {
+      return _index ?? -1;
+    });
+
     const isOpenSig = useSignal<boolean>(context.initialIndex === localIndexSig.value);
     const initialLoadSig = useSignal<boolean>(true);
     const triggerRef = useSignal<HTMLButtonElement>(null as unknown as HTMLButtonElement);
 
     useTask$(function internalState({ track }) {
       track(() => context.selectedIndexSig.value);
 
-      // collect trigger refs for keyboard navigation
-      context.triggerRefsArray.value[localIndexSig.value] = triggerRef;
-
       if (context.multiple || isServer) return;
 
       if (context.selectedIndexSig.value !== localIndexSig.value) {
         isOpenSig.value = false;
       } else {
+        // never executes when first item is opened, then new item added, then new first item opened
+
         // onChange$ behavior - called once when the value changes
         if (!initialLoadSig.value && value && context.onChange$) {
           context.onChange$(value);
@@ -67,6 +72,13 @@ export const HAccordionItem = component$(
       }
     });
 
+    useTask$(({ track }) => {
+      track(() => localIndexSig.value);
+
+      // collect trigger refs for keyboard navigation
+      context.triggerRefsArray.value[localIndexSig.value] = triggerRef;
+    });
+
     useTask$(() => {
       initialLoadSig.value = false;
     });