From b429c6a6453ef0106ba07287584271cba072708b Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 20 Oct 2025 09:47:53 +0000
Subject: [PATCH 1/6] compound tag

---
 v2/pink-sb/src/lib/CompoundTag/Child.svelte   | 117 ++++++++++++++++++
 .../src/lib/CompoundTag/CompoundTag.svelte    |  53 ++++++++
 v2/pink-sb/src/lib/CompoundTag/index.js       |   7 ++
 v2/pink-sb/src/lib/index.ts                   |   1 +
 .../src/stories/CompoundTag.stories.svelte    | 105 ++++++++++++++++
 5 files changed, 283 insertions(+)
 create mode 100644 v2/pink-sb/src/lib/CompoundTag/Child.svelte
 create mode 100644 v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
 create mode 100644 v2/pink-sb/src/lib/CompoundTag/index.js
 create mode 100644 v2/pink-sb/src/stories/CompoundTag.stories.svelte

diff --git a/v2/pink-sb/src/lib/CompoundTag/Child.svelte b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
new file mode 100644
index 0000000000..88e521e6eb
--- /dev/null
+++ b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+    import type { HTMLButtonAttributes } from 'svelte/elements';
+
+    type $$Props = HTMLButtonAttributes & {
+        variant?: 'default' | 'code';
+        selected?: boolean;
+        disabled?: boolean;
+    };
+
+    export let variant: $$Props['variant'] = 'default';
+    export let selected: $$Props['selected'] = false;
+    export let disabled: $$Props['disabled'] = false;
+</script>
+
+<button
+    class="child"
+    class:code={variant === 'code'}
+    class:selected={selected}
+    class:disabled={disabled}
+    on:click
+    type="button"
+    {disabled}
+    {...$$restProps}
+>
+    <slot />
+</button>
+
+<style lang="scss">
+    @use '../../scss/mixins/transitions';
+
+    .child {
+        @include transitions.common;
+
+        --p-compound-tag-child-font-family:
+            var(--badge-font-family, var(--font-family-sansserif)), var(--sans-fallbacks);
+        --p-compound-tag-child-font-size: var(--badge-font-size, var(--font-size-s));
+        --p-compound-tag-child-padding-block: var(--badge-padding-block, var(--space-3));
+        --p-compound-tag-child-padding-inline: var(--badge-padding-inline, var(--space-5));
+        --p-compound-tag-child-gap: var(--badge-gap, var(--space-3));
+        --p-compound-tag-child-color: var(--tag-color, var(--fgcolor-neutral-secondary));
+        --p-compound-tag-child-background-color: var(--tag-background-color, var(--bgcolor-neutral-default));
+        --p-compound-tag-child-border-color: var(--border-neutral);
+        --p-compound-tag-child-divider-color: var(--border-neutral);
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding-block: var(--p-compound-tag-child-padding-block);
+        padding-inline: var(--p-compound-tag-child-padding-inline);
+        gap: var(--p-compound-tag-child-gap);
+        min-height: 100%;
+
+        color: var(--p-compound-tag-child-color);
+        background-color: transparent;
+        border: none;
+        border-right: var(--border-width-s) solid var(--p-compound-tag-child-divider-color);
+
+        font-family: var(--p-compound-tag-child-font-family);
+        font-size: var(--p-compound-tag-child-font-size);
+        font-style: normal;
+        font-weight: 500;
+        line-height: 140%;
+
+        cursor: pointer;
+
+        /* Ensure all content is properly aligned */
+        > * {
+            display: inline-flex;
+            align-items: center;
+            vertical-align: middle;
+        }
+
+        &:last-child {
+            border-right: none;
+        }
+
+        &:hover {
+            background-color: var(--bgcolor-neutral-secondary);
+        }
+
+        &:active {
+            background-color: var(--bgcolor-neutral-secondary);
+        }
+
+        &:focus-visible {
+            outline: var(--border-width-l) solid var(--border-focus);
+            outline-offset: -2px;
+        }
+
+        &:disabled {
+            background-color: var(--bgcolor-neutral-primary);
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        &.code {
+            --p-compound-tag-child-font-family: var(--font-family-code), var(--mono-fallbacks);
+        }
+
+        &.selected {
+            --p-compound-tag-child-background-color: var(--bgcolor-neutral-secondary);
+            border: var(--border-width-s) solid var(--border-neutral-stronger);
+        }
+    }
+
+    /* Size variants */
+    :global(.compound-tag.xs) .child {
+        --p-compound-tag-child-font-size: var(--font-size-xs);
+        --p-compound-tag-child-padding-block: var(--space-1);
+        --p-compound-tag-child-padding-inline: var(--space-3);
+    }
+
+    :global(.compound-tag.s) .child {
+        --p-compound-tag-child-padding-block: var(--space-1);
+        --p-compound-tag-child-padding-inline: var(--space-3);
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte b/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
new file mode 100644
index 0000000000..83605a24ca
--- /dev/null
+++ b/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    type $$Props = {
+        size?: 'xs' | 's' | 'm';
+    };
+
+    export let size: $$Props['size'] = 'm';
+</script>
+
+<div
+    class="compound-tag"
+    class:xs={size === 'xs'}
+    class:s={size === 's'}
+    class:m={size === 'm'}
+>
+    <slot />
+</div>
+
+<style lang="scss">
+    @use '../../scss/mixins/transitions';
+
+    .compound-tag {
+        @include transitions.common;
+
+        --p-compound-tag-font-family:
+            var(--badge-font-family, var(--font-family-sansserif)), var(--sans-fallbacks);
+        --p-compound-tag-font-size: var(--badge-font-size, var(--font-size-s));
+        --p-compound-tag-padding-block: var(--badge-padding-block, var(--space-3));
+        --p-compound-tag-padding-inline: var(--badge-padding-inline, var(--space-5));
+        --p-compound-tag-gap: var(--badge-gap, var(--space-3));
+        --p-compound-tag-color: var(--tag-color, var(--fgcolor-neutral-secondary));
+        --p-compound-tag-background-color: var(--tag-background-color, var(--bgcolor-neutral-default));
+        --p-compound-tag-border-color: var(--border-neutral);
+        --p-compound-tag-divider-color: var(--border-neutral);
+
+        display: inline-flex;
+        align-items: stretch;
+        background-color: var(--p-compound-tag-background-color);
+        border: var(--border-width-s) solid var(--p-compound-tag-border-color);
+        border-radius: var(--border-radius-XS, 6px);
+        overflow: hidden;
+
+        &.xs {
+            --p-compound-tag-font-size: var(--font-size-xs);
+            --p-compound-tag-padding-block: var(--space-1);
+            --p-compound-tag-padding-inline: var(--space-3);
+        }
+
+        &.s {
+            --p-compound-tag-padding-block: var(--space-1);
+            --p-compound-tag-padding-inline: var(--space-3);
+        }
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/CompoundTag/index.js b/v2/pink-sb/src/lib/CompoundTag/index.js
new file mode 100644
index 0000000000..fed0afb645
--- /dev/null
+++ b/v2/pink-sb/src/lib/CompoundTag/index.js
@@ -0,0 +1,7 @@
+import CompoundTag from './CompoundTag.svelte';
+import Child from './Child.svelte';
+
+export { default as CompoundTag } from './CompoundTag.svelte';
+export { default as Child } from './Child.svelte';
+
+export default CompoundTag;
diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
index 9bf7a42e6d..9bf834530f 100644
--- a/v2/pink-sb/src/lib/index.ts
+++ b/v2/pink-sb/src/lib/index.ts
@@ -8,6 +8,7 @@ export { default as InteractiveText } from './InteractiveText.svelte';
 export { default as Root } from './Root.svelte';
 export { default as Status } from './Status.svelte';
 export { default as Tag } from './Tag.svelte';
+export * as CompoundTag from './CompoundTag/index.js';
 export { default as ToggleButton } from './ToggleButton.svelte';
 export { default as ProgressCircle } from './ProgressCircle.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
diff --git a/v2/pink-sb/src/stories/CompoundTag.stories.svelte b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
new file mode 100644
index 0000000000..bbf20d7e6f
--- /dev/null
+++ b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
@@ -0,0 +1,105 @@
+<script context="module" lang="ts">
+    import { CompoundTag } from '$lib/index.js';
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+
+    export const meta: MetaProps = {
+        title: 'Components/CompoundTag',
+        component: CompoundTag.CompoundTag
+    };
+</script>
+
+<script>
+    import Icon from '$lib/Icon.svelte';
+    import Badge from '$lib/Badge.svelte';
+    import { Story, Template } from '@storybook/addon-svelte-csf';
+    import { IconXCircle, IconTag, IconFilter, IconCheck } from '@appwrite.io/pink-icons-svelte';
+</script>
+
+<Template let:args>
+    <CompoundTag.CompoundTag {...args} />
+</Template>
+
+<Story name="Default" let:args>
+    <CompoundTag.CompoundTag size={args.size}>
+        <CompoundTag.Child on:click={() => console.log('Clicked Status')}>Status</CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked is')}>is</CompoundTag.Child>
+        <CompoundTag.Child selected on:click={() => console.log('Clicked Active')}>Active</CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked close')}>×</CompoundTag.Child>
+    </CompoundTag.CompoundTag>
+</Story>
+
+<Story name="Filter Example" let:args>
+    <CompoundTag.CompoundTag size={args.size}>
+        <CompoundTag.Child on:click={() => console.log('Clicked field')}>
+            <Icon icon={IconFilter} />
+            Build duration
+        </CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked operator')}>is</CompoundTag.Child>
+        <CompoundTag.Child selected on:click={() => console.log('Clicked value')}>more than 2 minutes</CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked remove')}>
+            <Icon icon={IconXCircle} />
+        </CompoundTag.Child>
+    </CompoundTag.CompoundTag>
+</Story>
+
+<Story name="Status Example" let:args>
+    <CompoundTag.CompoundTag size={args.size}>
+        <CompoundTag.Child on:click={() => console.log('Clicked type')}>Status</CompoundTag.Child>
+        <CompoundTag.Child selected on:click={() => console.log('Clicked status')}>
+            <Icon icon={IconCheck} />
+            Completed
+        </CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked action')}>
+            <Icon icon={IconXCircle} />
+        </CompoundTag.Child>
+    </CompoundTag.CompoundTag>
+</Story>
+
+<Story name="Small Size" let:args>
+    <CompoundTag.CompoundTag size="s">
+        <CompoundTag.Child on:click={() => console.log('Clicked Tag')}>Tag</CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked is')}>is</CompoundTag.Child>
+        <CompoundTag.Child selected on:click={() => console.log('Clicked Tag')}>Tag</CompoundTag.Child>
+    </CompoundTag.CompoundTag>
+</Story>
+
+<Story name="X-Small Size" let:args>
+    <CompoundTag.CompoundTag size="xs">
+        <CompoundTag.Child on:click={() => console.log('Clicked Filter')}>Filter</CompoundTag.Child>
+        <CompoundTag.Child selected on:click={() => console.log('Clicked Active')}>Active</CompoundTag.Child>
+    </CompoundTag.CompoundTag>
+</Story>
+
+<Story name="With Disabled Child" let:args>
+    <CompoundTag.CompoundTag size={args.size}>
+        <CompoundTag.Child on:click={() => console.log('Clicked Tag')}>Tag</CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked is')}>is</CompoundTag.Child>
+        <CompoundTag.Child selected disabled on:click={() => console.log('Clicked Tag')}>Tag</CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked close')}>×</CompoundTag.Child>
+    </CompoundTag.CompoundTag>
+</Story>
+
+<Story name="Custom Content" let:args>
+    <CompoundTag.CompoundTag size={args.size}>
+        <CompoundTag.Child on:click={() => console.log('Clicked label')}>
+            <Icon icon={IconTag} />
+            Tag
+        </CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked operator')}>is</CompoundTag.Child>
+        <CompoundTag.Child selected on:click={() => console.log('Clicked value')}>
+            <Badge variant="primary" type="success" content="Active" />
+        </CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked close')}>
+            <Icon icon={IconXCircle} />
+        </CompoundTag.Child>
+    </CompoundTag.CompoundTag>
+</Story>
+
+<Story name="Code Variant" let:args>
+    <CompoundTag.CompoundTag size={args.size}>
+        <CompoundTag.Child on:click={() => console.log('Clicked function')}>function</CompoundTag.Child>
+        <CompoundTag.Child variant="code" on:click={() => console.log('Clicked name')}>getUserData</CompoundTag.Child>
+        <CompoundTag.Child on:click={() => console.log('Clicked params')}>()</CompoundTag.Child>
+        <CompoundTag.Child selected on:click={() => console.log('Clicked return')}>return</CompoundTag.Child>
+    </CompoundTag.CompoundTag>
+</Story>

From b9bf6370587ebd0a1e32995e20f27f5f0a999e65 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Wed, 29 Oct 2025 14:17:16 +0000
Subject: [PATCH 2/6] added stories

---
 v2/pink-sb/src/lib/CompoundTag/Child.svelte   |  12 +-
 .../src/lib/CompoundTag/CompoundTag.svelte    |  49 ++++-
 v2/pink-sb/src/lib/index.ts                   |   1 +
 .../src/stories/CompoundTag.stories.svelte    | 175 ++++++++++++------
 4 files changed, 170 insertions(+), 67 deletions(-)

diff --git a/v2/pink-sb/src/lib/CompoundTag/Child.svelte b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
index 88e521e6eb..6a8f3bb9de 100644
--- a/v2/pink-sb/src/lib/CompoundTag/Child.svelte
+++ b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
@@ -5,21 +5,24 @@
         variant?: 'default' | 'code';
         selected?: boolean;
         disabled?: boolean;
+        dismiss?: boolean;
     };
 
     export let variant: $$Props['variant'] = 'default';
     export let selected: $$Props['selected'] = false;
     export let disabled: $$Props['disabled'] = false;
+    export let dismiss: $$Props['dismiss'] = false;
 </script>
 
 <button
     class="child"
     class:code={variant === 'code'}
-    class:selected={selected}
-    class:disabled={disabled}
+    class:selected
+    class:disabled
     on:click
     type="button"
     {disabled}
+    data-dismiss={dismiss ? 'true' : undefined}
     {...$$restProps}
 >
     <slot />
@@ -38,7 +41,10 @@
         --p-compound-tag-child-padding-inline: var(--badge-padding-inline, var(--space-5));
         --p-compound-tag-child-gap: var(--badge-gap, var(--space-3));
         --p-compound-tag-child-color: var(--tag-color, var(--fgcolor-neutral-secondary));
-        --p-compound-tag-child-background-color: var(--tag-background-color, var(--bgcolor-neutral-default));
+        --p-compound-tag-child-background-color: var(
+            --tag-background-color,
+            var(--bgcolor-neutral-default)
+        );
         --p-compound-tag-child-border-color: var(--border-neutral);
         --p-compound-tag-child-divider-color: var(--border-neutral);
 
diff --git a/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte b/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
index 83605a24ca..b344cf0504 100644
--- a/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
+++ b/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
@@ -4,16 +4,44 @@
     };
 
     export let size: $$Props['size'] = 'm';
+
+    let visible = true;
+
+    function handleClick(event: MouseEvent) {
+        const target = event.target as HTMLElement | null;
+        if (!target) return;
+        const dismissEl = target.closest('[data-dismiss="true"]');
+        if (dismissEl) {
+            visible = false;
+        }
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        const target = e.target as HTMLElement | null;
+        if (!target) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            const dismissEl = target.closest('[data-dismiss="true"]');
+            if (dismissEl) {
+                e.preventDefault();
+                visible = false;
+            }
+        }
+    }
 </script>
 
