From 81edd0f92b46656d8893966151c62e9f562b6185 Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Tue, 3 Dec 2024 23:09:01 +0100
Subject: [PATCH 01/13] add styling for component list

---
 .../simplycode-component-list.css             |  50 +++++++++
 .../1-styling/componentCss/style.css          |  16 ---
 www/api/data/generated.html                   | 105 ++++++++++++------
 .../pageTemplates/Base components.html        |  12 +-
 .../pageTemplates/List components.html        |  12 +-
 .../data/pages/pages/pageTemplates/Pages.html |  12 +-
 www/index.html                                | 105 ++++++++++++------
 7 files changed, 210 insertions(+), 102 deletions(-)
 create mode 100644 www/api/data/components/1-styling/componentCss/simplycode-component-list.css

diff --git a/www/api/data/components/1-styling/componentCss/simplycode-component-list.css b/www/api/data/components/1-styling/componentCss/simplycode-component-list.css
new file mode 100644
index 0000000..fec956d
--- /dev/null
+++ b/www/api/data/components/1-styling/componentCss/simplycode-component-list.css
@@ -0,0 +1,50 @@
+:root {
+    --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing));
+    --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing));
+    --simplycode-component-list-min-colwidth: 10rem;
+    --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size));
+    --simplycode-component-list-item-background: var(--ds-grey-90);
+    --simplycode-component-list-item-background-active: var(--ds-grey-80);
+    --simplycode-component-list-item-color: inherit;
+    --simplycode-component-list-item-color-active: inherit;
+    --simplycode-component-list-item-min-height: 4rem;
+}
+
+.simplycode-component-list {
+    display: grid;
+    grid-column-gap: var(--simplycode-component-list-spacing-column);
+    grid-row-gap: var(--simplycode-component-list-spacing-row);
+    grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr));
+
+    font-size: var(--simplycode-component-list-item-font-size);
+    line-height: 1.6em;
+    margin-bottom: var(--simplycode-component-list-spacing-column);
+}
+.simplycode-component-list-item {
+    background-color: var(--simplycode-component-list-item-background);
+    padding: calc(0.5 * var(--simplycode-component-list-spacing-column));
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+	min-height: var(--simplycode-component-list-item-min-height);
+}
+
+.simplycode-component-list-item,
+a.simplycode-component-list-item,
+a.simplycode-component-list-item * {
+    text-decoration: none;
+    color: var(--simplycode-component-list-item-color);
+}
+.simplycode-component-list-item:hover,
+a.simplycode-component-list-item:hover,
+a.simplycode-component-list-item:active {
+    background-color: var(--simplycode-component-list-item-background-active);
+    color: var(--simplycode-component-list-item-color-active);
+}
+
+.simplycode-component-list-item > :first-child {
+    margin-top: 0;
+}
+.simplycode-component-list-item > :last-child {
+    margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/www/api/data/components/1-styling/componentCss/style.css b/www/api/data/components/1-styling/componentCss/style.css
index c6265b7..05fa0df 100644
--- a/www/api/data/components/1-styling/componentCss/style.css
+++ b/www/api/data/components/1-styling/componentCss/style.css
@@ -238,22 +238,6 @@ header .simplycode-controls {
     margin-top: -1px;
 }
 
-ul.simplycode-components-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 10px;
-    margin-bottom: 1em;
-}
-ul.simplycode-components-list li {
-    border: 1px solid #555;
-    background-color: #2a2a2a;
-    padding: 10px;
-    border-radius: 2px;
-}
-
 /* Components: Toast */
 
 :root {
diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index cf8ae5f..39b8ce4 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -515,6 +515,59 @@
       	border: 0;
       	padding: 5px;
       }
+      /* simplycode-box */
+      
+      /* simplycode-component-list */
+      :root {
+          --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing));
+          --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing));
+          --simplycode-component-list-min-colwidth: 10rem;
+          --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size));
+          --simplycode-component-list-item-background: var(--ds-grey-90);
+          --simplycode-component-list-item-background-active: var(--ds-grey-80);
+          --simplycode-component-list-item-color: inherit;
+          --simplycode-component-list-item-color-active: inherit;
+          --simplycode-component-list-item-min-height: 4rem;
+      }
+      
+      .simplycode-component-list {
+          display: grid;
+          grid-column-gap: var(--simplycode-component-list-spacing-column);
+          grid-row-gap: var(--simplycode-component-list-spacing-row);
+          grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr));
+      
+          font-size: var(--simplycode-component-list-item-font-size);
+          line-height: 1.6em;
+          margin-bottom: var(--simplycode-component-list-spacing-column);
+      }
+      .simplycode-component-list-item {
+          background-color: var(--simplycode-component-list-item-background);
+          padding: calc(0.5 * var(--simplycode-component-list-spacing-column));
+          display: flex;
+          flex-direction: column;
+          flex: 1 1 0;
+      	min-height: var(--simplycode-component-list-item-min-height);
+      }
+      
+      .simplycode-component-list-item,
+      a.simplycode-component-list-item,
+      a.simplycode-component-list-item * {
+          text-decoration: none;
+          color: var(--simplycode-component-list-item-color);
+      }
+      .simplycode-component-list-item:hover,
+      a.simplycode-component-list-item:hover,
+      a.simplycode-component-list-item:active {
+          background-color: var(--simplycode-component-list-item-background-active);
+          color: var(--simplycode-component-list-item-color-active);
+      }
+      
+      .simplycode-component-list-item > :first-child {
+          margin-top: 0;
+      }
+      .simplycode-component-list-item > :last-child {
+          margin-bottom: 0;
+      }
       /* simplycode-ds-mapping */
       /* simplycode-ds-core-colors */
       :root {
@@ -783,22 +836,6 @@
           margin-top: -1px;
       }
       
-      ul.simplycode-components-list {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-          display: grid;
-          grid-template-columns: 1fr 1fr 1fr;
-          gap: 10px;
-          margin-bottom: 1em;
-      }
-      ul.simplycode-components-list li {
-          border: 1px solid #555;
-          background-color: #2a2a2a;
-          padding: 10px;
-          border-radius: 2px;
-      }
-      
       /* Components: Toast */
       
       :root {
@@ -4463,14 +4500,14 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
     <template data-simply-template="Base components">
       <main>
       <h1>Base components</h1>
-      <ul class="simplycode-components-list" data-simply-list="components">
+      <div class="simplycode-component-list" data-simply-list="components">
         <template>
-          <li data-simply-command="navigate">
-            <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="baseComponentLink"><span data-simply-field="id"></span></a>
-            <p data-simply-field="description"></p>
-          </li>
+          <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="baseComponentLink">
+            <h3 data-simply-field="id"></h3>
+            <p class="ds-margin-up" data-simply-field="description"></p>
+          </a>
         </template>
-      </ul>
+      </div>
       <h1>Add base component</h1>
       <div class="simplycode-part">
         <div class="simplycode-part-header">
@@ -4509,14 +4546,14 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
     <template data-simply-template="List components">
       <main>
       <h1>Components</h1>
-      <ul class="simplycode-components-list" data-simply-list="components">
+      <div class="simplycode-component-list" data-simply-list="components">
         <template>
-          <li data-simply-command="navigate">
-            <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink"><span data-simply-field="id"></span></a>
-            <p data-simply-field="description"></p>
-          </li>
+          <a class="simplycode-component-list-item data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink">
+            <h3 data-simply-field="id"></h3>
+            <p class="ds-margin-up" data-simply-field="description"></p>
+          </a>
         </template>
-      </ul>
+      </div>
       <h1>Add component</h1>
       <div class="simplycode-part">
         <div class="simplycode-part-header">
@@ -4565,14 +4602,14 @@ <h1>Edit page frame</h1>
     <template data-simply-template="Pages">
       <main>
       <h1>Pages</h1>
-      <ul class="simplycode-components-list" data-simply-list="components">
+      <div class="simplycode-component-list" data-simply-list="components">
         <template>
-          <li data-simply-command="navigate">
-            <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="pageLink"><span data-simply-field="id"></span></a>
-            <p data-simply-field="description"></p>
-          </li>
+          <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="pageLink">
+            <h3 data-simply-field="id"></h3>
+            <p class="ds-margin-up" data-simply-field="description"></p>
+          </a>
         </template>
-      </ul>
+      </div>
       <h1>Add page</h1>
       <div class="simplycode-part">
         <div class="simplycode-part-header">
diff --git a/www/api/data/pages/base-components/pageTemplates/Base components.html b/www/api/data/pages/base-components/pageTemplates/Base components.html
index 7c78448..aaf7494 100644
--- a/www/api/data/pages/base-components/pageTemplates/Base components.html	
+++ b/www/api/data/pages/base-components/pageTemplates/Base components.html	
@@ -1,13 +1,13 @@
 <main>
   <h1>Base components</h1>
-  <ul class="simplycode-components-list" data-simply-list="components">
+  <div class="simplycode-component-list" data-simply-list="components">
     <template>
-      <li data-simply-command="navigate">
-        <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="baseComponentLink"><span data-simply-field="id"></span></a>
-        <p data-simply-field="description"></p>
-      </li>
+      <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="baseComponentLink">
+        <h3 data-simply-field="id"></h3>
+        <p class="ds-margin-up" data-simply-field="description"></p>
+      </a>
     </template>
-  </ul>
+  </div>
   <h1>Add base component</h1>
   <div class="simplycode-part">
     <div class="simplycode-part-header">
diff --git a/www/api/data/pages/component-list/pageTemplates/List components.html b/www/api/data/pages/component-list/pageTemplates/List components.html
index 77587f2..1ad2757 100644
--- a/www/api/data/pages/component-list/pageTemplates/List components.html	
+++ b/www/api/data/pages/component-list/pageTemplates/List components.html	
@@ -1,13 +1,13 @@
 <main>
   <h1>Components</h1>
-  <ul class="simplycode-components-list" data-simply-list="components">
+  <div class="simplycode-component-list" data-simply-list="components">
     <template>
-      <li data-simply-command="navigate">
-        <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink"><span data-simply-field="id"></span></a>
-        <p data-simply-field="description"></p>
-      </li>
+      <a class="simplycode-component-list-item data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink">
+        <h3 data-simply-field="id"></h3>
+        <p class="ds-margin-up" data-simply-field="description"></p>
+      </a>
     </template>
-  </ul>
+  </div>
   <h1>Add component</h1>
   <div class="simplycode-part">
     <div class="simplycode-part-header">
diff --git a/www/api/data/pages/pages/pageTemplates/Pages.html b/www/api/data/pages/pages/pageTemplates/Pages.html
index 18e9694..5768755 100644
--- a/www/api/data/pages/pages/pageTemplates/Pages.html
+++ b/www/api/data/pages/pages/pageTemplates/Pages.html
@@ -1,13 +1,13 @@
 <main>
   <h1>Pages</h1>
-  <ul class="simplycode-components-list" data-simply-list="components">
+  <div class="simplycode-component-list" data-simply-list="components">
     <template>
-      <li data-simply-command="navigate">
-        <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="pageLink"><span data-simply-field="id"></span></a>
-        <p data-simply-field="description"></p>
-      </li>
+      <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="pageLink">
+        <h3 data-simply-field="id"></h3>
+        <p class="ds-margin-up" data-simply-field="description"></p>
+      </a>
     </template>
-  </ul>
+  </div>
   <h1>Add page</h1>
   <div class="simplycode-part">
     <div class="simplycode-part-header">
diff --git a/www/index.html b/www/index.html
index cf8ae5f..39b8ce4 100644
--- a/www/index.html
+++ b/www/index.html
@@ -515,6 +515,59 @@
       	border: 0;
       	padding: 5px;
       }
+      /* simplycode-box */
+      
+      /* simplycode-component-list */
+      :root {
+          --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing));
+          --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing));
+          --simplycode-component-list-min-colwidth: 10rem;
+          --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size));
+          --simplycode-component-list-item-background: var(--ds-grey-90);
+          --simplycode-component-list-item-background-active: var(--ds-grey-80);
+          --simplycode-component-list-item-color: inherit;
+          --simplycode-component-list-item-color-active: inherit;
+          --simplycode-component-list-item-min-height: 4rem;
+      }
+      
+      .simplycode-component-list {
+          display: grid;
+          grid-column-gap: var(--simplycode-component-list-spacing-column);
+          grid-row-gap: var(--simplycode-component-list-spacing-row);
+          grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr));
+      
+          font-size: var(--simplycode-component-list-item-font-size);
+          line-height: 1.6em;
+          margin-bottom: var(--simplycode-component-list-spacing-column);
+      }
+      .simplycode-component-list-item {
+          background-color: var(--simplycode-component-list-item-background);
+          padding: calc(0.5 * var(--simplycode-component-list-spacing-column));
+          display: flex;
+          flex-direction: column;
+          flex: 1 1 0;
+      	min-height: var(--simplycode-component-list-item-min-height);
+      }
+      
+      .simplycode-component-list-item,
+      a.simplycode-component-list-item,
+      a.simplycode-component-list-item * {
+          text-decoration: none;
+          color: var(--simplycode-component-list-item-color);
+      }
+      .simplycode-component-list-item:hover,
+      a.simplycode-component-list-item:hover,
+      a.simplycode-component-list-item:active {
+          background-color: var(--simplycode-component-list-item-background-active);
+          color: var(--simplycode-component-list-item-color-active);
+      }
+      
+      .simplycode-component-list-item > :first-child {
+          margin-top: 0;
+      }
+      .simplycode-component-list-item > :last-child {
+          margin-bottom: 0;
+      }
       /* simplycode-ds-mapping */
       /* simplycode-ds-core-colors */
       :root {
@@ -783,22 +836,6 @@
           margin-top: -1px;
       }
       
-      ul.simplycode-components-list {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-          display: grid;
-          grid-template-columns: 1fr 1fr 1fr;
-          gap: 10px;
-          margin-bottom: 1em;
-      }
-      ul.simplycode-components-list li {
-          border: 1px solid #555;
-          background-color: #2a2a2a;
-          padding: 10px;
-          border-radius: 2px;
-      }
-      
       /* Components: Toast */
       
       :root {
@@ -4463,14 +4500,14 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
     <template data-simply-template="Base components">
       <main>
       <h1>Base components</h1>
-      <ul class="simplycode-components-list" data-simply-list="components">
+      <div class="simplycode-component-list" data-simply-list="components">
         <template>
-          <li data-simply-command="navigate">
-            <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="baseComponentLink"><span data-simply-field="id"></span></a>
-            <p data-simply-field="description"></p>
-          </li>
+          <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="baseComponentLink">
+            <h3 data-simply-field="id"></h3>
+            <p class="ds-margin-up" data-simply-field="description"></p>
+          </a>
         </template>
-      </ul>
+      </div>
       <h1>Add base component</h1>
       <div class="simplycode-part">
         <div class="simplycode-part-header">
@@ -4509,14 +4546,14 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
     <template data-simply-template="List components">
       <main>
       <h1>Components</h1>
-      <ul class="simplycode-components-list" data-simply-list="components">
+      <div class="simplycode-component-list" data-simply-list="components">
         <template>
-          <li data-simply-command="navigate">
-            <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink"><span data-simply-field="id"></span></a>
-            <p data-simply-field="description"></p>
-          </li>
+          <a class="simplycode-component-list-item data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink">
+            <h3 data-simply-field="id"></h3>
+            <p class="ds-margin-up" data-simply-field="description"></p>
+          </a>
         </template>
-      </ul>
+      </div>
       <h1>Add component</h1>
       <div class="simplycode-part">
         <div class="simplycode-part-header">
@@ -4565,14 +4602,14 @@ <h1>Edit page frame</h1>
     <template data-simply-template="Pages">
       <main>
       <h1>Pages</h1>
-      <ul class="simplycode-components-list" data-simply-list="components">
+      <div class="simplycode-component-list" data-simply-list="components">
         <template>
-          <li data-simply-command="navigate">
-            <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="pageLink"><span data-simply-field="id"></span></a>
-            <p data-simply-field="description"></p>
-          </li>
+          <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="pageLink">
+            <h3 data-simply-field="id"></h3>
+            <p class="ds-margin-up" data-simply-field="description"></p>
+          </a>
         </template>
-      </ul>
+      </div>
       <h1>Add page</h1>
       <div class="simplycode-part">
         <div class="simplycode-part-header">

From 4195cd7d60e8a18efacb39aa9655d167dd492de8 Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 01:52:07 +0100
Subject: [PATCH 02/13] update index

---
 www/index.html | 110 ++++++++++++++++++++++++-------------------------
 1 file changed, 55 insertions(+), 55 deletions(-)

diff --git a/www/index.html b/www/index.html
index 39b8ce4..d8ab835 100644
--- a/www/index.html
+++ b/www/index.html
@@ -592,34 +592,34 @@
         --ds-support-contrast: #FFF;
         --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
       
-        --ds-heading-font: var(--font-family);
+        --ds-heading-font: var(--simplycode-font-family);
       }
       
       /* style */
       :root {
-          --highlight-dark: #f16623;
-          --highlight-light: #ff8003;
-          --highlight-color: #fff;
-          --highlight-background: linear-gradient( to left, var(--highlight-light), var(--highlight-dark) );
+          --simplycode-highlight-dark: #f16623;
+          --simplycode-highlight-light: #ff8003;
+          --simplycode-highlight-color: #fff;
+          --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
       
-          --support-dark: #444;
-          --support-light: #484848;
-          --support-color: #eee;
-          --support-background: linear-gradient( to left, var(--support-light), var(--support-dark) );
+          --simplycode-support-dark: #444;
+          --simplycode-support-light: #484848;
+          --simplycode-support-color: #eee;
+          --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
       
-          --grey-dark: #38393c;
-          --grey-medium: #7f8185;
-          --grey-light: #e9ebec;
-          --grey-dark: #38393c;
-          --black: #000;
-          --white: #fff;
-          --grey-background: var(--grey-dark);
+          --simplycode-grey-dark: #38393c;
+          --simplycode-grey-medium: #7f8185;
+          --simplycode-grey-light: #e9ebec;
+          --simplycode-grey-dark: #38393c;
+          --simplycode-black: #000;
+          --simplycode-white: #fff;
+          --simplycode-grey-background: var(--simplycode-grey-dark);
       
-          --font-family: 'Alegreya Sans', sans-serif;
-          --font-size: 14px;
-          --line-height: 1.5em;
-          --color: #7f8185;
-          --background: #333;
+          --simplycode-font-family: 'Alegreya Sans', sans-serif;
+          --simplycode-font-size: 14px;
+          --simplycode-line-height: 1.5em;
+          --simplycode-color: #7f8185;
+          --simplycode-background: #333;
       }
       
       /* general styling on default elements */
