V2 tabs overflow

v2/pink-sb/src/lib/index.ts

@@ -19,6 +19,7 @@ export { default as Layout } from './layout/index.js';
 export { default as Input } from './input/index.js';
 export { default as Selector } from './selector/index.js';
 export { default as Tabs } from './tabs/index.js';
+export { default as OverflowTabs } from './lab/overflow-tabs/index.js';
 export { default as ActionList } from './action-list/index.js';
 export { default as ActionMenu } from './action-menu/index.js';
 export { default as Upload } from './upload/index.js';

v2/pink-sb/src/lib/lab/overflow-tabs/Button.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import type { HTMLButtonAttributes } from 'svelte/elements';
+    import type { RootContext } from './types.js';
+
+    type $$Props = HTMLButtonAttributes & {
+        root: RootContext;
+    } & Partial<{
+            active: boolean;
+        }>;
+
+    export let root: $$Props['root'];
+    export let active: $$Props['active'] = false;
+    export let disabled: $$Props['disabled'] = false;
+
+    let buttonNode: HTMLButtonElement;
+
+    onMount(() => {
+        if (buttonNode) {
+            root.updateTabWidths(buttonNode.getBoundingClientRect().width);
+            return root.registerTabNode(buttonNode);
+        }
+    });
+</script>
+
+<button
+    role="tab"
+    type="button"
+    class:tab-primary={root.variant === 'primary'}
+    class:tab-secondary={root.variant === 'secondary'}
+    class:tab-stretch={root.stretch}
+    class:active
+    on:click
+    on:dblclick
+    on:mousedown
+    on:mouseup
+    on:keydown
+    {disabled}
+    bind:this={buttonNode}
+    {...$$restProps}
+>
+    <slot />
+</button>
+
+<style lang="scss">
+    @use 'tabs';
+
+    button {
+        @include tabs.base;
+    }
+</style>

v2/pink-sb/src/lib/lab/overflow-tabs/Link.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import type { HTMLButtonAttributes } from 'svelte/elements';
+    import type { RootContext } from './types.js';
+
+    type $$Props = HTMLAnchorElement & {
+        href: string;
+        root: RootContext;
+    } & Partial<{
+            disabled: boolean;
+            active: boolean;
+            noscroll: boolean;
+        }>;
+
+    export let root: $$Props['root'];
+    export let href: $$Props['href'];
+    export let disabled: $$Props['disabled'] = false;
+    export let active: $$Props['active'] = false;
+    export let noscroll: $$Props['noscroll'] = false;
+
+    let linkNode: HTMLAnchorElement;
+
+    onMount(() => {
+        if (linkNode) {
+            root.updateTabWidths(linkNode.getBoundingClientRect().width);
+            return root.registerTabNode(linkNode);
+        }
+    });
+</script>
+
+<a
+    bind:this={linkNode}
+    role="tab"
+    {href}
+    on:keydown
+    {...$$restProps}
+    class:active
+    class:tab-primary={root.variant === 'primary'}
+    class:tab-secondary={root.variant === 'secondary'}
+    class:tab-stretch={root.stretch}
+    aria-disabled={disabled}
+    tabindex={disabled ? -1 : 1}
+    data-sveltekit-noscroll={noscroll}
+>
+    <slot />
+</a>
+
+<style lang="scss">
+    @use 'tabs';
+
+    a {
+        @include tabs.base;
+    }
+</style>

