@ui5/webcomponents-fiori 1.9.3 → 1.9.5

package/dist/assets/{Unlock.c1e871b3.js → Unlock.8861dd7c.js}

@@ -1,4 +1,4 @@
-import{r as C}from"./bundle.esm.88b2001e.js";var l=`<svg width="160" height="160" viewBox="0 0 160 160" id="tnt-Dialog-Unlock">
+import{r as C}from"./bundle.esm.3729b7e6.js";var l=`<svg width="160" height="160" viewBox="0 0 160 160" id="tnt-Dialog-Unlock">
   <path fill="var(--sapIllus_BackgroundColor)" d="M138.389,44.8939 C149.296,65.0449 148.569,90.7009 137.246,111.9949 C125.925,133.2879 104.113,150.2179 82.299,150.115367 C60.487,150.115367 38.882,133.0799 25.794,110.7479 C12.706,88.5199 8.24,60.8899 19.146,40.7399 C29.949,20.6929 56.124,8.0199 80.43,9.0589 C104.839,10.0979 127.483,24.7439 138.389,44.8939" class="sapIllus_BackgroundColor"/>
   <path fill="var(--sapIllus_ObjectFillColor)" d="M79.783,64.4287 C74.405,64.4287 69.298,65.5757 64.68,67.6257 L64.68,43.5957 L64.667,43.5957 C64.707,35.3377 71.447,28.6387 79.705,28.6387 C87.882,28.6387 94.566,35.2017 94.743,43.3377 L94.729,43.3377 L94.729,55.0947 C97.658,56.3687 100.397,58.0237 102.879,59.9897 L102.879,43.6627 C102.879,43.5547 102.879,43.4467 102.865,43.3377 C102.703,30.7137 92.37,20.5027 79.705,20.5027 C66.958,20.5027 56.571,30.8497 56.531,43.5957 L56.531,72.5767 C47.98,79.4097 42.495,89.9197 42.495,101.7167 C42.495,122.3107 59.19,139.0047 79.783,139.0047 C100.377,139.0047 117.071,122.3107 117.071,101.7167 C117.071,81.1227 100.377,64.4287 79.783,64.4287" class="sapIllus_ObjectFillColor"/>
   <path fill="var(--sapIllus_BrandColorSecondary)" d="M77.0007,72.7227 C93.0137,71.1867 107.2397,82.9217 108.7767,98.9347 C110.3137,114.9477 98.5777,129.1737 82.5647,130.7107 C66.5527,132.2467 52.3257,120.5117 50.7897,104.4987 C49.2527,88.4867 60.9877,74.2597 77.0007,72.7227 Z" class="sapIllus_BrandColorSecondary"/>

package/dist/assets/{UnsuccessfulAuth.6655eb4d.js → UnsuccessfulAuth.249f2e24.js}

@@ -1,4 +1,4 @@
-import{r as l}from"./bundle.esm.88b2001e.js";var C=`<svg width="160" height="160" viewBox="0 0 160 160" id="tnt-Dialog-UnsuccessfulAuth">
+import{r as l}from"./bundle.esm.3729b7e6.js";var C=`<svg width="160" height="160" viewBox="0 0 160 160" id="tnt-Dialog-UnsuccessfulAuth">
   <path fill="var(--sapIllus_PatternShadow)" d="M139.022,41.1663 L138.965,41.1663 L137.747,41.1663 L137.747,51.3033 L137.747,55.1843 L137.747,120.2153 C137.747,122.3273 136.035,124.0393 133.922,124.0393 L28.156,124.0393 L28.158,126.5883 C28.158,128.7013 29.87,130.4143 31.981,130.4143 L139.022,130.4143 C141.134,130.4143 142.846,128.7013 142.846,126.5903 L142.846,44.9913 C142.846,42.8793 141.134,41.1663 139.022,41.1663" class="sapIllus_PatternShadow"/>
   <path fill="var(--sapIllus_ObjectFillColor)" d="M133.6405,124.2475 L27.1075,124.2475 C24.8395,124.2475 23.0005,122.4085 23.0005,120.1415 L23.0005,39.1065 C23.0005,36.8395 24.8395,35.0005 27.1075,35.0005 L133.6405,35.0005 C135.9085,35.0005 137.7465,36.8395 137.7465,39.1065 L137.7465,120.1415 C137.7465,122.4085 135.9085,124.2475 133.6405,124.2475" class="sapIllus_ObjectFillColor"/>
   <path fill="var(--sapIllus_BrandColorSecondary)" d="M137.747,51.5746 L23,51.5746 L23,39.1946 C23,36.8786 24.878,35.0006 27.194,35.0006 L133.373,35.0006 C135.789,35.0006 137.747,36.9586 137.747,39.3746 L137.747,51.5746 Z" class="sapIllus_BrandColorSecondary"/>

