From 28cba8a425014b754e5569e67f1a08f345dbfb7f Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Fri, 15 Aug 2025 12:10:53 +0000
Subject: [PATCH 01/14] feat: added new component called expandable table
 aswell as left chevron variant of accordian

---
 v2/pink-sb/src/lib/Accordion.svelte           |  98 ++++--
 v2/pink-sb/src/lib/ExpandableTable.svelte     | 303 ++++++++++++++++++
 v2/pink-sb/src/lib/index.ts                   |   5 +-
 .../src/stories/Accordion.stories.svelte      |  31 ++
 .../stories/ExpandableTable.stories.svelte    | 258 +++++++++++++++
 5 files changed, 673 insertions(+), 22 deletions(-)
 create mode 100644 v2/pink-sb/src/lib/ExpandableTable.svelte
 create mode 100644 v2/pink-sb/src/stories/ExpandableTable.stories.svelte

diff --git a/v2/pink-sb/src/lib/Accordion.svelte b/v2/pink-sb/src/lib/Accordion.svelte
index 243e5a7873..ff47fad59b 100644
--- a/v2/pink-sb/src/lib/Accordion.svelte
+++ b/v2/pink-sb/src/lib/Accordion.svelte
@@ -23,6 +23,7 @@
     export let titleVariant: 'm-500' | 'm-400' | 'l-600' | 'l-500' | 'l-400' | 'm-600' | undefined =
         'm-500';
     export let titleColor = '--fgcolor-neutral-primary';