@@ -627,11 +627,11 @@
       html, body {
           margin: 0;
           padding: 0;
-          font-family: var(--font-family);
-          font-size: var(--font-size);
-          line-height: var(--line-height);
-          color: var(--color); 
-          background-color: var(--background);
+          font-family: var(--simplycode-font-family);
+          font-size: var(--simplycode-font-size);
+          line-height: var(--simplycode-line-height);
+          color: var(--simplycode-color); 
+          background-color: var(--simplycode-background);
       }
       body {
           overflow-y: scroll;
@@ -665,18 +665,18 @@
       }
       
       a {
-          color: var(--highlight-dark);
+          color: var(--simplycode-highlight-dark);
       }
       a:visited {
-          color: var(--highlight-dark);
+          color: var(--simplycode-highlight-dark);
       }
       
       /* custom styling for custom elements */
       
       .simplycode-button,
       a.simplycode-button {
-          background: var(--support-background);
-          color: var(--support-color);
+          background: var(--simplycode-support-background);
+          color: var(--simplycode-support-color);
           padding: 0.3em 0.5em;
           margin: 0 0.3em;
           border: 1px solid #ccc;
@@ -690,8 +690,8 @@
           margin-right: 0;
       }
       .simplycode-button.highlight {
-          background: var(--highlight-background);
-          color: var(--highlight-color);
+          background: var(--simplycode-highlight-background);
+          color: var(--simplycode-highlight-color);
       }
       
       .text-content {
@@ -767,7 +767,7 @@
       }
       .simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
           font-weight: bold;
-          border-bottom: 2px solid var(--support-background);
+          border-bottom: 2px solid var(--simplycode-support-background);
       }
       .simplycode-part .simplycode-editor-code {
           display: grid;
@@ -844,20 +844,20 @@
           --simply-toast-show-duration: 0.3s;
           --simply-toast-hide-duration: 0.5s;
           --simply-toast-margin: 20px;
-          --simply-error-color: rgb(253, 143, 143);
-          --simply-warning-color: #FFFFCC;
-          --simply-info-color: rgb(140, 180, 250);
-          --simply-white: #FFF;
-          --simply-grey-50: #a8b4c0;
-          --simply-grey-80: #4d565c;
-          --simply-font-size: calc(1.1 * 1rem);
-          --simply-font-weight: 300;
-          --simply-line-height: calc(1.5 * var(--simply-font-size));
-          --simply-color: var(--grey-medium);
-          --simply-contrast: var(--grey-medium);
-          --simply-background:var(--white);
-          --simply-heading-weight: 900;
-          --simply-heading-multiplier: 1.1;
+          --simply-toast-error-color: rgb(253, 143, 143);
+          --simply-toats-warning-color: #FFFFCC;
+          --simply-toast-info-color: rgb(140, 180, 250);
+          --simply-toast-white: #FFF;
+          --simply-toast-grey-50: #a8b4c0;
+          --simply-toast-grey-80: #4d565c;
+          --simply-toast-font-size: calc(1.1 * 1rem);
+          --simply-toast-font-weight: 300;
+          --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
+          --simply-toast-color: var(--simplycode-grey-medium);
+          --simply-toast-contrast: var(--simplycode-grey-medium);
+          --simply-toast-background:var(--simplycode-white);
+          --simply-toast-heading-weight: 900;
+          --simply-toast-heading-multiplier: 1.1;
       }
       
       ul.simply-toasts,
@@ -881,24 +881,24 @@
           clear: both;
           margin-right: 0;
           margin-top: 60px;
-          background-color: var(--simply-grey-80);
-          color: var(--simply-white);
+          background-color: var(--simply-toast-grey-80);
+          color: var(--simply-toast-white);
           display: block;
-          border-left: 10px solid var(--simply-grey-50);
+          border-left: 10px solid var(--simply-toast-grey-50);
           padding: 20px;
           border-radius: 2px;
       }
       .simply-toast-error,
       li.simply-toast-error {
-          border-color: var(--simply-error-color);
+          border-color: var(--simply-toast-error-color);
       }
       .simply-toast-info,
       li.simply-toast-info {
-          border-color: var(--simply-info-color);
+          border-color: var(--simply-toast-info-color);
       }
       .simply-toast-warning,
       li.simply-toast-warning {
-          border-color: var(--simply-warning-color);
+          border-color: var(--simply-toast-warning-color);
       }
       
       @keyframes simply-toast-show {
@@ -1071,7 +1071,7 @@
       }
       /* simply-logo */
       :root {
-        --simply-logo-color-primary: var(--highlight-dark);
+        --simply-logo-color-primary: var(--simplycode-highlight-dark);
         --simply-logo-color-secondary: white;
       }
       /* simply-toobar-button */
@@ -1138,7 +1138,7 @@
       /* simply-toolbar */
       :root {
         --simply-toobar-height: 60px;
-        --simply-toolbar-primary: var(--highlight-dark);
+        --simply-toolbar-primary: var(--simplycode-highlight-dark);
         --simply-toolbar-button-font: arial, helvetica, sans-serif;
         --simply-toolbar-button-font-size: 11px;
         --simply-toolbar-button-width: 60px;

From 5b4b2751973e17fb71d3be6bf31d5ad9a3bf6cb0 Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 01:58:00 +0100
Subject: [PATCH 03/13] whitespace

---
 .../1-styling/componentCss/extra.css          |  30 +-
 .../simplycode-component-list.css             |  56 +-
 .../1-styling/componentCss/style.css          | 410 ++++++------
 .../componentCss/simply-toolbar.css           | 104 +--
 www/api/data/generated.html                   | 602 +++++++++---------
 www/index.html                                | 602 +++++++++---------
 6 files changed, 900 insertions(+), 904 deletions(-)

diff --git a/www/api/data/components/1-styling/componentCss/extra.css b/www/api/data/components/1-styling/componentCss/extra.css
index 359fd77..02440d7 100644
--- a/www/api/data/components/1-styling/componentCss/extra.css
+++ b/www/api/data/components/1-styling/componentCss/extra.css
@@ -1,28 +1,28 @@
 @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i');
 
 html, body {
-	margin: 0;
-	padding: 0;
-	width: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
 main {
-	padding: 0px 15px;
+  padding: 0px 15px;
 }
 [data-simply-command] {
-	cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */
+  cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */
 }
 textarea {
-	width: 100%;
-	height: 120px;
-	color: #e0e0e0;
-	background-color: #151515;
-	border: 0;
-	padding: 10px;
+  width: 100%;
+  height: 120px;
+  color: #e0e0e0;
+  background-color: #151515;
+  border: 0;
+  padding: 10px;
 }
 input:not([type]),
 input[type=text] {
-	color: #e0e0e0;
-	background-color: #151515;
-	border: 0;
-	padding: 5px;
+  color: #e0e0e0;
+  background-color: #151515;
+  border: 0;
+  padding: 5px;
 }
\ No newline at end of file
diff --git a/www/api/data/components/1-styling/componentCss/simplycode-component-list.css b/www/api/data/components/1-styling/componentCss/simplycode-component-list.css
index fec956d..2974032 100644
--- a/www/api/data/components/1-styling/componentCss/simplycode-component-list.css
+++ b/www/api/data/components/1-styling/componentCss/simplycode-component-list.css
@@ -1,50 +1,50 @@
 :root {
-    --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing));
-    --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing));
-    --simplycode-component-list-min-colwidth: 10rem;
-    --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size));
-    --simplycode-component-list-item-background: var(--ds-grey-90);
-    --simplycode-component-list-item-background-active: var(--ds-grey-80);
-    --simplycode-component-list-item-color: inherit;
-    --simplycode-component-list-item-color-active: inherit;
-    --simplycode-component-list-item-min-height: 4rem;
+  --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing));
+  --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing));
+  --simplycode-component-list-min-colwidth: 10rem;
+  --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size));
+  --simplycode-component-list-item-background: var(--ds-grey-90);
+  --simplycode-component-list-item-background-active: var(--ds-grey-80);
+  --simplycode-component-list-item-color: inherit;
+  --simplycode-component-list-item-color-active: inherit;
+  --simplycode-component-list-item-min-height: 4rem;
 }
 
 .simplycode-component-list {
-    display: grid;
-    grid-column-gap: var(--simplycode-component-list-spacing-column);
-    grid-row-gap: var(--simplycode-component-list-spacing-row);
-    grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr));
+  display: grid;
+  grid-column-gap: var(--simplycode-component-list-spacing-column);
+  grid-row-gap: var(--simplycode-component-list-spacing-row);
+  grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr));
 
-    font-size: var(--simplycode-component-list-item-font-size);
-    line-height: 1.6em;
-    margin-bottom: var(--simplycode-component-list-spacing-column);
+  font-size: var(--simplycode-component-list-item-font-size);
+  line-height: 1.6em;
+  margin-bottom: var(--simplycode-component-list-spacing-column);
 }
 .simplycode-component-list-item {
-    background-color: var(--simplycode-component-list-item-background);
-    padding: calc(0.5 * var(--simplycode-component-list-spacing-column));
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 0;
-	min-height: var(--simplycode-component-list-item-min-height);
+  background-color: var(--simplycode-component-list-item-background);
+  padding: calc(0.5 * var(--simplycode-component-list-spacing-column));
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-height: var(--simplycode-component-list-item-min-height);
 }
 
 .simplycode-component-list-item,
 a.simplycode-component-list-item,
 a.simplycode-component-list-item * {
-    text-decoration: none;
-    color: var(--simplycode-component-list-item-color);
+  text-decoration: none;
+  color: var(--simplycode-component-list-item-color);
 }
 .simplycode-component-list-item:hover,
 a.simplycode-component-list-item:hover,
 a.simplycode-component-list-item:active {
-    background-color: var(--simplycode-component-list-item-background-active);
-    color: var(--simplycode-component-list-item-color-active);
+  background-color: var(--simplycode-component-list-item-background-active);
+  color: var(--simplycode-component-list-item-color-active);
 }
 
 .simplycode-component-list-item > :first-child {
-    margin-top: 0;
+  margin-top: 0;
 }
 .simplycode-component-list-item > :last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