package/dist/assets/{UploadCollection.f40c4f12.js → UploadCollection.a6db8bf1.js}

@@ -1,4 +1,4 @@
-import{r as C,V as t,W as l}from"./bundle.esm.88b2001e.js";var L=`<svg width="160" height="135" viewBox="0 0 160 135" fill="none" xmlns="http://www.w3.org/2000/svg" id="sapIllus-Dialog-UploadCollection">
+import{r as C,V as t,W as l}from"./bundle.esm.3729b7e6.js";var L=`<svg width="160" height="135" viewBox="0 0 160 135" fill="none" xmlns="http://www.w3.org/2000/svg" id="sapIllus-Dialog-UploadCollection">
 <circle cx="60.9869" cy="60.9869" r="60.9869" fill="var(--sapContent_Illustrative_Color7)"/>
 <mask id="mask0_1663_6930" class="sapIllus_MaskTypeAlpha" maskUnits="userSpaceOnUse" x="0" y="0" width="122" height="122">
 <circle cx="60.9869" cy="60.9869" r="60.9869" fill="var(--sapContent_Illustrative_Color7)"/>

package/dist/assets/{User2.14b9ac2c.js → User2.6322082c.js}

@@ -1,4 +1,4 @@
-import{r as C}from"./bundle.esm.88b2001e.js";var l=`<svg width="160" height="160" viewBox="0 0 160 160" id="tnt-Dialog-User2">
+import{r as C}from"./bundle.esm.3729b7e6.js";var l=`<svg width="160" height="160" viewBox="0 0 160 160" id="tnt-Dialog-User2">
   <path fill="var(--sapIllus_BackgroundColor)" d="M25.9337717,27.0805988 C5.13777167,45.6805988 -0.913228333,82.5255988 15.1087717,107.170599 C23.6897717,120.369599 37.3027717,128.600599 51.3997717,132.813599 C65.6347717,137.066599 83.0197717,139.697599 97.7327717,137.837599 C122.223772,134.741599 142.120772,115.914599 147.342772,88.6075988 C153.999772,53.7925988 133.209772,20.5765988 103.901772,10.1045988 C77.9587717,0.834598791 47.8247717,7.67459879 26.5787717,26.5035988 C26.3637717,26.6955988 26.1487717,26.8885988 25.9337717,27.0805988" class="sapIllus_BackgroundColor"/>
   <path fill="var(--sapIllus_AccentColor)" d="M24.8528717 79.4456988C21.6878717 78.2736988 20.1388717 75.3886988 18.9368717 72.4466988 18.8798717 72.3106988 18.7468717 72.2216988 18.5998717 72.2216988 18.4568717 72.2356988 18.3308717 72.3186988 18.2618717 72.4446988 16.6978717 76.1896988 14.6468717 77.8086988 11.6968717 79.8506988 11.5348717 79.9626988 11.4928717 80.1856988 11.6058717 80.3486988 11.6518717 80.4166988 11.7208717 80.4656988 11.7988717 80.4886988 14.2808717 81.2456988 18.0068717 85.9036988 18.0278717 88.2786988 18.0298717 88.4576988 18.1648717 88.6086988 18.3428717 88.6316988 18.3608717 88.6336988 18.3778717 88.6346988 18.3948717 88.6346988 18.5558717 88.6336988 18.6968717 88.5276988 18.7418717 88.3736988 19.3468717 86.2726988 21.2998717 81.8886988 24.3608717 80.3386988 24.5238717 80.2566988 24.6888717 80.1826988 24.8578717 80.1176988 25.0428717 80.0476988 25.1358717 79.8416988 25.0668717 79.6556988 25.0298717 79.5576988 24.9518717 79.4816988 24.8528717 79.4456988zM142.803972 28.3109988C138.931972 26.8769988 137.036972 23.3479988 135.565972 19.7489988 135.496972 19.5819988 135.334972 19.4739988 135.153972 19.4739988 134.979972 19.4899988 134.824972 19.5919988 134.740972 19.7459988 132.827972 24.3269988 130.318972 26.3079988 126.709972 28.8059988 126.510972 28.9439988 126.459972 29.2159988 126.597972 29.4159988 126.654972 29.4979988 126.737972 29.5589988 126.833972 29.5869988 129.870972 30.5129988 134.428972 36.2119988 134.453972 39.1169988 134.456972 39.3369988 134.621972 39.5209988 134.839972 39.5489988 134.860972 39.5519988 134.882972 39.5529988 134.903972 39.5529988 135.099972 39.5519988 135.272972 39.4219988 135.327972 39.2329988 136.067972 36.6629988 138.456972 31.2999988 142.202972 29.4039988 142.400972 29.3029988 142.603972 29.2129988 142.809972 29.1329988 143.035972 29.0479988 143.150972 28.7949988 143.064972 28.5679988 143.019972 28.4489988 142.924972 28.3549988 142.803972 28.3109988z" class="sapIllus_AccentColor"/>
   <path fill="var(--sapIllus_BrandColorPrimary)" d="M93.8163717,22.7997988 L91.4853717,21.4537988 C91.0443717,21.1997988 90.8933717,20.6357988 91.1473717,20.1957988 L92.4933717,17.8637988 C92.7483717,17.4237988 93.3113717,17.2727988 93.7523717,17.5267988 L96.0833717,18.8727988 C96.5243717,19.1267988 96.6753717,19.6907988 96.4203717,20.1307988 L95.0743717,22.4627988 C94.8203717,22.9027988 94.2573717,23.0537988 93.8163717,22.7997988" class="sapIllus_BrandColorPrimary"/>

