Added attribute data-look to composite and nested states

cypress/platform/per.html

@@ -90,24 +90,23 @@ stateDiagram-v2
     >
 
     <pre id="diagram" class="mermaid">
-      stateDiagram
-       StateA
-
+      stateDiagram-v2
+      [*] --> First
+      state First {
+          [*] --> second
+          second --> [*]
+      }
 
 
     </pre>
 
     <pre id="diagram" class="mermaid2">
-      stateDiagram
-        direction LR
-        [*] --> A
-        A --> B
-        B --> C
-        state B {
-          direction LR
-          a --> b
-        }
-        B --> D
+      flowchart LR
+        A[Start] --Some text--> B(Continue)
+        B --> C{Evaluate}
+        C -- One --> D[Option 1]
+        C -- Two --> E[Option 2]
+        C -- Three --> F[fa:fa-car Option 3]
     </pre>
 
     <script type="module">
@@ -118,7 +117,7 @@ stateDiagram-v2
         console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'neo',
+        theme: 'forest',
         handdrawnSeed: 12,
         look: 'neo',
         //layout: 'elk',

cypress/platform/state-refactor-neo-themes.html

@@ -91,8 +91,9 @@
   <table>
     <tr>
       <th></th> <!-- Placeholder for the top left corner -->
-      <th>neo-default-light</th>
-      <th>neo-default-dark</th>
+      <th>default-light</th>
+      <th>neo-neo-light</th>
+      <th>neo-neo-dark</th>
       <th>neo-forest-light</th>
       <th>neo-base-light</th>
     </tr>
@@ -108,6 +109,13 @@
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
+%%{init: {"look": "classic", "theme": "default"} }%%
+stateDiagram-v2
+    stateId
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
 %%{init: {"look": "neo", "theme": "neo"} }%%
 stateDiagram-v2
     stateId
@@ -431,7 +439,6 @@ stateDiagram-v2
         <div class="content">
           <div class="pre-scrollable">
             <pre>
-%%{init: {"look": "neo", "theme": "neo"} }%%
       [*] --> First
     state First {
         [*] --> second
@@ -444,7 +451,7 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-
+%%{init: {"look": "neo", "theme": "neo"} }%%
     stateDiagram-v2
        [*] --> First
     state First {