\ No newline at end of file
diff --git a/www/api/data/components/1-styling/componentCss/style.css b/www/api/data/components/1-styling/componentCss/style.css
index 2777cc7..2d82e87 100644
--- a/www/api/data/components/1-styling/componentCss/style.css
+++ b/www/api/data/components/1-styling/componentCss/style.css
@@ -1,107 +1,107 @@
 :root {
-    --simplycode-highlight-dark: #f16623;
-    --simplycode-highlight-light: #ff8003;
-    --simplycode-highlight-color: #fff;
-    --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
+  --simplycode-highlight-dark: #f16623;
+  --simplycode-highlight-light: #ff8003;
+  --simplycode-highlight-color: #fff;
+  --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
 
-    --simplycode-support-dark: #444;
-    --simplycode-support-light: #484848;
-    --simplycode-support-color: #eee;
-    --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
+  --simplycode-support-dark: #444;
+  --simplycode-support-light: #484848;
+  --simplycode-support-color: #eee;
+  --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
 
-    --simplycode-grey-dark: #38393c;
-    --simplycode-grey-medium: #7f8185;
-    --simplycode-grey-light: #e9ebec;
-    --simplycode-grey-dark: #38393c;
-    --simplycode-black: #000;
-    --simplycode-white: #fff;
-    --simplycode-grey-background: var(--simplycode-grey-dark);
+  --simplycode-grey-dark: #38393c;
+  --simplycode-grey-medium: #7f8185;
+  --simplycode-grey-light: #e9ebec;
+  --simplycode-grey-dark: #38393c;
+  --simplycode-black: #000;
+  --simplycode-white: #fff;
+  --simplycode-grey-background: var(--simplycode-grey-dark);
 
-    --simplycode-font-family: 'Alegreya Sans', sans-serif;
-    --simplycode-font-size: 14px;
-    --simplycode-line-height: 1.5em;
-    --simplycode-color: #7f8185;
-    --simplycode-background: #333;
+  --simplycode-font-family: 'Alegreya Sans', sans-serif;
+  --simplycode-font-size: 14px;
+  --simplycode-line-height: 1.5em;
+  --simplycode-color: #7f8185;
+  --simplycode-background: #333;
 }
 
 /* general styling on default elements */
 
 html, body {
-    margin: 0;
-    padding: 0;
-    font-family: var(--simplycode-font-family);
-    font-size: var(--simplycode-font-size);
-    line-height: var(--simplycode-line-height);
-    color: var(--simplycode-color); 
-    background-color: var(--simplycode-background);
+  margin: 0;
+  padding: 0;
+  font-family: var(--simplycode-font-family);
+  font-size: var(--simplycode-font-size);
+  line-height: var(--simplycode-line-height);
+  color: var(--simplycode-color); 
+  background-color: var(--simplycode-background);
 }
 body {
-    overflow-y: scroll;
+  overflow-y: scroll;
 }
 body:last-child {
-    margin-bottom: 1.5em;
+  margin-bottom: 1.5em;
 }
 h1 {
-    font-size: 2em;
-    font-weight: 300;
-    line-height: 1.1em;
-    margin: 0;
-    margin-bottom: 0.5em;
+  font-size: 2em;
+  font-weight: 300;
+  line-height: 1.1em;
+  margin: 0;
+  margin-bottom: 0.5em;
 }
 
 h2 {
-    font-size: 1.6em;
-    font-weight: 400;
-    line-height: 1.1em;
-    margin: 0;
-    margin-bottom: 0.5em;
+  font-size: 1.6em;
+  font-weight: 400;
+  line-height: 1.1em;
+  margin: 0;
+  margin-bottom: 0.5em;
 }
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 img {
-    display: block;
-    max-width: 100%;
+  display: block;
+  max-width: 100%;
 }
 
 a {
-    color: var(--simplycode-highlight-dark);
+  color: var(--simplycode-highlight-dark);
 }
 a:visited {
-    color: var(--simplycode-highlight-dark);
+  color: var(--simplycode-highlight-dark);
 }
 
 /* custom styling for custom elements */
 
 .simplycode-button,
 a.simplycode-button {
-    background: var(--simplycode-support-background);
-    color: var(--simplycode-support-color);
-    padding: 0.3em 0.5em;
-    margin: 0 0.3em;
-    border: 1px solid #ccc;
-    text-decoration: none;
+  background: var(--simplycode-support-background);
+  color: var(--simplycode-support-color);
+  padding: 0.3em 0.5em;
+  margin: 0 0.3em;
+  border: 1px solid #ccc;
+  text-decoration: none;
 }
 
 .simplycode-button:first-child {
-    margin-left: 0;
+  margin-left: 0;
 }
 .simplycode-button:last-child {
-    margin-right: 0;
+  margin-right: 0;
 }
 .simplycode-button.highlight {
-    background: var(--simplycode-highlight-background);
-    color: var(--simplycode-highlight-color);
+  background: var(--simplycode-highlight-background);
+  color: var(--simplycode-highlight-color);
 }
 
 .text-content {
-    padding: 2.2375em;
-    max-width: 50em;
+  padding: 2.2375em;
+  max-width: 50em;
 }
 .text-content *:first-child {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 body {
@@ -115,249 +115,249 @@ body {
     "nav pane pane"
 }
 body > header {
-    grid-area: header;
+  grid-area: header;
 }
 body > nav {
-    grid-area: nav;
+  grid-area: nav;
 }
 body > div.main {
-    grid-area: pane;
+  grid-area: pane;
 }
 nav ul ul .simplycode-expand {
-    display: none;
-    padding: 0 1.7em;
+  display: none;
+  padding: 0 1.7em;
 }
 nav ul {
-    list-style: none;
-    margin: 0 0.5em;
-    padding: 0;
+  list-style: none;
+  margin: 0 0.5em;
+  padding: 0;
 }
 nav ul ul {
-    padding: 0 1.7em;
+  padding: 0 1.7em;
 }
 
 nav > ul > li[data-simply-command=expandMenu][open]::before {
-    content: "[-] ";
-    font-family: monospace;
+  content: "[-] ";
+  font-family: monospace;
 }
 nav > ul > li[data-simply-command=expandMenu]::before {
-    content: "[+] ";
-    font-family: monospace;
+  content: "[+] ";
+  font-family: monospace;
 }
 .simplycode-part {
-    margin-top: 1em;
+  margin-top: 1em;
 }
 
 .simplycode-part-header {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
 }
 .simplycode-part-header .simplycode-options {
-    text-align: right;
+  text-align: right;
 }
 .simplycode-part .simplycode-tab {
-    padding: 10px 5px;
-    margin: 0;
-    background-color: #151515;
-    color: #ddd;
-    border: 0;
-    text-align: center;
-    margin-right: 5px;
+  padding: 10px 5px;
+  margin: 0;
+  background-color: #151515;
+  color: #ddd;
+  border: 0;
+  text-align: center;
+  margin-right: 5px;
 }
 .simplycode-part .simplycode-tab input[type=radio] {
-    display: none;
+  display: none;
 }
 .simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
-    font-weight: bold;
-    border-bottom: 2px solid var(--simplycode-support-background);
+  font-weight: bold;
+  border-bottom: 2px solid var(--simplycode-support-background);
 }
 .simplycode-part .simplycode-editor-code {
-    display: grid;
-    grid-template-columns: 1fr;
+  display: grid;
+  grid-template-columns: 1fr;
 }
 .simplycode-part .simplycode-dual {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
 }
 .simplycode-part .simplycode-dual-preview {
-    display: grid;
-    grid-template-columns: auto 480px;
+  display: grid;
+  grid-template-columns: auto 480px;
 }
 .simplycode-test-header {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
 }
 .simplycode-test-header .simplycode-options {
-    text-align: right;
+  text-align: right;
 }
 .simplycode-component summary {
-    font-size: 1.2em;
+  font-size: 1.2em;
 }
 .simplycode-component {
-    margin: 10px 0px;
+  margin: 10px 0px;
 }
 .simplycode-header {
-    display: grid;
-    grid-template-columns: 3fr 1fr;
-    vertical-align: middle;
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  vertical-align: middle;
 }
 .simplycode-header .simplycode-controls {
-    text-align: right;
+  text-align: right;
 }
 .simplycode-header h1 span {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 .simplycode-component summary .simplycode-controls {
-    display: none;
-    margin-left: 1em;
+  display: none;
+  margin-left: 1em;
 }
 .simplycode-component[open] summary .simplycode-controls {
-    display: inline-block;
+  display: inline-block;
 }
 header {
-    position: fixed;
-    padding: 8px 10px 6px 10px;
-    left: 0;
-    right: 0;
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    background-color: #404040;
-    border-bottom: 2px solid #2222;
-    vertical-align: middle;
-    z-index: 200;
+  position: fixed;
+  padding: 8px 10px 6px 10px;
+  left: 0;
+  right: 0;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  background-color: #404040;
+  border-bottom: 2px solid #2222;
+  vertical-align: middle;
+  z-index: 200;
 }
 header h1 {
-    margin: 0;
+  margin: 0;
 }
 header .simplycode-controls {
-    padding-top: 5px;
-    padding-right: 5px;
-    text-align: right;
+  padding-top: 5px;
+  padding-right: 5px;
+  text-align: right;
 }
 .simplycode-editor-code textarea {
-    margin-top: -1px;
+  margin-top: -1px;
 }
 
 /* Components: Toast */
 
 :root {
-    --simply-toast-height: 60px;
-    --simply-toast-hide-delay: 3s;
-    --simply-toast-show-duration: 0.3s;
-    --simply-toast-hide-duration: 0.5s;
-    --simply-toast-margin: 20px;
-    --simply-toast-error-color: rgb(253, 143, 143);
-    --simply-toats-warning-color: #FFFFCC;
-    --simply-toast-info-color: rgb(140, 180, 250);
-    --simply-toast-white: #FFF;
-    --simply-toast-grey-50: #a8b4c0;
-    --simply-toast-grey-80: #4d565c;
-    --simply-toast-font-size: calc(1.1 * 1rem);
-    --simply-toast-font-weight: 300;
-    --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
-    --simply-toast-color: var(--simplycode-grey-medium);
-    --simply-toast-contrast: var(--simplycode-grey-medium);
-    --simply-toast-background:var(--simplycode-white);
-    --simply-toast-heading-weight: 900;
-    --simply-toast-heading-multiplier: 1.1;
+  --simply-toast-height: 60px;
+  --simply-toast-hide-delay: 3s;
+  --simply-toast-show-duration: 0.3s;
+  --simply-toast-hide-duration: 0.5s;
+  --simply-toast-margin: 20px;
+  --simply-toast-error-color: rgb(253, 143, 143);
+  --simply-toats-warning-color: #FFFFCC;
+  --simply-toast-info-color: rgb(140, 180, 250);
+  --simply-toast-white: #FFF;
+  --simply-toast-grey-50: #a8b4c0;
+  --simply-toast-grey-80: #4d565c;
+  --simply-toast-font-size: calc(1.1 * 1rem);
+  --simply-toast-font-weight: 300;
+  --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
+  --simply-toast-color: var(--simplycode-grey-medium);
+  --simply-toast-contrast: var(--simplycode-grey-medium);
+  --simply-toast-background:var(--simplycode-white);
+  --simply-toast-heading-weight: 900;
+  --simply-toast-heading-multiplier: 1.1;
 }
 
 ul.simply-toasts,
 ol.simply-toasts,
 .simply-toasts {
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 101;
-    display: block;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    max-width: 50%;
-    min-width: 300px;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 101;
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-width: 50%;
+  min-width: 300px;
 }
 .simply-toast,
 li.simply-toast {
-    min-width: 300px;
-    float: right;
-    clear: both;
-    margin-right: 0;
-    margin-top: 60px;
-    background-color: var(--simply-toast-grey-80);
-    color: var(--simply-toast-white);
-    display: block;
-    border-left: 10px solid var(--simply-toast-grey-50);
-    padding: 20px;
-    border-radius: 2px;
+  min-width: 300px;
+  float: right;
+  clear: both;
+  margin-right: 0;
+  margin-top: 60px;
+  background-color: var(--simply-toast-grey-80);
+  color: var(--simply-toast-white);
+  display: block;
+  border-left: 10px solid var(--simply-toast-grey-50);
+  padding: 20px;
+  border-radius: 2px;
 }
 .simply-toast-error,
 li.simply-toast-error {
-    border-color: var(--simply-toast-error-color);
+  border-color: var(--simply-toast-error-color);
 }
 .simply-toast-info,
 li.simply-toast-info {
-    border-color: var(--simply-toast-info-color);
+  border-color: var(--simply-toast-info-color);
 }
 .simply-toast-warning,
 li.simply-toast-warning {
-    border-color: var(--simply-toast-warning-color);
+  border-color: var(--simply-toast-warning-color);
 }
 
 @keyframes simply-toast-show {
-    0% {
-        transform: scaleX(0);
-        transform-origin: right;
-        opacity: 0;
-    }
-    50% {
-        transform: scaleX(0);
-        transform-origin: right;
-        opacity: 0;
-    }
-    75% {
-        opacity: 1;
-    }
-    100% {
-        transform: scaleX(1);
-        transform-origin: right;
-        opacity: 1;
-    }
+  0% {
+    transform: scaleX(0);
+    transform-origin: right;
+    opacity: 0;
+  }
+  50% {
+    transform: scaleX(0);
+    transform-origin: right;
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    transform: scaleX(1);
+    transform-origin: right;
+    opacity: 1;
+  }
 }
 @keyframes simply-toast-hide {
-    0% {
-        transform: scaleX(1);
-        transform-origin: right;
-        opacity: 1;
-    }
-    50% {
-        opacity: 1;
-    }
-    100% {
-        transform: scaleX(0);
-        transform-origin: right;
-        opacity: 0;
-    }
+  0% {
+    transform: scaleX(1);
+    transform-origin: right;
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scaleX(0);
+    transform-origin: right;
+    opacity: 0;
+  }
 }
 @keyframes simply-toast-move {
-    0% {
-        transform: translateY(-80px); /* toast-height + toast-margin */
-    }
-    100% {
-        transform: translateY(0px);
-    }
+  0% {
+    transform: translateY(-80px); /* toast-height + toast-margin */
+  }
+  100% {
+    transform: translateY(0px);
+  }
 }
 .simply-toast[data-state="new"] {
-    animation: simply-toast-show var(--simply-toast-show-duration) forwards;
+  animation: simply-toast-show var(--simply-toast-show-duration) forwards;
 }
 .simply-toast-autohide[data-state="new"] {
-    animation: simply-toast-show var(--simply-toast-show-duration);
-    animation-delay: 0s;
+  animation: simply-toast-show var(--simply-toast-show-duration);
+  animation-delay: 0s;
 }
 .simply-toast-autohide.simply-toast-animated[data-state="shown"] {
-    animation: simply-toast-hide var(--simply-toast-hide-duration) forwards;
-    animation-delay: calc(var(--simply-toast-hide-delay) - var(--simply-toast-show-duration));
+  animation: simply-toast-hide var(--simply-toast-hide-duration) forwards;
+  animation-delay: calc(var(--simply-toast-hide-delay) - var(--simply-toast-show-duration));
 }
 .simply-toast-autohide:not(.simply-toast-animated)[data-state="shown"] {
-    animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards;
-    animation-delay: 0s, var(--simply-toast-hide-delay);
+  animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards;
+  animation-delay: 0s, var(--simply-toast-hide-delay);
 }
diff --git a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css
index 2b66fd1..41fc669 100644
--- a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css
+++ b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css
@@ -11,77 +11,77 @@
   --simply-toolbar-title-height: var(--simply-toolbar-height);
 }
 .simply-toolbar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-top: 1px solid var(--simply-toolbar-button-primary);
-    background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%);
-    white-space: nowrap;
-    min-width: 100%;
-    min-height: var(--simply-toolbar-height);
-    display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-top: 1px solid var(--simply-toolbar-button-primary);
+  background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%);
+  white-space: nowrap;
+  min-width: 100%;
+  min-height: var(--simply-toolbar-height);
+  display: flex;
 }
 .simply-toolbar-title {
-    padding: 0 10px;
-    font-size: 16px;
-    width: var(--simply-toolbar-title-width);
-    font-family: sans-serif;
-    text-transform: none;
-    border: 0;
-    height: var(--simply-toolbar-button-height);
-    cursor: default;
-    border-radius: 0;
-    box-shadow: 0;
-    outline: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+  padding: 0 10px;
+  font-size: 16px;
+  width: var(--simply-toolbar-title-width);
+  font-family: sans-serif;
+  text-transform: none;
+  border: 0;
+  height: var(--simply-toolbar-button-height);
+  cursor: default;
+  border-radius: 0;
+  box-shadow: 0;
+  outline: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .simply-toolbar-highlight {
-    background: var(--ds-primary-gradient-bump);
-    color: var(--ds-primary-contrast);
+  background: var(--ds-primary-gradient-bump);
+  color: var(--ds-primary-contrast);
 }
 .simply-toolbar .simply-toolbar-title {
-    margin-top: 0;
+  margin-top: 0;
 }
 .simply-toolbar-spacer {
-    border-left: 1px solid #ccc;
-    height: var(--simply-toolbar-height);
-    position: absolute;
-    display: inline-block;
+  border-left: 1px solid #ccc;
+  height: var(--simply-toolbar-height);
+  position: absolute;
+  display: inline-block;
 }
 .simply-toolbar-button-expands:not(.ds-selected)::after {
-    content: "";
-    display: block;
-    position: absolute;
-    bottom: 6px;
-    left: 50%;
-    margin-left: -3px;
-    width: 0;
-    border-top: 3px solid #888;
-    border-bottom: 0;
-    border-left: 3px solid transparent;
-    border-right: 3px solid transparent;
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 6px;
+  left: 50%;
+  margin-left: -3px;
+  width: 0;
+  border-top: 3px solid #888;
+  border-bottom: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
 }
 .simply-toolbar .simply-toolbar-push-right {
-    margin-left: auto;
+  margin-left: auto;
 }
 .simply-toolbar-title img {
-    height: 30px;
+  height: 30px;
 }
 .simply-toolbar input[type="text"] {
-    margin-right:0;
-    margin-bottom: 0;
-    margin-top: 10px;
-    font-size: small;
-    line-height: 1.2em;
-    height: 35px;
+  margin-right:0;
+  margin-bottom: 0;
+  margin-top: 10px;
+  font-size: small;
+  line-height: 1.2em;
+  height: 35px;
 }
 .simply-toolbar.simply-main-toolbar {
-    border-top-width: 5px;
+  border-top-width: 5px;
 }
 
 .simply-toolbar {
-    background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%);
-    color: var(--ds-white);
+  background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%);
+  color: var(--ds-white);
 }
\ No newline at end of file
diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index d8ab835..2cf27c2 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -490,83 +490,81 @@
       @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i');
       
       html, body {
-      	margin: 0;
-      	padding: 0;
-      	width: 100%;
+        margin: 0;
+        padding: 0;
+        width: 100%;
       }
       main {
-      	padding: 0px 15px;
+        padding: 0px 15px;
       }
       [data-simply-command] {
-      	cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */
+        cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */
       }
       textarea {
-      	width: 100%;
-      	height: 120px;
-      	color: #e0e0e0;
-      	background-color: #151515;
-      	border: 0;
-      	padding: 10px;
+        width: 100%;
+        height: 120px;
+        color: #e0e0e0;
+        background-color: #151515;
+        border: 0;
+        padding: 10px;
       }
       input:not([type]),
       input[type=text] {
-      	color: #e0e0e0;
-      	background-color: #151515;
-      	border: 0;
-      	padding: 5px;
+        color: #e0e0e0;
+        background-color: #151515;
+        border: 0;
+        padding: 5px;
       }
-      /* simplycode-box */
-      
       /* simplycode-component-list */
       :root {
-          --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing));
-          --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing));
-          --simplycode-component-list-min-colwidth: 10rem;
-          --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size));
-          --simplycode-component-list-item-background: var(--ds-grey-90);
-          --simplycode-component-list-item-background-active: var(--ds-grey-80);
-          --simplycode-component-list-item-color: inherit;
-          --simplycode-component-list-item-color-active: inherit;
-          --simplycode-component-list-item-min-height: 4rem;
+        --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing));
+        --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing));
+        --simplycode-component-list-min-colwidth: 10rem;
+        --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size));
+        --simplycode-component-list-item-background: var(--ds-grey-90);
+        --simplycode-component-list-item-background-active: var(--ds-grey-80);
+        --simplycode-component-list-item-color: inherit;
+        --simplycode-component-list-item-color-active: inherit;
+        --simplycode-component-list-item-min-height: 4rem;
       }
       
       .simplycode-component-list {
-          display: grid;
-          grid-column-gap: var(--simplycode-component-list-spacing-column);
-          grid-row-gap: var(--simplycode-component-list-spacing-row);
-          grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr));
+        display: grid;
+        grid-column-gap: var(--simplycode-component-list-spacing-column);
+        grid-row-gap: var(--simplycode-component-list-spacing-row);
+        grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr));
       