+    export let chevronPosition: 'left' | 'right' = 'right';
 
     // Allows user to open the accordion by pressing the enter key
     function clickOnEnter(
@@ -61,31 +62,58 @@
             </span>
         {/if}
         <button type="button" on:click={() => (open = !open)} {disabled}>
+            {#if chevronPosition === 'left'}
+                <span class="chevron chevron-left" data-open={open}>
+                    <Icon icon={IconChevronDown} />
+                </span>
+            {/if}
+
             {#if icon && hasAvatarIcon}
-                <span class="avatar">
+                <span class="avatar" class:avatar-with-left-chevron={chevronPosition === 'left'}>
                     <Icon {icon} size="s" />
                 </span>
             {:else if icon}
-                <span class="no-avatar">
+                <span
+                    class="no-avatar"
+                    class:no-avatar-with-left-chevron={chevronPosition === 'left'}
+                >
                     <Icon {icon} size="m" />
                 </span>
             {/if}
-            <summary>
-                <Stack gap="s" direction="row" alignItems="center" inline>
-                    <Text variant={titleVariant} color={titleColor}>
-                        {title}
-                    </Text>
-
-                    {#if badge}
-                        <Badge size="xs" variant="secondary" type={badgeType} content={badge} />
-                    {/if}
-                </Stack>
-                <slot name="end" />
-            </summary>
-
-            <span class="chevron" data-open={open}>
-                <Icon icon={IconChevronDown} />
-            </span>
+
+            {#if chevronPosition === 'left'}
+                <div class="title-content-left" class:title-with-icon={icon}>
+                    <Stack gap="s" direction="row" alignItems="center" inline>
+                        <Text variant={titleVariant} color={titleColor}>
+                            {title}
+                        </Text>
+
+                        {#if badge}
+                            <Badge size="xs" variant="secondary" type={badgeType} content={badge} />
+                        {/if}
+                    </Stack>
+                    <slot name="end" />
+                </div>
+            {:else}
+                <summary>
+                    <Stack gap="s" direction="row" alignItems="center" inline>
+                        <Text variant={titleVariant} color={titleColor}>
+                            {title}
+                        </Text>
+
+                        {#if badge}
+                            <Badge size="xs" variant="secondary" type={badgeType} content={badge} />
+                        {/if}
+                    </Stack>
+                    <slot name="end" />
+                </summary>
+            {/if}
+
+            {#if chevronPosition === 'right'}
+                <span class="chevron chevron-right" data-open={open}>
+                    <Icon icon={IconChevronDown} />
+                </span>
+            {/if}
         </button>
         {#if open}
             <article transition:slide={{ duration: 200 }}>
@@ -152,12 +180,21 @@
                 border-radius: var(--border-radius-circle, 99999px);
                 border: var(--border-width-s) solid var(--border-neutral-strong,);
                 background: var(--bgcolor-neutral-secondary);
+
+                &.avatar-with-left-chevron {
+                    grid-column: 2 / 3;
+                }
             }
 
             .no-avatar {
                 margin-inline-end: var(--gap-s);
                 display: flex;
+
+                &.no-avatar-with-left-chevron {
+                    grid-column: 2 / 3;
+                }
             }
+
             summary {
                 grid-column: 2 / 3;
                 display: flex;
@@ -166,15 +203,36 @@
                 gap: var(--gap-s);
                 padding-inline-end: var(--gap-s);
             }
+
+            .title-content-left {
+                grid-column: 2 / 4;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: var(--gap-s);
+                padding-inline-end: var(--gap-s);
+
+                &.title-with-icon {
+                    grid-column: 3 / 4;
+                }
+            }
             .chevron {
-                grid-column: 3 / -1;
-                margin-inline-start: auto;
                 display: flex;
                 align-items: center;
                 transition: rotate 300ms ease-in-out;
                 &[data-open='true'] {
                     rotate: 180deg;
                 }
+
+                &.chevron-left {
+                    grid-column: 1 / 2;
+                    margin-inline-end: var(--gap-s);
+                }
+
+                &.chevron-right {
+                    grid-column: 4 / -1;
+                    margin-inline-start: auto;
+                }
             }
         }
         article {
diff --git a/v2/pink-sb/src/lib/ExpandableTable.svelte b/v2/pink-sb/src/lib/ExpandableTable.svelte
new file mode 100644
index 0000000000..dcaab4983e
--- /dev/null
+++ b/v2/pink-sb/src/lib/ExpandableTable.svelte
@@ -0,0 +1,303 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    import Icon from '$lib/Icon.svelte';
+    import Text from '$lib/typography/Text.svelte';
+    import Badge from '$lib/Badge.svelte';
+    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
+    import { slide } from 'svelte/transition';
+
+    export interface ExpandableTableColumn {
+        id: string;
+        title: string;
+        width?: string;
+        align?: 'left' | 'center' | 'right';
+    }
+
+    export interface ExpandableTableRow {
+        id: string;
+        cells: Record<string, string>;
+        expandable?: boolean;
+        open?: boolean;
+        children?: ExpandableTableRow[];
+        badge?: {
+            content: string;
+            type?: 'success' | 'warning' | 'error';
+        };
+    }
+
+    export let columns: ExpandableTableColumn[] = [];
+    export let rows: ExpandableTableRow[] = [];
+    export let showHeader = true;
+
+    const dispatch = createEventDispatcher<{
+        toggle: { rowId: string; open: boolean };
+    }>();
+
+    const toggleRow = (rowId: string) => {
+        rows = rows.map((row) => (row.id === rowId ? { ...row, open: !row.open } : row));
+        const row = rows.find((r) => r.id === rowId);
+        if (row) dispatch('toggle', { rowId, open: row.open ?? false });
+    };
+
+    // Grid column templates
+    $: baseColumnWidths = columns.length ? columns.map((c) => c.width ?? '1fr').join(' ') : '1fr';
+    $: gridTemplateColumns = `40px ${baseColumnWidths}`;
+    $: childGridTemplate = `0px ${baseColumnWidths}`;
+
+    const getJustify = (align?: 'left' | 'center' | 'right') => {
+        switch (align) {
+            case 'right':
+                return 'flex-end';
+            case 'center':
+                return 'center';
+            default:
+                return 'flex-start';
+        }
+    };
+</script>
+
+<div class="expandable-table">
+    {#if showHeader && columns.length}
+        <div class="table-header" style="grid-template-columns: {gridTemplateColumns};">
+            <div class="header-chevron" aria-hidden="true"></div>
+            {#each columns as col}
+                <div class="header-cell" style="justify-content: {getJustify(col.align)};">
+                    <Text variant="m-500" color="--fgcolor-neutral-secondary">
+                        {col.title}
+                    </Text>
+                </div>
+            {/each}
+        </div>
+    {/if}
+
+    <div class="table-body">
+        {#each rows as row, rowIndex (row.id)}
+            <div class="table-row" class:has-children={row.expandable} class:is-open={row.open}>
+                <div
+                    class="row-content"
+                    style="grid-template-columns: {row.expandable
+                        ? gridTemplateColumns
+                        : childGridTemplate};"
+                >
+                    <div class="chevron-cell">
+                        {#if row.expandable}
+                            <button
+                                class="chevron-button"
+                                on:click={() => toggleRow(row.id)}
+                                aria-expanded={row.open}
+                                aria-label={row.open ? 'Collapse row' : 'Expand row'}
+                            >
+                                <span class="chevron" class:open={row.open}>
+                                    <Icon icon={IconChevronDown} size="s" />
+                                </span>
+                            </button>
+                        {/if}
+                    </div>
+
+                    {#each columns as col, colIndex}
+                        <div class="cell" style="justify-content: {getJustify(col.align)};">
+                            <Text
+                                variant={rowIndex === rows.length - 1 ? 'm-500' : 'm-400'}
+                                color={rowIndex === rows.length - 1
+                                    ? '--fgcolor-neutral-primary'
+                                    : '--fgcolor-neutral-secondary'}
+                            >
+                                {row.cells?.[col.id] ?? ''}
+                            </Text>
+
+                            {#if row.badge && colIndex === 0}
+                                <Badge
+                                    size="xs"
+                                    variant="secondary"
+                                    type={row.badge.type}
+                                    content={row.badge.content}
+                                />
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+
+                {#if row.expandable && row.open && row.children}
+                    <div class="expanded-content" transition:slide={{ duration: 200 }}>
+                        {#each row.children as child (child.id)}
+                            <div
+                                class="child-row"
+                                style="grid-template-columns: {childGridTemplate};"
+                            >
+                                <div class="child-chevron" aria-hidden="true"></div>
+                                {#each columns as col}
+                                    <div
+                                        class="child-cell"
+                                        style="justify-content: {getJustify(col.align)};"
+                                    >
+                                        <Text variant="m-400" color="--fgcolor-neutral-secondary">
+                                            {child.cells?.[col.id] ?? ''}
+                                        </Text>
+                                    </div>
+                                {/each}
+                            </div>
+                        {/each}
+                    </div>
+                {/if}
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style lang="scss">
+    /* Variables */
+    .expandable-table {
+        --row-pad-top: var(--space-4, 12px);
+        --row-pad-bottom: var(--space-4, 12px);
+        --row-pad-left: var(--space-6, 16px);
+        --row-pad-right: var(--space-6, 16px);
+        --row-gap: var(--space-4, 12px);
+        --row-height: 40px;
+        --chevron-col-width: 40px;
+        --chevron-hit-size: var(--space-2, 8px);
+
+        --divider-color: var(--border-neutral, rgba(0, 0, 0, 0.12));
+        --divider-strong: var(--border-neutral-strong, rgba(0, 0, 0, 0.18));
+        --overlay-hover: var(--overlay-neutral-hover, rgba(0, 0, 0, 0.04));
+        --row-open-bg: var(--bgcolor-neutral-default, rgba(0, 0, 0, 0.02));
+        --accordion-bg: var(--bgcolor-neutral-default, var(--row-open-bg));
+
+        border: var(--border-width-s, 1px) solid var(--divider-strong);
+        border-radius: var(--border-radius-s);
+        background: var(--bgcolor-neutral-primary, #fff);
+        overflow: hidden;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .expandable-table {
+            --divider-color: var(--border-neutral, rgba(255, 255, 255, 0.08));
+            --divider-strong: var(--border-neutral-strong, rgba(255, 255, 255, 0.12));
+            --overlay-hover: var(--overlay-neutral-hover, rgba(255, 255, 255, 0.02));
+            --row-open-bg: var(--bgcolor-neutral-default-dark, rgba(255, 255, 255, 0.02));
+        }
+        .child-row {
+            background: var(--bgcolor-neutral-default-dark, rgba(255, 255, 255, 0.02));
+        }
+    }
+
+    /* Header */
+    .table-header {
+        display: grid;
+        align-items: center;
+        gap: var(--row-gap);
+        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
+        background: var(--bgcolor-neutral-tertiary, #fff);
+        border-bottom: var(--border-width-s, 1px) solid var(--divider-strong);
+        height: var(--row-height);
+    }
+    .header-chevron {
+        width: var(--chevron-col-width);
+    }
+    .header-cell {
+        display: flex;
+        align-items: center;
+    }
+
+    /* Rows */
+    .table-row.has-children:not(.is-open):hover .row-content {
+        background: var(--overlay-hover);
+    }
+    .table-row.is-open .row-content {
+        background: var(--row-open-bg);
+        border-bottom-color: var(--divider-strong);
+    }
+
+    /* Row content */
+    .row-content {
+        display: grid;
+        align-items: center;
+        gap: var(--row-gap);
+        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
+        border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
+        height: var(--row-height);
+        box-sizing: border-box;
+        transition: background-color 0.2s ease;
+    }
+    .cell {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-s, 8px);
+    }
+
+    /* Chevron */
+    .chevron-cell {
+        width: var(--chevron-col-width);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-left: calc(var(--row-pad-left) / 4);
+    }
+    .chevron-button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: var(--chevron-hit-size);
+        border-radius: var(--border-radius-s);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background-color 0.2s ease;
+        height: calc(var(--row-height) - (var(--row-pad-top) + var(--row-pad-bottom)));
+    }
+    .chevron-button:hover {
+        background: var(--overlay-hover);
+    }
+    .chevron-button:focus-visible {
+        outline: var(--border-width-l) solid var(--border-focus);
+    }
+    .chevron {
+        display: flex;
+        transition: rotate 300ms ease-in-out;
+    }
+    .chevron.open {
+        rotate: 180deg;
+    }
+
+    /* Expanded content */
+    .expanded-content {
+        background: var(--accordion-bg);
+        padding-top: calc(var(--row-pad-top) / 2);
+        padding-bottom: var(--row-pad-bottom);
+        position: relative;
+    }
+    .expanded-content::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: calc(var(--border-width-s, 1px) * 2);
+        background: var(--divider-strong);
+        box-shadow: 0 -1px 0 var(--divider-color) inset;
+        z-index: 1;
+        pointer-events: none;
+    }
+
+    /* Child rows */
+    .child-row {
+        display: grid;
+        align-items: center;
+        gap: var(--row-gap);
+        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
+        border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
+        height: var(--row-height);
+        box-sizing: border-box;
+        background: transparent;
+        color: var(--fgcolor-neutral-secondary, rgba(0, 0, 0, 0.6));
+    }
+    .child-row:last-child {
+        border-bottom: none;
+    }
+    .child-cell {
+        display: flex;
+        align-items: center;
+    }
+    .child-chevron {
+        width: var(--chevron-col-width);
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
index c10ed07de6..bf80278c65 100644
--- a/v2/pink-sb/src/lib/index.ts
+++ b/v2/pink-sb/src/lib/index.ts
@@ -3,6 +3,7 @@ export { default as AvatarGroup } from './avatar/AvatarGroup.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Breadcrumbs } from './Breadcrumbs.svelte';
 export { default as Divider } from './Divider.svelte';
+export { default as ExpandableTable } from './ExpandableTable.svelte';
 export { default as FloatingActionBar } from './FloatingActionBar.svelte';
 export { default as InteractiveText } from './InteractiveText.svelte';
 export { default as Root } from './Root.svelte';
@@ -28,8 +29,8 @@ export { default as Skeleton } from './Skeleton.svelte';
 export { default as DirectoryPicker } from './DirectoryPicker/DirectoryPicker.svelte';
 export { default as DirectoryItem } from './DirectoryPicker/DirectoryItem.svelte';
 export { default as Keyboard } from './Keyboard.svelte';
-export { default as BottomSheet } from '$lib/bottom-sheet/index.js';
-export type { SheetMenu } from '$lib/bottom-sheet/index.js';
+export { default as BottomSheet } from './bottom-sheet/index.js';
+export type { SheetMenu } from './bottom-sheet/index.js';
 export { default as Icon } from './Icon.svelte';
 export { default as Pagination } from './pagination/Pagination.svelte';
 export { default as Code } from './Code.svelte';
diff --git a/v2/pink-sb/src/stories/Accordion.stories.svelte b/v2/pink-sb/src/stories/Accordion.stories.svelte
index e326b35de3..5a5389fa9d 100644
--- a/v2/pink-sb/src/stories/Accordion.stories.svelte
+++ b/v2/pink-sb/src/stories/Accordion.stories.svelte
@@ -39,6 +39,37 @@
         <Accordion title="I'm disabled" badge="Disabled" disabled>
             You shouldn't be able to open this item.
         </Accordion>
+        <Accordion title="Left chevron" chevronPosition="left">
+            This accordion has the chevron positioned on the left side.
+            <span slot="end">end slot</span>
+        </Accordion>
+        <Accordion title="Left chevron" icon={IconInfo} chevronPosition="left">
+            This accordion has the chevron positioned on the left side.
+        </Accordion>
+        <Accordion title="Left chevron with checkbox" selectable chevronPosition="left">
+            This accordion has both a checkbox and left-positioned chevron.
+        </Accordion>
+        <Accordion
+            title="Left chevron with avatar and checkbox"
+            chevronPosition="left"
+            icon={IconInfo}
+            selectable
+        >
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nisi eveniet neque unde
+            minima id?
+        </Accordion>
+        <Accordion
+            title="Left chevron with everything"
+            chevronPosition="left"
+            icon={IconInfo}
+            selectable
+            badge="Badge"
+        >
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut, expedita quisquam.
+            Quaerat nemo dolores voluptate neque iste beatae placeat qui deleniti quibusdam
+            pariatur, doloremque consequatur nam animi? Voluptate consectetur repellendus vitae?
+            Sequi, autem officia illum aut vitae porro eum sed?
+        </Accordion>
     </Stack>
 </Story>
 <Story name="Secondary">
diff --git a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
new file mode 100644
index 0000000000..1bed1c1ee6
--- /dev/null
+++ b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
@@ -0,0 +1,258 @@
+<script context="module" lang="ts">
+    import ExpandableTable from '$lib/ExpandableTable.svelte';
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+
+    export const meta: MetaProps = {
+        title: 'Components/ExpandableTable',
+        component: ExpandableTable,
+        args: {
+            showHeader: true
+        }
+    };
+</script>
+
+<script lang="ts">
+    import { Story, Template } from '@storybook/addon-svelte-csf';
+    import type { ExpandableTableColumn, ExpandableTableRow } from '$lib/ExpandableTable.svelte';
+
+    const columns: ExpandableTableColumn[] = [
+        { id: 'service', title: 'Service', width: '2fr', align: 'left' },
+        { id: 'usage', title: 'Usage', width: '2fr', align: 'left' },
+        { id: 'price', title: 'Price', width: '1fr', align: 'right' }
+    ];
+
+    const billingData: ExpandableTableRow[] = [
+        {
+            id: 'base-plan',
+            cells: {
+                service: 'Base plan',
+                price: '$15.00'
+            },
+            expandable: false
+        },
+        {
+            id: 'todo-list',
+            cells: {
+                service: 'Todo list',
+                usage: '',
+                price: '$0.00'
+            },
+            expandable: true,
+            open: false,
+            children: []
+        },
+        {
+            id: 'saas-dashboard-1',
+            cells: {
+                service: 'SaaS dashboard',
+                usage: '',
+                price: '$15.00'
+            },
+            expandable: true,
+            open: false,
+            children: [
+                {
+                    id: 'bandwidth-1',
+                    cells: {
+                        service: 'Bandwidth',
+                        usage: '40,102 / 175,000',
+                        price: '$10'
+                    }
+                },
+                {
+                    id: 'users-1',
+                    cells: {
+                        service: 'Users',
+                        usage: '100,109 / 200,000',
+                        price: '$0'
+                    }
+                },
+                {
+                    id: 'db-reads-1',
+                    cells: {
+                        service: 'Databases reads',
+                        usage: '195,933 / 175,000',
+                        price: '$10'
+                    }
+                },
+                {
+                    id: 'db-writes-1',
+                    cells: {
+                        service: 'Databases writes',
+                        usage: '195,933 / 175,000',
+                        price: '$10'
+                    }
+                },
+                {
+                    id: 'executions-1',
+                    cells: {
+                        service: 'Executions',
+                        usage: '2,007,939 / 3,500,000',
+                        price: '$0'
+                    }
+                },
+                {
+                    id: 'storage-1',
+                    cells: {
+                        service: 'Storage',
+                        usage: '125 GB / 150 GB',
+                        price: '$0'
+                    }
+                },
+                {
+                    id: 'gb-hours-1',
+                    cells: {
+                        service: 'GB-hours',
+                        usage: '902 GB / 1,000 GB',
+                        price: '$0'
+                    }
+                },
+                {
+                    id: 'phone-otp-1',
+                    cells: {
+                        service: 'Phone OTP',
+                        usage: '40,102 SMS messages',
+                        price: '$8.40'
+                    }
+                }
+            ]
+        },
+        {
+            id: 'saas-dashboard-2',
+            cells: {
+                service: 'SaaS dashboard',
+                usage: '',
+                price: '$15.00'
+            },
+            expandable: true,
+            open: false,
+            children: [
+                {
+                    id: 'bandwidth-2',
+                    cells: {
+                        service: 'Bandwidth',
+                        usage: '40,102 / 175,000',
+                        price: '$10'
+                    }
+                },
+                {
+                    id: 'users-2',
+                    cells: {
+                        service: 'Users',
+                        usage: '100,109 / 200,000',
+                        price: '$0'
+                    }
+                }
+            ]
+        },
+        {
+            id: 'usage-details',
+            cells: {
+                service: 'Usage details',
+                usage: '',
+                price: ''
+            },
+            expandable: true,
+            open: false,
+            children: [
+                {
+                    id: 'another-saas',
+                    cells: {
+                        service: 'SaaS dashboard',
+                        usage: '',
+                        price: '$15.00'
+                    }
+                }
+            ]
+        },
+        // total shown as a final non-expandable row inside the table
+        {
+            id: 'total-row',
+            cells: {
+                service: 'Total',
+                usage: '',
+                price: '$40.00'
+            },
+            expandable: false
+        }
+    ];
+
+    let data = billingData;
+
+    function handleToggle(event: CustomEvent<{ rowId: string; open: boolean }>) {
+        console.log('Row toggled:', event.detail);
+    }
+</script>
+
+<Template let:args>
+    <ExpandableTable {...args} />
+</Template>
+
+<Story name="Billing Example" let:args>
+    <ExpandableTable {...args} {columns} showHeader={false} rows={data} on:toggle={handleToggle} />
+</Story>
+
+<Story name="Simple Example" let:args>
+    <ExpandableTable
+        {...args}
+        columns={[
+            { id: 'name', title: 'Name', align: 'left' },
+            { id: 'value', title: 'Value', align: 'right' }
+        ]}
+        rows={[
+            {
+                id: 'parent1',
+                cells: { name: 'Parent Item 1', value: '100' },
+                expandable: true,
+                open: false,
+                children: [
+                    { id: 'child1', cells: { name: 'Child Item 1', value: '50' } },
+                    { id: 'child2', cells: { name: 'Child Item 2', value: '50' } }
+                ]
+            },
+            {
+                id: 'parent2',
+                cells: { name: 'Parent Item 2', value: '200' },
+                expandable: false
+            }
+        ]}
+        on:toggle={handleToggle}
+    />
+</Story>
+
+<Story name="With Badges" let:args>
+    <ExpandableTable
+        {...args}
+        columns={[
+            { id: 'service', title: 'Service', align: 'left' },
+            { id: 'status', title: 'Status', align: 'center' },
+            { id: 'amount', title: 'Amount', align: 'right' }
+        ]}
+        rows={[
+            {
+                id: 'service1',
+                cells: { service: 'Premium Service', status: 'Active', amount: '$29.99' },
+                expandable: true,
+                open: false,
+                badge: { content: 'NEW', type: 'success' },
+                children: [
+                    {
+                        id: 'feature1',
+                        cells: { service: 'Feature A', status: 'Included', amount: '$0.00' }
+                    },
+                    {
+                        id: 'feature2',
+                        cells: { service: 'Feature B', status: 'Included', amount: '$0.00' }
+                    }
+                ]
+            },
+            {
+                id: 'service2',
+                cells: { service: 'Basic Service', status: 'Active', amount: '$9.99' },
+                expandable: false,
+                badge: { content: 'LEGACY', type: 'warning' }
+            }
+        ]}
+        on:toggle={handleToggle}
+    />
+</Story>

From 6325730df866f78b426dc7ee9a9a092d62d647f8 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Sat, 16 Aug 2025 12:37:35 +0000
Subject: [PATCH 02/14] fix:spacing issue

---
 v2/pink-sb/src/lib/ExpandableTable.svelte | 68 +++++++----------------
 1 file changed, 19 insertions(+), 49 deletions(-)

diff --git a/v2/pink-sb/src/lib/ExpandableTable.svelte b/v2/pink-sb/src/lib/ExpandableTable.svelte
index dcaab4983e..fa414425d3 100644
--- a/v2/pink-sb/src/lib/ExpandableTable.svelte
+++ b/v2/pink-sb/src/lib/ExpandableTable.svelte
@@ -41,8 +41,8 @@
 
     // Grid column templates
     $: baseColumnWidths = columns.length ? columns.map((c) => c.width ?? '1fr').join(' ') : '1fr';
-    $: gridTemplateColumns = `40px ${baseColumnWidths}`;
-    $: childGridTemplate = `0px ${baseColumnWidths}`;
+    $: gridTemplateColumns = baseColumnWidths;
+    $: childGridTemplate = baseColumnWidths;
 
     const getJustify = (align?: 'left' | 'center' | 'right') => {
         switch (align) {
@@ -59,7 +59,6 @@
 <div class="expandable-table">
     {#if showHeader && columns.length}
         <div class="table-header" style="grid-template-columns: {gridTemplateColumns};">
-            <div class="header-chevron" aria-hidden="true"></div>
             {#each columns as col}
                 <div class="header-cell" style="justify-content: {getJustify(col.align)};">
                     <Text variant="m-500" color="--fgcolor-neutral-secondary">
@@ -73,29 +72,22 @@
     <div class="table-body">
         {#each rows as row, rowIndex (row.id)}
             <div class="table-row" class:has-children={row.expandable} class:is-open={row.open}>
-                <div
-                    class="row-content"
-                    style="grid-template-columns: {row.expandable
-                        ? gridTemplateColumns
-                        : childGridTemplate};"
-                >
-                    <div class="chevron-cell">
-                        {#if row.expandable}
-                            <button
-                                class="chevron-button"
-                                on:click={() => toggleRow(row.id)}
-                                aria-expanded={row.open}
-                                aria-label={row.open ? 'Collapse row' : 'Expand row'}
-                            >
-                                <span class="chevron" class:open={row.open}>
-                                    <Icon icon={IconChevronDown} size="s" />
-                                </span>
-                            </button>
-                        {/if}
-                    </div>
-
+                <div class="row-content" style="grid-template-columns: {gridTemplateColumns};">
                     {#each columns as col, colIndex}
                         <div class="cell" style="justify-content: {getJustify(col.align)};">
+                            {#if row.expandable && colIndex === 0}
+                                <button
+                                    class="chevron-button"
+                                    on:click={() => toggleRow(row.id)}
+                                    aria-expanded={row.open}
+                                    aria-label={row.open ? 'Collapse row' : 'Expand row'}
+                                >
+                                    <span class="chevron" class:open={row.open}>
+                                        <Icon icon={IconChevronDown} size="s" />
+                                    </span>
+                                </button>
+                            {/if}
+
                             <Text
                                 variant={rowIndex === rows.length - 1 ? 'm-500' : 'm-400'}
                                 color={rowIndex === rows.length - 1
@@ -124,7 +116,6 @@
                                 class="child-row"
                                 style="grid-template-columns: {childGridTemplate};"
                             >
-                                <div class="child-chevron" aria-hidden="true"></div>
                                 {#each columns as col}
                                     <div
                                         class="child-cell"
@@ -145,16 +136,13 @@
 </div>
 
 <style lang="scss">
-    /* Variables */
     .expandable-table {
         --row-pad-top: var(--space-4, 12px);
         --row-pad-bottom: var(--space-4, 12px);
         --row-pad-left: var(--space-6, 16px);
         --row-pad-right: var(--space-6, 16px);
-        --row-gap: var(--space-4, 12px);
+        --row-gap: 4px;
         --row-height: 40px;
-        --chevron-col-width: 40px;
-        --chevron-hit-size: var(--space-2, 8px);
 
         --divider-color: var(--border-neutral, rgba(0, 0, 0, 0.12));
         --divider-strong: var(--border-neutral-strong, rgba(0, 0, 0, 0.18));
@@ -184,15 +172,11 @@
     .table-header {
         display: grid;
         align-items: center;
-        gap: var(--row-gap);
         padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
         background: var(--bgcolor-neutral-tertiary, #fff);
         border-bottom: var(--border-width-s, 1px) solid var(--divider-strong);
         height: var(--row-height);
     }
-    .header-chevron {
-        width: var(--chevron-col-width);
-    }
     .header-cell {
         display: flex;
         align-items: center;
@@ -211,7 +195,6 @@
     .row-content {
         display: grid;
         align-items: center;
-        gap: var(--row-gap);
         padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
         border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
         height: var(--row-height);
@@ -221,28 +204,19 @@
     .cell {
         display: flex;
         align-items: center;
-        gap: var(--gap-s, 8px);
+        gap: 4px; /* tighter spacing between chevron + text + badge */
     }
 
     /* Chevron */
-    .chevron-cell {
-        width: var(--chevron-col-width);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding-left: calc(var(--row-pad-left) / 4);
-    }
     .chevron-button {
         background: none;
         border: none;
         cursor: pointer;
-        padding: var(--chevron-hit-size);
+        padding: 0; /* remove extra spacing */
         border-radius: var(--border-radius-s);
         display: flex;
         align-items: center;
         justify-content: center;
-        transition: background-color 0.2s ease;
-        height: calc(var(--row-height) - (var(--row-pad-top) + var(--row-pad-bottom)));
     }
     .chevron-button:hover {
         background: var(--overlay-hover);
@@ -282,7 +256,6 @@
     .child-row {
         display: grid;
         align-items: center;
-        gap: var(--row-gap);
         padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
         border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
         height: var(--row-height);
@@ -297,7 +270,4 @@
         display: flex;
         align-items: center;
     }
-    .child-chevron {
-        width: var(--chevron-col-width);
-    }
 </style>

From 6f0c94bc396bd9274521b26cd5e47659195dc7ff Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Sat, 16 Aug 2025 13:44:41 +0000
Subject: [PATCH 03/14] fix: responsiveness

---
 v2/pink-sb/src/lib/ExpandableTable.svelte | 64 +++++++++++++++++++----
 1 file changed, 54 insertions(+), 10 deletions(-)

diff --git a/v2/pink-sb/src/lib/ExpandableTable.svelte b/v2/pink-sb/src/lib/ExpandableTable.svelte
index fa414425d3..211c0ba7fd 100644
--- a/v2/pink-sb/src/lib/ExpandableTable.svelte
+++ b/v2/pink-sb/src/lib/ExpandableTable.svelte
@@ -137,10 +137,10 @@
 
 <style lang="scss">
     .expandable-table {
-        --row-pad-top: var(--space-4, 12px);
-        --row-pad-bottom: var(--space-4, 12px);
-        --row-pad-left: var(--space-6, 16px);
-        --row-pad-right: var(--space-6, 16px);
+        --row-pad-top: var(--space-3, 8px);
+        --row-pad-bottom: var(--space-3, 8px);
+        --row-pad-left: var(--space-4, 12px);
+        --row-pad-right: var(--space-4, 12px);
         --row-gap: 4px;
         --row-height: 40px;
 
@@ -153,9 +153,11 @@
         border: var(--border-width-s, 1px) solid var(--divider-strong);
         border-radius: var(--border-radius-s);
         background: var(--bgcolor-neutral-primary, #fff);
-        overflow: hidden;
+        overflow-x: auto; /* enables scroll on small screens */
+        width: 100%;
     }
 
+    /* dark mode adjustments */
     @media (prefers-color-scheme: dark) {
         .expandable-table {
             --divider-color: var(--border-neutral, rgba(255, 255, 255, 0.08));
@@ -175,7 +177,7 @@
         padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
         background: var(--bgcolor-neutral-tertiary, #fff);
         border-bottom: var(--border-width-s, 1px) solid var(--divider-strong);
-        height: var(--row-height);
+        min-height: var(--row-height);
     }
     .header-cell {
         display: flex;
@@ -197,14 +199,14 @@
         align-items: center;
         padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
         border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
-        height: var(--row-height);
+        min-height: var(--row-height);
         box-sizing: border-box;
         transition: background-color 0.2s ease;
     }
     .cell {
         display: flex;
         align-items: center;
-        gap: 4px; /* tighter spacing between chevron + text + badge */
+        gap: 6px; /* reduced chevron/text spacing */
     }
 
     /* Chevron */
@@ -212,11 +214,13 @@
         background: none;
         border: none;
         cursor: pointer;
-        padding: 0; /* remove extra spacing */
+        padding: 0;
         border-radius: var(--border-radius-s);
         display: flex;
         align-items: center;
         justify-content: center;
+        min-width: 24px;
+        min-height: 24px;
     }
     .chevron-button:hover {
         background: var(--overlay-hover);
@@ -258,7 +262,7 @@
         align-items: center;
         padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
         border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
-        height: var(--row-height);
+        min-height: var(--row-height);
         box-sizing: border-box;
         background: transparent;
         color: var(--fgcolor-neutral-secondary, rgba(0, 0, 0, 0.6));
@@ -270,4 +274,44 @@
         display: flex;
         align-items: center;
     }
+
+    /* --- RESPONSIVE BREAKPOINTS --- */
+
+    /* Small phones */
+    @media (max-width: 480px) {
+        .row-content,
+        .child-row,
+        .table-header {
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            padding: 8px;
+        }
+        .cell,
+        .child-cell {
+            gap: 4px;
+        }
+        .chevron-button {
+            min-width: 20px;
+            min-height: 20px;
+        }
+    }
+
+    /* Tablets */
+    @media (min-width: 481px) and (max-width: 768px) {
+        .row-content,
+        .child-row,
+        .table-header {
+            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+            padding: 10px 12px;
+        }
+    }
+
+    /* Large desktops */
+    @media (min-width: 1200px) {
+        .row-content,
+        .child-row,
+        .table-header {
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            padding: 14px 20px;
+        }
+    }
 </style>

From 4f3c8720e13c4e32cbaffd287d9c33ad37693c12 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Sun, 17 Aug 2025 19:02:10 +0000
Subject: [PATCH 04/14] fix: remove left chevron variants of accordian

---
 v2/pink-sb/src/lib/Accordion.svelte           | 98 ++++---------------
 .../src/stories/Accordion.stories.svelte      | 31 ------
 2 files changed, 20 insertions(+), 109 deletions(-)

diff --git a/v2/pink-sb/src/lib/Accordion.svelte b/v2/pink-sb/src/lib/Accordion.svelte
index ff47fad59b..243e5a7873 100644
--- a/v2/pink-sb/src/lib/Accordion.svelte
+++ b/v2/pink-sb/src/lib/Accordion.svelte
@@ -23,7 +23,6 @@
     export let titleVariant: 'm-500' | 'm-400' | 'l-600' | 'l-500' | 'l-400' | 'm-600' | undefined =
         'm-500';
     export let titleColor = '--fgcolor-neutral-primary';
-    export let chevronPosition: 'left' | 'right' = 'right';
 
     // Allows user to open the accordion by pressing the enter key
     function clickOnEnter(
@@ -62,58 +61,31 @@
             </span>
         {/if}
         <button type="button" on:click={() => (open = !open)} {disabled}>
-            {#if chevronPosition === 'left'}
-                <span class="chevron chevron-left" data-open={open}>
-                    <Icon icon={IconChevronDown} />
-                </span>
-            {/if}
-
             {#if icon && hasAvatarIcon}
-                <span class="avatar" class:avatar-with-left-chevron={chevronPosition === 'left'}>
+                <span class="avatar">
                     <Icon {icon} size="s" />
                 </span>
             {:else if icon}
-                <span
-                    class="no-avatar"
-                    class:no-avatar-with-left-chevron={chevronPosition === 'left'}
-                >
+                <span class="no-avatar">
                     <Icon {icon} size="m" />
                 </span>
             {/if}
-
-            {#if chevronPosition === 'left'}
-                <div class="title-content-left" class:title-with-icon={icon}>
-                    <Stack gap="s" direction="row" alignItems="center" inline>
-                        <Text variant={titleVariant} color={titleColor}>
-                            {title}
-                        </Text>
-
-                        {#if badge}
-                            <Badge size="xs" variant="secondary" type={badgeType} content={badge} />
-                        {/if}
-                    </Stack>
-                    <slot name="end" />
-                </div>
-            {:else}
-                <summary>
-                    <Stack gap="s" direction="row" alignItems="center" inline>
-                        <Text variant={titleVariant} color={titleColor}>
-                            {title}
-                        </Text>
-
-                        {#if badge}
-                            <Badge size="xs" variant="secondary" type={badgeType} content={badge} />
-                        {/if}
-                    </Stack>
-                    <slot name="end" />
-                </summary>
-            {/if}
-
-            {#if chevronPosition === 'right'}
-                <span class="chevron chevron-right" data-open={open}>
-                    <Icon icon={IconChevronDown} />
-                </span>
-            {/if}
+            <summary>
+                <Stack gap="s" direction="row" alignItems="center" inline>
+                    <Text variant={titleVariant} color={titleColor}>
+                        {title}
+                    </Text>
+
+                    {#if badge}
+                        <Badge size="xs" variant="secondary" type={badgeType} content={badge} />
+                    {/if}
+                </Stack>
+                <slot name="end" />
+            </summary>
+
+            <span class="chevron" data-open={open}>
+                <Icon icon={IconChevronDown} />
+            </span>
         </button>
         {#if open}
             <article transition:slide={{ duration: 200 }}>
@@ -180,21 +152,12 @@
                 border-radius: var(--border-radius-circle, 99999px);
                 border: var(--border-width-s) solid var(--border-neutral-strong,);
                 background: var(--bgcolor-neutral-secondary);
-
-                &.avatar-with-left-chevron {
-                    grid-column: 2 / 3;
-                }
             }
 
             .no-avatar {
                 margin-inline-end: var(--gap-s);
                 display: flex;
-
-                &.no-avatar-with-left-chevron {
-                    grid-column: 2 / 3;
-                }
             }
-
             summary {
                 grid-column: 2 / 3;
                 display: flex;
@@ -203,36 +166,15 @@
                 gap: var(--gap-s);
                 padding-inline-end: var(--gap-s);
             }
-
-            .title-content-left {
-                grid-column: 2 / 4;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                gap: var(--gap-s);
-                padding-inline-end: var(--gap-s);
-
-                &.title-with-icon {
-                    grid-column: 3 / 4;
-                }
-            }
             .chevron {
+                grid-column: 3 / -1;
+                margin-inline-start: auto;
                 display: flex;
                 align-items: center;
                 transition: rotate 300ms ease-in-out;
                 &[data-open='true'] {
                     rotate: 180deg;
                 }
-
-                &.chevron-left {
-                    grid-column: 1 / 2;
-                    margin-inline-end: var(--gap-s);
-                }
-
-                &.chevron-right {
-                    grid-column: 4 / -1;
-                    margin-inline-start: auto;
-                }
             }
         }
         article {
diff --git a/v2/pink-sb/src/stories/Accordion.stories.svelte b/v2/pink-sb/src/stories/Accordion.stories.svelte
index 5a5389fa9d..e326b35de3 100644
--- a/v2/pink-sb/src/stories/Accordion.stories.svelte
+++ b/v2/pink-sb/src/stories/Accordion.stories.svelte
@@ -39,37 +39,6 @@
         <Accordion title="I'm disabled" badge="Disabled" disabled>
             You shouldn't be able to open this item.
         </Accordion>
-        <Accordion title="Left chevron" chevronPosition="left">
-            This accordion has the chevron positioned on the left side.
-            <span slot="end">end slot</span>
-        </Accordion>
-        <Accordion title="Left chevron" icon={IconInfo} chevronPosition="left">
-            This accordion has the chevron positioned on the left side.
-        </Accordion>
-        <Accordion title="Left chevron with checkbox" selectable chevronPosition="left">
-            This accordion has both a checkbox and left-positioned chevron.
-        </Accordion>
-        <Accordion
-            title="Left chevron with avatar and checkbox"
-            chevronPosition="left"
-            icon={IconInfo}
-            selectable
-        >
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nisi eveniet neque unde
-            minima id?
-        </Accordion>
-        <Accordion
-            title="Left chevron with everything"
-            chevronPosition="left"
-            icon={IconInfo}
-            selectable
-            badge="Badge"
-        >
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut, expedita quisquam.
-            Quaerat nemo dolores voluptate neque iste beatae placeat qui deleniti quibusdam
-            pariatur, doloremque consequatur nam animi? Voluptate consectetur repellendus vitae?
-            Sequi, autem officia illum aut vitae porro eum sed?
-        </Accordion>
     </Stack>
 </Story>
 <Story name="Secondary">

From 18909bcef54939fc5dfd568097c3a4134ab8d441 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 18 Aug 2025 08:27:01 +0000
Subject: [PATCH 05/14] feat: add slot-based API (Root/Row/Cell)

---
 v2/pink-sb/src/lib/ExpandableTable.svelte     | 317 ------------------
 .../src/lib/expandable-table/cell/Cell.svelte |  68 ++++
 v2/pink-sb/src/lib/expandable-table/index.ts  |  20 ++
 .../src/lib/expandable-table/root/Root.svelte | 171 ++++++++++
 .../src/lib/expandable-table/row/Row.svelte   | 162 +++++++++
 v2/pink-sb/src/lib/index.ts                   |   2 +-
 .../stories/ExpandableTable.stories.svelte    | 294 ++++++++++++----
 7 files changed, 646 insertions(+), 388 deletions(-)
 delete mode 100644 v2/pink-sb/src/lib/ExpandableTable.svelte
 create mode 100644 v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
 create mode 100644 v2/pink-sb/src/lib/expandable-table/index.ts
 create mode 100644 v2/pink-sb/src/lib/expandable-table/root/Root.svelte
 create mode 100644 v2/pink-sb/src/lib/expandable-table/row/Row.svelte

diff --git a/v2/pink-sb/src/lib/ExpandableTable.svelte b/v2/pink-sb/src/lib/ExpandableTable.svelte
deleted file mode 100644
index 211c0ba7fd..0000000000
--- a/v2/pink-sb/src/lib/ExpandableTable.svelte
+++ /dev/null
@@ -1,317 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher } from 'svelte';
-    import Icon from '$lib/Icon.svelte';
-    import Text from '$lib/typography/Text.svelte';
-    import Badge from '$lib/Badge.svelte';
-    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
-    import { slide } from 'svelte/transition';
-
-    export interface ExpandableTableColumn {
-        id: string;
-        title: string;
-        width?: string;
-        align?: 'left' | 'center' | 'right';
-    }
-
-    export interface ExpandableTableRow {
-        id: string;
-        cells: Record<string, string>;
-        expandable?: boolean;
-        open?: boolean;
-        children?: ExpandableTableRow[];
-        badge?: {
-            content: string;
-            type?: 'success' | 'warning' | 'error';
-        };
-    }
-
-    export let columns: ExpandableTableColumn[] = [];
-    export let rows: ExpandableTableRow[] = [];
-    export let showHeader = true;
-
-    const dispatch = createEventDispatcher<{
-        toggle: { rowId: string; open: boolean };
-    }>();
-
-    const toggleRow = (rowId: string) => {
-        rows = rows.map((row) => (row.id === rowId ? { ...row, open: !row.open } : row));
-        const row = rows.find((r) => r.id === rowId);
-        if (row) dispatch('toggle', { rowId, open: row.open ?? false });
-    };
-
-    // Grid column templates
-    $: baseColumnWidths = columns.length ? columns.map((c) => c.width ?? '1fr').join(' ') : '1fr';
-    $: gridTemplateColumns = baseColumnWidths;
-    $: childGridTemplate = baseColumnWidths;
-
-    const getJustify = (align?: 'left' | 'center' | 'right') => {
-        switch (align) {
-            case 'right':
-                return 'flex-end';
-            case 'center':
-                return 'center';
-            default:
-                return 'flex-start';
-        }
-    };
-</script>
-
-<div class="expandable-table">
-    {#if showHeader && columns.length}
-        <div class="table-header" style="grid-template-columns: {gridTemplateColumns};">
-            {#each columns as col}
-                <div class="header-cell" style="justify-content: {getJustify(col.align)};">
-                    <Text variant="m-500" color="--fgcolor-neutral-secondary">
-                        {col.title}
-                    </Text>
-                </div>
-            {/each}
-        </div>
-    {/if}
-
-    <div class="table-body">
-        {#each rows as row, rowIndex (row.id)}
-            <div class="table-row" class:has-children={row.expandable} class:is-open={row.open}>
-                <div class="row-content" style="grid-template-columns: {gridTemplateColumns};">
-                    {#each columns as col, colIndex}
-                        <div class="cell" style="justify-content: {getJustify(col.align)};">
-                            {#if row.expandable && colIndex === 0}
-                                <button
-                                    class="chevron-button"
-                                    on:click={() => toggleRow(row.id)}
-                                    aria-expanded={row.open}
-                                    aria-label={row.open ? 'Collapse row' : 'Expand row'}
-                                >
-                                    <span class="chevron" class:open={row.open}>
-                                        <Icon icon={IconChevronDown} size="s" />
-                                    </span>
-                                </button>
-                            {/if}
-
-                            <Text
-                                variant={rowIndex === rows.length - 1 ? 'm-500' : 'm-400'}
-                                color={rowIndex === rows.length - 1
-                                    ? '--fgcolor-neutral-primary'
-                                    : '--fgcolor-neutral-secondary'}
-                            >
-                                {row.cells?.[col.id] ?? ''}
-                            </Text>
-
-                            {#if row.badge && colIndex === 0}
-                                <Badge
-                                    size="xs"
-                                    variant="secondary"
-                                    type={row.badge.type}
-                                    content={row.badge.content}
-                                />
-                            {/if}
-                        </div>
-                    {/each}
-                </div>
-
-                {#if row.expandable && row.open && row.children}
-                    <div class="expanded-content" transition:slide={{ duration: 200 }}>
-                        {#each row.children as child (child.id)}
-                            <div
-                                class="child-row"
-                                style="grid-template-columns: {childGridTemplate};"
-                            >
-                                {#each columns as col}
-                                    <div
-                                        class="child-cell"
-                                        style="justify-content: {getJustify(col.align)};"
-                                    >
-                                        <Text variant="m-400" color="--fgcolor-neutral-secondary">
-                                            {child.cells?.[col.id] ?? ''}
-                                        </Text>
-                                    </div>
-                                {/each}
-                            </div>
-                        {/each}
-                    </div>
-                {/if}
-            </div>
-        {/each}
-    </div>
-</div>
-
-<style lang="scss">
-    .expandable-table {
-        --row-pad-top: var(--space-3, 8px);
-        --row-pad-bottom: var(--space-3, 8px);
-        --row-pad-left: var(--space-4, 12px);
-        --row-pad-right: var(--space-4, 12px);
-        --row-gap: 4px;
-        --row-height: 40px;
-
-        --divider-color: var(--border-neutral, rgba(0, 0, 0, 0.12));
-        --divider-strong: var(--border-neutral-strong, rgba(0, 0, 0, 0.18));
-        --overlay-hover: var(--overlay-neutral-hover, rgba(0, 0, 0, 0.04));
-        --row-open-bg: var(--bgcolor-neutral-default, rgba(0, 0, 0, 0.02));
-        --accordion-bg: var(--bgcolor-neutral-default, var(--row-open-bg));
-
-        border: var(--border-width-s, 1px) solid var(--divider-strong);
-        border-radius: var(--border-radius-s);
-        background: var(--bgcolor-neutral-primary, #fff);
-        overflow-x: auto; /* enables scroll on small screens */
-        width: 100%;
-    }
-
-    /* dark mode adjustments */
-    @media (prefers-color-scheme: dark) {
-        .expandable-table {
-            --divider-color: var(--border-neutral, rgba(255, 255, 255, 0.08));
-            --divider-strong: var(--border-neutral-strong, rgba(255, 255, 255, 0.12));
-            --overlay-hover: var(--overlay-neutral-hover, rgba(255, 255, 255, 0.02));
-            --row-open-bg: var(--bgcolor-neutral-default-dark, rgba(255, 255, 255, 0.02));
-        }
-        .child-row {
-            background: var(--bgcolor-neutral-default-dark, rgba(255, 255, 255, 0.02));
-        }
-    }
-
-    /* Header */
-    .table-header {
-        display: grid;
-        align-items: center;
-        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
-        background: var(--bgcolor-neutral-tertiary, #fff);
-        border-bottom: var(--border-width-s, 1px) solid var(--divider-strong);
-        min-height: var(--row-height);
-    }
-    .header-cell {
-        display: flex;
-        align-items: center;
-    }
-
-    /* Rows */
-    .table-row.has-children:not(.is-open):hover .row-content {
-        background: var(--overlay-hover);
-    }
-    .table-row.is-open .row-content {
-        background: var(--row-open-bg);
-        border-bottom-color: var(--divider-strong);
-    }
-
-    /* Row content */
-    .row-content {
-        display: grid;
-        align-items: center;
-        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
-        border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
-        min-height: var(--row-height);
-        box-sizing: border-box;
-        transition: background-color 0.2s ease;
-    }
-    .cell {
-        display: flex;
-        align-items: center;
-        gap: 6px; /* reduced chevron/text spacing */
-    }
-
-    /* Chevron */
-    .chevron-button {
-        background: none;
-        border: none;
-        cursor: pointer;
-        padding: 0;
-        border-radius: var(--border-radius-s);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 24px;
-        min-height: 24px;
-    }
-    .chevron-button:hover {
-        background: var(--overlay-hover);
-    }
-    .chevron-button:focus-visible {
-        outline: var(--border-width-l) solid var(--border-focus);
-    }
-    .chevron {
-        display: flex;
-        transition: rotate 300ms ease-in-out;
-    }
-    .chevron.open {
-        rotate: 180deg;
-    }
-
-    /* Expanded content */
-    .expanded-content {
-        background: var(--accordion-bg);
-        padding-top: calc(var(--row-pad-top) / 2);
-        padding-bottom: var(--row-pad-bottom);
-        position: relative;
-    }
-    .expanded-content::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: calc(var(--border-width-s, 1px) * 2);
-        background: var(--divider-strong);
-        box-shadow: 0 -1px 0 var(--divider-color) inset;
-        z-index: 1;
-        pointer-events: none;
-    }
-
-    /* Child rows */
-    .child-row {
-        display: grid;
-        align-items: center;
-        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
-        border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
-        min-height: var(--row-height);
-        box-sizing: border-box;
-        background: transparent;
-        color: var(--fgcolor-neutral-secondary, rgba(0, 0, 0, 0.6));
-    }
-    .child-row:last-child {
-        border-bottom: none;
-    }
-    .child-cell {
-        display: flex;
-        align-items: center;
-    }
-
-    /* --- RESPONSIVE BREAKPOINTS --- */
-
-    /* Small phones */
-    @media (max-width: 480px) {
-        .row-content,
-        .child-row,
-        .table-header {
-            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            padding: 8px;
-        }
-        .cell,
-        .child-cell {
-            gap: 4px;
-        }
-        .chevron-button {
-            min-width: 20px;
-            min-height: 20px;
-        }
-    }
-
-    /* Tablets */
-    @media (min-width: 481px) and (max-width: 768px) {
-        .row-content,
-        .child-row,
-        .table-header {
-            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-            padding: 10px 12px;
-        }
-    }
-
-    /* Large desktops */
-    @media (min-width: 1200px) {
-        .row-content,
-        .child-row,
-        .table-header {
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            padding: 14px 20px;
-        }
-    }
-</style>
diff --git a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
new file mode 100644
index 0000000000..228e050f0d
--- /dev/null
+++ b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import type { RootProp } from '../index.js';
+    import Icon from '$lib/Icon.svelte';
+    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
+
+    export let root: RootProp & {
+        columns: Array<{ id: string; align?: 'left' | 'center' | 'right' }>;
+        getJustify: (align?: 'left' | 'center' | 'right') => string;
+    };
+    export let column: string;
+    export let expandable: boolean = true;
+    export let isOpen: boolean = false;
+    export let toggle: () => void = () => {};
+
+    $: columnIndex = root.columns.findIndex((c) => c.id === column);
+    $: justify = root.getJustify(root.columns[columnIndex]?.align);
+    $: isFirstCell = columnIndex === 0;
+</script>
+
+<div class="cell" style="justify-content: {justify};">
+    {#if isFirstCell && expandable}
+        <button
+            class="chevron-button"
+            on:click={toggle}
+            aria-expanded={isOpen}
+            aria-label={isOpen ? 'Collapse row' : 'Expand row'}
+        >
+            <span class="chevron" class:open={isOpen}>
+                <Icon icon={IconChevronDown} size="s" />
+            </span>
+        </button>
+    {/if}
+    <slot />
+</div>
+
+<style lang="scss">
+    .cell {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .chevron-button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        border-radius: var(--border-radius-s);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 24px;
+        min-height: 24px;
+    }
+    .chevron-button:hover {
+        background: var(--overlay-hover);
+    }
+    .chevron-button:focus-visible {
+        outline: var(--border-width-l) solid var(--border-focus);
+    }
+    .chevron {
+        display: flex;
+        transition: rotate 300ms ease-in-out;
+    }
+    .chevron.open {
+        rotate: 180deg;
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/expandable-table/index.ts b/v2/pink-sb/src/lib/expandable-table/index.ts
new file mode 100644
index 0000000000..323eb2eaf2
--- /dev/null
+++ b/v2/pink-sb/src/lib/expandable-table/index.ts
@@ -0,0 +1,20 @@
+import Root from './root/Root.svelte';
+import Row from './row/Row.svelte';
+import Cell from './cell/Cell.svelte';
+
+export type RootProp = {
+    single: boolean;
+    openIds: string[];
+    isOpen: (id: string) => boolean;
+    open: (id: string) => void;
+    close: (id: string) => void;
+    toggle: (id: string) => void;
+    register: (id: string) => void;
+    unregister: (id: string) => void;
+};
+
+export default {
+    Root,
+    Row,
+    Cell
+};
diff --git a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
new file mode 100644
index 0000000000..52153334a3
--- /dev/null
+++ b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+    import type { RootProp } from '../index.js';
+    import Text from '$lib/typography/Text.svelte';
+
+    export type ExpandableTableColumn = {
+        id: string;
+        title?: string;
+        width?: string; // e.g. '2fr'
+        align?: 'left' | 'center' | 'right';
+    };
+
+    export let single: boolean = false;
+    export let openIds: string[] = [];
+    export let columns: ExpandableTableColumn[] = [];
+    export let showHeader: boolean = true;
+
+    let registeredIds: Set<string> = new Set();
+
+    function isOpen(id: string): boolean {
+        return openIds.includes(id);
+    }
+
+    function open(id: string): void {
+        if (!registeredIds.has(id)) return;
+        if (single) {
+            openIds = [id];
+        } else if (!openIds.includes(id)) {
+            openIds = [...openIds, id];
+        }
+    }
+
+    function close(id: string): void {
+        if (!registeredIds.has(id)) return;
+        openIds = openIds.filter((openId) => openId !== id);
+    }
+
+    function toggle(id: string): void {
+        if (isOpen(id)) close(id);
+        else open(id);
+    }
+
+    function register(id: string): void {
+        registeredIds.add(id);
+        registeredIds = registeredIds;
+    }
+
+    function unregister(id: string): void {
+        registeredIds.delete(id);
+        registeredIds = registeredIds;
+        openIds = openIds.filter((openId) => openId !== id);
+    }
+
+    // Grid column templates
+    $: baseColumnWidths = columns.length ? columns.map((c) => c.width ?? '1fr').join(' ') : '1fr';
+    $: gridTemplateColumns = baseColumnWidths;
+    $: childGridTemplate = baseColumnWidths;
+
+    const getJustify = (align?: 'left' | 'center' | 'right') => {
+        switch (align) {
+            case 'right':
+                return 'flex-end';
+            case 'center':
+                return 'center';
+            default:
+                return 'flex-start';
+        }
+    };
+
+    $: root = {
+        single,
+        openIds,
+        isOpen,
+        open,
+        close,
+        toggle,
+        register,
+        unregister,
+        columns,
+        gridTemplateColumns,
+        childGridTemplate,
+        getJustify
+    } as RootProp & {
+        columns: ExpandableTableColumn[];
+        gridTemplateColumns: string;
+        childGridTemplate: string;
+        getJustify: typeof getJustify;
+    };
+</script>
+
+<div class="expandable-table">
+    {#if showHeader && columns.length}
+        <div class="table-header" style="grid-template-columns: {gridTemplateColumns};">
+            <slot name="header">
+                {#each columns as col}
+                    <div class="header-cell" style="justify-content: {getJustify(col.align)};">
+                        <Text variant="m-500" color="--fgcolor-neutral-secondary">{col.title}</Text>
+                    </div>
+                {/each}
+            </slot>
+        </div>
+    {/if}
+
+    <div class="table-body">
+        <slot {root} />
+    </div>
+</div>
+
+<style lang="scss">
+    .expandable-table {
+        --row-pad-top: var(--space-3, 8px);
+        --row-pad-bottom: var(--space-3, 8px);
+        --row-pad-left: var(--space-4, 12px);
+        --row-pad-right: var(--space-4, 12px);
+        --row-gap: 4px;
+        --row-height: 40px;
+
+        --divider-color: var(--border-neutral, rgba(0, 0, 0, 0.12));
+        --divider-strong: var(--border-neutral-strong, rgba(0, 0, 0, 0.18));
+        --overlay-hover: var(--overlay-neutral-hover, rgba(0, 0, 0, 0.04));
+        --row-open-bg: var(--bgcolor-neutral-default, rgba(0, 0, 0, 0.02));
+        --accordion-bg: var(--bgcolor-neutral-default, var(--row-open-bg));
+
+        border: var(--border-width-s, 1px) solid var(--divider-strong);
+        border-radius: var(--border-radius-s);
+        background: var(--bgcolor-neutral-primary, #fff);
+        overflow-x: auto;
+        width: 100%;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .expandable-table {
+            --divider-color: var(--border-neutral, rgba(255, 255, 255, 0.08));
+            --divider-strong: var(--border-neutral-strong, rgba(255, 255, 255, 0.12));
+            --overlay-hover: var(--overlay-neutral-hover, rgba(255, 255, 255, 0.02));
+            --row-open-bg: var(--bgcolor-neutral-default-dark, rgba(255, 255, 255, 0.02));
+        }
+    }
+
+    .table-header {
+        display: grid;
+        align-items: center;
+        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
+        background: var(--bgcolor-neutral-tertiary, #fff);
+        border-bottom: var(--border-width-s, 1px) solid var(--divider-strong);
+        min-height: var(--row-height);
+    }
+    .header-cell {
+        display: flex;
+        align-items: center;
+    }
+
+    /* Responsive (match legacy) */
+    @media (max-width: 480px) {
+        .table-header {
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            padding: 8px;
+        }
+    }
+    @media (min-width: 481px) and (max-width: 768px) {
+        .table-header {
+            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+            padding: 10px 12px;
+        }
+    }
+    @media (min-width: 1200px) {
+        .table-header {
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            padding: 14px 20px;
+        }
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
new file mode 100644
index 0000000000..8e0ad0ea04
--- /dev/null
+++ b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import type { RootProp } from '../index.js';
+    import Icon from '$lib/Icon.svelte';
+    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
+    import { slide } from 'svelte/transition';
+
+    export let root: RootProp & {
+        gridTemplateColumns: string;
+        childGridTemplate: string;
+        getJustify: (align?: 'left' | 'center' | 'right') => string;
+        columns: Array<{ id: string; align?: 'left' | 'center' | 'right' }>;
+    };
+    export let id: string;
+    export let disabled: boolean = false;
+    export let expandable: boolean = true;
+
+    const toggle = () => {
+        if (disabled || !expandable) return;
+        root.toggle(id);
+    };
+
+    onMount(() => {
+        if (id) root.register(id);
+        return () => {
+            if (id) root.unregister(id);
+        };
+    });
+
+    $: isOpen = root.isOpen(id);
+</script>
+
+<div class="table-row" class:has-children={expandable} class:is-open={isOpen}>
+    <div class="row-content" style="grid-template-columns: {root.gridTemplateColumns};">
+        <slot />
+    </div>
+
+    {#if isOpen}
+        <div class="expanded-content" transition:slide={{ duration: 200 }}>
+            <slot name="summary" {root} />
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .table-row.has-children:not(.is-open):hover .row-content {
+        background: var(--overlay-hover);
+    }
+    .table-row.is-open .row-content {
+        background: var(--row-open-bg);
+        border-bottom-color: var(--divider-strong);
+    }
+
+    .row-content {
+        display: grid;
+        align-items: center;
+        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
+        border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
+        min-height: var(--row-height);
+        box-sizing: border-box;
+        transition: background-color 0.2s ease;
+    }
+    .cell {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .chevron-button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        border-radius: var(--border-radius-s);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 24px;
+        min-height: 24px;
+    }
+    .chevron-button:hover {
+        background: var(--overlay-hover);
+    }
+    .chevron-button:focus-visible {
+        outline: var(--border-width-l) solid var(--border-focus);
+    }
+    .chevron {
+        display: flex;
+        transition: rotate 300ms ease-in-out;
+    }
+    .chevron.open {
+        rotate: 180deg;
+    }
+
+    .expanded-content {
+        background: var(--accordion-bg);
+        padding-top: calc(var(--row-pad-top) / 2);
+        padding-bottom: var(--row-pad-bottom);
+        position: relative;
+    }
+    .expanded-content::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: calc(var(--border-width-s, 1px) * 2);
+        background: var(--divider-strong);
+        box-shadow: 0 -1px 0 var(--divider-color) inset;
+        z-index: 1;
+        pointer-events: none;
+    }
+
+    :global(.child-row) {
+        display: grid;
+        align-items: center;
+        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
+        border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
+        min-height: var(--row-height);
+        box-sizing: border-box;
+        background: transparent;
+        color: var(--fgcolor-neutral-secondary, rgba(0, 0, 0, 0.6));
+    }
+    :global(.child-row:last-child) {
+        border-bottom: none;
+    }
+    :global(.child-cell) {
+        display: flex;
+        align-items: center;
+    }
+
+    /* Responsive (match legacy) */
+    @media (max-width: 480px) {
+        .row-content,
+        :global(.child-row) {
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            padding: 8px;
+        }
+        .cell,
+        :global(.child-cell) {
+            gap: 4px;
+        }
+        .chevron-button {
+            min-width: 20px;
+            min-height: 20px;
+        }
+    }
+    @media (min-width: 481px) and (max-width: 768px) {
+        .row-content,
+        :global(.child-row) {
+            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+            padding: 10px 12px;
+        }
+    }
+    @media (min-width: 1200px) {
+        .row-content,
+        :global(.child-row) {
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            padding: 14px 20px;
+        }
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
index bf80278c65..b1479f6c04 100644
--- a/v2/pink-sb/src/lib/index.ts
+++ b/v2/pink-sb/src/lib/index.ts
@@ -3,7 +3,7 @@ export { default as AvatarGroup } from './avatar/AvatarGroup.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Breadcrumbs } from './Breadcrumbs.svelte';
 export { default as Divider } from './Divider.svelte';
-export { default as ExpandableTable } from './ExpandableTable.svelte';
+export { default as Expandable } from './expandable-table/index.js';
 export { default as FloatingActionBar } from './FloatingActionBar.svelte';
 export { default as InteractiveText } from './InteractiveText.svelte';
 export { default as Root } from './Root.svelte';
diff --git a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
index 1bed1c1ee6..122b6763d9 100644
--- a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
+++ b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
@@ -1,19 +1,33 @@
 <script context="module" lang="ts">
-    import ExpandableTable from '$lib/ExpandableTable.svelte';
+    import { Expandable as ExpandableTable, Typography, Badge } from '$lib/index.js';
     import type { MetaProps } from '@storybook/addon-svelte-csf';
 
     export const meta: MetaProps = {
-        title: 'Components/ExpandableTable',
-        component: ExpandableTable,
-        args: {
-            showHeader: true
-        }
+        title: 'Components/ExpandableTable'
     };
 </script>
 
 <script lang="ts">
-    import { Story, Template } from '@storybook/addon-svelte-csf';
-    import type { ExpandableTableColumn, ExpandableTableRow } from '$lib/ExpandableTable.svelte';
+    import { Story } from '@storybook/addon-svelte-csf';
+
+    export interface ExpandableTableColumn {
+        id: string;
+        title: string;
+        width?: string;
+        align?: 'left' | 'center' | 'right';
+    }
+
+    export interface ExpandableTableRow {
+        id: string;
+        cells: Record<string, string>;
+        expandable?: boolean;
+        open?: boolean;
+        children?: ExpandableTableRow[];
+        badge?: {
+            content: string;
+            type?: 'success' | 'warning' | 'error';
+        };
+    }
 
     const columns: ExpandableTableColumn[] = [
         { id: 'service', title: 'Service', width: '2fr', align: 'left' },
@@ -165,7 +179,6 @@
                 }
             ]
         },
-        // total shown as a final non-expandable row inside the table
         {
             id: 'total-row',
             cells: {
@@ -178,81 +191,222 @@
     ];
 
     let data = billingData;
-
-    function handleToggle(event: CustomEvent<{ rowId: string; open: boolean }>) {
-        console.log('Row toggled:', event.detail);
-    }
 </script>
 
-<Template let:args>
-    <ExpandableTable {...args} />
-</Template>
+<Story name="Billing Example">
+    <ExpandableTable.Root {columns} showHeader={false} let:root>
+        {#each data as row, rowIndex (row.id)}
+            <ExpandableTable.Row {root} id={row.id} expandable={row.expandable ?? false}>
+                {#each columns as col, colIndex}
+                    <ExpandableTable.Cell
+                        {root}
+                        column={col.id}
+                        expandable={row.expandable ?? false}
+                        isOpen={root.isOpen(row.id)}
+                        toggle={() => root.toggle(row.id)}
+                    >
+                        <Typography.Text
+                            variant={rowIndex === data.length - 1 ? 'm-500' : 'm-400'}
+                            color={rowIndex === data.length - 1
+                                ? '--fgcolor-neutral-primary'
+                                : '--fgcolor-neutral-secondary'}
+                        >
+                            {row.cells?.[col.id] ?? ''}
+                        </Typography.Text>
+                        {#if row.badge && colIndex === 0}
+                            <Badge
+                                size="xs"
+                                variant="secondary"
+                                type={row.badge.type}
+                                content={row.badge.content}
+                            />
+                        {/if}
+                    </ExpandableTable.Cell>
+                {/each}
 
-<Story name="Billing Example" let:args>
-    <ExpandableTable {...args} {columns} showHeader={false} rows={data} on:toggle={handleToggle} />
+                <svelte:fragment slot="summary">
+                    {#if row.children}
+                        {#each row.children as child (child.id)}
+                            <div
+                                class="child-row"
+                                style="grid-template-columns: {root.childGridTemplate};"
+                            >
+                                {#each columns as col}
+                                    <div
+                                        class="child-cell"
+                                        style="justify-content: {root.getJustify(col.align)};"
+                                    >
+                                        <Typography.Text
+                                            variant="m-400"
+                                            color="--fgcolor-neutral-secondary"
+                                        >
+                                            {child.cells?.[col.id] ?? ''}
+                                        </Typography.Text>
+                                    </div>
+                                {/each}
+                            </div>
+                        {/each}
+                    {/if}
+                </svelte:fragment>
+            </ExpandableTable.Row>
+        {/each}
+    </ExpandableTable.Root>
 </Story>
 
-<Story name="Simple Example" let:args>
-    <ExpandableTable
-        {...args}
+<Story name="Simple Example">
+    <ExpandableTable.Root
         columns={[
             { id: 'name', title: 'Name', align: 'left' },
             { id: 'value', title: 'Value', align: 'right' }
         ]}
-        rows={[
-            {
-                id: 'parent1',
-                cells: { name: 'Parent Item 1', value: '100' },
-                expandable: true,
-                open: false,
-                children: [
-                    { id: 'child1', cells: { name: 'Child Item 1', value: '50' } },
-                    { id: 'child2', cells: { name: 'Child Item 2', value: '50' } }
-                ]
-            },
-            {
-                id: 'parent2',
-                cells: { name: 'Parent Item 2', value: '200' },
-                expandable: false
-            }
-        ]}
-        on:toggle={handleToggle}
-    />
+        let:root
+    >
+        {#each [{ id: 'parent1', cells: { name: 'Parent Item 1', value: '100' }, expandable: true, children: [{ id: 'child1', cells: { name: 'Child Item 1', value: '50' } }, { id: 'child2', cells: { name: 'Child Item 2', value: '50' } }] }, { id: 'parent2', cells: { name: 'Parent Item 2', value: '200' }, expandable: false }] as rows, i (rows.id)}
+            <ExpandableTable.Row {root} id={rows.id} expandable={rows.expandable ?? false}>
+                <ExpandableTable.Cell
+                    {root}
+                    column="name"
+                    expandable={rows.expandable ?? false}
+                    isOpen={root.isOpen(rows.id)}
+                    toggle={() => root.toggle(rows.id)}
+                >
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {rows.cells.name}
+                    </Typography.Text>
+                </ExpandableTable.Cell>
+                <ExpandableTable.Cell
+                    {root}
+                    column="value"
+                    expandable={rows.expandable ?? false}
+                    isOpen={root.isOpen(rows.id)}
+                    toggle={() => root.toggle(rows.id)}
+                >
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {rows.cells.value}
+                    </Typography.Text>
+                </ExpandableTable.Cell>
+
+                <svelte:fragment slot="summary">
+                    {#if rows.children}
+                        {#each rows.children as child}
+                            <div
+                                class="child-row"
+                                style="grid-template-columns: {root.childGridTemplate};"
+                            >
+                                <div class="child-cell">
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.name}
+                                    </Typography.Text>
+                                </div>
+                                <div class="child-cell" style="justify-content: flex-end;">
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.value}
+                                    </Typography.Text>
+                                </div>
+                            </div>
+                        {/each}
+                    {/if}
+                </svelte:fragment>
+            </ExpandableTable.Row>
+        {/each}
+    </ExpandableTable.Root>
 </Story>
 
-<Story name="With Badges" let:args>
-    <ExpandableTable
-        {...args}
+<Story name="With Badges">
+    <ExpandableTable.Root
         columns={[
             { id: 'service', title: 'Service', align: 'left' },
             { id: 'status', title: 'Status', align: 'center' },
             { id: 'amount', title: 'Amount', align: 'right' }
         ]}
-        rows={[
-            {
-                id: 'service1',
-                cells: { service: 'Premium Service', status: 'Active', amount: '$29.99' },
-                expandable: true,
-                open: false,
-                badge: { content: 'NEW', type: 'success' },
-                children: [
-                    {
-                        id: 'feature1',
-                        cells: { service: 'Feature A', status: 'Included', amount: '$0.00' }
-                    },
-                    {
-                        id: 'feature2',
-                        cells: { service: 'Feature B', status: 'Included', amount: '$0.00' }
-                    }
-                ]
-            },
-            {
-                id: 'service2',
-                cells: { service: 'Basic Service', status: 'Active', amount: '$9.99' },
-                expandable: false,
-                badge: { content: 'LEGACY', type: 'warning' }
-            }
-        ]}
-        on:toggle={handleToggle}
-    />
+        let:root
+    >
+        {#each [{ id: 'service1', cells: { service: 'Premium Service', status: 'Active', amount: '$29.99' }, expandable: true, badge: { content: 'NEW', type: 'success' }, children: [{ id: 'feature1', cells: { service: 'Feature A', status: 'Included', amount: '$0.00' } }, { id: 'feature2', cells: { service: 'Feature B', status: 'Included', amount: '$0.00' } }] }, { id: 'service2', cells: { service: 'Basic Service', status: 'Active', amount: '$9.99' }, expandable: false, badge: { content: 'LEGACY', type: 'warning' } }] as rows (rows.id)}
+            <ExpandableTable.Row {root} id={rows.id} expandable={rows.expandable ?? false}>
+                <ExpandableTable.Cell
+                    {root}
+                    column="service"
+                    expandable={rows.expandable ?? false}
+                    isOpen={root.isOpen(rows.id)}
+                    toggle={() => root.toggle(rows.id)}
+                >
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {rows.cells.service}
+                    </Typography.Text>
+                    {#if rows.badge}
+                        <Badge
+                            size="xs"
+                            variant="secondary"
+                            type={rows.badge.type}
+                            content={rows.badge.content}
+                        />
+                    {/if}
+                </ExpandableTable.Cell>
+                <ExpandableTable.Cell
+                    {root}
+                    column="status"
+                    expandable={rows.expandable ?? false}
+                    isOpen={root.isOpen(rows.id)}
+                    toggle={() => root.toggle(rows.id)}
+                >
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {rows.cells.status}
+                    </Typography.Text>
+                </ExpandableTable.Cell>
+                <ExpandableTable.Cell
+                    {root}
+                    column="amount"
+                    expandable={rows.expandable ?? false}
+                    isOpen={root.isOpen(rows.id)}
+                    toggle={() => root.toggle(rows.id)}
+                >
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {rows.cells.amount}
+                    </Typography.Text>
+                </ExpandableTable.Cell>
+
+                <svelte:fragment slot="summary">
+                    {#if rows.children}
+                        {#each rows.children as child}
+                            <div
+                                class="child-row"
+                                style="grid-template-columns: {root.childGridTemplate};"
+                            >
+                                <div class="child-cell">
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.service}
+                                    </Typography.Text>
+                                </div>
+                                <div class="child-cell" style="justify-content: center;">
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.status}
+                                    </Typography.Text>
+                                </div>
+                                <div class="child-cell" style="justify-content: flex-end;">
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.amount}
+                                    </Typography.Text>
+                                </div>
+                            </div>
+                        {/each}
+                    {/if}
+                </svelte:fragment>
+            </ExpandableTable.Row>
+        {/each}
+    </ExpandableTable.Root>
 </Story>

From 0f02493d9b8c3680f041f3ff579004ee773bb23e Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Sun, 24 Aug 2025 11:42:53 +0000
Subject: [PATCH 06/14] fix:improve type structure

---
 .../src/lib/expandable-table/cell/Cell.svelte |  9 +++-----
 v2/pink-sb/src/lib/expandable-table/index.ts  | 11 +---------
 .../src/lib/expandable-table/root/Root.svelte | 20 ++++--------------
 .../src/lib/expandable-table/row/Row.svelte   |  9 ++------
 v2/pink-sb/src/lib/expandable-table/types.ts  | 21 +++++++++++++++++++
 .../stories/ExpandableTable.stories.svelte    |  2 +-
 6 files changed, 32 insertions(+), 40 deletions(-)
 create mode 100644 v2/pink-sb/src/lib/expandable-table/types.ts

diff --git a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
index 228e050f0d..1e57484fce 100644
--- a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
-    import type { RootProp } from '../index.js';
+    import type { RootProp } from '../types.js';
     import Icon from '$lib/Icon.svelte';
     import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
 
-    export let root: RootProp & {
-        columns: Array<{ id: string; align?: 'left' | 'center' | 'right' }>;
-        getJustify: (align?: 'left' | 'center' | 'right') => string;
-    };
+    export let root: RootProp;
     export let column: string;
     export let expandable: boolean = true;
     export let isOpen: boolean = false;
     export let toggle: () => void = () => {};
 
     $: columnIndex = root.columns.findIndex((c) => c.id === column);
-    $: justify = root.getJustify(root.columns[columnIndex]?.align);
+    $: justify = root.alignment(root.columns[columnIndex]?.align);
     $: isFirstCell = columnIndex === 0;
 </script>
 
diff --git a/v2/pink-sb/src/lib/expandable-table/index.ts b/v2/pink-sb/src/lib/expandable-table/index.ts
index 323eb2eaf2..937a2410b5 100644
--- a/v2/pink-sb/src/lib/expandable-table/index.ts
+++ b/v2/pink-sb/src/lib/expandable-table/index.ts
@@ -2,16 +2,7 @@ import Root from './root/Root.svelte';
 import Row from './row/Row.svelte';
 import Cell from './cell/Cell.svelte';
 
-export type RootProp = {
-    single: boolean;
-    openIds: string[];
-    isOpen: (id: string) => boolean;
-    open: (id: string) => void;
-    close: (id: string) => void;
-    toggle: (id: string) => void;
-    register: (id: string) => void;
-    unregister: (id: string) => void;
-};
+export type { ExpandableTableColumn, RootProp } from './types.js';
 
 export default {
     Root,
diff --git a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
index 52153334a3..a1ec20b72e 100644
--- a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
-    import type { RootProp } from '../index.js';
+    import type { RootProp, ExpandableTableColumn } from '../types.js';
     import Text from '$lib/typography/Text.svelte';
 
-    export type ExpandableTableColumn = {
-        id: string;
-        title?: string;
-        width?: string; // e.g. '2fr'
-        align?: 'left' | 'center' | 'right';
-    };
-
     export let single: boolean = false;
     export let openIds: string[] = [];
     export let columns: ExpandableTableColumn[] = [];
@@ -55,7 +48,7 @@
     $: gridTemplateColumns = baseColumnWidths;
     $: childGridTemplate = baseColumnWidths;
 
-    const getJustify = (align?: 'left' | 'center' | 'right') => {
+    const alignment = (align?: 'left' | 'center' | 'right') => {
         switch (align) {
             case 'right':
                 return 'flex-end';
@@ -78,12 +71,7 @@
         columns,
         gridTemplateColumns,
         childGridTemplate,
-        getJustify
-    } as RootProp & {
-        columns: ExpandableTableColumn[];
-        gridTemplateColumns: string;
-        childGridTemplate: string;
-        getJustify: typeof getJustify;
+        alignment
     };
 </script>
 
@@ -92,7 +80,7 @@
         <div class="table-header" style="grid-template-columns: {gridTemplateColumns};">
             <slot name="header">
                 {#each columns as col}
-                    <div class="header-cell" style="justify-content: {getJustify(col.align)};">
+                    <div class="header-cell" style="justify-content: {alignment(col.align)};">
                         <Text variant="m-500" color="--fgcolor-neutral-secondary">{col.title}</Text>
                     </div>
                 {/each}
diff --git a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
index 8e0ad0ea04..2f3a441c80 100644
--- a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
@@ -1,16 +1,11 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import type { RootProp } from '../index.js';
+    import type { RootProp } from '../types.js';
     import Icon from '$lib/Icon.svelte';
     import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
     import { slide } from 'svelte/transition';
 
-    export let root: RootProp & {
-        gridTemplateColumns: string;
-        childGridTemplate: string;
-        getJustify: (align?: 'left' | 'center' | 'right') => string;
-        columns: Array<{ id: string; align?: 'left' | 'center' | 'right' }>;
-    };
+    export let root: RootProp;
     export let id: string;
     export let disabled: boolean = false;
     export let expandable: boolean = true;
diff --git a/v2/pink-sb/src/lib/expandable-table/types.ts b/v2/pink-sb/src/lib/expandable-table/types.ts
new file mode 100644
index 0000000000..d1307c56f7
--- /dev/null
+++ b/v2/pink-sb/src/lib/expandable-table/types.ts
@@ -0,0 +1,21 @@
+export type ExpandableTableColumn = {
+    id: string;
+    title?: string;
+    width?: string; // e.g. '2fr'
+    align?: 'left' | 'center' | 'right';
+};
+
+export type RootProp = {
+    single: boolean;
+    openIds: string[];
+    isOpen: (id: string) => boolean;
+    open: (id: string) => void;
+    close: (id: string) => void;
+    toggle: (id: string) => void;
+    register: (id: string) => void;
+    unregister: (id: string) => void;
+    columns: ExpandableTableColumn[];
+    gridTemplateColumns: string;
+    childGridTemplate: string;
+    alignment: (align?: 'left' | 'center' | 'right') => string;
+};
diff --git a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
index 122b6763d9..b64eaf58f7 100644
--- a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
+++ b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
@@ -234,7 +234,7 @@
                                 {#each columns as col}
                                     <div
                                         class="child-cell"
-                                        style="justify-content: {root.getJustify(col.align)};"
+                                        style="justify-content: {root.alignment(col.align)};"
                                     >
                                         <Typography.Text
                                             variant="m-400"

From f2c492ec232acd18befe3b3ccf962d3fa63deb99 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Sun, 24 Aug 2025 11:54:41 +0000
Subject: [PATCH 07/14] fix:lint error

---
 .../src/lib/expandable-table/root/Root.svelte |  2 +-
 .../src/lib/expandable-table/row/Row.svelte   | 44 -------------------
 .../stories/ExpandableTable.stories.svelte    |  2 +-
 3 files changed, 2 insertions(+), 46 deletions(-)

diff --git a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
index a1ec20b72e..7ff8427394 100644
--- a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { RootProp, ExpandableTableColumn } from '../types.js';
+    import type { ExpandableTableColumn } from '../types.js';
     import Text from '$lib/typography/Text.svelte';
 
     export let single: boolean = false;
diff --git a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
index 2f3a441c80..9cc75d0ea1 100644
--- a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
@@ -1,20 +1,12 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import type { RootProp } from '../types.js';
-    import Icon from '$lib/Icon.svelte';
-    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
     import { slide } from 'svelte/transition';
 
     export let root: RootProp;
     export let id: string;
-    export let disabled: boolean = false;
     export let expandable: boolean = true;
 
-    const toggle = () => {
-        if (disabled || !expandable) return;
-        root.toggle(id);
-    };
-
     onMount(() => {
         if (id) root.register(id);
         return () => {
@@ -55,37 +47,6 @@
         box-sizing: border-box;
         transition: background-color 0.2s ease;
     }
-    .cell {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-    }
-
-    .chevron-button {
-        background: none;
-        border: none;
-        cursor: pointer;
-        padding: 0;
-        border-radius: var(--border-radius-s);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 24px;
-        min-height: 24px;
-    }
-    .chevron-button:hover {
-        background: var(--overlay-hover);
-    }
-    .chevron-button:focus-visible {
-        outline: var(--border-width-l) solid var(--border-focus);
-    }
-    .chevron {
-        display: flex;
-        transition: rotate 300ms ease-in-out;
-    }
-    .chevron.open {
-        rotate: 180deg;
-    }
 
     .expanded-content {
         background: var(--accordion-bg);
@@ -131,14 +92,9 @@
             grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
             padding: 8px;
         }
-        .cell,
         :global(.child-cell) {
             gap: 4px;
         }
-        .chevron-button {
-            min-width: 20px;
-            min-height: 20px;
-        }
     }
     @media (min-width: 481px) and (max-width: 768px) {
         .row-content,
diff --git a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
index b64eaf58f7..22183289fa 100644
--- a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
+++ b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
@@ -261,7 +261,7 @@
         ]}
         let:root
     >
-        {#each [{ id: 'parent1', cells: { name: 'Parent Item 1', value: '100' }, expandable: true, children: [{ id: 'child1', cells: { name: 'Child Item 1', value: '50' } }, { id: 'child2', cells: { name: 'Child Item 2', value: '50' } }] }, { id: 'parent2', cells: { name: 'Parent Item 2', value: '200' }, expandable: false }] as rows, i (rows.id)}
+        {#each [{ id: 'parent1', cells: { name: 'Parent Item 1', value: '100' }, expandable: true, children: [{ id: 'child1', cells: { name: 'Child Item 1', value: '50' } }, { id: 'child2', cells: { name: 'Child Item 2', value: '50' } }] }, { id: 'parent2', cells: { name: 'Parent Item 2', value: '200' }, expandable: false }] as rows (rows.id)}
             <ExpandableTable.Row {root} id={rows.id} expandable={rows.expandable ?? false}>
                 <ExpandableTable.Cell
                     {root}

From 60a0d5c208c811502fe4c3e77f734353ffcc39b9 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 25 Aug 2025 18:30:57 +0000
Subject: [PATCH 08/14] standardize 40px row height and fix alignment and used
 same icon component

---
 .../src/lib/expandable-table/cell/Cell.svelte | 31 ++++++-------------
 .../src/lib/expandable-table/root/Root.svelte | 18 ++++++-----
 .../src/lib/expandable-table/row/Row.svelte   | 20 ++++++------
 3 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
index 1e57484fce..f453405884 100644
--- a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
@@ -2,6 +2,7 @@
     import type { RootProp } from '../types.js';
     import Icon from '$lib/Icon.svelte';
     import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
+    import Button from '$lib/button/Button.svelte';
 
     export let root: RootProp;
     export let column: string;
@@ -16,8 +17,10 @@
 
 <div class="cell" style="justify-content: {justify};">
     {#if isFirstCell && expandable}
-        <button
-            class="chevron-button"
+        <Button
+            variant="ghost"
+            icon
+            size="s"
             on:click={toggle}
             aria-expanded={isOpen}
             aria-label={isOpen ? 'Collapse row' : 'Expand row'}
@@ -25,7 +28,7 @@
             <span class="chevron" class:open={isOpen}>
                 <Icon icon={IconChevronDown} size="s" />
             </span>
-        </button>
+        </Button>
     {/if}
     <slot />
 </div>
@@ -34,31 +37,15 @@
     .cell {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: var(--space-2, 4px);
+        height: 100%;
     }
 
-    .chevron-button {
-        background: none;
-        border: none;
-        cursor: pointer;
-        padding: 0;
-        border-radius: var(--border-radius-s);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 24px;
-        min-height: 24px;
-    }
-    .chevron-button:hover {
-        background: var(--overlay-hover);
-    }
-    .chevron-button:focus-visible {
-        outline: var(--border-width-l) solid var(--border-focus);
-    }
     .chevron {
         display: flex;
         transition: rotate 300ms ease-in-out;
     }
+
     .chevron.open {
         rotate: 180deg;
     }
diff --git a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
index 7ff8427394..059aed95f1 100644
--- a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
@@ -95,8 +95,8 @@
 
 <style lang="scss">
     .expandable-table {
-        --row-pad-top: var(--space-3, 8px);
-        --row-pad-bottom: var(--space-3, 8px);
+        --row-pad-top: var(--space-2, 4px);
+        --row-pad-bottom: var(--space-2, 4px);
         --row-pad-left: var(--space-4, 12px);
         --row-pad-right: var(--space-4, 12px);
         --row-gap: 4px;
@@ -130,30 +130,34 @@
         padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
         background: var(--bgcolor-neutral-tertiary, #fff);
         border-bottom: var(--border-width-s, 1px) solid var(--divider-strong);
-        min-height: var(--row-height);
+        height: var(--row-height);
+        box-sizing: border-box;
     }
     .header-cell {
         display: flex;
         align-items: center;
     }
 
-    /* Responsive (match legacy) */
+    /* Responsive (maintain consistent height) */
     @media (max-width: 480px) {
         .table-header {
             grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            padding: 8px;
+            padding: var(--row-pad-top) var(--space-2, 4px) var(--row-pad-bottom)
+                var(--space-2, 4px);
         }
     }
     @media (min-width: 481px) and (max-width: 768px) {
         .table-header {
             grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-            padding: 10px 12px;
+            padding: var(--row-pad-top) var(--space-3, 8px) var(--row-pad-bottom)
+                var(--space-3, 8px);
         }
     }
     @media (min-width: 1200px) {
         .table-header {
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            padding: 14px 20px;
+            padding: var(--row-pad-top) var(--space-6, 16px) var(--row-pad-bottom)
+                var(--space-6, 16px);
         }
     }
 </style>
diff --git a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
index 9cc75d0ea1..b5766b653c 100644
--- a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
@@ -43,15 +43,14 @@
         align-items: center;
         padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
         border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
-        min-height: var(--row-height);
+        height: var(--row-height);
         box-sizing: border-box;
         transition: background-color 0.2s ease;
     }
 
     .expanded-content {
         background: var(--accordion-bg);
-        padding-top: calc(var(--row-pad-top) / 2);
-        padding-bottom: var(--row-pad-bottom);
+        padding: 0;
         position: relative;
     }
     .expanded-content::after {
@@ -72,7 +71,7 @@
         align-items: center;
         padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
         border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
-        min-height: var(--row-height);
+        height: var(--row-height);
         box-sizing: border-box;
         background: transparent;
         color: var(--fgcolor-neutral-secondary, rgba(0, 0, 0, 0.6));
@@ -85,29 +84,32 @@
         align-items: center;
     }
 
-    /* Responsive (match legacy) */
+    /* responsiveness */
     @media (max-width: 480px) {
         .row-content,
         :global(.child-row) {
             grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            padding: 8px;
+            padding: var(--row-pad-top) var(--space-2, 4px) var(--row-pad-bottom)
+                var(--space-2, 4px);
         }
         :global(.child-cell) {
-            gap: 4px;
+            gap: var(--space-1, 2px);
         }
     }
     @media (min-width: 481px) and (max-width: 768px) {
         .row-content,
         :global(.child-row) {
             grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-            padding: 10px 12px;
+            padding: var(--row-pad-top) var(--space-3, 8px) var(--row-pad-bottom)
+                var(--space-3, 8px);
         }
     }
     @media (min-width: 1200px) {
         .row-content,
         :global(.child-row) {
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            padding: 14px 20px;
+            padding: var(--row-pad-top) var(--space-6, 16px) var(--row-pad-bottom)
+                var(--space-6, 16px);
         }
     }
 </style>

From 79d8d177025e1cb1e996a038f685895146988c6d Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Fri, 29 Aug 2025 10:15:30 +0000
Subject: [PATCH 09/14] fix: deleted types.ts and moved rootprops to index.ts

---
 .../src/lib/expandable-table/cell/Cell.svelte |  2 +-
 v2/pink-sb/src/lib/expandable-table/index.ts  | 22 ++++++++++++++++++-
 .../src/lib/expandable-table/root/Root.svelte |  2 +-
 .../src/lib/expandable-table/row/Row.svelte   |  2 +-
 v2/pink-sb/src/lib/expandable-table/types.ts  | 21 ------------------
 5 files changed, 24 insertions(+), 25 deletions(-)
 delete mode 100644 v2/pink-sb/src/lib/expandable-table/types.ts

diff --git a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
index f453405884..59a6e637ea 100644
--- a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { RootProp } from '../types.js';
+    import type { RootProp } from '../index.js';
     import Icon from '$lib/Icon.svelte';
     import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
     import Button from '$lib/button/Button.svelte';
diff --git a/v2/pink-sb/src/lib/expandable-table/index.ts b/v2/pink-sb/src/lib/expandable-table/index.ts
index 937a2410b5..38dd36d287 100644
--- a/v2/pink-sb/src/lib/expandable-table/index.ts
+++ b/v2/pink-sb/src/lib/expandable-table/index.ts
@@ -2,7 +2,27 @@ import Root from './root/Root.svelte';
 import Row from './row/Row.svelte';
 import Cell from './cell/Cell.svelte';
 
-export type { ExpandableTableColumn, RootProp } from './types.js';
+export type ExpandableTableColumn = {
+    id: string;
+    title?: string;
+    width?: string; // e.g. '2fr'
+    align?: 'left' | 'center' | 'right';
+};
+
+export type RootProp = {
+    single: boolean;
+    openIds: string[];
+    isOpen: (id: string) => boolean;
+    open: (id: string) => void;
+    close: (id: string) => void;
+    toggle: (id: string) => void;
+    register: (id: string) => void;
+    unregister: (id: string) => void;
+    columns: ExpandableTableColumn[];
+    gridTemplateColumns: string;
+    childGridTemplate: string;
+    alignment: (align?: 'left' | 'center' | 'right') => string;
+};
 
 export default {
     Root,
diff --git a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
index 059aed95f1..f308ea64ca 100644
--- a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { ExpandableTableColumn } from '../types.js';
+    import type { ExpandableTableColumn } from '../index.js';
     import Text from '$lib/typography/Text.svelte';
 
     export let single: boolean = false;
diff --git a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
index b5766b653c..6fe85ebd33 100644
--- a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import type { RootProp } from '../types.js';
+    import type { RootProp } from '../index.js';
     import { slide } from 'svelte/transition';
 
     export let root: RootProp;
diff --git a/v2/pink-sb/src/lib/expandable-table/types.ts b/v2/pink-sb/src/lib/expandable-table/types.ts
deleted file mode 100644
index d1307c56f7..0000000000
--- a/v2/pink-sb/src/lib/expandable-table/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export type ExpandableTableColumn = {
-    id: string;
-    title?: string;
-    width?: string; // e.g. '2fr'
-    align?: 'left' | 'center' | 'right';
-};
-
-export type RootProp = {
-    single: boolean;
-    openIds: string[];
-    isOpen: (id: string) => boolean;
-    open: (id: string) => void;
-    close: (id: string) => void;
-    toggle: (id: string) => void;
-    register: (id: string) => void;
-    unregister: (id: string) => void;
-    columns: ExpandableTableColumn[];
-    gridTemplateColumns: string;
-    childGridTemplate: string;
-    alignment: (align?: 'left' | 'center' | 'right') => string;
-};

From 7a84c315df2527eb3f0c84615c737bfe0d510d7a Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Fri, 29 Aug 2025 10:59:16 +0000
Subject: [PATCH 10/14] passing isOpen and toggle to handled by row

---
 .../src/lib/expandable-table/cell/Cell.svelte |  6 ++-
 .../src/lib/expandable-table/row/Row.svelte   |  3 ++
 .../stories/ExpandableTable.stories.svelte    | 42 +++----------------
 3 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
index 59a6e637ea..8673f6b581 100644
--- a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
@@ -3,16 +3,18 @@
     import Icon from '$lib/Icon.svelte';
     import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
     import Button from '$lib/button/Button.svelte';
+    import { getContext } from 'svelte';
 
     export let root: RootProp;
     export let column: string;
     export let expandable: boolean = true;
-    export let isOpen: boolean = false;
-    export let toggle: () => void = () => {};
+    const rowId = getContext<string>('rowId');
 
     $: columnIndex = root.columns.findIndex((c) => c.id === column);
     $: justify = root.alignment(root.columns[columnIndex]?.align);
     $: isFirstCell = columnIndex === 0;
+    $: isOpen = rowId ? root.isOpen(rowId) : false;
+    $: toggle = rowId ? () => root.toggle(rowId) : () => {};
 </script>
 
 <div class="cell" style="justify-content: {justify};">
diff --git a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
index 6fe85ebd33..c6db3b4d8b 100644
--- a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
+++ b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
+    import { setContext } from 'svelte';
     import type { RootProp } from '../index.js';
     import { slide } from 'svelte/transition';
 
@@ -7,6 +8,8 @@
     export let id: string;
     export let expandable: boolean = true;
 
+    setContext('rowId', id);
+
     onMount(() => {
         if (id) root.register(id);
         return () => {
diff --git a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
index 22183289fa..f1fbea9f96 100644
--- a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
+++ b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
@@ -202,8 +202,6 @@
                         {root}
                         column={col.id}
                         expandable={row.expandable ?? false}
-                        isOpen={root.isOpen(row.id)}
-                        toggle={() => root.toggle(row.id)}
                     >
                         <Typography.Text
                             variant={rowIndex === data.length - 1 ? 'm-500' : 'm-400'}
@@ -263,24 +261,12 @@
     >
         {#each [{ id: 'parent1', cells: { name: 'Parent Item 1', value: '100' }, expandable: true, children: [{ id: 'child1', cells: { name: 'Child Item 1', value: '50' } }, { id: 'child2', cells: { name: 'Child Item 2', value: '50' } }] }, { id: 'parent2', cells: { name: 'Parent Item 2', value: '200' }, expandable: false }] as rows (rows.id)}
             <ExpandableTable.Row {root} id={rows.id} expandable={rows.expandable ?? false}>
-                <ExpandableTable.Cell
-                    {root}
-                    column="name"
-                    expandable={rows.expandable ?? false}
-                    isOpen={root.isOpen(rows.id)}
-                    toggle={() => root.toggle(rows.id)}
-                >
+                <ExpandableTable.Cell {root} column="name" expandable={rows.expandable ?? false}>
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         {rows.cells.name}
                     </Typography.Text>
                 </ExpandableTable.Cell>
-                <ExpandableTable.Cell
-                    {root}
-                    column="value"
-                    expandable={rows.expandable ?? false}
-                    isOpen={root.isOpen(rows.id)}
-                    toggle={() => root.toggle(rows.id)}
-                >
+                <ExpandableTable.Cell {root} column="value" expandable={rows.expandable ?? false}>
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         {rows.cells.value}
                     </Typography.Text>
@@ -329,13 +315,7 @@
     >
         {#each [{ id: 'service1', cells: { service: 'Premium Service', status: 'Active', amount: '$29.99' }, expandable: true, badge: { content: 'NEW', type: 'success' }, children: [{ id: 'feature1', cells: { service: 'Feature A', status: 'Included', amount: '$0.00' } }, { id: 'feature2', cells: { service: 'Feature B', status: 'Included', amount: '$0.00' } }] }, { id: 'service2', cells: { service: 'Basic Service', status: 'Active', amount: '$9.99' }, expandable: false, badge: { content: 'LEGACY', type: 'warning' } }] as rows (rows.id)}
             <ExpandableTable.Row {root} id={rows.id} expandable={rows.expandable ?? false}>
-                <ExpandableTable.Cell
-                    {root}
-                    column="service"
-                    expandable={rows.expandable ?? false}
-                    isOpen={root.isOpen(rows.id)}
-                    toggle={() => root.toggle(rows.id)}
-                >
+                <ExpandableTable.Cell {root} column="service" expandable={rows.expandable ?? false}>
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         {rows.cells.service}
                     </Typography.Text>
@@ -348,24 +328,12 @@
                         />
                     {/if}
                 </ExpandableTable.Cell>
-                <ExpandableTable.Cell
-                    {root}
-                    column="status"
-                    expandable={rows.expandable ?? false}
-                    isOpen={root.isOpen(rows.id)}
-                    toggle={() => root.toggle(rows.id)}
-                >
+                <ExpandableTable.Cell {root} column="status" expandable={rows.expandable ?? false}>
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         {rows.cells.status}
                     </Typography.Text>
                 </ExpandableTable.Cell>
-                <ExpandableTable.Cell
-                    {root}
-                    column="amount"
-                    expandable={rows.expandable ?? false}
-                    isOpen={root.isOpen(rows.id)}
-                    toggle={() => root.toggle(rows.id)}
-                >
+                <ExpandableTable.Cell {root} column="amount" expandable={rows.expandable ?? false}>
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         {rows.cells.amount}
                     </Typography.Text>

From 6ef18ae8bb73f6335a68dfd7f6ac9f87e1bf525c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 2 Sep 2025 17:53:37 +0530
Subject: [PATCH 11/14] feat: accordion table.

---
 .../src/lib/accordion-table/cell/Cell.svelte  |  46 ++
 v2/pink-sb/src/lib/accordion-table/index.ts   |  49 ++
 .../src/lib/accordion-table/root/Root.svelte  | 119 +++++
 .../src/lib/accordion-table/row/Row.svelte    | 137 +++++
 .../accordion-table/summary/Summary.svelte    |  36 ++
 .../src/lib/expandable-table/cell/Cell.svelte |  54 --
 v2/pink-sb/src/lib/expandable-table/index.ts  |  31 --
 .../src/lib/expandable-table/root/Root.svelte | 163 ------
 .../src/lib/expandable-table/row/Row.svelte   | 118 -----
 v2/pink-sb/src/lib/index.ts                   |   2 +-
 v2/pink-sb/src/lib/table/root/Base.svelte     |   6 +-
 v2/pink-sb/src/lib/table/row/Base.svelte      |   4 +-
 .../src/stories/AccordionTable.stories.svelte | 490 ++++++++++++++++++
 .../stories/ExpandableTable.stories.svelte    | 380 --------------
 14 files changed, 883 insertions(+), 752 deletions(-)
 create mode 100644 v2/pink-sb/src/lib/accordion-table/cell/Cell.svelte
 create mode 100644 v2/pink-sb/src/lib/accordion-table/index.ts
 create mode 100644 v2/pink-sb/src/lib/accordion-table/root/Root.svelte
 create mode 100644 v2/pink-sb/src/lib/accordion-table/row/Row.svelte
 create mode 100644 v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte
 delete mode 100644 v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
 delete mode 100644 v2/pink-sb/src/lib/expandable-table/index.ts
 delete mode 100644 v2/pink-sb/src/lib/expandable-table/root/Root.svelte
 delete mode 100644 v2/pink-sb/src/lib/expandable-table/row/Row.svelte
 create mode 100644 v2/pink-sb/src/stories/AccordionTable.stories.svelte
 delete mode 100644 v2/pink-sb/src/stories/ExpandableTable.stories.svelte

diff --git a/v2/pink-sb/src/lib/accordion-table/cell/Cell.svelte b/v2/pink-sb/src/lib/accordion-table/cell/Cell.svelte
new file mode 100644
index 0000000000..d6f6fee5f9
--- /dev/null
+++ b/v2/pink-sb/src/lib/accordion-table/cell/Cell.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import Icon from '$lib/Icon.svelte';
+    import type { RootProp } from '../index.js';
+    import Stack from '$lib/layout/Stack.svelte';
+    import { type ComponentProps, getContext } from 'svelte';
+    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
+
+    export let root: RootProp;
+    export let column: string;
+
+    let expandable: boolean;
+    $: expandable = getContext<boolean>('expandable');
+
+    let justify: ComponentProps<Stack>['justifyContent'];
+
+    $: isFirstColumn = root.isFirstColumn(column);
+    $: columnAlignment = root.getColumn(column)?.align ?? 'left';
+
+    $: justify =
+        columnAlignment === 'right'
+            ? 'flex-end'
+            : columnAlignment === 'center'
+              ? 'center'
+              : 'flex-start';
+</script>
+
+<Stack direction="row" alignItems="center" gap="xxs" justifyContent={justify}>
+    <slot />
+</Stack>
+
+{#if !expandable && isFirstColumn}
+    <!-- needed to balance out the empty spacing when not expandable -->
+    <span class="balancing-placeholder">
+        <!-- placeholder icon to fit dimensions -->
+        <Icon icon={IconChevronDown} size="s"></Icon>
+    </span>
+{/if}
+
+<style>
+    .balancing-placeholder {
+        margin-inline: 2px;
+        visibility: hidden;
+        touch-action: none;
+        pointer-events: none;
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/accordion-table/index.ts b/v2/pink-sb/src/lib/accordion-table/index.ts
new file mode 100644
index 0000000000..5b05f24942
--- /dev/null
+++ b/v2/pink-sb/src/lib/accordion-table/index.ts
@@ -0,0 +1,49 @@
+import Root from './root/Root.svelte';
+import Row from './row/Row.svelte';
+import Cell from './cell/Cell.svelte';
+import SummaryRow from '../table/row/Base.svelte';
+import SummaryCell from '../table/cell/Base.svelte';
+
+export type Align = 'left' | 'center' | 'right';
+
+export type Column = {
+    id: string;
+    align?: Align;
+    width?:
+        | {
+              min: number;
+              max: number;
+          }
+        | {
+              min: number;
+          }
+        | number;
+    hide?: boolean;
+};
+
+export type RootProp = {
+    // Open state controls
+    single: boolean;
+    openIds: string[];
+    isOpen: (id: string) => boolean;
+    open: (id: string) => void;
+    close: (id: string) => void;
+    toggle: (id: string) => void;
+    register: (id: string) => void;
+    unregister: (id: string) => void;
+    isFirstColumn: (id: string) => boolean;
+    getColumn: (id: string) => Column | undefined;
+
+    columns: Array<Column>;
+    columnsCount: number;
+};
+
+export default {
+    Root,
+    Row,
+    Cell,
+    Summary: {
+        Row: SummaryRow,
+        Cell: SummaryCell
+    }
+};
diff --git a/v2/pink-sb/src/lib/accordion-table/root/Root.svelte b/v2/pink-sb/src/lib/accordion-table/root/Root.svelte
new file mode 100644
index 0000000000..2daf3ff8db
--- /dev/null
+++ b/v2/pink-sb/src/lib/accordion-table/root/Root.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+    import type { Column, RootProp } from '../index.js';
+
+    export let openIds: string[] = [];
+    export let single: boolean = false;
+    export let columns: Array<Column> | number;
+
+    let registeredIds: Set<string> = new Set();
+
+    function isOpen(id: string): boolean {
+        return openIds.includes(id);
+    }
+
+    function open(id: string): void {
+        if (!registeredIds.has(id)) return;
+        if (single) {
+            openIds = [id];
+        } else if (!openIds.includes(id)) {
+            openIds = [...openIds, id];
+        }
+    }
+
+    function close(id: string): void {
+        if (!registeredIds.has(id)) return;
+        openIds = openIds.filter((openId) => openId !== id);
+    }
+
+    function toggle(id: string): void {
+        if (isOpen(id)) close(id);
+        else open(id);
+    }
+
+    function register(id: string): void {
+        registeredIds.add(id);
+        registeredIds = registeredIds;
+    }
+
+    function unregister(id: string): void {
+        registeredIds.delete(id);
+        registeredIds = registeredIds;
+        openIds = openIds.filter((openId) => openId !== id);
+    }
+
+    function getColumn(columnId: string): Column | undefined {
+        return columnsArray.find((column) => column.id === columnId);
+    }
+
+    function isFirstColumn(columnId: string): boolean {
+        return columnsArray.length > 0 && columnsArray[0].id === columnId;
+    }
+
+    $: columnsArray =
+        typeof columns === 'number'
+            ? Array.from({ length: Math.max(1, Math.floor(columns)) }, (_, i) => ({
+                  id: i.toString(),
+                  align: 'left' as const
+              }))
+            : columns;
+
+    $: columnsCount = columnsArray.length;
+
+    $: root = {
+        single,
+        openIds,
+        isOpen,
+        open,
+        close,
+        toggle,
+        register,
+        unregister,
+        getColumn,
+        isFirstColumn,
+
+        columns: columnsArray,
+        columnsCount
+    } as RootProp;
+</script>
+
+<div class="accordion-table">
+    <div class="body">
+        <slot {root} />
+    </div>
+</div>
+
+<style lang="scss">
+    .accordion-table {
+        --row-gap: 4px;
+        --row-height: 40px;
+
+        --divider-color: var(--border-neutral, rgba(0, 0, 0, 0.12));
+        --divider-strong: var(--border-neutral-strong, rgba(0, 0, 0, 0.18));
+        --overlay-hover: var(--overlay-neutral-hover, rgba(0, 0, 0, 0.04));
+        --row-open-bg: var(--bgcolor-neutral-default, rgba(0, 0, 0, 0.02));
+        --accordion-bg: var(--bgcolor-neutral-default, var(--row-open-bg));
+
+        border: var(--border-width-s, 1px) solid var(--divider-strong);
+        border-radius: var(--border-radius-s);
+        background: var(--bgcolor-neutral-primary);
+        overflow-x: auto;
+        overflow-y: hidden;
+        width: 100%;
+        max-width: 100%;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .accordion-table {
+            --divider-color: var(--border-neutral, rgba(255, 255, 255, 0.08));
+            --divider-strong: var(--border-neutral-strong, rgba(255, 255, 255, 0.12));
+            --overlay-hover: var(--overlay-neutral-hover, rgba(255, 255, 255, 0.02));
+            --row-open-bg: var(--bgcolor-neutral-default-dark, rgba(255, 255, 255, 0.02));
+        }
+    }
+
+    .body {
+        width: 100%;
+        display: block;
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/accordion-table/row/Row.svelte b/v2/pink-sb/src/lib/accordion-table/row/Row.svelte
new file mode 100644
index 0000000000..8410902f01
--- /dev/null
+++ b/v2/pink-sb/src/lib/accordion-table/row/Row.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+    import { onMount, setContext } from 'svelte';
+
+    import Icon from '$lib/Icon.svelte';
+    import { slide } from 'svelte/transition';
+    import type { RootProp } from '../index.js';
+    import { createEventDispatcher } from 'svelte';
+    import Button from '../../button/Button.svelte';
+    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
+    import Summary from '$lib/accordion-table/summary/Summary.svelte';
+
+    export let id: string;
+    export let root: RootProp;
+    export let expandable: boolean = true;
+    export let defaultOpen: boolean = false;
+
+    const dispatch = createEventDispatcher<{
+        toggle: { id: string; open: boolean };
+        open: { id: string };
+        close: { id: string };
+    }>();
+
+    onMount(() => {
+        if (id) root.register(id);
+        if (defaultOpen && id) root.open(id);
+
+        return () => {
+            if (id) root.unregister(id);
+        };
+    });
+
+    $: isOpen = root.isOpen(id);
+    $: rowGridTemplate = `repeat(${root.columnsCount}, 1fr)`;
+
+    setContext('expandable', expandable);
+
+    function toggleRow() {
+        if (!expandable) return;
+
+        const wasOpen = isOpen;
+        root.toggle(id);
+
+        const nowOpen = !wasOpen;
+        dispatch('toggle', { id, open: nowOpen });
+
+        if (nowOpen) dispatch('open', { id });
+        else dispatch('close', { id });
+    }
+</script>
+
+<div class="table-row" class:has-children={expandable} class:is-open={isOpen}>
+    {#if expandable}
+        <div class="row-content">
+            <Button variant="compact" on:click={toggleRow} style="width: 100%">
+                <span class="chevron" class:is-open={isOpen} style:display="flex">
+                    <Icon icon={IconChevronDown} size="s"></Icon>
+                </span>
+
+                <slot {id} />
+            </Button>
+        </div>
+    {:else}
+        <div class="row-content" style:grid-template-columns={rowGridTemplate}>
+            <slot {id} />
+        </div>
+    {/if}
+
+    {#if isOpen}
+        <div class="expanded-content" transition:slide={{ duration: 200 }}>
+            <Summary {root} let:table>
+                <slot name="summary" {id} root={table} />
+            </Summary>
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .table-row {
+        &.has-children:not(.is-open):hover .row-content {
+            background: var(--overlay-hover);
+
+            .chevron {
+                color: var(--fgcolor-neutral-secondary);
+            }
+        }
+
+        &.is-open .row-content {
+            background: var(--bgcolor-neutral-primary);
+            border-bottom-color: var(--divider-strong);
+        }
+    }
+
+    .row-content {
+        display: flex;
+        align-items: center !important;
+        width: 100% !important;
+        height: var(--row-height);
+        padding: 4px 12px !important;
+        --p-button-border-radius: 0;
+
+        border-bottom: var(--border-width-s, 1px) solid var(--divider-color) !important;
+
+        & > :global(*) {
+            height: 100%;
+        }
+    }
+
+    .chevron {
+        color: var(--fgcolor-neutral-tertiary);
+        transition:
+            rotate 300ms ease-in-out,
+            color 200ms ease-in-out;
+
+        &.is-open {
+            rotate: 180deg;
+            color: var(--fgcolor-neutral-secondary);
+        }
+    }
+
+    .expanded-content {
+        padding: 0;
+        position: relative;
+        background: var(--bgcolor-neutral-default);
+    }
+
+    .expanded-content::after {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        height: var(--border-width-s);
+        background: var(--divider-strong);
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte b/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte
new file mode 100644
index 0000000000..c229f8ce39
--- /dev/null
+++ b/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import type { RootProp } from '../index.js';
+    import Table from '$lib/table/index.js';
+
+    export let root: RootProp;
+
+    $: tableColumns = root.columns.map((c) => ({
+        id: c.id,
+        width: c.width,
+        hide: c.hide
+    }));
+</script>
+
+<div class="summary">
+    <Table.Root columns={tableColumns} let:root={table}>
+        <slot {root} {table} />
+    </Table.Root>
+</div>
+
+<style lang="scss">
+    .summary {
+        width: 100%;
+        display: block;
+
+        --p-table-border: 0;
+        --p-table-border-radius: 0;
+        --p-table-background: transparent;
+        --p-table-row-background: var(--bgcolor-neutral-default);
+
+        --border-neutral: var(--divider-color);
+
+        :global([role='row']:last-child) :global([role='cell']) {
+            border-bottom: 0;
+        }
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte b/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
deleted file mode 100644
index 8673f6b581..0000000000
--- a/v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-    import type { RootProp } from '../index.js';
-    import Icon from '$lib/Icon.svelte';
-    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
-    import Button from '$lib/button/Button.svelte';
-    import { getContext } from 'svelte';
-
-    export let root: RootProp;
-    export let column: string;
-    export let expandable: boolean = true;
-    const rowId = getContext<string>('rowId');
-
-    $: columnIndex = root.columns.findIndex((c) => c.id === column);
-    $: justify = root.alignment(root.columns[columnIndex]?.align);
-    $: isFirstCell = columnIndex === 0;
-    $: isOpen = rowId ? root.isOpen(rowId) : false;
-    $: toggle = rowId ? () => root.toggle(rowId) : () => {};
-</script>
-
-<div class="cell" style="justify-content: {justify};">
-    {#if isFirstCell && expandable}
-        <Button
-            variant="ghost"
-            icon
-            size="s"
-            on:click={toggle}
-            aria-expanded={isOpen}
-            aria-label={isOpen ? 'Collapse row' : 'Expand row'}
-        >
-            <span class="chevron" class:open={isOpen}>
-                <Icon icon={IconChevronDown} size="s" />
-            </span>
-        </Button>
-    {/if}
-    <slot />
-</div>
-
-<style lang="scss">
-    .cell {
-        display: flex;
-        align-items: center;
-        gap: var(--space-2, 4px);
-        height: 100%;
-    }
-
-    .chevron {
-        display: flex;
-        transition: rotate 300ms ease-in-out;
-    }
-
-    .chevron.open {
-        rotate: 180deg;
-    }
-</style>
diff --git a/v2/pink-sb/src/lib/expandable-table/index.ts b/v2/pink-sb/src/lib/expandable-table/index.ts
deleted file mode 100644
index 38dd36d287..0000000000
--- a/v2/pink-sb/src/lib/expandable-table/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import Root from './root/Root.svelte';
-import Row from './row/Row.svelte';
-import Cell from './cell/Cell.svelte';
-
-export type ExpandableTableColumn = {
-    id: string;
-    title?: string;
-    width?: string; // e.g. '2fr'
-    align?: 'left' | 'center' | 'right';
-};
-
-export type RootProp = {
-    single: boolean;
-    openIds: string[];
-    isOpen: (id: string) => boolean;
-    open: (id: string) => void;
-    close: (id: string) => void;
-    toggle: (id: string) => void;
-    register: (id: string) => void;
-    unregister: (id: string) => void;
-    columns: ExpandableTableColumn[];
-    gridTemplateColumns: string;
-    childGridTemplate: string;
-    alignment: (align?: 'left' | 'center' | 'right') => string;
-};
-
-export default {
-    Root,
-    Row,
-    Cell
-};
diff --git a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte b/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
deleted file mode 100644
index f308ea64ca..0000000000
--- a/v2/pink-sb/src/lib/expandable-table/root/Root.svelte
+++ /dev/null
@@ -1,163 +0,0 @@
-<script lang="ts">
-    import type { ExpandableTableColumn } from '../index.js';
-    import Text from '$lib/typography/Text.svelte';
-
-    export let single: boolean = false;
-    export let openIds: string[] = [];
-    export let columns: ExpandableTableColumn[] = [];
-    export let showHeader: boolean = true;
-
-    let registeredIds: Set<string> = new Set();
-
-    function isOpen(id: string): boolean {
-        return openIds.includes(id);
-    }
-
-    function open(id: string): void {
-        if (!registeredIds.has(id)) return;
-        if (single) {
-            openIds = [id];
-        } else if (!openIds.includes(id)) {
-            openIds = [...openIds, id];
-        }
-    }
-
-    function close(id: string): void {
-        if (!registeredIds.has(id)) return;
-        openIds = openIds.filter((openId) => openId !== id);
-    }
-
-    function toggle(id: string): void {
-        if (isOpen(id)) close(id);
-        else open(id);
-    }
-
-    function register(id: string): void {
-        registeredIds.add(id);
-        registeredIds = registeredIds;
-    }
-
-    function unregister(id: string): void {
-        registeredIds.delete(id);
-        registeredIds = registeredIds;
-        openIds = openIds.filter((openId) => openId !== id);
-    }
-
-    // Grid column templates
-    $: baseColumnWidths = columns.length ? columns.map((c) => c.width ?? '1fr').join(' ') : '1fr';
-    $: gridTemplateColumns = baseColumnWidths;
-    $: childGridTemplate = baseColumnWidths;
-
-    const alignment = (align?: 'left' | 'center' | 'right') => {
-        switch (align) {
-            case 'right':
-                return 'flex-end';
-            case 'center':
-                return 'center';
-            default:
-                return 'flex-start';
-        }
-    };
-
-    $: root = {
-        single,
-        openIds,
-        isOpen,
-        open,
-        close,
-        toggle,
-        register,
-        unregister,
-        columns,
-        gridTemplateColumns,
-        childGridTemplate,
-        alignment
-    };
-</script>
-
-<div class="expandable-table">
-    {#if showHeader && columns.length}
-        <div class="table-header" style="grid-template-columns: {gridTemplateColumns};">
-            <slot name="header">
-                {#each columns as col}
-                    <div class="header-cell" style="justify-content: {alignment(col.align)};">
-                        <Text variant="m-500" color="--fgcolor-neutral-secondary">{col.title}</Text>
-                    </div>
-                {/each}
-            </slot>
-        </div>
-    {/if}
-
-    <div class="table-body">
-        <slot {root} />
-    </div>
-</div>
-
-<style lang="scss">
-    .expandable-table {
-        --row-pad-top: var(--space-2, 4px);
-        --row-pad-bottom: var(--space-2, 4px);
-        --row-pad-left: var(--space-4, 12px);
-        --row-pad-right: var(--space-4, 12px);
-        --row-gap: 4px;
-        --row-height: 40px;
-
-        --divider-color: var(--border-neutral, rgba(0, 0, 0, 0.12));
-        --divider-strong: var(--border-neutral-strong, rgba(0, 0, 0, 0.18));
-        --overlay-hover: var(--overlay-neutral-hover, rgba(0, 0, 0, 0.04));
-        --row-open-bg: var(--bgcolor-neutral-default, rgba(0, 0, 0, 0.02));
-        --accordion-bg: var(--bgcolor-neutral-default, var(--row-open-bg));
-
-        border: var(--border-width-s, 1px) solid var(--divider-strong);
-        border-radius: var(--border-radius-s);
-        background: var(--bgcolor-neutral-primary, #fff);
-        overflow-x: auto;
-        width: 100%;
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .expandable-table {
-            --divider-color: var(--border-neutral, rgba(255, 255, 255, 0.08));
-            --divider-strong: var(--border-neutral-strong, rgba(255, 255, 255, 0.12));
-            --overlay-hover: var(--overlay-neutral-hover, rgba(255, 255, 255, 0.02));
-            --row-open-bg: var(--bgcolor-neutral-default-dark, rgba(255, 255, 255, 0.02));
-        }
-    }
-
-    .table-header {
-        display: grid;
-        align-items: center;
-        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
-        background: var(--bgcolor-neutral-tertiary, #fff);
-        border-bottom: var(--border-width-s, 1px) solid var(--divider-strong);
-        height: var(--row-height);
-        box-sizing: border-box;
-    }
-    .header-cell {
-        display: flex;
-        align-items: center;
-    }
-
-    /* Responsive (maintain consistent height) */
-    @media (max-width: 480px) {
-        .table-header {
-            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            padding: var(--row-pad-top) var(--space-2, 4px) var(--row-pad-bottom)
-                var(--space-2, 4px);
-        }
-    }
-    @media (min-width: 481px) and (max-width: 768px) {
-        .table-header {
-            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-            padding: var(--row-pad-top) var(--space-3, 8px) var(--row-pad-bottom)
-                var(--space-3, 8px);
-        }
-    }
-    @media (min-width: 1200px) {
-        .table-header {
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            padding: var(--row-pad-top) var(--space-6, 16px) var(--row-pad-bottom)
-                var(--space-6, 16px);
-        }
-    }
-</style>
diff --git a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte b/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
deleted file mode 100644
index c6db3b4d8b..0000000000
--- a/v2/pink-sb/src/lib/expandable-table/row/Row.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts">
-    import { onMount } from 'svelte';
-    import { setContext } from 'svelte';
-    import type { RootProp } from '../index.js';
-    import { slide } from 'svelte/transition';
-
-    export let root: RootProp;
-    export let id: string;
-    export let expandable: boolean = true;
-
-    setContext('rowId', id);
-
-    onMount(() => {
-        if (id) root.register(id);
-        return () => {
-            if (id) root.unregister(id);
-        };
-    });
-
-    $: isOpen = root.isOpen(id);
-</script>
-
-<div class="table-row" class:has-children={expandable} class:is-open={isOpen}>
-    <div class="row-content" style="grid-template-columns: {root.gridTemplateColumns};">
-        <slot />
-    </div>
-
-    {#if isOpen}
-        <div class="expanded-content" transition:slide={{ duration: 200 }}>
-            <slot name="summary" {root} />
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .table-row.has-children:not(.is-open):hover .row-content {
-        background: var(--overlay-hover);
-    }
-    .table-row.is-open .row-content {
-        background: var(--row-open-bg);
-        border-bottom-color: var(--divider-strong);
-    }
-
-    .row-content {
-        display: grid;
-        align-items: center;
-        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
-        border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
-        height: var(--row-height);
-        box-sizing: border-box;
-        transition: background-color 0.2s ease;
-    }
-
-    .expanded-content {
-        background: var(--accordion-bg);
-        padding: 0;
-        position: relative;
-    }
-    .expanded-content::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: calc(var(--border-width-s, 1px) * 2);
-        background: var(--divider-strong);
-        box-shadow: 0 -1px 0 var(--divider-color) inset;
-        z-index: 1;
-        pointer-events: none;
-    }
-
-    :global(.child-row) {
-        display: grid;
-        align-items: center;
-        padding: var(--row-pad-top) var(--row-pad-right) var(--row-pad-bottom) var(--row-pad-left);
-        border-bottom: var(--border-width-s, 1px) solid var(--divider-color);
-        height: var(--row-height);
-        box-sizing: border-box;
-        background: transparent;
-        color: var(--fgcolor-neutral-secondary, rgba(0, 0, 0, 0.6));
-    }
-    :global(.child-row:last-child) {
-        border-bottom: none;
-    }
-    :global(.child-cell) {
-        display: flex;
-        align-items: center;
-    }
-
-    /* responsiveness */
-    @media (max-width: 480px) {
-        .row-content,
-        :global(.child-row) {
-            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            padding: var(--row-pad-top) var(--space-2, 4px) var(--row-pad-bottom)
-                var(--space-2, 4px);
-        }
-        :global(.child-cell) {
-            gap: var(--space-1, 2px);
-        }
-    }
-    @media (min-width: 481px) and (max-width: 768px) {
-        .row-content,
-        :global(.child-row) {
-            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-            padding: var(--row-pad-top) var(--space-3, 8px) var(--row-pad-bottom)
-                var(--space-3, 8px);
-        }
-    }
-    @media (min-width: 1200px) {
-        .row-content,
-        :global(.child-row) {
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            padding: var(--row-pad-top) var(--space-6, 16px) var(--row-pad-bottom)
-                var(--space-6, 16px);
-        }
-    }
-</style>
diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
index 3f93ef63b9..9bf7a42e6d 100644
--- a/v2/pink-sb/src/lib/index.ts
+++ b/v2/pink-sb/src/lib/index.ts
@@ -3,7 +3,6 @@ export { default as AvatarGroup } from './avatar/AvatarGroup.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Breadcrumbs } from './Breadcrumbs.svelte';
 export { default as Divider } from './Divider.svelte';
-export { default as Expandable } from './expandable-table/index.js';
 export { default as FloatingActionBar } from './FloatingActionBar.svelte';
 export { default as InteractiveText } from './InteractiveText.svelte';
 export { default as Root } from './Root.svelte';
@@ -13,6 +12,7 @@ export { default as ToggleButton } from './ToggleButton.svelte';
 export { default as ProgressCircle } from './ProgressCircle.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as Table } from './table/index.js';
+export { default as AccordionTable } from './accordion-table/index.js';
 export { default as Card } from './card/index.js';
 export { default as Navbar } from './navbar/index.js';
 export { default as Sidebar } from './sidebar/index.js';
diff --git a/v2/pink-sb/src/lib/table/root/Base.svelte b/v2/pink-sb/src/lib/table/root/Base.svelte
index 7e6e6d4dad..9417d37f3f 100644
--- a/v2/pink-sb/src/lib/table/root/Base.svelte
+++ b/v2/pink-sb/src/lib/table/root/Base.svelte
@@ -76,9 +76,9 @@
 <style lang="scss">
     .root {
         --p-table-cell-padding-inline: var(--space-6);
-        border: 1px solid var(--border-neutral);
-        border-radius: var(--border-radius-s);
-        background: var(--bgcolor-neutral-primary);
+        border: var(--p-table-border, 1px solid var(--border-neutral));
+        border-radius: var(--p-table-border-radius, var(--border-radius-s));
+        background: var(--p-table-background, var(--bgcolor-neutral-primary));
         overflow-x: auto;
 
         ::-webkit-scrollbar {
diff --git a/v2/pink-sb/src/lib/table/row/Base.svelte b/v2/pink-sb/src/lib/table/row/Base.svelte
index c3caa51f1b..cab5392695 100644
--- a/v2/pink-sb/src/lib/table/row/Base.svelte
+++ b/v2/pink-sb/src/lib/table/row/Base.svelte
@@ -60,10 +60,10 @@
         grid-template-columns: subgrid;
         grid-column: 1 / -1;
         width: 100%;
-        background: var(--bgcolor-neutral-primary);
+        background: var(--p-table-row-background, var(--bgcolor-neutral-primary));
 
         &[role='rowheader'] {
-            background: var(--bgcolor-neutral-default);
+            background: var(--p-table-rowheader-background, var(--bgcolor-neutral-default));
         }
 
         &:last-child {
diff --git a/v2/pink-sb/src/stories/AccordionTable.stories.svelte b/v2/pink-sb/src/stories/AccordionTable.stories.svelte
new file mode 100644
index 0000000000..3cb03c1cb6
--- /dev/null
+++ b/v2/pink-sb/src/stories/AccordionTable.stories.svelte
@@ -0,0 +1,490 @@
+<script context="module" lang="ts">
+    import { AccordionTable, Typography, Badge } from '$lib/index.js';
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+
+    export const meta: MetaProps = {
+        title: 'Components/AccordionTable'
+    };
+</script>
+
+<script lang="ts">
+    import Layout from '$lib/layout/index.js';
+    import { Story } from '@storybook/addon-svelte-csf';
+
+    type Column = {
+        id: string;
+        align?: 'left' | 'center' | 'right';
+        width?:
+            | {
+                  min: number;
+                  max: number;
+              }
+            | {
+                  min: number;
+              }
+            | number;
+    };
+    type Row = {
+        id: string;
+        cells: Record<string, string>;
+        expandable?: boolean;
+        children?: Array<{ id: string; cells: Record<string, string> }>;
+        badge?: { content: string; type?: 'success' | 'warning' | 'error' };
+    };
+
+    const billingColumns: Column[] = [
+        { id: 'service', align: 'left', width: 460 },
+        { id: 'usage', align: 'left', width: 288 },
+        { id: 'price', align: 'right' }
+    ];
+
+    const billingData: Row[] = [
+        {
+            id: 'base-plan',
+            cells: {
+                service: 'Base plan',
+                price: '$15.00'
+            },
+            expandable: false
+        },
+
+        {
+            id: 'saas-dashboard-1',
+            cells: {
+                service: 'SaaS dashboard',
+                usage: '',
+                price: '$15.00'
+            },
+            expandable: true,
+            children: [
+                {
+                    id: 'bandwidth-1',
+                    cells: {
+                        service: 'Bandwidth',
+                        usage: '40,102 / 175,000',
+                        price: '$10'
+                    }
+                },
+                {
+                    id: 'users-1',
+                    cells: {
+                        service: 'Users',
+                        usage: '100,109 / 200,000',
+                        price: '$0'
+                    }
+                },
+                {
+                    id: 'db-reads-1',
+                    cells: {
+                        service: 'Databases reads',
+                        usage: '195,933 / 175,000',
+                        price: '$10'
+                    }
+                },
+                {
+                    id: 'db-writes-1',
+                    cells: {
+                        service: 'Databases writes',
+                        usage: '195,933 / 175,000',
+                        price: '$10'
+                    }
+                },
+                {
+                    id: 'executions-1',
+                    cells: {
+                        service: 'Executions',
+                        usage: '2,007,939 / 3,500,000',
+                        price: '$0'
+                    }
+                },
+                {
+                    id: 'storage-1',
+                    cells: {
+                        service: 'Storage',
+                        usage: '125 GB / 150 GB',
+                        price: '$0'
+                    }
+                },
+                {
+                    id: 'gb-hours-1',
+                    cells: {
+                        service: 'GB-hours',
+                        usage: '902 GB / 1,000 GB',
+                        price: '$0'
+                    }
+                },
+                {
+                    id: 'phone-otp-1',
+                    cells: {
+                        service: 'Phone OTP',
+                        usage: '40,102 SMS messages',
+                        price: '$8.40'
+                    }
+                }
+            ]
+        },
+        {
+            id: 'saas-dashboard-2',
+            cells: {
+                service: 'SaaS dashboard',
+                usage: '',
+                price: '$15.00'
+            },
+            expandable: true,
+            children: [
+                {
+                    id: 'bandwidth-2',
+                    cells: {
+                        service: 'Bandwidth',
+                        usage: '40,102 / 175,000',
+                        price: '$10'
+                    }
+                },
+                {
+                    id: 'users-2',
+                    cells: {
+                        service: 'Users',
+                        usage: '100,109 / 200,000',
+                        price: '$0'
+                    }
+                }
+            ]
+        },
+        {
+            id: 'usage-details',
+            cells: {
+                service: 'Usage details',
+                usage: '',
+                price: ''
+            },
+            expandable: true,
+            children: [
+                {
+                    id: 'another-saas',
+                    cells: {
+                        service: 'SaaS dashboard',
+                        usage: '',
+                        price: '$15.00'
+                    }
+                }
+            ]
+        },
+        {
+            id: 'total-row',
+            cells: {
+                service: 'Total',
+                usage: '',
+                price: '$40.00'
+            },
+            expandable: false
+        }
+    ];
+
+    const simpleColumns: Column[] = [
+        { id: 'name', align: 'left' },
+        { id: 'value', align: 'right' }
+    ];
+
+    const simpleData: Row[] = [
+        {
+            id: 'parent1',
+            cells: { name: 'Parent Item 1', value: '100' },
+            expandable: true,
+            children: [
+                { id: 'child1', cells: { name: 'Child Item 1', value: '50' } },
+                { id: 'child2', cells: { name: 'Child Item 2', value: '50' } }
+            ]
+        },
+        {
+            id: 'parent2',
+            cells: { name: 'Parent Item 2', value: '200' },
+            expandable: false
+        }
+    ];
+
+    const badgeColumns: Column[] = [
+        { id: 'service', align: 'left' },
+        { id: 'status', align: 'center' },
+        { id: 'amount', align: 'right' }
+    ];
+
+    const badgeRows: Row[] = [
+        {
+            id: 'service1',
+            cells: { service: 'Premium Service', status: 'Active', amount: '$29.99' },
+            expandable: true,
+            badge: { content: 'NEW', type: 'success' },
+            children: [
+                {
+                    id: 'feature1',
+                    cells: { service: 'Feature A', status: 'Included', amount: '$0.00' }
+                },
+                {
+                    id: 'feature2',
+                    cells: { service: 'Feature B', status: 'Included', amount: '$0.00' }
+                }
+            ]
+        },
+        {
+            id: 'service2',
+            cells: { service: 'Basic Service', status: 'Active', amount: '$9.99' },
+            expandable: false,
+            badge: { content: 'LEGACY', type: 'warning' }
+        }
+    ];
+
+    const calculateProgress = (row: Row): string => {
+        if (!row.expandable || !row.children) {
+            return '';
+        }
+
+        let totalUsed = 0;
+        let totalAvailable = 0;
+
+        for (const child of row.children) {
+            const usage = child.cells.usage;
+            if (usage && usage.includes('/')) {
+                const parts = usage.split('/').map((p) => parseInt(p.trim().replace(/,/g, ''), 10));
+                if (parts.length === 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
+                    totalUsed += parts[0];
+                    totalAvailable += parts[1];
+                }
+            }
+        }
+
+        if (totalAvailable === 0) {
+            return '';
+        }
+
+        const percentage = Math.round((totalUsed / totalAvailable) * 100);
+        return `${percentage}%`;
+    };
+</script>
+
+<Story name="Billing Example">
+    <AccordionTable.Root columns={billingColumns} let:root>
+        {#each billingData as row, rowIndex (row.id)}
+            <AccordionTable.Row {root} id={row.id} expandable={row.expandable ?? false}>
+                <AccordionTable.Cell {root} column="service">
+                    <Typography.Text
+                        variant={rowIndex === billingData.length - 1 ? 'm-500' : 'm-400'}
+                        color={rowIndex === billingData.length - 1
+                            ? '--fgcolor-neutral-primary'
+                            : '--fgcolor-neutral-secondary'}
+                    >
+                        {row.cells.service ?? ''}
+                    </Typography.Text>
+                    {#if row.badge}
+                        <Badge
+                            size="xs"
+                            variant="secondary"
+                            type={row.badge.type}
+                            content={row.badge.content}
+                        />
+                    {/if}
+                </AccordionTable.Cell>
+
+                <!-- usage -->
+                <AccordionTable.Cell {root} column="usage">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {row.cells.usage ?? ''}
+                    </Typography.Text>
+                </AccordionTable.Cell>
+
+                <!-- price -->
+                <AccordionTable.Cell {root} column="price">
+                    <Typography.Text
+                        variant={rowIndex === billingData.length - 1 ? 'm-500' : 'm-400'}
+                        color={rowIndex === billingData.length - 1
+                            ? '--fgcolor-neutral-primary'
+                            : '--fgcolor-neutral-secondary'}
+                    >
+                        {row.cells.price ?? ''}
+                    </Typography.Text>
+                </AccordionTable.Cell>
+
+                <svelte:fragment slot="summary" let:root>
+                    {#if row.children && row.children.length}
+                        {#each row.children as child (child.id)}
+                            <AccordionTable.Summary.Row {root}>
+                                <AccordionTable.Summary.Cell
+                                    {root}
+                                    column="service"
+                                    alignment="middle-start"
+                                >
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.service ?? ''}
+                                    </Typography.Text>
+                                </AccordionTable.Summary.Cell>
+                                <AccordionTable.Summary.Cell
+                                    {root}
+                                    column="usage"
+                                    alignment="middle-start"
+                                >
+                                    <Layout.Stack direction="row" justifyContent="space-between">
+                                        <Typography.Text
+                                            variant="m-400"
+                                            color="--fgcolor-neutral-secondary"
+                                        >
+                                            {calculateProgress(row)}
+                                        </Typography.Text>
+                                        <Typography.Text
+                                            variant="m-400"
+                                            color="--fgcolor-neutral-secondary"
+                                        >
+                                            {child.cells.usage ?? ''}
+                                        </Typography.Text>
+                                    </Layout.Stack>
+                                </AccordionTable.Summary.Cell>
+                                <AccordionTable.Summary.Cell
+                                    {root}
+                                    column="price"
+                                    alignment="middle-end"
+                                >
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.price ?? ''}
+                                    </Typography.Text>
+                                </AccordionTable.Summary.Cell>
+                            </AccordionTable.Summary.Row>
+                        {/each}
+                    {/if}
+                </svelte:fragment>
+            </AccordionTable.Row>
+        {/each}
+    </AccordionTable.Root>
+</Story>
+
+<Story name="Simple Example">
+    <AccordionTable.Root columns={simpleColumns} let:root>
+        {#each simpleData as rows (rows.id)}
+            <AccordionTable.Row {root} id={rows.id} expandable={rows.expandable ?? false}>
+                <AccordionTable.Cell {root} column="name">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {rows.cells.name}
+                    </Typography.Text>
+                </AccordionTable.Cell>
+                <AccordionTable.Cell {root} column="value">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {rows.cells.value}
+                    </Typography.Text>
+                </AccordionTable.Cell>
+
+                <svelte:fragment slot="summary" let:root>
+                    {#if rows.children}
+                        {#each rows.children as child}
+                            <AccordionTable.Summary.Row {root}>
+                                <AccordionTable.Summary.Cell
+                                    {root}
+                                    column="name"
+                                    alignment="middle-start"
+                                >
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.name}
+                                    </Typography.Text>
+                                </AccordionTable.Summary.Cell>
+                                <AccordionTable.Summary.Cell
+                                    {root}
+                                    column="value"
+                                    alignment="middle-end"
+                                >
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.value}
+                                    </Typography.Text>
+                                </AccordionTable.Summary.Cell>
+                            </AccordionTable.Summary.Row>
+                        {/each}
+                    {/if}
+                </svelte:fragment>
+            </AccordionTable.Row>
+        {/each}
+    </AccordionTable.Root>
+</Story>
+
+<Story name="With Badges">
+    <AccordionTable.Root columns={badgeColumns} let:root>
+        {#each badgeRows as rows (rows.id)}
+            <AccordionTable.Row {root} id={rows.id} expandable={rows.expandable ?? false}>
+                <AccordionTable.Cell {root} column="service">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {rows.cells.service}
+                    </Typography.Text>
+                    {#if rows.badge}
+                        <Badge
+                            size="xs"
+                            variant="secondary"
+                            type={rows.badge.type}
+                            content={rows.badge.content}
+                        />
+                    {/if}
+                </AccordionTable.Cell>
+                <AccordionTable.Cell {root} column="status">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {rows.cells.status}
+                    </Typography.Text>
+                </AccordionTable.Cell>
+                <AccordionTable.Cell {root} column="amount">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {rows.cells.amount}
+                    </Typography.Text>
+                </AccordionTable.Cell>
+
+                <svelte:fragment slot="summary" let:root>
+                    {#if rows.children}
+                        {#each rows.children as child}
+                            <AccordionTable.Summary.Row {root}>
+                                <AccordionTable.Summary.Cell
+                                    {root}
+                                    column="service"
+                                    alignment="middle-start"
+                                >
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.service}
+                                    </Typography.Text>
+                                </AccordionTable.Summary.Cell>
+                                <AccordionTable.Summary.Cell
+                                    {root}
+                                    column="status"
+                                    alignment="middle-middle"
+                                >
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.status}
+                                    </Typography.Text>
+                                </AccordionTable.Summary.Cell>
+                                <AccordionTable.Summary.Cell
+                                    {root}
+                                    column="amount"
+                                    alignment="middle-end"
+                                >
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-secondary"
+                                    >
+                                        {child.cells.amount}
+                                    </Typography.Text>
+                                </AccordionTable.Summary.Cell>
+                            </AccordionTable.Summary.Row>
+                        {/each}
+                    {/if}
+                </svelte:fragment>
+            </AccordionTable.Row>
+        {/each}
+    </AccordionTable.Root>
+</Story>
diff --git a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte b/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
deleted file mode 100644
index f1fbea9f96..0000000000
--- a/v2/pink-sb/src/stories/ExpandableTable.stories.svelte
+++ /dev/null
@@ -1,380 +0,0 @@
-<script context="module" lang="ts">
-    import { Expandable as ExpandableTable, Typography, Badge } from '$lib/index.js';
-    import type { MetaProps } from '@storybook/addon-svelte-csf';
-
-    export const meta: MetaProps = {
-        title: 'Components/ExpandableTable'
-    };
-</script>
-
-<script lang="ts">
-    import { Story } from '@storybook/addon-svelte-csf';
-
-    export interface ExpandableTableColumn {
-        id: string;
-        title: string;
-        width?: string;
-        align?: 'left' | 'center' | 'right';
-    }
-
-    export interface ExpandableTableRow {
-        id: string;
-        cells: Record<string, string>;
-        expandable?: boolean;
-        open?: boolean;
-        children?: ExpandableTableRow[];
-        badge?: {
-            content: string;
-            type?: 'success' | 'warning' | 'error';
-        };
-    }
-
-    const columns: ExpandableTableColumn[] = [
-        { id: 'service', title: 'Service', width: '2fr', align: 'left' },
-        { id: 'usage', title: 'Usage', width: '2fr', align: 'left' },
-        { id: 'price', title: 'Price', width: '1fr', align: 'right' }
-    ];
-
-    const billingData: ExpandableTableRow[] = [
-        {
-            id: 'base-plan',
-            cells: {
-                service: 'Base plan',
-                price: '$15.00'
-            },
-            expandable: false
-        },
-        {
-            id: 'todo-list',
-            cells: {
-                service: 'Todo list',
-                usage: '',
-                price: '$0.00'
-            },
-            expandable: true,
-            open: false,
-            children: []
-        },
-        {
-            id: 'saas-dashboard-1',
-            cells: {
-                service: 'SaaS dashboard',
-                usage: '',
-                price: '$15.00'
-            },
-            expandable: true,
-            open: false,
-            children: [
-                {
-                    id: 'bandwidth-1',
-                    cells: {
-                        service: 'Bandwidth',
-                        usage: '40,102 / 175,000',
-                        price: '$10'
-                    }
-                },
-                {
-                    id: 'users-1',
-                    cells: {
-                        service: 'Users',
-                        usage: '100,109 / 200,000',
-                        price: '$0'
-                    }
-                },
-                {
-                    id: 'db-reads-1',
-                    cells: {
-                        service: 'Databases reads',
-                        usage: '195,933 / 175,000',
-                        price: '$10'
-                    }
-                },
-                {
-                    id: 'db-writes-1',
-                    cells: {
-                        service: 'Databases writes',
-                        usage: '195,933 / 175,000',
-                        price: '$10'
-                    }
-                },
-                {
-                    id: 'executions-1',
-                    cells: {
-                        service: 'Executions',
-                        usage: '2,007,939 / 3,500,000',
-                        price: '$0'
-                    }
-                },
-                {
-                    id: 'storage-1',
-                    cells: {
-                        service: 'Storage',
-                        usage: '125 GB / 150 GB',
-                        price: '$0'
-                    }
-                },
-                {
-                    id: 'gb-hours-1',
-                    cells: {
-                        service: 'GB-hours',
-                        usage: '902 GB / 1,000 GB',
-                        price: '$0'
-                    }
-                },
-                {
-                    id: 'phone-otp-1',
-                    cells: {
-                        service: 'Phone OTP',
-                        usage: '40,102 SMS messages',
-                        price: '$8.40'
-                    }
-                }
-            ]
-        },
-        {
-            id: 'saas-dashboard-2',
-            cells: {
-                service: 'SaaS dashboard',
-                usage: '',
-                price: '$15.00'
-            },
-            expandable: true,
-            open: false,
-            children: [
-                {
-                    id: 'bandwidth-2',
-                    cells: {
-                        service: 'Bandwidth',
-                        usage: '40,102 / 175,000',
-                        price: '$10'
-                    }
-                },
-                {
-                    id: 'users-2',
-                    cells: {
-                        service: 'Users',
-                        usage: '100,109 / 200,000',
-                        price: '$0'
-                    }
-                }
-            ]
-        },
-        {
-            id: 'usage-details',
-            cells: {
-                service: 'Usage details',
-                usage: '',
-                price: ''
-            },
-            expandable: true,
-            open: false,
-            children: [
-                {
-                    id: 'another-saas',
-                    cells: {
-                        service: 'SaaS dashboard',
-                        usage: '',
-                        price: '$15.00'
-                    }
-                }
-            ]
-        },
-        {
-            id: 'total-row',
-            cells: {
-                service: 'Total',
-                usage: '',
-                price: '$40.00'
-            },
-            expandable: false
-        }
-    ];
-
-    let data = billingData;
-</script>
-
-<Story name="Billing Example">
-    <ExpandableTable.Root {columns} showHeader={false} let:root>
-        {#each data as row, rowIndex (row.id)}
-            <ExpandableTable.Row {root} id={row.id} expandable={row.expandable ?? false}>
-                {#each columns as col, colIndex}
-                    <ExpandableTable.Cell
-                        {root}
-                        column={col.id}
-                        expandable={row.expandable ?? false}
-                    >
-                        <Typography.Text
-                            variant={rowIndex === data.length - 1 ? 'm-500' : 'm-400'}
-                            color={rowIndex === data.length - 1
-                                ? '--fgcolor-neutral-primary'
-                                : '--fgcolor-neutral-secondary'}
-                        >
-                            {row.cells?.[col.id] ?? ''}
-                        </Typography.Text>
-                        {#if row.badge && colIndex === 0}
-                            <Badge
-                                size="xs"
-                                variant="secondary"
-                                type={row.badge.type}
-                                content={row.badge.content}
-                            />
-                        {/if}
-                    </ExpandableTable.Cell>
-                {/each}
-
-                <svelte:fragment slot="summary">
-                    {#if row.children}
-                        {#each row.children as child (child.id)}
-                            <div
-                                class="child-row"
-                                style="grid-template-columns: {root.childGridTemplate};"
-                            >
-                                {#each columns as col}
-                                    <div
-                                        class="child-cell"
-                                        style="justify-content: {root.alignment(col.align)};"
-                                    >
-                                        <Typography.Text
-                                            variant="m-400"
-                                            color="--fgcolor-neutral-secondary"
-                                        >
-                                            {child.cells?.[col.id] ?? ''}
-                                        </Typography.Text>
-                                    </div>
-                                {/each}
-                            </div>
-                        {/each}
-                    {/if}
-                </svelte:fragment>
-            </ExpandableTable.Row>
-        {/each}
-    </ExpandableTable.Root>
-</Story>
-
-<Story name="Simple Example">
-    <ExpandableTable.Root
-        columns={[
-            { id: 'name', title: 'Name', align: 'left' },
-            { id: 'value', title: 'Value', align: 'right' }
-        ]}
-        let:root
-    >
-        {#each [{ id: 'parent1', cells: { name: 'Parent Item 1', value: '100' }, expandable: true, children: [{ id: 'child1', cells: { name: 'Child Item 1', value: '50' } }, { id: 'child2', cells: { name: 'Child Item 2', value: '50' } }] }, { id: 'parent2', cells: { name: 'Parent Item 2', value: '200' }, expandable: false }] as rows (rows.id)}
-            <ExpandableTable.Row {root} id={rows.id} expandable={rows.expandable ?? false}>
-                <ExpandableTable.Cell {root} column="name" expandable={rows.expandable ?? false}>
-                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                        {rows.cells.name}
-                    </Typography.Text>
-                </ExpandableTable.Cell>
-                <ExpandableTable.Cell {root} column="value" expandable={rows.expandable ?? false}>
-                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                        {rows.cells.value}
-                    </Typography.Text>
-                </ExpandableTable.Cell>
-
-                <svelte:fragment slot="summary">
-                    {#if rows.children}
-                        {#each rows.children as child}
-                            <div
-                                class="child-row"
-                                style="grid-template-columns: {root.childGridTemplate};"
-                            >
-                                <div class="child-cell">
-                                    <Typography.Text
-                                        variant="m-400"
-                                        color="--fgcolor-neutral-secondary"
-                                    >
-                                        {child.cells.name}
-                                    </Typography.Text>
-                                </div>
-                                <div class="child-cell" style="justify-content: flex-end;">
-                                    <Typography.Text
-                                        variant="m-400"
-                                        color="--fgcolor-neutral-secondary"
-                                    >
-                                        {child.cells.value}
-                                    </Typography.Text>
-                                </div>
-                            </div>
-                        {/each}
-                    {/if}
-                </svelte:fragment>
-            </ExpandableTable.Row>
-        {/each}
-    </ExpandableTable.Root>
-</Story>
-
-<Story name="With Badges">
-    <ExpandableTable.Root
-        columns={[
-            { id: 'service', title: 'Service', align: 'left' },
-            { id: 'status', title: 'Status', align: 'center' },
-            { id: 'amount', title: 'Amount', align: 'right' }
-        ]}
-        let:root
-    >
-        {#each [{ id: 'service1', cells: { service: 'Premium Service', status: 'Active', amount: '$29.99' }, expandable: true, badge: { content: 'NEW', type: 'success' }, children: [{ id: 'feature1', cells: { service: 'Feature A', status: 'Included', amount: '$0.00' } }, { id: 'feature2', cells: { service: 'Feature B', status: 'Included', amount: '$0.00' } }] }, { id: 'service2', cells: { service: 'Basic Service', status: 'Active', amount: '$9.99' }, expandable: false, badge: { content: 'LEGACY', type: 'warning' } }] as rows (rows.id)}
-            <ExpandableTable.Row {root} id={rows.id} expandable={rows.expandable ?? false}>
-                <ExpandableTable.Cell {root} column="service" expandable={rows.expandable ?? false}>
-                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                        {rows.cells.service}
-                    </Typography.Text>
-                    {#if rows.badge}
-                        <Badge
-                            size="xs"
-                            variant="secondary"
-                            type={rows.badge.type}
-                            content={rows.badge.content}
-                        />
-                    {/if}
-                </ExpandableTable.Cell>
-                <ExpandableTable.Cell {root} column="status" expandable={rows.expandable ?? false}>
-                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                        {rows.cells.status}
-                    </Typography.Text>
-                </ExpandableTable.Cell>
-                <ExpandableTable.Cell {root} column="amount" expandable={rows.expandable ?? false}>
-                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                        {rows.cells.amount}
-                    </Typography.Text>
-                </ExpandableTable.Cell>
-
-                <svelte:fragment slot="summary">
-                    {#if rows.children}
-                        {#each rows.children as child}
-                            <div
-                                class="child-row"
-                                style="grid-template-columns: {root.childGridTemplate};"
-                            >
-                                <div class="child-cell">
-                                    <Typography.Text
-                                        variant="m-400"
-                                        color="--fgcolor-neutral-secondary"
-                                    >
-                                        {child.cells.service}
-                                    </Typography.Text>
-                                </div>
-                                <div class="child-cell" style="justify-content: center;">
-                                    <Typography.Text
-                                        variant="m-400"
-                                        color="--fgcolor-neutral-secondary"
-                                    >
-                                        {child.cells.status}
-                                    </Typography.Text>
-                                </div>
-                                <div class="child-cell" style="justify-content: flex-end;">
-                                    <Typography.Text
-                                        variant="m-400"
-                                        color="--fgcolor-neutral-secondary"
-                                    >
-                                        {child.cells.amount}
-                                    </Typography.Text>
-                                </div>
-                            </div>
-                        {/each}
-                    {/if}
-                </svelte:fragment>
-            </ExpandableTable.Row>
-        {/each}
-    </ExpandableTable.Root>
-</Story>

From 101733ce913a7cfd83b354407faace4831ae07b8 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 8 Sep 2025 10:29:15 +0530
Subject: [PATCH 12/14] address comments.

---
 v2/pink-sb/src/lib/accordion-table/root/Root.svelte       | 5 +++++
 v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte | 2 --
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/v2/pink-sb/src/lib/accordion-table/root/Root.svelte b/v2/pink-sb/src/lib/accordion-table/root/Root.svelte
index 2daf3ff8db..40969239d7 100644
--- a/v2/pink-sb/src/lib/accordion-table/root/Root.svelte
+++ b/v2/pink-sb/src/lib/accordion-table/root/Root.svelte
@@ -115,5 +115,10 @@
     .body {
         width: 100%;
         display: block;
+
+        // remove bottom border of the last row
+        & :global(.table-row:last-of-type .row-content) {
+            border-bottom: unset !important;
+        }
     }
 </style>
diff --git a/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte b/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte
index c229f8ce39..2b2814b56d 100644
--- a/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte
+++ b/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte
@@ -27,8 +27,6 @@
         --p-table-background: transparent;
         --p-table-row-background: var(--bgcolor-neutral-default);
 
-        --border-neutral: var(--divider-color);
-
         :global([role='row']:last-child) :global([role='cell']) {
             border-bottom: 0;
         }

From 40105cc28dbe6821db8dd9e8d071fd6873848e10 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 10 Sep 2025 12:47:24 +0530
Subject: [PATCH 13/14] update: handle viewports on accordion table summary.

---
 .../accordion-table/summary/Summary.svelte    | 67 +++++++++++++++++--
 v2/pink-sb/src/lib/sidebar/Base.svelte        |  1 +
 2 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte b/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte
index 2b2814b56d..f1237eb890 100644
--- a/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte
+++ b/v2/pink-sb/src/lib/accordion-table/summary/Summary.svelte
@@ -1,17 +1,69 @@
 <script lang="ts">
-    import type { RootProp } from '../index.js';
+    import { onMount, tick } from 'svelte';
     import Table from '$lib/table/index.js';
+    import type { RootProp } from '../index.js';
+    import { browser } from '$app/environment';
 
     export let root: RootProp;
 
+    let innerWidth = 1024;
+    let tableReference: HTMLElement;
+    let measuredTemplate: string | null = null;
+
+    onMount(() => (innerWidth = window.innerWidth));
+
+    $: isMobileViewport = innerWidth < 768;
+    $: isDesktopViewport = innerWidth >= 1024;
+    $: isTabletViewport = innerWidth >= 768 && innerWidth < 1024;
+
     $: tableColumns = root.columns.map((c) => ({
         id: c.id,
-        width: c.width,
-        hide: c.hide
+        hide: c.hide,
+        width: isDesktopViewport ? c.width : undefined
     }));
+
+    async function measureColumns() {
+        if (isMobileViewport) {
+            // simpler 1fr for mobile
+            const visibleCount = root.columns.filter((c) => !c.hide).length;
+            measuredTemplate = `repeat(${visibleCount}, 1fr)`;
+        } else if (isTabletViewport && tableReference) {
+            await tick();
+            const widths: number[] = [];
+
+            // not the most optimal, but shouldn't affect performance.
+            const cells = tableReference.querySelectorAll('[role="row"]:first-child [role="cell"]');
+
+            cells.forEach((cell) => {
+                // buffer of 16px, just to be a bit safe!
+                widths.push(cell.getBoundingClientRect().width + 16);
+            });
+
+            if (widths.length > 0) {
+                const minWidth = Math.min(...widths);
+                measuredTemplate = widths
+                    .map((w) => `${Math.max(1, Math.round((w / minWidth) * 10) / 10)}fr`)
+                    .join(' ');
+            }
+        } else {
+            measuredTemplate = null;
+        }
+    }
+
+    $: if (browser && innerWidth) {
+        measureColumns();
+    }
 </script>
 
-<div class="summary">
+<svelte:window bind:innerWidth />
+
+<div
+    class="summary"
+    bind:this={tableReference}
+    class:is-mobile={isMobileViewport}
+    class:is-tablet={isTabletViewport}
+    style:--summary-table-grid-template={measuredTemplate}
+>
     <Table.Root columns={tableColumns} let:root={table}>
         <slot {root} {table} />
     </Table.Root>
@@ -30,5 +82,12 @@
         :global([role='row']:last-child) :global([role='cell']) {
             border-bottom: 0;
         }
+
+        &.is-mobile,
+        &.is-tablet {
+            :global([role='table']) {
+                grid-template-columns: var(--summary-table-grid-template) !important;
+            }
+        }
     }
 </style>
diff --git a/v2/pink-sb/src/lib/sidebar/Base.svelte b/v2/pink-sb/src/lib/sidebar/Base.svelte
index d08d0ac8f1..a5b506eae9 100644
--- a/v2/pink-sb/src/lib/sidebar/Base.svelte
+++ b/v2/pink-sb/src/lib/sidebar/Base.svelte
@@ -27,6 +27,7 @@
 </script>
 
 <svelte:window on:resize={monitorViewport} />
+
 {#if resizable}
     <button
         class="collapse"

From dd980f763152d7be31c767ffa11b0c572c92a9f5 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 11 Sep 2025 19:55:23 +0530
Subject: [PATCH 14/14] Update
 v2/pink-sb/src/lib/accordion-table/cell/Cell.svelte

Co-authored-by: Torsten Dittmann <torsten.dittmann@googlemail.com>
---
 v2/pink-sb/src/lib/accordion-table/cell/Cell.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/accordion-table/cell/Cell.svelte b/v2/pink-sb/src/lib/accordion-table/cell/Cell.svelte
index d6f6fee5f9..65d2912249 100644
--- a/v2/pink-sb/src/lib/accordion-table/cell/Cell.svelte
+++ b/v2/pink-sb/src/lib/accordion-table/cell/Cell.svelte
@@ -8,7 +8,6 @@
     export let root: RootProp;
     export let column: string;
 
-    let expandable: boolean;
     $: expandable = getContext<boolean>('expandable');
 
     let justify: ComponentProps<Stack>['justifyContent'];