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

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

@@ -1,5 +1,5 @@
 /*!
- * 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
  */

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

@@ -1,5 +1,5 @@
 /*!
- * 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
  */footer.fwe-footer .fwe-social-media{display:flex;flex-direction:row;justify-content:center;padding:24px 0;border-bottom:1px solid var(--fwe-control-border-darker);margin-bottom:24px}footer.fwe-footer .fwe-social-media .fwe-social-media-link{display:block;width:32px;height:32px;border-radius:4px;margin-right:24px;opacity:.3;transition:opacity .3s}footer.fwe-footer .fwe-social-media .fwe-social-media-link:last-child{margin-right:0}footer.fwe-footer .fwe-social-media .fwe-social-media-link:hover{opacity:1}footer.fwe-footer .fwe-footer-details{padding-bottom:24px;border-bottom:1px solid var(--fwe-control-border-darker)}footer.fwe-footer .fwe-footer-details h4{font-size:16px;line-height:24px;font-weight:var(--fwe-font-weight-bold);list-style-type:none;position:relative;margin-top:0;margin-bottom:12px}footer.fwe-footer .fwe-footer-details ul.fwe-list-group .fwe-list-group-item{padding-left:0}footer.fwe-footer .fwe-footer-details p{padding-top:8px;max-width:320px}footer.fwe-footer .fwe-footer-details:not(:first-child){margin-top:24px}footer.fwe-footer .fwe-bottomline{font-size:var(--fwe-font-size-small);padding-top:24px;text-align:center}footer.fwe-footer .fwe-bottomline .fwe-sitelinks{order:2}footer.fwe-footer .fwe-bottomline .fwe-sitelinks .fwe-sitelinks-groupa{padding-bottom:8px}footer.fwe-footer .fwe-bottomline .fwe-sitelinks .fwe-sitelinks-groupa a{color:var(--fwe-control-border-darker);padding-right:8px}footer.fwe-footer .fwe-bottomline .fwe-sitelinks .fwe-sitelinks-groupa a:last-child{padding-right:0}footer.fwe-footer .fwe-bottomline .fwe-sitelinks .fwe-sitelinks-groupb{padding-bottom:24px}footer.fwe-footer .fwe-bottomline .fwe-sitelinks .fwe-sitelinks-groupb a{color:var(--fwe-control-border-darker);padding-right:8px}footer.fwe-footer .fwe-bottomline .fwe-sitelinks .fwe-sitelinks-groupb a:last-child{padding-right:0}footer.fwe-footer .fwe-bottomline .fwe-copyright{display:flex;order:1;justify-content:center;padding-bottom:24px;color:var(--fwe-control-border-darker)}@media only screen and (min-width:1281px){footer.fwe-footer .fwe-footer-details{border-bottom:none}footer.fwe-footer .fwe-footer-details h4{margin-top:24px}footer.fwe-footer .fwe-footer-details:not(:first-child){margin-top:0}footer.fwe-footer .fwe-bottomline{font-size:var(--fwe-font-size-small);padding-top:24px;text-align:left;display:flex}footer.fwe-footer .fwe-bottomline .fwe-sitelinks{text-align:right;margin-left:auto;display:flex}footer.fwe-footer .fwe-social-media{margin-bottom:0}}@media only screen and (min-width:1441px){footer.fwe-footer .fwe-social-media .fwe-social-media-link{width:64px;height:64px;margin-right:42px}footer.fwe-footer .fwe-social-media .fwe-social-media-link:last-child{margin-right:0}}.fwe-teaser-horbox{display:flex;background-color:var(--fwe-sucanul)}.fwe-teaser-horbox .fwe-teaser-horbox-img{background-color:var(--fwe-hero);flex:1}.fwe-teaser-horbox .fwe-teaser-horbox-content{flex:1;display:inline-flex;flex-direction:column;padding:24px}.fwe-teaser-horbox .fwe-teaser-horbox-content .fwe-teaser-more{align-self:flex-end}.fwe-teaser-verbox{display:inline-flex;flex-direction:column;background-color:var(--fwe-sucanul);width:100%;height:100%}.fwe-teaser-verbox .fwe-teaser-verbox-img{background-color:var(--fwe-hero);height:calc(50% - 12px);min-height:186px;width:100%}.fwe-teaser-verbox h2{padding-top:24px;padding-left:24px;padding-right:24px}.fwe-teaser-verbox p{padding-left:24px;padding-right:24px}.fwe-teaser-verbox .fwe-teaser-more{align-self:flex-end;margin-bottom:24px;margin-right:24px}.fwe-teaser-c12-container{display:flex;flex-direction:column}.fwe-teaser-c12-container .fwe-teaser-c12-content{order:2;background-color:var(--fwe-sucanul);padding-top:16px;padding-bottom:13px;padding-left:20px;padding-right:20px}.fwe-teaser-c12-container .fwe-teaser-c12-content .fwe-h3,.fwe-teaser-c12-container .fwe-teaser-c12-content h3{font-size:12px;line-height:14px;margin-bottom:4px;font-weight:var(--fwe-font-weight-normal)}.fwe-teaser-c12-container .fwe-teaser-c12-content .fwe-h2,.fwe-teaser-c12-container .fwe-teaser-c12-content h2{font-size:16px;line-height:24px;font-weight:var(--fwe-font-weight-bold);margin-top:0}.fwe-teaser-c12-container .fwe-teaser-c12-img{order:1;background-color:var(--fwe-hero);min-height:114px}@media only screen and (min-width:1025px){.fwe-teaser-verbox h2{padding-top:48px}}.fwe-header-slider-container .fwe-header-slider-box{height:142px;background-color:var(--fwe-hero)}.fwe-header-slider-container .fwe-header-slider{margin-top:-28px;margin-left:12px;margin-right:12px}.fwe-header-slider{display:flex;flex-direction:column;padding:24px 28px;background-color:var(--fwe-white);border-radius:4px;box-shadow:0 1px 8px 0 rgba(0,0,0,.2)}.fwe-header-slider .fwe-header-slider-content{display:inline-flex;flex-direction:column}.fwe-header-slider .fwe-header-slider-content p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;margin:0}.fwe-header-slider .fwe-header-slider-content button.fwe-btn-hero{margin-top:24px;justify-content:center;margin-left:18px;margin-right:18px}.fwe-header-slider .fwe-pagination{align-self:center;margin-top:24px}.fwe-header-slider .fwe-header-slider-arrow-left,.fwe-header-slider .fwe-header-slider-arrow-right{display:none}@media only screen and (min-width:600px){.fwe-header-slider-container .fwe-header-slider-box{height:166px}}@media only screen and (min-width:769px){.fwe-header-slider-container .fwe-header-slider-box{height:341px}.fwe-header-slider-container .fwe-header-slider{margin-top:-104px}}@media only screen and (min-width:1025px){.fwe-header-slider-container .fwe-header-slider-box{height:455px}.fwe-header-slider-container .fwe-header-slider{position:relative;margin-top:-104px}.fwe-header-slider{padding:24px 112px}.fwe-header-slider .fwe-header-slider-content{flex-direction:row;align-items:center}.fwe-header-slider .fwe-header-slider-content p{-webkit-line-clamp:3}.fwe-header-slider .fwe-header-slider-content button.fwe-btn-hero{justify-content:center;margin-top:0;margin-left:34px;margin-right:0;min-width:200px}.fwe-header-slider .fwe-header-slider-arrow-left,.fwe-header-slider .fwe-header-slider-arrow-right{display:block;position:absolute;top:50%;margin-top:12px;transform:translateY(-50%);height:48px;width:48px;font-size:48px}.fwe-header-slider .fwe-header-slider-arrow-left{left:24px}.fwe-header-slider .fwe-header-slider-arrow-right{right:24px}}@media only screen and (min-width:1441px){.fwe-header-slider-container .fwe-header-slider-box{height:640px}.fwe-header-slider-container .fwe-header-slider{margin:auto;margin-top:-104px;width:1096px}.fwe-header-slider{padding:24px 160px}}@media only screen and (min-width:1921px){.fwe-header-slider-container .fwe-header-slider{width:1192px}}.fwe-header-modul-container{display:flex;flex-direction:column;padding-top:32px;padding-bottom:32px}.fwe-header-modul-container .fwe-header-modul-content{order:2;position:relative}.fwe-header-modul-container .fwe-header-modul-content .fwe-h1,.fwe-header-modul-container .fwe-header-modul-content h1{margin-bottom:0}.fwe-header-modul-container .fwe-header-modul-content .fwe-h3,.fwe-header-modul-container .fwe-header-modul-content h3{margin-top:0;margin-bottom:16px}.fwe-header-modul-container .fwe-header-modul-content p{font-size:var(--fwe-font-size-xl);line-height:32px;color:var(--fwe-text-light);margin:0;padding-bottom:34px}.fwe-header-modul-container .fwe-header-modul-content::after{position:absolute;bottom:0;right:0;content:"";width:28px;height:10px;background-color:var(--fwe-gray-400)}.fwe-header-modul-container .fwe-header-modul-media{min-height:111px;background-color:var(--fwe-hero);order:1}@media only screen and (min-width:600px){.fwe-header-modul-container .fwe-header-modul-media{min-height:132px}}@media only screen and (min-width:769px){.fwe-header-modul-container .fwe-header-modul-content .fwe-h1,.fwe-header-modul-container .fwe-header-modul-content h1{margin-bottom:6px}.fwe-header-modul-container .fwe-header-modul-media{min-height:268px}}@media only screen and (min-width:1025px){.fwe-header-modul-container .fwe-header-modul-media{min-height:352px}}@media only screen and (min-width:1281px){.fwe-header-modul-container{flex-direction:row}.fwe-header-modul-container .fwe-header-modul-content{order:1;width:41.6666666667%;margin-right:24px}.fwe-header-modul-container .fwe-header-modul-content .fwe-h1,.fwe-header-modul-container .fwe-header-modul-content h1{margin-top:0}.fwe-header-modul-container .fwe-header-modul-media{order:2;min-height:293px;flex:1}}@media only screen and (min-width:1441px){.fwe-header-modul-container .fwe-header-modul-media{min-height:400px}}.fwe-modal-image-gallery{background:0 0;box-shadow:none;padding:0;position:fixed;width:288px;max-width:unset;max-height:unset;overflow-x:hidden;overflow-y:auto}.fwe-modal-image-gallery .fwe-btn-link i.fwe-icon-menu-close.fwe-modal-image-gallery-close{padding-right:0;padding-top:4px}.fwe-modal-image-gallery .fwe-image-gallery{max-height:calc(100vh - 73px)}.fwe-modal-image-gallery--with-thumbnails .fwe-image-gallery{max-height:calc(100vh - 161px)}.fwe-image-gallery-header{display:flex;align-items:center;margin-bottom:24px}.fwe-image-gallery{width:100%;height:288px;background-color:var(--fwe-background-image-gallery);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fwe-image-gallery .swiper-zoom-container img,.fwe-image-gallery .swiper-zoom-container svg,.fwe-image-gallery img,.fwe-image-gallery svg{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.fwe-image-gallery-thumbs{margin-top:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fwe-image-gallery-thumbs.swiper{width:100%;height:64px;box-sizing:border-box;margin-left:auto;margin-right:auto}.fwe-image-gallery-thumbs.swiper .swiper-slide{position:relative;background-size:cover;background-position:center;width:88px;margin-right:8px;height:64px;opacity:.33;transition:opacity .3s}.fwe-image-gallery-thumbs.swiper .swiper-slide:last-child{margin-right:0}.fwe-image-gallery-thumbs.swiper .swiper-slide::after{position:absolute;content:"";height:4px;width:100%;background-color:var(--fwe-hero);bottom:0;opacity:0;transition:opacity .3s}.fwe-image-gallery-thumbs.swiper .swiper-slide img{display:block;-o-object-fit:cover;object-fit:cover;width:88px;height:56px;background-color:var(--fwe-background-image-gallery)}.fwe-image-gallery-thumbs.swiper .swiper-slide.swiper-slide-thumb-active,.fwe-image-gallery-thumbs.swiper .swiper-slide:hover{opacity:1}.fwe-image-gallery-thumbs.swiper .swiper-slide.swiper-slide-thumb-active::after,.fwe-image-gallery-thumbs.swiper .swiper-slide:hover::after{opacity:1}.fwe-image-gallery-thumbs:not(.swiper){display:flex;flex-direction:row;overflow:hidden}.fwe-image-gallery-thumbs-nail{position:relative;height:64px;width:88px;min-width:88px;margin-right:8px;opacity:.33;transition:opacity .3s}.fwe-image-gallery-thumbs-nail img{position:absolute;height:56px;width:88px;min-width:88px;background:var(--fwe-background-image-gallery);-o-object-fit:cover;object-fit:cover}.fwe-image-gallery-thumbs-nail:last-child{margin-right:0}.fwe-image-gallery-thumbs-nail::after{position:absolute;content:"";height:4px;width:100%;background-color:var(--fwe-hero);bottom:0;opacity:0;transition:opacity .3s}.fwe-image-gallery-thumbs-nail.fwe-active,.fwe-image-gallery-thumbs-nail:hover{opacity:1}.fwe-image-gallery-thumbs-nail.fwe-active::after,.fwe-image-gallery-thumbs-nail:hover::after{opacity:1}@media only screen and (min-width:375px){.fwe-modal-image-gallery{width:342px}.fwe-image-gallery{height:342px}}@media only screen and (min-width:769px){.fwe-modal-image-gallery{width:696px}.fwe-image-gallery{height:465px}}@media only screen and (min-width:1025px){.fwe-modal-image-gallery{width:696px}.fwe-image-gallery{height:465px}}@media only screen and (min-width:1441px){.fwe-modal-image-gallery{width:960px}.fwe-image-gallery{height:640px}}

package/dist/css/themes/flatpickr/festo.css

@@ -1,5 +1,5 @@
 /*!
- * 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
  */

package/dist/css/themes/flatpickr/festo.min.css

@@ -1,5 +1,5 @@
 /*!
- * 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
  */.fng-flatpickr span{-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}.flatpickr-calendar{display:none;text-align:center;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:var(--fwe-font-size-md);line-height:font-size-md10px;position:absolute;box-sizing:border-box;touch-action:manipulation}.flatpickr-calendar.open{max-height:640px;width:324px;background:var(--fwe-white);box-shadow:0 1px 8px rgba(0,0,0,.3);border-radius:8px;padding:12px;padding-bottom:48px;display:inline-block;z-index:var(--fwe-z-index-dropdown)}.flatpickr-calendar.animate.open{-webkit-animation:none;animation:none}.flatpickr-calendar.inline{display:block;position:relative;top:2px;box-shadow:none;background:inherit}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:var(--fwe-z-index-dropdown);display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none!important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 var(--fwe-gray-200),5px 0 0 var(--fwe-gray-200)}.flatpickr-calendar .hasTime .dayContainer,.flatpickr-calendar .hasWeeks .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:40px;border-top:1px solid var(--fwe-gray-200)}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:after,.flatpickr-calendar:before{position:absolute;display:block;pointer-events:none;border:solid transparent;content:unset;height:0;width:0;left:32px}.flatpickr-calendar.rightMost:after,.flatpickr-calendar.rightMost:before{left:auto;right:32px}.flatpickr-calendar:before{border-width:7px;margin:0 -7px}.flatpickr-calendar:after{border-width:6px;margin:0 -6px}.flatpickr-calendar.arrowTop:after,.flatpickr-calendar.arrowTop:before{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:rgba(0,0,0,.15)}.flatpickr-calendar.arrowTop:after{border-bottom-color:var(--fwe-white)}.flatpickr-calendar.arrowBottom:after,.flatpickr-calendar.arrowBottom:before{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:var(--fwe-border)}.flatpickr-calendar.arrowBottom:after{border-top-color:var(--fwe-white)}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:0 0;color:var(--fwe-text);fill:var(--fwe-text);height:42px;margin-top:12px;line-height:24px;text-align:center;position:relative;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;flex:1}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{text-decoration:none;cursor:pointer;position:absolute;top:0;height:42px;z-index:3;color:var(--fwe-text)}.flatpickr-months .flatpickr-next-month i,.flatpickr-months .flatpickr-prev-month i{position:relative}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-next-month svg path,.flatpickr-months .flatpickr-prev-month svg path{transition:fill .1s;fill:inherit}.flatpickr-months .flatpickr-next-month.flatpickr-disabled,.flatpickr-months .flatpickr-prev-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:var(--fwe-text-light)}.flatpickr-months .flatpickr-next-month:hover svg,.flatpickr-months .flatpickr-prev-month:hover svg{fill:var(--fwe-hero)}.flatpickr-months .flatpickr-next-month{padding:24px 20px 0 0;right:0}.flatpickr-months .flatpickr-prev-month{left:0;padding:24px 0 0 20px}.numInputWrapper{position:relative;height:auto}.numInputWrapper input::-webkit-inner-spin-button,.numInputWrapper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.numInputWrapper input[type=number]{-moz-appearance:textfield}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%;font-weight:var(--fwe-font-weight-bold)}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper span{position:absolute;right:-8px;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;box-sizing:border-box}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid var(--fwe-text);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--fwe-text);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,.5)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:var(--fwe-font-size-base);font-weight:var(--fwe-font-weight-normal);position:absolute;width:75%;left:12.5%;padding:7px 0 0 0;line-height:calc(var(--fwe-font-size-base) + 8px);height:34px;display:inline-block;text-align:center;transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:var(--fwe-font-weight-bold);color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{color:var(--fwe-hero)}.flatpickr-current-month select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;background-image:url("data:image/svg+xml;utf8,<svg  height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'><g><polygon points='8,10.7 3.6,6.4 4.4,5.6 8,9.3 11.6,5.6 12.4,6.4'/></g></svg>");background-repeat:no-repeat;background-position-x:100%;background-position-y:70%;border:none;color:inherit;cursor:pointer;line-height:24px;margin:-1px 0 0 0;outline:0;padding-left:8px;padding-right:16px}.flatpickr-current-month select:hover{color:var(--fwe-hero);background-image:url("data:image/svg+xml;utf8,<svg fill='rgb(0, 145, 220)'  height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'><g><polygon points='8,10.7 3.6,6.4 4.4,5.6 8,9.3 11.6,5.6 12.4,6.4'/></g></svg>")}.flatpickr-current-month select option{color:var(--fwe-text)!important}.flatpickr-current-month .numInputWrapper{width:60px;display:inline-block}.flatpickr-current-month .numInputWrapper input{background:0 0;box-sizing:border-box;color:inherit;cursor:text;margin-left:16px;display:inline-block;line-height:24px;border:0;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month .numInputWrapper:hover{color:var(--fwe-hero)}.flatpickr-current-month .numInputWrapper .arrowUp:hover:after{border-bottom-color:var(--fwe-hero)}.flatpickr-current-month .numInputWrapper .arrowDown:hover:after{border-top-color:var(--fwe-hero)}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,.5);background:0 0;pointer-events:none}.flatpickr-monthDropdown-months{font-weight:var(--fwe-font-weight-bold)}.flatpickr-current-month .flatpickr-monthDropdown-months:active,.flatpickr-current-month .flatpickr-monthDropdown-months:focus{outline:0}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:0;padding:0}.flatpickr-weekdays{border-bottom:1px solid var(--fwe-border);background:0 0;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:48px;margin-bottom:4px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}span.flatpickr-weekday{cursor:default;font-size:var(--fwe-font-size-md);background:0 0;color:var(--fwe-text-light);line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:var(--fwe-font-weight-normal)}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:304px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:304px;min-width:304px;max-width:304px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;justify-content:space-around;transform:translate3d(0,0,0);opacity:1}.dayContainer+.dayContainer{box-shadow:-1px 0 0 var(--fwe-gray-200)}.flatpickr-day{background:0 0;border:2px;border-radius:150px;box-sizing:border-box;color:var(--fwe-text);cursor:pointer;font-weight:var(--fwe-font-weight-normal);width:14.2857143%;flex-basis:14.2857143%;max-width:33px;height:33px;line-height:33px;margin:4px;display:inline-block;position:relative;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus{cursor:pointer;outline:0;background:var(--fwe-gray-200);border-color:var(--fwe-gray-200);font-weight:var(--fwe-font-weight-bold)}.flatpickr-day:hover{cursor:pointer;outline:0;color:var(--fwe-hero-dark)}.flatpickr-day.today{background-color:inherit;font-weight:var(--fwe-font-weight-bold);text-decoration:underline}.flatpickr-day.today:hover{color:var(--fwe-hero-dark)}.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.selected,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover{background:var(--fwe-white);box-shadow:none;color:var(--fwe-hero);border:2px solid var(--fwe-hero);font-weight:var(--fwe-font-weight-bold);line-height:28px}.flatpickr-day.endRange.flatpickr-disabled,.flatpickr-day.endRange.inRange.flatpickr-disabled,.flatpickr-day.endRange.nextMonthDay.flatpickr-disabled,.flatpickr-day.endRange.prevMonthDay.flatpickr-disabled,.flatpickr-day.endRange:focus.flatpickr-disabled,.flatpickr-day.endRange:hover.flatpickr-disabled,.flatpickr-day.selected.flatpickr-disabled,.flatpickr-day.selected.inRange.flatpickr-disabled,.flatpickr-day.selected.nextMonthDay.flatpickr-disabled,.flatpickr-day.selected.prevMonthDay.flatpickr-disabled,.flatpickr-day.selected:focus.flatpickr-disabled,.flatpickr-day.selected:hover.flatpickr-disabled,.flatpickr-day.startRange.flatpickr-disabled,.flatpickr-day.startRange.inRange.flatpickr-disabled,.flatpickr-day.startRange.nextMonthDay.flatpickr-disabled,.flatpickr-day.startRange.prevMonthDay.flatpickr-disabled,.flatpickr-day.startRange:focus.flatpickr-disabled,.flatpickr-day.startRange:hover.flatpickr-disabled{color:var(--fwe-text-disabled);background:var(--fwe-control-disabled)}.flatpickr-day.startRange.startRange{border-radius:50px;box-shadow:none}.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px;box-shadow:10px 0 0 var(--fwe-hero)}.flatpickr-day.selected.startRange{border-radius:50px;box-shadow:none}.flatpickr-day.endRange:not(.inRange):not(.startRange),.flatpickr-day.selected.endRange:not(.inRange):not(.startRange){border-radius:50px;position:relative}.flatpickr-day.endRange:not(.inRange):not(.startRange)::before,.flatpickr-day.selected.endRange:not(.inRange):not(.startRange)::before{content:"";position:absolute;height:calc(100% + 4px);z-index:-1;width:42px;background-color:var(--fwe-gray-200);left:-26px;top:-2px}.flatpickr-day.endRange:not(.inRange):not(.startRange).flatpickr-disabled::before,.flatpickr-day.selected.endRange:not(.inRange):not(.startRange).flatpickr-disabled::before{background-color:var(--fwe-gray-200)}.flatpickr-day.endRange.endRange,.flatpickr-day.startRange.endRange{border-radius:50px}.flatpickr-day.startRange:not(:hover):not(.endRange):nth-child(7n)::before{content:"";position:absolute;height:100%;z-index:-1;width:24px;background-color:var(--fwe-gray-200);left:16px}.flatpickr-day.startRange:not(:hover):not(.endRange):nth-child(7n).flatpickr-disabled::before{background-color:var(--fwe-gray-200)}.flatpickr-day.endRange.startRange.endRange,.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange:not(.startRange){box-shadow:none;position:relative}.flatpickr-day.inRange:not(.startRange):not(.endRange):nth-child(7n){border-radius:0;box-shadow:-10px 0 0 var(--fwe-gray-200),24px 0 0 var(--fwe-gray-200)}.flatpickr-day.inRange:not(.startRange):not(.endRange):nth-child(7n).flatpickr-disabled{box-shadow:-10px 0 0 var(--fwe-gray-100),24px 0 0 var(--fwe-gray-100)}.flatpickr-day.inRange:not(.startRange)::before{content:"";position:absolute;height:100%;z-index:-1;width:48px;background-color:var(--fwe-gray-200);left:-28px}.flatpickr-day.inRange:not(.startRange).flatpickr-disabled::before{background-color:var(--fwe-gray-100)}.flatpickr-day.inRange~.flatpickr-day.inRange:not(.selected){border-radius:0;box-shadow:-10px 0 0 var(--fwe-gray-200),24px 0 0 var(--fwe-gray-200)}.flatpickr-day.inRange~.flatpickr-day.inRange:not(.selected).flatpickr-disabled{box-shadow:-10px 0 0 var(--fwe-gray-100),24px 0 0 var(--fwe-gray-100);background:var(--fwe-gray-100)}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:rgba(57,57,57,.3);background:0 0;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,.1)}.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 0 var(--fwe-hero),5px 0 0 var(--fwe-hero)}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 0 var(--fwe-gray-200)}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,.3);background:0 0;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;height:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:var(--fwe-control-border)}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:var(--fwe-control-border)}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:0 0;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:var(--fwe-text);font-size:var(--fwe-font-size-md);position:relative;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:var(--fwe-font-weight-bold)}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:var(--fwe-font-weight-normal)}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-am-pm,.flatpickr-time .flatpickr-time-separator{height:inherit;float:left;line-height:inherit;color:var(--fwe-text);font-weight:var(--fwe-font-weight-bold);width:2%;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:var(--fwe-font-weight-normal)}.flatpickr-time .flatpickr-am-pm:focus,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time input:hover{background:var(--fwe-white)}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