-<div
-    class="compound-tag"
-    class:xs={size === 'xs'}
-    class:s={size === 's'}
-    class:m={size === 'm'}
->
-    <slot />
-</div>
+{#if visible}
+    <div
+        class="compound-tag"
+        class:xs={size === 'xs'}
+        class:s={size === 's'}
+        class:m={size === 'm'}
+        role="group"
+        on:click={handleClick}
+        on:keydown={handleKeydown}
+    >
+        <slot />
+    </div>
+{/if}
 
 <style lang="scss">
     @use '../../scss/mixins/transitions';
@@ -28,7 +56,10 @@
         --p-compound-tag-padding-inline: var(--badge-padding-inline, var(--space-5));
         --p-compound-tag-gap: var(--badge-gap, var(--space-3));
         --p-compound-tag-color: var(--tag-color, var(--fgcolor-neutral-secondary));
-        --p-compound-tag-background-color: var(--tag-background-color, var(--bgcolor-neutral-default));
+        --p-compound-tag-background-color: var(
+            --tag-background-color,
+            var(--bgcolor-neutral-default)
+        );
         --p-compound-tag-border-color: var(--border-neutral);
         --p-compound-tag-divider-color: var(--border-neutral);
 
diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
index 9bf834530f..110d86ff7b 100644
--- a/v2/pink-sb/src/lib/index.ts
+++ b/v2/pink-sb/src/lib/index.ts
@@ -9,6 +9,7 @@ export { default as Root } from './Root.svelte';
 export { default as Status } from './Status.svelte';
 export { default as Tag } from './Tag.svelte';
 export * as CompoundTag from './CompoundTag/index.js';
+export { CompoundTag as CompoundTagRoot, Child as CompoundTagChild } from './CompoundTag/index.js';
 export { default as ToggleButton } from './ToggleButton.svelte';
 export { default as ProgressCircle } from './ProgressCircle.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
diff --git a/v2/pink-sb/src/stories/CompoundTag.stories.svelte b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
index bbf20d7e6f..deb693d4ff 100644
--- a/v2/pink-sb/src/stories/CompoundTag.stories.svelte
+++ b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
@@ -1,105 +1,170 @@
 <script context="module" lang="ts">
-    import { CompoundTag } from '$lib/index.js';
+    import { CompoundTagRoot, CompoundTagChild } from '$lib/index.js';
     import type { MetaProps } from '@storybook/addon-svelte-csf';
 
     export const meta: MetaProps = {
         title: 'Components/CompoundTag',
-        component: CompoundTag.CompoundTag
+        component: CompoundTagRoot
     };
 </script>
 
 <script>
     import Icon from '$lib/Icon.svelte';
     import Badge from '$lib/Badge.svelte';
+    import Popover from '$lib/Popover.svelte';
+    import ActionMenu from '$lib/action-menu/index.js';
     import { Story, Template } from '@storybook/addon-svelte-csf';
-    import { IconXCircle, IconTag, IconFilter, IconCheck } from '@appwrite.io/pink-icons-svelte';
+    import {
+        IconXCircle,
+        IconTag,
+        IconFilter,
+        IconCheck,
+        IconX,
+        IconInfo,
+        IconChevronDoubleRight
+    } from '@appwrite.io/pink-icons-svelte';
 </script>
 
 <Template let:args>
-    <CompoundTag.CompoundTag {...args} />
+    <CompoundTagRoot {...args} />
 </Template>
 
 <Story name="Default" let:args>
-    <CompoundTag.CompoundTag size={args.size}>
-        <CompoundTag.Child on:click={() => console.log('Clicked Status')}>Status</CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked is')}>is</CompoundTag.Child>
-        <CompoundTag.Child selected on:click={() => console.log('Clicked Active')}>Active</CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked close')}>×</CompoundTag.Child>
-    </CompoundTag.CompoundTag>
+    <CompoundTagRoot size={args.size}>
+        <CompoundTagChild on:click={() => console.log('Clicked Status')}>Status</CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked is')}>is</CompoundTagChild>
+        <CompoundTagChild selected on:click={() => console.log('Clicked Active')}
+            >Active</CompoundTagChild
+        >
+        <CompoundTagChild aria-label="Dismiss" dismiss>
+            <Icon size="s" icon={IconX} />
+        </CompoundTagChild>
+    </CompoundTagRoot>
 </Story>
 
 <Story name="Filter Example" let:args>
-    <CompoundTag.CompoundTag size={args.size}>
-        <CompoundTag.Child on:click={() => console.log('Clicked field')}>
+    <CompoundTagRoot size={args.size}>
+        <CompoundTagChild on:click={() => console.log('Clicked field')}>
             <Icon icon={IconFilter} />
             Build duration
-        </CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked operator')}>is</CompoundTag.Child>
-        <CompoundTag.Child selected on:click={() => console.log('Clicked value')}>more than 2 minutes</CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked remove')}>
+        </CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked operator')}>is</CompoundTagChild>
+        <CompoundTagChild selected on:click={() => console.log('Clicked value')}
+            >more than 2 minutes</CompoundTagChild
+        >
+        <CompoundTagChild on:click={() => console.log('Clicked remove')}>
             <Icon icon={IconXCircle} />
-        </CompoundTag.Child>
-    </CompoundTag.CompoundTag>
+        </CompoundTagChild>
+    </CompoundTagRoot>
 </Story>
 
 <Story name="Status Example" let:args>
-    <CompoundTag.CompoundTag size={args.size}>
-        <CompoundTag.Child on:click={() => console.log('Clicked type')}>Status</CompoundTag.Child>
-        <CompoundTag.Child selected on:click={() => console.log('Clicked status')}>
+    <CompoundTagRoot size={args.size}>
+        <CompoundTagChild on:click={() => console.log('Clicked type')}>Status</CompoundTagChild>
+        <CompoundTagChild selected on:click={() => console.log('Clicked status')}>
             <Icon icon={IconCheck} />
             Completed
-        </CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked action')}>
+        </CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked action')}>
             <Icon icon={IconXCircle} />
-        </CompoundTag.Child>
-    </CompoundTag.CompoundTag>
+        </CompoundTagChild>
+    </CompoundTagRoot>
 </Story>
 
 <Story name="Small Size" let:args>
-    <CompoundTag.CompoundTag size="s">
-        <CompoundTag.Child on:click={() => console.log('Clicked Tag')}>Tag</CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked is')}>is</CompoundTag.Child>
-        <CompoundTag.Child selected on:click={() => console.log('Clicked Tag')}>Tag</CompoundTag.Child>
-    </CompoundTag.CompoundTag>
+    <CompoundTagRoot size="s">
+        <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked is')}>is</CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
+    </CompoundTagRoot>
 </Story>
 
 <Story name="X-Small Size" let:args>
-    <CompoundTag.CompoundTag size="xs">
-        <CompoundTag.Child on:click={() => console.log('Clicked Filter')}>Filter</CompoundTag.Child>
-        <CompoundTag.Child selected on:click={() => console.log('Clicked Active')}>Active</CompoundTag.Child>
-    </CompoundTag.CompoundTag>
+    <CompoundTagRoot size="xs">
+        <CompoundTagChild on:click={() => console.log('Clicked Filter')}>Filter</CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked Active')}>Active</CompoundTagChild>
+    </CompoundTagRoot>
 </Story>
 
 <Story name="With Disabled Child" let:args>
-    <CompoundTag.CompoundTag size={args.size}>
-        <CompoundTag.Child on:click={() => console.log('Clicked Tag')}>Tag</CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked is')}>is</CompoundTag.Child>
-        <CompoundTag.Child selected disabled on:click={() => console.log('Clicked Tag')}>Tag</CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked close')}>×</CompoundTag.Child>
-    </CompoundTag.CompoundTag>
+    <CompoundTagRoot size={args.size}>
+        <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked is')}>is</CompoundTagChild>
+        <CompoundTagChild disabled on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild
+        >
+        <CompoundTagChild on:click={() => console.log('Clicked close')}>×</CompoundTagChild>
+    </CompoundTagRoot>
 </Story>
 
 <Story name="Custom Content" let:args>
-    <CompoundTag.CompoundTag size={args.size}>
-        <CompoundTag.Child on:click={() => console.log('Clicked label')}>
+    <CompoundTagRoot size={args.size}>
+        <CompoundTagChild on:click={() => console.log('Clicked label')}>
             <Icon icon={IconTag} />
             Tag
-        </CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked operator')}>is</CompoundTag.Child>
-        <CompoundTag.Child selected on:click={() => console.log('Clicked value')}>
+        </CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked operator')}>is</CompoundTagChild>
+        <CompoundTagChild selected on:click={() => console.log('Clicked value')}>
             <Badge variant="primary" type="success" content="Active" />
-        </CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked close')}>
+        </CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked close')}>
             <Icon icon={IconXCircle} />
-        </CompoundTag.Child>
-    </CompoundTag.CompoundTag>
+        </CompoundTagChild>
+    </CompoundTagRoot>
 </Story>
 
 <Story name="Code Variant" let:args>
-    <CompoundTag.CompoundTag size={args.size}>
-        <CompoundTag.Child on:click={() => console.log('Clicked function')}>function</CompoundTag.Child>
-        <CompoundTag.Child variant="code" on:click={() => console.log('Clicked name')}>getUserData</CompoundTag.Child>
-        <CompoundTag.Child on:click={() => console.log('Clicked params')}>()</CompoundTag.Child>
-        <CompoundTag.Child selected on:click={() => console.log('Clicked return')}>return</CompoundTag.Child>
-    </CompoundTag.CompoundTag>
+    <CompoundTagRoot size={args.size}>
+        <CompoundTagChild on:click={() => console.log('Clicked function')}
+            >function</CompoundTagChild
+        >
+        <CompoundTagChild variant="code" on:click={() => console.log('Clicked name')}
+            >getUserData</CompoundTagChild
+        >
+        <CompoundTagChild on:click={() => console.log('Clicked params')}>()</CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked return')}>return</CompoundTagChild>
+    </CompoundTagRoot>
+</Story>
+
+<Story name="With Action Menu" let:args>
+    <CompoundTagRoot size={args.size}>
+        <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
+        <CompoundTagChild on:click={() => console.log('Clicked is')}>is</CompoundTagChild>
+        <Popover let:toggle placement="bottom-start" padding="none">
+            <CompoundTagChild selected on:click={toggle}>Actions</CompoundTagChild>
+            <svelte:fragment slot="tooltip">
+                <ActionMenu.Root>
+                    <ActionMenu.Item.Button
+                        leadingIcon={IconInfo}
+                        trailingIcon={IconChevronDoubleRight}
+                        badge="1"
+                    >
+                        Default
+                    </ActionMenu.Item.Button>
+                    <ActionMenu.Item.Button
+                        leadingIcon={IconInfo}
+                        trailingIcon={IconChevronDoubleRight}
+                        badge="1"
+                    >
+                        Default with a very long text
+                    </ActionMenu.Item.Button>
+                    <ActionMenu.Item.Button
+                        leadingIcon={IconInfo}
+                        trailingIcon={IconChevronDoubleRight}
+                        disabled
+                    >
+                        Disabled
+                    </ActionMenu.Item.Button>
+                    <ActionMenu.Item.Button leadingIcon={IconInfo} status="danger">
+                        Danger
+                    </ActionMenu.Item.Button>
+                    <ActionMenu.Item.Button leadingIcon={IconInfo} status="danger" disabled>
+                        Danger Disabled
+                    </ActionMenu.Item.Button>
+                </ActionMenu.Root>
+            </svelte:fragment>
+        </Popover>
+        <CompoundTagChild dismiss on:click={() => console.log('Clicked close')}>
+            <Icon icon={IconX} />
+        </CompoundTagChild>
+    </CompoundTagRoot>
 </Story>

From f61dd8d80b47b78a2461fc1290cfb86e36f82843 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Wed, 29 Oct 2025 14:24:01 +0000
Subject: [PATCH 3/6] removed extra stories

---
 .../src/stories/CompoundTag.stories.svelte    | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/v2/pink-sb/src/stories/CompoundTag.stories.svelte b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
index deb693d4ff..45065e28bf 100644
--- a/v2/pink-sb/src/stories/CompoundTag.stories.svelte
+++ b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
@@ -21,7 +21,8 @@
         IconCheck,
         IconX,
         IconInfo,
-        IconChevronDoubleRight
+        IconChevronDoubleRight,
+        IconDuplicate
     } from '@appwrite.io/pink-icons-svelte';
 </script>
 
