@festo-ui/web-essentials 7.3.0-dev.461 → 7.3.0-dev.464

package/README.md

@@ -1,83 +1,83 @@
-# FESTO UI
-
-## Web Essentials - Digital Styleguide
-
-Welcome to the CSS component framework of Festo for web developers!
-Here you’ll find components that have been implemented by the specification of the Design department.
-The library contains everything you need to build great projects in the design of Festo.
-Showcases, components, templates and much more, containing the digital essentials of the Festo Brand.
-
-The Web Essentials project is the base layer for all Festo web developments in the form of a CSS framework.
-It is written in SCSS and brings you all the features you need to quickstart your next web project.
-For example it contains a responsive grid layout, icons, form controls and many more.
-This framework comes with no javascript at all so you can use it with the javascript framework of your choice.
-
-We are also providing [examples](https://festo.gitlab-pages.festo.company/digital-styleguide/templates/) that you can use as a quickstart for your next Festo web application.
-Let us know if you have a demand for a specific example and we will see what we can do.
-
-### Angular & React
-
-We love Angular and React at Festo. We deliver the component libraries for Angular and React based on the Web Essentials [@festo-ui/angular](https://www.npmjs.com/package/@festo-ui/angular) and [@festo-ui/react](https://www.npmjs.com/package/@festo-ui/react).
-These libraries extend the basic HTML controls of the Web Essentials with enhanced (non-basic) features.
-For example Checkboxes with indeterminate state or sortable table headings.
-
-You can explore the current version of Web Essentials, Angular and React components at [https://storybook.festo.design](https://storybook.festo.design).
-
-## Getting started
-
-Festo Web Essentials comes as a NPM package.
-Oh you don't know NPM? Then you must start a bit further at [Node.js](https://nodejs.org).
-
-### Install
-
-Installing the libraries is very easy. Just use this command to install the Web Essentials to your project:
-
-`npm install @festo-ui/web-essentials`
-
-If you just need the static CSS resources then you can find them inside the `dist` directory.
-
-Import the css like this:
-
-```css
-... @import '~@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css' ...;
-```
-
-### Using the SCSS variables in your project
-
-If you want to use the variables (color or more) from the web essentials library, you can add the scss resources.
-
-You'll find them inside the directory `node_modules/@festo-ui/web-essentials/scss`.
-
-You can use the variables like this:
-`example.scss`
-
-```scss
-@import '~@festo-ui/web-essentials/scss/variables';
-
-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 or with an non-latin style font, you have to provide own files for the Festo 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');
-}
-
-@font-face {
-  font-family: 'localMeta';
-  src: url('../src/fonts/MetaChinese-Bold.woff') format('woff'), url('../src/fonts/MetaChinese-Bold.woff2') format('woff2');
-  font-weight: bold;
-}
-
-:root {
-  --fwe-font-family-sans-serif: 'localMeta';
-}
-```
+# FESTO UI
+
+## Web Essentials - Digital Styleguide
+
+Welcome to the CSS component framework of Festo for web developers!
+Here you’ll find components that have been implemented by the specification of the Design department.
+The library contains everything you need to build great projects in the design of Festo.
+Showcases, components, templates and much more, containing the digital essentials of the Festo Brand.
+
+The Web Essentials project is the base layer for all Festo web developments in the form of a CSS framework.
+It is written in SCSS and brings you all the features you need to quickstart your next web project.
+For example it contains a responsive grid layout, icons, form controls and many more.
+This framework comes with no javascript at all so you can use it with the javascript framework of your choice.
+
+We are also providing [examples](https://festo.gitlab-pages.festo.company/digital-styleguide/templates/) that you can use as a quickstart for your next Festo web application.
+Let us know if you have a demand for a specific example and we will see what we can do.
+
+### Angular & React
+
+We love Angular and React at Festo. We deliver the component libraries for Angular and React based on the Web Essentials [@festo-ui/angular](https://www.npmjs.com/package/@festo-ui/angular) and [@festo-ui/react](https://www.npmjs.com/package/@festo-ui/react).
+These libraries extend the basic HTML controls of the Web Essentials with enhanced (non-basic) features.
+For example Checkboxes with indeterminate state or sortable table headings.
+
+You can explore the current version of Web Essentials, Angular and React components at [https://storybook.festo.design](https://storybook.festo.design).
+
+## Getting started
+
+Festo Web Essentials comes as a NPM package.
+Oh you don't know NPM? Then you must start a bit further at [Node.js](https://nodejs.org).
+
+### Install
+
+Installing the libraries is very easy. Just use this command to install the Web Essentials to your project:
+
+`npm install @festo-ui/web-essentials`
+
+If you just need the static CSS resources then you can find them inside the `dist` directory.
+
+Import the css like this:
+
+```css
+... @import '~@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css' ...;
+```
+
+### Using the SCSS variables in your project
+
+If you want to use the variables (color or more) from the web essentials library, you can add the scss resources.
+
+You'll find them inside the directory `node_modules/@festo-ui/web-essentials/scss`.
+
+You can use the variables like this:
+`example.scss`
+
+```scss
+@import '~@festo-ui/web-essentials/scss/variables';
+
+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 or with an non-latin style font, you have to provide own files for the Festo 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');
+}
+
+@font-face {
+  font-family: 'localMeta';
+  src: url('../src/fonts/MetaChinese-Bold.woff') format('woff'), url('../src/fonts/MetaChinese-Bold.woff2') format('woff2');
+  font-weight: bold;
+}
+
+:root {
+  --fwe-font-family-sans-serif: 'localMeta';
+}
+```

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

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v7.3.0-dev.461 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v7.3.0-dev.464 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -86,12 +86,12 @@
   font-family: var(--fwe-font-family-monospace);
 }
 
-.fwe-icon, .fwe-navbar .fwe-navbar-burger-menu {
+.fwe-icon {
   font-family: var(--fwe-font-family-icons-16);
   font-size: var(--fwe-font-size-base);
   display: inline-block;
 }
-.fwe-icon:before, .fwe-navbar .fwe-navbar-burger-menu:before {
+.fwe-icon:before {
   line-height: 1;
   display: inline-block;
   speak-as: none;
@@ -107,21 +107,21 @@
 .fwe-icon-lg, a.fwe-btn.fwe-btn-lg i[class^=fwe-icon-],
 a.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"],
 button.fwe-btn.fwe-btn-lg i[class^=fwe-icon-],
-button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"], .fwe-chip.fwe-chip-lg i[class^=fwe-icon-], .fwe-chip-container.fwe-chip-container-lg .fwe-chip i[class^=fwe-icon-],
-.fwe-chip.fwe-chip-lg i[class*=" fwe-icon-"],
+button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"], .fwe-chip-container.fwe-chip-container-lg .fwe-chip i[class^=fwe-icon-],
 .fwe-chip-container.fwe-chip-container-lg .fwe-chip i[class*=" fwe-icon-"],
-.fwe-chip.fwe-chip-lg .fwe-svg-icon,
-.fwe-chip-container.fwe-chip-container-lg .fwe-chip .fwe-svg-icon, .fwe-navbar .fwe-navbar-burger-menu {
+.fwe-chip-container.fwe-chip-container-lg .fwe-chip .fwe-svg-icon, .fwe-chip.fwe-chip-lg i[class^=fwe-icon-],
+.fwe-chip.fwe-chip-lg i[class*=" fwe-icon-"],
+.fwe-chip.fwe-chip-lg .fwe-svg-icon {
   font-size: 24px;
 }
 .fwe-icon-lg:before, a.fwe-btn.fwe-btn-lg i[class^=fwe-icon-]:before,
 a.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before,
 button.fwe-btn.fwe-btn-lg i[class^=fwe-icon-]:before,
-button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, .fwe-chip.fwe-chip-lg i[class^=fwe-icon-]:before, .fwe-chip-container.fwe-chip-container-lg .fwe-chip i[class^=fwe-icon-]:before,
-.fwe-chip.fwe-chip-lg i[class*=" fwe-icon-"]:before,
+button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, .fwe-chip-container.fwe-chip-container-lg .fwe-chip i[class^=fwe-icon-]:before,
 .fwe-chip-container.fwe-chip-container-lg .fwe-chip i[class*=" fwe-icon-"]:before,
-.fwe-chip.fwe-chip-lg .fwe-svg-icon:before,
-.fwe-chip-container.fwe-chip-container-lg .fwe-chip .fwe-svg-icon:before, .fwe-navbar .fwe-navbar-burger-menu:before {
+.fwe-chip-container.fwe-chip-container-lg .fwe-chip .fwe-svg-icon:before, .fwe-chip.fwe-chip-lg i[class^=fwe-icon-]:before,
+.fwe-chip.fwe-chip-lg i[class*=" fwe-icon-"]:before,
+.fwe-chip.fwe-chip-lg .fwe-svg-icon:before {
   font-family: var(--fwe-font-family-icons-24) !important;
 }
 
@@ -1025,7 +1025,7 @@ button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, .fwe-chip.fwe-chip-lg i
   content: "\e9d7";
 }
 
-.fwe-icon-menu-menu:before, .fwe-navbar .fwe-navbar-burger-menu:before {
+.fwe-icon-menu-menu:before {
   content: "\e9d8";
 }
 
@@ -2991,7 +2991,11 @@ template {
   text-align: start;
 }
 
-/* a screen reader friendly approach */
+/*!
+ * Festo UI - Web Essentials v7.3.0-dev.464 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
 .fwe-d-none {
   display: none !important;
 }
@@ -14280,20 +14284,6 @@ header.fwe-fixed-header {
   left: 0px;
   margin-right: 24px;
 }
-.fwe-navbar .fwe-navbar-burger-menu {
-  padding: 0px;
-  line-height: 1;
-  height: 24px;
-  border: none;
-  background: none;
-  outline: none;
-  margin-bottom: 16px;
-  margin-right: auto;
-  cursor: pointer;
-}
-.fwe-navbar .fwe-navbar-burger-menu:hover {
-  color: var(--fwe-hero);
-}
 @keyframes fadeInAnimation {
   0% {
     visibility: hidden;
@@ -14458,6 +14448,11 @@ header.fwe-fixed-header {
   margin-top: 64px;
 }
 
+/*!
+ * Festo UI - Web Essentials v7.3.0-dev.464 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
 .fwe-mobile-flyout {
   position: relative;
 }
@@ -14652,7 +14647,7 @@ a {
   color: var(--fwe-hero);
   text-decoration: none;
 }
-a i.fwe-icon, a .fwe-navbar i.fwe-navbar-burger-menu, .fwe-navbar a i.fwe-navbar-burger-menu {
+a i.fwe-icon {
   vertical-align: text-top;
 }
 a.fwe-dark {
@@ -15580,6 +15575,11 @@ a.fwe-btn.fwe-disabled {
   pointer-events: none;
 }
 
+/*!
+ * Festo UI - Web Essentials v7.3.0-dev.464 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
 label.fwe-slider span {
   margin-bottom: 4px;
   display: inline-block;
@@ -16463,6 +16463,11 @@ fieldset.fwe-progress-container label {
   }
 }
 
+/*!
+ * Festo UI - Web Essentials v7.3.0-dev.464 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
 .fwe-modal {
   padding: 48px;
   z-index: var(--fwe-z-index-modal);
@@ -16681,6 +16686,11 @@ fieldset.fwe-progress-container label {
     min-width: unset;
   }
 }
+/*!
+ * Festo UI - Web Essentials v7.3.0-dev.464 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
 .fwe-segment {
   display: inline-block;
   padding: 0;
@@ -17113,7 +17123,7 @@ fieldset.fwe-progress-container label {
   text-align: left;
   justify-content: unset;
 }
-.fwe-profile-menu .fwe-profile-menu-item .fwe-icon, .fwe-profile-menu .fwe-profile-menu-item .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-profile-menu .fwe-profile-menu-item .fwe-navbar-burger-menu,
+.fwe-profile-menu .fwe-profile-menu-item .fwe-icon,
 .fwe-profile-menu .fwe-profile-menu-item .fwe-svg-icon {
   margin-right: 12px !important;
 }
@@ -17388,6 +17398,11 @@ fieldset.fwe-progress-container label {
   color: var(--fwe-red);
 }
 
+/*!
+ * Festo UI - Web Essentials v7.3.0-dev.464 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
 @-moz-document url-prefix() {
   .fwe-scrollbar {
     scrollbar-width: thin;
@@ -17772,7 +17787,7 @@ input[type=search]::-webkit-search-cancel-button {
   color: var(--fwe-hero-gray);
   position: relative;
 }
-.fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-icon, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-navbar-burger-menu {
+.fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-icon {
   line-height: 0px;
 }
 .fwe-bottom-navigation .fwe-bottom-navigation-button :after {
@@ -17883,6 +17898,11 @@ input[type=search]::-webkit-search-cancel-button {
     margin-right: 64px;
   }
 }
+/*!
+ * Festo UI - Web Essentials v7.3.0-dev.464 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
 .fwe-tree {
   position: relative;
 }
@@ -17945,11 +17965,11 @@ input[type=search]::-webkit-search-cancel-button {
   transform: scaleX(4);
   transition: transform 0.2s;
 }
-.fwe-tree-node-container--selected > .fwe-tree-node .fwe-btn--tree-node-toggle .fwe-icon, .fwe-tree-node-container--selected > .fwe-tree-node .fwe-btn--tree-node-toggle .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node-container--selected > .fwe-tree-node .fwe-btn--tree-node-toggle .fwe-navbar-burger-menu,
+.fwe-tree-node-container--selected > .fwe-tree-node .fwe-btn--tree-node-toggle .fwe-icon,
 .fwe-tree-node-container--selected > .fwe-tree-node .fwe-btn--tree-node-toggle .fwe-svg-icon {
   color: var(--fwe-caerul);
 }
-.fwe-tree-node-container--selected > .fwe-tree-node .fwe-btn--tree-node-select .fwe-icon, .fwe-tree-node-container--selected > .fwe-tree-node .fwe-btn--tree-node-select .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node-container--selected > .fwe-tree-node .fwe-btn--tree-node-select .fwe-navbar-burger-menu,
+.fwe-tree-node-container--selected > .fwe-tree-node .fwe-btn--tree-node-select .fwe-icon,
 .fwe-tree-node-container--selected > .fwe-tree-node .fwe-btn--tree-node-select .fwe-svg-icon {
   color: var(--fwe-caerul);
 }
@@ -17960,7 +17980,7 @@ input[type=search]::-webkit-search-cancel-button {
 .fwe-tree-node-container--disabled {
   pointer-events: none;
 }
-.fwe-tree-node-container--disabled > .fwe-tree-node .fwe-tree-node-alert .fwe-icon, .fwe-tree-node-container--disabled > .fwe-tree-node .fwe-tree-node-alert .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node-container--disabled > .fwe-tree-node .fwe-tree-node-alert .fwe-navbar-burger-menu,
+.fwe-tree-node-container--disabled > .fwe-tree-node .fwe-tree-node-alert .fwe-icon,
 .fwe-tree-node-container--disabled > .fwe-tree-node .fwe-tree-node-alert .fwe-svg-icon {
   color: var(--fwe-text-disabled) !important;
 }
@@ -18025,6 +18045,28 @@ input[type=search]::-webkit-search-cancel-button {
   align-items: center;
   justify-content: center;
 }
+.fwe-tree-node:hover .fwe-tree-node-text {
+  color: var(--fwe-hero-hover);
+}
+.fwe-tree-node:hover .fwe-btn--tree-node-select .fwe-icon,
+.fwe-tree-node:hover .fwe-btn--tree-node-select .fwe-svg-icon {
+  color: var(--fwe-hero-hover);
+}
+.fwe-tree-node:hover .fwe-btn--tree-node-toggle .fwe-icon,
+.fwe-tree-node:hover .fwe-btn--tree-node-toggle .fwe-svg-icon {
+  color: var(--fwe-hero-hover);
+}
+.fwe-tree-node:active .fwe-tree-node-text {
+  color: var(--fwe-hero-active);
+}
+.fwe-tree-node:active .fwe-btn--tree-node-select .fwe-icon,
+.fwe-tree-node:active .fwe-btn--tree-node-select .fwe-svg-icon {
+  color: var(--fwe-hero-active);
+}
+.fwe-tree-node:active .fwe-btn--tree-node-toggle .fwe-icon,
+.fwe-tree-node:active .fwe-btn--tree-node-toggle .fwe-svg-icon {
+  color: var(--fwe-hero-active);
+}
 .fwe-tree--nested .fwe-tree-node-container {
   display: block;
   position: static;
@@ -18047,34 +18089,10 @@ input[type=search]::-webkit-search-cancel-button {
   flex-basis: 100%;
 }
 
-.fwe-btn--tree-node-select .fwe-icon, .fwe-btn--tree-node-select .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-btn--tree-node-select .fwe-navbar-burger-menu {
+.fwe-btn--tree-node-select .fwe-icon {
   padding-right: 0;
 }
 
-.fwe-tree-node:hover .fwe-tree-node-text {
-  color: var(--fwe-hero-hover);
-}
-.fwe-tree-node:hover .fwe-btn--tree-node-select .fwe-icon, .fwe-tree-node:hover .fwe-btn--tree-node-select .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node:hover .fwe-btn--tree-node-select .fwe-navbar-burger-menu,
-.fwe-tree-node:hover .fwe-btn--tree-node-select .fwe-svg-icon {
-  color: var(--fwe-hero-hover);
-}
-.fwe-tree-node:hover .fwe-btn--tree-node-toggle .fwe-icon, .fwe-tree-node:hover .fwe-btn--tree-node-toggle .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node:hover .fwe-btn--tree-node-toggle .fwe-navbar-burger-menu,
-.fwe-tree-node:hover .fwe-btn--tree-node-toggle .fwe-svg-icon {
-  color: var(--fwe-hero-hover);
-}
-
-.fwe-tree-node:active .fwe-tree-node-text {
-  color: var(--fwe-hero-active);
-}
-.fwe-tree-node:active .fwe-btn--tree-node-select .fwe-icon, .fwe-tree-node:active .fwe-btn--tree-node-select .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node:active .fwe-btn--tree-node-select .fwe-navbar-burger-menu,
-.fwe-tree-node:active .fwe-btn--tree-node-select .fwe-svg-icon {
-  color: var(--fwe-hero-active);
-}
-.fwe-tree-node:active .fwe-btn--tree-node-toggle .fwe-icon, .fwe-tree-node:active .fwe-btn--tree-node-toggle .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node:active .fwe-btn--tree-node-toggle .fwe-navbar-burger-menu,
-.fwe-tree-node:active .fwe-btn--tree-node-toggle .fwe-svg-icon {
-  color: var(--fwe-hero-active);
-}
-
 .fwe-sidebar-overlay {
   z-index: var(--fwe-z-index-sticky);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
@@ -18126,6 +18144,11 @@ input[type=search]::-webkit-search-cancel-button {
   }
 }
 
+/*!
+ * Festo UI - Web Essentials v7.3.0-dev.464 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
 .fwe-bottom-sheet-header {
   position: relative;
   display: flex;