@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/stepperinline/StepperInline.js

@@ -1,6 +1,6 @@
-import{c as H,p as J,a as K,b as $,k as L,f as a,g as N,h as l,i as O,d as i,j as C,r as s,n as t,s as j,t as M,l as g,m as x,e as P,v as y}from"../../custom-element.js";import{i as D}from"../../if.js";import{e as Q,i as T}from"../../each.js";import{a as U}from"../../attributes.js";import{e as V,f as W}from"../../Condition20.js";import"../../branches.js";var X=l('<span class="mc-stepper-inline__icon mc-stepper-inline__icon--check svelte-s80odb" aria-hidden="true"><!></span>'),Y=l("<span></span>"),Z=l('<span class="mc-stepper-inline__icon mc-stepper-inline__icon--chevron svelte-s80odb" aria-hidden="true"><!></span>'),ee=l('<li><!> <div class="mc-stepper-inline__content svelte-s80odb"><span> </span></div> <!></li>'),re=l('<nav><ol class="mc-stepper-inline__container svelte-s80odb"></ol></nav>');const te={hash:"svelte-s80odb",code:`/**
+import{c as H,e as J,a as K,p as $,g as L,b as p,d as N,f as c,n as O,h as a,m as C,i as s,s as I,r as n,t as j,j as g,l as x,k as P,w as y}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as Q,i as T}from"../../each.js";import{a as U}from"../../attributes.js";import{f as V,g as W}from"../../Condition20.js";import"../../branches.js";var X=c('<span class="mc-stepper-inline__icon mc-stepper-inline__icon--check svelte-s80odb" aria-hidden="true"><!></span>'),Y=c("<span></span>"),Z=c('<span class="mc-stepper-inline__icon mc-stepper-inline__icon--chevron svelte-s80odb" aria-hidden="true"><!></span>'),ee=c('<li><!> <div class="mc-stepper-inline__content svelte-s80odb"><span> </span></div> <!></li>'),re=c('<nav><ol class="mc-stepper-inline__container svelte-s80odb"></ol></nav>');const te={hash:"svelte-s80odb",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-stepper-inline__container.svelte-s80odb {display:flex;align-items:center;gap:1rem;list-style:none;padding:0;margin:0;}.mc-stepper-inline__label.svelte-s80odb {font-size:var(--font-size-100, 0.875rem);transition:color 200ms ease;}.mc-stepper-inline__label.is-current.svelte-s80odb {font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-step-label-active, #000000);}.mc-stepper-inline__item.svelte-s80odb {display:inline-flex;align-items:center;gap:0.5rem;color:var(--stepper-color-step-label-default, #666666);}.mc-stepper-inline__item.is-completed.svelte-s80odb:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;border-radius:var(--border-radius-s, 0.25rem);}.mc-stepper-inline__item.is-completed.svelte-s80odb:hover {cursor:pointer;}.mc-stepper-inline__item.is-completed.svelte-s80odb:hover .mc-stepper-inline__label:where(.svelte-s80odb) {text-decoration:underline;}.mc-stepper-inline__icon.svelte-s80odb {fill:var(--stepper-color-information, #666666);display:flex;flex-shrink:0;}.mc-stepper-inline__icon--check.svelte-s80odb {box-sizing:border-box;width:1.5rem;height:1.5rem;background-color:transparent;border:0.125rem solid var(--stepper-color-information, #666666);border-radius:1rem;}.mc-stepper-inline__icon--chevron.svelte-s80odb {width:1.25rem;height:1.25rem;}.mc-stepper-inline__circle.svelte-s80odb {box-sizing:border-box;width:1.5rem;height:1.5rem;border-radius:50%;border:0.125rem solid var(--stepper-color-information, #666666);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-information, #666666);background-color:var(--stepper-color-step-item-default-background, #ffffff);flex-shrink:0;transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease;}.mc-stepper-inline__circle.is-current.svelte-s80odb {background-color:var(--stepper-color-step-item-active-background, #117f03);color:var(--stepper-color-step-item-active-text, #ffffff);border-color:transparent;
+ */.mc-stepper-inline__container.svelte-s80odb {display:flex;align-items:center;gap:1rem;list-style:none;padding:0;margin:0;}.mc-stepper-inline__label.svelte-s80odb {font-size:var(--font-size-100, 0.875rem);transition:color 200ms ease;}.mc-stepper-inline__label.is-current.svelte-s80odb {font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-step-label-active, #000000);}.mc-stepper-inline__item.svelte-s80odb {display:inline-flex;align-items:center;gap:0.5rem;color:var(--stepper-color-step-label-default, #666666);}.mc-stepper-inline__item.is-completed.svelte-s80odb:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;border-radius:var(--border-radius-s, 0.25rem);}.mc-stepper-inline__item.is-completed.svelte-s80odb:hover {cursor:pointer;}.mc-stepper-inline__item.is-completed.svelte-s80odb:hover .mc-stepper-inline__label:where(.svelte-s80odb) {text-decoration:underline;}.mc-stepper-inline__icon.svelte-s80odb {fill:var(--stepper-color-information, #666666);display:flex;flex-shrink:0;}.mc-stepper-inline__icon--check.svelte-s80odb {box-sizing:border-box;width:1.5rem;height:1.5rem;background-color:var(--stepper-color-step-item-default-background, #ffffff);border:0.125rem solid var(--stepper-color-information, #666666);border-radius:1rem;}.mc-stepper-inline__icon--chevron.svelte-s80odb {width:1.25rem;height:1.25rem;}.mc-stepper-inline__circle.svelte-s80odb {box-sizing:border-box;width:1.5rem;height:1.5rem;border-radius:50%;border:0.125rem solid var(--stepper-color-information, #666666);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-information, #666666);background-color:var(--stepper-color-step-item-default-background, #ffffff);flex-shrink:0;transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease;}.mc-stepper-inline__circle.is-current.svelte-s80odb {background-color:var(--stepper-color-step-item-active-background, #117f03);color:var(--stepper-color-step-item-active-text, #ffffff);border-color:transparent;
   animation: svelte-s80odb-pop-in 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}.mc-stepper-inline__content.svelte-s80odb {display:flex;flex-direction:column;margin-right:0.5rem;}.mc-stepper-inline__additional.svelte-s80odb {font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);}.mc-stepper-inline__separator.svelte-s80odb {color:var(--stepper-color-information, #666666);margin-left:1rem;}
 
 @keyframes svelte-s80odb-pop-in {
@@ -12,5 +12,5 @@ import{c as H,p as J,a as K,b as $,k as L,f as a,g as N,h as l,i as O,d as i,j a
     transform: scale(1);
     opacity: 1;
   }
-}.mc-stepper-inline__icon {align-items:center;}`};function se(k,p){J(p,!0),K(k,te);let f=$(p,"step",15,1),o=$(p,"steps",31,()=>L([])),E=O(p,["$$slots","$$events","$$legacy","$$host","step","steps"]);const w=y(()=>()=>Math.min(Math.max(f()??1,1),o().length??1)),I=y(()=>()=>o().map((n,m)=>({completed:m+1<t(w)(),current:m+1===t(w)()})));var R={get step(){return f()},set step(n=1){f(n),C()},get steps(){return o()},set steps(n=[]){o(n),C()}},c=re();U(c,()=>({class:"mc-stepper-inline","aria-label":"Stepper",...E}),void 0,void 0,void 0,"svelte-s80odb");var z=i(c);return Q(z,21,o,T,(n,m,_,oe)=>{const d=y(()=>t(I)()[_]);var v=ee(),S=i(v);{var q=r=>{var e=X(),h=i(e);V(h,{}),s(e),a(r,e)},A=r=>{var e=Y();e.textContent=_+1,M(()=>g(e,1,x(["mc-stepper-inline__circle",t(d).current?"is-current":""]),"svelte-s80odb")),a(r,e)};D(S,r=>{t(d).completed?r(q):r(A,!1)})}var b=j(S,2),u=i(b),B=i(u,!0);s(u),s(b);var F=j(b,2);{var G=r=>{var e=Z(),h=i(e);W(h,{}),s(e),a(r,e)};D(F,r=>{_<o().length-1&&r(G)})}s(v),M(()=>{g(v,1,x(["mc-stepper-inline__item",t(d).completed?"is-completed":""]),"svelte-s80odb"),g(u,1,x(["mc-stepper-inline__label",t(d).current?"is-current":""]),"svelte-s80odb"),P(B,t(m).label)}),a(n,v)}),s(z),s(c),a(k,c),N(R)}customElements.define("m-stepper-inline",H(se,{step:{},steps:{}},[],[],!0));
+}.mc-stepper-inline__icon {align-items:center;}`};function se(k,m){J(m,!0),K(k,te);let l=$(m,"step",15,0),o=$(m,"steps",31,()=>L([])),D=O(m,["$$slots","$$events","$$legacy","$$host","step","steps"]);const w=y(()=>{if(typeof l()=="number")return Math.min(Math.max(l(),1),o().length)-1;{const t=o().findIndex(i=>i.id===l());return t===-1?0:t}}),E=y(()=>o().map((t,i)=>({completed:i<s(w),current:i===s(w)})));var R={get step(){return l()},set step(t=0){l(t),C()},get steps(){return o()},set steps(t=[]){o(t),C()}},d=re();U(d,()=>({class:"mc-stepper-inline","aria-label":"Stepper",...D}),void 0,void 0,void 0,"svelte-s80odb");var z=a(d);return Q(z,21,o,T,(t,i,_,oe)=>{const v=y(()=>s(E)[_]);var f=ee(),S=a(f);{var q=r=>{var e=X(),h=a(e);V(h,{}),n(e),p(r,e)},A=r=>{var e=Y();e.textContent=_+1,j(()=>g(e,1,x(["mc-stepper-inline__circle",s(v).current?"is-current":""]),"svelte-s80odb")),p(r,e)};M(S,r=>{s(v).completed?r(q):r(A,-1)})}var b=I(S,2),u=a(b),B=a(u,!0);n(u),n(b);var F=I(b,2);{var G=r=>{var e=Z(),h=a(e);W(h,{}),n(e),p(r,e)};M(F,r=>{_<o().length-1&&r(G)})}n(f),j(()=>{g(f,1,x(["mc-stepper-inline__item",s(v).completed?"is-completed":""]),"svelte-s80odb"),g(u,1,x(["mc-stepper-inline__label",s(v).current?"is-current":""]),"svelte-s80odb"),P(B,s(i).label)}),p(t,f)}),n(z),n(d),p(k,d),N(R)}customElements.define("m-stepper-inline",H(se,{step:{},steps:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=StepperInline.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperInline.js","sources":["../../../src/components/stepperinline/StepperInline.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-stepper-inline' }} />\n\n<script lang=\"ts\">\n  import { Check24 } from '@mozaic-ds/icons-svelte';\n  import { ChevronRight24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * An inline stepper is a horizontal navigation component that displays a sequence of steps in a linear fashion. It helps users understand their progress through a multi-step process by visually indicating the current step, completed steps, and upcoming steps. Inline steppers are typically used in forms, onboarding flows, and checkout processes to enhance user experience and provide clarity on the workflow.\n   */\n\n  interface Props {\n    [key: string]: any;\n    /**\n     * Current step of the stepper compact.\n     */\n    step?: number;\n\n    /**\n     * Steps of the stepper inline.\n     */\n    steps?: Array<{\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 safeStep = $derived(() => Math.min(Math.max(step ?? 1, 1), steps.length ?? 1));\n\n  const stepStates = $derived(() =>\n    steps.map((_, i) => ({\n      completed: i + 1 < safeStep(),\n      current: i + 1 === safeStep(),\n    })),\n  );\n</script>\n\n<nav class=\"mc-stepper-inline\" aria-label=\"Stepper\" {...attrs}>\n  <ol class=\"mc-stepper-inline__container\">\n    {#each steps as step, i (i)}\n      {@const state = stepStates()[i]}\n      <li class={['mc-stepper-inline__item', state.completed ? 'is-completed' : '']}>\n        {#if state.completed}\n          <span class=\"mc-stepper-inline__icon mc-stepper-inline__icon--check\" aria-hidden=\"true\">\n            <Check24 />\n          </span>\n        {:else}\n          <span class={['mc-stepper-inline__circle', state.current ? 'is-current' : '']}>\n            {i + 1}\n          </span>\n        {/if}\n        <div class=\"mc-stepper-inline__content\">\n          <span class={['mc-stepper-inline__label', state.current ? 'is-current' : '']}>\n            {step.label}\n          </span>\n        </div>\n        {#if i < steps.length - 1}\n          <span class=\"mc-stepper-inline__icon mc-stepper-inline__icon--chevron\" aria-hidden=\"true\">\n            <ChevronRight24 />\n          </span>\n        {/if}\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/stepper-inline';\n\n  :global(.mc-stepper-inline__icon) {\n    align-items: center;\n  }\n</style>\n"],"names":["step","steps","$.prop","$$props","$.proxy","attrs","$.rest_props","safeStep","stepStates","_","i","nav","root","ol","$.index","$$anchor","$$array","state","$.derived","$.get","li","root_1","span","root_2","Check24","node_1","span_1","root_3","$$render","consequent","alternate","div","$.sibling","node","span_2","span_3","root_4","ChevronRight24","node_3","consequent_1","$.set_text","text"],"mappings":";;;;;;;;;;;;;;kEAEA,iBA8BQ,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,YAA0B,KAAK,IAAI,KAAK,IAAIP,EAAI,GAAI,EAAG,CAAC,EAAGC,EAAK,EAAC,QAAU,CAAC,CAAA,EAE5EO,YACJP,EAAK,EAAC,IAAG,CAAEQ,EAAGC,KAAC,CACb,UAAWA,EAAI,IAAIH,CAAQ,EAAA,EAC3B,QAASG,EAAI,MAAMH,CAAQ,EAAA,+CAPR,EAAC,8DAYzBI,EAAGC,GAAA,IAAHD,4DAAuDN,0CACrD,IAAAQ,IADFF,CAAG,WACDE,EAAE,GACMZ,EAAKa,EAAA,CAAAC,EAAIf,EAAIU,EAAAM,KAAA,OACVC,EAAKC,EAAA,IAAAC,EAAGX,CAAU,EAAA,EAAGE,CAAC,CAAA,MAC7BU,EAAEC,GAAA,MAAFD,CAAE,iBAEEE,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAOC,EAAA,EAAA,IADTH,CAAI,MAAJA,CAAI,aAIJI,EAAIC,EAAA,EAAJD,EAAI,YACFhB,EAAI,UADNgB,OAAa,4BAA6BP,EAAAF,CAAK,EAAC,QAAU,aAAe,2BAAzES,CAAI,WALFP,EAAAF,CAAK,EAAC,UAASW,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,QASnBC,EAAGC,EAAAC,EAAA,CAAA,EACDC,IADFH,CAAG,MACDG,EAAI,EAAA,IAAJA,CAAI,IADNH,CAAG,UAAHA,EAAG,CAAA,iBAMDI,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAcC,EAAA,EAAA,IADhBH,CAAI,MAAJA,CAAI,WADFzB,EAAIT,EAAK,EAAC,OAAS,GAAC2B,EAAAW,CAAA,MAf1BnB,CAAE,WAAFA,OAAW,0BAA2BD,EAAAF,CAAK,EAAC,UAAY,eAAiB,wBAWrEiB,OAAa,2BAA4Bf,EAAAF,CAAK,EAAC,QAAU,aAAe,sBACtEuB,EAAAC,EAAAtB,EAAAnB,CAAI,EAAC,KAAK,QAZhBoB,CAAE,MAHNP,CAAE,IADJF,CAAG,MAAHA,CAAG,MAFI"}
+{"version":3,"file":"StepperInline.js","sources":["../../../src/components/stepperinline/StepperInline.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-stepper-inline' }} />\n\n<script lang=\"ts\">\n  import { Check24 } from '@mozaic-ds/icons-svelte';\n  import { ChevronRight24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * An inline stepper is a horizontal navigation component that displays a sequence of steps in a linear fashion. It helps users understand their progress through a multi-step process by visually indicating the current step, completed steps, and upcoming steps. Inline steppers are typically used in forms, onboarding flows, and checkout processes to enhance user experience and provide clarity on the workflow.\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?: number | string;\n    /**\n     * Steps of the stepper inline.\n     */\n    steps?: Array<{\n      /**\n       * Uniquer identifier for the step.\n       */\n      id?: string;\n      /**\n       * Label of the step.\n       */\n      label: string;\n      /**\n       * Optional additional information under the label.\n       */\n      additionalinfo?: string;\n    }>;\n  }\n\n  let { step = $bindable(0), 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.by(() =>\n    steps.map((_, i) => ({\n      completed: i < activeStep,\n      current: i === activeStep,\n    })),\n  );\n</script>\n\n<nav class=\"mc-stepper-inline\" aria-label=\"Stepper\" {...attrs}>\n  <ol class=\"mc-stepper-inline__container\">\n    {#each steps as step, i (i)}\n      {@const state = stepStates[i]}\n      <li class={['mc-stepper-inline__item', state.completed ? 'is-completed' : '']}>\n        {#if state.completed}\n          <span class=\"mc-stepper-inline__icon mc-stepper-inline__icon--check\" aria-hidden=\"true\">\n            <Check24 />\n          </span>\n        {:else}\n          <span class={['mc-stepper-inline__circle', state.current ? 'is-current' : '']}>\n            {i + 1}\n          </span>\n        {/if}\n        <div class=\"mc-stepper-inline__content\">\n          <span class={['mc-stepper-inline__label', state.current ? 'is-current' : '']}>\n            {step.label}\n          </span>\n        </div>\n        {#if i < steps.length - 1}\n          <span class=\"mc-stepper-inline__icon mc-stepper-inline__icon--chevron\" aria-hidden=\"true\">\n            <ChevronRight24 />\n          </span>\n        {/if}\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/stepper-inline';\n\n  :global(.mc-stepper-inline__icon) {\n    align-items: center;\n  }\n</style>\n"],"names":["step","steps","$.prop","$$props","$.proxy","attrs","$.rest_props","activeStep","$.derived","activeIndex","el","stepStates","_","$.get","nav","root","ol","$.index","$$anchor","i","$$array","state","li","root_1","span","root_2","Check24","node_1","span_1","root_3","$$render","consequent","alternate","div","$.sibling","node","span_2","span_3","root_4","ChevronRight24","node_3","consequent_1","$.set_text","text"],"mappings":";;;;;;;;;;;;;;kEAEA,iBAoCQ,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,QACJV,EAAK,EAAC,IAAG,CAAEW,EAAG,KAAC,CACb,UAAW,EAACC,EAAGN,CAAU,EACzB,QAAS,IAACM,EAAKN,CAAU,+CAdN,EAAC,8DAmBzBO,EAAGC,GAAA,IAAHD,4DAAuDT,0CACrD,IAAAW,IADFF,CAAG,WACDE,EAAE,GACMf,EAAKgB,EAAA,CAAAC,EAAIlB,EAAImB,EAAAC,KAAA,OACVC,EAAKb,EAAA,IAAAK,EAAGF,CAAU,EAACQ,CAAC,CAAA,MAC3BG,EAAEC,GAAA,MAAFD,CAAE,iBAEEE,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAOC,EAAA,EAAA,IADTH,CAAI,MAAJA,CAAI,aAIJI,EAAIC,EAAA,EAAJD,EAAI,YACFT,EAAI,UADNS,OAAa,4BAA6Bf,EAAAQ,CAAK,EAAC,QAAU,aAAe,2BAAzEO,CAAI,WALFf,EAAAQ,CAAK,EAAC,UAASS,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,QASnBC,EAAGC,EAAAC,EAAA,CAAA,EACDC,IADFH,CAAG,MACDG,EAAI,EAAA,IAAJA,CAAI,IADNH,CAAG,UAAHA,EAAG,CAAA,iBAMDI,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAcC,EAAA,EAAA,IADhBH,CAAI,MAAJA,CAAI,WADFlB,EAAIlB,EAAK,EAAC,OAAS,GAAC6B,EAAAW,CAAA,MAf1BnB,CAAE,WAAFA,OAAW,0BAA2BT,EAAAQ,CAAK,EAAC,UAAY,eAAiB,wBAWrEe,OAAa,2BAA4BvB,EAAAQ,CAAK,EAAC,QAAU,aAAe,sBACtEqB,EAAAC,EAAA9B,EAAAb,CAAI,EAAC,KAAK,QAZhBsB,CAAE,MAHNN,CAAE,IADJF,CAAG,MAAHA,CAAG,MAFI"}

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">
@@ -117,7 +130,7 @@
   box-sizing: border-box;
   width: 1.5rem;
   height: 1.5rem;
-  background-color: transparent;
+  background-color: var(--stepper-color-step-item-default-background, #ffffff);
   border: 0.125rem solid var(--stepper-color-information, #666666);
   border-radius: 1rem;
 }

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.
          */
@@ -21,7 +29,7 @@ interface Props {
         additionalinfo?: string;
     }>;
 }
-declare const StepperInline: import("svelte").Component<Props, {}, "step" | "steps">;
+declare const StepperInline: import("svelte").Component<Props, {}, "steps" | "step">;
 type StepperInline = ReturnType<typeof StepperInline>;
 export default StepperInline;
 //# sourceMappingURL=StepperInline.svelte.d.ts.map

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,n as P,h as o,m as j,i as t,r,s as C,t as I,j as u,l 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' },
+        ],
+    },
+};