@@ -42,6 +43,18 @@
     </CompoundTagRoot>
 </Story>
 
+<Story name="Action" let:args>
+    <CompoundTagRoot size={args.size}>
+        <CompoundTagChild>
+            <Icon icon={IconDuplicate} />
+            Action
+        </CompoundTagChild>
+        <CompoundTagChild aria-label="Dismiss" dismiss>
+            <Icon size="s" icon={IconX} />
+        </CompoundTagChild>
+    </CompoundTagRoot>
+</Story>
+
 <Story name="Filter Example" let:args>
     <CompoundTagRoot size={args.size}>
         <CompoundTagChild on:click={() => console.log('Clicked field')}>
@@ -96,22 +109,6 @@
     </CompoundTagRoot>
 </Story>
 
-<Story name="Custom Content" let:args>
-    <CompoundTagRoot size={args.size}>
-        <CompoundTagChild on:click={() => console.log('Clicked label')}>
-            <Icon icon={IconTag} />
-            Tag
-        </CompoundTagChild>
-        <CompoundTagChild on:click={() => console.log('Clicked operator')}>is</CompoundTagChild>
-        <CompoundTagChild selected on:click={() => console.log('Clicked value')}>
-            <Badge variant="primary" type="success" content="Active" />
-        </CompoundTagChild>
-        <CompoundTagChild on:click={() => console.log('Clicked close')}>
-            <Icon icon={IconXCircle} />
-        </CompoundTagChild>
-    </CompoundTagRoot>
-</Story>
-
 <Story name="Code Variant" let:args>
     <CompoundTagRoot size={args.size}>
         <CompoundTagChild on:click={() => console.log('Clicked function')}

