@festo-ui/web-essentials 3.2.0 → 3.2.1-pre-20220602.1

package/README.md

@@ -56,3 +56,19 @@ You can use the variables like this:
 background: $hero; // background is carul now
 @extend .fwe-icon-menu-close; // add the menu-close icon as ::before element
 ```
+
+## Using Web Essentials with local fonts
+
+If you want to use Web Essentials in an __offline__ environment, you have to provide local files for the MetaPro font.
+* Download the required fonts here: https://festo.sharepoint.com/sites/tggfw/SitePages/Font-Richtlinie.aspx
+* Override the css variable for the font: 
+```scss
+@font-face {
+  font-family: "localMeta";
+  src: url("../src/fonts/MetaChinese.woff") format("woff"), url("../src/fonts/MetaChinese.woff2") format("woff2");
+}
+
+:root {
+    --fwe-font-family-sans-serif: "localMeta";
+}
+```

package/dist/css/festo-web-essentials.css

@@ -1,19 +1,24 @@
 @charset "UTF-8";
 /*!
- * Festo UI - Web Essentials v3.2.0 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v3.2.1-pre-20220602.1 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
 /* a screen reader friendly approach */
+/* Festo Font Einbindung MetaPro */
+/* (C)Festo/ pas 01.07.2019     */
+/* MetaPro regular */
 @font-face {
   font-family: "MetaPro";
-  src: url("../fonts/MetaPro-Regular.woff2") format("woff2"), url("../fonts/MetaPro-Regular.woff") format("woff"), url("../fonts/MetaPro-Regular.otf") format("truetype");
+  src: local("MetaPro-Regular"), url("https://www.festo.com/Fonts/MetaPro-Regular.woff2") format("woff2"), url("https://www.festo.com/Fonts/MetaPro-Regular.woff") format("woff");
 }
+/* MetaPro bold */
 @font-face {
   font-family: "MetaPro";
+  src: local("MetaPro-Bold"), url("https://www.festo.com/Fonts/MetaPro-Bold.woff2") format("woff2"), url("https://www.festo.com/Fonts/MetaPro-Bold.woff") format("woff");
   font-weight: bold;
-  src: url("../fonts/MetaPro-Bold.woff2") format("woff2"), url("../fonts/MetaPro-Bold.woff") format("woff"), url("../fonts/MetaPro-Bold.otf") format("truetype");
 }
+/* Festo Icon Font */
 @font-face {
   font-family: "festo_icons-16";
   src: url("../fonts/festo_icons-16.woff2") format("woff2");
@@ -64,6 +69,7 @@
 }
 
 .fwe-icon, .fwe-stepper-vertical .fwe-step-container.fwe-step-done .fwe-step, .fwe-stepper-horizontal .fwe-step-container.fwe-step-done .fwe-step, .fwe-search-input .fwe-clear-icon, .fwe-search-input .fwe-search-icon, .fwe-notification-menu .fwe-notification-list .fwe-notification-item-content, .fwe-notification-menu .fwe-notification-list .fwe-notification-error, .fwe-notification-menu .fwe-notification-list .fwe-notification-warning, .fwe-notification-menu .fwe-notification-list .fwe-notification-info, .fwe-pagination .fwe-navigate-btn, .fwe-pagination .fwe-navigate-btn-down, .fwe-pagination .fwe-navigate-btn-up, .fwe-select-wrapper, label.fwe-checkbox .fwe-checkbox-checkmark, .fwe-mobile-flyout-page .fwe-page-back i, .fwe-mobile-flyout .fwe-mobile-flyout-button, .fwe-mobile-flyout .fwe-close-button, .fwe-mobile-flyout .fwe-burger-button, .fwe-navbar .fwe-navbar-burger-menu, table.fwe-table tr th.fwe-table-order {
+  font-family: var(--fwe-font-family-icons-16);
   font-size: var(--fwe-font-size-base);
   display: inline-block;
 }
@@ -237,7 +243,7 @@ button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, label.fwe-checkbox.fwe-
   content: "";
 }
 
-.fwe-icon-communication-audio-on:before {
+.fwe-icon-communication-headset:before {
   content: "";
 }
 
@@ -761,7 +767,7 @@ button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, label.fwe-checkbox.fwe-
   content: "";
 }
 
-.fwe-icon-file-lock:before {
+.fwe-icon-file-secure:before {
   content: "";
 }
 
@@ -1825,6 +1831,150 @@ button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, label.fwe-checkbox.fwe-
   content: "";
 }
 
+.fwe-icon-align-bottom:before {
+  content: "";
+}
+
+.fwe-icon-align-center:before {
+  content: "";
+}
+
+.fwe-icon-align-left:before {
+  content: "";
+}
+
+.fwe-icon-align-middle:before {
+  content: "";
+}
+
+.fwe-icon-align-right:before {
+  content: "";
+}
+
+.fwe-icon-align-top:before {
+  content: "";
+}
+
+.fwe-icon-artificial-intelligence-AI:before {
+  content: "";
+}
+
+.fwe-icon-assign-to-learner:before {
+  content: "";
+}
+
+.fwe-icon-augmented-reality:before {
+  content: "";
+}
+
+.fwe-icon-bus-systems:before {
+  content: "";
+}
+
+.fwe-icon-cobotic:before {
+  content: "";
+}
+
+.fwe-icon-controlled:before {
+  content: "";
+}
+
+.fwe-icon-distribute-columns:before {
+  content: "";
+}
+
+.fwe-icon-electrics:before {
+  content: "";
+}
+
+.fwe-icon-energy-efficiency:before {
+  content: "";
+}
+
+.fwe-icon-fast-delivery:before {
+  content: "";
+}
+
+.fwe-icon-funk:before {
+  content: "";
+}
+
+.fwe-icon-hide-label:before {
+  content: "";
+}
+
+.fwe-icon-iiot:before {
+  content: "";
+}
+
+.fwe-icon-iot:before {
+  content: "";
+}
+
+.fwe-icon-learning-path1:before {
+  content: "";
+}
+
+.fwe-icon-mobotic:before {
+  content: "";
+}
+
+.fwe-icon-new-link:before {
+  content: "";
+}
+
+.fwe-icon-numeric-value:before {
+  content: "";
+}
+
+.fwe-icon-piezo:before {
+  content: "";
+}
+
+.fwe-icon-pneumatics:before {
+  content: "";
+}
+
+.fwe-icon-recycling:before {
+  content: "";
+}
+
+.fwe-icon-remove-link:before {
+  content: "";
+}
+
+.fwe-icon-remove-user:before {
+  content: "";
+}
+
+.fwe-icon-safety:before {
+  content: "";
+}
+
+.fwe-icon-show-label:before {
+  content: "";
+}
+
+.fwe-icon-show-link:before {
+  content: "";
+}
+
+.fwe-icon-smart:before {
+  content: "";
+}
+
+.fwe-icon-sustainable-materials:before {
+  content: "";
+}
+
+.fwe-icon-text-value:before {
+  content: "";
+}
+
+.fwe-icon-virtual-reality:before {
+  content: "";
+}
+
 .fwe-color-black {
   color: var(--fwe-black) !important;
 }
@@ -15689,6 +15839,7 @@ table.fwe-table tr th.fwe-table-order {
   user-select: none;
   white-space: nowrap;
   direction: rtl;
+  font-family: var(--fwe-font-family-sans-serif);
   display: table-cell;
   font-size: var(--fwe-font-size-md);
 }
@@ -15698,7 +15849,7 @@ table.fwe-table tr th.fwe-table-order::before {
   position: relative;
   top: 3px;
   left: 8px;
-  transform-origin: center center;
+  transform-origin: 8px 7px;
   transition: transform 0.3s;
 }
 table.fwe-table tr th.fwe-table-order.fwe-active {
@@ -16290,6 +16441,24 @@ header.fwe-fixed-header {
   bottom: 0;
   transform: translateX(100%);
   transition: transform 0.3s ease;
+  scrollbar-width: thin;
+  scrollbar-color: var(--fwe-control-scrollbar) var(--fwe-gray-100);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.fwe-mobile-flyout-page::-webkit-scrollbar {
+  width: 12px;
+}
+.fwe-mobile-flyout-page::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fwe-mobile-flyout-page::-webkit-scrollbar-thumb {
+  overflow: visible;
+  background-color: var(--fwe-control-scrollbar);
+  border: 3px solid rgba(242, 243, 245, 0);
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  border-radius: 6px;
 }
 .fwe-mobile-flyout-page.fwe-opened {
   transform: translateX(0%);
@@ -16340,8 +16509,6 @@ header.fwe-fixed-header {
   color: var(--fwe-text-light);
 }
 .fwe-breadcrumb .fwe-icon-arrows-right-2, .fwe-breadcrumb .fwe-pagination .fwe-navigate-btn-up, .fwe-pagination .fwe-breadcrumb .fwe-navigate-btn-up {
-  margin-top: 1px;
-  margin-bottom: -1px;
   margin-left: 4px;
   margin-right: 4px;
 }
@@ -16860,7 +17027,6 @@ label.fwe-radio .fwe-radio-checkmark {
   border: 1px solid var(--fwe-control-border);
   background-color: var(--fwe-white);
   border-radius: 50%;
-  margin-top: 2px;
 }
 label.fwe-radio .fwe-radio-checkmark:after {
   content: "";
@@ -16973,7 +17139,6 @@ label.fwe-checkbox .fwe-checkbox-checkmark {
   border: 1px solid var(--fwe-control-border);
   background-color: var(--fwe-white);
   border-radius: 2px;
-  margin-top: 2px;
   font-size: var(--fwe-font-size-md);
 }
 label.fwe-checkbox .fwe-checkbox-checkmark:before {
@@ -17162,10 +17327,6 @@ button.fwe-btn i[class^=fwe-icon-],
 button.fwe-btn i[class*=" fwe-icon-"] {
   padding-right: 8px;
 }
-a.fwe-btn span,
-button.fwe-btn span {
-  margin: -1px 0px 1px 0px;
-}
 a.fwe-btn:hover,
 button.fwe-btn:hover {
   color: var(--fwe-btn-text-hover);
@@ -17555,6 +17716,7 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
 }
 
 .fwe-select-wrapper {
+  font-family: var(--fwe-font-size-base);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -18890,6 +19052,7 @@ fieldset.fwe-progress-container label {
   margin-right: 24px;
   padding-top: 16px;
   padding-bottom: 16px;
+  font-family: var(--fwe-font-family-sans-serif);
 }
 .fwe-notification-menu .fwe-notification-list .fwe-notification-item-content .fwe-item-header, .fwe-notification-menu .fwe-notification-list .fwe-notification-error .fwe-item-header, .fwe-notification-menu .fwe-notification-list .fwe-notification-warning .fwe-item-header, .fwe-notification-menu .fwe-notification-list .fwe-notification-info .fwe-item-header {
   font-weight: var(--fwe-font-weight-bold);
@@ -18980,7 +19143,7 @@ fieldset.fwe-progress-container label {
   border-radius: 0px;
   border-bottom: 1px solid var(--fwe-control-border);
   background: transparent;
-  padding: 0px 24px 5px 32px;
+  padding: 1px 24px 4px 32px;
 }
 .fwe-search-input input::-moz-placeholder {
   color: var(--fwe-text);
@@ -19102,6 +19265,7 @@ input[type=search]::-webkit-search-cancel-button {
   font-weight: var(--fwe-font-weight-bold);
 }
 .fwe-stepper-horizontal .fwe-step-container .fwe-step .fwe-step-name {
+  font-family: var(--fwe-font-family-sans-serif);
   font-size: var(--fwe-font-size-md);
   position: absolute;
   top: 30px;
@@ -19192,6 +19356,7 @@ input[type=search]::-webkit-search-cancel-button {
   font-weight: var(--fwe-font-weight-bold);
 }
 .fwe-stepper-vertical .fwe-step-container .fwe-step .fwe-step-name {
+  font-family: var(--fwe-font-family-sans-serif);
   font-size: var(--fwe-font-size-md);
   position: absolute;
   left: 36px;