[Bug]:

[eurairapelli]

What Happened

Hello,

I create a new project
In this project i used x-bar (not used in other mine)

Give this error when i click, use menu:
livewire.js?id=698c71c1:5649 Uncaught (in promise) Alpine: no element provided to x-anchor...

app-layout:

<title>{{ config('app.name', 'Laravel') }}</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

<tallstackui:script />
<!-- Favicon and theme color -->
<link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
<meta name="theme-color" content="#7C3AED">
@livewireStyles
@vite(['resources/css/app.css', 'resources/js/app.js'])

            </x-slot:left>
            <x-slot:right>
      
            </x-slot:right>
        </x-layout.header>
    </x-slot:header>
    <x-slot:menu>
        <x-side-bar smart navigate collapsible>
            <x-slot:brand>
                <div class="mt-8 flex items-center justify-center">
                    
                </div>
            </x-slot:brand>
            <x-side-bar.item text="{{ __('Home') }}" icon="home" :route="route('dashboard')" />

            <x-side-bar.separator text="{{ __('Registrations') }}" line />
            @if (in_array('client:view', Auth::user()->permissions ?? []))
                <x-side-bar.item text="{{ __('Clients') }}" icon="user-group" :route="route('clients.index')" />
            @endif
          
        </x-side-bar>

    </x-slot:menu>
    {{ $slot }}

</x-layout>
@livewireScripts
@stack('scripts')

Component

Alert

How to Reproduce

app-layout:

<title>{{ config('app.name', 'Laravel') }}</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

<tallstackui:script />
<!-- Favicon and theme color -->
<link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
<meta name="theme-color" content="#7C3AED">
@livewireStyles
@vite(['resources/css/app.css', 'resources/js/app.js'])

            </x-slot:left>
            <x-slot:right>
      
            </x-slot:right>
        </x-layout.header>
    </x-slot:header>
    <x-slot:menu>
        <x-side-bar smart navigate collapsible>
            <x-slot:brand>
                <div class="mt-8 flex items-center justify-center">
                    
                </div>
            </x-slot:brand>
            <x-side-bar.item text="{{ __('Home') }}" icon="home" :route="route('dashboard')" />

            <x-side-bar.separator text="{{ __('Registrations') }}" line />
            @if (in_array('client:view', Auth::user()->permissions ?? []))
                <x-side-bar.item text="{{ __('Clients') }}" icon="user-group" :route="route('clients.index')" />
            @endif
          
        </x-side-bar>

    </x-slot:menu>
    {{ $slot }}

</x-layout>
@livewireScripts
@stack('scripts')

"require": {
    "php": "^8.2",
    "laravel/framework": "^12.0",
    "laravel/tinker": "^2.10.1",
    "livewire/livewire": "^4.2",
    "tallstackui/tallstackui": "3.0.0"    },

with Zend OPcache v8.3.7, Copyright (c), by Zend Technologies

Public Repository

No response

Laravel Version

12

Livewire Version

4.2

TallStackUI Version

3

PHP Version

8.3.7

Operation System

Windows

Notes

For solve (IA change this):
web\vendor\tallstackui\tallstackui\src\resources\views\components\floating\main.blade.php

File complete: @php $customization = $classes();

@endphp

whereStartsWith('x-on') }} @if (!$ts_ui__flash) @if (count($attributes->whereStartsWith('x-transition')->getAttributes()) === 0 || $transition?->isEmpty()) x-transition:enter="transition duration-100 ease-out" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2" @elseif ($transition?->isNotEmpty()) {{ $transition }} @else {!! $attributes->except(['x-show', 'x-anchor', 'class']) !!} @endif @endif x-effect="if ({{ $attributes->get('x-show', 'show') }}) $nextTick(() => { let anchor = ({{ $attributes->get('x-anchor', '$refs.anchor') }}) || $refs.button || $refs.anchor || null; if (anchor && $el.classList.contains('w-full')) $el.style.width = anchor.offsetWidth + 'px' })" {{ $attributes->except(['floating', 'x-anchor'])->merge(['class' => $attributes->get('floating', $customization['wrapper']), 'data-floating' => true]) }}> {{ $slot }} {{ $footer }}

File OLDER:
@php
$customization = $classes();
@endphp

whereStartsWith('x-on') }} @if (!$ts_ui__flash) @if (count($attributes->whereStartsWith('x-transition')->getAttributes()) === 0 || $transition?->isEmpty()) x-transition:enter="transition duration-100 ease-out" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2" @elseif ($transition?->isNotEmpty()) {{ $transition }} @else {!! $attributes->except(['x-show', 'x-anchor', 'class']) !!} @endif @endif x-init="(() => { const anchor = (() => { try { return {{ $attributes->get('x-anchor', '$refs.anchor') }} } catch(e) { return null } })(); if ($el.classList.contains('w-full') && anchor) { $watch('{{ $attributes->get('x-show', 'show') }}', v => { if (v) $nextTick(() => $el.style.width = anchor.offsetWidth + 'px') }); let _r; new MutationObserver(() => { cancelAnimationFrame(_r); _r = requestAnimationFrame(() => $el.style.width = anchor.offsetWidth + 'px') }).observe($el, { childList: true, subtree: true }) } if (anchor) { const overlay = anchor.closest('[x-data*=tallstackui_modal], [x-data*=tallstackui_slide]'); if (overlay) overlay.addEventListener('close', () => {{ $attributes->get('x-show', 'show') }} = false) } })()" {{ $attributes->except(['floating', 'x-anchor'])->merge(['class' => $attributes->get('floating', $customization['wrapper']), 'data-floating' => true]) }}> {{ $slot }} {{ $footer }}

[eurairapelli]

Can closed the topic.
I've updated for tallstackui 3.1.1 and solved.
I back the file main.blade

Thanks
I found the notes updates (floating error in github)