@pequity/squirrel 7.1.2 → 7.1.3

package/dist/cjs/chunks/p-dropdown-select.js

@@ -12,16 +12,28 @@ const lodashEs = require("lodash-es");
 const _imports_0 = "data:image/svg+xml,%3csvg%20width='18'%20height='12'%20viewBox='0%200%2018%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.1383%200.166992L6.30411%209.83366L1.69828%205.27533L0.526611%206.46033L5.71578%2011.597C5.87174%2011.7509%206.08205%2011.8372%206.3012%2011.8372C6.52034%2011.8372%206.73065%2011.7509%206.88661%2011.597L17.3033%201.35366L16.1383%200.166992Z'%20fill='%231A123B'%20/%3e%3c/svg%3e";
 const _hoisted_1 = ["data-has-error"];
 const _hoisted_2 = { class: "truncate text-left text-p-gray-40" };
-const _hoisted_3 = { class: "truncate text-left" };
+const _hoisted_3 = {
+  key: 0,
+  class: "flex flex-wrap gap-1.5 pr-8"
+};
 const _hoisted_4 = {
+  class: "max-w-[200px] truncate",
+  "data-test": "pill-text"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+  key: 1,
+  class: "truncate text-left"
+};
+const _hoisted_7 = {
   key: 0,
   class: "mt-3 px-3"
 };
-const _hoisted_5 = { class: "text-p-purple-60" };
-const _hoisted_6 = { class: "flex flex-row" };
-const _hoisted_7 = ["onClick"];
-const _hoisted_8 = ["title"];
-const _hoisted_9 = {
+const _hoisted_8 = { class: "text-p-purple-60" };
+const _hoisted_9 = { class: "flex flex-row" };
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = ["title"];
+const _hoisted_12 = {
   key: 0,
   class: "ml-auto fill-p-purple-60 pl-2",
   src: _imports_0
@@ -167,6 +179,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     creatable: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Shows selected items as pills in the button when multiple selection is enabled
+     */
+    pills: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:modelValue", "select", "create"],
@@ -184,9 +203,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       enableArrowNavigation: false
     };
     const CLEAR_BUTTON_SPACING = {
-      sm: "right-8",
-      md: "right-9",
-      lg: "right-10"
+      sm: "right-8 text-sm top-[0.3rem]",
+      md: "right-9 text-base top-[0.5rem]",
+      lg: "right-10 text-lg top-[0.7rem]"
+    };
+    const PILL_SIZE = {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    };
+    const PILL_SELECT_SPACING = {
+      sm: "min-h-[2rem] py-1 bg-[position:right_1rem_top_0.7rem]",
+      md: "min-h-[2.5rem] py-2 bg-[position:right_1rem_top_0.9rem]",
+      lg: "min-h-[3rem] py-2 bg-[position:right_1rem_top_1.1rem]"
     };
     const width = vue.ref("auto");
     const listItemStyle = vue.ref({ paddingTop: 0, paddingBottom: 0 });
@@ -304,15 +333,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               "p-select-list": "",
               role: "listbox"
             }), [
-              __props.multiple || __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+              __props.multiple || __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
                 __props.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 0,
                   ref_key: "actionsContainer",
                   ref: actionsContainer,
                   class: "flex flex-row justify-between text-xs font-semibold text-primary"
                 }, [
-                  vue.createElementVNode("p", _hoisted_5, vue.toDisplayString(vue.unref(computedItems).length) + " items", 1),
-                  vue.createElementVNode("div", _hoisted_6, [
+                  vue.createElementVNode("p", _hoisted_8, vue.toDisplayString(vue.unref(computedItems).length) + " items", 1),
+                  vue.createElementVNode("div", _hoisted_9, [
                     vue.unref(computedItems).length === vue.unref(internalItems).length ? (vue.openBlock(), vue.createElementBlock("a", {
                       key: 0,
                       class: vue.normalizeClass([
@@ -399,11 +428,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   class: vue.normalizeClass({ "bg-p-blue-20": index === 1 })
                                 }, vue.toDisplayString(str), 3);
                               }), 128))
-                            ], 8, _hoisted_8)
+                            ], 8, _hoisted_11)
                           ]),
