feat: add new horizontal tabs navigation user experience (#18310)

* feat: Add none scrollable horizontal tab user experience

Introduces `isHorizontal` and `isScrollable` properties to the Tabs component, allowing configuration of tab orientation and scrollability. Updates Blade, JS, and Alpine logic to support scrollable tabs with dropdown overflow handling and responsive behavior.

* style: run composer cs

* Refactor Tabs component and update related styles

Refactored the Tabs component across PHP, Blade, and JS implementations to improve maintainability and consistency. Updated related CSS for dropdown list items to enhance UI appearance. These changes ensure better integration and user experience for tabbed interfaces.

* Refactor tabs dropdown logic for improved visibility

Replaces the scrollable tabs logic with a more robust dropdown visibility calculation. Updates Alpine component, Blade template, and supporting JS to use new withinDropdownMounted and isDropDownButtonVisible properties, ensuring correct tab visibility and dropdown trigger behavior. Removes unused tabIndex and related code, and cleans up CSS.

* chore: fix code style

* chore: fix code style

* Add documentation for horizontal tabs usage

Added a new section explaining how to use horizontal tabs, including details about the default scrollable behavior and the `horizontal()` method with its `scrollable` parameter.

* Document horizontal tabs overflow behavior

Added explanation for how non-scrollable horizontal tabs handle overflow by grouping excess tabs into a dropdown when space is limited.

* chore: fix code style

* clean up

* Update tabs.blade.php

* more robust calculation

* chore: fix code style

* Revert "chore: fix code style"

This reverts commit 3acc6fe.

* refactor and support badges

* refactor php

* Update tabs.blade.php

* Update tabs.js

* Update tabs.blade.php

* screenshots

---------

Co-authored-by: Abdulmajeed-Jamaan <[email protected]>
Co-authored-by: Dan Harrin <[email protected]>
Co-authored-by: danharrin <[email protected]>

Author: Abdulmajeed-Jamaan

docs-assets/app/.env

@@ -2,7 +2,7 @@ APP_NAME=Laravel
 APP_ENV=ci
 APP_KEY=base64:/RjsPfTKUG/cV+SQjSOfCfgFPZ85Zmwywiz5yevEZ0s=
 APP_DEBUG=true
-APP_URL=http://127.0.0.1::8000
+APP_URL=http://127.0.0.1:8000
 
 LOG_CHANNEL=stack
 LOG_DEPRECATIONS_CHANNEL=null

docs-assets/app/app/Livewire/Schemas/LayoutDemo.php

@@ -284,6 +284,28 @@ public function form(Schema $form): Schema
                             ])
                             ->vertical(),
                     ]),
+                Group::make()
+                    ->id('tabsNotScrollable')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        Tabs::make('Tabs')
+                            ->statePath('tabsNotScrollable')
+                            ->schema([
+                                Tab::make('Tab 1')
+                                    ->schema([
+                                        TextInput::make('field'),
+                                    ]),
+                                Tab::make('Tab 2'),
+                                Tab::make('Tab 3'),
+                                Tab::make('Tab 4'),
+                                Tab::make('Tab 5'),
+                                Tab::make('Tab 6'),
+                                Tab::make('Tab 7'),
+                            ])
+                            ->scrollable(false),
+                    ]),
                 Group::make()
                     ->id('wizard')
                     ->extraAttributes([