v2/pink-sb/src/lib/lab/overflow-tabs/Root.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+    import { Input } from '$lib/index.js';
+    import type { RootContext } from './types.js';
+    import { onMount, tick } from 'svelte';
+    import { writable } from 'svelte/store';
+
+    export let variant: RootContext['variant'] = 'primary';
+    export let stretch: RootContext['stretch'] = false;
+    export let showOverflowIndicator = true;
+
+    let tabsList: HTMLElement;
+    let tabWidths: number[] = [];
+
+    const tabNodesStore = writable<HTMLElement[]>([]);
+    let tabNodes: HTMLElement[] = [];
+
+    tabNodesStore.subscribe((value) => {
+        tabNodes = value;
+    });
+
+    const overflowedItems = writable<{ text: string; disabled: boolean; active: boolean }[]>([]);
+    let visibleBreakIndex = tabNodes.length;
+    let hasOverflow = false;
+
+    const registerTabNode = (node: HTMLElement) => {
+        tabNodesStore.update((nodes) => [...nodes, node]);
+        return {
+            destroy: () => {
+                tabNodesStore.update((nodes) => nodes.filter((n) => n !== node));
+            }
+        };
+    };
+
+    const updateTabWidths = (tabWidth: number) => {
+        tabWidths = [...tabWidths, tabWidth];
+    };
+
+    const calculateOverflow = async () => {
+        if (!tabsList || tabNodes.length === 0 || tabWidths.length !== tabNodes.length) return;
+
+        await tick();
+
+        // First, make all tabs visible to measure their true widths
+        tabNodes.forEach((node) => {
+            node.style.display = '';
+        });
+
+        const navWidth = tabsList.getBoundingClientRect().width;
+        const DROPDOWN_WIDTH = showOverflowIndicator ? 120 : 0;
+
+        // Initial calculation without dropdown to see if we need overflow
+        let runningWidth = 0;
+        for (let i = 0; i < tabWidths.length; i++) {
+            runningWidth += tabWidths[i];
+        }
+
+        // Determine if we have overflow
+        hasOverflow = runningWidth > navWidth;
+
+        // Calculate available width based on whether we need the dropdown
+        const availableWidth = navWidth - (hasOverflow ? DROPDOWN_WIDTH : 0);
+
+        // Reset running width for actual calculation
+        runningWidth = 0;
+        visibleBreakIndex = tabNodes.length;
+
+        // Calculate which tabs should be visible
+        for (let i = 0; i < tabWidths.length; i++) {
+            runningWidth += tabWidths[i];
+            if (runningWidth > availableWidth) {
+                visibleBreakIndex = i;
+                break;
+            }
+        }
+
+        if (hasOverflow) {
+            // Get the overflowed items
+            const overflowed = tabNodes.slice(visibleBreakIndex).map((node) => {
+                return {
+                    text: node.innerText,
+                    disabled: node.hasAttribute('disabled'),
+                    active: node.classList.contains('active')
+                };
+            });
+
+            overflowedItems.set(overflowed);
+
+            tabNodes.forEach((node, index) => {
+                if (index >= visibleBreakIndex) {
+                    node.style.display = 'none';
+                } else {
+                    node.style.display = '';
+                }
+            });
+        } else {
+            tabNodes.forEach((node) => {
+                node.style.display = '';
+            });
+            overflowedItems.set([]);
+        }
+    };
+
+    const handleResize = () => {
+        calculateOverflow();
+    };
+
+    onMount(async () => {
+        await tick();
+        calculateOverflow();
+    });
+
+    $: if (tabWidths.length > 0 && tabNodes.length > 0) {
+        calculateOverflow();
+    }
+</script>
+
+<svelte:window on:resize={handleResize} />
+
+<div
+    role="tablist"
+    bind:this={tabsList}
+    class:tabs-primary={variant === 'primary'}
+    class:tabs-secondary={variant === 'secondary'}
+    class:tabs-stretch={stretch}
+>
+    <slot
+        root={{
+            variant,
+            stretch,
+            updateTabWidths: updateTabWidths,
+            registerTabNode,
+            hasOverflow,
+            overflowedItems: $overflowedItems
+        }}
+    />
+
+    {#if hasOverflow}
+        <Input.Select
+            placeholder="More"
+            options={$overflowedItems.map((item) => {
+                return {
+                    label: item.text,
+                    value: item.text.toLocaleLowerCase()
+                };
+            })}
+        />
+    {/if}
+</div>
+
+<style lang="scss">
+    div[role='tablist'] {
+        display: inline-flex;
+        align-items: flex-start;
+        border-radius: var(--border-radius-s);
+        flex-wrap: nowrap;
+        width: 100%;
+        max-width: fit-content;
+        overflow-x: auto;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        &.tabs {
+            &-primary {
+                background: var(--color-bgcolor-neutral-secondary);
+            }
+            &-secondary {
+                background: transparent;
+            }
+            &-stretch {
+                width: 100%;
+                justify-content: space-between;
+                max-width: none;
+            }
+        }
+    }
+</style>

v2/pink-sb/src/lib/lab/overflow-tabs/_tabs.scss

@@ -0,0 +1,89 @@
+@use '../../../scss/mixins/transitions';
+
+@mixin base {
+    @include transitions.common;
+    cursor: pointer;
+    display: inline-flex;
+    padding: var(--space-3) var(--space-6);
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-3);
+    outline-offset: var(--border-width-m);
+    border: var(--border-width-s) solid transparent;
+    white-space: nowrap;
+
+    color: var(--color-fgcolor-neutral-secondary);
+    text-align: center;
+    font-family: var(--font-family-sansserif);
+    font-size: var(--font-size-s);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%; /* 19.6px */
+    letter-spacing: -0.063px;
+
+    &.tab- {
+        &primary {
+            background: var(--color-bgcolor-neutral-secondary);
+            border-radius: var(--border-radius-s);
+
+            &:not(.active):not(&:disabled):not(&[aria-disabled='true']) {
+                &:hover,
+                &:active {
+                    background: var(--color-overlay-neutral-hover);
+                }
+            }
+
+            &.active {
+                color: var(--color-fgcolor-neutral-primary);
+                border: var(--border-width-s) solid var(--color-border-neutral);
+                background: var(--color-bgcolor-neutral-primary);
+                box-shadow:
+                    0px 1px 3px 0px rgba(0, 0, 0, 0.03),
+                    0px 4px 4px 0px rgba(0, 0, 0, 0.04);
+            }
+
+            &:disabled,
+            &[aria-disabled='true'] {
+                cursor: default;
+                opacity: 0.4;
+                background: var(--color-bgcolor-neutral-secondary);
+            }
+
+            &:focus-visible {
+                outline: var(--border-width-l) solid var(--color-border-focus);
+                z-index: 1000;
+            }
+        }
+
+        &secondary {
+            background: transparent;
+            &:not(.active):not(&:disabled):not(&[aria-disabled='true']) {
+                &:hover,
+                &:active {
+                    color: var(--color-fgcolor-neutral-primary);
+                }
+            }
+
+            &.active {
+                color: var(--color-fgcolor-neutral-primary);
+                font-weight: 500;
+                // border: var(--border-width-s) solid var(--color-border-neutral);
+                // background: var(--color-bgcolor-neutral-primary);
+                border-block-end: 1px solid var(--color-border-neutral-strongest);
+            }
+
+            &:disabled,
+            &[aria-disabled='true'] {
+                cursor: default;
+                opacity: 0.4;
+            }
+
+            &:focus-visible {
+                outline: var(--border-width-l) solid var(--color-border-focus);
+            }
+        }
+        &stretch {
+            flex: 1;
+        }
+    }
+}

v2/pink-sb/src/lib/lab/overflow-tabs/index.ts

@@ -0,0 +1,11 @@
+import Root from './Root.svelte';
+import Link from './Link.svelte';
+import Button from './Button.svelte';
+
+export default {
+    Root,
+    Item: {
+        Link,
+        Button
+    }
+};