-                          vue.unref(isSelected)(vue.unref(getValue)(row.index)) ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_9)) : vue.createCommentVNode("", true)
+                          vue.unref(isSelected)(vue.unref(getValue)(row.index)) ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_12)) : vue.createCommentVNode("", true)
                         ], 2)
-                      ], 14, _hoisted_7)), [
+                      ], 14, _hoisted_10)), [
                         [_directive_close_popper, !__props.multiple]
                       ])
                     ], 4);
@@ -434,7 +463,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("button", vue.mergeProps(attrs.value, {
               ref: "button",
               type: "button",
-              class: ["w-full", vue.unref(selectClasses), dropdownShow.value ? "border-primary" : ""],
+              class: [
+                "w-full",
+                vue.unref(selectClasses),
+                dropdownShow.value ? "border-primary" : "",
+                { "box-border h-auto items-start": __props.multiple && __props.pills && vue.unref(selectedItems).length > 0 },
+                PILL_SELECT_SPACING[__props.size]
+              ],
               role: "button",
               "aria-haspopup": "listbox",
               onClick: _cache[1] || (_cache[1] = ($event) => dropdownShow.value = !dropdownShow.value)
@@ -445,11 +480,33 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 key: 1,
                 item: __props.multiple ? vue.unref(selectedItems) : vue.unref(selectedItems)[0]
               }, () => [
-                vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(__props.multiple ? vue.unref(selectedItems).length === selectableItemsCount.value ? "All options selected" : `${vue.unref(selectedItems).length} option${vue.unref(selectedItems).length > 1 ? "s" : ""} selected` : vue.unref(selectedItems)[0][__props.itemText]), 1)
+                __props.multiple && __props.pills ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(selectedItems), (item) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: String(item[__props.itemValue]),
+                      class: vue.normalizeClass(["flex items-center gap-1 rounded bg-p-gray-10 px-2 text-p-gray-50", [PILL_SIZE[__props.size]]]),
+                      "data-test": "selected-pill"
+                    }, [
+                      vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(item[__props.itemText]), 1),
+                      vue.createElementVNode("button", {
+                        type: "button",
+                        class: "flex items-center justify-center text-p-gray-40 hover:text-p-gray-60",
+                        "aria-label": "Remove item",
+                        "data-test": "pill-remove",
+                        onClick: vue.withModifiers(($event) => vue.unref(select)($event, item[__props.itemValue]), ["stop"])
+                      }, [
+                        vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+                          icon: "fe:close",
+                          class: "h-3.5 w-3.5"
+                        })
+                      ], 8, _hoisted_5)
+                    ], 2);
+                  }), 128))
+                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, vue.toDisplayString(__props.multiple ? vue.unref(selectedItems).length === selectableItemsCount.value ? "All options selected" : `${vue.unref(selectedItems).length} option${vue.unref(selectedItems).length > 1 ? "s" : ""} selected` : vue.unref(selectedItems)[0][__props.itemText]), 1))
               ]),
               __props.clearable && vue.unref(selectedItems).length ? (vue.openBlock(), vue.createElementBlock("button", {
                 key: 2,
-                class: vue.normalizeClass(["absolute top-1/2 flex -translate-y-1/2 items-center justify-center text-p-gray-40 hover:text-p-gray-60", [vue.unref(pSelectList.SIZES)[__props.size], CLEAR_BUTTON_SPACING[__props.size]]]),
+                class: vue.normalizeClass(["absolute right-9 flex h-6 items-center justify-center text-base text-p-gray-40 hover:text-p-gray-60", [CLEAR_BUTTON_SPACING[__props.size]]]),
                 "aria-label": "Clear selection",
                 onClick: _cache[0] || (_cache[0] = vue.withModifiers(
                   //@ts-ignore

package/dist/es/chunks/p-dropdown-select.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createCommentVNode, createVNode, withDirectives, toDisplayString, mergeProps, withCtx, createElementVNode, renderSlot, withModifiers, isRef, Fragment, renderList, createTextVNode, vShow } from "vue";
+import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createCommentVNode, createVNode, withDirectives, toDisplayString, mergeProps, withCtx, createElementVNode, renderSlot, Fragment, renderList, withModifiers, isRef, createTextVNode, vShow } from "vue";
 import PDropdown from "../p-dropdown.js";
 import { _ as _sfc_main$1 } from "./p-icon.js";
 import PInputSearch from "../p-input-search.js";
@@ -11,16 +11,28 @@ import { omit } from "lodash-es";
 const _imports_0 = "data:image/svg+xml,%3csvg%20width='18'%20height='12'%20viewBox='0%200%2018%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.1383%200.166992L6.30411%209.83366L1.69828%205.27533L0.526611%206.46033L5.71578%2011.597C5.87174%2011.7509%206.08205%2011.8372%206.3012%2011.8372C6.52034%2011.8372%206.73065%2011.7509%206.88661%2011.597L17.3033%201.35366L16.1383%200.166992Z'%20fill='%231A123B'%20/%3e%3c/svg%3e";
 const _hoisted_1 = ["data-has-error"];
 const _hoisted_2 = { class: "truncate text-left text-p-gray-40" };
-const _hoisted_3 = { class: "truncate text-left" };
+const _hoisted_3 = {
+  key: 0,
+  class: "flex flex-wrap gap-1.5 pr-8"
+};
 const _hoisted_4 = {
+  class: "max-w-[200px] truncate",
+  "data-test": "pill-text"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+  key: 1,
+  class: "truncate text-left"
+};
+const _hoisted_7 = {
   key: 0,
   class: "mt-3 px-3"
 };
-const _hoisted_5 = { class: "text-p-purple-60" };
-const _hoisted_6 = { class: "flex flex-row" };
-const _hoisted_7 = ["onClick"];
-const _hoisted_8 = ["title"];
-const _hoisted_9 = {
+const _hoisted_8 = { class: "text-p-purple-60" };
+const _hoisted_9 = { class: "flex flex-row" };
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = ["title"];
+const _hoisted_12 = {
   key: 0,
   class: "ml-auto fill-p-purple-60 pl-2",
   src: _imports_0
@@ -166,6 +178,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     creatable: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Shows selected items as pills in the button when multiple selection is enabled
+     */
+    pills: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:modelValue", "select", "create"],
@@ -183,9 +202,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       enableArrowNavigation: false
     };
     const CLEAR_BUTTON_SPACING = {
-      sm: "right-8",
-      md: "right-9",
-      lg: "right-10"
+      sm: "right-8 text-sm top-[0.3rem]",
+      md: "right-9 text-base top-[0.5rem]",
+      lg: "right-10 text-lg top-[0.7rem]"
+    };
+    const PILL_SIZE = {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    };
+    const PILL_SELECT_SPACING = {
+      sm: "min-h-[2rem] py-1 bg-[position:right_1rem_top_0.7rem]",
+      md: "min-h-[2.5rem] py-2 bg-[position:right_1rem_top_0.9rem]",
+      lg: "min-h-[3rem] py-2 bg-[position:right_1rem_top_1.1rem]"
     };
     const width = ref("auto");
     const listItemStyle = ref({ paddingTop: 0, paddingBottom: 0 });
@@ -303,15 +332,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "p-select-list": "",
               role: "listbox"
             }), [
-              __props.multiple || __props.searchable ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              __props.multiple || __props.searchable ? (openBlock(), createElementBlock("div", _hoisted_7, [
                 __props.multiple ? (openBlock(), createElementBlock("div", {
                   key: 0,
                   ref_key: "actionsContainer",
                   ref: actionsContainer,
                   class: "flex flex-row justify-between text-xs font-semibold text-primary"
                 }, [
-                  createElementVNode("p", _hoisted_5, toDisplayString(unref(computedItems).length) + " items", 1),
-                  createElementVNode("div", _hoisted_6, [
+                  createElementVNode("p", _hoisted_8, toDisplayString(unref(computedItems).length) + " items", 1),
+                  createElementVNode("div", _hoisted_9, [
                     unref(computedItems).length === unref(internalItems).length ? (openBlock(), createElementBlock("a", {
                       key: 0,
                       class: normalizeClass([
@@ -398,11 +427,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   class: normalizeClass({ "bg-p-blue-20": index === 1 })
                                 }, toDisplayString(str), 3);
                               }), 128))
-                            ], 8, _hoisted_8)
+                            ], 8, _hoisted_11)
                           ]),
-                          unref(isSelected)(unref(getValue)(row.index)) ? (openBlock(), createElementBlock("img", _hoisted_9)) : createCommentVNode("", true)
+                          unref(isSelected)(unref(getValue)(row.index)) ? (openBlock(), createElementBlock("img", _hoisted_12)) : createCommentVNode("", true)
                         ], 2)
-                      ], 14, _hoisted_7)), [
+                      ], 14, _hoisted_10)), [
                         [_directive_close_popper, !__props.multiple]
                       ])
                     ], 4);
