[Toolkit][Shadcn] Add Tabs recipe

src/Toolkit/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 2.33.0
 
 - [Shadcn] Add `accordion` recipe
+- [Shadcn] Add `tabs` recipe
 - [Shadcn] Add `tooltip` recipe
 - [Shadcn] Rework templates of `alert` recipe
 - [Shadcn] Rework templates of `avatar` recipe

src/Toolkit/kits/shadcn/tabs/assets/controllers/tabs_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['trigger', 'tab'];
+    static values = { activeTab: String };
+
+    open(e) {
+        this.activeTabValue = e.currentTarget.dataset.tabId;
+    }
+
+    activeTabValueChanged() {
+        this.triggerTargets.forEach((trigger) => {
+            const isActive = trigger.dataset.tabId === this.activeTabValue;
+            trigger.dataset.state = isActive ? 'active' : 'inactive';
+            trigger.ariaSelected = isActive;
+        });
+
+        this.tabTargets.forEach((tab) => {
+            tab.dataset.state = tab.dataset.tabId === this.activeTabValue ? 'active' : 'inactive';
+        });
+    }
+}

src/Toolkit/kits/shadcn/tabs/examples/Demo.html.twig

@@ -0,0 +1,64 @@
+<twig:Tabs defaultValue="overview" class="w-[400px]">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="overview">Overview</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="analytics">Analytics</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="reports">Reports</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+    <twig:Tabs:Content value="overview">
+        <twig:Card>
+            <twig:Card:Header>
+                <twig:Card:Title>Overview</twig:Card:Title>
+                <twig:Card:Description>
+                    View your key metrics and recent project activity. Track progress
+                    across all your active projects.
+                </twig:Card:Description>
+            </twig:Card:Header>
+            <twig:Card:Content class="text-muted-foreground text-sm">
+                You have 12 active projects and 3 pending tasks.
+            </twig:Card:Content>
+        </twig:Card>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="analytics">
+        <twig:Card>
+            <twig:Card:Header>
+                <twig:Card:Title>Analytics</twig:Card:Title>
+                <twig:Card:Description>
+                    Track performance and user engagement metrics. Monitor trends and
+                    identify growth opportunities.
+                </twig:Card:Description>
+            </twig:Card:Header>
+            <twig:Card:Content class="text-muted-foreground text-sm">
+                Page views are up 25% compared to last month.
+            </twig:Card:Content>
+        </twig:Card>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="reports">
+        <twig:Card>
+            <twig:Card:Header>
+                <twig:Card:Title>Reports</twig:Card:Title>
+                <twig:Card:Description>
+                    Generate and download your detailed reports. Export data in
+                    multiple formats for analysis.
+                </twig:Card:Description>
+            </twig:Card:Header>
+            <twig:Card:Content class="text-muted-foreground text-sm">
+                You have 5 reports ready and available to export.
+            </twig:Card:Content>
+        </twig:Card>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="settings">
+        <twig:Card>
+            <twig:Card:Header>
+                <twig:Card:Title>Settings</twig:Card:Title>
+                <twig:Card:Description>
+                    Manage your account preferences and options. Customize your
+                    experience to fit your needs.
+                </twig:Card:Description>
+            </twig:Card:Header>
+            <twig:Card:Content class="text-muted-foreground text-sm">
+                Configure notifications, security, and themes.
+            </twig:Card:Content>
+        </twig:Card>
+    </twig:Tabs:Content>
+</twig:Tabs>

src/Toolkit/kits/shadcn/tabs/examples/Disabled.html.twig

@@ -0,0 +1,8 @@
+<twig:Tabs defaultValue="home">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="home">Home</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings" disabled>
+            Disabled
+        </twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>

src/Toolkit/kits/shadcn/tabs/examples/Icons.html.twig

@@ -0,0 +1,12 @@
+<twig:Tabs defaultValue="preview">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="preview">
+            <twig:ux:icon name="lucide:app-window" />
+            Preview
+        </twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="code">
+            <twig:ux:icon name="lucide:code" />
+            Code
+        </twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>

src/Toolkit/kits/shadcn/tabs/examples/Usage.html.twig

@@ -0,0 +1,8 @@
+<twig:Tabs defaultValue="account" class="w-[400px]">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="account">Account</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="password">Password</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+    <twig:Tabs:Content value="account">Make changes to your account here.</twig:Tabs:Content>
+    <twig:Tabs:Content value="password">Change your password here.</twig:Tabs:Content>
+</twig:Tabs>

src/Toolkit/kits/shadcn/tabs/examples/Variant Line.html.twig

