fix: moved useId outside fo template

Author: shairez

packages/kit-headless/src/components/tabs/tabs.tsx

@@ -134,9 +134,11 @@ export const Tab = component$(
       }
     });
 
+    const uniqueId = useId();
+
     return (
       <button
-        id={useId()}
+        id={uniqueId}
         type="button"
         role="tab"
         onFocus$={selectIfAutomatic}
@@ -173,9 +175,10 @@ export const TabPanel = component$(({ ...props }: TabPanelProps) => {
   useVisibleTask$(async () => {
     thisPanelIndex.value = await contextService.getNextPanelIndex();
   });
+  const uniqueId = useId();
   return (
     <div
-      id={useId()}
+      id={uniqueId}
       role="tabpanel"
       tabIndex={0}
       aria-labelledby={`tab-${thisPanelIndex}`}

temporary/docs/carousel/example-netflix.tsx

@@ -28,7 +28,7 @@ const media = {
 
 export const ExampleNetflix = component$(() => {
   const { scopeId } = useStylesScoped$(styles);
-  const items = useSignal([...new Array(10)]);
+  const items = useSignal([...new Array(10)].map((_, i) => i));
   const carousel = useCarousel({ loop: false, transition: 350, startAt: 3 });
 
   return (
@@ -42,9 +42,9 @@ export const ExampleNetflix = component$(() => {
 
       <Root use={carousel}>
         <Items class={[scopeId, 'qui-carousel']}>
-          {items.value.map((_, i) => (
+          {items.value.map((val, i) => (
             <Item
-              key={useId()}
+              key={val}
               index={i}
               label={media.title}
               class={[scopeId, 'carousel__card']}