docs: improve locales example

Author: ghiscoding

packages/demo/src/examples/example09.html

@@ -26,9 +26,9 @@ <h2 class="bd-title">
 
 <div>
   <div class="mb-3 row">
-    <label class="col-sm-3">Locale Select </label>
+    <label class="col-sm-4">Locale Select </label>
 
-    <div class="col-sm-9">
+    <div class="col-sm-8">
       <select id="locale" class="full-width">
         <option value="en-US">English</option>
         <option value="fr-FR">French</option>
@@ -44,9 +44,9 @@ <h2 class="bd-title">
   </div>
 
   <div class="mb-3 row">
-    <label class="col-sm-3">Result Select </label>
+    <label class="col-sm-4">Result Select </label>
 
-    <div class="col-sm-9">
+    <div class="col-sm-8">
       <select id="dynamic-select" class="full-width" multiple="multiple">
         <option value="1">January</option>
         <option value="2">February</option>
@@ -63,15 +63,26 @@ <h2 class="bd-title">
       </select>
     </div>
   </div>
+  <div class="row">
+    <div style="background: #f7f7f7; padding: 10px">
+      <pre>
+// ESM named import
+<span style="color:#cf222e">import</span> { locales } <span style="color:#cf222e">from</span> <span style="color:#0a3069">'multiple-select-vanilla/dist/locales/all-locales.js'</span>;
+<span style="color:#6639ba">multipleSelect</span>(<span style="color:#0a3069">'.select'</span>, {
+  locales
+}</span>);
+</pre>
+    </div>
+  </div>
 
   <hr>
 
-  <div class="row">
-    <label class="col-sm-3">
+  <div class="my-5 row">
+    <label class="col-sm-4">
       named Locale import (e.g. <code>Spanish</code>)
     </label>
 
-    <div class="col-sm-9">
+    <div class="col-sm-8">
       <select id="fixed-import" class="full-width" multiple="multiple">
         <option value="1">First</option>
         <option value="2">Second</option>
@@ -81,11 +92,14 @@ <h2 class="bd-title">
     </div>
   </div>
   <div class="row">
-    <label class="col-sm-3">
-      import command <code>{ locale: Spanish }</code>
-    </label>
-    <div class="col-sm-9">
-      <code>import { Spanish } from 'multiple-select-vanilla/dist/locales/es-ES.js'</code>
+    <div style="background: #f7f7f7; padding: 10px">
+      <pre>
+// ESM named import
+<span style="color:#cf222e">import</span> { multipleSelect } <span style="color:#cf222e">from</span> <span style="color:#0a3069">'multiple-select-vanilla'</span>;
+<span style="color:#6639ba">multipleSelect</span>(<span style="color:#0a3069">'.select'</span>, {
+  locale: <span style="color:#105fd7">Spanish</span>
+}</span>);
+</pre>
     </div>
   </div>
 </div>