<!-- Steps.svelte -->
<script>
  // logic
  import Step from "./Step.svelte";

  function onProgressDot() {}
  function handleNotify() {}
</script>

<!-- Step.svelte -->
<Step current="1" direction="vert" {onProgressDot} on:notify={handleNotify} />
<img alt="" src="" class="upper" />

<style>
  /* scope */
  .upper {}

  /* global styling */
  :global(body) {
  }
  div :global(strong) {
  }
</style>

<!-- Step.svelte -->
<script>
  import { createEventDispatcher } from "svelte";

  export let current; // props
  export let direction = "hori"; // props with default value

  // reactive declaration, ECMA labeled statement
  $: [statement]
  $: cubecurrent = current ** 4;
  $: {
    const square = () => current ** 2;
    console.info("square:", square());
    console.info("cubecurrent:", cubecurrent);
  }

  const dispatch = createEventDispatcher();
  let onNotify = () => {
    dispatch("notify", ...params);
  };
  let handleClick = () => variable++; // self handler

  export let onProgressDot = () => {};
</script>

<!-- markup | multi markup -->
<span> {current} </span>
<span> {cubecurrent} </span>
<span> {direction} </span>
<button on:click={onNotify} />
<button on:click={handleClick} />
<button on:click={onProgressDot} />