@pequity/squirrel 8.0.1 → 8.1.0

package/dist/squirrel/components/p-table/p-table.vue.d.ts

@@ -25,25 +25,30 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
         [x: `prepend-header-cell-${string}`]: ((props: {
             col: TableCol;
         }) => any) | undefined;
+    } & {
         [x: `subheader-cell-${string}`]: ((props: {}) => any) | undefined;
+    } & {
         [x: `cell-${string}`]: ((props: {
             col: TableCol;
             rowData: T;
             rowIndex: number;
             cellData: unknown;
         }) => any) | undefined;
-        default?: ((props: {}) => any) | undefined;
-        row?: ((props: {
+    } & {
+        default?: (props: {}) => any;
+    } & {
+        row?: (props: {
             rowData: T;
             rowIndex: number;
-        }) => any) | undefined;
-        cell?: ((props: {
+        }) => any;
+    } & {
+        cell?: (props: {
             col: TableCol;
             colIndex: number;
             rowData: T;
             rowIndex: number;
             cellData: unknown;
-        }) => any) | undefined;
+        }) => any;
     };
     emit: {
         (e: "scroll", val: Event): void;

package/dist/squirrel/components/p-table-header-cell/p-table-header-cell.vue.d.ts

@@ -106,7 +106,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         text: string | null;
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
-            default?: ((props: {}) => any) | undefined;
+            default?: (props: {}) => any;
         };
     });
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/squirrel/components/p-table-td/p-table-td.vue.d.ts

@@ -1,29 +1,12 @@
-import { type Ref } from 'vue';
 type Props = {
     colIndex: number;
     isEditable?: boolean;
     isSelected?: boolean;
 };