-          font-size: var(--simplycode-component-list-item-font-size);
-          line-height: 1.6em;
-          margin-bottom: var(--simplycode-component-list-spacing-column);
+        font-size: var(--simplycode-component-list-item-font-size);
+        line-height: 1.6em;
+        margin-bottom: var(--simplycode-component-list-spacing-column);
       }
       .simplycode-component-list-item {
-          background-color: var(--simplycode-component-list-item-background);
-          padding: calc(0.5 * var(--simplycode-component-list-spacing-column));
-          display: flex;
-          flex-direction: column;
-          flex: 1 1 0;
-      	min-height: var(--simplycode-component-list-item-min-height);
+        background-color: var(--simplycode-component-list-item-background);
+        padding: calc(0.5 * var(--simplycode-component-list-spacing-column));
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 0;
+        min-height: var(--simplycode-component-list-item-min-height);
       }
       
       .simplycode-component-list-item,
       a.simplycode-component-list-item,
       a.simplycode-component-list-item * {
-          text-decoration: none;
-          color: var(--simplycode-component-list-item-color);
+        text-decoration: none;
+        color: var(--simplycode-component-list-item-color);
       }
       .simplycode-component-list-item:hover,
       a.simplycode-component-list-item:hover,
       a.simplycode-component-list-item:active {
-          background-color: var(--simplycode-component-list-item-background-active);
-          color: var(--simplycode-component-list-item-color-active);
+        background-color: var(--simplycode-component-list-item-background-active);
+        color: var(--simplycode-component-list-item-color-active);
       }
       
       .simplycode-component-list-item > :first-child {
-          margin-top: 0;
+        margin-top: 0;
       }
       .simplycode-component-list-item > :last-child {
-          margin-bottom: 0;
+        margin-bottom: 0;
       }
       /* simplycode-ds-mapping */
       /* simplycode-ds-core-colors */
@@ -597,109 +595,109 @@
       
       /* style */
       :root {
-          --simplycode-highlight-dark: #f16623;
-          --simplycode-highlight-light: #ff8003;
-          --simplycode-highlight-color: #fff;
-          --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
+        --simplycode-highlight-dark: #f16623;
+        --simplycode-highlight-light: #ff8003;
+        --simplycode-highlight-color: #fff;
+        --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
       
-          --simplycode-support-dark: #444;
-          --simplycode-support-light: #484848;
-          --simplycode-support-color: #eee;
-          --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
+        --simplycode-support-dark: #444;
+        --simplycode-support-light: #484848;
+        --simplycode-support-color: #eee;
+        --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
       
-          --simplycode-grey-dark: #38393c;
-          --simplycode-grey-medium: #7f8185;
-          --simplycode-grey-light: #e9ebec;
-          --simplycode-grey-dark: #38393c;
-          --simplycode-black: #000;
-          --simplycode-white: #fff;
-          --simplycode-grey-background: var(--simplycode-grey-dark);
+        --simplycode-grey-dark: #38393c;
+        --simplycode-grey-medium: #7f8185;
+        --simplycode-grey-light: #e9ebec;
+        --simplycode-grey-dark: #38393c;
+        --simplycode-black: #000;
+        --simplycode-white: #fff;
+        --simplycode-grey-background: var(--simplycode-grey-dark);
       
-          --simplycode-font-family: 'Alegreya Sans', sans-serif;
-          --simplycode-font-size: 14px;
-          --simplycode-line-height: 1.5em;
-          --simplycode-color: #7f8185;
-          --simplycode-background: #333;
+        --simplycode-font-family: 'Alegreya Sans', sans-serif;
+        --simplycode-font-size: 14px;
+        --simplycode-line-height: 1.5em;
+        --simplycode-color: #7f8185;
+        --simplycode-background: #333;
       }
       
       /* general styling on default elements */
       
       html, body {
-          margin: 0;
-          padding: 0;
-          font-family: var(--simplycode-font-family);
-          font-size: var(--simplycode-font-size);
-          line-height: var(--simplycode-line-height);
-          color: var(--simplycode-color); 
-          background-color: var(--simplycode-background);
+        margin: 0;
+        padding: 0;
+        font-family: var(--simplycode-font-family);
+        font-size: var(--simplycode-font-size);
+        line-height: var(--simplycode-line-height);
+        color: var(--simplycode-color); 
+        background-color: var(--simplycode-background);
       }
       body {
-          overflow-y: scroll;
+        overflow-y: scroll;
       }
       body:last-child {
-          margin-bottom: 1.5em;
+        margin-bottom: 1.5em;
       }
       h1 {
-          font-size: 2em;
-          font-weight: 300;
-          line-height: 1.1em;
-          margin: 0;
-          margin-bottom: 0.5em;
+        font-size: 2em;
+        font-weight: 300;
+        line-height: 1.1em;
+        margin: 0;
+        margin-bottom: 0.5em;
       }
       
       h2 {
-          font-size: 1.6em;
-          font-weight: 400;
-          line-height: 1.1em;
-          margin: 0;
-          margin-bottom: 0.5em;
+        font-size: 1.6em;
+        font-weight: 400;
+        line-height: 1.1em;
+        margin: 0;
+        margin-bottom: 0.5em;
       }
       
       * {
-          box-sizing: border-box;
+        box-sizing: border-box;
       }
       
       img {
-          display: block;
-          max-width: 100%;
+        display: block;
+        max-width: 100%;
       }
       
       a {
-          color: var(--simplycode-highlight-dark);
+        color: var(--simplycode-highlight-dark);
       }
       a:visited {
-          color: var(--simplycode-highlight-dark);
+        color: var(--simplycode-highlight-dark);
       }
       
       /* custom styling for custom elements */
       
       .simplycode-button,
       a.simplycode-button {
-          background: var(--simplycode-support-background);
-          color: var(--simplycode-support-color);
-          padding: 0.3em 0.5em;
-          margin: 0 0.3em;
-          border: 1px solid #ccc;
-          text-decoration: none;
+        background: var(--simplycode-support-background);
+        color: var(--simplycode-support-color);
+        padding: 0.3em 0.5em;
+        margin: 0 0.3em;
+        border: 1px solid #ccc;
+        text-decoration: none;
       }
       
       .simplycode-button:first-child {
-          margin-left: 0;
+        margin-left: 0;
       }
       .simplycode-button:last-child {
-          margin-right: 0;
+        margin-right: 0;
       }
       .simplycode-button.highlight {
-          background: var(--simplycode-highlight-background);
-          color: var(--simplycode-highlight-color);
+        background: var(--simplycode-highlight-background);
+        color: var(--simplycode-highlight-color);
       }
       
       .text-content {
-          padding: 2.2375em;
-          max-width: 50em;
+        padding: 2.2375em;
+        max-width: 50em;
       }
       .text-content *:first-child {
-          margin-top: 0;
+        margin-top: 0;
       }
       
       body {
@@ -713,251 +711,251 @@
           "nav pane pane"
       }
       body > header {
-          grid-area: header;
+        grid-area: header;
       }
       body > nav {
-          grid-area: nav;
+        grid-area: nav;
       }
       body > div.main {
-          grid-area: pane;
+        grid-area: pane;
       }
       nav ul ul .simplycode-expand {
-          display: none;
-          padding: 0 1.7em;
+        display: none;
+        padding: 0 1.7em;
       }
       nav ul {
-          list-style: none;
-          margin: 0 0.5em;
-          padding: 0;
+        list-style: none;
+        margin: 0 0.5em;
+        padding: 0;
       }
       nav ul ul {
-          padding: 0 1.7em;
+        padding: 0 1.7em;
       }
       
       nav > ul > li[data-simply-command=expandMenu][open]::before {
-          content: "[-] ";
-          font-family: monospace;
+        content: "[-] ";
+        font-family: monospace;
       }
       nav > ul > li[data-simply-command=expandMenu]::before {
-          content: "[+] ";
-          font-family: monospace;
+        content: "[+] ";
+        font-family: monospace;
       }
       .simplycode-part {
-          margin-top: 1em;
+        margin-top: 1em;
       }
       
       .simplycode-part-header {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
       }
       .simplycode-part-header .simplycode-options {
-          text-align: right;
+        text-align: right;
       }
       .simplycode-part .simplycode-tab {
-          padding: 10px 5px;
-          margin: 0;
-          background-color: #151515;
-          color: #ddd;
-          border: 0;
-          text-align: center;
-          margin-right: 5px;
+        padding: 10px 5px;
+        margin: 0;
+        background-color: #151515;
+        color: #ddd;
+        border: 0;
+        text-align: center;
+        margin-right: 5px;
       }
       .simplycode-part .simplycode-tab input[type=radio] {
-          display: none;
+        display: none;
       }
       .simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
-          font-weight: bold;
-          border-bottom: 2px solid var(--simplycode-support-background);
+        font-weight: bold;
+        border-bottom: 2px solid var(--simplycode-support-background);
       }
       .simplycode-part .simplycode-editor-code {
-          display: grid;
-          grid-template-columns: 1fr;
+        display: grid;
+        grid-template-columns: 1fr;
       }
       .simplycode-part .simplycode-dual {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
       }
       .simplycode-part .simplycode-dual-preview {
-          display: grid;
-          grid-template-columns: auto 480px;
+        display: grid;
+        grid-template-columns: auto 480px;
       }
       .simplycode-test-header {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
       }
       .simplycode-test-header .simplycode-options {
-          text-align: right;
+        text-align: right;
       }
       .simplycode-component summary {
-          font-size: 1.2em;
+        font-size: 1.2em;
       }
       .simplycode-component {
-          margin: 10px 0px;
+        margin: 10px 0px;
       }
       .simplycode-header {
-          display: grid;
-          grid-template-columns: 3fr 1fr;
-          vertical-align: middle;
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        vertical-align: middle;
       }
       .simplycode-header .simplycode-controls {
-          text-align: right;
+        text-align: right;
       }
       .simplycode-header h1 span {
-          white-space: nowrap;
+        white-space: nowrap;
       }
       .simplycode-component summary .simplycode-controls {
-          display: none;
-          margin-left: 1em;
+        display: none;
+        margin-left: 1em;
       }
       .simplycode-component[open] summary .simplycode-controls {
-          display: inline-block;
+        display: inline-block;
       }
       header {
-          position: fixed;
-          padding: 8px 10px 6px 10px;
-          left: 0;
-          right: 0;
-          display: grid;
-          grid-template-columns: 2fr 1fr;
-          background-color: #404040;
-          border-bottom: 2px solid #2222;
-          vertical-align: middle;
-          z-index: 200;
+        position: fixed;
+        padding: 8px 10px 6px 10px;
+        left: 0;
+        right: 0;
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        background-color: #404040;
+        border-bottom: 2px solid #2222;
+        vertical-align: middle;
+        z-index: 200;
       }
       header h1 {
-          margin: 0;
+        margin: 0;
       }
       header .simplycode-controls {
-          padding-top: 5px;
-          padding-right: 5px;
-          text-align: right;
+        padding-top: 5px;
+        padding-right: 5px;
+        text-align: right;
       }
       .simplycode-editor-code textarea {
-          margin-top: -1px;
+        margin-top: -1px;
       }
       
       /* Components: Toast */
       
       :root {
-          --simply-toast-height: 60px;
-          --simply-toast-hide-delay: 3s;
-          --simply-toast-show-duration: 0.3s;
-          --simply-toast-hide-duration: 0.5s;
-          --simply-toast-margin: 20px;
-          --simply-toast-error-color: rgb(253, 143, 143);
-          --simply-toats-warning-color: #FFFFCC;
-          --simply-toast-info-color: rgb(140, 180, 250);
-          --simply-toast-white: #FFF;
-          --simply-toast-grey-50: #a8b4c0;
-          --simply-toast-grey-80: #4d565c;
-          --simply-toast-font-size: calc(1.1 * 1rem);
-          --simply-toast-font-weight: 300;
-          --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
-          --simply-toast-color: var(--simplycode-grey-medium);
-          --simply-toast-contrast: var(--simplycode-grey-medium);
-          --simply-toast-background:var(--simplycode-white);
-          --simply-toast-heading-weight: 900;
-          --simply-toast-heading-multiplier: 1.1;
+        --simply-toast-height: 60px;
+        --simply-toast-hide-delay: 3s;
+        --simply-toast-show-duration: 0.3s;
+        --simply-toast-hide-duration: 0.5s;
+        --simply-toast-margin: 20px;
+        --simply-toast-error-color: rgb(253, 143, 143);
+        --simply-toats-warning-color: #FFFFCC;
+        --simply-toast-info-color: rgb(140, 180, 250);
+        --simply-toast-white: #FFF;
+        --simply-toast-grey-50: #a8b4c0;
+        --simply-toast-grey-80: #4d565c;
+        --simply-toast-font-size: calc(1.1 * 1rem);
+        --simply-toast-font-weight: 300;
+        --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
+        --simply-toast-color: var(--simplycode-grey-medium);
+        --simply-toast-contrast: var(--simplycode-grey-medium);
+        --simply-toast-background:var(--simplycode-white);
+        --simply-toast-heading-weight: 900;
+        --simply-toast-heading-multiplier: 1.1;
       }
       
       ul.simply-toasts,
       ol.simply-toasts,
       .simply-toasts {
-          position: fixed;
-          right: 0;
-          top: 0;
-          z-index: 101;
-          display: block;
-          list-style: none;
-          margin: 0;
-          padding: 0;
-          max-width: 50%;
-          min-width: 300px;
+        position: fixed;
+        right: 0;
+        top: 0;
+        z-index: 101;
+        display: block;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        max-width: 50%;
+        min-width: 300px;
       }
       .simply-toast,
       li.simply-toast {
-          min-width: 300px;
-          float: right;
-          clear: both;
-          margin-right: 0;
-          margin-top: 60px;
-          background-color: var(--simply-toast-grey-80);
-          color: var(--simply-toast-white);
-          display: block;
-          border-left: 10px solid var(--simply-toast-grey-50);
-          padding: 20px;
-          border-radius: 2px;
+        min-width: 300px;
+        float: right;
+        clear: both;
+        margin-right: 0;
+        margin-top: 60px;
+        background-color: var(--simply-toast-grey-80);
+        color: var(--simply-toast-white);
+        display: block;
+        border-left: 10px solid var(--simply-toast-grey-50);
+        padding: 20px;
+        border-radius: 2px;
       }
       .simply-toast-error,
       li.simply-toast-error {
-          border-color: var(--simply-toast-error-color);
+        border-color: var(--simply-toast-error-color);
       }
       .simply-toast-info,
       li.simply-toast-info {
-          border-color: var(--simply-toast-info-color);
+        border-color: var(--simply-toast-info-color);
       }
       .simply-toast-warning,
       li.simply-toast-warning {
-          border-color: var(--simply-toast-warning-color);
+        border-color: var(--simply-toast-warning-color);
       }
       
       @keyframes simply-toast-show {
-          0% {
-              transform: scaleX(0);
-              transform-origin: right;
-              opacity: 0;
-          }
-          50% {
-              transform: scaleX(0);
-              transform-origin: right;
-              opacity: 0;
-          }
-          75% {
-              opacity: 1;
-          }
-          100% {
-              transform: scaleX(1);
-              transform-origin: right;
-              opacity: 1;
-          }
+        0% {
+          transform: scaleX(0);
+          transform-origin: right;
+          opacity: 0;
+        }
+        50% {
+          transform: scaleX(0);
+          transform-origin: right;
+          opacity: 0;
+        }
+        75% {
+          opacity: 1;
+        }
+        100% {
+          transform: scaleX(1);
+          transform-origin: right;
+          opacity: 1;
+        }
       }
       @keyframes simply-toast-hide {
-          0% {
-              transform: scaleX(1);
-              transform-origin: right;
-              opacity: 1;
-          }
-          50% {
-              opacity: 1;
-          }
-          100% {
-              transform: scaleX(0);
-              transform-origin: right;
-              opacity: 0;
-          }
+        0% {
+          transform: scaleX(1);
+          transform-origin: right;
+          opacity: 1;
+        }
+        50% {
+          opacity: 1;
+        }
+        100% {
+          transform: scaleX(0);
+          transform-origin: right;
+          opacity: 0;
+        }
       }
       @keyframes simply-toast-move {
-          0% {
-              transform: translateY(-80px); /* toast-height + toast-margin */
-          }
-          100% {
-              transform: translateY(0px);
-          }
+        0% {
+          transform: translateY(-80px); /* toast-height + toast-margin */
+        }
+        100% {
+          transform: translateY(0px);
+        }
       }
       .simply-toast[data-state="new"] {
-          animation: simply-toast-show var(--simply-toast-show-duration) forwards;
+        animation: simply-toast-show var(--simply-toast-show-duration) forwards;
       }
       .simply-toast-autohide[data-state="new"] {
-          animation: simply-toast-show var(--simply-toast-show-duration);
-          animation-delay: 0s;
+        animation: simply-toast-show var(--simply-toast-show-duration);
+        animation-delay: 0s;
       }
       .simply-toast-autohide.simply-toast-animated[data-state="shown"] {
-          animation: simply-toast-hide var(--simply-toast-hide-duration) forwards;
-          animation-delay: calc(var(--simply-toast-hide-delay) - var(--simply-toast-show-duration));
+        animation: simply-toast-hide var(--simply-toast-hide-duration) forwards;
+        animation-delay: calc(var(--simply-toast-hide-delay) - var(--simply-toast-show-duration));
       }
       .simply-toast-autohide:not(.simply-toast-animated)[data-state="shown"] {
-          animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards;
-          animation-delay: 0s, var(--simply-toast-hide-delay);
+        animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards;
+        animation-delay: 0s, var(--simply-toast-hide-delay);
       }
       
       /* QUnit iframe */