From d40a62becead2d95d4ed104c1e379b90e790b7de Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Wed, 29 Oct 2025 14:30:22 +0000
Subject: [PATCH 4/6] lint fixes

---
 v2/pink-sb/src/lib/CompoundTag/Child.svelte   | 12 +++++++--
 .../src/lib/CompoundTag/CompoundTag.svelte    | 26 ++++---------------
 v2/pink-sb/src/lib/CompoundTag/index.js       |  6 +----
 .../src/stories/CompoundTag.stories.svelte    |  6 ++---
 4 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/v2/pink-sb/src/lib/CompoundTag/Child.svelte b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
index 6a8f3bb9de..37c05d41f0 100644
--- a/v2/pink-sb/src/lib/CompoundTag/Child.svelte
+++ b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { HTMLButtonAttributes } from 'svelte/elements';
+    import { createEventDispatcher, getContext } from 'svelte';
 
     type $$Props = HTMLButtonAttributes & {
         variant?: 'default' | 'code';
@@ -12,6 +13,9 @@
     export let selected: $$Props['selected'] = false;
     export let disabled: $$Props['disabled'] = false;
     export let dismiss: $$Props['dismiss'] = false;
+
+    const dispatch = createEventDispatcher();
+    const dismissFn = getContext<() => void>('compound-tag-dismiss');
 </script>
 
 <button
@@ -19,10 +23,14 @@
     class:code={variant === 'code'}
     class:selected
     class:disabled
-    on:click
+    on:click|capture={() => {
+        if (dismiss) {
+            dismissFn?.();
+            dispatch('dismiss');
+        }
+    }}
     type="button"
     {disabled}
-    data-dismiss={dismiss ? 'true' : undefined}
     {...$$restProps}
 >
     <slot />
diff --git a/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte b/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
index b344cf0504..9d234ba088 100644
--- a/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
+++ b/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
@@ -3,30 +3,16 @@
         size?: 'xs' | 's' | 'm';
     };
 
