update snapshots

Author: bourgeoa

test/unit/header/__snapshots__/index.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`createBanner check customized logo... 1`] = `
 <div
-  style="box-shadow: var(--sui-header-shadow, 0px 1px 4px #000000); display: flex; justify-content: space-between; padding: 0 var(--sui-space-lg, 1.5em);"
+  style="background: var(--sui-bg-header, white); box-shadow: var(--sui-header-shadow, 0px 1px 4px #000000); display: flex; justify-content: space-between; padding: 0 var(--sui-space-lg, 1.5em);"
 >
   <a
     href="https://test.com"
@@ -90,7 +90,7 @@ exports[`createBanner check customized logo... 1`] = `
         style="background: var(--sui-bg-panel, white); border: solid 1px var(--sui-text, #000000); border-right: 0; position: absolute; right: 0; top: var(--sui-header-height, 60px); width: 200px; z-index: var(--sui-z-dropdown, 1); display: none;"
       >
         <ul
-          style="undefined"
+          style="list-style: none; margin: 0; padding: 0;"
         >
           <li
             style="border-bottom: solid 1px var(--sui-text, #000000);"
@@ -112,8 +112,51 @@ exports[`createBanner check customized logo... 1`] = `
         style="background: var(--sui-bg-panel, white); border: solid 1px var(--sui-text, #000000); border-right: 0; position: absolute; right: 0; top: var(--sui-header-height, 60px); width: 200px; z-index: var(--sui-z-dropdown, 1); display: none;"
       >
         <ul
-          style="undefined"
+          style="list-style: none; margin: 0; padding: 0;"
         >
+          <li
+            style="undefined font-weight: bold; padding: 0.5em 1em; color: #666; font-size: 0.9em;"
+          >
+            🎨 Themes
+          </li>
+          <li
+            style="border-bottom: solid 1px var(--sui-text, #000000);"
+          >
+            <button
+              style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+            />
+          </li>
+          <li
+            style="border-bottom: solid 1px var(--sui-text, #000000);"
+          >
+            <button
+              style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+            />
+          </li>
+          <li
+            style="border-bottom: solid 1px var(--sui-text, #000000);"
+          >
+            <button
+              style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+            />
+          </li>
+          <li
+            style="border-bottom: solid 1px var(--sui-text, #000000);"
+          >
+            <button
+              style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+            />
+          </li>
+          <li
+            style="border-bottom: solid 1px var(--sui-text, #000000);"
+          >
+            <button
+              style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+            />
+          </li>
+          <li
+            style="border-top: 1px solid #ddd; margin: 0.5em 0;"
+          />
           <li
             style="border-bottom: solid 1px var(--sui-text, #000000);"
           >
@@ -140,7 +183,7 @@ exports[`createBanner check customized logo... 1`] = `
 
 exports[`createBanner creates a link 1`] = `
 <div
-  style="box-shadow: var(--sui-header-shadow, 0px 1px 4px #000000); display: flex; justify-content: space-between; padding: 0 var(--sui-space-lg, 1.5em);"
+  style="background: var(--sui-bg-header, white); box-shadow: var(--sui-header-shadow, 0px 1px 4px #000000); display: flex; justify-content: space-between; padding: 0 var(--sui-space-lg, 1.5em);"
 >
   <a
     href="https://test.com"
@@ -228,7 +271,7 @@ exports[`createBanner creates a link 1`] = `
         style="background: var(--sui-bg-panel, white); border: solid 1px var(--sui-text, #000000); border-right: 0; position: absolute; right: 0; top: var(--sui-header-height, 60px); width: 200px; z-index: var(--sui-z-dropdown, 1); display: none;"
       >
         <ul
-          style="undefined"
+          style="list-style: none; margin: 0; padding: 0;"
         >
           <li
             style="border-bottom: solid 1px var(--sui-text, #000000);"