@@ -1149,79 +1147,79 @@
         --simply-toolbar-title-height: var(--simply-toolbar-height);
       }
       .simply-toolbar {
-          position: absolute;
-          top: 0;
-          left: 0;
-          border-top: 1px solid var(--simply-toolbar-button-primary);
-          background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%);
-          white-space: nowrap;
-          min-width: 100%;
-          min-height: var(--simply-toolbar-height);
-          display: flex;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-top: 1px solid var(--simply-toolbar-button-primary);
+        background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%);
+        white-space: nowrap;
+        min-width: 100%;
+        min-height: var(--simply-toolbar-height);
+        display: flex;
       }
       .simply-toolbar-title {
-          padding: 0 10px;
-          font-size: 16px;
-          width: var(--simply-toolbar-title-width);
-          font-family: sans-serif;
-          text-transform: none;
-          border: 0;
-          height: var(--simply-toolbar-button-height);
-          cursor: default;
-          border-radius: 0;
-          box-shadow: 0;
-          outline: 0;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
+        padding: 0 10px;
+        font-size: 16px;
+        width: var(--simply-toolbar-title-width);
+        font-family: sans-serif;
+        text-transform: none;
+        border: 0;
+        height: var(--simply-toolbar-button-height);
+        cursor: default;
+        border-radius: 0;
+        box-shadow: 0;
+        outline: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
       }
       .simply-toolbar-highlight {
-          background: var(--ds-primary-gradient-bump);
-          color: var(--ds-primary-contrast);
+        background: var(--ds-primary-gradient-bump);
+        color: var(--ds-primary-contrast);
       }
       .simply-toolbar .simply-toolbar-title {
-          margin-top: 0;
+        margin-top: 0;
       }
       .simply-toolbar-spacer {
-          border-left: 1px solid #ccc;
-          height: var(--simply-toolbar-height);
-          position: absolute;
-          display: inline-block;
+        border-left: 1px solid #ccc;
+        height: var(--simply-toolbar-height);
+        position: absolute;
+        display: inline-block;
       }
       .simply-toolbar-button-expands:not(.ds-selected)::after {
-          content: "";
-          display: block;
-          position: absolute;
-          bottom: 6px;
-          left: 50%;
-          margin-left: -3px;
-          width: 0;
-          border-top: 3px solid #888;
-          border-bottom: 0;
-          border-left: 3px solid transparent;
-          border-right: 3px solid transparent;
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: 6px;
+        left: 50%;
+        margin-left: -3px;
+        width: 0;
+        border-top: 3px solid #888;
+        border-bottom: 0;
+        border-left: 3px solid transparent;
+        border-right: 3px solid transparent;
       }
       .simply-toolbar .simply-toolbar-push-right {
-          margin-left: auto;
+        margin-left: auto;
       }
       .simply-toolbar-title img {
-          height: 30px;
+        height: 30px;
       }
       .simply-toolbar input[type="text"] {
-          margin-right:0;
-          margin-bottom: 0;
-          margin-top: 10px;
-          font-size: small;
-          line-height: 1.2em;
-          height: 35px;
+        margin-right:0;
+        margin-bottom: 0;
+        margin-top: 10px;
+        font-size: small;
+        line-height: 1.2em;
+        height: 35px;
       }
       .simply-toolbar.simply-main-toolbar {
-          border-top-width: 5px;
+        border-top-width: 5px;
       }
       
       .simply-toolbar {
-          background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%);
-          color: var(--ds-white);
+        background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%);
+        color: var(--ds-white);
       }
     </style>
     <!-- /Component CSS -->
diff --git a/www/index.html b/www/index.html
index d8ab835..2cf27c2 100644
--- a/www/index.html
+++ b/www/index.html
@@ -490,83 +490,81 @@
       @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i');
       
       html, body {
-      	margin: 0;
-      	padding: 0;
-      	width: 100%;
+        margin: 0;
+        padding: 0;
+        width: 100%;
       }
       main {
-      	padding: 0px 15px;
+        padding: 0px 15px;
       }
       [data-simply-command] {
-      	cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */
+        cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */
       }
       textarea {
-      	width: 100%;
-      	height: 120px;
-      	color: #e0e0e0;
-      	background-color: #151515;
-      	border: 0;
-      	padding: 10px;
+        width: 100%;
+        height: 120px;
+        color: #e0e0e0;
+        background-color: #151515;
+        border: 0;
+        padding: 10px;
       }
       input:not([type]),
       input[type=text] {
-      	color: #e0e0e0;
-      	background-color: #151515;
-      	border: 0;
-      	padding: 5px;
+        color: #e0e0e0;
+        background-color: #151515;
+        border: 0;
+        padding: 5px;
       }
-      /* simplycode-box */
-      
       /* simplycode-component-list */
       :root {
-          --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing));
-          --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing));
-          --simplycode-component-list-min-colwidth: 10rem;
-          --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size));
-          --simplycode-component-list-item-background: var(--ds-grey-90);
-          --simplycode-component-list-item-background-active: var(--ds-grey-80);
-          --simplycode-component-list-item-color: inherit;
-          --simplycode-component-list-item-color-active: inherit;
-          --simplycode-component-list-item-min-height: 4rem;
+        --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing));
+        --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing));
+        --simplycode-component-list-min-colwidth: 10rem;
+        --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size));
+        --simplycode-component-list-item-background: var(--ds-grey-90);
+        --simplycode-component-list-item-background-active: var(--ds-grey-80);
+        --simplycode-component-list-item-color: inherit;
+        --simplycode-component-list-item-color-active: inherit;
+        --simplycode-component-list-item-min-height: 4rem;
       }
       
       .simplycode-component-list {
-          display: grid;
-          grid-column-gap: var(--simplycode-component-list-spacing-column);
-          grid-row-gap: var(--simplycode-component-list-spacing-row);
-          grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr));
+        display: grid;
+        grid-column-gap: var(--simplycode-component-list-spacing-column);
+        grid-row-gap: var(--simplycode-component-list-spacing-row);
+        grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr));
       
-          font-size: var(--simplycode-component-list-item-font-size);
-          line-height: 1.6em;
-          margin-bottom: var(--simplycode-component-list-spacing-column);
+        font-size: var(--simplycode-component-list-item-font-size);
+        line-height: 1.6em;
+        margin-bottom: var(--simplycode-component-list-spacing-column);
       }
       .simplycode-component-list-item {
-          background-color: var(--simplycode-component-list-item-background);
-          padding: calc(0.5 * var(--simplycode-component-list-spacing-column));
-          display: flex;
-          flex-direction: column;
-          flex: 1 1 0;
-      	min-height: var(--simplycode-component-list-item-min-height);
+        background-color: var(--simplycode-component-list-item-background);
+        padding: calc(0.5 * var(--simplycode-component-list-spacing-column));
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 0;
+        min-height: var(--simplycode-component-list-item-min-height);
       }
       
       .simplycode-component-list-item,
       a.simplycode-component-list-item,
       a.simplycode-component-list-item * {
-          text-decoration: none;
-          color: var(--simplycode-component-list-item-color);
+        text-decoration: none;
+        color: var(--simplycode-component-list-item-color);
       }
       .simplycode-component-list-item:hover,
       a.simplycode-component-list-item:hover,
       a.simplycode-component-list-item:active {
-          background-color: var(--simplycode-component-list-item-background-active);
-          color: var(--simplycode-component-list-item-color-active);
+        background-color: var(--simplycode-component-list-item-background-active);
+        color: var(--simplycode-component-list-item-color-active);
       }
       
       .simplycode-component-list-item > :first-child {
-          margin-top: 0;
+        margin-top: 0;
       }
       .simplycode-component-list-item > :last-child {
-          margin-bottom: 0;
+        margin-bottom: 0;
       }
       /* simplycode-ds-mapping */
       /* simplycode-ds-core-colors */
@@ -597,109 +595,109 @@
       
       /* style */
       :root {
-          --simplycode-highlight-dark: #f16623;
-          --simplycode-highlight-light: #ff8003;
-          --simplycode-highlight-color: #fff;
-          --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
+        --simplycode-highlight-dark: #f16623;
+        --simplycode-highlight-light: #ff8003;
+        --simplycode-highlight-color: #fff;
+        --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
       
-          --simplycode-support-dark: #444;
-          --simplycode-support-light: #484848;
-          --simplycode-support-color: #eee;
-          --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
+        --simplycode-support-dark: #444;
+        --simplycode-support-light: #484848;
+        --simplycode-support-color: #eee;
+        --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
       
-          --simplycode-grey-dark: #38393c;
-          --simplycode-grey-medium: #7f8185;
-          --simplycode-grey-light: #e9ebec;
-          --simplycode-grey-dark: #38393c;
-          --simplycode-black: #000;
-          --simplycode-white: #fff;
-          --simplycode-grey-background: var(--simplycode-grey-dark);
+        --simplycode-grey-dark: #38393c;
+        --simplycode-grey-medium: #7f8185;
+        --simplycode-grey-light: #e9ebec;
+        --simplycode-grey-dark: #38393c;
+        --simplycode-black: #000;
+        --simplycode-white: #fff;
+        --simplycode-grey-background: var(--simplycode-grey-dark);
       
-          --simplycode-font-family: 'Alegreya Sans', sans-serif;
-          --simplycode-font-size: 14px;
-          --simplycode-line-height: 1.5em;
-          --simplycode-color: #7f8185;
-          --simplycode-background: #333;
+        --simplycode-font-family: 'Alegreya Sans', sans-serif;
+        --simplycode-font-size: 14px;
+        --simplycode-line-height: 1.5em;
+        --simplycode-color: #7f8185;
+        --simplycode-background: #333;
       }
       
       /* general styling on default elements */
       
       html, body {
-          margin: 0;
-          padding: 0;
-          font-family: var(--simplycode-font-family);
-          font-size: var(--simplycode-font-size);
-          line-height: var(--simplycode-line-height);
-          color: var(--simplycode-color); 
-          background-color: var(--simplycode-background);
+        margin: 0;
+        padding: 0;
+        font-family: var(--simplycode-font-family);
+        font-size: var(--simplycode-font-size);
+        line-height: var(--simplycode-line-height);
+        color: var(--simplycode-color); 
+        background-color: var(--simplycode-background);
       }
       body {
-          overflow-y: scroll;
+        overflow-y: scroll;
       }
       body:last-child {
-          margin-bottom: 1.5em;
+        margin-bottom: 1.5em;
       }
       h1 {
-          font-size: 2em;
-          font-weight: 300;
-          line-height: 1.1em;
-          margin: 0;
-          margin-bottom: 0.5em;
+        font-size: 2em;
+        font-weight: 300;
+        line-height: 1.1em;
+        margin: 0;
+        margin-bottom: 0.5em;
       }
       
       h2 {
-          font-size: 1.6em;
-          font-weight: 400;
-          line-height: 1.1em;
-          margin: 0;
-          margin-bottom: 0.5em;
+        font-size: 1.6em;
+        font-weight: 400;
+        line-height: 1.1em;
+        margin: 0;
+        margin-bottom: 0.5em;
       }
       
       * {
-          box-sizing: border-box;
+        box-sizing: border-box;
       }
       
       img {
-          display: block;
-          max-width: 100%;
+        display: block;
+        max-width: 100%;
       }
       
       a {
-          color: var(--simplycode-highlight-dark);
+        color: var(--simplycode-highlight-dark);
       }
       a:visited {
-          color: var(--simplycode-highlight-dark);
+        color: var(--simplycode-highlight-dark);
       }
       
       /* custom styling for custom elements */
       
       .simplycode-button,
       a.simplycode-button {
-          background: var(--simplycode-support-background);
-          color: var(--simplycode-support-color);
-          padding: 0.3em 0.5em;
-          margin: 0 0.3em;
-          border: 1px solid #ccc;
-          text-decoration: none;
+        background: var(--simplycode-support-background);
+        color: var(--simplycode-support-color);
+        padding: 0.3em 0.5em;
+        margin: 0 0.3em;
+        border: 1px solid #ccc;
+        text-decoration: none;
       }
       
       .simplycode-button:first-child {
-          margin-left: 0;
+        margin-left: 0;
       }
       .simplycode-button:last-child {
-          margin-right: 0;
+        margin-right: 0;
       }
       .simplycode-button.highlight {
-          background: var(--simplycode-highlight-background);
-          color: var(--simplycode-highlight-color);
+        background: var(--simplycode-highlight-background);
+        color: var(--simplycode-highlight-color);
       }
       
       .text-content {
-          padding: 2.2375em;
-          max-width: 50em;
+        padding: 2.2375em;
+        max-width: 50em;
       }
       .text-content *:first-child {
-          margin-top: 0;
+        margin-top: 0;
       }
       
       body {
@@ -713,251 +711,251 @@
           "nav pane pane"
       }
       body > header {
-          grid-area: header;
+        grid-area: header;
       }
       body > nav {
-          grid-area: nav;
+        grid-area: nav;
       }
       body > div.main {
-          grid-area: pane;
+        grid-area: pane;
       }
       nav ul ul .simplycode-expand {
-          display: none;
-          padding: 0 1.7em;
+        display: none;
+        padding: 0 1.7em;
       }
       nav ul {
-          list-style: none;
-          margin: 0 0.5em;
-          padding: 0;
+        list-style: none;
+        margin: 0 0.5em;
+        padding: 0;
       }
       nav ul ul {
-          padding: 0 1.7em;
+        padding: 0 1.7em;
       }
       
       nav > ul > li[data-simply-command=expandMenu][open]::before {
-          content: "[-] ";
-          font-family: monospace;
+        content: "[-] ";
+        font-family: monospace;
       }
       nav > ul > li[data-simply-command=expandMenu]::before {
-          content: "[+] ";
-          font-family: monospace;
+        content: "[+] ";
+        font-family: monospace;
       }
       .simplycode-part {
-          margin-top: 1em;
+        margin-top: 1em;
       }
       
       .simplycode-part-header {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
       }
       .simplycode-part-header .simplycode-options {
-          text-align: right;
+        text-align: right;
       }
       .simplycode-part .simplycode-tab {
-          padding: 10px 5px;
-          margin: 0;
-          background-color: #151515;
-          color: #ddd;
-          border: 0;
-          text-align: center;
-          margin-right: 5px;
+        padding: 10px 5px;
+        margin: 0;
+        background-color: #151515;
+        color: #ddd;
+        border: 0;
+        text-align: center;
+        margin-right: 5px;
       }
       .simplycode-part .simplycode-tab input[type=radio] {
-          display: none;
+        display: none;
       }
       .simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
