@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/tabs/Tabs.astro

@@ -1,306 +1,306 @@
----
-/**
- * @component Tabs
- * @title Tabs
- * @description Organize content into tabbed panels, rendering one panel at a time.
- * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2523-6067&t=YFStJ3V8fXEO8QD8-4
- *
- * @preview
- *
- * <Tabs defaultValue="overview" class="w-full max-w-[400px]">
- *   <TabsList>
- *     <TabsTrigger value="overview">Overview</TabsTrigger>
- *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
- *     <TabsTrigger value="reports">Reports</TabsTrigger>
- *     <TabsTrigger value="settings">Settings</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="overview">
- *     <Card>
- *       <CardHeader>
- *         <CardTitle>Overview</CardTitle>
- *         <CardDescription>
- *           View key metrics and recent activity across active projects.
- *         </CardDescription>
- *       </CardHeader>
- *       <CardContent class="text-sm text-muted-foreground">
- *         You have 12 active projects and 3 pending tasks.
- *       </CardContent>
- *     </Card>
- *   </TabsContent>
- *   <TabsContent value="analytics">
- *     <Card>
- *       <CardHeader>
- *         <CardTitle>Analytics</CardTitle>
- *         <CardDescription>
- *           Track engagement trends and performance over time.
- *         </CardDescription>
- *       </CardHeader>
- *       <CardContent class="text-sm text-muted-foreground">
- *         Page views are up 25% compared to last month.
- *       </CardContent>
- *     </Card>
- *   </TabsContent>
- *   <TabsContent value="reports">
- *     <Card>
- *       <CardHeader>
- *         <CardTitle>Reports</CardTitle>
- *         <CardDescription>
- *           Generate detailed exports for sharing and analysis.
- *         </CardDescription>
- *       </CardHeader>
- *       <CardContent class="text-sm text-muted-foreground">
- *         You have 5 reports ready to export.
- *       </CardContent>
- *     </Card>
- *   </TabsContent>
- *   <TabsContent value="settings">
- *     <Card>
- *       <CardHeader>
- *         <CardTitle>Settings</CardTitle>
- *         <CardDescription>
- *           Manage account preferences and personalization options.
- *         </CardDescription>
- *       </CardHeader>
- *       <CardContent class="text-sm text-muted-foreground">
- *         Configure notifications, security, and themes.
- *       </CardContent>
- *     </Card>
- *   </TabsContent>
- * </Tabs>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@bejamas/ui/components/tabs';
- * ---
- *
- * <Tabs defaultValue="overview">
- *   <TabsList>
- *     <TabsTrigger value="overview">Overview</TabsTrigger>
- *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="overview">Overview content...</TabsContent>
- *   <TabsContent value="analytics">Analytics content...</TabsContent>
- * </Tabs>
- *
- * ```
- *
- * @examples
- *
- * ### Line Animated
- *
- * <Tabs defaultValue="overview">
- *   <TabsList variant="line-animated" class="mb-4">
- *     <TabsTrigger value="overview">Overview</TabsTrigger>
- *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
- *     <TabsTrigger value="reports">Reports</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="overview">Line variant content.</TabsContent>
- *   <TabsContent value="analytics">Analytics content.</TabsContent>
- *   <TabsContent value="reports">Reports content.</TabsContent>
- * </Tabs>
- *
- * ### Vertical
- *
- * <Tabs defaultValue="profile" orientation="vertical" class="w-full max-w-xl">
- *   <TabsList class="min-w-40">
- *     <TabsTrigger value="profile" class="justify-start px-3">Profile</TabsTrigger>
- *     <TabsTrigger value="billing" class="justify-start px-3">Billing</TabsTrigger>
- *     <TabsTrigger value="notifications" class="justify-start px-3">Notifications</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="profile" class="rounded-lg border p-4">
- *     Profile settings content.
- *   </TabsContent>
- *   <TabsContent value="billing" class="rounded-lg border p-4">
- *     Billing settings content.
- *   </TabsContent>
- *   <TabsContent value="notifications" class="rounded-lg border p-4">
- *     Notifications settings content.
- *   </TabsContent>
- * </Tabs>
- *
- * ### Disabled
- *
- * <Tabs defaultValue="active">
- *   <TabsList>
- *     <TabsTrigger value="active">Active</TabsTrigger>
- *     <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
- *     <TabsTrigger value="secondary">Secondary</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="active">Active tab content.</TabsContent>
- *   <TabsContent value="disabled">Disabled tab content.</TabsContent>
- *   <TabsContent value="secondary">Secondary tab content.</TabsContent>
- * </Tabs>
- *
- * ### Overflow
- *
- * <Tabs defaultValue="monday">
- *   <TabsList class="w-full max-w-[20rem] justify-start overflow-x-auto whitespace-nowrap">
- *     <TabsTrigger value="monday" class="shrink-0">Monday</TabsTrigger>
- *     <TabsTrigger value="tuesday" class="shrink-0">Tuesday</TabsTrigger>
- *     <TabsTrigger value="wednesday" class="shrink-0">Wednesday</TabsTrigger>
- *     <TabsTrigger value="thursday" class="shrink-0">Thursday</TabsTrigger>
- *     <TabsTrigger value="friday" class="shrink-0">Friday</TabsTrigger>
- *     <TabsTrigger value="saturday" class="shrink-0">Saturday</TabsTrigger>
- *     <TabsTrigger value="sunday" class="shrink-0">Sunday</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="monday">Monday content.</TabsContent>
- *   <TabsContent value="tuesday">Tuesday content.</TabsContent>
- *   <TabsContent value="wednesday">Wednesday content.</TabsContent>
- *   <TabsContent value="thursday">Thursday content.</TabsContent>
- *   <TabsContent value="friday">Friday content.</TabsContent>
- *   <TabsContent value="saturday">Saturday content.</TabsContent>
- *   <TabsContent value="sunday">Sunday content.</TabsContent>
- * </Tabs>
- *
- * ### Direction Animation
- *
- * <Tabs defaultValue="overview">
- *   <TabsList>
- *     <TabsTrigger value="overview">Overview</TabsTrigger>
- *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
- *     <TabsTrigger value="reports">Reports</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="overview" animation="direction">Direction-aware overview.</TabsContent>
- *   <TabsContent value="analytics" animation="direction">Direction-aware analytics.</TabsContent>
- *   <TabsContent value="reports" animation="direction">Direction-aware reports.</TabsContent>
- * </Tabs>
- *
- * ### Sizes
- *
- * <div class="space-y-4">
- *   <Tabs defaultValue="sm-account">
- *     <TabsList size="sm">
- *       <TabsTrigger value="sm-account" class="text-xs px-2">Account</TabsTrigger>
- *       <TabsTrigger value="sm-password" class="text-xs px-2">Password</TabsTrigger>
- *     </TabsList>
- *   </Tabs>
- *
- *   <Tabs defaultValue="md-account">
- *     <TabsList size="default">
- *       <TabsTrigger value="md-account">Account</TabsTrigger>
- *       <TabsTrigger value="md-password">Password</TabsTrigger>
- *     </TabsList>
- *   </Tabs>
- *
- *   <Tabs defaultValue="lg-account">
- *     <TabsList size="lg">
- *       <TabsTrigger value="lg-account" class="text-base px-4">Account</TabsTrigger>
- *       <TabsTrigger value="lg-password" class="text-base px-4">Password</TabsTrigger>
- *     </TabsList>
- *   </Tabs>
- * </div>
- *
- * @api
- *
- * ### Events
- *
- * The tabs component emits custom events that you can listen to:
- *
- * | Event | Detail | Description |
- * |-------|--------|-------------|
- * | `tabs:change` | `{ value: string }` | Fired when the selected tab changes |
- *
- * ```astro nocollapse console
- * <Tabs id="my-tabs" defaultValue="tab1">
- *   <TabsList>
- *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
- *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="tab1">Content 1</TabsContent>
- *   <TabsContent value="tab2">Content 2</TabsContent>
- * </Tabs>
- * ```
- *
- * ```js nocollapse
- *   const tabs = document.getElementById('my-tabs');
- *
- *   tabs.addEventListener('tabs:change', (e) => {
- *     console.log('Selected tab:', e.detail.value);
- *   });
- * ```
- *
- * ### Programmatic Control
- *
- * You can control the tabs programmatically by dispatching a `tabs:set` event:
- *
- * ```js nocollapse
- * const tabs = document.getElementById('my-tabs');
- *
- * // Select a tab
- * tabs.dispatchEvent(new CustomEvent('tabs:set', {
- *   detail: { value: 'tab2' }
- * }));
- * ```
- *
- * ### Variants
- *
- * | Prop | Element | Values | Default |
- * |------|---------|--------|---------|
- * | `variant` | tabs-list | `indicator`, `default`, `line`, `line-animated` | `indicator` |
- * | `size` | tabs-list | `sm`, `default`, `lg` | `default` |
- * | `animation` | tabs-content | `none`, `fade`, `slide`, `direction` | `none` |
- *
- * ### Data Attributes
- *
- * The tabs component sets these data attributes that you can use for styling or querying state:
- *
- * | Attribute | Element | Description |
- * |-----------|---------|-------------|
- * | `data-orientation` | tabs | Current orientation (`horizontal` or `vertical`) |
- * | `data-variant` | tabs-list | Current list variant (`indicator`, `default`, `line`, or `line-animated`) |
- * | `data-activation-direction` | tabs-content | Last activation direction after tab change (`left`, `right`, `up`, or `down`, not set on initial mount) |
- * | `data-state` | tabs-trigger | Current state (`active` or `inactive`) |
- *
- * ### CSS Variables
- *
- * The tabs indicator exposes CSS variables for animation:
- *
- * | Variable | Element | Description |
- * |----------|---------|-------------|
- * | `--active-tab-left` | tabs-indicator | Left position of active tab |
- * | `--active-tab-width` | tabs-indicator | Width of active tab |
- * | `--active-tab-top` | tabs-indicator | Top position of active tab |
- * | `--active-tab-height` | tabs-indicator | Height of active tab |
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  orientation?: "horizontal" | "vertical";
-  defaultValue?: string;
-}
-
-const {
-  class: className = "",
-  orientation = "horizontal",
-  defaultValue,
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="tabs"
-  data-orientation={orientation}
-  data-default-value={defaultValue}
-  data-horizontal={orientation === "horizontal" ? "true" : undefined}
-  data-vertical={orientation === "vertical" ? "true" : undefined}
-  class={cn(
-    "gap-2",
-    "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
-    className,
-  )}
->
-  <slot />
-</div>
-
-<script>
-  import { createTabs } from "@data-slot/tabs";
-  document
-    .querySelectorAll('[data-slot="tabs"]')
-    .forEach((el) => createTabs(el));
-</script>
+---
+/**
+ * @component Tabs
+ * @title Tabs
+ * @description Organize content into tabbed panels, rendering one panel at a time.
+ * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2523-6067&t=YFStJ3V8fXEO8QD8-4
+ *
+ * @preview
+ *
+ * <Tabs defaultValue="overview" class="w-full max-w-[400px]">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
+ *     <TabsTrigger value="reports">Reports</TabsTrigger>
+ *     <TabsTrigger value="settings">Settings</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">
+ *     <Card>
+ *       <CardHeader>
+ *         <CardTitle>Overview</CardTitle>
+ *         <CardDescription>
+ *           View key metrics and recent activity across active projects.
+ *         </CardDescription>
+ *       </CardHeader>
+ *       <CardContent class="text-sm text-muted-foreground">
+ *         You have 12 active projects and 3 pending tasks.
+ *       </CardContent>
+ *     </Card>
+ *   </TabsContent>
+ *   <TabsContent value="analytics">
+ *     <Card>
+ *       <CardHeader>
+ *         <CardTitle>Analytics</CardTitle>
+ *         <CardDescription>
+ *           Track engagement trends and performance over time.
+ *         </CardDescription>
+ *       </CardHeader>
+ *       <CardContent class="text-sm text-muted-foreground">
+ *         Page views are up 25% compared to last month.
+ *       </CardContent>
+ *     </Card>
+ *   </TabsContent>
+ *   <TabsContent value="reports">
+ *     <Card>
+ *       <CardHeader>
+ *         <CardTitle>Reports</CardTitle>
+ *         <CardDescription>
+ *           Generate detailed exports for sharing and analysis.
+ *         </CardDescription>
+ *       </CardHeader>
+ *       <CardContent class="text-sm text-muted-foreground">
+ *         You have 5 reports ready to export.
+ *       </CardContent>
+ *     </Card>
+ *   </TabsContent>
+ *   <TabsContent value="settings">
+ *     <Card>
+ *       <CardHeader>
+ *         <CardTitle>Settings</CardTitle>
+ *         <CardDescription>
+ *           Manage account preferences and personalization options.
+ *         </CardDescription>
+ *       </CardHeader>
+ *       <CardContent class="text-sm text-muted-foreground">
+ *         Configure notifications, security, and themes.
+ *       </CardContent>
+ *     </Card>
+ *   </TabsContent>
+ * </Tabs>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@bejamas/ui/components/tabs';
+ * ---
+ *
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">Overview content...</TabsContent>
+ *   <TabsContent value="analytics">Analytics content...</TabsContent>
+ * </Tabs>
+ *
+ * ```
+ *
+ * @examples
+ *
+ * ### Line Animated
+ *
+ * <Tabs defaultValue="overview">
+ *   <TabsList variant="line-animated" class="mb-4">
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
+ *     <TabsTrigger value="reports">Reports</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">Line variant content.</TabsContent>
+ *   <TabsContent value="analytics">Analytics content.</TabsContent>
+ *   <TabsContent value="reports">Reports content.</TabsContent>
+ * </Tabs>
+ *
+ * ### Vertical
+ *
+ * <Tabs defaultValue="profile" orientation="vertical" class="w-full max-w-xl">
+ *   <TabsList class="min-w-40">
+ *     <TabsTrigger value="profile" class="justify-start px-3">Profile</TabsTrigger>
+ *     <TabsTrigger value="billing" class="justify-start px-3">Billing</TabsTrigger>
+ *     <TabsTrigger value="notifications" class="justify-start px-3">Notifications</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="profile" class="rounded-lg border p-4">
+ *     Profile settings content.
+ *   </TabsContent>
+ *   <TabsContent value="billing" class="rounded-lg border p-4">
+ *     Billing settings content.
+ *   </TabsContent>
+ *   <TabsContent value="notifications" class="rounded-lg border p-4">
+ *     Notifications settings content.
+ *   </TabsContent>
+ * </Tabs>
+ *
+ * ### Disabled
+ *
+ * <Tabs defaultValue="active">
+ *   <TabsList>
+ *     <TabsTrigger value="active">Active</TabsTrigger>
+ *     <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
+ *     <TabsTrigger value="secondary">Secondary</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="active">Active tab content.</TabsContent>
+ *   <TabsContent value="disabled">Disabled tab content.</TabsContent>
+ *   <TabsContent value="secondary">Secondary tab content.</TabsContent>
+ * </Tabs>
+ *
+ * ### Overflow
+ *
+ * <Tabs defaultValue="monday">
+ *   <TabsList class="w-full max-w-[20rem] justify-start overflow-x-auto whitespace-nowrap">
+ *     <TabsTrigger value="monday" class="shrink-0">Monday</TabsTrigger>
+ *     <TabsTrigger value="tuesday" class="shrink-0">Tuesday</TabsTrigger>
+ *     <TabsTrigger value="wednesday" class="shrink-0">Wednesday</TabsTrigger>
+ *     <TabsTrigger value="thursday" class="shrink-0">Thursday</TabsTrigger>
+ *     <TabsTrigger value="friday" class="shrink-0">Friday</TabsTrigger>
+ *     <TabsTrigger value="saturday" class="shrink-0">Saturday</TabsTrigger>
+ *     <TabsTrigger value="sunday" class="shrink-0">Sunday</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="monday">Monday content.</TabsContent>
+ *   <TabsContent value="tuesday">Tuesday content.</TabsContent>
+ *   <TabsContent value="wednesday">Wednesday content.</TabsContent>
+ *   <TabsContent value="thursday">Thursday content.</TabsContent>
+ *   <TabsContent value="friday">Friday content.</TabsContent>
+ *   <TabsContent value="saturday">Saturday content.</TabsContent>
+ *   <TabsContent value="sunday">Sunday content.</TabsContent>
+ * </Tabs>
+ *
+ * ### Direction Animation
+ *
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
+ *     <TabsTrigger value="reports">Reports</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview" animation="direction">Direction-aware overview.</TabsContent>
+ *   <TabsContent value="analytics" animation="direction">Direction-aware analytics.</TabsContent>
+ *   <TabsContent value="reports" animation="direction">Direction-aware reports.</TabsContent>
+ * </Tabs>
+ *
+ * ### Sizes
+ *
+ * <div class="space-y-4">
+ *   <Tabs defaultValue="sm-account">
+ *     <TabsList size="sm">
+ *       <TabsTrigger value="sm-account" class="text-xs px-2">Account</TabsTrigger>
+ *       <TabsTrigger value="sm-password" class="text-xs px-2">Password</TabsTrigger>
+ *     </TabsList>
+ *   </Tabs>
+ *
+ *   <Tabs defaultValue="md-account">
+ *     <TabsList size="default">
+ *       <TabsTrigger value="md-account">Account</TabsTrigger>
+ *       <TabsTrigger value="md-password">Password</TabsTrigger>
+ *     </TabsList>
+ *   </Tabs>
+ *
+ *   <Tabs defaultValue="lg-account">
+ *     <TabsList size="lg">
+ *       <TabsTrigger value="lg-account" class="text-base px-4">Account</TabsTrigger>
+ *       <TabsTrigger value="lg-password" class="text-base px-4">Password</TabsTrigger>
+ *     </TabsList>
+ *   </Tabs>
+ * </div>
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The tabs component emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `tabs:change` | `{ value: string }` | Fired when the selected tab changes |
+ *
+ * ```astro nocollapse console
+ * <Tabs id="my-tabs" defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * ```js nocollapse
+ *   const tabs = document.getElementById('my-tabs');
+ *
+ *   tabs.addEventListener('tabs:change', (e) => {
+ *     console.log('Selected tab:', e.detail.value);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the tabs programmatically by dispatching a `tabs:set` event:
+ *
+ * ```js nocollapse
+ * const tabs = document.getElementById('my-tabs');
+ *
+ * // Select a tab
+ * tabs.dispatchEvent(new CustomEvent('tabs:set', {
+ *   detail: { value: 'tab2' }
+ * }));
+ * ```
+ *
+ * ### Variants
+ *
+ * | Prop | Element | Values | Default |
+ * |------|---------|--------|---------|
+ * | `variant` | tabs-list | `indicator`, `default`, `line`, `line-animated` | `indicator` |
+ * | `size` | tabs-list | `sm`, `default`, `lg` | `default` |
+ * | `animation` | tabs-content | `none`, `fade`, `slide`, `direction` | `none` |
+ *
+ * ### Data Attributes
+ *
+ * The tabs component sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-orientation` | tabs | Current orientation (`horizontal` or `vertical`) |
+ * | `data-variant` | tabs-list | Current list variant (`indicator`, `default`, `line`, or `line-animated`) |
+ * | `data-activation-direction` | tabs-content | Last activation direction after tab change (`left`, `right`, `up`, or `down`, not set on initial mount) |
+ * | `data-state` | tabs-trigger | Current state (`active` or `inactive`) |
+ *
+ * ### CSS Variables
+ *
+ * The tabs indicator exposes CSS variables for animation:
+ *
+ * | Variable | Element | Description |
+ * |----------|---------|-------------|
+ * | `--active-tab-left` | tabs-indicator | Left position of active tab |
+ * | `--active-tab-width` | tabs-indicator | Width of active tab |
+ * | `--active-tab-top` | tabs-indicator | Top position of active tab |
+ * | `--active-tab-height` | tabs-indicator | Height of active tab |
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  orientation?: "horizontal" | "vertical";
+  defaultValue?: string;
+}
+
+const {
+  class: className = "",
+  orientation = "horizontal",
+  defaultValue,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="tabs"
+  data-orientation={orientation}
+  data-default-value={defaultValue}
+  data-horizontal={orientation === "horizontal" ? "true" : undefined}
+  data-vertical={orientation === "vertical" ? "true" : undefined}
+  class={cn(
+    "gap-2",
+    "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+    className,
+  )}
+>
+  <slot />
+</div>
+
+<script>
+  import { createTabs } from "@data-slot/tabs";
+  document
+    .querySelectorAll('[data-slot="tabs"]')
+    .forEach((el) => createTabs(el));
+</script>