-declare const isLastColFixed: Ref<boolean, boolean>;
-declare const isColsResizable: Ref<boolean, boolean>;
-declare const isLastCol: import("vue").ComputedRef<boolean>;
-declare const tdClass: import("vue").ComputedRef<string[]>;
-declare const innerDivClass: import("vue").ComputedRef<string[]>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<Props, {
-    isLastColFixed: typeof isLastColFixed;
-    isColsResizable: typeof isColsResizable;
-    isLastCol: typeof isLastCol;
-    tdClass: typeof tdClass;
-    innerDivClass: typeof innerDivClass;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    isSelected: boolean;
-    isEditable: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     isSelected: boolean;
     isEditable: boolean;

package/dist/squirrel/components/p-textarea/p-textarea.vue.d.ts

@@ -1,81 +1,12 @@
 import { type Size } from '../p-btn/p-btn.types';
-import { type PropType, type StyleValue } from 'vue';
-declare const labelClasses: import("vue").ComputedRef<string>, textareaClasses: import("vue").ComputedRef<string>, errorMsgClasses: import("vue").ComputedRef<string>;
-declare const attrs: import("vue").ComputedRef<{
-    [x: string]: unknown;
-}>;
-declare const style: import("vue").ComputedRef<StyleValue>;
-declare const updateValue: (e: Event) => void;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+import { type PropType } from 'vue';
 declare var __VLS_1: {
     label: string;
     labelClasses: string;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<string | number | null>;
-        default: string;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    errorMsg: {
-        type: StringConstructor;
-        default: string;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    size: {
-        type: PropType<Size>;
-        default: string;
-        validator(value: Size): boolean;
-    };
-}>, {
-    labelClasses: typeof labelClasses;
-    textareaClasses: typeof textareaClasses;
-    errorMsgClasses: typeof errorMsgClasses;
-    attrs: typeof attrs;
-    style: typeof style;
-    updateValue: typeof updateValue;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<string | number | null>;
-        default: string;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    errorMsg: {
-        type: StringConstructor;
-        default: string;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    size: {
-        type: PropType<Size>;
-        default: string;
-        validator(value: Size): boolean;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    size: "sm" | "md" | "lg";
-    label: string;
-    required: boolean;
-    modelValue: string | number | null;
-    errorMsg: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<string | number | null>;

package/dist/squirrel/components/p-toggle/p-toggle.vue.d.ts

@@ -55,10 +55,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("vu
     modelValue: boolean;
     errorMsg: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    label?: ((props: {
+    label?: (props: {
         label: string;
         labelClasses: string;
-    }) => any) | undefined;
+    }) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.0.1",
+  "version": "8.1.0",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {
@@ -18,7 +18,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test-storybook": "test-storybook",
-    "quality": "pnpm run lint && pnpm run typecheck && pnpm run test:unit && pnpm run build",
+    "quality": "pnpm run lint && pnpm run typecheck && vitest run && pnpm run build",
     "prepare": "husky"
   },
   "files": [
@@ -50,7 +50,7 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@pequity/eslint-config": "^2.0.0",
-    "@playwright/test": "^1.51.1",
+    "@playwright/test": "^1.52.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-a11y": "^8.6.12",
@@ -68,21 +68,21 @@
     "@tanstack/vue-virtual": "3.13.6",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.14.0",
+    "@types/node": "^22.15.2",
     "@vitejs/plugin-vue": "^5.2.3",
-    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.2",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.24.0",
+    "eslint": "^9.25.1",
     "eslint-plugin-storybook": "^0.12.0",
     "floating-vue": "5.2.2",
-    "glob": "^11.0.1",
+    "glob": "^11.0.2",
     "husky": "^9.1.7",
     "iconify-icon": "^2.3.0",
-    "jsdom": "^26.0.0",
-    "lint-staged": "^15.5.0",
+    "jsdom": "^26.1.0",
+    "lint-staged": "^15.5.1",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.5.3",
@@ -90,19 +90,19 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.86.3",
+    "sass": "^1.87.0",
     "semantic-release": "^24.2.3",
     "storybook": "^8.6.12",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.3",
-    "vite": "^6.2.5",
-    "vitest": "^3.1.1",
+    "vite": "^6.3.3",
+    "vitest": "^3.1.2",
     "vue": "3.5.13",
     "vue-currency-input": "3.2.1",
-    "vue-router": "4.5.0",
+    "vue-router": "4.5.1",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.2.8"
+    "vue-tsc": "2.2.10"
   },
   "dependencies": {
     "tailwind-variants": "^1.0.0"

package/squirrel/components/index.ts

@@ -37,6 +37,7 @@ import PSelectList from '@squirrel/components/p-select-list/p-select-list.vue';
 import { useSelectList } from '@squirrel/components/p-select-list/useSelectList';
 import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
 import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
+import PSteps from '@squirrel/components/p-steps/p-steps.vue';
 import {
   colsInjectionKey,
   type HeaderCellAttrs,
@@ -108,6 +109,7 @@ export {
   PSelectList,
   PSelectPill,
   PSkeletonLoader,
+  PSteps,
   PTable,
   PTableHeaderCell,
   PTableLoader,

package/squirrel/components/p-action-bar/p-action-bar.spec.ts

@@ -1,5 +1,6 @@
 import PActionBar from '@squirrel/components/p-action-bar/p-action-bar.vue';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { type VueWrapper } from '@vue/test-utils';
 import { defineComponent } from 'vue';
 
 const createPDropdownStub = () => {
@@ -77,7 +78,7 @@ describe('PActionBar.vue', () => {
       },
     });
 
-    const mainDiv = await wrapper.find('.teleport-stub > .fixed.bottom-6');
+    const mainDiv = wrapper.find('.teleport-stub > .fixed.bottom-6');
     expect(mainDiv.exists()).toBe(true);
 
     expect(mainDiv.classes()).toEqual(['fixed', 'bottom-6', 'left-1/2', 'z-[100]', '-translate-x-2/4']);
@@ -97,14 +98,19 @@ describe('PActionBar.vue', () => {
       'text-white',
     ]);
 
-    const paragraph = await wrapper.find('p');
+    const buttons = wrapper.findAllComponents({ name: 'PBtn' });
+    buttons.forEach((button: VueWrapper) => {
+      expect(button.find('.slot-wrapper > div').classes()).toEqual(['flex', 'items-center', 'gap-2', 'px-1']);
+    });
+
+    const paragraph = wrapper.find('p');
     expect(paragraph.text()).toContain('Hello World');
 
-    const dismissIcon = await wrapper.find('i.x-white-icon');
+    const dismissIcon = wrapper.find('i.x-white-icon');
     expect(dismissIcon.exists()).toBe(true);
     expect(actionBarDiv.find('.text-xs').text()).toBe('Clear All');
 
-    const actionBtn = await wrapper.find('button.inline-block');
+    const actionBtn = wrapper.find('button.inline-block');
     expect(actionBtn.exists()).toBe(true);
     expect(actionBtn.text()).toContain('Say Hi');
   });
@@ -125,9 +131,9 @@ describe('PActionBar.vue', () => {
       },
     });
 
-    const mainDiv = await wrapper.find('.teleport-stub > .fixed.bottom-6');
+    const mainDiv = wrapper.find('.teleport-stub > .fixed.bottom-6');
 
-    await mainDiv.find('.p-dropdown-stub > button').trigger('click');
+    mainDiv.find('.p-dropdown-stub > button').trigger('click');
 
     await wrapper.vm.$nextTick();
 
@@ -155,7 +161,7 @@ describe('PActionBar.vue', () => {
       },
     });
 
-    const actionBar = await wrapper.find('.teleport-stub > div');
+    const actionBar = wrapper.find('.teleport-stub > div');
 
     expect(actionBar.attributes('role')).toBe('alertdialog');
     expect(actionBar.attributes('data-testid')).toBe('TestId');
@@ -168,7 +174,7 @@ describe('PActionBar.vue', () => {
       props: { show: true, label: 'Hello World', actions: [{ label: 'Say Hi', name: 'greet' }] },
     });
 
-    const button = await wrapper.find('button.inline-flex');
+    const button = wrapper.find('button.inline-flex');
 
     await button.trigger('click');
 
@@ -187,15 +193,15 @@ describe('PActionBar.vue', () => {
       },
     });
 
-    const button = await wrapper.findByText('Say Hi', 'button');
+    const button = wrapper.findByText('Say Hi', 'button');
     await button.trigger('click');
 
     expect(wrapper.emitted()['click:action'][0]).toEqual(['greet']);
 
-    const actionMenu = await wrapper.findByText('Action menu', 'button');
+    const actionMenu = wrapper.findByText('Action menu', 'button');
     await actionMenu.trigger('click');
 
-    const subAction = await wrapper.findByText('Say Bye', 'button');
+    const subAction = wrapper.findByText('Say Bye', 'button');
     await subAction.trigger('click');
 
     expect(wrapper.emitted()['click:action'][1]).toEqual(['bye']);

package/squirrel/components/p-action-bar/p-action-bar.vue

@@ -19,17 +19,17 @@
               type="secondary-ghost-dark"
               @click="$emit('click:action', actionOrMenu.name)"
             >
-              <div class="flex items-center gap-2 px-1 py-0.5">
+              <div class="flex items-center gap-2 px-1">
                 <Component :is="actionOrMenu.icon" v-if="isComponent(actionOrMenu.icon)" class="h-4 w-4" />
-                <PIcon v-if="isString(actionOrMenu.icon)" :icon="actionOrMenu.icon" width="16px" height="16px" />
+                <PIcon v-if="isString(actionOrMenu.icon)" :icon="actionOrMenu.icon" width="16" />
                 <div>{{ actionOrMenu.label }}</div>
               </div>
             </PBtn>
             <PDropdown v-else placement="top" strategy="fixed">
               <PBtn size="sm" type="secondary-ghost-dark">
-                <div class="flex items-center gap-2 px-1 py-0.5">
+                <div class="flex items-center gap-2 px-1">
                   <Component :is="actionOrMenu.icon" v-if="isComponent(actionOrMenu.icon)" class="h-4 w-4" />
-                  <PIcon v-if="isString(actionOrMenu.icon)" :icon="actionOrMenu.icon" width="16px" height="16px" />
+                  <PIcon v-if="isString(actionOrMenu.icon)" :icon="actionOrMenu.icon" width="16" />
                   <div>{{ actionOrMenu.label }}</div>
                 </div>
               </PBtn>
@@ -42,9 +42,9 @@
                       type="secondary-ghost-dark"
                       @click="($emit('click:action', subaction.name), hide())"
                     >
-                      <div class="flex items-center gap-2 px-1 py-0.5">
+                      <div class="flex items-center gap-2 px-1">
                         <Component :is="subaction.icon" v-if="isComponent(subaction.icon)" class="h-4 w-4" />
-                        <PIcon v-if="isString(subaction.icon)" :icon="subaction.icon" width="16px" height="16px" />
+                        <PIcon v-if="isString(subaction.icon)" :icon="subaction.icon" width="16" />
                         <div>{{ subaction.label }}</div>
                       </div>
                     </PBtn>

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

@@ -24,7 +24,7 @@ const createWrapper = (options) => {
       <button class="request-1-sec-component" @click="fireRequestComponent(1000)"></button>
     `,
       setup() {
-        const { loadingShow, loadingHide, show } = usePLoading(options);
+        const { loadingShow, loadingHide, show, isLoading } = usePLoading(options);
 
         const fireRequest = async (time) => {
           const id = `default-${time}`;
@@ -47,7 +47,7 @@ const createWrapper = (options) => {
           loadingHide(id);
         };
 
-        return { loadingShow, loadingHide, fireRequest, fireRequestText, fireRequestComponent, show };
+        return { loadingShow, loadingHide, fireRequest, fireRequestText, fireRequestComponent, show, isLoading };
       },
     },
     {
@@ -90,6 +90,39 @@ describe('PLoading.vue', () => {
     expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
   });
 
+  it('correctly reports loading state for a single loader', async () => {
+    const wrapper = createWrapper({ delay: 0 });
+
+    await wrapper.find('.request-1-sec').trigger('click');
+
+    vi.advanceTimersByTime(500);
+    await waitNT(appWrapper.vm);
+    expect(wrapper.vm.isLoading('default-1000')).toBe(true);
+
+    vi.advanceTimersByTime(600);
+    await waitNT(appWrapper.vm);
+    expect(wrapper.vm.isLoading('default-1000')).toBe(false);
+  });
+
+  it('correctly reports loading state for multiple loaders', async () => {
+    const wrapper = createWrapper({ delay: 0 });
+
+    await wrapper.find('.request-1-sec').trigger('click');
+    await wrapper.find('.request-3-secs').trigger('click');
+
+    vi.advanceTimersByTime(500);
+    await waitNT(appWrapper.vm);
+    expect(wrapper.vm.isLoading()).toBe(true);
+
+    vi.advanceTimersByTime(1000);
+    await waitNT(appWrapper.vm);
+    expect(wrapper.vm.isLoading()).toBe(true);
+
+    vi.advanceTimersByTime(2000);
+    await waitNT(appWrapper.vm);
+    expect(wrapper.vm.isLoading()).toBe(false);
+  });
+
   it(`doesn't show the loading indicator when loadingHide gets called before the delay time has passed`, async () => {
     const wrapper = createWrapper({ delay: 1000 });
 

package/squirrel/components/p-loading/usePLoading.ts

@@ -22,6 +22,7 @@ type UsePLoading = {
   props: Ref;
   loadingShow: (loadingItem: LoadingItemOption) => void;
   loadingHide: (id?: LoadingItemOption['id']) => void;
+  isLoading: (id?: LoadingItemOption['id']) => boolean;
 };
 
 const LOADING_TEXT = 'Loading...';
@@ -86,6 +87,14 @@ export const usePLoading = (options?: Options): UsePLoading => {
     }
   };
 
+  const isLoading = (id?: LoadingItemOption['id']) => {
+    if (id) {
+      return loadingItems.value.some((item) => item.id === id);
+    }
+
+    return loadingItems.value.length > 0;
+  };
+
   if (scope) {
     onScopeDispose(() => {
       if (loadingItems.value.some((item) => item.clearOnDispose === false)) {
@@ -102,5 +111,5 @@ export const usePLoading = (options?: Options): UsePLoading => {
     });
   }
 
-  return { show, content, props, loadingShow, loadingHide };
+  return { show, content, props, loadingShow, loadingHide, isLoading };
 };

package/squirrel/components/p-steps/__snapshots__/p-steps.spec.js.snap

@@ -0,0 +1,16 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PSteps.vue > renders correctly 1`] = `
+"<div class="flex items-center gap-2">
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border border-p-blue-50 text-p-blue-50">First</div>
+  <div class="flex items-center">
+    <iconify-icon icon="material-symbols:arrow-right-alt-rounded" class="text-p-blue-50"></iconify-icon>
+  </div>
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border border-p-blue-50 bg-p-blue-50 text-surface">Second</div>
+  <div class="flex items-center">
+    <iconify-icon icon="material-symbols:arrow-right-alt-rounded" class="text-p-gray-30"></iconify-icon>
+  </div>
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border border-p-gray-30 text-p-gray-30">Third</div>
+  <!--v-if-->
+</div>"
+`;

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

@@ -0,0 +1,126 @@
+import PSteps from '@squirrel/components/p-steps/p-steps.vue';
+import { createWrapperFor } from '@tests/vitest.helpers';
+
+describe('PSteps.vue', () => {
+  it('renders correctly', () => {
+    const wrapper = createWrapperFor(PSteps, {
+      props: {
+        steps: ['first', 'second', 'third'],
+        currentStep: 'second',
+        stepTitleMap: {},
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('renders the correct number of steps', () => {
+    const steps = ['first', 'second', 'third'];
+    const wrapper = createWrapperFor(PSteps, {
+      props: {
+        steps,
+        currentStep: 'second',
+        stepTitleMap: {},
+      },
+    });
+
+    const stepElements = wrapper.findAll('.rounded-full.border');
+    expect(stepElements.length).toBe(steps.length);
+  });
+
+  it('applies correct classes for current step', () => {
+    const wrapper = createWrapperFor(PSteps, {
+      props: {
+        steps: ['first', 'second', 'third'],
+        currentStep: 'second',
+        stepTitleMap: {},
+      },
+    });
+
+    const stepElements = wrapper.findAll('.rounded-full.border');
+
+    // First step should be completed (blue text)
+    expect(stepElements[0].classes()).toContain('text-nowrap');
+    expect(stepElements[0].classes()).toContain('text-p-blue-50');
+    expect(stepElements[0].classes()).toContain('border-p-blue-50');
+
+    // Second step should be current (blue background)
+    expect(stepElements[1].classes()).toContain('text-nowrap');
+    expect(stepElements[1].classes()).toContain('bg-p-blue-50');
+    expect(stepElements[1].classes()).toContain('text-surface');
+    expect(stepElements[1].classes()).toContain('border-p-blue-50');
+
+    // Third step should be upcoming (gray)
+    expect(stepElements[2].classes()).toContain('text-nowrap');
+    expect(stepElements[2].classes()).toContain('text-p-gray-30');
+    expect(stepElements[2].classes()).toContain('border-p-gray-30');
+  });
+
+  it('displays step titles from stepTitleMap when provided', () => {
+    const wrapper = createWrapperFor(PSteps, {
+      props: {
+        steps: ['step1', 'step2', 'step3'],
+        currentStep: 'step2',
+        stepTitleMap: {
+          step1: 'Custom Step 1',
+          step2: 'Custom Step 2',
+          step3: 'Custom Step 3',
+        },
+      },
+    });
+
+    const stepElements = wrapper.findAll('.rounded-full.border');
+    expect(stepElements[0].text()).toBe('Custom Step 1');
+    expect(stepElements[1].text()).toBe('Custom Step 2');
+    expect(stepElements[2].text()).toBe('Custom Step 3');
+  });
+
+  it('uses startCase for step titles when stepTitleMap entry is not provided', () => {
+    const wrapper = createWrapperFor(PSteps, {
+      props: {
+        steps: ['firstStep', 'secondStep', 'thirdStep'],
+        currentStep: 'secondStep',
+        stepTitleMap: {
+          secondStep: 'Custom Second',
+        },
+      },
+    });
+
+    const stepElements = wrapper.findAll('.rounded-full.border');
+    expect(stepElements[0].text()).toBe('First Step'); // startCase applied
+    expect(stepElements[1].text()).toBe('Custom Second'); // from map
+    expect(stepElements[2].text()).toBe('Third Step'); // startCase applied
+  });
+
+  it('renders the correct number of arrows between steps', () => {
+    const wrapper = createWrapperFor(PSteps, {
+      props: {
+        steps: ['first', 'second', 'third', 'fourth'],
+        currentStep: 'second',
+        stepTitleMap: {},
+      },
+    });
+
+    // There should be 3 arrows for 4 steps
+    const arrowElements = wrapper.findAll('[icon="material-symbols:arrow-right-alt-rounded"]');
+    expect(arrowElements.length).toBe(3);
+  });
+
+  it('applies the correct classes to arrows based on current step', () => {
+    const wrapper = createWrapperFor(PSteps, {
+      props: {
+        steps: ['first', 'second', 'third', 'fourth'],
+        currentStep: 'second',
+        stepTitleMap: {},
+      },
+    });
+
+    const arrowElements = wrapper.findAll('[icon="material-symbols:arrow-right-alt-rounded"]');
+
+    // Arrow between first and second step should be colored
+    expect(arrowElements[0].classes()).toContain('text-p-blue-50');
+
+    // Arrow after current step should be gray
+    expect(arrowElements[1].classes()).toContain('text-p-gray-30');
+    expect(arrowElements[2].classes()).toContain('text-p-gray-30');
+  });
+});

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

@@ -0,0 +1,31 @@
+import PSteps from '@squirrel/components/p-steps/p-steps.vue';
+
+export default {
+  title: 'Components/PSteps',
+  component: PSteps,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Steps Component to be used in wizards',
+      },
+    },
+  },
+};
+
+export const Default = {
+  render: (args) => ({
+    components: { PSteps },
+    setup() {
+      return { args };
+    },
+    template: `<PSteps v-bind="args" />`,
+  }),
+  args: {
+    steps: ['stepOne', 'stepTwo', 'stepThree', 'stepFour'],
+    currentStep: 'stepTwo',
+    stepTitleMap: {
+      stepTwo: 'Criteria',
+    },
+  },
+};