-          font-weight: bold;
-          border-bottom: 2px solid var(--simplycode-support-background);
+        font-weight: bold;
+        border-bottom: 2px solid var(--simplycode-support-background);
       }
       .simplycode-part .simplycode-editor-code {
-          display: grid;
-          grid-template-columns: 1fr;
+        display: grid;
+        grid-template-columns: 1fr;
       }
       .simplycode-part .simplycode-dual {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
       }
       .simplycode-part .simplycode-dual-preview {
-          display: grid;
-          grid-template-columns: auto 480px;
+        display: grid;
+        grid-template-columns: auto 480px;
       }
       .simplycode-test-header {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
       }
       .simplycode-test-header .simplycode-options {
-          text-align: right;
+        text-align: right;
       }
       .simplycode-component summary {
-          font-size: 1.2em;
+        font-size: 1.2em;
       }
       .simplycode-component {
-          margin: 10px 0px;
+        margin: 10px 0px;
       }
       .simplycode-header {
-          display: grid;
-          grid-template-columns: 3fr 1fr;
-          vertical-align: middle;
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        vertical-align: middle;
       }
       .simplycode-header .simplycode-controls {
-          text-align: right;
+        text-align: right;
       }
       .simplycode-header h1 span {
-          white-space: nowrap;
+        white-space: nowrap;
       }
       .simplycode-component summary .simplycode-controls {
-          display: none;
-          margin-left: 1em;
+        display: none;
+        margin-left: 1em;
       }
       .simplycode-component[open] summary .simplycode-controls {
-          display: inline-block;
+        display: inline-block;
       }
       header {
-          position: fixed;
-          padding: 8px 10px 6px 10px;
-          left: 0;
-          right: 0;
-          display: grid;
-          grid-template-columns: 2fr 1fr;
-          background-color: #404040;
-          border-bottom: 2px solid #2222;
-          vertical-align: middle;
-          z-index: 200;
+        position: fixed;
+        padding: 8px 10px 6px 10px;
+        left: 0;
+        right: 0;
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        background-color: #404040;
+        border-bottom: 2px solid #2222;
+        vertical-align: middle;
+        z-index: 200;
       }
       header h1 {
-          margin: 0;
+        margin: 0;
       }
       header .simplycode-controls {
-          padding-top: 5px;
-          padding-right: 5px;
-          text-align: right;
+        padding-top: 5px;
+        padding-right: 5px;
+        text-align: right;
       }
       .simplycode-editor-code textarea {
-          margin-top: -1px;
+        margin-top: -1px;
       }
       
       /* Components: Toast */
       
       :root {
-          --simply-toast-height: 60px;
-          --simply-toast-hide-delay: 3s;
-          --simply-toast-show-duration: 0.3s;
-          --simply-toast-hide-duration: 0.5s;
-          --simply-toast-margin: 20px;
-          --simply-toast-error-color: rgb(253, 143, 143);
-          --simply-toats-warning-color: #FFFFCC;
-          --simply-toast-info-color: rgb(140, 180, 250);
-          --simply-toast-white: #FFF;
-          --simply-toast-grey-50: #a8b4c0;
-          --simply-toast-grey-80: #4d565c;
-          --simply-toast-font-size: calc(1.1 * 1rem);
-          --simply-toast-font-weight: 300;
-          --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
-          --simply-toast-color: var(--simplycode-grey-medium);
-          --simply-toast-contrast: var(--simplycode-grey-medium);
-          --simply-toast-background:var(--simplycode-white);
-          --simply-toast-heading-weight: 900;
-          --simply-toast-heading-multiplier: 1.1;
+        --simply-toast-height: 60px;
+        --simply-toast-hide-delay: 3s;
+        --simply-toast-show-duration: 0.3s;
+        --simply-toast-hide-duration: 0.5s;
+        --simply-toast-margin: 20px;
+        --simply-toast-error-color: rgb(253, 143, 143);
+        --simply-toats-warning-color: #FFFFCC;
+        --simply-toast-info-color: rgb(140, 180, 250);
+        --simply-toast-white: #FFF;
+        --simply-toast-grey-50: #a8b4c0;
+        --simply-toast-grey-80: #4d565c;
+        --simply-toast-font-size: calc(1.1 * 1rem);
+        --simply-toast-font-weight: 300;
+        --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
+        --simply-toast-color: var(--simplycode-grey-medium);
+        --simply-toast-contrast: var(--simplycode-grey-medium);
+        --simply-toast-background:var(--simplycode-white);
+        --simply-toast-heading-weight: 900;
+        --simply-toast-heading-multiplier: 1.1;
       }
       
       ul.simply-toasts,
       ol.simply-toasts,
       .simply-toasts {
-          position: fixed;
-          right: 0;
-          top: 0;
-          z-index: 101;
-          display: block;
-          list-style: none;
-          margin: 0;
-          padding: 0;
-          max-width: 50%;
-          min-width: 300px;
+        position: fixed;
+        right: 0;
+        top: 0;
+        z-index: 101;
+        display: block;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        max-width: 50%;
+        min-width: 300px;
       }
       .simply-toast,
       li.simply-toast {
-          min-width: 300px;
-          float: right;
-          clear: both;
-          margin-right: 0;
-          margin-top: 60px;
-          background-color: var(--simply-toast-grey-80);
-          color: var(--simply-toast-white);
-          display: block;
-          border-left: 10px solid var(--simply-toast-grey-50);
-          padding: 20px;
-          border-radius: 2px;
+        min-width: 300px;
+        float: right;
+        clear: both;
+        margin-right: 0;
+        margin-top: 60px;
+        background-color: var(--simply-toast-grey-80);
+        color: var(--simply-toast-white);
+        display: block;
+        border-left: 10px solid var(--simply-toast-grey-50);
+        padding: 20px;
+        border-radius: 2px;
       }
       .simply-toast-error,
       li.simply-toast-error {
-          border-color: var(--simply-toast-error-color);
+        border-color: var(--simply-toast-error-color);
       }
       .simply-toast-info,
       li.simply-toast-info {
-          border-color: var(--simply-toast-info-color);
+        border-color: var(--simply-toast-info-color);
       }
       .simply-toast-warning,
       li.simply-toast-warning {
-          border-color: var(--simply-toast-warning-color);
+        border-color: var(--simply-toast-warning-color);
       }
       
       @keyframes simply-toast-show {
-          0% {
-              transform: scaleX(0);
-              transform-origin: right;
-              opacity: 0;
-          }
-          50% {
-              transform: scaleX(0);
-              transform-origin: right;
-              opacity: 0;
-          }
-          75% {
-              opacity: 1;
-          }
-          100% {
-              transform: scaleX(1);
-              transform-origin: right;
-              opacity: 1;
-          }
+        0% {
+          transform: scaleX(0);
+          transform-origin: right;
+          opacity: 0;
+        }
+        50% {
+          transform: scaleX(0);
+          transform-origin: right;
+          opacity: 0;
+        }
+        75% {
+          opacity: 1;
+        }
+        100% {
+          transform: scaleX(1);
+          transform-origin: right;
+          opacity: 1;
+        }
       }
       @keyframes simply-toast-hide {
-          0% {
-              transform: scaleX(1);
-              transform-origin: right;
-              opacity: 1;
-          }
-          50% {
-              opacity: 1;
-          }
-          100% {
-              transform: scaleX(0);
-              transform-origin: right;
-              opacity: 0;
-          }
+        0% {
+          transform: scaleX(1);
+          transform-origin: right;
+          opacity: 1;
+        }
+        50% {
+          opacity: 1;
+        }
+        100% {
+          transform: scaleX(0);
+          transform-origin: right;
+          opacity: 0;
+        }
       }
       @keyframes simply-toast-move {
-          0% {
-              transform: translateY(-80px); /* toast-height + toast-margin */
-          }
-          100% {
-              transform: translateY(0px);
-          }
+        0% {
+          transform: translateY(-80px); /* toast-height + toast-margin */
+        }
+        100% {
+          transform: translateY(0px);
+        }
       }
       .simply-toast[data-state="new"] {
-          animation: simply-toast-show var(--simply-toast-show-duration) forwards;
+        animation: simply-toast-show var(--simply-toast-show-duration) forwards;
       }
       .simply-toast-autohide[data-state="new"] {
-          animation: simply-toast-show var(--simply-toast-show-duration);
-          animation-delay: 0s;
+        animation: simply-toast-show var(--simply-toast-show-duration);
+        animation-delay: 0s;
       }
       .simply-toast-autohide.simply-toast-animated[data-state="shown"] {
-          animation: simply-toast-hide var(--simply-toast-hide-duration) forwards;
-          animation-delay: calc(var(--simply-toast-hide-delay) - var(--simply-toast-show-duration));
+        animation: simply-toast-hide var(--simply-toast-hide-duration) forwards;
+        animation-delay: calc(var(--simply-toast-hide-delay) - var(--simply-toast-show-duration));
       }
       .simply-toast-autohide:not(.simply-toast-animated)[data-state="shown"] {
-          animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards;
-          animation-delay: 0s, var(--simply-toast-hide-delay);
+        animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards;
+        animation-delay: 0s, var(--simply-toast-hide-delay);
       }
       
       /* QUnit iframe */
@@ -1149,79 +1147,79 @@
         --simply-toolbar-title-height: var(--simply-toolbar-height);
       }
       .simply-toolbar {
-          position: absolute;
-          top: 0;
-          left: 0;
-          border-top: 1px solid var(--simply-toolbar-button-primary);
-          background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%);
-          white-space: nowrap;
-          min-width: 100%;
-          min-height: var(--simply-toolbar-height);
-          display: flex;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-top: 1px solid var(--simply-toolbar-button-primary);
+        background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%);
+        white-space: nowrap;
+        min-width: 100%;
+        min-height: var(--simply-toolbar-height);
+        display: flex;
       }
       .simply-toolbar-title {
-          padding: 0 10px;
-          font-size: 16px;
-          width: var(--simply-toolbar-title-width);
-          font-family: sans-serif;
-          text-transform: none;
-          border: 0;
-          height: var(--simply-toolbar-button-height);
-          cursor: default;
-          border-radius: 0;
-          box-shadow: 0;
-          outline: 0;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
+        padding: 0 10px;
+        font-size: 16px;
+        width: var(--simply-toolbar-title-width);
+        font-family: sans-serif;
+        text-transform: none;
+        border: 0;
+        height: var(--simply-toolbar-button-height);
+        cursor: default;
+        border-radius: 0;
+        box-shadow: 0;
+        outline: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
       }
       .simply-toolbar-highlight {
-          background: var(--ds-primary-gradient-bump);
-          color: var(--ds-primary-contrast);
+        background: var(--ds-primary-gradient-bump);
+        color: var(--ds-primary-contrast);
       }
       .simply-toolbar .simply-toolbar-title {
-          margin-top: 0;
+        margin-top: 0;
       }
       .simply-toolbar-spacer {
-          border-left: 1px solid #ccc;
-          height: var(--simply-toolbar-height);
-          position: absolute;
-          display: inline-block;
+        border-left: 1px solid #ccc;
+        height: var(--simply-toolbar-height);
+        position: absolute;
+        display: inline-block;
       }
       .simply-toolbar-button-expands:not(.ds-selected)::after {
-          content: "";
-          display: block;
-          position: absolute;
-          bottom: 6px;
-          left: 50%;
-          margin-left: -3px;
-          width: 0;
-          border-top: 3px solid #888;
-          border-bottom: 0;
-          border-left: 3px solid transparent;
-          border-right: 3px solid transparent;
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: 6px;
+        left: 50%;
+        margin-left: -3px;
+        width: 0;
+        border-top: 3px solid #888;
+        border-bottom: 0;
+        border-left: 3px solid transparent;
+        border-right: 3px solid transparent;
       }
       .simply-toolbar .simply-toolbar-push-right {
-          margin-left: auto;
+        margin-left: auto;
       }
       .simply-toolbar-title img {
-          height: 30px;
+        height: 30px;
       }
       .simply-toolbar input[type="text"] {
-          margin-right:0;
-          margin-bottom: 0;
-          margin-top: 10px;
-          font-size: small;
-          line-height: 1.2em;
-          height: 35px;
+        margin-right:0;
+        margin-bottom: 0;
+        margin-top: 10px;
+        font-size: small;
+        line-height: 1.2em;
+        height: 35px;
       }
       .simply-toolbar.simply-main-toolbar {
-          border-top-width: 5px;
+        border-top-width: 5px;
       }
       
       .simply-toolbar {
-          background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%);
-          color: var(--ds-white);
+        background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%);
+        color: var(--ds-white);
       }
     </style>
     <!-- /Component CSS -->

From 5b5a866aedf43462d76a8b32a54320f715afa6d4 Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 10:21:45 +0100
Subject: [PATCH 04/13] restore component descriptions

---
 www/api/data/components/0-ds-styling/meta.json                  | 2 +-
 www/api/data/components/data-format/dataApi/mergeComponent.js   | 1 +
 .../data/pages/base-components/dataApi/listBaseComponents.js    | 1 +
 www/api/data/pages/component-list/dataApi/listComponents.js     | 1 +
 www/api/data/pages/pages/dataApi/listPages.js                   | 1 +
 5 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/www/api/data/components/0-ds-styling/meta.json b/www/api/data/components/0-ds-styling/meta.json