+    import { setContext } from 'svelte';
+
     export let size: $$Props['size'] = 'm';
 
     let visible = true;
-
-    function handleClick(event: MouseEvent) {
-        const target = event.target as HTMLElement | null;
-        if (!target) return;
-        const dismissEl = target.closest('[data-dismiss="true"]');
-        if (dismissEl) {
-            visible = false;
-        }
+    function handleDismiss() {
+        visible = false;
     }
 
-    function handleKeydown(e: KeyboardEvent) {
-        const target = e.target as HTMLElement | null;
-        if (!target) return;
-        if (e.key === 'Enter' || e.key === ' ') {
-            const dismissEl = target.closest('[data-dismiss="true"]');
-            if (dismissEl) {
-                e.preventDefault();
-                visible = false;
-            }
-        }
-    }
+    setContext('compound-tag-dismiss', handleDismiss);
 </script>
 
 {#if visible}
@@ -36,8 +22,6 @@
         class:s={size === 's'}
         class:m={size === 'm'}
         role="group"
-        on:click={handleClick}
-        on:keydown={handleKeydown}
     >
         <slot />
     </div>
diff --git a/v2/pink-sb/src/lib/CompoundTag/index.js b/v2/pink-sb/src/lib/CompoundTag/index.js
index fed0afb645..c8b0012c81 100644
--- a/v2/pink-sb/src/lib/CompoundTag/index.js
+++ b/v2/pink-sb/src/lib/CompoundTag/index.js
@@ -1,7 +1,3 @@
-import CompoundTag from './CompoundTag.svelte';
-import Child from './Child.svelte';
-
 export { default as CompoundTag } from './CompoundTag.svelte';
 export { default as Child } from './Child.svelte';
-
-export default CompoundTag;
+export { default } from './CompoundTag.svelte';
diff --git a/v2/pink-sb/src/stories/CompoundTag.stories.svelte b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
index 45065e28bf..65cb43059b 100644
--- a/v2/pink-sb/src/stories/CompoundTag.stories.svelte
+++ b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
@@ -10,13 +10,11 @@
 
 <script>
     import Icon from '$lib/Icon.svelte';
-    import Badge from '$lib/Badge.svelte';
     import Popover from '$lib/Popover.svelte';
     import ActionMenu from '$lib/action-menu/index.js';
     import { Story, Template } from '@storybook/addon-svelte-csf';
     import {
         IconXCircle,
-        IconTag,
         IconFilter,
         IconCheck,
         IconX,
@@ -84,7 +82,7 @@
     </CompoundTagRoot>
 </Story>
 
-<Story name="Small Size" let:args>
+<Story name="Small Size">
     <CompoundTagRoot size="s">
         <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
         <CompoundTagChild on:click={() => console.log('Clicked is')}>is</CompoundTagChild>
@@ -92,7 +90,7 @@
     </CompoundTagRoot>
 </Story>
 
-<Story name="X-Small Size" let:args>
+<Story name="X-Small Size">
     <CompoundTagRoot size="xs">
         <CompoundTagChild on:click={() => console.log('Clicked Filter')}>Filter</CompoundTagChild>
         <CompoundTagChild on:click={() => console.log('Clicked Active')}>Active</CompoundTagChild>

From a438881cab7ffeeca5e85a19463854202321239a Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Wed, 29 Oct 2025 14:34:37 +0000
Subject: [PATCH 5/6] added on:click

---
 v2/pink-sb/src/lib/CompoundTag/Child.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/v2/pink-sb/src/lib/CompoundTag/Child.svelte b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
index 37c05d41f0..e3a67462c5 100644
--- a/v2/pink-sb/src/lib/CompoundTag/Child.svelte
+++ b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
@@ -23,6 +23,7 @@
     class:code={variant === 'code'}
     class:selected
     class:disabled
+    on:click
     on:click|capture={() => {
         if (dismiss) {
             dismissFn?.();

From 7c771ee06e6f8b3a6bb765b6c7558f1daa8fffb4 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Fri, 31 Oct 2025 06:42:26 +0000
Subject: [PATCH 6/6] fixes and design changes

---
 v2/pink-sb/src/lib/CompoundTag/Child.svelte   | 31 +++++------------
 .../src/lib/CompoundTag/CompoundTag.svelte    | 21 +++---------
 .../src/stories/CompoundTag.stories.svelte    | 34 ++++++++++++-------
 3 files changed, 35 insertions(+), 51 deletions(-)

diff --git a/v2/pink-sb/src/lib/CompoundTag/Child.svelte b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
index e3a67462c5..6c69f68261 100644
--- a/v2/pink-sb/src/lib/CompoundTag/Child.svelte
+++ b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
@@ -16,13 +16,13 @@
 
     const dispatch = createEventDispatcher();
     const dismissFn = getContext<() => void>('compound-tag-dismiss');
+    const size = getContext<'s' | 'm'>('compound-tag-size');
 </script>
 
 <button
-    class="child"
     class:code={variant === 'code'}
     class:selected
-    class:disabled
+    class:s={size === 's'}
     on:click
     on:click|capture={() => {
         if (dismiss) {
@@ -40,13 +40,13 @@
 <style lang="scss">
     @use '../../scss/mixins/transitions';
 
-    .child {
+    button {
         @include transitions.common;
 
         --p-compound-tag-child-font-family:
             var(--badge-font-family, var(--font-family-sansserif)), var(--sans-fallbacks);
         --p-compound-tag-child-font-size: var(--badge-font-size, var(--font-size-s));
-        --p-compound-tag-child-padding-block: var(--badge-padding-block, var(--space-3));
+        --p-compound-tag-child-padding-block: var(--badge-padding-block, var(--space-5));
         --p-compound-tag-child-padding-inline: var(--badge-padding-inline, var(--space-5));
         --p-compound-tag-child-gap: var(--badge-gap, var(--space-3));
         --p-compound-tag-child-color: var(--tag-color, var(--fgcolor-neutral-secondary));
@@ -78,13 +78,6 @@
 
         cursor: pointer;
 
-        /* Ensure all content is properly aligned */
-        > * {
-            display: inline-flex;
-            align-items: center;
-            vertical-align: middle;
-        }
-
         &:last-child {
             border-right: none;
         }
@@ -116,17 +109,11 @@
             --p-compound-tag-child-background-color: var(--bgcolor-neutral-secondary);
             border: var(--border-width-s) solid var(--border-neutral-stronger);
         }
-    }
 
-    /* Size variants */
-    :global(.compound-tag.xs) .child {
-        --p-compound-tag-child-font-size: var(--font-size-xs);
-        --p-compound-tag-child-padding-block: var(--space-1);
-        --p-compound-tag-child-padding-inline: var(--space-3);
-    }
-
-    :global(.compound-tag.s) .child {
-        --p-compound-tag-child-padding-block: var(--space-1);
-        --p-compound-tag-child-padding-inline: var(--space-3);
+        /* size variants */
+        &.s {
+            --p-compound-tag-child-padding-block: var(--space-2);
+            --p-compound-tag-child-padding-inline: var(--space-3);
+        }
     }
 </style>
diff --git a/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte b/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
index 9d234ba088..7c780c4868 100644
--- a/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
+++ b/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     type $$Props = {
-        size?: 'xs' | 's' | 'm';
+        size?: 's' | 'm';
     };
 
     import { setContext } from 'svelte';
@@ -13,16 +13,11 @@
     }
 
     setContext('compound-tag-dismiss', handleDismiss);
+    setContext('compound-tag-size', size);
 </script>
 
 {#if visible}
-    <div
-        class="compound-tag"
-        class:xs={size === 'xs'}
-        class:s={size === 's'}
-        class:m={size === 'm'}
-        role="group"
-    >
+    <div class="compound-tag" class:s={size === 's'} role="group">
         <slot />
     </div>
 {/if}
@@ -36,7 +31,7 @@
         --p-compound-tag-font-family:
             var(--badge-font-family, var(--font-family-sansserif)), var(--sans-fallbacks);
         --p-compound-tag-font-size: var(--badge-font-size, var(--font-size-s));
-        --p-compound-tag-padding-block: var(--badge-padding-block, var(--space-3));
+        --p-compound-tag-padding-block: var(--badge-padding-block, var(--space-5));
         --p-compound-tag-padding-inline: var(--badge-padding-inline, var(--space-5));
         --p-compound-tag-gap: var(--badge-gap, var(--space-3));
         --p-compound-tag-color: var(--tag-color, var(--fgcolor-neutral-secondary));
@@ -54,14 +49,8 @@
         border-radius: var(--border-radius-XS, 6px);
         overflow: hidden;
 
-        &.xs {
-            --p-compound-tag-font-size: var(--font-size-xs);
-            --p-compound-tag-padding-block: var(--space-1);
-            --p-compound-tag-padding-inline: var(--space-3);
-        }
-
         &.s {
-            --p-compound-tag-padding-block: var(--space-1);
+            --p-compound-tag-padding-block: var(--space-2);
             --p-compound-tag-padding-inline: var(--space-3);
         }
     }
diff --git a/v2/pink-sb/src/stories/CompoundTag.stories.svelte b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
index 65cb43059b..62fcd7c66b 100644
--- a/v2/pink-sb/src/stories/CompoundTag.stories.svelte
+++ b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
@@ -82,19 +82,27 @@
     </CompoundTagRoot>
 </Story>
 
-<Story name="Small Size">
-    <CompoundTagRoot size="s">
-        <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
-        <CompoundTagChild on:click={() => console.log('Clicked is')}>is</CompoundTagChild>
-        <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
-    </CompoundTagRoot>
-</Story>
-
-<Story name="X-Small Size">
-    <CompoundTagRoot size="xs">
-        <CompoundTagChild on:click={() => console.log('Clicked Filter')}>Filter</CompoundTagChild>
-        <CompoundTagChild on:click={() => console.log('Clicked Active')}>Active</CompoundTagChild>
-    </CompoundTagRoot>
+<Story name="Sizes">
+    <div
+        style="display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start;"
+    >
+        <CompoundTagRoot size="s">
+            <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
+            <CompoundTagChild on:click={() => console.log('Clicked is')}>is</CompoundTagChild>
+            <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
+            <CompoundTagChild dismiss on:click={() => console.log('Clicked close')}
+                ><Icon icon={IconX} size="s" /></CompoundTagChild
+            >
+        </CompoundTagRoot>
+        <CompoundTagRoot size="m">
+            <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
+            <CompoundTagChild on:click={() => console.log('Clicked is')}>is</CompoundTagChild>
+            <CompoundTagChild on:click={() => console.log('Clicked Tag')}>Tag</CompoundTagChild>
+            <CompoundTagChild dismiss on:click={() => console.log('Clicked close')}
+                ><Icon icon={IconX} size="s" /></CompoundTagChild
+            >
+        </CompoundTagRoot>
+    </div>
 </Story>
 
 <Story name="With Disabled Child" let:args>