pika-ux 1.0.0-beta.7 → 1.0.0-beta.9

package/src/pika/scrollable-tabs/README.md

@@ -0,0 +1,192 @@
+# ScrollableTabs Component
+
+A Svelte 5 component for creating scrollable tab interfaces with support for pinned tabs and an add button.
+
+## Features
+
+- **Pinned Tabs**: Non-scrollable tabs on the left that remain visible
+- **Scrollable Section**: Horizontally scrollable tabs in the center
+- **Add Button**: Persistent "+ Add" button on the right
+- **Tailwind Styled**: Uses Tailwind CSS classes exclusively
+- **Svelte 5**: Built with Svelte 5 runes ($state, $derived, $effect)
+- **Keyboard Accessible**: Full keyboard navigation support
+
+## Components
+
+- `ScrollableTabs.Root` - Main container (provides context)
+- `ScrollableTabs.List` - Tab bar container
+- `ScrollableTabs.PinnedSection` - Container for pinned tabs
+- `ScrollableTabs.ScrollableSection` - Container for scrollable tabs
+- `ScrollableTabs.PinnedTrigger` - Individual pinned tab
+- `ScrollableTabs.Trigger` - Individual scrollable tab
+- `ScrollableTabs.AddButton` - Add new tab button
+- `ScrollableTabs.Content` - Content area for each tab
+
+## Basic Usage
+
+```svelte
+<script lang="ts">
+    import * as ScrollableTabs from 'pika-ux/pika/scrollable-tabs';
+
+    let activeTab = $state('dashboard');
+
+    function handleAddTab() {
+        console.log('Add new tab clicked');
+    }
+</script>
+
+<ScrollableTabs.Root bind:value={activeTab}>
+    <ScrollableTabs.List>
+        <!-- Pinned tabs on the left -->
+        <ScrollableTabs.PinnedSection>
+            <ScrollableTabs.PinnedTrigger value="dashboard">
+                📊 Dashboard
+            </ScrollableTabs.PinnedTrigger>
+            <ScrollableTabs.PinnedTrigger value="quick-actions">
+                ⚡ Quick Actions
+            </ScrollableTabs.PinnedTrigger>
+        </ScrollableTabs.PinnedSection>
+
+        <!-- Scrollable tabs in the middle -->
+        <ScrollableTabs.ScrollableSection>
+            <ScrollableTabs.Trigger value="trends">
+                📈 Trends
+            </ScrollableTabs.Trigger>
+            <ScrollableTabs.Trigger value="notifications">
+                🔔 Notifications
+            </ScrollableTabs.Trigger>
+            <ScrollableTabs.Trigger value="settings">
+                🛠️ Settings
+            </ScrollableTabs.Trigger>
+            <ScrollableTabs.Trigger value="experiments">
+                🧪 Experiments
+            </ScrollableTabs.Trigger>
+        </ScrollableTabs.ScrollableSection>
+
+        <!-- Add button on the right -->
+        <ScrollableTabs.AddButton onclick={handleAddTab} />
+    </ScrollableTabs.List>
+
+    <!-- Tab content -->
+    <ScrollableTabs.Content value="dashboard">
+        <div class="p-6">
+            <h2 class="text-xl font-semibold mb-2">📊 Dashboard</h2>
+            <p>Dashboard content goes here...</p>
+        </div>
+    </ScrollableTabs.Content>
+
+    <ScrollableTabs.Content value="quick-actions">
+        <div class="p-6">
+            <h2 class="text-xl font-semibold mb-2">⚡ Quick Actions</h2>
+            <p>Quick actions content goes here...</p>
+        </div>
+    </ScrollableTabs.Content>
+
+    <!-- More content sections... -->
+</ScrollableTabs.Root>
+```
+
+## Advanced Usage
+
+### Custom Add Button
+
+```svelte
+<ScrollableTabs.AddButton onclick={handleAddTab}>
+    <span class="text-sm">+ New</span>
+</ScrollableTabs.AddButton>
+```
+
+### Custom Styling
+
+```svelte
+<ScrollableTabs.Root value={activeTab} class="max-w-5xl mx-auto">
+    <ScrollableTabs.List class="border-b-2">
+        <ScrollableTabs.PinnedSection class="bg-blue-50">
+            <!-- Pinned tabs -->
+        </ScrollableTabs.PinnedSection>
+
+        <ScrollableTabs.ScrollableSection class="bg-gray-50">
+            <!-- Scrollable tabs -->
+        </ScrollableTabs.ScrollableSection>
+    </ScrollableTabs.List>
+</ScrollableTabs.Root>
+```
+
+### Disabled Tabs
+
+```svelte
+<ScrollableTabs.Trigger value="disabled-tab" disabled>
+    Disabled Tab
+</ScrollableTabs.Trigger>
+```
+
+### Controlled State
+
+```svelte
+<script lang="ts">
+    let activeTab = $state('dashboard');
+
+    function handleValueChange(newValue: string) {
+        console.log('Tab changed to:', newValue);
+        // Perform additional logic here
+    }
+</script>
+
+<ScrollableTabs.Root
+    bind:value={activeTab}
+    onValueChange={handleValueChange}
+>
+    <!-- ... -->
+</ScrollableTabs.Root>
+```
+
+## Props
+
+### Root
+
+- `value` (string, bindable) - Currently active tab value
+- `onValueChange` (function, optional) - Callback when tab changes
+- `class` (string, optional) - Additional CSS classes
+
+### List
+
+- `class` (string, optional) - Additional CSS classes
+
+### PinnedSection / ScrollableSection
+
+- `class` (string, optional) - Additional CSS classes
+
+### Trigger / PinnedTrigger
+
+- `value` (string, required) - Tab identifier
+- `disabled` (boolean, optional) - Disable tab interaction
+- `class` (string, optional) - Additional CSS classes
+
+### AddButton
+
+- `onclick` (function, optional) - Click handler
+- `disabled` (boolean, optional) - Disable button
+- `class` (string, optional) - Additional CSS classes
+
+### Content
+
+- `value` (string, required) - Tab identifier to match
+- `class` (string, optional) - Additional CSS classes
+
+## Styling
+
+The component uses Tailwind CSS and respects your theme's color variables:
+
+- `bg-background`, `text-foreground` - Main background/text
+- `bg-muted`, `text-muted-foreground` - Muted sections
+- `bg-primary`, `text-primary` - Primary color accents
+- `ring-ring` - Focus ring color
+
+The scrollable section hides scrollbars by default for a cleaner look.
+
+## Accessibility
+
+- Full keyboard navigation support
+- Focus management with visible focus rings
+- ARIA-compliant button roles
+- Disabled state support