@@ -0,0 +1,7 @@
+<twig:Tabs defaultValue="overview">
+    <twig:Tabs:List variant="line">
+        <twig:Tabs:Trigger value="overview">Overview</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="analytics">Analytics</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="reports">Reports</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>

src/Toolkit/kits/shadcn/tabs/examples/Vertical.html.twig

@@ -0,0 +1,7 @@
+<twig:Tabs defaultValue="account" orientation="vertical">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="account">Account</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="password">Password</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="notifications">Notifications</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>

src/Toolkit/kits/shadcn/tabs/manifest.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Tabs",
+    "description": "A set of layered sections of content known as tab panels that are displayed one at a time.",
+    "copy-files": {
+        "assets/": "assets/",
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}

src/Toolkit/kits/shadcn/tabs/templates/components/Tabs.html.twig

@@ -0,0 +1,15 @@
+{# @prop defaultValue string define the open Tabs at initial rendering. Defaults to `` #}
+{# @prop orientation 'horizontal'|'vertical' define the visual orientation. Defaults to `horizontal` #}
+{# @block content The default block #}
+{%- props defaultValue = '', orientation = 'horizontal' -%}
+
+<div
+    data-slot="tabs"
+    data-controller="tabs"
+    data-tabs-active-tab-value="{{ defaultValue }}"
+    data-orientation="{{ orientation }}"
+    class="{{ ('gap-2 group/tabs flex data-[orientation=horizontal]:flex-col ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {% block content %}{% endblock %}
+</div>

src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/Content.html.twig

@@ -0,0 +1,21 @@
+{# @prop value string Unique suffix identifier for generating Tabs internal IDs #}
+{# @block content The default block #}
+{%- props value -%}
+
+{%- set _tab_id = 'tab-' ~ value -%}
+{%- set _tab_title_id = _tab_id ~ '-title' -%}
+{%- set _tab_description_id = _tab_id ~ '-description' -%}
+{%- set open = defaultValue is same as(value) -%}
+<div
+    id="{{ _tab_description_id }}"
+    data-slot="tabs-content"
+    data-tabs-target="tab"
+    data-tab-id="{{ value }}"
+    role="tabpanel"
+    aria-labelledby="{{ _tab_title_id }}"
+    data-state="{{ open ? 'active' : 'inactive' }}"
+    class="{{ ('text-sm flex-1 outline-none data-[state=inactive]:hidden ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/List.html.twig

@@ -0,0 +1,21 @@
+{# @prop variant 'default'|'line' The visual style variant. Defaults to `default` #}
+{# @block content The default block #}
+{%- props variant = 'default' -%}
+{%- set style = html_cva(
+    base: 'rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+    variants: {
+        variant: {
+            default: 'bg-muted',
+            line: 'gap-1 bg-transparent',
+        },
+    },
+) -%}
+
+<nav
+    data-slot="tabs-list"
+    role="tablist"
+    data-variant="{{ variant }}"
+    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
+{{ attributes }}>
+    {% block content %}{% endblock %}
+</nav>

src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/Trigger.html.twig

@@ -0,0 +1,23 @@
+{# @prop value string Unique suffix identifier for generating Tabs internal IDs #}
+{# @block content The default block #}
+{%- props value -%}
+
+{%- set _tab_id = 'tab-' ~ value -%}
+{%- set _tab_title_id = _tab_id ~ '-title' -%}
+{%- set _tab_description_id = _tab_id ~ '-description' -%}
+{%- set open = defaultValue is same as(value) -%}
+<button
+    id="{{ _tab_id }}"
+    data-slot="tabs-trigger"
+    data-action="click->tabs#open"
+    data-tabs-target="trigger"
+    data-tab-id="{{ value }}"
+    role="tab"
+    aria-controls="{{ _tab_description_id }}"
+    aria-selected="{{ open ? 'true' : 'false' }}"
+    data-state="{{ open ? 'active' : 'inactive' }}"
+    class="{{ ('gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*=\'size-\'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content -%}{%- endblock -%}
+</button>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Demo.html__1.html

@@ -0,0 +1,127 @@
+<!--
+- Kit: Shadcn UI
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="overview" class="w-[400px]">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="overview">Overview</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="analytics">Analytics</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="reports">Reports</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+    <twig:Tabs:Content value="overview">
+        <twig:Card>
+            <twig:Card:Header>
+                <twig:Card:Title>Overview</twig:Card:Title>
+                <twig:Card:Description>
+                    View your key metrics and recent project activity. Track progress
+                    across all your active projects.
+                </twig:Card:Description>
+            </twig:Card:Header>
+            <twig:Card:Content class="text-muted-foreground text-sm">
+                You have 12 active projects and 3 pending tasks.
+            </twig:Card:Content>
+        </twig:Card>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="analytics">
+        <twig:Card>
+            <twig:Card:Header>
+                <twig:Card:Title>Analytics</twig:Card:Title>
+                <twig:Card:Description>
+                    Track performance and user engagement metrics. Monitor trends and
+                    identify growth opportunities.
+                </twig:Card:Description>
+            </twig:Card:Header>
+            <twig:Card:Content class="text-muted-foreground text-sm">
+                Page views are up 25% compared to last month.
+            </twig:Card:Content>
+        </twig:Card>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="reports">
+        <twig:Card>
+            <twig:Card:Header>
+                <twig:Card:Title>Reports</twig:Card:Title>
+                <twig:Card:Description>
+                    Generate and download your detailed reports. Export data in
+                    multiple formats for analysis.
+                </twig:Card:Description>
+            </twig:Card:Header>
+            <twig:Card:Content class="text-muted-foreground text-sm">
+                You have 5 reports ready and available to export.
+            </twig:Card:Content>
+        </twig:Card>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="settings">
+        <twig:Card>
+            <twig:Card:Header>
+                <twig:Card:Title>Settings</twig:Card:Title>
+                <twig:Card:Description>
+                    Manage your account preferences and options. Customize your
+                    experience to fit your needs.
+                </twig:Card:Description>
+            </twig:Card:Header>
+            <twig:Card:Content class="text-muted-foreground text-sm">
+                Configure notifications, security, and themes.
+            </twig:Card:Content>
+        </twig:Card>
+    </twig:Tabs:Content>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="tabs" data-controller="tabs" data-tabs-active-tab-value="overview" data-orientation="horizontal" class="gap-2 group/tabs flex data-[orientation=horizontal]:flex-col w-[400px]">
+    <nav data-slot="tabs-list" role="tablist" data-variant="default" class="rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col bg-muted">
+    <button id="tab-overview" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="overview" role="tab" aria-controls="tab-overview-description" aria-selected="true" data-state="active" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Overview</button>
+        <button id="tab-analytics" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="analytics" role="tab" aria-controls="tab-analytics-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Analytics</button>
+        <button id="tab-reports" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="reports" role="tab" aria-controls="tab-reports-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Reports</button>
+        <button id="tab-settings" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="settings" role="tab" aria-controls="tab-settings-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Settings</button>
+    </nav>
+    <div id="tab-overview-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="overview" role="tabpanel" aria-labelledby="tab-overview-title" data-state="active" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm">
+<div class="flex flex-col space-y-1.5 p-6">
+<div class="leading-none font-semibold">Overview</div>
+                <div class="text-muted-foreground text-sm">View your key metrics and recent project activity. Track progress
+                    across all your active projects.
+                </div>
+            </div>
+            <div class="p-6 pt-0 text-muted-foreground text-sm">You have 12 active projects and 3 pending tasks.
+            </div>
+        </div>
+    </div>
+    <div id="tab-analytics-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="analytics" role="tabpanel" aria-labelledby="tab-analytics-title" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm">
+<div class="flex flex-col space-y-1.5 p-6">
+<div class="leading-none font-semibold">Analytics</div>
+                <div class="text-muted-foreground text-sm">Track performance and user engagement metrics. Monitor trends and
+                    identify growth opportunities.
+                </div>
+            </div>
+            <div class="p-6 pt-0 text-muted-foreground text-sm">Page views are up 25% compared to last month.
+            </div>
+        </div>
+    </div>
+    <div id="tab-reports-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="reports" role="tabpanel" aria-labelledby="tab-reports-title" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm">
+<div class="flex flex-col space-y-1.5 p-6">
+<div class="leading-none font-semibold">Reports</div>
+                <div class="text-muted-foreground text-sm">Generate and download your detailed reports. Export data in
+                    multiple formats for analysis.
+                </div>
+            </div>
+            <div class="p-6 pt-0 text-muted-foreground text-sm">You have 5 reports ready and available to export.
+            </div>
+        </div>
+    </div>
+    <div id="tab-settings-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="settings" role="tabpanel" aria-labelledby="tab-settings-title" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm">
+<div class="flex flex-col space-y-1.5 p-6">
+<div class="leading-none font-semibold">Settings</div>
+                <div class="text-muted-foreground text-sm">Manage your account preferences and options. Customize your
+                    experience to fit your needs.
+                </div>
+            </div>
+            <div class="p-6 pt-0 text-muted-foreground text-sm">Configure notifications, security, and themes.
+            </div>
+        </div>
+    </div>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Disabled.html__1.html

@@ -0,0 +1,22 @@
+<!--
+- Kit: Shadcn UI
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="home">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="home">Home</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings" disabled>
+            Disabled
+        </twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="tabs" data-controller="tabs" data-tabs-active-tab-value="home" data-orientation="horizontal" class="gap-2 group/tabs flex data-[orientation=horizontal]:flex-col">
+    <nav data-slot="tabs-list" role="tablist" data-variant="default" class="rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col bg-muted">
+    <button id="tab-home" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="home" role="tab" aria-controls="tab-home-description" aria-selected="true" data-state="active" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Home</button>
+        <button id="tab-settings" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="settings" role="tab" aria-controls="tab-settings-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100" disabled>Disabled
+        </button>
+    </nav>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Icons.html__1.html

@@ -0,0 +1,29 @@
+<!--
+- Kit: Shadcn UI
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="preview">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="preview">
+            <twig:ux:icon name="lucide:app-window" />
+            Preview
+        </twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="code">
+            <twig:ux:icon name="lucide:code" />
+            Code
+        </twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="tabs" data-controller="tabs" data-tabs-active-tab-value="preview" data-orientation="horizontal" class="gap-2 group/tabs flex data-[orientation=horizontal]:flex-col">
+    <nav data-slot="tabs-list" role="tablist" data-variant="default" class="rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col bg-muted">
+    <button id="tab-preview" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="preview" role="tab" aria-controls="tab-preview-description" aria-selected="true" data-state="active" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="M10 4v4M2 8h20M6 4v4"></path></g></svg>
+            Preview
+        </button>
+        <button id="tab-code" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="code" role="tab" aria-controls="tab-code-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 18l6-6l-6-6M8 6l-6 6l6 6"></path></svg>
+            Code
+        </button>
+    </nav>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Usage.html__1.html

@@ -0,0 +1,23 @@
+<!--
+- Kit: Shadcn UI
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="account" class="w-[400px]">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="account">Account</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="password">Password</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+    <twig:Tabs:Content value="account">Make changes to your account here.</twig:Tabs:Content>
+    <twig:Tabs:Content value="password">Change your password here.</twig:Tabs:Content>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="tabs" data-controller="tabs" data-tabs-active-tab-value="account" data-orientation="horizontal" class="gap-2 group/tabs flex data-[orientation=horizontal]:flex-col w-[400px]">
+    <nav data-slot="tabs-list" role="tablist" data-variant="default" class="rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col bg-muted">
+    <button id="tab-account" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="account" role="tab" aria-controls="tab-account-description" aria-selected="true" data-state="active" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Account</button>
+        <button id="tab-password" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="password" role="tab" aria-controls="tab-password-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Password</button>
+    </nav>
+    <div id="tab-account-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="account" role="tabpanel" aria-labelledby="tab-account-title" data-state="active" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">Make changes to your account here.</div>
+    <div id="tab-password-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="password" role="tabpanel" aria-labelledby="tab-password-title" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">Change your password here.</div>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Variant Line.html__1.html

@@ -0,0 +1,21 @@
+<!--
+- Kit: Shadcn UI
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="overview">
+    <twig:Tabs:List variant="line">
+        <twig:Tabs:Trigger value="overview">Overview</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="analytics">Analytics</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="reports">Reports</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="tabs" data-controller="tabs" data-tabs-active-tab-value="overview" data-orientation="horizontal" class="gap-2 group/tabs flex data-[orientation=horizontal]:flex-col">
+    <nav data-slot="tabs-list" role="tablist" data-variant="line" class="rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col gap-1 bg-transparent">
+    <button id="tab-overview" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="overview" role="tab" aria-controls="tab-overview-description" aria-selected="true" data-state="active" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Overview</button>
+        <button id="tab-analytics" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="analytics" role="tab" aria-controls="tab-analytics-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Analytics</button>
+        <button id="tab-reports" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="reports" role="tab" aria-controls="tab-reports-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Reports</button>
+    </nav>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Vertical.html__1.html

@@ -0,0 +1,21 @@
+<!--
+- Kit: Shadcn UI
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="account" orientation="vertical">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="account">Account</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="password">Password</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="notifications">Notifications</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="tabs" data-controller="tabs" data-tabs-active-tab-value="account" data-orientation="vertical" class="gap-2 group/tabs flex data-[orientation=horizontal]:flex-col">
+    <nav data-slot="tabs-list" role="tablist" data-variant="default" class="rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col bg-muted">
+    <button id="tab-account" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="account" role="tab" aria-controls="tab-account-description" aria-selected="true" data-state="active" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Account</button>
+        <button id="tab-password" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="password" role="tab" aria-controls="tab-password-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Password</button>
+        <button id="tab-notifications" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="notifications" role="tab" aria-controls="tab-notifications-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Notifications</button>
+    </nav>
+</div>