package/dist/assets/test/pages/Bar.html.a5046c13.css

@@ -0,0 +1 @@
+ui5-bar{margin:.25rem 0}.bar1auto{background-color:var(--sapBackgroundColor)}.bar2auto{display:flex;align-items:center}

package/dist/assets/test/pages/BarcodeScannerDialog.html.b8919118.css

@@ -0,0 +1 @@
+.barcodescannerdialog1auto{background-color:var(--sapBackgroundColor)}

package/dist/assets/test/pages/Components.html.b41617c5.css

@@ -0,0 +1 @@
+.components1auto{background-color:var(--sapBackgroundColor)}

package/dist/assets/test/pages/DynamicSideContent.html.9b81aa24.css

@@ -0,0 +1 @@
+body,html{width:100%;height:100%;padding:0;margin:0}.page1auto{background-color:var(--sapBackgroundColor)}.content-padding>*{padding:.5rem}.breakpointBadge,.invisible{display:none}.smaller-select{width:10rem;min-width:10rem}

package/dist/assets/test/pages/FCL.html.6763e066.css

@@ -0,0 +1 @@
+html,body{padding:0;margin:0}.sectionTitle,ui5-input,.testButton{margin-left:1rem}.col{height:100%}.colHeader{display:flex;align-items:center;justify-content:space-between;height:2.75rem;padding:.25rem 1rem;background:var(--sapList_Background);box-sizing:border-box}.colSubHeader{display:flex;align-items:center;box-sizing:border-box}.productInfo{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}.fcl1auto{background-color:var(--sapBackgroundColor)}.fcl2auto{width:600px}.fcl3auto{height:500px}.fcl4auto{box-sizing:border-box}.fcl5auto{padding:1rem}.fcl6auto{box-sizing:border-box;height:100%}.fcl7auto{display:flex;min-height:200px;flex-direction:column}.fcl8auto{width:150px;align-self:flex-end}.fcl9auto,.fcl10auto{display:flex;flex-direction:column}.fcl11auto{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-top:1rem}.fcl12auto{display:flex;flex-direction:row;margin-top:1rem;justify-content:flex-end;align-items:center}.fcl13auto{padding:1rem;display:flex;justify-content:space-between}.fcl14auto{height:600px}.fcl15auto{min-width:1px}.fcl16auto{padding:1rem}.fcl17auto{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.fcl18auto{display:flex;flex-direction:row;align-items:center}.fcl19auto{margin:0 1rem;min-width:7rem}.fcl20auto{align-self:start}.fcl21auto{padding:1rem;background:var(--sapList_Background)}

package/dist/assets/test/pages/FCLApp.html.4d2da1a7.css

@@ -0,0 +1 @@
+html,body{padding:0;margin:0;height:100%}#fcl{width:100%;height:100%}#fcl>div.column{height:100%}ui5-busy-indicator{display:block}.header{padding:1rem;display:flex}.separator{flex:auto}.ui5-message-page{height:100%;display:flex;flex-direction:column;align-items:center;width:30rem;margin:auto}.ui5-message-page-icon{width:6rem;height:6rem}.ui5-message-page-title{font-family:var(--sapFontFamily);font-size:var(--sapFontHeader2Size);color:var(--sapTextColor);margin:1rem}.ui5-message-page-description{font-family:var(--sapFontFamily);font-size:var(--sapFontLargeSize);color:var(--sapNeutralColor)}.fclapp1auto{background-color:var(--sapBackgroundColor)}.fclapp2auto{font-size:1rem}

package/dist/assets/test/pages/FCLCustom.html.1af2df31.css

@@ -0,0 +1 @@
+html,body{padding:0;margin:0}.sectionTitle,ui5-input,.testButton{margin-left:1rem}.col{height:100%}.colHeader{display:flex;align-items:center;justify-content:space-between;height:2.75rem;padding:.25rem 1rem;background:var(--sapList_Background);box-sizing:border-box}.colSubHeader{display:flex;align-items:center;box-sizing:border-box}.productInfo{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}.fclcustom1auto{background-color:var(--sapBackgroundColor)}.fclcustom2auto{box-sizing:border-box}.fclcustom3auto{padding:1rem}

package/dist/assets/test/pages/IllustratedMessage.html.ebec5a1c.css

@@ -0,0 +1 @@
+.border{border:1px solid red}.illustratedmessage1auto{background-color:var(--sapBackgroundColor)}

package/dist/assets/test/pages/MediaGallery.html.dee36218.css

@@ -0,0 +1 @@
+body{margin:0}.controls{padding:.3rem 1rem 1rem;box-sizing:border-box;border-radius:.3rem;margin-left:1rem;margin-right:1rem;position:relative}.controls.layout ui5-label{width:140px}.controls ui5-title{margin-bottom:.3rem}.content{height:50rem}.resultLabel{color:var(--sapHighlightColor)}#clearBtn{position:absolute;top:1rem;right:1rem}.controls.theme{margin-bottom:3rem}ui5-media-gallery-item:not(:defined){visibility:hidden}.narrowContainer{width:80px}

package/dist/assets/test/pages/NotificationListGroupItem.html.5c7fb00c.css

@@ -0,0 +1 @@
+.notificationlistgroupitem1auto{background-color:var(--sapBackgroundColor)}.notificationlistgroupitem2auto{max-width:400px}.notificationlistgroupitem3auto{display:flex;justify-content:flex-end;padding:.25rem;border-bottom:1px solid grey}

package/dist/assets/test/pages/NotificationListItem.html.01df347d.css

@@ -0,0 +1 @@
+:not(:defined){display:none}.notificationlistitem1auto{background-color:var(--sapBackgroundColor)}.notificationlistitem2auto{max-width:400px}.notificationlistitem3auto{display:flex;justify-content:flex-end;padding:.25rem;border-bottom:1px solid grey}

package/dist/assets/test/pages/NotificationList_test_page.html.883d5b51.css

@@ -0,0 +1 @@
+.test-section{display:flex;flex-direction:column;justify-content:center;align-items:center}.notificationlist_test_page1auto{background-color:var(--sapBackgroundColor)}.notificationlist_test_page2auto{width:500px}

package/dist/assets/test/pages/Page.html.b165889d.css

@@ -0,0 +1 @@
+body,html{width:100%;height:100%;padding:0;margin:0}.page1auto{background-color:var(--sapBackgroundColor)}.page2auto{width:100%}

package/dist/assets/test/pages/ProductSwitch.html.6253dac2.css

@@ -0,0 +1 @@
+.productswitch1auto{height:100%}.productswitch2auto{background-color:var(--sapBackgroundColor)}

package/dist/assets/test/pages/ProductSwitchItem.html.51a96d28.css

@@ -0,0 +1 @@
+.productswitchitem1auto{height:100%}.productswitchitem2auto{background-color:var(--sapBackgroundColor)}

package/dist/assets/test/pages/ShellBar.html.a08df365.css

@@ -0,0 +1 @@
+body,html{width:100%;height:100%;padding:0;margin:0}.popover-content{margin-top:1rem}.shellbar-example{margin-top:1px}ui5-avatar:not(:defined){visibility:hidden}.shellbar1auto{background-color:var(--sapBackgroundColor)}.shellbar2auto{padding:.25rem 1rem 0rem}.shellbar3auto{margin-top:2rem}

package/dist/assets/test/pages/SideNavigation.html.835d71ad.css

@@ -0,0 +1 @@
+html,body{margin:0;padding:0}body{height:100vh;display:flex;flex-direction:column}.content{display:flex;flex:1;min-height:0}.inner-content{overflow:auto;display:flex;flex:1;min-height:0}ui5-shellbar::part(root){padding-left:.5rem}.header{display:flex;flex-direction:column;padding:1rem;box-sizing:border-box}.sidenavigation1auto{background-color:var(--sapBackgroundColor)}

package/dist/assets/test/pages/Timeline.html.aa1e8833.css

@@ -0,0 +1 @@
+html,body{margin:0}.header{display:flex;justify-content:center;height:3rem;background:#3f5161}.header-title{color:#fafafa;margin:0;padding:0;line-height:3rem;font-size:1.375rem;font-weight:400;text-shadow:0 0 .125rem #ffffff;font-family:"72",Arial,Helvetica,sans-serif}.main{display:flex}.samples,.result{flex:1}.samples{flex-grow:4}ui5-card{width:300px}.timeline1auto{background-color:var(--sapBackgroundColor)}

package/dist/assets/test/pages/UploadCollection.html.078191be.css

@@ -0,0 +1 @@
+.header{display:flex;align-items:center;overflow:hidden;flex-wrap:wrap}.header>*{margin:4px}.spacer{flex:1 1 auto}ui5-upload-collection{margin:1rem}.uploadcollection1auto{background-color:var(--sapBackgroundColor)}

package/dist/assets/test/pages/UploadCollection.html.d2fa57bd.js

@@ -0,0 +1 @@
+import"../../bundle.esm.3729b7e6.js";(function(){var a=document.getElementById("uploadCollection");function i(e){switch(e.split(".").pop()){case"bmp":case"jpg":case"jpeg":case"png":return"card";case"csv":case"xls":case"xlsx":return"excel-attachment";case"doc":case"docx":case"odt":return"doc-attachment";case"pdf":return"pdf-attachment";case"ppt":case"pptx":return"ppt-attachment";case"txt":return"document-text";default:return"document"}}function c(e){var t=document.createElement("ui5-icon");return t.name=i(e),t.slot="thumbnail",t}function d(e){var t=document.createElement("ui5-upload-collection-item");return description=document.createTextNode("Last modified: "+e.lastModifiedDate+", size: "+e.size),t.appendChild(c(e.name)),t.appendChild(description),t.file=e,t.fileName=e.name,t}document.getElementById("changeMode").addEventListener("ui5-change",function(e){a.mode=e.detail.selectedOption.textContent}),document.getElementById("changeType").addEventListener("ui5-change",function(e){a.items.forEach(function(t){t.type=e.detail.selectedOption.textContent})}),document.getElementById("fileUploader").addEventListener("ui5-change",function(e){for(var t=e.detail.files,n=0;n<t.length;n++)a.appendChild(d(t[n]));document.getElementById("fileUploader").value=""}),a.addEventListener("ui5-selection-change",function(e){var t=e.detail.selectedItems.reduce(function(n,l){return n+l.fileName+","},"[");t+="]",document.getElementById("selectedItems").innerText=t}),a.addEventListener("ui5-item-delete",function(e){a.removeChild(e.detail.item)}),a.addEventListener("ui5-rename",function(e){document.getElementById("renamedFileIndex").innerText=a.items.indexOf(e.target)}),document.getElementById("startUploading").addEventListener("click",function(e){a.items.forEach(function(t){if(t.uploadState==="Ready"&&t.file){var n=new XMLHttpRequest;n.open("POST","/upload",!0),n.onreadystatechange=function(){this.status!==200&&(t.uploadState="Error")},n.send(t.file),t.uploadState="Uploading"}})}),document.getElementById("uploadCollectionDnD").addEventListener("drop",function(e){e.preventDefault();for(var t=e.dataTransfer.files,n=0;n<t.length;n++)uci=d(t[n]),document.getElementById("uploadCollectionDnD").appendChild(uci)});var o=document.getElementById("uploadCollectionStates");o.addEventListener("ui5-retry",function(e){console.log("Retry uploading: ",e.target),document.getElementById("uploadStateEvent").innerText="Retry"}),o.addEventListener("ui5-terminate",function(e){console.log("Terminate uploading of: ",e.target),document.getElementById("uploadStateEvent").innerText="Terminate"})})();

package/dist/assets/test/pages/ViewSettingsDialog.html.1d108f2f.css

@@ -0,0 +1 @@
+.viewsettingsdialog1auto{background-color:var(--sapBackgroundColor)}

package/dist/assets/test/pages/Wizard.html.929fda0f.css

@@ -0,0 +1 @@
+html,body{margin:0;padding:0;height:100%}.wizard1auto{background-color:var(--sapBackgroundColor)}.wizard2auto{height:700px}.wizard3auto{display:flex;min-height:200px;flex-direction:column}.wizard4auto{width:150px;align-self:flex-end}.wizard5auto,.wizard6auto{display:flex;flex-direction:column}.wizard7auto{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-top:1rem}.wizard8auto{display:flex;flex-direction:row;margin-top:1rem;justify-content:flex-end;align-items:center}

package/dist/assets/test/pages/Wizard_test.html.3d4fc1a9.css

@@ -0,0 +1 @@
+html,body{margin:0;padding:0}.stretch{position:absolute;overflow:hidden;height:100%;width:100%}.wizard_test1auto{background-color:var(--sapBackgroundColor)}.wizard_test2auto{display:flex;min-height:200px;flex-direction:column}.wizard_test3auto{width:150px;align-self:flex-end}.wizard_test4auto{display:flex;flex-direction:row;margin-top:1rem;justify-content:flex-end;align-items:center}.wizard_test5auto,.wizard_test6auto{display:flex;flex-direction:column}.wizard_test7auto{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-top:1rem}.wizard_test8auto{height:1800px;background-color:red;display:none}#dialog::part(content){padding:0}

package/dist/assets/test/pages/Wizard_test_mobile.html.9216347a.css

@@ -0,0 +1 @@
+html,body{margin:0;padding:0}.stretch{position:absolute;overflow:hidden;height:100%;width:100%}.wizard_test_mobile1auto{background-color:var(--sapBackgroundColor)}.wizard_test_mobile2auto{width:400px}.wizard_test_mobile3auto{display:flex;flex-direction:row}.wizard_test_mobile4auto{display:flex;min-height:200px;flex-direction:column}.wizard_test_mobile5auto{display:flex;flex-direction:column}

package/dist/test/pages/Bar.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+
+	<title>Bar test page</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+
+
+	
+
+
+	
+  <script type="module" crossorigin src="/assets/bundle.esm.3729b7e6.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/Bar.html.a5046c13.css">
+</head>
+
+<body class="bar1auto">
+	<section>
+		<ui5-bar design="Header">
+		<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
+		<ui5-label>Title</ui5-label>
+		<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+	</section>
+
+	 <section>
+		<ui5-title level="3">Header design</ui5-title>
+		<ui5-bar design="Header">
+			<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
+			<ui5-label>Title</ui5-label>
+			<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+		<br>
+
+		<ui5-title level="3">Subheader design</ui5-title>
+		<br>
+		<ui5-bar design="Subheader">
+			<div slot="startContent" class="bar2auto">
+				<ui5-button>Start Button</ui5-button>
+				<ui5-label>Basic Label</ui5-label>
+			</div>
+
+			<ui5-button>Middle1 Button</ui5-button>
+			<ui5-button>Middle2 Button</ui5-button>
+
+			<ui5-label slot="endContent">Basic Label</ui5-label>
+			<ui5-button slot="endContent">End Button</ui5-button>
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+
+		<br>
+		<ui5-title level="3">Footer design</ui5-title>
+		<ui5-bar design="Footer">
+			<ui5-icon name="home" slot="startContent"></ui5-icon>
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+
+		<br>
+		<ui5-title level="3">FloatingFooter design</ui5-title>
+		<ui5-bar design="FloatingFooter">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+	</section>
+
+	<section>
+		<ui5-bar>
+			<ui5-title id="titleElementWithLongText" slot="startContent">...</ui5-title>
+		  </ui5-bar>
+		<ui5-button id="loadButton">Change Title</ui5-button>
+		<script>
+			const loadButton = document.getElementById("loadButton");
+			const titleElementWithLongText = document.getElementById("titleElementWithLongText");
+
+			loadButton.addEventListener("click", () => {
+				titleElementWithLongText.innerHTML = "a very long text message which would get cut off";
+			});
+		</script>
+	</section>
+</body>
+</html>

package/dist/test/pages/BarcodeScannerDialog.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+
+	<title>Barcode Scanner</title>
+
+	<script data-ui5-config type="application/json">
+		{
+			"rtl": false
+		}
+	</script>
+
+	<script>// delete Document.prototype.adoptedStyleSheets</script>
+
+	
+
+
+
+  <script type="module" crossorigin src="/assets/bundle.esm.3729b7e6.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/BarcodeScannerDialog.html.b8919118.css">
+</head>
+
+<body class="barcodescannerdialog1auto">
+
+	<ui5-barcode-scanner-dialog id="dlgScan"></ui5-barcode-scanner-dialog>
+
+	<ui5-button id="btnScan" icon="camera" tooltip="Start Camera">Scan</ui5-button>
+	<div>
+		<ui5-label id="scanResult"></ui5-label>
+		<ui5-label id="scanError"></ui5-label>
+	</div>
+
+	<script>
+		btnScan.addEventListener("click", function(event) {
+			dlgScan.show();
+		});
+
+		dlgScan.addEventListener("ui5-scan-success", function(event) {
+			scanResult.innerHTML = event.detail.text;
+			dlgScan.close();
+		});
+
+		dlgScan.addEventListener("ui5-scan-error", function(event) {
+			scanError.innerHTML = event.detail.message;
+			dlgScan.close();
+		});
+	</script>
+</body>
+</html>

package/dist/test/pages/Components.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta charset="utf-8">
+
+    <title>Default values test page</title>
+    <script>// delete Document.prototype.adoptedStyleSheets</script>
+
+    <script data-ui5-config type="application/json">
+        {
+            "rtl": false
+        }
+    </script>
+
+	
+
+
+  <script type="module" crossorigin src="/assets/bundle.esm.3729b7e6.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/Components.html.b41617c5.css">
+</head>
+
+<body class="components1auto">
+
+	<ui5-shellbar id="shellbar2" hidden></ui5-shellbar>
+	<ui5-upload-collection id="uploadCollection" hidden></ui5-upload-collection>
+
+</body>
+</html>

package/dist/test/pages/DynamicSideContent.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+
+	<title>Dynamic Side Content</title>
+	<script>
+		delete Document.prototype.adoptedStyleSheets
+	</script>
+
+
+	
+
+
+	
+  <script type="module" crossorigin src="/assets/bundle.esm.3729b7e6.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/DynamicSideContent.html.9b81aa24.css">
+</head>
+
+<body class="page1auto">
+
+	<ui5-page id="page" floating-footer show-footer>
+		<ui5-dynamic-side-content
+			id="dynamicSideContent"
+			class="content-padding">
+			<div>
+				<h1>Main Content</h1>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.</p>
+				<p>Sed mauris nunc, sollicitudin eget mi nec, tincidunt molestie diam. Aliquam orci dui, vestibulum quis blandit et, interdum vel arcu. Vestibulum sit amet quam ut sapien pulvinar consequat ac sed turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus quam diam, mattis vitae condimentum ac, ornare vel dui. Pellentesque orci tellus, tempor vel ex eget, luctus vehicula massa. Nullam laoreet, lacus ut vulputate maximus, quam sem molestie nunc, vitae convallis sem nisi nec magna.</p>
+				<p>Nullam a felis odio. Curabitur quis tellus nec risus suscipit dictum vitae eget augue. Maecenas faucibus felis a arcu ultricies, sed tempor ante pellentesque. Ut hendrerit ipsum sit amet ligula bibendum, sit amet vehicula lacus condimentum. Morbi lacinia nibh eu placerat sollicitudin. Praesent accumsan pulvinar massa, eget finibus odio lacinia ullamcorper. Integer neque quam, pretium sed accumsan id, euismod non nibh.</p>
+				<p>Quisque luctus non mi in mollis. Suspendisse id lectus felis. Aliquam elementum nibh nibh. Nullam eget condimentum dolor. Suspendisse id dui non lorem imperdiet iaculis. Pellentesque ex turpis, vehicula a arcu quis, mattis auctor tellus. In ornare, libero ac rhoncus eleifend, felis orci sagittis felis, ac molestie est lacus fermentum odio. Mauris et porta nibh. Integer tellus leo, laoreet nec odio non, rutrum bibendum magna.</p>
+			</div>
+			<div slot="sideContent">
+				<h1>Side Content</h1>
+				<p>Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.</p>
+				<p>Vivamus ut efficitur massa, ac porttitor dolor. Nullam nec elit quis urna convallis tincidunt. Suspendisse potenti. Phasellus dignissim eget mauris eu egestas. Phasellus accumsan pulvinar pharetra. Pellentesque egestas viverra ipsum. Maecenas a dapibus neque. Morbi tincidunt ultricies enim, ac vehicula elit dapibus sit amet. Donec vel felis at felis elementum sodales id id erat. Pellentesque rutrum placerat mollis. In hac habitasse platea dictumst. Sed eget quam aliquet, pretium ligula vitae, lobortis mauris. Aenean eget ipsum auctor, dapibus quam at, pharetra nunc.</p>
+			</div>
+		</ui5-dynamic-side-content>
+
+		<div slot="footer">
+			<ui5-bar design="FloatingFooter">
+				<ui5-badge class="breakpointBadge" id="breakpointS" color-scheme="5" slot="startContent">S</ui5-badge>
+				<ui5-badge class="breakpointBadge" id="breakpointM" color-scheme="6" slot="startContent">M</ui5-badge>
+				<ui5-badge class="breakpointBadge" id="breakpointL" color-scheme="7" slot="startContent">L</ui5-badge>
+				<ui5-badge class="breakpointBadge" id="breakpointXL" color-scheme="8" slot="startContent">XL</ui5-badge>
+				<ui5-switch id="hideMainContent" class="hide-on-S" text-on="M +" text-off="M -" title="MainContent" checked></ui5-switch>
+				<ui5-switch id="hideSideContent" class="hide-on-S" text-on="S +" text-off="S -" title="SideContent" checked></ui5-switch>
+				<ui5-switch id="equalSplit" class="hide-on-S" text-on="EQ" text-off="! EQ" title="equalSplit"></ui5-switch>
+				<ui5-switch id="sideContentPosition" class="hide-on-S" text-on="END" text-off="STA" title="sideContentPosition" checked></ui5-switch>
+				<ui5-select id="sideContentVisibility" class="hide-on-S smaller-select" title="sideContentVisibility">
+					<ui5-option>NeverShow</ui5-option>
+					<ui5-option selected>ShowAboveS</ui5-option>
+					<ui5-option>ShowAboveM</ui5-option>
+					<ui5-option>ShowAboveL</ui5-option>
+					<ui5-option>AlwaysShow</ui5-option>
+				</ui5-select>
+				<ui5-select id="sideContentFallDown" class="hide-on-S smaller-select" title="sideContentFallDown">
+					<ui5-option>BelowXL</ui5-option>
+					<ui5-option>BelowL</ui5-option>
+					<ui5-option>BelowM</ui5-option>
+					<ui5-option selected>OnMinimumWidth</ui5-option>
+				</ui5-select>
+				<ui5-button id="toggleButton" design="Positive" slot="endContent">Toggle</ui5-button>
+			</ui5-bar>
+		</div>
+
+	</ui5-page>
+	<ui5-input id="currentBreakpoint" class="invisible"></ui5-input>
+	<ui5-input id="previousBreakpoint" class="invisible"></ui5-input>
+	<ui5-input id="mainVisible" class="invisible"></ui5-input>
+	<ui5-input id="sideVisible" class="invisible"></ui5-input>
+
+	<script>
+		var toggleButton = document.getElementById("toggleButton"),
+			sideContentPosition = document.getElementById("sideContentPosition"),
+			sideContentVisibility = document.getElementById("sideContentVisibility"),
+			sideContentFallDown = document.getElementById("sideContentFallDown"),
+			equalSplit = document.getElementById("equalSplit"),
+			dynamnicSideContent = document.getElementById("dynamicSideContent"),
+			currentBreakpoint =  document.getElementById("currentBreakpoint"),
+			previousBreakpoint =  document.getElementById("previousBreakpoint"),
+			mainVisible =  document.getElementById("mainVisible"),
+			sideVisible =  document.getElementById("sideVisible");
+
+		toggleButton.addEventListener("click", function() {
+			dynamnicSideContent.toggleContents();
+		});
+
+		hideMainContent.addEventListener("change", function() {
+			dynamnicSideContent.hideMainContent = !hideMainContent.checked;
+		});
+
+		hideSideContent.addEventListener("change", function() {
+			dynamnicSideContent.hideSideContent = !hideSideContent.checked;
+		});
+
+		equalSplit.addEventListener("change", function() {
+			dynamnicSideContent.equalSplit = equalSplit.checked;
+		});
+
+		sideContentPosition.addEventListener("change", function() {
+			dynamnicSideContent.sideContentPosition = sideContentPosition.checked ? "End" : "Start";
+		});
+
+		sideContentVisibility.addEventListener("change", function(event) {
+			dynamnicSideContent.sideContentVisibility = event.detail.selectedOption.innerText;
+		});
+
+		sideContentFallDown.addEventListener("change", function(event) {
+			dynamnicSideContent.sideContentFallDown = event.detail.selectedOption.innerText;
+		});
+
+		dynamicSideContent.addEventListener("ui5-layout-change", function(event) {
+			var breakpoint = event.detail.currentBreakpoint,
+				disp = breakpoint === "S" ? "none" : "block";
+
+			document.querySelectorAll('.breakpointBadge').forEach(function(elem) { elem.style.display = "none"; });
+			document.querySelector("#breakpoint" + breakpoint).style.display="block";
+			document.querySelectorAll('.hide-on-S').forEach(function(elem) { elem.style.display = disp; });
+			toggleButton.style.display = breakpoint !== "S" || dynamicSideContent.sideContentVisibility === "AlwaysShow" ? "none" : "block";
+
+		});
+
+		dynamicSideContent.addEventListener("ui5-layout-change", function(event) {
+			currentBreakpoint.value = event.detail.currentBreakpoint;
+			previousBreakpoint.value = event.detail.previousBreakpoint;
+			mainVisible.value = event.detail.mainContentVisible ? 1 : 0;
+			sideVisible.value = event.detail.sideContentVisible ? 1 : 0;
+		});
+	</script>
+
+</body>
+</html>