@@ -433,7 +462,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("button", mergeProps(attrs.value, {
               ref: "button",
               type: "button",
-              class: ["w-full", unref(selectClasses), dropdownShow.value ? "border-primary" : ""],
+              class: [
+                "w-full",
+                unref(selectClasses),
+                dropdownShow.value ? "border-primary" : "",
+                { "box-border h-auto items-start": __props.multiple && __props.pills && unref(selectedItems).length > 0 },
+                PILL_SELECT_SPACING[__props.size]
+              ],
               role: "button",
               "aria-haspopup": "listbox",
               onClick: _cache[1] || (_cache[1] = ($event) => dropdownShow.value = !dropdownShow.value)
@@ -444,11 +479,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 key: 1,
                 item: __props.multiple ? unref(selectedItems) : unref(selectedItems)[0]
               }, () => [
-                createElementVNode("div", _hoisted_3, toDisplayString(__props.multiple ? unref(selectedItems).length === selectableItemsCount.value ? "All options selected" : `${unref(selectedItems).length} option${unref(selectedItems).length > 1 ? "s" : ""} selected` : unref(selectedItems)[0][__props.itemText]), 1)
+                __props.multiple && __props.pills ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(selectedItems), (item) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: String(item[__props.itemValue]),
+                      class: normalizeClass(["flex items-center gap-1 rounded bg-p-gray-10 px-2 text-p-gray-50", [PILL_SIZE[__props.size]]]),
+                      "data-test": "selected-pill"
+                    }, [
+                      createElementVNode("span", _hoisted_4, toDisplayString(item[__props.itemText]), 1),
+                      createElementVNode("button", {
+                        type: "button",
+                        class: "flex items-center justify-center text-p-gray-40 hover:text-p-gray-60",
+                        "aria-label": "Remove item",
+                        "data-test": "pill-remove",
+                        onClick: withModifiers(($event) => unref(select)($event, item[__props.itemValue]), ["stop"])
+                      }, [
+                        createVNode(_sfc_main$1, {
+                          icon: "fe:close",
+                          class: "h-3.5 w-3.5"
+                        })
+                      ], 8, _hoisted_5)
+                    ], 2);
+                  }), 128))
+                ])) : (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(__props.multiple ? unref(selectedItems).length === selectableItemsCount.value ? "All options selected" : `${unref(selectedItems).length} option${unref(selectedItems).length > 1 ? "s" : ""} selected` : unref(selectedItems)[0][__props.itemText]), 1))
               ]),
               __props.clearable && unref(selectedItems).length ? (openBlock(), createElementBlock("button", {
                 key: 2,
-                class: normalizeClass(["absolute top-1/2 flex -translate-y-1/2 items-center justify-center text-p-gray-40 hover:text-p-gray-60", [unref(SIZES)[__props.size], CLEAR_BUTTON_SPACING[__props.size]]]),
+                class: normalizeClass(["absolute right-9 flex h-6 items-center justify-center text-base text-p-gray-40 hover:text-p-gray-60", [CLEAR_BUTTON_SPACING[__props.size]]]),
                 "aria-label": "Clear selection",
                 onClick: _cache[0] || (_cache[0] = withModifiers(
                   //@ts-ignore

package/dist/squirrel/components/p-dropdown-select/p-dropdown-select.vue.d.ts

@@ -148,6 +148,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Shows selected items as pills in the button when multiple selection is enabled
+     */
+    pills: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
@@ -286,6 +293,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Shows selected items as pills in the button when multiple selection is enabled
+     */
+    pills: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -314,6 +328,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     selectedTopShown: boolean;
     disabledBy: string;
     creatable: boolean;
+    pills: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "packageManager": "pnpm@9.15.9",
   "type": "module",
   "scripts": {

package/squirrel/components/p-dropdown-select/p-dropdown-select.spec.js

@@ -857,4 +857,111 @@ describe('PDropdownSelect.vue', () => {
       cleanup(wrapper);
     });
   });
+
+  describe('pills functionality', () => {
+    it('renders selected items as pills when pills prop is true and multiple is true', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: true });
+
+      const button = wrapper.find('button');
+      const pillsContainer = button.find('div.flex.flex-wrap.gap-1\\.5');
+      expect(pillsContainer.exists()).toBe(true);
+
+      const pills = wrapper.findAll('[data-test="selected-pill"]');
+      expect(pills.length).toBe(2);
+      expect(pills[0].find('[data-test="pill-text"]').text()).toBe('d39ad899-709e-4ed1-b48f-3ef160a617b1');
+      expect(pills[1].find('[data-test="pill-text"]').text()).toBe('42e1aeff-2147-485d-9265-fd79abc897b5');
+
+      cleanup(wrapper);
+    });
+
+    it('does not render pills when pills prop is false', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: false });
+
+      const button = wrapper.find('button');
+      const pills = wrapper.findAll('[data-test="selected-pill"]');
+      expect(pills.length).toBe(0);
+      expect(button.text()).toBe('2 options selected');
+
+      cleanup(wrapper);
+    });
+
+    it('does not render pills when multiple is false, regardless of pills prop', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: 4 }, { multiple: false, pills: true });
+
+      const button = wrapper.find('button');
+      const pills = wrapper.findAll('[data-test="selected-pill"]');
+      expect(pills.length).toBe(0);
+      expect(button.text()).toBe('d39ad899-709e-4ed1-b48f-3ef160a617b1');
+
+      cleanup(wrapper);
+    });
+
+    it('allows removing individual items by clicking the pill close button', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: true });
+
+      const pills = wrapper.findAll('[data-test="selected-pill"]');
+      const closeButton = pills[0].find('[data-test="pill-remove"]');
+      await closeButton.trigger('click');
+
+      expect(wrapper.vm.$data.selected).toEqual([5]);
+      expect(wrapper.findAll('[data-test="selected-pill"]').length).toBe(1);
+
+      cleanup(wrapper);
+    });
+
+    it('shows pills with correct layout', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: true });
+
+      const button = wrapper.find('button');
+      expect(button.classes()).toContain('h-auto');
+      expect(button.classes()).toContain('min-h-[2.5rem]');
+      expect(button.classes()).toContain('items-start');
+      expect(button.classes()).toContain('py-2');
+
+      const pillsContainer = wrapper.find('div.flex.flex-wrap.gap-1\\.5');
+      expect(pillsContainer.exists()).toBe(true);
+
+      cleanup(wrapper);
+    });
+
+    it('truncates long text in pills', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: true });
+
+      const pillText = wrapper.find('[data-test="pill-text"]');
+      expect(pillText.classes()).toContain('max-w-[200px]');
+      expect(pillText.classes()).toContain('truncate');
+
+      cleanup(wrapper);
+    });
+
+    it('maintains pills after dropdown interaction', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: true });
+
+      const button = wrapper.find('button');
+      await button.trigger('click');
+
+      const item = wrapper.findAll('[p-select-list-option-item]')[6];
+      await item.trigger('click');
+
+      const pills = wrapper.findAll('[data-test="selected-pill"]');
+      expect(pills.length).toBe(3);
+      expect(wrapper.vm.$data.selected).toEqual([4, 5, 7]);
+
+      cleanup(wrapper);
+    });
+  });
 });

