[Carousel] Unable to differentiate item sizes

[medz]

Environment

• Operating System: Darwin
• Node Version: v23.9.0
• Nuxt Version: 3.16.2
• CLI Version: 3.24.0
• Nitro Version: 2.11.8
• Package Manager: bun@1.2.9
• Builder: -
• User Config: compatibilityDate, devtools, future, modules, runtimeConfig, css, app, ui, icon, fonts, image, nitro, i18n
• Runtime Modules: @nuxt/ui@3.0.2, @nuxt/image@1.10.0, @nuxt/scripts@0.11.5, @nuxtjs/i18n@9.4.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.16.2

Reproduction

<script setup>
const items = [
    "https://picsum.photos/468/468?random=1",
    "https://picsum.photos/468/468?random=2",
    "https://picsum.photos/468/468?random=3",
    "https://picsum.photos/468/468?random=4",
    "https://picsum.photos/468/468?random=5",
    "https://picsum.photos/468/468?random=6",
];
</script>
<template>
<UCarousel
                    v-slot="{ item }"
                    wheel-gestures
                    class-names
                    :items="items"
                    :ui="{
                        item: 'basis-1/2 [&.is-snapped+*]:basis-1/3 [&.is-snapped+*+*]:basis-1/6',
                    }"
                    align="start"
                >
                    <img :src="item" class="w-full h-auto" />
                </UCarousel>
</template>

Description

Simulate the behavior of https://m3.material.io/components/carousel/overview, Carousel will repeatedly calculate is-snapped in an infinite loop

Additional context

No response

Logs

[medz]

Upstream bug 👉 davidjerleke/embla-carousel#1178 (comment)