package/dist/scss/_breadcrumb.scss

@@ -6,8 +6,6 @@
   color: $text-light;
 
   .fwe-icon-arrows-right-2 {
-    margin-top: 1px;
-    margin-bottom: -1px;
     margin-left: 4px;
     margin-right: 4px;
   }

package/dist/scss/_button.scss

@@ -21,10 +21,6 @@ button.fwe-btn {
     padding-right: 8px;
   }
 
-  span {
-    margin: -1px 0px 1px 0px;
-  }
-
   &:hover {
     color: $btn-text-hover;
     background: $btn-hover;

package/dist/scss/_checkbox.scss

@@ -74,7 +74,6 @@ label.fwe-checkbox {
     border: 1px solid $control-border;
     background-color: $white;
     border-radius: 2px;
-    margin-top: 2px;
     font-size: $font-size-md;
     @extend .fwe-icon;
     @extend .fwe-icon-menu-check;

package/dist/scss/_fonts.scss

@@ -1,16 +1,22 @@
+/* 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");

package/dist/scss/_icons.scss

@@ -1,4 +1,5 @@
 @mixin icon-base {
+  font-family: $font-family-icons-16; // this is needed to center the icons vertically
   font-size: $font-size-base;
   display: inline-block;
   &:before {
@@ -147,7 +148,7 @@
 .fwe-icon-communication-emergency-hotline:before {
   content: "\e919";
 }
-.fwe-icon-communication-audio-on:before {
+.fwe-icon-communication-headset:before {
   content: "\e91a";
 }
 .fwe-icon-communication-infoportal:before {
@@ -540,7 +541,7 @@
 .fwe-icon-file-search:before {
   content: "\e99c";
 }
-.fwe-icon-file-lock:before {
+.fwe-icon-file-secure:before {
   content: "\e99d";
 }
 .fwe-icon-file-share:before {
@@ -1338,3 +1339,111 @@
 .fwe-icon-show-user:before {
   content: "\eaa6";
 }
+.fwe-icon-align-bottom:before {
+  content: "\eaa7";
+}
+.fwe-icon-align-center:before {
+  content: "\eaa8";
+}
+.fwe-icon-align-left:before {
+  content: "\eaa9";
+}
+.fwe-icon-align-middle:before {
+  content: "\eaaa";
+}
+.fwe-icon-align-right:before {
+  content: "\eaab";
+}
+.fwe-icon-align-top:before {
+  content: "\eaac";
+}
+.fwe-icon-artificial-intelligence-AI:before {
+  content: "\eaad";
+}
+.fwe-icon-assign-to-learner:before {
+  content: "\eaae";
+}
+.fwe-icon-augmented-reality:before {
+  content: "\eaaf";
+}
+.fwe-icon-bus-systems:before {
+  content: "\eab0";
+}
+.fwe-icon-cobotic:before {
+  content: "\eab1";
+}
+.fwe-icon-controlled:before {
+  content: "\eab2";
+}
+.fwe-icon-distribute-columns:before {
+  content: "\eab3";
+}
+.fwe-icon-electrics:before {
+  content: "\eab4";
+}
+.fwe-icon-energy-efficiency:before {
+  content: "\eab5";
+}
+.fwe-icon-fast-delivery:before {
+  content: "\eab6";
+}
+.fwe-icon-funk:before {
+  content: "\eab7";
+}
+.fwe-icon-hide-label:before {
+  content: "\eab8";
+}
+.fwe-icon-iiot:before {
+  content: "\eab9";
+}
+.fwe-icon-iot:before {
+  content: "\eaba";
+}
+.fwe-icon-learning-path1:before {
+  content: "\eabb";
+}
+.fwe-icon-mobotic:before {
+  content: "\eabc";
+}
+.fwe-icon-new-link:before {
+  content: "\eabd";
+}
+.fwe-icon-numeric-value:before {
+  content: "\eabe";
+}
+.fwe-icon-piezo:before {
+  content: "\eabf";
+}
+.fwe-icon-pneumatics:before {
+  content: "\eac0";
+}
+.fwe-icon-recycling:before {
+  content: "\eac1";
+}
+.fwe-icon-remove-link:before {
+  content: "\eac2";
+}
+.fwe-icon-remove-user:before {
+  content: "\eac3";
+}
+.fwe-icon-safety:before {
+  content: "\eac4";
+}
+.fwe-icon-show-label:before {
+  content: "\eac5";
+}
+.fwe-icon-show-link:before {
+  content: "\eac6";
+}
+.fwe-icon-smart:before {
+  content: "\eac7";
+}
+.fwe-icon-sustainable-materials:before {
+  content: "\eac9";
+}
+.fwe-icon-text-value:before {
+  content: "\eaca";
+}
+.fwe-icon-virtual-reality:before {
+  content: "\eacb";
+}

package/dist/scss/_mobile-flyout.scss

@@ -59,6 +59,10 @@
   bottom: 0;
   transform: translateX(100%);
   transition: transform 0.3s ease;
+  @include custom-scrollbar;
+  overflow-x: hidden;
+  overflow-y: auto;
+
   &.fwe-opened {
     transform: translateX(0%);
   }

package/dist/scss/_navbar-menu.scss

@@ -317,6 +317,7 @@
         margin-top: 11px;
       }
       @extend .fwe-icon;
+      font-family: $font-family-base;
       &::before {
         position: absolute;
         left: -32px;

package/dist/scss/_radio.scss

@@ -65,7 +65,6 @@ label.fwe-radio {
     border: 1px solid $control-border;
     background-color: $white;
     border-radius: 50%;
-    margin-top: 2px;
 
     &:after {
       content: "";

package/dist/scss/_search-input.scss

@@ -35,7 +35,7 @@
     border-radius: 0px;
     border-bottom: 1px solid $control-border;
     background: transparent;
-    padding: 0px 24px 5px 32px;
+    padding: 1px 24px 4px 32px;
     &::placeholder {
       color: $text;
     }

package/dist/scss/_select.scss

@@ -8,6 +8,7 @@
 }
 
 .fwe-select-wrapper {
+  font-family: $font-size-base;
   position: relative;
   display: flex;
   flex-direction: column;

package/dist/scss/_stepper-horizontal.scss

@@ -44,6 +44,7 @@
       }
 
       .fwe-step-name {
+        font-family: $font-family-base;
         @media (max-width: 900px) {
           display: none;
         }

package/dist/scss/_stepper-vertical.scss

@@ -31,6 +31,7 @@ $vertical-step-height: 300px;
       }
 
       .fwe-step-name {
+        font-family: $font-family-base;
         font-size: $font-size-md;
         position: absolute;
         left: 36px;

package/dist/scss/_table.scss

@@ -27,6 +27,7 @@ table.fwe-table {
         direction: rtl;
         @extend .fwe-icon;
         @extend .fwe-icon-arrows-expand;
+        font-family: $font-family-base;
         display: table-cell;
         font-size: $font-size-md;
         &::before {
@@ -35,7 +36,7 @@ table.fwe-table {
           position: relative;
           top: 3px;
           left: 8px;
-          transform-origin: center center;
+          transform-origin: 8px 7px;
           transition: transform 0.3s;
         }
 

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

@@ -1,5 +1,5 @@
 /*!
- * 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
  */

package/dist/scss/organisms/festo-web-essentials-organisms.scss

@@ -1,5 +1,5 @@
 /*!
- * 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
  */

package/dist/scss/themes/flatpickr/festo.scss

@@ -1,5 +1,5 @@
 /*!
- * 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
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/web-essentials",
-  "version": "3.2.0",
+  "version": "3.2.1-pre-20220602.1",
   "description": "CSS framework and utils to build FESTO web applications",
   "main": "jest.config.js",
   "style": "dist/css/festo-web-essentials.css",

package/scss/_breadcrumb.scss

@@ -6,8 +6,6 @@
   color: $text-light;
 
   .fwe-icon-arrows-right-2 {
-    margin-top: 1px;
-    margin-bottom: -1px;
     margin-left: 4px;
     margin-right: 4px;
   }

package/scss/_button.scss

@@ -21,10 +21,6 @@ button.fwe-btn {
     padding-right: 8px;
   }
 
-  span {
-    margin: -1px 0px 1px 0px;
-  }
-
   &:hover {
     color: $btn-text-hover;
     background: $btn-hover;

package/scss/_checkbox.scss

@@ -74,7 +74,6 @@ label.fwe-checkbox {
     border: 1px solid $control-border;
     background-color: $white;
     border-radius: 2px;
-    margin-top: 2px;
     font-size: $font-size-md;
     @extend .fwe-icon;
     @extend .fwe-icon-menu-check;

package/scss/_fonts.scss

@@ -1,16 +1,22 @@
+/* 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");

package/scss/_icons.scss

@@ -1,4 +1,5 @@
 @mixin icon-base {
+  font-family: $font-family-icons-16; // this is needed to center the icons vertically
   font-size: $font-size-base;
   display: inline-block;
   &:before {
@@ -147,7 +148,7 @@
 .fwe-icon-communication-emergency-hotline:before {
   content: "\e919";
 }
-.fwe-icon-communication-audio-on:before {
+.fwe-icon-communication-headset:before {
   content: "\e91a";
 }
 .fwe-icon-communication-infoportal:before {
@@ -540,7 +541,7 @@
 .fwe-icon-file-search:before {
   content: "\e99c";
 }
-.fwe-icon-file-lock:before {
+.fwe-icon-file-secure:before {
   content: "\e99d";
 }
 .fwe-icon-file-share:before {
@@ -1338,3 +1339,111 @@
 .fwe-icon-show-user:before {
   content: "\eaa6";
 }
+.fwe-icon-align-bottom:before {
+  content: "\eaa7";
+}
+.fwe-icon-align-center:before {
+  content: "\eaa8";
+}
+.fwe-icon-align-left:before {
+  content: "\eaa9";
+}
+.fwe-icon-align-middle:before {
+  content: "\eaaa";
+}
+.fwe-icon-align-right:before {
+  content: "\eaab";
+}
+.fwe-icon-align-top:before {
+  content: "\eaac";
+}
+.fwe-icon-artificial-intelligence-AI:before {
+  content: "\eaad";
+}
+.fwe-icon-assign-to-learner:before {
+  content: "\eaae";
+}
+.fwe-icon-augmented-reality:before {
+  content: "\eaaf";
+}
+.fwe-icon-bus-systems:before {
+  content: "\eab0";
+}
+.fwe-icon-cobotic:before {
+  content: "\eab1";
+}
+.fwe-icon-controlled:before {
+  content: "\eab2";
+}
+.fwe-icon-distribute-columns:before {
+  content: "\eab3";
+}
+.fwe-icon-electrics:before {
+  content: "\eab4";
+}
+.fwe-icon-energy-efficiency:before {
+  content: "\eab5";
+}
+.fwe-icon-fast-delivery:before {
+  content: "\eab6";
+}
+.fwe-icon-funk:before {
+  content: "\eab7";
+}
+.fwe-icon-hide-label:before {
+  content: "\eab8";
+}
+.fwe-icon-iiot:before {
+  content: "\eab9";
+}
+.fwe-icon-iot:before {
+  content: "\eaba";
+}
+.fwe-icon-learning-path1:before {
+  content: "\eabb";
+}
+.fwe-icon-mobotic:before {
+  content: "\eabc";
+}
+.fwe-icon-new-link:before {
+  content: "\eabd";
+}
+.fwe-icon-numeric-value:before {
+  content: "\eabe";
+}
+.fwe-icon-piezo:before {
+  content: "\eabf";
+}
+.fwe-icon-pneumatics:before {
+  content: "\eac0";
+}
+.fwe-icon-recycling:before {
+  content: "\eac1";
+}
+.fwe-icon-remove-link:before {
+  content: "\eac2";
+}
+.fwe-icon-remove-user:before {
+  content: "\eac3";
+}
+.fwe-icon-safety:before {
+  content: "\eac4";
+}
+.fwe-icon-show-label:before {
+  content: "\eac5";
+}
+.fwe-icon-show-link:before {
+  content: "\eac6";
+}
+.fwe-icon-smart:before {
+  content: "\eac7";
+}
+.fwe-icon-sustainable-materials:before {
+  content: "\eac9";
+}
+.fwe-icon-text-value:before {
+  content: "\eaca";
+}
+.fwe-icon-virtual-reality:before {
+  content: "\eacb";
+}

package/scss/_mobile-flyout.scss

@@ -59,6 +59,10 @@
   bottom: 0;
   transform: translateX(100%);
   transition: transform 0.3s ease;
+  @include custom-scrollbar;
+  overflow-x: hidden;
+  overflow-y: auto;
+
   &.fwe-opened {
     transform: translateX(0%);
   }

package/scss/_navbar-menu.scss

@@ -317,6 +317,7 @@
         margin-top: 11px;
       }
       @extend .fwe-icon;
+      font-family: $font-family-base;
       &::before {
         position: absolute;
         left: -32px;

package/scss/_radio.scss

@@ -65,7 +65,6 @@ label.fwe-radio {
     border: 1px solid $control-border;
     background-color: $white;
     border-radius: 50%;
-    margin-top: 2px;
 
     &:after {
       content: "";