@pequity/squirrel 8.3.5 → 8.4.1

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

@@ -260,9 +260,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return rest;
     });
     const style = vue.computed(() => $attrs.style);
-    const selectableItemsCount = vue.computed(
-      () => internalItems.value.filter((item) => !isDisabled(item) || isSelected(item[props.itemValue])).length
-    );
     vue.watch(
       dropdownShow,
       (nV) => {
@@ -502,7 +499,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       ], 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))
+                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, vue.toDisplayString(__props.multiple ? vue.unref(selectedItems).length === vue.unref(computedItems).length ? "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,

package/dist/cjs/chunks/p-tabs-pills.js

@@ -0,0 +1,44 @@
+"use strict";
+const vue = require("vue");
+const _hoisted_1 = {
+  class: "flex h-6 w-fit flex-row space-x-1 overflow-x-auto rounded bg-p-gray-10 p-1 text-sm font-medium text-p-gray-50",
+  "aria-label": "Tabs Pills",
+  role: "tablist",
+  "aria-orientation": "horizontal"
+};
+const _hoisted_2 = ["disabled", "aria-selected", "data-tab", "aria-controls", "onClick"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PTabsPills"
+  },
+  __name: "p-tabs-pills",
+  props: {
+    modelValue: { type: [String, Number, Boolean], default: "" },
+    items: { default: () => [] },
+    itemText: { default: "text" },
+    itemValue: { default: "value" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (tab) => {
+          return vue.openBlock(), vue.createElementBlock("button", {
+            key: String(tab[_ctx.itemValue]),
+            type: "button",
+            class: vue.normalizeClass(["rounded px-2 pb-px leading-none transition-all duration-300", [
+              tab.disabled ? "text-p-gray-30" : tab[_ctx.itemValue] === _ctx.modelValue ? "bg-night text-surface hover:bg-night hover:text-surface" : "hover:text-p-gray-70"
+            ]]),
+            disabled: !!tab.disabled,
+            role: "tab",
+            "aria-selected": tab[_ctx.itemValue] === _ctx.modelValue,
+            "data-tab": `#${tab[_ctx.itemValue]}`,
+            "aria-controls": String(tab[_ctx.itemValue]),
+            onClick: ($event) => _ctx.$emit("update:modelValue", tab[_ctx.itemValue])
+          }, vue.toDisplayString(tab[_ctx.itemText]), 11, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;

package/dist/cjs/index.js

@@ -52,6 +52,7 @@ const pTableFilterIcon = require("./p-table-filter-icon.js");
 const pTableLoader_vue_vue_type_script_setup_true_lang = require("./chunks/p-table-loader.js");
 const pTableSort = require("./p-table-sort.js");
 const pTabs_vue_vue_type_script_setup_true_lang = require("./chunks/p-tabs.js");
+const pTabsPills_vue_vue_type_script_setup_true_lang = require("./chunks/p-tabs-pills.js");
 const pTextarea_vue_vue_type_script_setup_true_lang = require("./chunks/p-textarea.js");
 const pToggle = require("./p-toggle.js");
 const config = require("./config.js");
@@ -1086,6 +1087,7 @@ exports.PFilterIcon = pTableFilterIcon;
 exports.PTableLoader = pTableLoader_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.SORTING_TYPES = pTableSort.SORTING_TYPES;
 exports.PTabs = pTabs_vue_vue_type_script_setup_true_lang._sfc_main;
+exports.PTabsPills = pTabsPills_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PTextarea = pTextarea_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PToggle = pToggle;
 exports.squirrelTailwindConfig = config.squirrelTailwindConfig;

package/dist/cjs/p-tabs-pills.js

@@ -0,0 +1,3 @@
+"use strict";
+const pTabsPills_vue_vue_type_script_setup_true_lang = require("./chunks/p-tabs-pills.js");
+module.exports = pTabsPills_vue_vue_type_script_setup_true_lang._sfc_main;

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

@@ -259,9 +259,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return rest;
     });
     const style = computed(() => $attrs.style);
-    const selectableItemsCount = computed(
-      () => internalItems.value.filter((item) => !isDisabled(item) || isSelected(item[props.itemValue])).length
-    );
     watch(
       dropdownShow,
       (nV) => {
@@ -501,7 +498,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ], 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))
+                ])) : (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(__props.multiple ? unref(selectedItems).length === unref(computedItems).length ? "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,

package/dist/es/chunks/p-tabs-pills.js

@@ -0,0 +1,45 @@
+import { defineComponent, createElementBlock, openBlock, Fragment, renderList, normalizeClass, toDisplayString } from "vue";
+const _hoisted_1 = {
+  class: "flex h-6 w-fit flex-row space-x-1 overflow-x-auto rounded bg-p-gray-10 p-1 text-sm font-medium text-p-gray-50",
+  "aria-label": "Tabs Pills",
+  role: "tablist",
+  "aria-orientation": "horizontal"
+};
+const _hoisted_2 = ["disabled", "aria-selected", "data-tab", "aria-controls", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PTabsPills"
+  },
+  __name: "p-tabs-pills",
+  props: {
+    modelValue: { type: [String, Number, Boolean], default: "" },
+    items: { default: () => [] },
+    itemText: { default: "text" },
+    itemValue: { default: "value" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (tab) => {
+          return openBlock(), createElementBlock("button", {
+            key: String(tab[_ctx.itemValue]),
+            type: "button",
+            class: normalizeClass(["rounded px-2 pb-px leading-none transition-all duration-300", [
+              tab.disabled ? "text-p-gray-30" : tab[_ctx.itemValue] === _ctx.modelValue ? "bg-night text-surface hover:bg-night hover:text-surface" : "hover:text-p-gray-70"
+            ]]),
+            disabled: !!tab.disabled,
+            role: "tab",
+            "aria-selected": tab[_ctx.itemValue] === _ctx.modelValue,
+            "data-tab": `#${tab[_ctx.itemValue]}`,
+            "aria-controls": String(tab[_ctx.itemValue]),
+            onClick: ($event) => _ctx.$emit("update:modelValue", tab[_ctx.itemValue])
+          }, toDisplayString(tab[_ctx.itemText]), 11, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/index.js

@@ -52,7 +52,8 @@ import { default as default11 } from "./p-table-filter-icon.js";
 import { _ as _20 } from "./chunks/p-table-loader.js";
 import { SORTING_TYPES } from "./p-table-sort.js";
 import { _ as _21 } from "./chunks/p-tabs.js";
-import { _ as _22 } from "./chunks/p-textarea.js";
+import { _ as _22 } from "./chunks/p-tabs-pills.js";
+import { _ as _23 } from "./chunks/p-textarea.js";
 import { default as default12 } from "./p-toggle.js";
 import { squirrelTailwindConfig } from "./config.js";
 import { S } from "./chunks/p-btn.types.js";
@@ -1079,7 +1080,8 @@ export {
   _sfc_main as PTableSort,
   PTableTd,
   _21 as PTabs,
-  _22 as PTextarea,
+  _22 as PTabsPills,
+  _23 as PTextarea,
   default12 as PToggle,
   P_ICON_ALIASES,
   S as SIZES,

package/dist/es/p-tabs-pills.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "./chunks/p-tabs-pills.js";
+export {
+  _sfc_main as default
+};

package/dist/squirrel/components/index.d.ts

@@ -50,6 +50,7 @@ import { SORTING_TYPES, type SortingType, type SortingTypeWithoutNoSorting } fro
 import PTableSort from './p-table-sort/p-table-sort.vue';
 import PTableTd from './p-table-td/p-table-td.vue';
 import PTabs from './p-tabs/p-tabs.vue';
+import PTabsPills from './p-tabs-pills/p-tabs-pills.vue';
 import PTextarea from './p-textarea/p-textarea.vue';
 import PToggle from './p-toggle/p-toggle.vue';
-export { colsInjectionKey, FileUploadFile, HeaderCellAttrs, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, MIN_WIDTH_COL_RESIZE, P_ICON_ALIASES, PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PIcon, PIconAlias, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PSteps, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTextarea, PToggle, Size, SORTING_TYPES, SortingType, SortingTypeWithoutNoSorting, StepItem, TableCol, ThAttrs, usePLoading, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, };
+export { colsInjectionKey, FileUploadFile, HeaderCellAttrs, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, MIN_WIDTH_COL_RESIZE, P_ICON_ALIASES, PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PIcon, PIconAlias, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PSteps, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTabsPills, PTextarea, PToggle, Size, SORTING_TYPES, SortingType, SortingTypeWithoutNoSorting, StepItem, TableCol, ThAttrs, usePLoading, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, };

package/dist/squirrel/components/p-tabs-pills/p-tabs-pills.vue.d.ts

@@ -0,0 +1,21 @@
+type Value = string | number | boolean;
+type Option = {
+    [key: string]: Value;
+};
+type Props = {
+    modelValue?: Value;
+    items?: readonly Option[];
+    itemText?: string;
+    itemValue?: string;
+};
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: Value) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((val: Value) => any) | undefined;
+}>, {
+    modelValue: Value;
+    items: readonly Option[];
+    itemText: string;
+    itemValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.3.5",
+  "version": "8.4.1",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {
@@ -49,56 +49,50 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@pequity/eslint-config": "^2.0.1",
-    "@playwright/test": "^1.52.0",
+    "@pequity/eslint-config": "^2.0.2",
+    "@playwright/test": "^1.53.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/test-runner": "^0.22.0",
-    "@storybook/theming": "^8.6.14",
-    "@storybook/vue3": "^8.6.14",
-    "@storybook/vue3-vite": "^8.6.14",
-    "@tanstack/vue-virtual": "3.13.9",
+    "@storybook/addon-a11y": "^9.0.14",
+    "@storybook/addon-docs": "^9.0.14",
+    "@storybook/addon-links": "^9.0.14",
+    "@storybook/test-runner": "^0.23.0",
+    "@storybook/vue3": "^9.0.14",
+    "@storybook/vue3-vite": "^9.0.14",
+    "@tanstack/vue-virtual": "3.13.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.15.21",
+    "@types/node": "^24.0.7",
     "@vitejs/plugin-vue": "^5.2.4",
-    "@vitest/coverage-v8": "^3.1.4",
-    "@vue/compiler-sfc": "3.5.15",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vue/compiler-sfc": "3.5.17",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.27.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint": "^9.30.0",
+    "eslint-plugin-storybook": "^9.0.14",
     "floating-vue": "5.2.2",
-    "glob": "^11.0.2",
+    "glob": "^11.0.3",
     "husky": "^9.1.7",
     "iconify-icon": "^3.0.0",
     "jsdom": "^26.1.0",
-    "lint-staged": "^16.0.0",
+    "lint-staged": "^16.1.2",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.5.3",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.13",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.89.0",
-    "semantic-release": "^24.2.5",
-    "storybook": "^8.6.14",
-    "svgo": "^3.3.2",
+    "sass": "^1.89.2",
+    "semantic-release": "^24.2.6",
+    "storybook": "^9.0.14",
+    "svgo": "^4.0.0",
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.3",
     "vite": "^6.3.5",
-    "vitest": "^3.1.4",
-    "vue": "3.5.15",
+    "vitest": "^3.2.4",
+    "vue": "3.5.17",
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.1",
     "vue-toastification": "2.0.0-rc.5",

package/squirrel/components/index.ts

@@ -63,6 +63,7 @@ import {
 import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
 import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
 import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
+import PTabsPills from '@squirrel/components/p-tabs-pills/p-tabs-pills.vue';
 import PTextarea from '@squirrel/components/p-textarea/p-textarea.vue';
 import PToggle from '@squirrel/components/p-toggle/p-toggle.vue';
 
@@ -117,6 +118,7 @@ export {
   PTableSort,
   PTableTd,
   PTabs,
+  PTabsPills,
   PTextarea,
   PToggle,
   Size,

package/squirrel/components/p-action-bar/p-action-bar.stories.js

@@ -2,8 +2,8 @@ import PaginateLeftIcon from '@squirrel/assets/pagination-left-icon.svg?inline';
 import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import PActionBar from '@squirrel/components/p-action-bar/p-action-bar.vue';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
-import { action } from '@storybook/addon-actions';
-import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 
 const actionBarActions = [
   {

package/squirrel/components/p-alert/p-alert.stories.js

@@ -1,5 +1,5 @@
 import PAlert from '@squirrel/components/p-alert/p-alert.vue';
-import { expect, within } from '@storybook/test';
+import { expect, within } from 'storybook/test';
 
 export default {
   title: 'Components/PAlert',

package/squirrel/components/p-btn/p-btn.stories.js

@@ -1,6 +1,6 @@
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
-import { action } from '@storybook/addon-actions';
-import { expect, within } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { expect, within } from 'storybook/test';
 
 // You can also import an `md` file and use it as a story's description
 // import PBtnReadme from './PBtn.readme.md';

package/squirrel/components/p-checkbox/p-checkbox.stories.js

@@ -1,5 +1,5 @@
 import PCheckbox from '@squirrel/components/p-checkbox/p-checkbox.vue';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 export default {
   title: 'Components/PCheckbox',

package/squirrel/components/p-close-btn/p-close-btn.stories.js

@@ -1,6 +1,6 @@
 import PCloseBtn from '@squirrel/components/p-close-btn/p-close-btn.vue';
-import { action } from '@storybook/addon-actions';
-import { expect, within } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { expect, within } from 'storybook/test';
 
 export default {
   title: 'Components/PCloseBtn',

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

@@ -198,58 +198,45 @@ describe('PDropdownSelect.vue', () => {
     cleanup(wrapper);
   });
 
-  it('shows "All options selected" when all selectable options and disabled-selected options are selected', async () => {
+  it('shows "All options selected" when all options are selected', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
 
     const items = cloneDeep(filterListItems).slice(0, 10);
     items[0].disabled = true;
     items[1].disabled = true;
-    // Pre-select one disabled item
-    const wrapper = createWrapper({ selected: [1], items }, { multiple: true });
+    const wrapper = createWrapper({ selected: filterListItems.map((item) => item.value), items }, { multiple: true });
 
     await wrapper.find('button').trigger('click');
-    await wrapper.findByText('Select all').trigger('click');
-
-    const selectedItemsOptions = wrapper.findAll('[p-select-list-option-item]');
-    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
 
-    // Should have all non-disabled items (8) plus the pre-selected disabled item (1)
-    expect(selectedItems.length).toBe(selectedItemsOptions.length - 1);
-    expect(wrapper.vm.$data.selected.length).toBe(items.length - 1);
     expect(wrapper.find('button').text()).toBe('All options selected');
 
     cleanup(wrapper);
   });
 
-  it('shows number of selected options when not all non-disabled options are selected', async () => {
+  it('does not select disabled options when "Select All" is clicked', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
 
     const items = cloneDeep(filterListItems).slice(0, 10);
     items[0].disabled = true;
-    const wrapper = createWrapper({ selected: [2, 3], items }, { multiple: true });
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true });
 
-    expect(wrapper.find('button').text()).toBe('2 options selected');
+    await wrapper.find('button').trigger('click');
+    await wrapper.findByText('Select all').trigger('click');
+
+    expect(wrapper.find('button').text()).toBe('8 options selected');
 
     cleanup(wrapper);
   });
 
-  it('does not select disabled items when "Select All" is clicked', async () => {
+  it('shows number of selected options when not all non-disabled options are selected', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
 
     const items = cloneDeep(filterListItems).slice(0, 10);
     items[0].disabled = true;
-    items[1].disabled = true;
-    const wrapper = createWrapper({ selected: [], items }, { multiple: true });
-
-    await wrapper.find('button').trigger('click');
-
-    await wrapper.findByText('Select all').trigger('click');
-
-    const selectedItemsOptions = wrapper.findAll('[p-select-list-option-item]');
-    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
+    const wrapper = createWrapper({ selected: [2, 3], items }, { multiple: true });
 
-    expect(selectedItems.length).toBe(selectedItemsOptions.length - 2);
-    expect(wrapper.vm.$data.selected.length).toBe(items.length - 2);
+    expect(wrapper.find('button').text()).toBe('2 options selected');
 
     cleanup(wrapper);
   });

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

@@ -59,7 +59,7 @@
           <div v-else class="truncate text-left">
             {{
               multiple
-                ? selectedItems.length === selectableItemsCount
+                ? selectedItems.length === computedItems.length
                   ? 'All options selected'
                   : `${selectedItems.length} option${selectedItems.length > 1 ? 's' : ''} selected`
                 : selectedItems[0][itemText]
@@ -467,10 +467,6 @@ const attrs = computed(() => {
 
 const style = computed(() => $attrs.style as StyleValue);
 
-const selectableItemsCount = computed(
-  () => internalItems.value.filter((item) => !isDisabled(item) || isSelected(item[props.itemValue])).length
-);
-
 // Watch
 // Sorts internalItems putting the selected ones first
 watch(

package/squirrel/components/p-file-upload/p-file-upload.spec.js

@@ -1,6 +1,6 @@
 import PFileUpload from '@squirrel/components/p-file-upload/p-file-upload.vue';
-import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { expect } from 'storybook/test';
 import { vi } from 'vitest';
 
 // Mocking the toastification library

package/squirrel/components/p-input-number/p-input-number.spec.js

@@ -1,6 +1,6 @@
 import PInputNumber from '@squirrel/components/p-input-number/p-input-number.vue';
-import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { expect } from 'storybook/test';
 
 const baseClasses = () => [
   'text-night',

package/squirrel/components/p-ring-loader/p-ring-loader.spec.js

@@ -1,6 +1,6 @@
 import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
-import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { expect } from 'storybook/test';
 
 describe('PRingLoader.vue', () => {
   it('renders correctly with custom props', async () => {

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

@@ -1,6 +1,6 @@
 import { fieldArgTypes } from '@root/stories/common/field';
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { ref } from 'vue';
 
 const selectItems = [

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

@@ -1,7 +1,7 @@
 import { fieldArgTypes } from '@root/stories/common/field';
 import { getCSSTransitionDuration, sleep } from '@root/stories/common/helpers';
 import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { ref } from 'vue';
 
 const ACTIVE_CLASS = 'text-p-purple-60';

package/squirrel/components/p-table-header-cell/p-table-header-cell.stories.js

@@ -1,5 +1,5 @@
 import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 export default {
   title: 'Components/PTableHeaderCell',

package/squirrel/components/p-tabs/p-tabs.stories.js

@@ -1,6 +1,6 @@
 import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 export default {
   title: 'Components/PTabs',

package/squirrel/components/p-tabs-pills/p-tabs-pills.spec.js

@@ -0,0 +1,117 @@
+import PTabsPills from '@squirrel/components/p-tabs-pills/p-tabs-pills.vue';
+import { createWrapperFor } from '@tests/vitest.helpers';
+
+const ACTIVE_CLASSES = ['bg-night', 'text-surface', 'hover:bg-night', 'hover:text-surface'];
+
+const createTabItems = () => [
+  { value: 'tab1', text: 'Home' },
+  { value: 'tab2', text: 'Profile' },
+  { value: 'tab3', text: 'Messages' },
+  { value: 'tab4', text: 'About' },
+  { value: 'tab5', text: 'Settings' },
+];
+
+const createWrapper = (props = {}) => {
+  return createWrapperFor(PTabsPills, {
+    props: {
+      items: createTabItems(),
+      ...props,
+    },
+  });
+};
+
+describe('PTabsPills.vue', () => {
+  it('renders correctly', async () => {
+    const wrapper = createWrapper();
+    const buttons = await wrapper.findAll('button');
+
+    buttons.forEach((button) => {
+      ACTIVE_CLASSES.forEach((className) => {
+        expect(button.classes()).not.toContain(className);
+      });
+    });
+    expect(buttons.length).toBe(5);
+    expect(buttons[1].text()).toBe(createTabItems()[1].text);
+  });
+
+  it(`updates the value bound with v-model`, async () => {
+    const wrapper = createWrapperFor({
+      data() {
+        return {
+          selected: 'tab1',
+          items: createTabItems(),
+        };
+      },
+      template: '<PTabsPills :items="items" v-model="selected" />',
+      components: { PTabsPills },
+    });
+
+    await wrapper.setData({ selected: 'tab4' });
+
+    const selected = wrapper.findAll('button')[3];
+
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(selected.classes()).toContain(className);
+    });
+    expect(selected.attributes('aria-selected')).toBe('true');
+  });
+
+  it(`updates the value bound with v-model when an option is clicked`, async () => {
+    const wrapper = createWrapperFor({
+      data() {
+        return {
+          selected: 'tab1',
+          items: createTabItems(),
+        };
+      },
+      template: '<PTabsPills :items="items" v-model="selected" />',
+      components: { PTabsPills },
+    });
+
+    await wrapper.findAll('button')[3].trigger('click');
+
+    const selected = wrapper.findAll('button')[3];
+
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(selected.classes()).toContain(className);
+    });
+    expect(selected.attributes('aria-selected')).toBe('true');
+  });
+
+  it('works with custom itemValue and itemText', async () => {
+    const tabItems = createTabItems();
+
+    const wrapper = createWrapper({
+      items: tabItems.map((item) => ({ customValue: item.value, customText: item.text })),
+      itemValue: 'customValue',
+      itemText: 'customText',
+    });
+
+    const buttons = await wrapper.findAll('button');
+
+    expect(buttons.length).toBe(5);
+
+    buttons.forEach((button, i) => {
+      expect(button.text()).toBe(tabItems[i].text);
+    });
+  });
+
+  it(`disables an option based on the disabled attribute`, async () => {
+    const wrapper = createWrapper({
+      items: createTabItems().map((item, i) => ({ ...item, disabled: i === 2 })),
+      modelValue: 'tab1',
+    });
+
+    const buttons = await wrapper.findAll('button');
+
+    buttons.forEach((button, i) => {
+      if (i === 2) {
+        expect(button.element.disabled).toBe(true);
+        expect(button.classes()).toContain('text-p-gray-30');
+      } else {
+        expect(button.element.disabled).toBe(false);
+        expect(button.classes()).not.toContain('text-p-gray-30');
+      }
+    });
+  });
+});

package/squirrel/components/p-tabs-pills/p-tabs-pills.stories.js

@@ -0,0 +1,139 @@
+import PTabsPills from '@squirrel/components/p-tabs-pills/p-tabs-pills.vue';
+import { expect, userEvent, within } from 'storybook/test';
+import { ref } from 'vue';
+
+const ACTIVE_CLASSES = ['bg-night', 'text-surface', 'hover:bg-night', 'hover:text-surface'];
+
+const DISABLED_CLASSES = ['text-p-gray-30'];
+
+export default {
+  title: 'Components/PTabsPills',
+  component: PTabsPills,
+  tags: ['autodocs'],
+  render: (args) => ({
+    components: { PTabsPills },
+    setup() {
+      const selected = ref('tab1');
+
+      return { args, selected };
+    },
+    template: `
+      <PTabsPills v-model="selected" v-bind="args" />
+      <div class="mt-2">Selected: {{ selected }}</div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        component: `PTabsPills can be used as a tab or button group that allows the user to select an option from a list of options.`,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    items: [
+      { value: 'tab1', text: 'Home' },
+      { value: 'tab2', text: 'Profile' },
+      { value: 'tab3', text: 'Messages' },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText(/Profile/i));
+
+    const button = canvas.getByText(/Profile/i).closest('button');
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(button.classList).toContain(className);
+    });
+  },
+};
+
+export const CustomValueAndText = {
+  args: {
+    items: [
+      { myValue: 'tab1', myText: 'Home' },
+      { myValue: 'tab2', myText: 'Profile' },
+      { myValue: 'tab3', myText: 'Messages' },
+    ],
+    itemValue: 'myValue',
+    itemText: 'myText',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'You can customize the property names used for value and text using `itemValue` and `itemText` props.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText(/Profile/i));
+
+    const button = canvas.getByText(/Profile/i).closest('button');
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(button.classList).toContain(className);
+    });
+  },
+};
+
+export const DisabledItems = {
+  args: {
+    items: [
+      { myValue: 'tab1', myText: 'Home', disabled: false },
+      { myValue: 'tab2', myText: 'Profile', disabled: true },
+      { myValue: 'tab3', myText: 'About', disabled: true },
+      { myValue: 'tab4', myText: 'Messages', disabled: false },
+    ],
+    itemValue: 'myValue',
+    itemText: 'myText',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'You can disable specific tabs by adding a `disabled` property to the items.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Check that disabled buttons have disabled classes
+    const disabledButtons = [
+      canvas.getByText(/Profile/i).closest('button'),
+      canvas.getByText(/About/i).closest('button'),
+    ];
+    disabledButtons.forEach((button) => {
+      DISABLED_CLASSES.forEach((className) => {
+        expect(button.classList).toContain(className);
+      });
+      ACTIVE_CLASSES.forEach((className) => {
+        expect(button.classList).not.toContain(className);
+      });
+    });
+
+    // Try to click a disabled button
+    await userEvent.click(canvas.getByText(/Profile/i));
+
+    // Check that disabled button still has disabled classes and not active classes
+    const disabledButton = canvas.getByText(/Profile/i).closest('button');
+    DISABLED_CLASSES.forEach((className) => {
+      expect(disabledButton.classList).toContain(className);
+    });
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(disabledButton.classList).not.toContain(className);
+    });
+
+    // Check that Home button still has active classes
+    const homeButton = canvas.getByText(/Home/i).closest('button');
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(homeButton.classList).toContain(className);
+    });
+    DISABLED_CLASSES.forEach((className) => {
+      expect(homeButton.classList).not.toContain(className);
+    });
+  },
+};

package/squirrel/components/p-tabs-pills/p-tabs-pills.vue

@@ -0,0 +1,60 @@
+<template>
+  <nav
+    class="flex h-6 w-fit flex-row space-x-1 overflow-x-auto rounded bg-p-gray-10 p-1 text-sm font-medium text-p-gray-50"
+    aria-label="Tabs Pills"
+    role="tablist"
+    aria-orientation="horizontal"
+  >
+    <button
+      v-for="tab in items"
+      :key="String(tab[itemValue])"
+      type="button"
+      class="rounded px-2 pb-px leading-none transition-all duration-300"
+      :class="[
+        tab.disabled
+          ? 'text-p-gray-30'
+          : tab[itemValue] === modelValue
+            ? 'bg-night text-surface hover:bg-night hover:text-surface'
+            : 'hover:text-p-gray-70',
+      ]"
+      :disabled="!!tab.disabled"
+      role="tab"
+      :aria-selected="tab[itemValue] === modelValue"
+      :data-tab="`#${tab[itemValue]}`"
+      :aria-controls="String(tab[itemValue])"
+      @click="$emit('update:modelValue', tab[itemValue])"
+    >
+      {{ tab[itemText] }}
+    </button>
+  </nav>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'PTabsPills',
+});
+
+type Value = string | number | boolean;
+
+type Option = {
+  [key: string]: Value;
+};
+
+type Props = {
+  modelValue?: Value;
+  items?: readonly Option[];
+  itemText?: string;
+  itemValue?: string;
+};
+
+withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  items: () => [],
+  itemValue: 'value',
+  itemText: 'text',
+});
+
+defineEmits<{
+  'update:modelValue': [val: Value];
+}>();
+</script>

package/squirrel/components/p-toggle/p-toggle.spec.js

@@ -1,6 +1,6 @@
 import PToggle from '@squirrel/components/p-toggle/p-toggle.vue';
-import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { expect } from 'storybook/test';
 
 describe('PToggle.vue', () => {
   it('renders correctly', async () => {

package/squirrel/composables/useInputClasses.spec.js

@@ -1,5 +1,5 @@
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
-import { expect } from '@storybook/test';
+import { expect } from 'storybook/test';
 import { reactive, ref } from 'vue';
 
 const baseInputClassesMd = () => [