package/src/pika/scrollable-tabs/add-button.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '../../shadcn/utils.js';
+
+    interface Props {
+        onclick?: () => void;
+        class?: string;
+        disabled?: boolean;
+        children?: Snippet;
+    }
+
+    let { onclick, class: className, disabled = false, children }: Props = $props();
+</script>
+
+<div class={cn('flex-shrink-0 px-2', className)}>
+    <button
+        type="button"
+        {onclick}
+        {disabled}
+        class={cn(
+            'px-3 py-2 rounded-full transition-all',
+            'bg-muted hover:bg-muted/80 text-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+            'disabled:pointer-events-none disabled:opacity-50'
+        )}
+    >
+        {#if children}
+            {@render children()}
+        {:else}
+            ＋
+        {/if}
+    </button>
+</div>

package/src/pika/scrollable-tabs/content.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { getScrollableTabsContext } from './context.svelte.js';
+    import { cn } from '../../shadcn/utils.js';
+
+    interface Props {
+        value: string;
+        class?: string;
+        children: Snippet;
+    }
+
+    let { value, class: className, children }: Props = $props();
+
+    const context = getScrollableTabsContext();
+
+    const isActive = $derived(context.getValue() === value);
+</script>
+
+{#if isActive}
+    <div class={cn('mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)}>
+        {@render children()}
+    </div>
+{/if}

package/src/pika/scrollable-tabs/context.svelte.ts

@@ -0,0 +1,23 @@
+import { getContext, setContext } from 'svelte';
+
+const SCROLLABLE_TABS_CONTEXT_KEY = Symbol('SCROLLABLE_TABS_CONTEXT');
+
+export interface ScrollableTabsContext {
+    getValue: () => string;
+    onValueChange: (value: string) => void;
+    onClose?: (value: string) => void;
+    onPin?: (value: string) => void;
+    onUnpin?: (value: string) => void;
+}
+
+export function setScrollableTabsContext(context: ScrollableTabsContext) {
+    setContext(SCROLLABLE_TABS_CONTEXT_KEY, context);
+}
+
+export function getScrollableTabsContext(): ScrollableTabsContext {
+    const context = getContext<ScrollableTabsContext>(SCROLLABLE_TABS_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('ScrollableTabs context not found. Make sure components are used within ScrollableTabs.Root');
+    }
+    return context;
+}

package/src/pika/scrollable-tabs/example.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import * as ScrollableTabs from './index.js';
+
+    let activeTab = $state('dashboard');
+
+    function handleAddTab() {
+        console.log('Add new tab clicked');
+        // Add logic to create a new tab
+    }
+
+    const tabs = [
+        { value: 'trends', label: '📈 Trends', content: 'Trends analytics and data visualization' },
+        { value: 'notifications', label: '🔔 Notifications', content: 'Recent notifications and alerts' },
+        { value: 'settings', label: '🛠️ Settings', content: 'Application settings and preferences' },
+        { value: 'experiments', label: '🧪 Experiments', content: 'Beta features and experiments' },
+        { value: 'integrations', label: '📦 Integrations', content: 'Third-party integrations' },
+        { value: 'analytics', label: '📊 Analytics', content: 'Detailed analytics and reports' },
+        { value: 'users', label: '👥 Users', content: 'User management' },
+        { value: 'logs', label: '📝 Logs', content: 'System logs and audit trail' }
+    ];
+</script>
+
+<div class="w-full max-w-5xl mx-auto p-8">
+    <h1 class="text-2xl font-bold mb-6">ScrollableTabs Example</h1>
+
+    <ScrollableTabs.Root bind:value={activeTab}>
+        <ScrollableTabs.List>
+            <!-- Pinned tabs on the left -->
+            <ScrollableTabs.PinnedSection>
+                <ScrollableTabs.PinnedTrigger value="dashboard">📊 Dashboard</ScrollableTabs.PinnedTrigger>
+                <ScrollableTabs.PinnedTrigger value="quick-actions">⚡ Quick Actions</ScrollableTabs.PinnedTrigger>
+            </ScrollableTabs.PinnedSection>
+
+            <!-- Scrollable tabs in the middle -->
+            <ScrollableTabs.ScrollableSection>
+                {#each tabs as tab}
+                    <ScrollableTabs.Trigger value={tab.value}>
+                        {tab.label}
+                    </ScrollableTabs.Trigger>
+                {/each}
+            </ScrollableTabs.ScrollableSection>
+
+            <!-- Add button on the right -->
+            <ScrollableTabs.AddButton onclick={handleAddTab} />
+        </ScrollableTabs.List>
+
+        <!-- Tab content -->
+        <ScrollableTabs.Content value="dashboard">
+            <div class="p-6 bg-white border rounded-md min-h-[300px]">
+                <h2 class="text-xl font-semibold mb-2">📊 Dashboard Widget</h2>
+                <p class="text-muted-foreground">This is the main dashboard. It contains key metrics and quick access to important features.</p>
+            </div>
+        </ScrollableTabs.Content>
+
+        <ScrollableTabs.Content value="quick-actions">
+            <div class="p-6 bg-white border rounded-md min-h-[300px]">
+                <h2 class="text-xl font-semibold mb-2">⚡ Quick Actions</h2>
+                <p class="text-muted-foreground">Access frequently used actions and shortcuts here.</p>
+            </div>
+        </ScrollableTabs.Content>
+
+        {#each tabs as tab}
+            <ScrollableTabs.Content value={tab.value}>
+                <div class="p-6 bg-white border rounded-md min-h-[300px]">
+                    <h2 class="text-xl font-semibold mb-2">{tab.label}</h2>
+                    <p class="text-muted-foreground">
+                        {tab.content}
+                    </p>
+                </div>
+            </ScrollableTabs.Content>
+        {/each}
+    </ScrollableTabs.Root>
+
+    <!-- Display current active tab -->
+    <div class="mt-6 p-4 bg-muted rounded-md">
+        <p class="text-sm">
+            <strong>Active Tab:</strong>
+            {activeTab}
+        </p>
+    </div>
+</div>

package/src/pika/scrollable-tabs/index.ts

@@ -0,0 +1,31 @@
+import Root from './root.svelte';
+import List from './list.svelte';
+import PinnedSection from './pinned-section.svelte';
+import ScrollableSection from './scrollable-section.svelte';
+import Trigger from './trigger.svelte';
+import PinnedTrigger from './pinned-trigger.svelte';
+import AddButton from './add-button.svelte';
+import Content from './content.svelte';
+import OverflowMenu from './overflow-menu.svelte';
+
+export {
+    Root,
+    List,
+    PinnedSection,
+    ScrollableSection,
+    Trigger,
+    PinnedTrigger,
+    AddButton,
+    Content,
+    OverflowMenu,
+    //
+    Root as ScrollableTabs,
+    List as ScrollableTabsList,
+    PinnedSection as ScrollableTabsPinnedSection,
+    ScrollableSection as ScrollableTabsScrollableSection,
+    Trigger as ScrollableTabsTrigger,
+    PinnedTrigger as ScrollableTabsPinnedTrigger,
+    AddButton as ScrollableTabsAddButton,
+    Content as ScrollableTabsContent,
+    OverflowMenu as ScrollableTabsOverflowMenu
+};

package/src/pika/scrollable-tabs/list.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '../../shadcn/utils.js';
+
+    interface Props {
+        class?: string;
+        children: Snippet;
+    }
+
+    let { class: className, children }: Props = $props();
+</script>
+
+<div class={cn('flex items-center rounded-md bg-muted/30', className)}>
+    {@render children()}
+</div>

package/src/pika/scrollable-tabs/overflow-menu.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+    import { getScrollableTabsContext } from './context.svelte.js';
+    import { cn } from '../../shadcn/utils.js';
+    import * as DropdownMenu from '../../shadcn/dropdown-menu/index.js';
+    import { Button } from '../../shadcn/button/index.js';
+    import MoreHorizontal from '$icons/lucide/ellipsis';
+    import Pin from '$icons/lucide/pin';
+    import PinOff from '$icons/lucide/pin-off';
+    import X from '$icons/lucide/x';
+
+    interface Tab {
+        value: string;
+        label: string;
+        isPinned: boolean;
+    }
+
+    interface Props {
+        tabs: Tab[];
+        class?: string;
+    }
+
+    let { tabs, class: className }: Props = $props();
+
+    const context = getScrollableTabsContext();
+
+    const activeValue = $derived(context.getValue());
+
+    // Separate pinned and unpinned tabs
+    const pinnedTabs = $derived(tabs.filter((t) => t.isPinned));
+    const unpinnedTabs = $derived(tabs.filter((t) => !t.isPinned));
+
+    function handleTabClick(value: string) {
+        context.onValueChange(value);
+    }
+
+    function handlePin(e: Event, value: string) {
+        e.stopPropagation();
+        context.onPin?.(value);
+    }
+
+    function handleUnpin(e: Event, value: string) {
+        e.stopPropagation();
+        context.onUnpin?.(value);
+    }
+
+    function handleClose(e: Event, value: string) {
+        e.stopPropagation();
+        context.onClose?.(value);
+    }
+</script>
+
+<div class={cn('flex-shrink-0', className)}>
+    <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+            <Button variant="ghost" size="icon" class="w-7">
+                <MoreHorizontal style="width: 1.2rem; height: 1.2rem;" />
+            </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" class="w-56">
+            {#if pinnedTabs.length > 0}
+                <DropdownMenu.Group>
+                    <DropdownMenu.Label>Pinned</DropdownMenu.Label>
+                    {#each pinnedTabs as tab}
+                        <DropdownMenu.Item
+                            onclick={() => handleTabClick(tab.value)}
+                            class={cn('flex items-center justify-between gap-2', activeValue === tab.value && 'bg-accent')}
+                        >
+                            <span class="flex-1 truncate">{tab.label}</span>
+                            <div class="flex items-center gap-1 flex-shrink-0">
+                                {#if context.onUnpin}
+                                    <button type="button" onclick={(e) => handleUnpin(e, tab.value)} class="p-0.5 rounded hover:bg-muted transition-colors" aria-label="Unpin tab">
+                                        <PinOff style="width: 0.9rem; height: 0.9rem;" />
+                                    </button>
+                                {/if}
+                                {#if context.onClose}
+                                    <button type="button" onclick={(e) => handleClose(e, tab.value)} class="p-0.5 rounded hover:bg-muted transition-colors" aria-label="Close tab">
+                                        <X style="width: 0.9rem; height: 0.9rem;" />
+                                    </button>
+                                {/if}
+                            </div>
+                        </DropdownMenu.Item>
+                    {/each}
+                </DropdownMenu.Group>
+            {/if}
+
+            {#if pinnedTabs.length > 0 && unpinnedTabs.length > 0}
+                <DropdownMenu.Separator />
+            {/if}
+
+            {#if unpinnedTabs.length > 0}
+                <DropdownMenu.Group>
+                    {#if pinnedTabs.length > 0}
+                        <DropdownMenu.Label>Unpinned</DropdownMenu.Label>
+                    {/if}
+                    {#each unpinnedTabs as tab}
+                        <DropdownMenu.Item
+                            onclick={() => handleTabClick(tab.value)}
+                            class={cn('flex items-center justify-between gap-2', activeValue === tab.value && 'bg-accent')}
+                        >
+                            <span class="flex-1 truncate">{tab.label}</span>
+                            <div class="flex items-center gap-1 flex-shrink-0">
+                                {#if context.onPin}
+                                    <button type="button" onclick={(e) => handlePin(e, tab.value)} class="p-0.5 rounded hover:bg-muted transition-colors" aria-label="Pin tab">
+                                        <Pin style="width: 0.9rem; height: 0.9rem;" />
+                                    </button>
+                                {/if}
+                                {#if context.onClose}
+                                    <button type="button" onclick={(e) => handleClose(e, tab.value)} class="p-0.5 rounded hover:bg-muted transition-colors" aria-label="Close tab">
+                                        <X style="width: 0.9rem; height: 0.9rem;" />
+                                    </button>
+                                {/if}
+                            </div>
+                        </DropdownMenu.Item>
+                    {/each}
+                </DropdownMenu.Group>
+            {/if}
+        </DropdownMenu.Content>
+    </DropdownMenu.Root>
+</div>

package/src/pika/scrollable-tabs/pinned-section.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '../../shadcn/utils.js';
+
+    interface Props {
+        class?: string;
+        children: Snippet;
+        onVisibleCountChange?: (visibleCount: number) => void;
+        totalTabs?: number;
+    }
+
+    let { class: className, children, onVisibleCountChange, totalTabs = 0 }: Props = $props();
+
+    let container: HTMLDivElement;
+    let visibleCount = $state(totalTabs);
+    let isCalculating = false;
+    let lastContainerWidth = 0;
+    let isExpanding = false;
+
+    function calculateVisibleTabs() {
+        if (!container || totalTabs === 0 || isCalculating) return;
+
+        isCalculating = true;
+
+        try {
+            const containerWidth = container.clientWidth;
+
+            // Track if we're expanding or contracting
+            isExpanding = containerWidth > lastContainerWidth;
+            console.log(`[PinnedSection] Calculate: width=${containerWidth}, last=${lastContainerWidth}, expanding=${isExpanding}, visible=${visibleCount}/${totalTabs}`);
+            lastContainerWidth = containerWidth;
+
+            const tabs = Array.from(container.querySelectorAll('[role="tab"]')) as HTMLElement[];
+
+            if (tabs.length === 0) {
+                // Initial render, show all
+                if (visibleCount !== totalTabs) {
+                    visibleCount = totalTabs;
+                    onVisibleCountChange?.(totalTabs);
+                }
+                return;
+            }
+
+            const gap = 4; // gap-1 = 0.25rem = 4px
+            const padding = 16; // px-2 = 0.5rem * 2 = 16px
+            const menuButtonWidth = 32; // Space for overflow menu button
+
+            // Measure current visible tabs
+            let totalWidth = 0;
+            for (let i = 0; i < tabs.length; i++) {
+                totalWidth += tabs[i].offsetWidth + (i > 0 ? gap : 0);
+            }
+
+            const availableNoMenu = containerWidth - padding;
+            const availableWithMenu = availableNoMenu - menuButtonWidth;
+
+            console.log(`[PinnedSection] totalWidth=${totalWidth}, availableNoMenu=${availableNoMenu}, availableWithMenu=${availableWithMenu}`);
+
+            let newCount = visibleCount;
+
+            // Check if current tabs are overflowing
+            if (totalWidth > availableNoMenu) {
+                console.log(`[PinnedSection] OVERFLOWING - hiding tabs`);
+                // We're overflowing, need to hide tabs
+                // Calculate with menu button space
+                let accumulatedWidth = 0;
+                newCount = 0;
+                for (let i = 0; i < tabs.length; i++) {
+                    const tabWidth = tabs[i].offsetWidth;
+                    if (accumulatedWidth + tabWidth + (i > 0 ? gap : 0) <= availableWithMenu) {
+                        accumulatedWidth += tabWidth + (i > 0 ? gap : 0);
+                        newCount++;
+                    } else {
+                        break;
+                    }
+                }
+            } else if (visibleCount < totalTabs && isExpanding) {
+                console.log(`[PinnedSection] EXPANDING - trying to show more`);
+                // We have space and expanding - keep showing more tabs as long as they fit
+                // We need to estimate the width of hidden tabs to know if they'll fit
+                // Assume average width of current visible tabs
+                const avgTabWidth = tabs.length > 0 ? totalWidth / tabs.length : 80;
+
+                // Calculate how many more tabs we can fit
+                let remainingSpace = availableNoMenu - totalWidth;
+                let canFitMore = Math.floor(remainingSpace / (avgTabWidth + gap));
+
+                console.log(`[PinnedSection] avgTabWidth=${avgTabWidth}, remainingSpace=${remainingSpace}, canFitMore=${canFitMore}`);
+
+                newCount = Math.min(visibleCount + Math.max(1, canFitMore), totalTabs);
+            } else {
+                console.log(`[PinnedSection] NO CHANGE - visibleCount=${visibleCount}, totalTabs=${totalTabs}, isExpanding=${isExpanding}`);
+            }
+
+            if (visibleCount !== newCount) {
+                const oldCount = visibleCount;
+                visibleCount = newCount;
+                onVisibleCountChange?.(newCount);
+
+                console.log(`[PinnedSection] Changed from ${oldCount} to ${newCount}`);
+
+                // If we showed more tabs and haven't reached the total,
+                // schedule another check to see if even more will fit
+                if (newCount > oldCount && newCount < totalTabs && isExpanding) {
+                    console.log(`[PinnedSection] Scheduling re-check...`);
+                    setTimeout(() => calculateVisibleTabs(), 20);
+                }
+            }
+        } finally {
+            isCalculating = false;
+        }
+    }
+
+    $effect(() => {
+        if (container) {
+            let timeoutId: ReturnType<typeof setTimeout>;
+
+            // Initial check with slight delay to ensure content is rendered
+            timeoutId = setTimeout(() => calculateVisibleTabs(), 10);
+
+            // Watch for resize with debouncing
+            const resizeObserver = new ResizeObserver(() => {
+                clearTimeout(timeoutId);
+                timeoutId = setTimeout(() => calculateVisibleTabs(), 50);
+            });
+            resizeObserver.observe(container);
+
+            return () => {
+                clearTimeout(timeoutId);
+                resizeObserver.disconnect();
+            };
+        }
+    });
+</script>
+
+<div bind:this={container} class={cn('flex-shrink flex items-center gap-1 px-2 overflow-hidden min-w-0', className)}>
+    {@render children()}
+</div>