@mozaic-ds/web-components 1.6.0 → 1.8.0

package/dist/components/stepperinline/StepperInline.spec.js

@@ -2,7 +2,11 @@ import { render } from '@testing-library/svelte';
 import StepperInline from './StepperInline.svelte';
 import { describe, it, expect } from 'vitest';
 describe('StepperInline', () => {
-    const defaultSteps = [{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }];
+    const defaultSteps = [
+        { id: '1', label: 'Step 1' },
+        { id: '2', label: 'Step 2' },
+        { id: '3', label: 'Step 3' },
+    ];
     it('renders correctly with default props', () => {
         const { getAllByRole, getByText } = render(StepperInline, {
             props: {
@@ -13,31 +17,61 @@ describe('StepperInline', () => {
         expect(getAllByRole('listitem').length).toBe(defaultSteps.length);
         expect(getByText('Step 1')).toBeTruthy();
     });
-    it('marks the correct step as active', async () => {
-        const { container, rerender } = render(StepperInline, {
-            props: {
-                step: 2,
-                steps: defaultSteps,
-            },
+    describe('Active step - number type', () => {
+        it('marks the correct step as active', async () => {
+            const { container, rerender } = render(StepperInline, {
+                props: {
+                    step: 2,
+                    steps: defaultSteps,
+                },
+            });
+            let labels = container.querySelectorAll('.mc-stepper-inline__label');
+            expect(labels[1].classList.contains('is-current')).toBe(true);
+            expect(labels[0].classList.contains('is-current')).toBe(false);
+            await rerender({ step: 3, steps: defaultSteps });
+            labels = container.querySelectorAll('.mc-stepper-inline__label');
+            expect(labels[2].classList.contains('is-current')).toBe(true);
+        });
+        it('marks completed steps', () => {
+            const { container } = render(StepperInline, {
+                props: {
+                    step: 3,
+                    steps: defaultSteps,
+                },
+            });
+            const items = container.querySelectorAll('.mc-stepper-inline__item');
+            expect(items[0].classList.contains('is-completed')).toBe(true);
+            expect(items[1].classList.contains('is-completed')).toBe(true);
+            expect(items[2].classList.contains('is-completed')).toBe(false);
         });
-        let labels = container.querySelectorAll('.mc-stepper-inline__label');
-        expect(labels[1].classList.contains('is-current')).toBe(true);
-        expect(labels[0].classList.contains('is-current')).toBe(false);
-        await rerender({ step: 3, steps: defaultSteps });
-        labels = container.querySelectorAll('.mc-stepper-inline__label');
-        expect(labels[2].classList.contains('is-current')).toBe(true);
     });
-    it('marks completed steps', () => {
-        const { container } = render(StepperInline, {
-            props: {
-                step: 3,
-                steps: defaultSteps,
-            },
+    describe('Active step - string type', () => {
+        it('marks the correct step as active', async () => {
+            const { container, rerender } = render(StepperInline, {
+                props: {
+                    step: '2',
+                    steps: defaultSteps,
+                },
+            });
+            let labels = container.querySelectorAll('.mc-stepper-inline__label');
+            expect(labels[1].classList.contains('is-current')).toBe(true);
+            expect(labels[0].classList.contains('is-current')).toBe(false);
+            await rerender({ step: '3', steps: defaultSteps });
+            labels = container.querySelectorAll('.mc-stepper-inline__label');
+            expect(labels[2].classList.contains('is-current')).toBe(true);
+        });
+        it('marks completed steps', () => {
+            const { container } = render(StepperInline, {
+                props: {
+                    step: '3',
+                    steps: defaultSteps,
+                },
+            });
+            const items = container.querySelectorAll('.mc-stepper-inline__item');
+            expect(items[0].classList.contains('is-completed')).toBe(true);
+            expect(items[1].classList.contains('is-completed')).toBe(true);
+            expect(items[2].classList.contains('is-completed')).toBe(false);
         });
-        const items = container.querySelectorAll('.mc-stepper-inline__item');
-        expect(items[0].classList.contains('is-completed')).toBe(true);
-        expect(items[1].classList.contains('is-completed')).toBe(true);
-        expect(items[2].classList.contains('is-completed')).toBe(false);
     });
     it('renders no steps when steps prop is empty', () => {
         const { queryAllByRole } = render(StepperInline, {

package/dist/components/stepperinline/StepperInline.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepperInline.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stepperinline/StepperInline.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAmBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
+{"version":3,"file":"StepperInline.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stepperinline/StepperInline.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAcX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/stepperinline/StepperInline.stories.js

@@ -3,21 +3,16 @@ import './StepperInline.svelte';
 const meta = {
     title: 'Indicators/Stepper Inline',
     component: 'm-stepper-inline',
-    argTypes: {
-        step: {
-            control: { type: 'number', min: 1, max: 10 },
-        },
-    },
     args: {
-        currentStep: 2,
+        step: 'step1',
         steps: [
-            { label: 'Cart' },
-            { label: 'Delivery address' },
-            { label: 'Payment' },
-            { label: 'Order confirmation' },
+            { id: 'step1', label: 'Cart' },
+            { id: 'step2', label: 'Delivery address' },
+            { id: 'step3', label: 'Payment' },
+            { id: 'step4', label: 'Order confirmation' },
         ],
     },
-    render: (args) => html `<m-stepper-inline step="${args.currentStep}" .steps="${args.steps}"></m-stepper-inline>`,
+    render: (args) => html `<m-stepper-inline step="${args.step}" .steps="${args.steps}"></m-stepper-inline>`,
 };
 export default meta;
 export const Default = {};

package/dist/components/stepperinline/StepperInline.svelte

@@ -10,19 +10,25 @@
   interface Props {
     [key: string]: any;
     /**
-     * Current step of the stepper compact.
+     * Defines the currently active step.
+     *
+     * - If a `number` is provided, it represents the 1-based position of the step
+     *   in the `steps` array (e.g. `1` for the first step).
+     * - If a `string` is provided, it must match the `id` of one of the steps.
      */
-    step?: number;
-
+    step?: number | string;
     /**
      * Steps of the stepper inline.
      */
     steps?: Array<{
+      /**
+       * Uniquer identifier for the step.
+       */
+      id?: string;
       /**
        * Label of the step.
        */
       label: string;
-
       /**
        * Optional additional information under the label.
        */
@@ -30,14 +36,21 @@
     }>;
   }
 
-  let { step = $bindable(1), steps = $bindable([]), ...attrs }: Props = $props();
+  let { step = $bindable(0), steps = $bindable([]), ...attrs }: Props = $props();
 
-  const safeStep = $derived(() => Math.min(Math.max(step ?? 1, 1), steps.length ?? 1));
+  const activeStep = $derived.by(() => {
+    if (typeof step === 'number') {
+      return Math.min(Math.max(step, 1), steps.length) - 1;
+    } else {
+      const activeIndex = steps.findIndex((el) => el.id === step);
+      return activeIndex === -1 ? 0 : activeIndex;
+    }
+  });
 
-  const stepStates = $derived(() =>
+  const stepStates = $derived.by(() =>
     steps.map((_, i) => ({
-      completed: i + 1 < safeStep(),
-      current: i + 1 === safeStep(),
+      completed: i < activeStep,
+      current: i === activeStep,
     })),
   );
 </script>
@@ -45,7 +58,7 @@
 <nav class="mc-stepper-inline" aria-label="Stepper" {...attrs}>
   <ol class="mc-stepper-inline__container">
     {#each steps as step, i (i)}
-      {@const state = stepStates()[i]}
+      {@const state = stepStates[i]}
       <li class={['mc-stepper-inline__item', state.completed ? 'is-completed' : '']}>
         {#if state.completed}
           <span class="mc-stepper-inline__icon mc-stepper-inline__icon--check" aria-hidden="true">

package/dist/components/stepperinline/StepperInline.svelte.d.ts

@@ -4,13 +4,21 @@
 interface Props {
     [key: string]: any;
     /**
-     * Current step of the stepper compact.
+     * Defines the currently active step.
+     *
+     * - If a `number` is provided, it represents the 1-based position of the step
+     *   in the `steps` array (e.g. `1` for the first step).
+     * - If a `string` is provided, it must match the `id` of one of the steps.
      */
-    step?: number;
+    step?: number | string;
     /**
      * Steps of the stepper inline.
      */
     steps?: Array<{
+        /**
+         * Uniquer identifier for the step.
+         */
+        id?: string;
         /**
          * Label of the step.
          */

package/dist/components/stepperinline/StepperInline.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepperInline.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/stepperinline/StepperInline.svelte.ts"],"names":[],"mappings":"AAME;;GAEG;AAEH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;QACZ;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC,CAAC;CACJ;AAqDH,QAAA,MAAM,aAAa,yDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"StepperInline.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/stepperinline/StepperInline.svelte.ts"],"names":[],"mappings":"AAME;;GAEG;AAEH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;QACZ;;WAEG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC,CAAC;CACJ;AA4DH,QAAA,MAAM,aAAa,yDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/stepperstacked/README.md

@@ -0,0 +1,15 @@
+# `m-stepper-stacked`
+
+A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `step` | Defines the currently active step.
+
+- If a `number` is provided, it represents the 1-based position of the step
+  in the `steps` array (e.g. `1` for the first step).
+- If a `string` is provided, it must match the `id` of one of the steps. | `string` `number` | `$bindable(1)` |
+| `steps` | Steps of the stepper stacked. | `Array<{ id?: string; label: string; additionalinfo?: string; }>` | `$bindable([])` |
+

package/dist/components/stepperstacked/StepperStacked.js

@@ -0,0 +1,18 @@
+import{c as J,e as K,a as L,p as $,g as N,b as v,d as O,f,l as P,h as o,m as j,i as t,r,s as C,t as I,j as u,n as k,k as M,w}from"../../custom-element.js";import{i as Q}from"../../if.js";import{e as R,i as T}from"../../each.js";import{a as U}from"../../attributes.js";import{f as V}from"../../Condition20.js";import"../../branches.js";var W=f('<span class="mc-stepper-stacked__icon mc-stepper-stacked__icon--check svelte-wnz47h"><!></span>'),Y=f("<span></span>"),Z=f('<li><div class="mc-stepper-stacked__indicator svelte-wnz47h"><!></div> <div class="mc-stepper-stacked__content svelte-wnz47h"><span> </span> <span class="mc-stepper-stacked__additional svelte-wnz47h"> </span></div></li>'),ee=f('<nav><ol class="mc-stepper-stacked__container svelte-wnz47h"></ol></nav>');const te={hash:"svelte-wnz47h",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-stepper-stacked__container.svelte-wnz47h {display:flex;flex-direction:column;list-style:none;padding:0;margin:0;}.mc-stepper-stacked__indicator.svelte-wnz47h {display:flex;flex-direction:column;align-items:center;margin-right:0.5rem;position:relative;min-height:100%;padding-bottom:2rem;}.mc-stepper-stacked__indicator.svelte-wnz47h::after {content:"";position:absolute;top:1.5rem;bottom:0;width:0.125rem;background-color:var(--stepper-color-progress-bar-background, #c9d0de);left:50%;transform:translateX(-50%);}.mc-stepper-stacked__circle.svelte-wnz47h {box-sizing:border-box;width:1.5rem;height:1.5rem;border-radius:50%;border:0.125rem solid var(--stepper-color-step-item-default-border, #333333);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-bold, 700);color:var(--stepper-color-information, #666666);background-color:var(--stepper-color-step-item-default-background, #ffffff);z-index:1;flex-shrink:0;transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease;}.mc-stepper-stacked__circle.is-current.svelte-wnz47h {background-color:var(--stepper-color-step-item-active-background, #117f03);border-color:var(--stepper-color-step-item-active-background, #117f03);color:var(--stepper-color-step-item-active-text, #ffffff);
+  animation: svelte-wnz47h-pop-in 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}.mc-stepper-stacked__icon--check.svelte-wnz47h {width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;color:var(--stepper-color-step-item-default-icon, #666666);fill:currentcolor;border:0.125rem solid var(--stepper-color-step-item-default-border, #333333);border-radius:50%;box-sizing:border-box;background-color:var(--stepper-color-step-item-default-background, #ffffff);z-index:1;}.mc-stepper-stacked__content.svelte-wnz47h {display:flex;flex-direction:column;padding-top:0.25rem;}.mc-stepper-stacked__label.svelte-wnz47h {font-size:var(--font-size-100, 0.875rem);color:var(--stepper-color-step-label-default, #666666);line-height:var(--line-height-s, 1.3);transition:color 200ms ease;}.mc-stepper-stacked__label.is-current.svelte-wnz47h {font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-step-label-active, #000000);}.mc-stepper-stacked__additional.svelte-wnz47h {font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);margin-top:0.25rem;}.mc-stepper-stacked__item.svelte-wnz47h {display:flex;position:relative;}.mc-stepper-stacked__item.has-additional.svelte-wnz47h .mc-stepper-stacked__indicator:where(.svelte-wnz47h),
+.mc-stepper-stacked__item.has-additional.svelte-wnz47h .mc-stepper-stacked__content:where(.svelte-wnz47h) {padding-bottom:1rem;}.mc-stepper-stacked__item.svelte-wnz47h:last-child .mc-stepper-stacked__indicator:where(.svelte-wnz47h),
+.mc-stepper-stacked__item.svelte-wnz47h:last-child .mc-stepper-stacked__content:where(.svelte-wnz47h) {padding-bottom:0;}.mc-stepper-stacked__item.svelte-wnz47h:last-child .mc-stepper-stacked__indicator:where(.svelte-wnz47h)::after {display:none;}
+
+@keyframes svelte-wnz47h-pop-in {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}`};function se(b,p){K(p,!0),L(b,te);let i=$(p,"step",15,1),n=$(p,"steps",31,()=>N([])),D=P(p,["$$slots","$$events","$$legacy","$$host","step","steps"]);const z=w(()=>{if(typeof i()=="number")return Math.min(Math.max(i(),1),n().length)-1;{const e=n().findIndex(s=>s.id===i());return e===-1?0:e}}),E=w(()=>()=>n().map((e,s)=>({completed:s<t(z),current:s===t(z)})));var X={get step(){return i()},set step(e=1){i(e),j()},get steps(){return n()},set steps(e=[]){n(e),j()}},l=ee();U(l,()=>({class:"mc-stepper-stacked","aria-label":"Stepper",...D}),void 0,void 0,void 0,"svelte-wnz47h");var g=o(l);return R(g,21,n,T,(e,s,x,re)=>{const _=w(()=>t(E)()[x]);var d=Z(),h=o(d),q=o(h);{var A=c=>{var a=W(),H=o(a);V(H,{}),r(a),v(c,a)},B=c=>{var a=Y();a.textContent=x+1,I(()=>u(a,1,k({"mc-stepper-stacked__circle":!0,"is-current":t(_).current}),"svelte-wnz47h")),v(c,a)};Q(q,c=>{t(_).completed?c(A):c(B,-1)})}r(h);var y=C(h,2),m=o(y),F=o(m,!0);r(m);var S=C(m,2),G=o(S,!0);r(S),r(y),r(d),I(()=>{u(d,1,k({"mc-stepper-stacked__item":!0,"has-additional":t(s).additionalinfo}),"svelte-wnz47h"),u(m,1,k({"mc-stepper-stacked__label":!0,"is-current":t(_).current}),"svelte-wnz47h"),M(F,t(s).label),M(G,t(s).additionalinfo)}),v(e,d)}),r(g),r(l),v(b,l),O(X)}customElements.define("m-stepper-stacked",J(se,{step:{},steps:{}},[],[],{mode:"open"}));
+//# sourceMappingURL=StepperStacked.js.map

package/dist/components/stepperstacked/StepperStacked.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperStacked.js","sources":["../../../src/components/stepperstacked/StepperStacked.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-stepper-stacked' }} />\n\n<script lang=\"ts\">\n  import { Check24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.\n   */\n\n  interface Props {\n    [key: string]: any;\n    /**\n     * Defines the currently active step.\n     *\n     * - If a `number` is provided, it represents the 1-based position of the step\n     *   in the `steps` array (e.g. `1` for the first step).\n     * - If a `string` is provided, it must match the `id` of one of the steps.\n     */\n    step?: string | number;\n\n    /**\n     * Steps of the stepper stacked.\n     */\n    steps?: Array<{\n      /**\n       * Unique identifier for the step.\n       */\n      id?: string;\n      /**\n       * Label of the step.\n       */\n      label: string;\n\n      /**\n       * Optional additional information under the label.\n       */\n      additionalinfo?: string;\n    }>;\n  }\n\n  let { step = $bindable(1), steps = $bindable([]), ...attrs }: Props = $props();\n\n  const activeStep = $derived.by(() => {\n    if (typeof step === 'number') {\n      return Math.min(Math.max(step, 1), steps.length) - 1;\n    } else {\n      const activeIndex = steps.findIndex((el) => el.id === step);\n      return activeIndex === -1 ? 0 : activeIndex;\n    }\n  });\n\n  const stepStates = $derived(() =>\n    steps.map((_, i) => ({\n      completed: i < activeStep,\n      current: i === activeStep,\n    })),\n  );\n</script>\n\n<nav class=\"mc-stepper-stacked\" aria-label=\"Stepper\" {...attrs}>\n  <ol class=\"mc-stepper-stacked__container\">\n    {#each steps as step, index (index)}\n      {@const state = stepStates()[index]}\n      <li\n        class={{\n          'mc-stepper-stacked__item': true,\n          'has-additional': step.additionalinfo,\n        }}\n      >\n        <div class=\"mc-stepper-stacked__indicator\">\n          {#if state.completed}\n            <span class=\"mc-stepper-stacked__icon mc-stepper-stacked__icon--check\">\n              <Check24 />\n            </span>\n          {:else}\n            <span\n              class={{\n                'mc-stepper-stacked__circle': true,\n                'is-current': state.current,\n              }}\n            >\n              {index + 1}\n            </span>\n          {/if}\n        </div>\n        <div class=\"mc-stepper-stacked__content\">\n          <span\n            class={{\n              'mc-stepper-stacked__label': true,\n              'is-current': state.current,\n            }}\n          >\n            {step.label}\n          </span>\n          <span class=\"mc-stepper-stacked__additional\">\n            {step.additionalinfo}\n          </span>\n        </div>\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/stepper-stacked';\n</style>\n"],"names":["step","steps","$.prop","$$props","$.proxy","attrs","$.rest_props","activeStep","$.derived","activeIndex","el","stepStates","_","i","$.get","nav","root","ol","$.index","$$anchor","index","$$array","state","li","root_1","div","$.child","span","root_2","Check24","node_1","span_1","root_3","$.append","$$render","consequent","alternate","div_1","span_2","text","$.reset","span_3","$.sibling","$.set_text","text_1"],"mappings":";;;;;;;;;;;;;;;;oBAEA,iBAqCQ,IAAAA,gBAAiB,CAAC,EAAGC,EAAKC,EAAAC,EAAA,QAAA,GAAA,IAAAC,EAAA,CAAA,CAAA,CAAA,EAAqBC,EAAKC,EAAAH,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,OAAA,OAAA,CAAA,EAEpD,MAAAI,EAAUC,EAAA,IAAqB,WACxBR,EAAI,GAAK,SACX,OAAA,KAAK,IAAI,KAAK,IAAIA,IAAM,CAAC,EAAGC,IAAM,MAAM,EAAI,EAC9C,OACCQ,EAAcR,EAAK,EAAC,UAAWS,GAAOA,EAAG,KAAOV,GAAI,EACnD,OAAAS,IAAW,GAAU,EAAIA,CAClC,CACF,CAAC,EAEKE,YACJV,EAAK,EAAC,IAAG,CAAEW,EAAGC,KAAC,CACb,UAAWA,EAACC,EAAGP,CAAU,EACzB,QAASM,IAACC,EAAKP,CAAU,+CAdN,EAAC,8DAmBzBQ,EAAGC,GAAA,IAAHD,6DAAwDV,0CACtD,IAAAY,IADFF,CAAG,WACDE,EAAE,GACMhB,EAAKiB,EAAA,CAAAC,EAAInB,EAAIoB,EAAAC,KAAA,OACVC,EAAKd,EAAA,IAAAM,EAAGH,CAAU,EAAA,EAAGS,CAAK,CAAA,EACjC,IAAAG,EAAAC,EAAA,EAMEC,EAAGC,EANLH,CAAA,MAMEE,CAAG,iBAECE,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAOC,EAAA,EAAA,IADTH,CAAI,MAAJA,CAAI,SAIJ,IAAAI,EAAAC,EAAA,EAAAD,EAAA,YAMEX,EAAQ,UANVW,OAEG,6BAA8B,GAC9B,aAAYjB,EAAEQ,CAAK,EAAC,4BAHvBW,EAAAd,EAAAY,CAAA,WALEjB,EAAAQ,CAAK,EAAC,UAASY,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADrBX,CAAG,EAgBH,IAAAY,IAhBAZ,EAAG,CAAA,EAiBDa,EAAAZ,EADFW,CAAG,EACDE,EAAAb,EAAAY,EAAA,EAAA,EAAAE,EAAAF,CAAA,EAQA,IAAAG,EAAIC,EARJJ,EAAA,CAAA,MAQAG,EAAI,EAAA,IAAJA,CAAI,IATNJ,CAAG,EAtBLG,EAAAjB,CAAA,WAAAA,OAEG,2BAA4B,GAC5B,iBAAgBT,EAAEd,CAAI,EAAC,oCAoBtBsC,OAEG,4BAA6B,GAC7B,aAAYxB,EAAEQ,CAAK,EAAC,2BAGrBqB,EAAAJ,EAAAzB,EAAAd,CAAI,EAAC,KAAK,EAGV2C,EAAAC,EAAA9B,EAAAd,CAAI,EAAC,cAAc,IAhCzBiC,EAAAd,EAAAI,CAAA,MAHJN,CAAE,IADJF,CAAG,MAAHA,CAAG,MAFI"}

package/dist/components/stepperstacked/StepperStacked.spec.js

@@ -0,0 +1,138 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import StepperStacked from './StepperStacked.svelte';
+const defaultSteps = [
+    { label: 'Step 1', additionalinfo: 'Info 1' },
+    { label: 'Step 2', additionalinfo: 'Info 2' },
+    { label: 'Step 3' },
+];
+describe('StepperStacked', () => {
+    it('renders the correct number of list items', () => {
+        render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
+        const items = screen.getAllByRole('listitem');
+        expect(items).toHaveLength(defaultSteps.length);
+    });
+    it('renders step labels', () => {
+        render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
+        defaultSteps.forEach(({ label }) => {
+            expect(screen.getByText(label)).toBeTruthy();
+        });
+    });
+    it('renders additionalinfo when provided', () => {
+        render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
+        expect(screen.getByText('Info 1')).toBeTruthy();
+        expect(screen.getByText('Info 2')).toBeTruthy();
+    });
+    it('adds has-additional class on items with additionalinfo', () => {
+        const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
+        const items = container.querySelectorAll('li.mc-stepper-stacked__item');
+        expect(items[0].classList.contains('has-additional')).toBe(true);
+        expect(items[1].classList.contains('has-additional')).toBe(true);
+        expect(items[2].classList.contains('has-additional')).toBe(false);
+    });
+    it('renders nothing when steps is empty', () => {
+        const { container } = render(StepperStacked, { props: { steps: [], step: 1 } });
+        const items = container.querySelectorAll('li');
+        expect(items).toHaveLength(0);
+    });
+    describe('active step as number - 1 based', () => {
+        it('marks the current step circle with is-current class', () => {
+            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 2 } });
+            const currentCircles = container.querySelectorAll('.mc-stepper-stacked__circle.is-current');
+            expect(currentCircles).toHaveLength(1);
+            expect(currentCircles[0].textContent?.trim()).toBe('2');
+        });
+        it('marks the current step label with is-current class', () => {
+            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 2 } });
+            const currentLabels = container.querySelectorAll('.mc-stepper-stacked__label.is-current');
+            expect(currentLabels).toHaveLength(1);
+            expect(currentLabels[0].textContent?.trim()).toBe('Step 2');
+        });
+        it('renders check icon for completed steps', () => {
+            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 3 } });
+            const checkIcons = container.querySelectorAll('.mc-stepper-stacked__icon--check');
+            expect(checkIcons).toHaveLength(2);
+        });
+        it('renders no check icon when on step 1', () => {
+            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
+            const checkIcons = container.querySelectorAll('.mc-stepper-stacked__icon--check');
+            expect(checkIcons).toHaveLength(0);
+        });
+        it('renders circles (not checks) for incomplete and upcoming steps', () => {
+            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 2 } });
+            const circles = container.querySelectorAll('.mc-stepper-stacked__circle');
+            expect(circles).toHaveLength(2);
+        });
+        it('circle text reflects 1-based step index', () => {
+            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
+            const circles = container.querySelectorAll('.mc-stepper-stacked__circle');
+            expect(circles[0].textContent?.trim()).toBe('1');
+            expect(circles[1].textContent?.trim()).toBe('2');
+            expect(circles[2].textContent?.trim()).toBe('3');
+        });
+        it('clamps step below 1 to 1', () => {
+            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 0 } });
+            const currentCircles = container.querySelectorAll('.mc-stepper-stacked__circle.is-current');
+            expect(currentCircles[0].textContent?.trim()).toBe('1');
+        });
+        it('clamps step above steps.length to last step', () => {
+            const { container } = render(StepperStacked, {
+                props: { steps: defaultSteps, step: 99 },
+            });
+            const currentLabels = container.querySelectorAll('.mc-stepper-stacked__label.is-current');
+            expect(currentLabels[0].textContent?.trim()).toBe('Step 3');
+            const checkIcons = container.querySelectorAll('.mc-stepper-stacked__icon--check');
+            expect(checkIcons).toHaveLength(defaultSteps.length - 1);
+        });
+        it('defaults to step=1 and empty steps without props', () => {
+            const { container } = render(StepperStacked, { props: {} });
+            expect(container.querySelectorAll('li')).toHaveLength(0);
+        });
+        it('handles a single step correctly', () => {
+            const { container } = render(StepperStacked, {
+                props: { steps: [{ label: 'Only step' }], step: 1 },
+            });
+            const items = container.querySelectorAll('li');
+            expect(items).toHaveLength(1);
+            const currentCircles = container.querySelectorAll('.mc-stepper-stacked__circle.is-current');
+            expect(currentCircles).toHaveLength(1);
+        });
+    });
+    describe('Active step as string (id-based)', () => {
+        const stepsWithIds = [
+            { id: 'first', label: 'Step 1', additionalinfo: 'Info 1' },
+            { id: 'second', label: 'Step 2' },
+            { id: 'third', label: 'Step 3' },
+        ];
+        it('marks the correct step as current when step matches an id', () => {
+            const { container } = render(StepperStacked, {
+                props: { steps: stepsWithIds, step: 'second' },
+            });
+            const currentLabels = container.querySelectorAll('.mc-stepper-stacked__label.is-current');
+            expect(currentLabels).toHaveLength(1);
+            expect(currentLabels[0].textContent?.trim()).toBe('Step 2');
+        });
+        it('marks previous steps as completed when step is identified by id', () => {
+            const { container } = render(StepperStacked, {
+                props: { steps: stepsWithIds, step: 'third' },
+            });
+            const checkIcons = container.querySelectorAll('.mc-stepper-stacked__icon--check');
+            expect(checkIcons).toHaveLength(2);
+        });
+        it('falls back to the first step when the string id does not match any step', () => {
+            const { container } = render(StepperStacked, {
+                props: { steps: stepsWithIds, step: 'unknown-id' },
+            });
+            const currentCircles = container.querySelectorAll('.mc-stepper-stacked__circle.is-current');
+            expect(currentCircles).toHaveLength(1);
+            expect(currentCircles[0].textContent?.trim()).toBe('1');
+        });
+        it('renders no completed steps when the first step is active via id', () => {
+            const { container } = render(StepperStacked, {
+                props: { steps: stepsWithIds, step: 'first' },
+            });
+            const checkIcons = container.querySelectorAll('.mc-stepper-stacked__icon--check');
+            expect(checkIcons).toHaveLength(0);
+        });
+    });
+});

package/dist/components/stepperstacked/StepperStacked.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './StepperStacked.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const AditionnalInfo: Story;
+//# sourceMappingURL=StepperStacked.stories.d.ts.map

package/dist/components/stepperstacked/StepperStacked.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperStacked.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stepperstacked/StepperStacked.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yBAAyB,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAmBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,EAAE,KAS5B,CAAC"}

package/dist/components/stepperstacked/StepperStacked.stories.js

@@ -0,0 +1,33 @@
+import { html } from 'lit';
+import './StepperStacked.svelte';
+const meta = {
+    title: 'Indicators/Stepper Stacked',
+    component: 'm-stepper-stacked',
+    argTypes: {
+        step: {
+            control: { type: 'number', min: 1, max: 10 },
+        },
+    },
+    args: {
+        step: 2,
+        steps: [
+            { label: 'Cart' },
+            { label: 'Delivery address' },
+            { label: 'Payment' },
+            { label: 'Order confirmation' },
+        ],
+    },
+    render: (args) => html `<m-stepper-stacked .step="${args.step}" .steps="${args.steps}"></m-stepper-stacked>`,
+};
+export default meta;
+export const Default = {};
+export const AditionnalInfo = {
+    args: {
+        steps: [
+            { label: 'Cart', additionalinfo: 'Additional information' },
+            { label: 'Delivery address', additionalinfo: 'Additional information' },
+            { label: 'Payment', additionalinfo: 'Additional information' },
+            { label: 'Order confirmation', additionalinfo: 'Additional information' },
+        ],
+    },
+};