fixes and design changes

Author: HarshMN2345

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>

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);
         }
     }

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>