@@ -250,8 +293,51 @@ exports[`createBanner creates a link 1`] = `
         style="background: var(--sui-bg-panel, white); border: solid 1px var(--sui-text, #000000); border-right: 0; position: absolute; right: 0; top: var(--sui-header-height, 60px); width: 200px; z-index: var(--sui-z-dropdown, 1); display: none;"
       >
         <ul
-          style="undefined"
+          style="list-style: none; margin: 0; padding: 0;"
         >
+          <li
+            style="undefined font-weight: bold; padding: 0.5em 1em; color: #666; font-size: 0.9em;"
+          >
+            🎨 Themes
+          </li>
+          <li
+            style="border-bottom: solid 1px var(--sui-text, #000000);"
+          >
+            <button
+              style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+            />
+          </li>
+          <li
+            style="border-bottom: solid 1px var(--sui-text, #000000);"
+          >
+            <button
+              style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+            />
+          </li>
+          <li
+            style="border-bottom: solid 1px var(--sui-text, #000000);"
+          >
+            <button
+              style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+            />
+          </li>
+          <li
+            style="border-bottom: solid 1px var(--sui-text, #000000);"
+          >
+            <button
+              style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+            />
+          </li>
+          <li
+            style="border-bottom: solid 1px var(--sui-text, #000000);"
+          >
+            <button
+              style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+            />
+          </li>
+          <li
+            style="border-top: 1px solid #ddd; margin: 0.5em 0;"
+          />
           <li
             style="border-bottom: solid 1px var(--sui-text, #000000);"
           >
@@ -286,8 +372,52 @@ exports[`createHelpMenu creates a menu.... 1`] = `
     style="background: var(--sui-bg-panel, white); border: solid 1px var(--sui-text, #000000); border-right: 0; position: absolute; right: 0; top: var(--sui-header-height, 60px); width: 200px; z-index: var(--sui-z-dropdown, 1); display: none;"
   >
     <ul
-      style="undefined"
-    />
+      style="list-style: none; margin: 0; padding: 0;"
+    >
+      <li
+        style="undefined font-weight: bold; padding: 0.5em 1em; color: #666; font-size: 0.9em;"
+      >
+        🎨 Themes
+      </li>
+      <li
+        style="border-bottom: solid 1px var(--sui-text, #000000);"
+      >
+        <button
+          style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+        />
+      </li>
+      <li
+        style="border-bottom: solid 1px var(--sui-text, #000000);"
+      >
+        <button
+          style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+        />
+      </li>
+      <li
+        style="border-bottom: solid 1px var(--sui-text, #000000);"
+      >
+        <button
+          style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+        />
+      </li>
+      <li
+        style="border-bottom: solid 1px var(--sui-text, #000000);"
+      >
+        <button
+          style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+        />
+      </li>
+      <li
+        style="border-bottom: solid 1px var(--sui-text, #000000);"
+      >
+        <button
+          style="background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;"
+        />
+      </li>
+      <li
+        style="border-top: 1px solid #ddd; margin: 0.5em 0;"
+      />
+    </ul>
   </nav>
   <button
     style="background: none; border: 0; cursor: pointer; width: var(--sui-header-height, 60px); height: var(--sui-header-height, 60px);"
@@ -400,7 +530,7 @@ exports[`createUserMenu creates a menu.... 1`] = `
     style="background: var(--sui-bg-panel, white); border: solid 1px var(--sui-text, #000000); border-right: 0; position: absolute; right: 0; top: var(--sui-header-height, 60px); width: 200px; z-index: var(--sui-z-dropdown, 1); display: none;"
   >
     <ul
-      style="undefined"
+      style="list-style: none; margin: 0; padding: 0;"
     >
       <li
         style="border-bottom: solid 1px var(--sui-text, #000000);"

test/unit/widgets/__snapshots__/error.test.ts.snap

@@ -6,12 +6,12 @@ exports[`errorMessageBlock creates an error message div 1`] = `
 >
   my error message
   <button
-    style="width: 2em; height: 2em;"
+    style="width: var(--sui-icon-size, 2em); height: var(--sui-icon-size, 2em);"
     type="button"
   >
     <img
       src="https://solidos.github.io/solid-ui/src/icons/noun_1180156.svg"
-      style="width: 2em; height: 2em; opacity: 0.3;"
+      style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em); opacity: 0.3;"
       title="Cancel"
     />
   </button>
@@ -24,12 +24,12 @@ exports[`errorMessageBlock escapes the HTML 1`] = `
 >
   my &lt;script&gt; kiddie &lt;/script&gt; message
   <button
-    style="width: 2em; height: 2em;"
+    style="width: var(--sui-icon-size, 2em); height: var(--sui-icon-size, 2em);"
     type="button"
   >
     <img
       src="https://solidos.github.io/solid-ui/src/icons/noun_1180156.svg"
-      style="width: 2em; height: 2em; opacity: 0.3;"
+      style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em); opacity: 0.3;"
       title="Cancel"
     />
   </button>
@@ -42,12 +42,12 @@ exports[`errorMessageBlock sets the background color 1`] = `
 >
   my colored message
   <button