index 54efe5f..9926ec8 100644
--- a/www/api/data/components/0-ds-styling/meta.json
+++ b/www/api/data/components/0-ds-styling/meta.json
@@ -1 +1 @@
-{"id":"0-ds-styling","description":""}
\ No newline at end of file
+{"id":"0-ds-styling","description":"DS base styling"}
\ No newline at end of file
diff --git a/www/api/data/components/data-format/dataApi/mergeComponent.js b/www/api/data/components/data-format/dataApi/mergeComponent.js
index cb516c2..29f78d0 100644
--- a/www/api/data/components/data-format/dataApi/mergeComponent.js
+++ b/www/api/data/components/data-format/dataApi/mergeComponent.js
@@ -4,6 +4,7 @@ function(component) {
     switch(componentPart.id) {
       case "meta.json":
         componentPart.id = "meta";
+        component.description = componentPart.description;
         break;
       case "routes":
         if (typeof componentPart.contents === "object") {
diff --git a/www/api/data/pages/base-components/dataApi/listBaseComponents.js b/www/api/data/pages/base-components/dataApi/listBaseComponents.js
index 4e984d0..449bb69 100644
--- a/www/api/data/pages/base-components/dataApi/listBaseComponents.js
+++ b/www/api/data/pages/base-components/dataApi/listBaseComponents.js
@@ -9,6 +9,7 @@ function() {
     .then(function(components) {
     components.forEach(function(component) {
       simplyDataApi.mergeComponent(component.contents);
+      component.description = component.contents.description;
     });
     return components;
   });
diff --git a/www/api/data/pages/component-list/dataApi/listComponents.js b/www/api/data/pages/component-list/dataApi/listComponents.js
index 8befb02..75a9072 100644
--- a/www/api/data/pages/component-list/dataApi/listComponents.js
+++ b/www/api/data/pages/component-list/dataApi/listComponents.js
@@ -9,6 +9,7 @@ function() {
     .then(function(components) {
     components.forEach(function(component) {
       simplyDataApi.mergeComponent(component.contents);
+      component.description = component.contents.description;
     });
     return components;
   });
diff --git a/www/api/data/pages/pages/dataApi/listPages.js b/www/api/data/pages/pages/dataApi/listPages.js
index 411fc99..43ce671 100644
--- a/www/api/data/pages/pages/dataApi/listPages.js
+++ b/www/api/data/pages/pages/dataApi/listPages.js
@@ -9,6 +9,7 @@ function() {
     .then(function(components) {
     components.forEach(function(component) {
       simplyDataApi.mergeComponent(component.contents);
+      component.description = component.contents.description;
     });
     return components;
   });

From c22f4568dd8b6efd752c6ab6ca424d32c29f8cee Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 10:22:16 +0100
Subject: [PATCH 05/13] update generated

---
 www/api/data/generated.html | 4 ++++
 www/index.html              | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index 2cf27c2..de0552b 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -1392,6 +1392,7 @@
               switch(componentPart.id) {
                 case "meta.json":
                   componentPart.id = "meta";
+                  component.description = componentPart.description;
                   break;
                 case "routes":
                   if (typeof componentPart.contents === "object") {
@@ -2133,6 +2134,7 @@
               .then(function(components) {
               components.forEach(function(component) {
                 simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
               });
               return components;
             });
@@ -2194,6 +2196,7 @@
               .then(function(components) {
               components.forEach(function(component) {
                 simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
               });
               return components;
             });
@@ -2316,6 +2319,7 @@
               .then(function(components) {
               components.forEach(function(component) {
                 simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
               });
               return components;
             });
diff --git a/www/index.html b/www/index.html
index 2cf27c2..de0552b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -1392,6 +1392,7 @@
               switch(componentPart.id) {
                 case "meta.json":
                   componentPart.id = "meta";
+                  component.description = componentPart.description;
                   break;
                 case "routes":
                   if (typeof componentPart.contents === "object") {
@@ -2133,6 +2134,7 @@
               .then(function(components) {
               components.forEach(function(component) {
                 simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
               });
               return components;
             });
@@ -2194,6 +2196,7 @@
               .then(function(components) {
               components.forEach(function(component) {
                 simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
               });
               return components;
             });
@@ -2316,6 +2319,7 @@
               .then(function(components) {
               components.forEach(function(component) {
                 simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
               });
               return components;
             });

From ea8b939ddd57cde0b5295b57e06b9d4eb175b0a9 Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 11:17:43 +0100
Subject: [PATCH 06/13] add descriptions

---
 www/api/data/base-components/font-cocon/meta.json | 2 +-
 www/api/data/components/1-styling/meta.json       | 2 +-
 www/api/data/components/data-format/meta.json     | 2 +-
 www/api/data/components/simply-logo/meta.json     | 2 +-
 www/api/data/components/simply-toolbar/meta.json  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/www/api/data/base-components/font-cocon/meta.json b/www/api/data/base-components/font-cocon/meta.json
index 91ca20e..394acbf 100644
--- a/www/api/data/base-components/font-cocon/meta.json
+++ b/www/api/data/base-components/font-cocon/meta.json
@@ -1 +1 @@
-{"id":"font-cocon","description":""}
\ No newline at end of file
+{"id":"font-cocon","description":"Cocon Regular font (simply logo font)"}
\ No newline at end of file
diff --git a/www/api/data/components/1-styling/meta.json b/www/api/data/components/1-styling/meta.json
index 1d9da25..832a27f 100644
--- a/www/api/data/components/1-styling/meta.json
+++ b/www/api/data/components/1-styling/meta.json
@@ -1 +1 @@
-{"id":"1-styling","description":""}
\ No newline at end of file
+{"id":"1-styling","description":"Styles for simplycode"}
\ No newline at end of file
diff --git a/www/api/data/components/data-format/meta.json b/www/api/data/components/data-format/meta.json
index bdf1b24..40fbf96 100644
--- a/www/api/data/components/data-format/meta.json
+++ b/www/api/data/components/data-format/meta.json
@@ -1 +1 @@
-{"id":"data-format","description":""}
\ No newline at end of file
+{"id":"data-format","description":"Utilities for component data handling"}
\ No newline at end of file
diff --git a/www/api/data/components/simply-logo/meta.json b/www/api/data/components/simply-logo/meta.json
index 0e3c082..9a5b2be 100644
--- a/www/api/data/components/simply-logo/meta.json
+++ b/www/api/data/components/simply-logo/meta.json
@@ -1 +1 @@
-{"id":"simply-logo","description":""}
\ No newline at end of file
+{"id":"simply-logo","description":"Editable version of the Simply logo"}
\ No newline at end of file
diff --git a/www/api/data/components/simply-toolbar/meta.json b/www/api/data/components/simply-toolbar/meta.json
index 1aeab60..c199e69 100644
--- a/www/api/data/components/simply-toolbar/meta.json
+++ b/www/api/data/components/simply-toolbar/meta.json
@@ -1 +1 @@
-{"id":"simply-toolbar","description":""}
\ No newline at end of file
+{"id":"simply-toolbar","description":"The main header menubar"}
\ No newline at end of file

From 21a18df06da5a2b2589c4785ba6467adbe4cb189 Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 11:19:40 +0100
Subject: [PATCH 07/13] fix auto-preview

---
 .../components/components-generic/commands/initEditors.js    | 1 +
 www/api/data/pages/component/routes/component.js             | 5 -----
 www/api/data/pages/page/routes/page.js                       | 5 -----
 3 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/www/api/data/components/components-generic/commands/initEditors.js b/www/api/data/components/components-generic/commands/initEditors.js
index b953a13..d778feb 100644
--- a/www/api/data/components/components-generic/commands/initEditors.js
+++ b/www/api/data/components/components-generic/commands/initEditors.js
@@ -6,4 +6,5 @@ function(el) {
   }
   simplyApp.commands.codeMirrorInit();
   simplyApp.commands.autoRunTests();
+  simplyApp.commands.autoRunPreviews();
 }
\ No newline at end of file
diff --git a/www/api/data/pages/component/routes/component.js b/www/api/data/pages/component/routes/component.js
index b6b461b..e37f081 100644
--- a/www/api/data/pages/component/routes/component.js
+++ b/www/api/data/pages/component/routes/component.js
@@ -42,10 +42,5 @@ function(params) {
     editor.pageData.parts = parts;
     editor.pageData.count = count;
     editor.pageData.page = "Edit component";
-  })
-    .then(function() {
-    setTimeout(function() { // FIXME: Wait for the CSS to be available;
-      simplyApp.commands.autoRunPreviews();
-    }, 1000);
   });
 }
\ No newline at end of file
diff --git a/www/api/data/pages/page/routes/page.js b/www/api/data/pages/page/routes/page.js
index 4cd5e51..0b15660 100644
--- a/www/api/data/pages/page/routes/page.js
+++ b/www/api/data/pages/page/routes/page.js
@@ -42,10 +42,5 @@ function(params) {
     editor.pageData.parts = parts;
     editor.pageData.count = count;
     editor.pageData.page = "Edit page";
-  })
-    .then(function() {
-    setTimeout(function() { // FIXME: Wait for the CSS to be available;
-      simplyApp.commands.autoRunPreviews();
-    }, 1000);
   });
 }
\ No newline at end of file

From 79a0508f34f2dff01e545755fce894f516acd922 Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 11:19:47 +0100
Subject: [PATCH 08/13] update generated

---
 www/api/data/generated.html | 121 +++++++++++++++++++++++++++++++++---
 1 file changed, 111 insertions(+), 10 deletions(-)

diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index de0552b..e32aa6f 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -2703,6 +2703,10 @@
             },
             "resetPreview" : function(el) {
               return new Promise(function(resolve, reject) {
+                if (el.contentDocument.childNodes[0].innerText == "") {
+                  resolve(el);
+                  return;
+                }
                 var newRunner = el.cloneNode(false);
                 newRunner.addEventListener("load", function() {
                   resolve(newRunner);
@@ -2832,6 +2836,7 @@
               }
               simplyApp.commands.codeMirrorInit();
               simplyApp.commands.autoRunTests();
+              simplyApp.commands.autoRunPreviews();
             },
             "collapseMenu" : function(el) {
               if (!el.hasAttribute("open")) {
@@ -3167,11 +3172,6 @@
                 editor.pageData.parts = parts;
                 editor.pageData.count = count;
                 editor.pageData.page = "Edit component";
-              })
-                .then(function() {
-                setTimeout(function() { // FIXME: Wait for the CSS to be available;
-                  simplyApp.commands.autoRunPreviews();
-                }, 1000);
               });
             },
             "#pages/:component" : function(params) {
@@ -3218,11 +3218,6 @@
                 editor.pageData.parts = parts;
                 editor.pageData.count = count;
                 editor.pageData.page = "Edit page";
-              })
-                .then(function() {
-                setTimeout(function() { // FIXME: Wait for the CSS to be available;
-                  simplyApp.commands.autoRunPreviews();
-                }, 1000);
               });
             },
             "#base" : function() {
@@ -4499,6 +4494,21 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentRawApi"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20base%20component">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentHeadHtml"></simply-render>
+      <simply-render rel="componentBodyHtml"></simply-render>
+      <simply-render rel="componentFootHtml"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentRawApi"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="Base components">
       <main>
       <h1>Base components</h1>
@@ -4545,6 +4555,23 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20component">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit component: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentComponentTemplate"></simply-render>
+      <simply-render rel="componentComponentCss"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentDataApi"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentTransformers"></simply-render>
+      <simply-render rel="componentDataSources"></simply-render>
+      <simply-render rel="componentSorters"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="List components">
       <main>
       <h1>Components</h1>
@@ -4592,6 +4619,23 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20page">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit page: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentPageTemplate"></simply-render>
+      <simply-render rel="componentPageCss"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentDataApi"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentTransformers"></simply-render>
+      <simply-render rel="componentDataSources"></simply-render>
+      <simply-render rel="componentSorters"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="Edit page frame">
       <main>
       <div class="simplycode-header">
@@ -5184,6 +5228,63 @@ <h1>App preview</h1>
         }
       });
     </script>
+    <!-- Auto%20run%20preview -->
+    <script>
+      document.addEventListener("simply-data-changed", function(event) {
+        if (
+          (event.data.dataBinding.parentKey == "/component/parts/") ||
+          (event.data.dataBinding.parentKey.indexOf("/component/parts/") == 0)
+        ) {
+          // Handle changes of the part name
+          var component = event.data.dataBinding.parentKey.split("/")[3];
+          var componentNameField = simplyApp.actions.getComponentNameField(component);
+          
+          if (event.data.arguments[0] == componentNameField) {
+            var newname = event.data.arguments[1];
+            var oldname = event.data.arguments[2];
+    
+            editor.pageData.app[component].forEach(function(appPart) {
+              if (appPart[componentNameField] == oldname) {
+                appPart[componentNameField] = newname;
+              }
+            });
+          }
+    
+          if (typeof autoRunPreviewTimeout !== "undefined") {
+            window.clearTimeout(autoRunPreviewTimeout);
+          }
+          autoRunPreviewTimeout = window.setTimeout(function() {
+            // Update the app data for the preview
+            for (component in editor.pageData.component.parts) {
+              if (!editor.pageData.app[component]) {
+                editor.pageData.app[component] = [];
+              }
+              var componentNameField = simplyApp.actions.getComponentNameField(component);
+              editor.pageData.component.parts[component].forEach(function(part) {
+                var found = false;
+                editor.pageData.app[component].forEach(function(appPart, appIndex) {
+                  if (part[componentNameField] && (appPart[componentNameField] == part[componentNameField])) {
+                    for (i in part) {
+                      editor.pageData.app[component][appIndex][i] = part[i];
+                    }
+                    found = true;
+                  }
+                });
+                if (!found) {
+                  editor.pageData.app[component].push(JSON.parse(JSON.stringify(part)));
+                }
+              });
+            }
+    
+            document.querySelectorAll("[data-simply-transformer=simplyPreviewComponent]").forEach(function(element) {
+              element.innerHTML = editor.transformers.simplyPreviewComponent.render.call(element, element.dataBinding.get());
+            });
+    
+            simplyApp.commands.autoRunPreviews()
+          }, 500);
+        }
+      });
+    </script>
     <!-- Auto run tests -->
     <script>
       document.addEventListener("simply-data-changed", function(event) {

From 5c1b0fbf6216b2e3a30e6e556ea1fcd14138208e Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 11:19:58 +0100
Subject: [PATCH 09/13] update index

---
 www/index.html | 121 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 111 insertions(+), 10 deletions(-)

diff --git a/www/index.html b/www/index.html
index de0552b..e32aa6f 100644
--- a/www/index.html
+++ b/www/index.html
@@ -2703,6 +2703,10 @@
             },
             "resetPreview" : function(el) {
               return new Promise(function(resolve, reject) {
+                if (el.contentDocument.childNodes[0].innerText == "") {
+                  resolve(el);
+                  return;
+                }
                 var newRunner = el.cloneNode(false);
                 newRunner.addEventListener("load", function() {
                   resolve(newRunner);
@@ -2832,6 +2836,7 @@
               }
               simplyApp.commands.codeMirrorInit();
               simplyApp.commands.autoRunTests();
+              simplyApp.commands.autoRunPreviews();
             },
             "collapseMenu" : function(el) {
               if (!el.hasAttribute("open")) {
@@ -3167,11 +3172,6 @@
                 editor.pageData.parts = parts;
                 editor.pageData.count = count;
                 editor.pageData.page = "Edit component";
-              })
-                .then(function() {
-                setTimeout(function() { // FIXME: Wait for the CSS to be available;
-                  simplyApp.commands.autoRunPreviews();
-                }, 1000);
               });
             },
             "#pages/:component" : function(params) {
@@ -3218,11 +3218,6 @@
                 editor.pageData.parts = parts;
                 editor.pageData.count = count;
                 editor.pageData.page = "Edit page";
-              })
-                .then(function() {
-                setTimeout(function() { // FIXME: Wait for the CSS to be available;
-                  simplyApp.commands.autoRunPreviews();
-                }, 1000);
               });
             },
             "#base" : function() {
@@ -4499,6 +4494,21 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentRawApi"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20base%20component">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentHeadHtml"></simply-render>
+      <simply-render rel="componentBodyHtml"></simply-render>
+      <simply-render rel="componentFootHtml"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentRawApi"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="Base components">
       <main>
       <h1>Base components</h1>
@@ -4545,6 +4555,23 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20component">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit component: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentComponentTemplate"></simply-render>
+      <simply-render rel="componentComponentCss"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentDataApi"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentTransformers"></simply-render>
+      <simply-render rel="componentDataSources"></simply-render>
+      <simply-render rel="componentSorters"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="List components">
       <main>
       <h1>Components</h1>
@@ -4592,6 +4619,23 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20page">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit page: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentPageTemplate"></simply-render>
+      <simply-render rel="componentPageCss"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentDataApi"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentTransformers"></simply-render>
+      <simply-render rel="componentDataSources"></simply-render>
+      <simply-render rel="componentSorters"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="Edit page frame">
       <main>
       <div class="simplycode-header">
@@ -5184,6 +5228,63 @@ <h1>App preview</h1>
         }
       });
     </script>
+    <!-- Auto%20run%20preview -->
+    <script>
+      document.addEventListener("simply-data-changed", function(event) {
+        if (
+          (event.data.dataBinding.parentKey == "/component/parts/") ||
+          (event.data.dataBinding.parentKey.indexOf("/component/parts/") == 0)
+        ) {
+          // Handle changes of the part name
+          var component = event.data.dataBinding.parentKey.split("/")[3];
+          var componentNameField = simplyApp.actions.getComponentNameField(component);
+          
+          if (event.data.arguments[0] == componentNameField) {
+            var newname = event.data.arguments[1];
+            var oldname = event.data.arguments[2];
+    
+            editor.pageData.app[component].forEach(function(appPart) {
+              if (appPart[componentNameField] == oldname) {
+                appPart[componentNameField] = newname;
+              }
+            });
+          }
+    
+          if (typeof autoRunPreviewTimeout !== "undefined") {
+            window.clearTimeout(autoRunPreviewTimeout);
+          }
+          autoRunPreviewTimeout = window.setTimeout(function() {
+            // Update the app data for the preview
+            for (component in editor.pageData.component.parts) {
+              if (!editor.pageData.app[component]) {
+                editor.pageData.app[component] = [];
+              }
+              var componentNameField = simplyApp.actions.getComponentNameField(component);
+              editor.pageData.component.parts[component].forEach(function(part) {
+                var found = false;
+                editor.pageData.app[component].forEach(function(appPart, appIndex) {
+                  if (part[componentNameField] && (appPart[componentNameField] == part[componentNameField])) {
+                    for (i in part) {
+                      editor.pageData.app[component][appIndex][i] = part[i];
+                    }
+                    found = true;
+                  }
+                });
+                if (!found) {
+                  editor.pageData.app[component].push(JSON.parse(JSON.stringify(part)));
+                }
+              });
+            }
+    
+            document.querySelectorAll("[data-simply-transformer=simplyPreviewComponent]").forEach(function(element) {
+              element.innerHTML = editor.transformers.simplyPreviewComponent.render.call(element, element.dataBinding.get());
+            });
+    
+            simplyApp.commands.autoRunPreviews()
+          }, 500);
+        }
+      });
+    </script>
     <!-- Auto run tests -->
     <script>
       document.addEventListener("simply-data-changed", function(event) {

From 68b3830eb1a37e64b9141fdb75d2a4c24f88fa5e Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 11:35:35 +0100
Subject: [PATCH 10/13] cleanup overrides

---
 .../componentCss/simplycode-ds-mapping.css    | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css b/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css
index 0aef625..623bd91 100644
--- a/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css
+++ b/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css
@@ -1,19 +1,12 @@
 /* simplycode-ds-core-colors */
 :root {
-  --ds-simplycode: #ae47ff;
-  --ds-simplycode-light:#c880ff;
-  --ds-simplycode-dark:#8d00f8;
-  --ds-simplycode-bump:#b65cfc;
-  --ds-simplycode-contrast: var(--ds-white);
-  --ds-simplycode-gradient: linear-gradient( 180deg, var(--ds-simplycode-light), var(--ds-simplycode-dark) );
-  --ds-simplycode-gradient-bump: linear-gradient( 180deg, var(--ds-simplycode-bump), var(--ds-simplycode-light) 95%, var(--ds-simplycode-dark) 100%);
-
-  --ds-primary: var(--ds-simplycode);
-  --ds-primary-dark: var(--ds-simplycode-dark);
-  --ds-primary-contrast: var(--ds-white);
-  --ds-primary-light: var(--ds-simplycode-light);
-  --ds-primary-gradient: var(--ds-simplycode-gradient);
-  --ds-primary-gradient-bump: var(--ds-simplycode-gradient-bump);
+  --ds-primary: var(--simplycode-highlight-light);
+  --ds-primary-dark: var(--simplycode-highlight-dark);
+  --ds-primary-contrast: var(--simplycode-highlight-color);
+  --ds-primary-light: var(--simplycode-highlight-light);
+  --ds-primary-gradient: var(--simplycode-highlight-gradient);
+  --ds-primary-bump: #b65cfc;
+  --ds-primary-gradient-bump: linear-gradient( 180deg, var(--ds-primary-bump), var(--simplycode-highlight-light) 95%, var(--simplycode-highlight-dark) 100%);
 
   --ds-support: #06CC06;
   --ds-support-dark: #05BB05;

From fc484bd0d9d218d2db032d71080b35219411414b Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 11:35:49 +0100
Subject: [PATCH 11/13] update generated

---
 www/api/data/generated.html | 131 ++----------------------------------
 www/index.html              | 131 ++----------------------------------
 2 files changed, 14 insertions(+), 248 deletions(-)

diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index e32aa6f..dbe42ac 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -569,20 +569,13 @@
       /* simplycode-ds-mapping */
       /* simplycode-ds-core-colors */
       :root {
-        --ds-simplycode: #ae47ff;
-        --ds-simplycode-light:#c880ff;
-        --ds-simplycode-dark:#8d00f8;
-        --ds-simplycode-bump:#b65cfc;
-        --ds-simplycode-contrast: var(--ds-white);
-        --ds-simplycode-gradient: linear-gradient( 180deg, var(--ds-simplycode-light), var(--ds-simplycode-dark) );
-        --ds-simplycode-gradient-bump: linear-gradient( 180deg, var(--ds-simplycode-bump), var(--ds-simplycode-light) 95%, var(--ds-simplycode-dark) 100%);
-      
-        --ds-primary: var(--ds-simplycode);
-        --ds-primary-dark: var(--ds-simplycode-dark);
-        --ds-primary-contrast: var(--ds-white);
-        --ds-primary-light: var(--ds-simplycode-light);
-        --ds-primary-gradient: var(--ds-simplycode-gradient);
-        --ds-primary-gradient-bump: var(--ds-simplycode-gradient-bump);
+        --ds-primary: var(--simplycode-highlight-light);
+        --ds-primary-dark: var(--simplycode-highlight-dark);
+        --ds-primary-contrast: var(--simplycode-highlight-color);
+        --ds-primary-light: var(--simplycode-highlight-light);
+        --ds-primary-gradient: var(--simplycode-highlight-gradient);
+        --ds-primary-bump: #b65cfc;
+        --ds-primary-gradient-bump: linear-gradient( 180deg, var(--ds-primary-bump), var(--simplycode-highlight-light) 95%, var(--simplycode-highlight-dark) 100%);
       
         --ds-support: #06CC06;
         --ds-support-dark: #05BB05;
@@ -2703,10 +2696,6 @@
             },
             "resetPreview" : function(el) {
               return new Promise(function(resolve, reject) {
-                if (el.contentDocument.childNodes[0].innerText == "") {
-                  resolve(el);
-                  return;
-                }
                 var newRunner = el.cloneNode(false);
                 newRunner.addEventListener("load", function() {
                   resolve(newRunner);
@@ -4494,21 +4483,6 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentRawApi"></simply-render>
     </main>
     </template>
-    <template data-simply-template="Edit%20base%20component">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentHeadHtml"></simply-render>
-      <simply-render rel="componentBodyHtml"></simply-render>
-      <simply-render rel="componentFootHtml"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentRawApi"></simply-render>
-    </main>
-    </template>
     <template data-simply-template="Base components">
       <main>
       <h1>Base components</h1>
@@ -4555,23 +4529,6 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
-    <template data-simply-template="Edit%20component">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit component: <span data-simply-field="component.id"></span></h1>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentComponentTemplate"></simply-render>
-      <simply-render rel="componentComponentCss"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentDataApi"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentTransformers"></simply-render>
-      <simply-render rel="componentDataSources"></simply-render>
-      <simply-render rel="componentSorters"></simply-render>
-    </main>
-    </template>
     <template data-simply-template="List components">
       <main>
       <h1>Components</h1>
@@ -4619,23 +4576,6 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
-    <template data-simply-template="Edit%20page">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit page: <span data-simply-field="component.id"></span></h1>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentPageTemplate"></simply-render>
-      <simply-render rel="componentPageCss"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentDataApi"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentTransformers"></simply-render>
-      <simply-render rel="componentDataSources"></simply-render>
-      <simply-render rel="componentSorters"></simply-render>
-    </main>
-    </template>
     <template data-simply-template="Edit page frame">
       <main>
       <div class="simplycode-header">
@@ -5228,63 +5168,6 @@ <h1>App preview</h1>
         }
       });
     </script>
-    <!-- Auto%20run%20preview -->
-    <script>
-      document.addEventListener("simply-data-changed", function(event) {
-        if (
-          (event.data.dataBinding.parentKey == "/component/parts/") ||
-          (event.data.dataBinding.parentKey.indexOf("/component/parts/") == 0)
-        ) {
-          // Handle changes of the part name
-          var component = event.data.dataBinding.parentKey.split("/")[3];
-          var componentNameField = simplyApp.actions.getComponentNameField(component);
-          
-          if (event.data.arguments[0] == componentNameField) {
-            var newname = event.data.arguments[1];
-            var oldname = event.data.arguments[2];
-    
-            editor.pageData.app[component].forEach(function(appPart) {
-              if (appPart[componentNameField] == oldname) {
-                appPart[componentNameField] = newname;
-              }
-            });
-          }
-    
-          if (typeof autoRunPreviewTimeout !== "undefined") {
-            window.clearTimeout(autoRunPreviewTimeout);
-          }
-          autoRunPreviewTimeout = window.setTimeout(function() {
-            // Update the app data for the preview
-            for (component in editor.pageData.component.parts) {
-              if (!editor.pageData.app[component]) {
-                editor.pageData.app[component] = [];
-              }
-              var componentNameField = simplyApp.actions.getComponentNameField(component);
-              editor.pageData.component.parts[component].forEach(function(part) {
-                var found = false;
-                editor.pageData.app[component].forEach(function(appPart, appIndex) {
-                  if (part[componentNameField] && (appPart[componentNameField] == part[componentNameField])) {
-                    for (i in part) {
-                      editor.pageData.app[component][appIndex][i] = part[i];
-                    }
-                    found = true;
-                  }
-                });
-                if (!found) {
-                  editor.pageData.app[component].push(JSON.parse(JSON.stringify(part)));
-                }
-              });
-            }
-    
-            document.querySelectorAll("[data-simply-transformer=simplyPreviewComponent]").forEach(function(element) {
-              element.innerHTML = editor.transformers.simplyPreviewComponent.render.call(element, element.dataBinding.get());
-            });
-    
-            simplyApp.commands.autoRunPreviews()
-          }, 500);
-        }
-      });
-    </script>
     <!-- Auto run tests -->
     <script>
       document.addEventListener("simply-data-changed", function(event) {
diff --git a/www/index.html b/www/index.html
index e32aa6f..dbe42ac 100644
--- a/www/index.html
+++ b/www/index.html
@@ -569,20 +569,13 @@
       /* simplycode-ds-mapping */
       /* simplycode-ds-core-colors */
       :root {
-        --ds-simplycode: #ae47ff;
-        --ds-simplycode-light:#c880ff;
-        --ds-simplycode-dark:#8d00f8;
-        --ds-simplycode-bump:#b65cfc;
-        --ds-simplycode-contrast: var(--ds-white);
-        --ds-simplycode-gradient: linear-gradient( 180deg, var(--ds-simplycode-light), var(--ds-simplycode-dark) );
-        --ds-simplycode-gradient-bump: linear-gradient( 180deg, var(--ds-simplycode-bump), var(--ds-simplycode-light) 95%, var(--ds-simplycode-dark) 100%);
-      
-        --ds-primary: var(--ds-simplycode);
-        --ds-primary-dark: var(--ds-simplycode-dark);
-        --ds-primary-contrast: var(--ds-white);
-        --ds-primary-light: var(--ds-simplycode-light);
-        --ds-primary-gradient: var(--ds-simplycode-gradient);
-        --ds-primary-gradient-bump: var(--ds-simplycode-gradient-bump);
+        --ds-primary: var(--simplycode-highlight-light);
+        --ds-primary-dark: var(--simplycode-highlight-dark);
+        --ds-primary-contrast: var(--simplycode-highlight-color);
+        --ds-primary-light: var(--simplycode-highlight-light);
+        --ds-primary-gradient: var(--simplycode-highlight-gradient);
+        --ds-primary-bump: #b65cfc;
+        --ds-primary-gradient-bump: linear-gradient( 180deg, var(--ds-primary-bump), var(--simplycode-highlight-light) 95%, var(--simplycode-highlight-dark) 100%);
       
         --ds-support: #06CC06;
         --ds-support-dark: #05BB05;
@@ -2703,10 +2696,6 @@
             },
             "resetPreview" : function(el) {
               return new Promise(function(resolve, reject) {
-                if (el.contentDocument.childNodes[0].innerText == "") {
-                  resolve(el);
-                  return;
-                }
                 var newRunner = el.cloneNode(false);
                 newRunner.addEventListener("load", function() {
                   resolve(newRunner);
@@ -4494,21 +4483,6 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentRawApi"></simply-render>
     </main>
     </template>
-    <template data-simply-template="Edit%20base%20component">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentHeadHtml"></simply-render>
-      <simply-render rel="componentBodyHtml"></simply-render>
-      <simply-render rel="componentFootHtml"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentRawApi"></simply-render>
-    </main>
-    </template>
     <template data-simply-template="Base components">
       <main>
       <h1>Base components</h1>
@@ -4555,23 +4529,6 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
-    <template data-simply-template="Edit%20component">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit component: <span data-simply-field="component.id"></span></h1>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentComponentTemplate"></simply-render>
-      <simply-render rel="componentComponentCss"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentDataApi"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentTransformers"></simply-render>
-      <simply-render rel="componentDataSources"></simply-render>
-      <simply-render rel="componentSorters"></simply-render>
-    </main>
-    </template>
     <template data-simply-template="List components">
       <main>
       <h1>Components</h1>
@@ -4619,23 +4576,6 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
-    <template data-simply-template="Edit%20page">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit page: <span data-simply-field="component.id"></span></h1>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentPageTemplate"></simply-render>
-      <simply-render rel="componentPageCss"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentDataApi"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentTransformers"></simply-render>
-      <simply-render rel="componentDataSources"></simply-render>
-      <simply-render rel="componentSorters"></simply-render>
-    </main>
-    </template>
     <template data-simply-template="Edit page frame">
       <main>
       <div class="simplycode-header">
@@ -5228,63 +5168,6 @@ <h1>App preview</h1>
         }
       });
     </script>
-    <!-- Auto%20run%20preview -->
-    <script>
-      document.addEventListener("simply-data-changed", function(event) {
-        if (
-          (event.data.dataBinding.parentKey == "/component/parts/") ||
-          (event.data.dataBinding.parentKey.indexOf("/component/parts/") == 0)
-        ) {
-          // Handle changes of the part name
-          var component = event.data.dataBinding.parentKey.split("/")[3];
-          var componentNameField = simplyApp.actions.getComponentNameField(component);
-          
-          if (event.data.arguments[0] == componentNameField) {
-            var newname = event.data.arguments[1];
-            var oldname = event.data.arguments[2];
-    
-            editor.pageData.app[component].forEach(function(appPart) {
-              if (appPart[componentNameField] == oldname) {
-                appPart[componentNameField] = newname;
-              }
-            });
-          }
-    
-          if (typeof autoRunPreviewTimeout !== "undefined") {
-            window.clearTimeout(autoRunPreviewTimeout);
-          }
-          autoRunPreviewTimeout = window.setTimeout(function() {
-            // Update the app data for the preview
-            for (component in editor.pageData.component.parts) {
-              if (!editor.pageData.app[component]) {
-                editor.pageData.app[component] = [];
-              }
-              var componentNameField = simplyApp.actions.getComponentNameField(component);
-              editor.pageData.component.parts[component].forEach(function(part) {
-                var found = false;
-                editor.pageData.app[component].forEach(function(appPart, appIndex) {
-                  if (part[componentNameField] && (appPart[componentNameField] == part[componentNameField])) {
-                    for (i in part) {
-                      editor.pageData.app[component][appIndex][i] = part[i];
-                    }
-                    found = true;
-                  }
-                });
-                if (!found) {
-                  editor.pageData.app[component].push(JSON.parse(JSON.stringify(part)));
-                }
-              });
-            }
-    
-            document.querySelectorAll("[data-simply-transformer=simplyPreviewComponent]").forEach(function(element) {
-              element.innerHTML = editor.transformers.simplyPreviewComponent.render.call(element, element.dataBinding.get());
-            });
-    
-            simplyApp.commands.autoRunPreviews()
-          }, 500);
-        }
-      });
-    </script>
     <!-- Auto run tests -->
     <script>
       document.addEventListener("simply-data-changed", function(event) {

From 96ed1f843f9ed4b47c8ac6db6f090cb01127682a Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 15:30:17 +0100
Subject: [PATCH 12/13] typofix

---
 .../{simply-toobar-button.css => simply-toolbar-button.css}     | 0
 www/api/data/generated.html                                     | 2 +-
 www/index.html                                                  | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename www/api/data/components/simply-toolbar/componentCss/{simply-toobar-button.css => simply-toolbar-button.css} (100%)

diff --git a/www/api/data/components/simply-toolbar/componentCss/simply-toobar-button.css b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar-button.css
similarity index 100%
rename from www/api/data/components/simply-toolbar/componentCss/simply-toobar-button.css
rename to www/api/data/components/simply-toolbar/componentCss/simply-toolbar-button.css
diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index dbe42ac..1725417 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -1065,7 +1065,7 @@
         --simply-logo-color-primary: var(--simplycode-highlight-dark);
         --simply-logo-color-secondary: white;
       }
-      /* simply-toobar-button */
+      /* simply-toolbar-button */
       .simply-toolbar-button {
         height: var(--simply-toolbar-button-height);
         border-top: 1px solid transparent;
diff --git a/www/index.html b/www/index.html
index dbe42ac..1725417 100644
--- a/www/index.html
+++ b/www/index.html
@@ -1065,7 +1065,7 @@
         --simply-logo-color-primary: var(--simplycode-highlight-dark);
         --simply-logo-color-secondary: white;
       }
-      /* simply-toobar-button */
+      /* simply-toolbar-button */
       .simply-toolbar-button {
         height: var(--simply-toolbar-button-height);
         border-top: 1px solid transparent;

From ed3e68c94fbf97ee4f4c224c952022cebe4ad16f Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 15:32:28 +0100
Subject: [PATCH 13/13] typofix

---
 .../components/simply-toolbar/componentCss/simply-toolbar.css   | 2 +-
 www/api/data/generated.html                                     | 2 +-
 www/index.html                                                  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css
index 41fc669..cd0cd60 100644
--- a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css
+++ b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css
@@ -1,5 +1,5 @@
 :root {
-  --simply-toobar-height: 60px;
+  --simply-toolbar-height: 60px;
   --simply-toolbar-primary: var(--simplycode-highlight-dark);
   --simply-toolbar-button-font: arial, helvetica, sans-serif;
   --simply-toolbar-button-font-size: 11px;
diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index 1725417..2e24dc4 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -1128,7 +1128,7 @@
       }
       /* simply-toolbar */
       :root {
-        --simply-toobar-height: 60px;
+        --simply-toolbar-height: 60px;
         --simply-toolbar-primary: var(--simplycode-highlight-dark);
         --simply-toolbar-button-font: arial, helvetica, sans-serif;
         --simply-toolbar-button-font-size: 11px;
diff --git a/www/index.html b/www/index.html
index 1725417..2e24dc4 100644
--- a/www/index.html
+++ b/www/index.html
@@ -1128,7 +1128,7 @@
       }
       /* simply-toolbar */
       :root {
-        --simply-toobar-height: 60px;
+        --simply-toolbar-height: 60px;
         --simply-toolbar-primary: var(--simplycode-highlight-dark);
         --simply-toolbar-button-font: arial, helvetica, sans-serif;
         --simply-toolbar-button-font-size: 11px;