@mozaic-ds/web-components 1.3.0 → 1.4.0

package/dist/components/stepperbottombar/StepperBottomBar.svelte

@@ -0,0 +1,532 @@
+<svelte:options
+  customElement={{
+    tag: 'm-stepper-bottom-bar',
+    props: {
+      step: { reflect: true, type: 'Number', attribute: 'step' },
+      steps: { reflect: true, type: 'Number', attribute: 'steps' },
+      cancel: { reflect: true, type: 'Boolean', attribute: 'cancel' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import Button from '../button/Button.svelte';
+  import Divider from '../divider/Divider.svelte';
+  /**
+   * A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.
+   *
+   * @event cancel {CustomEvent<void>} - Emits when the cancel button is clicked.
+   * @event change {CustomEvent<number>} - Emits when the step change.
+   * @event validate {CustomEvent<void>} - Emits when the validate button is clicked.
+   */
+  interface Props {
+    /**
+     * Current step of the stepper bottom bar.
+     */
+    step?: number;
+    /**
+     * Total number of steps of the stepper bottom bar.
+     */
+    steps?: number;
+    /**
+     * If `true`, display the cancel button.
+     */
+    cancel?: boolean;
+    /**
+     * Label for the cancel button.
+     */
+    cancellabel?: string;
+    /**
+     * Label for the previous button.
+     */
+    previouslabel?: string;
+    /**
+     * Label for the next button.
+     */
+    nextlabel?: string;
+    /**
+     * Label for the validate button.
+     */
+    validatelabel?: string;
+  }
+
+  let {
+    step = $bindable(0),
+    steps = $bindable(0),
+    cancel = true,
+    cancellabel = 'Cancel',
+    previouslabel = 'Previous',
+    nextlabel = 'Next',
+    validatelabel = 'Validate',
+  }: Props = $props();
+
+  let element: HTMLElement;
+
+  function onCancel(): void {
+    const cencenEvent = new CustomEvent('cancel', {
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(cencenEvent);
+  }
+
+  function onPrevious(): void {
+    if (step > 0) {
+      step--;
+      const event = new CustomEvent('change', {
+        detail: step,
+        bubbles: true,
+        composed: true,
+      });
+      element.dispatchEvent(event);
+    }
+  }
+
+  function onNext(): void {
+    if (step < steps) {
+      step++;
+      const event = new CustomEvent('change', {
+        detail: step,
+        bubbles: true,
+        composed: true,
+      });
+      element.dispatchEvent(event);
+    } else {
+      const event = new CustomEvent('validate', {
+        bubbles: true,
+        composed: true,
+      });
+      element.dispatchEvent(event);
+    }
+  }
+</script>
+
+<div class="mc-stepper-bottom-bar" bind:this={element}>
+  <Divider />
+  <div class="mc-stepper-bottom-bar__left">
+    {#if cancel}
+      <span class="mc-stepper-bottom-bar__button--text">
+        <Button ghost size="s" onclick={onCancel}>
+          <span class="mc-button__label">{cancellabel}</span>
+        </Button>
+      </span>
+    {/if}
+  </div>
+
+  <div class="mc-stepper-bottom-bar__right">
+    {#if step > 0}
+      <span class="mc-stepper-bottom-bar__button">
+        <Button outlined size="s" onclick={onPrevious}>
+          <span class="mc-button__label">{previouslabel}</span>
+        </Button>
+      </span>
+    {/if}
+
+    <span class="mc-stepper-bottom-bar__button">
+      <Button appearance="accent" size="s" onclick={onNext}>
+        <span class="mc-button__label">
+          {step < steps ? nextlabel : validatelabel}
+        </span>
+      </Button>
+    </span>
+  </div>
+</div>
+
+<style scoped>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-stepper-bottom-bar {
+  position: fixed;
+  box-sizing: border-box;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--action-bottom-bar-color-background, #ffffff);
+  z-index: var(--stepper-bottom-bar-z-index, 3);
+}
+.mc-stepper-bottom-bar__divider {
+  width: 100%;
+}
+.mc-stepper-bottom-bar__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+@media screen and (min-width: 679px) {
+  .mc-stepper-bottom-bar__button--icon.mc-button {
+    display: none;
+  }
+}
+.mc-stepper-bottom-bar__button--text.mc-button {
+  display: none;
+}
+@media screen and (min-width: 679px) {
+  .mc-stepper-bottom-bar__button--text.mc-button {
+    display: block;
+  }
+}
+.mc-stepper-bottom-bar__left {
+  padding-left: 1.25rem;
+}
+@media screen and (min-width: 679px) {
+  .mc-stepper-bottom-bar__left {
+    padding-left: 0.5rem;
+  }
+}
+.mc-stepper-bottom-bar__right {
+  margin-left: auto;
+  padding: 0.25rem 0.5rem 0.25rem 0;
+  display: flex;
+  gap: 0.5rem;
+}
+@media screen and (min-width: 679px) {
+  .mc-stepper-bottom-bar__right {
+    padding: 0.5rem 1rem 0.5rem 0;
+  }
+}
+
+.mc-button {
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  border-radius: var(--button-border-radius-s, 0.25rem);
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: inherit;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button: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;
+}
+.mc-button--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.mc-button--s .mc-button__label {
+  font-size: var(--font-size-100, 0.875rem);
+}
+.mc-button--s .mc-button__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--s .mc-button__icon:only-child {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--m {
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button--m .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button--m .mc-button__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--m .mc-button__icon:only-child {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--l {
+  padding: 0 calc(1.25rem - 0.125rem);
+  min-height: 4rem;
+  min-width: 4rem;
+}
+.mc-button--l .mc-button__label {
+  font-size: var(--font-size-200, 1.125rem);
+}
+.mc-button--l .mc-button__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--l .mc-button__icon:only-child {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--icon-only {
+  padding: 0.25rem;
+}
+.mc-button--outlined {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--accent {
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
+}
+.mc-button--accent:hover {
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
+}
+.mc-button--accent:active {
+  background-color: var(--button-color-filled-accent-active-background, #035010);
+}
+.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--danger {
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
+}
+.mc-button--danger:hover {
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
+}
+.mc-button--danger:active {
+  background-color: var(--button-color-filled-danger-active-background, #530000);
+}
+.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--inverse {
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
+}
+.mc-button--inverse:hover {
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
+}
+.mc-button--inverse:active {
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
+}
+.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--icon-button {
+  border-radius: var(--border-radius-full, 100%);
+  padding: 0;
+}
+.mc-button--loading .mc-button__loader {
+  position: absolute;
+  color: currentcolor;
+}
+.mc-button--loading .mc-button__label,
+.mc-button--loading .mc-button__icon {
+  visibility: hidden;
+}
+.mc-button--outlined.mc-button--standard {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined.mc-button--standard:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined.mc-button--standard:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--accent {
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
+}
+.mc-button--outlined.mc-button--accent:hover {
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
+}
+.mc-button--outlined.mc-button--accent:active {
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
+}
+.mc-button--outlined.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--danger {
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
+}
+.mc-button--outlined.mc-button--danger:hover {
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
+}
+.mc-button--outlined.mc-button--danger:active {
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
+}
+.mc-button--outlined.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--inverse {
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--outlined.mc-button--inverse:hover {
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--outlined.mc-button--inverse:active {
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--outlined.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--standard {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--standard:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost.mc-button--standard:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--accent {
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--accent:hover {
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
+}
+.mc-button--ghost.mc-button--accent:active {
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
+}
+.mc-button--ghost.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--danger {
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--danger:hover {
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
+}
+.mc-button--ghost.mc-button--danger:active {
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
+}
+.mc-button--ghost.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--inverse {
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--inverse:hover {
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--ghost.mc-button--inverse:active {
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--ghost.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+
+:global(.mc-divider) {
+  width: 100%;
+}</style>

package/dist/components/stepperbottombar/StepperBottomBar.svelte.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.
+ *
+ * @event cancel {CustomEvent<void>} - Emits when the cancel button is clicked.
+ * @event change {CustomEvent<number>} - Emits when the step change.
+ * @event validate {CustomEvent<void>} - Emits when the validate button is clicked.
+ */
+interface Props {
+    /**
+     * Current step of the stepper bottom bar.
+     */
+    step?: number;
+    /**
+     * Total number of steps of the stepper bottom bar.
+     */
+    steps?: number;
+    /**
+     * If `true`, display the cancel button.
+     */
+    cancel?: boolean;
+    /**
+     * Label for the cancel button.
+     */
+    cancellabel?: string;
+    /**
+     * Label for the previous button.
+     */
+    previouslabel?: string;
+    /**
+     * Label for the next button.
+     */
+    nextlabel?: string;
+    /**
+     * Label for the validate button.
+     */
+    validatelabel?: string;
+}
+declare const StepperBottomBar: import("svelte").Component<Props, {}, "step" | "steps">;
+type StepperBottomBar = ReturnType<typeof StepperBottomBar>;
+export default StepperBottomBar;
+//# sourceMappingURL=StepperBottomBar.svelte.d.ts.map

package/dist/components/stepperbottombar/StepperBottomBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperBottomBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/stepperbottombar/StepperBottomBar.svelte.ts"],"names":[],"mappings":"AAME;;;;;;GAMG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAqGH,QAAA,MAAM,gBAAgB,yDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/steppercompact/StepperCompact.js

@@ -1,4 +1,4 @@
-import{c as E,p as M,a as q,b as p,f as w,n as l,D as m,d as s,s as b,t as f,h as x,i as A,j as n,e as a,g as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{C as F}from"../circularprogressbar/CircularProgressbar.js";import"../../attributes.js";var G=w('<p class="mc-stepper-compact__description svelte-1o3m5eh"> </p>'),H=w('<div class="mc-stepper-compact svelte-1o3m5eh"><div class="mc-circular-progressbar mc-stepper-compact__progress svelte-1o3m5eh"><!></div> <div class="mc-stepper-compact__label-container"><p class="mc-stepper-compact__label svelte-1o3m5eh"> </p> <!></div></div>');const I={hash:"svelte-1o3m5eh",code:`/**
+import{c as D,p as E,a as M,b as p,q as l,s as b,t as f,f as x,g as A,h as w,x as m,d as s,j as n,r as a,e as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{C as F}from"../circularprogressbar/CircularProgressbar.js";import"../../attributes.js";var G=w('<p class="mc-stepper-compact__description svelte-1o3m5eh"> </p>'),H=w('<div class="mc-stepper-compact svelte-1o3m5eh"><div class="mc-circular-progressbar mc-stepper-compact__progress svelte-1o3m5eh"><!></div> <div class="mc-stepper-compact__label-container"><p class="mc-stepper-compact__label svelte-1o3m5eh"> </p> <!></div></div>');const I={hash:"svelte-1o3m5eh",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-stepper-compact.svelte-1o3m5eh {display:inline-flex;justify-content:start;align-items:center;}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__label.svelte-1o3m5eh, .mc-stepper-compact__description.svelte-1o3m5eh {padding-left:0.5rem;}.mc-stepper-compact__label.svelte-1o3m5eh {margin:0;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);color:var(--progressbar-color-text, #000000);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__description.svelte-1o3m5eh {margin:0.25rem 0 0;font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__content {display:block !important;visibility:visible;font-weight:600;font-size:0.875rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__number {display:block;visibility:visible;opacity:1;color:inherit;font-size:inherit;line-height:inherit;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__indicator {stroke-width:calc(4 / (48 / 100));stroke:var(--stepper-color-progress-bar-indicator, #117f03);fill:none;stroke-linecap:round;}`};function J(g,r){M(r,!0),q(g,I);let o=p(r,"value",15,1),c=p(r,"maxsteps",15,4),v=p(r,"label",7),i=p(r,"description",7);const z=m(()=>()=>{const e=o()??0,t=c()??1;return Math.round(e/t*100)}),k=m(()=>()=>`${o()} / ${c()}`);var C={get value(){return o()},set value(e=1){o(e),n()},get maxsteps(){return c()},set maxsteps(e=4){c(e),n()},get label(){return v()},set label(e){v(e),n()},get description(){return i()},set description(e){i(e),n()}},_=H(),h=s(_),j=s(h);{let e=m(()=>l(k)()),t=m(()=>l(z)());F(j,{"aria-label":"Progress bar",type:"content",size:"m",get contentvalue(){return l(e)},get value(){return l(t)},class:"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number"})}a(h);var u=b(h,2),d=s(u),D=s(d,!0);a(d);var P=b(d,2);{var S=e=>{var t=G(),V=s(t,!0);a(t),f(()=>y(V,i())),x(e,t)};B(P,e=>{i()&&e(S)})}return a(u),a(_),f(()=>y(D,v())),x(g,_),A(C)}customElements.define("m-stepper-compact",E(J,{value:{},maxsteps:{},label:{},description:{}},[],[],!0));
+ */.mc-stepper-compact.svelte-1o3m5eh {display:inline-flex;justify-content:start;align-items:center;}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__label.svelte-1o3m5eh, .mc-stepper-compact__description.svelte-1o3m5eh {padding-left:0.5rem;}.mc-stepper-compact__label.svelte-1o3m5eh {margin:0;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);color:var(--progressbar-color-text, #000000);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__description.svelte-1o3m5eh {margin:0.25rem 0 0;font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__content {display:block !important;visibility:visible;font-weight:600;font-size:0.875rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__number {display:block;visibility:visible;opacity:1;color:inherit;font-size:inherit;line-height:inherit;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__indicator {stroke-width:calc(4 / (48 / 100));stroke:var(--stepper-color-progress-bar-indicator, #117f03);fill:none;stroke-linecap:round;}`};function J(g,r){E(r,!0),M(g,I);let o=p(r,"value",15,1),c=p(r,"maxsteps",15,4),v=p(r,"label",7),i=p(r,"description",7);const z=m(()=>()=>{const e=o()??0,t=c()??1;return Math.round(e/t*100)}),k=m(()=>()=>`${o()} / ${c()}`);var C={get value(){return o()},set value(e=1){o(e),n()},get maxsteps(){return c()},set maxsteps(e=4){c(e),n()},get label(){return v()},set label(e){v(e),n()},get description(){return i()},set description(e){i(e),n()}},_=H(),h=s(_),j=s(h);{let e=m(()=>l(k)()),t=m(()=>l(z)());F(j,{"aria-label":"Progress bar",type:"content",size:"m",get contentvalue(){return l(e)},get value(){return l(t)},class:"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number"})}a(h);var u=b(h,2),d=s(u),P=s(d,!0);a(d);var S=b(d,2);{var V=e=>{var t=G(),q=s(t,!0);a(t),f(()=>y(q,i())),x(e,t)};B(S,e=>{i()&&e(V)})}return a(u),a(_),f(()=>y(P,v())),x(g,_),A(C)}customElements.define("m-stepper-compact",D(J,{value:{},maxsteps:{},label:{},description:{}},[],[],!0));
 //# sourceMappingURL=StepperCompact.js.map

package/dist/components/steppercompact/StepperCompact.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperCompact.js","sources":["../../../src/components/steppercompact/StepperCompact.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-stepper-compact' }} />\n\n<script lang=\"ts\">\n  import CircularProgressbar from '../circularprogressbar/CircularProgressbar.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  interface Props {\n    /**\n     * Current step of the stepper compact.\n     */\n    value?: number;\n    /**\n     * Maximum number of steps for the stepper compact.\n     */\n    maxsteps?: number;\n    /**\n     * Label of the stepper compact.\n     */\n    label: string;\n    /**\n     * Description displayed below the label of the stepper compact.\n     */\n    description?: string;\n  }\n\n  let { value = $bindable(1), maxsteps = $bindable(4), label, description }: Props = $props();\n\n  const progressValue = $derived(() => {\n    const v = value ?? 0;\n    const m = maxsteps ?? 1;\n    return Math.round((v / m) * 100);\n  });\n\n  const contentValue = $derived(() => {\n    return `${value} / ${maxsteps}`;\n  });\n</script>\n\n<div class=\"mc-stepper-compact\">\n  <div class=\"mc-circular-progressbar mc-stepper-compact__progress\">\n    <CircularProgressbar\n      aria-label=\"Progress bar\"\n      type=\"content\"\n      size=\"m\"\n      contentvalue={contentValue()}\n      value={progressValue()}\n      class=\"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number\"\n    />\n  </div>\n  <div class=\"mc-stepper-compact__label-container\">\n    <p class=\"mc-stepper-compact__label\">{label}</p>\n    {#if description}\n      <p class=\"mc-stepper-compact__description\">{description}</p>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/stepper-compact';\n  @use '@mozaic-ds/styles/components/circular-progressbar/_t.circular-progressbar' as *;\n\n  .mc-stepper-compact__progress {\n    width: $spacing-600;\n    height: $spacing-600;\n\n    :global(.mc-circular-progressbar__content) {\n      display: block !important;\n      visibility: visible;\n      font-weight: 600;\n      font-size: 0.875rem;\n    }\n\n    :global(.mc-circular-progressbar__number) {\n      display: block;\n      visibility: visible;\n      opacity: 1;\n      color: inherit;\n      font-size: inherit;\n      line-height: inherit;\n    }\n\n    :global(.mc-circular-progressbar__indicator) {\n      @include calculate-border-width(4, 48, 100);\n      stroke: $stepper-color-progress-bar-indicator;\n      fill: none;\n      stroke-linecap: round;\n    }\n  }\n</style>\n"],"names":["value","maxsteps","label","$.prop","$$props","description","progressValue","$.derived","v","m","contentValue","$$render","consequent"],"mappings":";;g2CAAA,gBA0BQ,IAAAA,iBAAkB,CAAC,EAAGC,oBAAqB,CAAC,EAAGC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAEjE,MAAAE,EAAaC,EAAA,IAAA,IAAkB,OAC7BC,EAAIR,EAAK,GAAI,EACbS,EAAIR,EAAQ,GAAI,EACf,OAAA,KAAK,MAAOO,EAAIC,EAAK,GAAG,CACjC,CAAC,EAEKC,EAAYH,EAAA,IAAA,IACN,GAAAP,EAAK,OAAMC,EAAQ,CAAA,EAC9B,6CAVuB,EAAC,qDAAwB,EAAC,yJAmBhCS,CAAY,EAAA,CAAA,YACnBJ,CAAa,EAAA,CAAA,6UAOwBD,EAAW,CAAA,CAAA,kBADpDA,EAAW,GAAAM,EAAAC,CAAA,+BADsBV,EAAK,CAAA,CAAA,aAd/C"}
+{"version":3,"file":"StepperCompact.js","sources":["../../../src/components/steppercompact/StepperCompact.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-stepper-compact' }} />\n\n<script lang=\"ts\">\n  import CircularProgressbar from '../circularprogressbar/CircularProgressbar.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  interface Props {\n    /**\n     * Current step of the stepper compact.\n     */\n    value?: number;\n    /**\n     * Maximum number of steps for the stepper compact.\n     */\n    maxsteps?: number;\n    /**\n     * Label of the stepper compact.\n     */\n    label: string;\n    /**\n     * Description displayed below the label of the stepper compact.\n     */\n    description?: string;\n  }\n\n  let { value = $bindable(1), maxsteps = $bindable(4), label, description }: Props = $props();\n\n  const progressValue = $derived(() => {\n    const v = value ?? 0;\n    const m = maxsteps ?? 1;\n    return Math.round((v / m) * 100);\n  });\n\n  const contentValue = $derived(() => {\n    return `${value} / ${maxsteps}`;\n  });\n</script>\n\n<div class=\"mc-stepper-compact\">\n  <div class=\"mc-circular-progressbar mc-stepper-compact__progress\">\n    <CircularProgressbar\n      aria-label=\"Progress bar\"\n      type=\"content\"\n      size=\"m\"\n      contentvalue={contentValue()}\n      value={progressValue()}\n      class=\"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number\"\n    />\n  </div>\n  <div class=\"mc-stepper-compact__label-container\">\n    <p class=\"mc-stepper-compact__label\">{label}</p>\n    {#if description}\n      <p class=\"mc-stepper-compact__description\">{description}</p>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/stepper-compact';\n  @use '@mozaic-ds/styles/components/circular-progressbar/_t.circular-progressbar' as *;\n\n  .mc-stepper-compact__progress {\n    width: $spacing-600;\n    height: $spacing-600;\n\n    :global(.mc-circular-progressbar__content) {\n      display: block !important;\n      visibility: visible;\n      font-weight: 600;\n      font-size: 0.875rem;\n    }\n\n    :global(.mc-circular-progressbar__number) {\n      display: block;\n      visibility: visible;\n      opacity: 1;\n      color: inherit;\n      font-size: inherit;\n      line-height: inherit;\n    }\n\n    :global(.mc-circular-progressbar__indicator) {\n      @include calculate-border-width(4, 48, 100);\n      stroke: $stepper-color-progress-bar-indicator;\n      fill: none;\n      stroke-linecap: round;\n    }\n  }\n</style>\n"],"names":["value","maxsteps","label","$.prop","$$props","description","progressValue","$.derived","v","m","contentValue","div","root","div_1","CircularProgressbar","node","div_2","p","p_1","root_1","$$render","consequent"],"mappings":";;g2CAEA,gBAwBQ,IAAAA,iBAAkB,CAAC,EAAGC,oBAAqB,CAAC,EAAGC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAEjE,MAAAE,EAAaC,EAAA,IAAA,IAAkB,OAC7BC,EAAIR,EAAK,GAAI,EACbS,EAAIR,EAAQ,GAAI,EACf,OAAA,KAAK,MAAOO,EAAIC,EAAK,GAAG,CACjC,CAAC,EAEKC,EAAYH,EAAA,IAAA,IACN,GAAAP,EAAK,OAAMC,EAAQ,CAAA,EAC9B,6CAVuB,EAAC,qDAAwB,EAAC,sHAanDU,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAG,iBAKcH,CAAY,EAAA,CAAA,YACnBJ,CAAa,EAAA,CAAA,EALrBQ,EAAAC,EAAA,sOADFF,CAAG,EAUH,IAAAG,IAVAH,EAAG,CAAA,EAWDI,IADFD,CAAG,MACDC,EAAC,EAAA,IAADA,CAAC,UAADA,EAAC,CAAA,iBAECC,EAACC,EAAA,MAADD,EAAC,EAAA,IAADA,CAAC,YAA0Cb,EAAW,CAAA,CAAA,MAAtDa,CAAC,WADCb,EAAW,GAAAe,EAAAC,CAAA,aAFjBL,CAAG,IAXLL,CAAG,YAYsCT,EAAK,CAAA,CAAA,MAZ9CS,CAAG,MAFI"}

package/dist/components/stepperinline/README.md

@@ -0,0 +1,11 @@
+# `m-stepper-inline`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `step` | Current step of the stepper compact. | `number` | `$bindable(1)` |
+| `steps` | Steps of the stepper inline. | `Array<{ label: string; additionalinfo?: string; }>` | `$bindable([])` |
+

package/dist/components/stepperinline/StepperInline.js

@@ -0,0 +1,16 @@
+import{c as H,p as J,a as K,b as $,m as L,f as a,g as N,h as l,i as O,d as i,j as C,r as s,q as t,s as j,t as M,n as g,o as x,e as P,x as y}from"../../custom-element.js";import{i as q}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";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:`/**
+ * 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;
+  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 {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    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([])),D=O(p,["$$slots","$$events","$$legacy","$$host","step","steps"]);const w=y(()=>()=>Math.min(Math.max(f()??1,1),o().length??1)),E=y(()=>()=>o().map((n,m)=>({completed:m+1<t(w)(),current:m+1===t(w)()})));var I={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",...D}),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(E)()[_]);var v=ee(),S=i(v);{var R=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)};q(S,r=>{t(d).completed?r(R):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)};q(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(I)}customElements.define("m-stepper-inline",H(se,{step:{},steps:{}},[],[],!0));
+//# sourceMappingURL=StepperInline.js.map

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

@@ -0,0 +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"}