-    style="width: 2em; height: 2em;"
+    style="width: var(--sui-icon-size, 2em); height: var(--sui-icon-size, 2em);"
     type="button"
   >
     <img
       src="https://solidos.github.io/solid-ui/src/icons/noun_1180156.svg"
-      style="width: 2em; height: 2em; opacity: 0.3;"
+      style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em); opacity: 0.3;"
       title="Cancel"
     />
   </button>

test/unit/widgets/forms/__snapshots__/basic.test.ts.snap

@@ -64,12 +64,12 @@ exports[`basicField shows error if no property given 1`] = `
 >
   Error: No property given for text field: <http://example.com/#form>
   <button
-    style="width: 2em; height: 2em;"
+    style="width: var(--sui-icon-size, 2em); height: var(--sui-icon-size, 2em);"
     type="button"
   >
     <img
       src="https://solidos.github.io/solid-ui/src/icons/noun_1180156.svg"
-      style="width: 2em; height: 2em; opacity: 0.3;"
+      style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em); opacity: 0.3;"
       title="Cancel"
     />
   </button>

test/unit/widgets/forms/__snapshots__/index.test.ts.snap

@@ -38,7 +38,7 @@ exports[`TristateField runs 1`] = `
     class="formFieldValue"
   >
     <button
-      style="font-size: 150%; height: 1.2em; width: 1.2em; background-color: var(--sui-bg-input, #eef); border-radius: var(--sui-border-radius-sm, 0.2em); margin: 0.1em;"
+      style="font-size: 100%; height: 1em; width: 1em; background-color: var(--sui-bg-input, #eef); border-radius: var(--sui-border-radius-sm, 0.2em); margin: 0.1em;"
     >
       -
     </button>

test/unit/widgets/forms/autocomplete/__snapshots__/autocomplete.test.ts.snap

@@ -69,7 +69,7 @@ exports[`autocompleteField clicking on row of greenn table then accecpt button s
         >
           <img
             src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"
-            style="width: 2em; height: 2em;"
+            style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em);"
             title="Continue"
           />
         </button>
@@ -80,7 +80,7 @@ exports[`autocompleteField clicking on row of greenn table then accecpt button s
         >
           <img
             src="https://solidos.github.io/solid-ui/src/icons/noun_1180156.svg"
-            style="width: 2em; height: 2em; opacity: 0.3;"
+            style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em); opacity: 0.3;"
             title="Cancel"
           />
         </button>
@@ -91,7 +91,7 @@ exports[`autocompleteField clicking on row of greenn table then accecpt button s
         >
           <img
             src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"
-            style="width: 2em; height: 2em;"
+            style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em);"
             title="Edit"
           />
         </button>
@@ -160,7 +160,7 @@ exports[`autocompleteField creates a autocomplete field 1`] = `
         >
           <img
             src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"
-            style="width: 2em; height: 2em;"
+            style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em);"
             title="Continue"
           />
         </button>
@@ -171,7 +171,7 @@ exports[`autocompleteField creates a autocomplete field 1`] = `
         >
           <img
             src="https://solidos.github.io/solid-ui/src/icons/noun_1180156.svg"
-            style="width: 2em; height: 2em; opacity: 0.3;"
+            style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em); opacity: 0.3;"
             title="Cancel"
           />
         </button>
@@ -182,7 +182,7 @@ exports[`autocompleteField creates a autocomplete field 1`] = `
         >
           <img
             src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"
-            style="width: 2em; height: 2em;"
+            style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em);"
             title="Edit"
           />
         </button>
@@ -286,7 +286,7 @@ exports[`autocompleteField typing more search term till unique selects the whole
         >
           <img
             src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"
-            style="width: 2em; height: 2em;"
+            style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em);"
             title="Continue"
           />
         </button>
@@ -297,7 +297,7 @@ exports[`autocompleteField typing more search term till unique selects the whole
         >
           <img
             src="https://solidos.github.io/solid-ui/src/icons/noun_1180156.svg"
-            style="width: 2em; height: 2em; opacity: 0.3;"
+            style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em); opacity: 0.3;"
             title="Cancel"
           />
         </button>
@@ -308,7 +308,7 @@ exports[`autocompleteField typing more search term till unique selects the whole
         >
           <img
             src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"
-            style="width: 2em; height: 2em;"
+            style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em);"
             title="Edit"
           />
         </button>