package/squirrel/components/p-dropdown-select/p-dropdown-select.stories.js

@@ -280,6 +280,27 @@ export const MultipleSearchable = {
   },
 };
 
+export const MultipleWithPills = {
+  render: createRenderFunction({ selectedVal: [33, 34, 36] }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple selection with selected items displayed as pills in the button',
+      },
+    },
+  },
+  args: {
+    ...Default.args,
+    label: 'Multiple with pills',
+    items: items4,
+    multiple: true,
+    searchable: true,
+    pills: true,
+    placeholder: 'Select an item from the list',
+    placeholderSearch: 'Search an item...',
+  },
+};
+
 export const SelectedOnTop = {
   render: createRenderFunction({ selectedVal: [33, 34, 36] }),
   args: {

package/squirrel/components/p-dropdown-select/p-dropdown-select.vue

@@ -19,7 +19,13 @@
         v-bind="attrs"
         ref="button"
         type="button"
-        :class="['w-full', selectClasses, dropdownShow ? 'border-primary' : '']"
+        :class="[
+          'w-full',
+          selectClasses,
+          dropdownShow ? 'border-primary' : '',
+          { 'box-border h-auto items-start': multiple && pills && selectedItems.length > 0 },
+          PILL_SELECT_SPACING[size],
+        ]"
         role="button"
         aria-haspopup="listbox"
         @click="dropdownShow = !dropdownShow"
@@ -30,7 +36,27 @@
           </div>
         </slot>
         <slot v-else name="selected-item" :item="multiple ? selectedItems : selectedItems[0]">
-          <div class="truncate text-left">
+          <div v-if="multiple && pills" class="flex flex-wrap gap-1.5 pr-8">
+            <div
+              v-for="item in selectedItems"
+              :key="String(item[itemValue])"
+              class="flex items-center gap-1 rounded bg-p-gray-10 px-2 text-p-gray-50"
+              :class="[PILL_SIZE[size]]"
+              data-test="selected-pill"
+            >
+              <span class="max-w-[200px] truncate" data-test="pill-text">{{ item[itemText] }}</span>
+              <button
+                type="button"
+                class="flex items-center justify-center text-p-gray-40 hover:text-p-gray-60"
+                aria-label="Remove item"
+                data-test="pill-remove"
+                @click.stop="select($event, item[itemValue])"
+              >
+                <PIcon icon="fe:close" class="h-3.5 w-3.5" />
+              </button>
+            </div>
+          </div>
+          <div v-else class="truncate text-left">
             {{
               multiple
                 ? selectedItems.length === selectableItemsCount
@@ -43,8 +69,8 @@
         <!-- Clear selection button -->
         <button
           v-if="clearable && selectedItems.length"
-          class="absolute top-1/2 flex -translate-y-1/2 items-center justify-center text-p-gray-40 hover:text-p-gray-60"
-          :class="[SIZES[size], CLEAR_BUTTON_SPACING[size]]"
+          class="absolute right-9 flex h-6 items-center justify-center text-base text-p-gray-40 hover:text-p-gray-60"
+          :class="[CLEAR_BUTTON_SPACING[size]]"
           aria-label="Clear selection"
           @click.stop="clearAll"
         >
@@ -349,6 +375,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * Shows selected items as pills in the button when multiple selection is enabled
+   */
+  pills: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 // Async helpers
@@ -366,9 +399,21 @@ const P_DROPDOWN_DEFAULTS = {
 };
 
 const CLEAR_BUTTON_SPACING = {
-  sm: 'right-8',
-  md: 'right-9',
-  lg: 'right-10',
+  sm: 'right-8 text-sm top-[0.3rem]',
+  md: 'right-9 text-base top-[0.5rem]',
+  lg: 'right-10 text-lg top-[0.7rem]',
+};
+
+const PILL_SIZE = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+};
+
+const PILL_SELECT_SPACING = {
+  sm: 'min-h-[2rem] py-1 bg-[position:right_1rem_top_0.7rem]',
+  md: 'min-h-[2.5rem] py-2 bg-[position:right_1rem_top_0.9rem]',
+  lg: 'min-h-[3rem] py-2 bg-[position:right_1rem_top_1.1rem]',
 };
 
 const width = ref('auto');