@pequity/squirrel 8.3.2 → 8.3.3

package/dist/cjs/index.js

@@ -661,7 +661,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$2 = { class: "flex items-center gap-2" };
-const _hoisted_2$2 = ["onClick"];
+const _hoisted_2$2 = ["data-state", "onClick"];
 const _hoisted_3$2 = {
   key: 0,
   class: "flex items-center"
@@ -698,6 +698,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["text-nowrap rounded-full border px-4 py-1 text-sm font-semibold", [stepClasses(step, i), { "cursor-pointer": _ctx.clickable && !step.disabled }]]),
+              "data-state": step.value === _ctx.activeStep ? "active" : "inactive",
               onClick: ($event) => emit("click:step", step, i)
             }, vue.toDisplayString(step.text || vue.unref(lodashEs.startCase)(String(step.value))), 11, _hoisted_2$2),
             i < _ctx.steps.length - 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [

package/dist/es/index.js

@@ -661,7 +661,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$2 = { class: "flex items-center gap-2" };
-const _hoisted_2$2 = ["onClick"];
+const _hoisted_2$2 = ["data-state", "onClick"];
 const _hoisted_3$2 = {
   key: 0,
   class: "flex items-center"
@@ -698,6 +698,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", {
               class: normalizeClass(["text-nowrap rounded-full border px-4 py-1 text-sm font-semibold", [stepClasses(step, i2), { "cursor-pointer": _ctx.clickable && !step.disabled }]]),
+              "data-state": step.value === _ctx.activeStep ? "active" : "inactive",
               onClick: ($event) => emit("click:step", step, i2)
             }, toDisplayString(step.text || unref(startCase)(String(step.value))), 11, _hoisted_2$2),
             i2 < _ctx.steps.length - 1 ? (openBlock(), createElementBlock("div", _hoisted_3$2, [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {

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

@@ -2,15 +2,15 @@
 
 exports[`PSteps.vue > render tests > 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-p-gray-30 text-p-gray-30">First</div>
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border-p-gray-30 text-p-gray-30" data-state="inactive">First</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-p-gray-30 text-p-gray-30">Second</div>
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border-p-gray-30 text-p-gray-30" data-state="inactive">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-p-gray-30 text-p-gray-30">Third</div>
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border-p-gray-30 text-p-gray-30" data-state="inactive">Third</div>
   <!--v-if-->
 </div>"
 `;

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

@@ -37,7 +37,7 @@ describe('PSteps.vue', () => {
       expect(stepElements.length).toBe(createSteps().length);
     });
 
-    it('applies correct classes for current step', () => {
+    it('applies correct classes and data-state for current step', () => {
       const wrapper = createWrapper({
         activeStep: 'second',
       });
@@ -48,17 +48,20 @@ describe('PSteps.vue', () => {
       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');
+      expect(stepElements[0].attributes('data-state')).toBe('inactive');
 
       // 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');
+      expect(stepElements[1].attributes('data-state')).toBe('active');
 
       // 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');
+      expect(stepElements[2].attributes('data-state')).toBe('inactive');
     });
 
     it('displays step titles', () => {

package/squirrel/components/p-steps/p-steps.vue

@@ -4,6 +4,7 @@
       <div
         class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold"
         :class="[stepClasses(step, i), { 'cursor-pointer': clickable && !step.disabled }]"
+        :data-state="step.value === activeStep ? 'active' : 'inactive'"
         @click="emit('click:step', step, i)"
       >
         {{ step.text || startCase(String(step.value)) }}