@festo-ui/web-essentials 11.0.1 → 11.1.0-dev.977

package/dist/scss/{_bottom-navigation.scss → _mobile-tab-bar.scss}

@@ -1,47 +1,50 @@
-@use "variables";
-
-.fwe-bottom-navigation {
-  width: 100%;
-  display: flex;
-  background: variables.$white;
-  align-items: flex-start;
-  justify-content: space-around;
-  border-top: 1px solid variables.$border;
-  height: 84px;
-  padding: 22px 16px;
-  .fwe-bottom-navigation-button {
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    .fwe-icon {
-      line-height: 0px;
-    }
-    display: flex;
-    align-items: center;
-    background: none;
-    border: none;
-    outline: none;
-    color: variables.$hero-gray;
-    position: relative;
-    :after {
-      content: "";
-      position: absolute;
-      top: -23px;
-      left: 0px;
-      right: 0px;
-      height: 0px;
-      background: variables.$hero;
-      transition: height 0.3s ease;
-    }
-    &.fwe-selected {
-      color: variables.$hero;
-      cursor: default;
-      :after {
-        height: 4px;
-      }
-    }
-    &:active {
-      color: variables.$hero-active;
-    }
-  }
-}
+@use "variables";
+
+.fwe-bottom-navigation, // deprecated
+.fwe-mobile-tab-bar {
+  width: 100%;
+  display: flex;
+  background: variables.$white;
+  align-items: flex-start;
+  justify-content: space-around;
+  border-top: 1px solid variables.$border;
+  height: 84px;
+  padding: 22px 16px;
+
+  .fwe-bottom-navigation-button, // deprecated
+  .fwe-mobile-tab-bar-button {
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    .fwe-icon {
+      line-height: 0px;
+    }
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    outline: none;
+    color: variables.$hero-gray;
+    position: relative;
+    :after {
+      content: "";
+      position: absolute;
+      top: -23px;
+      left: 0px;
+      right: 0px;
+      height: 0px;
+      background: variables.$hero;
+      transition: height 0.3s ease;
+    }
+    &.fwe-selected {
+      color: variables.$hero;
+      cursor: default;
+      :after {
+        height: 4px;
+      }
+    }
+    &:active {
+      color: variables.$hero-active;
+    }
+  }
+}

package/dist/scss/_modal.scss

@@ -91,7 +91,8 @@
 
     &.fwe-modal--warning,
     &.fwe-modal--error {
-      button.fwe-btn.fwe-btn-link {
+      button.fwe-btn.fwe-btn-link, // override for deprecated class fwe-btn-link
+      button.fwe-btn.fwe-btn-tertiary {
         color: variables.$text;
       }
     }

package/dist/scss/_popover.scss

@@ -137,7 +137,7 @@
 @mixin popover-menu {
   font-size: variables.$font-size-base;
   line-height: 1.5rem;
-  padding: 16px;
+  padding: 18px 16px 10px 16px;
 
   button {
     all: unset;
@@ -176,12 +176,25 @@
     }
 
     &:hover {
-      background-color: #3333331a;
+      color: variables.$hero;
     }
 
     &:active {
       background-color: #33333333;
     }
+
+    &:disabled {
+      color: variables.$text-disabled;
+      cursor: default;
+
+      &:hover {
+        color: variables.$text-disabled;
+      }
+
+      &:active {
+        background-color: transparent;
+      }
+    }
   }
 }
 

package/dist/scss/_root.scss

@@ -1,7 +1,7 @@
 @use "variables";
 
 :root {
-  --fwe-black: #000000;
+  --fwe-black: #333333;
   --fwe-white: #ffffff;
   --fwe-white-hover: #ededed;
   --fwe-caerul: #0091dc;
@@ -15,7 +15,7 @@
 
   --fwe-text: #333333;
   --fwe-text-light: #82868b;
-  --fwe-text-disabled: #b9babb;
+  --fwe-text-disabled: #a9b0b7;
 
   --fwe-hero: #0091dc;
   --fwe-hero-hover: #0588cb;
@@ -36,12 +36,12 @@
   --fwe-orange-bg: #fbf0e1;
   --fwe-red-bg: #f7e1e1;
 
-  --fwe-control: #d3d8dd;
+  --fwe-control: #dbdfe3;
   --fwe-control-hover: #c5cbd1;
   --fwe-control-active: #a9b0b7; // 80% * --fwe-gray-300 + 20% * #333333
   --fwe-control-disabled: #e2e5e8; // 64% * --fwe-gray-300 + 36% * #FFFFFF
   --fwe-control-border: #b6bec6; // OK
-  --fwe-control-border-hover: #a9b0b7; // 90% * --fwe-gray-400 + 10% * #333333
+  --fwe-control-border-hover: #c5cbd1;
   --fwe-control-border-active: #9ca2a9; // 80% * --fwe-gray-400 + 20% * #333333
   --fwe-control-scrollbar: #d2d5d9; // 80% * --fwe-control-hover + 20% * #FFFFFF
 

package/dist/scss/_snackbar.scss

@@ -71,7 +71,7 @@
 
   &.fwe-snackbar-warning {
     border-color: variables.$orange;
-    background-color: variables.$orange-bg;
+    background-color: #ffeacc;
     span::before {
       background-color: variables.$orange;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIvPjwvZz48L3N2Zz4=");
@@ -83,7 +83,7 @@
 
   &.fwe-snackbar-error {
     border-color: variables.$red;
-    background-color: variables.$red-bg;
+    background-color: #f6cccc;
     span::before {
       background-color: variables.$red;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIvPjwvZz48L3N2Zz4=");
@@ -100,7 +100,8 @@
     background: variables.$hero;
   }
 
-  &.fwe-snackbar-b {
+  &.fwe-snackbar-b, // deprecated
+  &.fwe-snackbar-light {
     border: none;
     background-color: variables.$white;
 
@@ -113,7 +114,8 @@
     }
   }
 
-  &.fwe-snackbar-c {
+  &.fwe-snackbar-c, // deprecated
+  &.fwe-snackbar-strong {
     border: none;
     color: variables.$white;
     background-color: variables.$hero;

package/dist/scss/_tree.scss

@@ -207,7 +207,8 @@
   }
 }
 
-.fwe-btn.fwe-btn-link {
+.fwe-btn.fwe-btn-link, // override for deprecated class fwe-btn-link
+.fwe-btn.fwe-btn-tertiary {
   &.fwe-btn--tree-node-toggle {
     color: variables.$text;
     padding: 0 variables.$spacer-xxs 0 variables.$spacer-s;

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

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v11.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v11.1.0-dev.977 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -52,7 +52,7 @@
 @use "search-input";
 @use "stepper-horizontal";
 @use "stepper-vertical";
-@use "bottom-navigation";
+@use "mobile-tab-bar";
 @use "accordion";
 @use "tree";
 @use "sidebar-overlay";

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

@@ -51,7 +51,7 @@
 @use "../search-input";
 @use "../stepper-horizontal";
 @use "../stepper-vertical";
-@use "../bottom-navigation";
+@use "../mobile-tab-bar";
 @use "../accordion";
 @use "../tree";
 @use "../sidebar-overlay";

package/dist/scss/organisms/_header-slider.scss

@@ -35,7 +35,8 @@
       margin: 0;
     }
 
-    button.fwe-btn-hero {
+    button.fwe-btn-hero, // override for deprecated class fwe-btn-hero
+    button.fwe-btn-primary {
       margin-top: 24px;
       justify-content: center;
       margin-left: 18px;
@@ -97,7 +98,8 @@
         -webkit-line-clamp: 3;
       }
 
-      button.fwe-btn-hero {
+      button.fwe-btn-hero, // override for deprecated class fwe-btn-hero
+      button.fwe-btn-primary {
         justify-content: center;
         margin-top: 0;
         margin-left: 34px;

package/dist/scss/organisms/_image-gallery.scss

@@ -12,8 +12,10 @@
   overflow-x: hidden;
   overflow-y: hidden;
 
-  .fwe-btn-link i.fwe-icon-arrows-scale-up.fwe-modal-image-gallery-scale,
-  .fwe-btn-link i.fwe-icon-arrows-scale-down.fwe-modal-image-gallery-scale {
+  .fwe-btn-tertiary i.fwe-icon-arrows-scale-up.fwe-modal-image-gallery-scale,
+  .fwe-btn-link i.fwe-icon-arrows-scale-up.fwe-modal-image-gallery-scale, // override for deprecated class fwe-btn-link
+  .fwe-btn-link i.fwe-icon-arrows-scale-down.fwe-modal-image-gallery-scale, // override for deprecated class fwe-btn-link
+  .fwe-btn-tertiary i.fwe-icon-arrows-scale-down.fwe-modal-image-gallery-scale {
     font-size: 24px;
     margin-right: 0px;
     padding-right: 0px;

package/dist/scss/organisms/_side-menu.scss

@@ -33,6 +33,12 @@
         width: 4px;
       }
     }
+    &.fwe-disabled,
+    &[aria-disabled="true"] {
+      color: variables.$text-disabled;
+      cursor: unset;
+      pointer-events: none;
+    }
   }
 
   @media (max-width: 900px) {

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

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v11.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v11.1.0-dev.977 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */

package/llm-doc/components.md

@@ -55,12 +55,12 @@ Small status/label indicators.
 Mobile tab bar at the bottom of the screen.
 
 ```html
-<div class="fwe-bottom-navigation">
-  <button class="fwe-bottom-navigation-button fwe-selected">
+<div class="fwe-mobile-tab-bar">
+  <button class="fwe-mobile-tab-bar-button fwe-selected">
     <i class="fwe-icon fwe-icon-menu-home"></i>
     <span>Home</span>
   </button>
-  <button class="fwe-bottom-navigation-button">
+  <button class="fwe-mobile-tab-bar-button">
     <i class="fwe-icon fwe-icon-file-search"></i>
     <span>Search</span>
   </button>
@@ -132,16 +132,16 @@ Navigation breadcrumb trail.
 
 ```html
 <!-- Primary (Hero) -->
-<button class="fwe-btn fwe-btn-hero">Primary</button>
+<button class="fwe-btn fwe-btn-primary">Primary</button>
 
 <!-- Secondary (Standard) -->
 <button class="fwe-btn">Secondary</button>
 
 <!-- Link-Style -->
-<button class="fwe-btn fwe-btn-link">Link</button>
+<button class="fwe-btn fwe-btn-tertiary">Link</button>
 
 <!-- Dark Link -->
-<button class="fwe-btn fwe-btn-link fwe-dark">Dark Link</button>
+<button class="fwe-btn fwe-btn-tertiary fwe-dark">Dark Link</button>
 
 <!-- Icon-Button -->
 <button class="fwe-btn fwe-btn-icon">
@@ -159,7 +159,7 @@ Navigation breadcrumb trail.
 ### Block Button
 
 ```html
-<button class="fwe-btn fwe-btn-hero fwe-btn-block">Full width</button>
+<button class="fwe-btn fwe-btn-primary fwe-btn-block">Full width</button>
 ```
 
 ### Floating Action Button
@@ -341,7 +341,7 @@ Selectable tag/filter buttons.
     <div class="fwe-modal-footer">
       <div class="fwe-modal-buttons">
         <button class="fwe-btn">Cancel</button>
-        <button class="fwe-btn fwe-btn-hero">OK</button>
+        <button class="fwe-btn fwe-btn-primary">OK</button>
       </div>
     </div>
   </div>
@@ -416,7 +416,7 @@ Dropdown menus in the navbar (profile, notifications).
 
 ```html
 <div class="fwe-button-container">
-  <button class="fwe-btn fwe-btn-link fwe-dark">
+  <button class="fwe-btn fwe-btn-tertiary fwe-dark">
     <i class="fwe-icon fwe-icon-communication-notification fwe-icon-lg"></i>
   </button>
 </div>
@@ -630,10 +630,10 @@ Step states: `fwe-step-done`, `fwe-step-active`, *(empty = pending)*
 ```html
 <div class="fwe-toolbar">
   <div class="fwe-toolbar-actions">
-    <button class="fwe-btn fwe-btn-link fwe-active">
+    <button class="fwe-btn fwe-btn-tertiary fwe-active">
       <i class="fwe-icon fwe-icon-list-filter fwe-icon-lg"></i>
     </button>
-    <button class="fwe-btn fwe-btn-link fwe-dark">
+    <button class="fwe-btn fwe-btn-tertiary fwe-dark">
       <i class="fwe-icon fwe-icon-menu-more fwe-icon-lg"></i>
     </button>
   </div>

package/llm-doc/organisms.md

@@ -76,7 +76,7 @@ Minimal footer with bottom line only (without social media and columns).
         <div class="fwe-checkbox-checkmark"></div>
         <div class="fwe-checkbox-label-content">Remember me</div>
       </label>
-      <button class="fwe-btn fwe-btn-hero fwe-btn-block">Login</button>
+      <button class="fwe-btn fwe-btn-primary fwe-btn-block">Login</button>
       <div class="fwe-login-link-container">
         <a class="fwe-text-link" href="#">Forgot password?</a>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/web-essentials",
-  "version": "11.0.1",
+  "version": "11.1.0-dev.977",
   "description": "CSS framework and utils to build FESTO web applications",
   "keywords": [
     "css",

package/scss/_accordion.scss

@@ -46,12 +46,12 @@
 
     &::after {
       position: absolute;
-      top: 21px;
+      top: 23px;
       right: 16px;
       pointer-events: none;
       content: "";
-      height: 32px;
-      width: 32px;
+      height: 24px;
+      width: 24px;
       background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xNiAyMi04LjcwNy04LjcwNyAxLjQxNC0xLjQxNEwxNiAxOS4xNzJsNy4yOTMtNy4yOTMgMS40MTQgMS40MTRMMTYgMjJ6IiAvPjwvc3ZnPg==");
       transition: transform 0.2s ease;
     }

package/scss/_badge.scss

@@ -2,43 +2,36 @@
 
 .fwe-badge {
   display: inline-block;
-  border-radius: 2px;
-  font-size: variables.$font-size-md;
-  padding-left: 6px;
-  padding-right: 6px;
   color: variables.$white;
-  max-height: 19px;
-  height: 19px;
-  line-height: 17px;
   background-color: variables.$hero;
+  border-radius: 2px;
+  max-height: 18px;
+  height: 18px;
+  line-height: 18px;
+  padding: 0 4px;
   font-weight: variables.$font-weight-bold;
+  font-size: variables.$font-size-md;
 
   &.fwe-badge-sm {
     font-size: variables.$font-size-small;
-    max-height: 17px;
-    height: 17px;
-    line-height: 16px;
+    max-height: 18px;
+    height: 18px;
+    line-height: 18px;
   }
 
-  &.fwe-badge-md {
+  &.fwe-badge-md, // deprecated
+  &.fwe-badge-lg {
     font-size: variables.$font-size-base;
     max-height: 22px;
     height: 22px;
-    line-height: 20px;
-  }
-
-  &.fwe-badge-lg {
-    font-size: variables.$font-size-xl;
-    max-height: 32px;
-    height: 32px;
-    line-height: 30px;
+    line-height: 22px;
   }
 
   &.fwe-badge-xl {
-    font-size: variables.$font-size-xxl;
-    max-height: 44px;
-    height: 44px;
-    line-height: 42px;
+    font-size: variables.$font-size-xl;
+    max-height: 34px;
+    height: 34px;
+    line-height: 34px;
   }
 }
 

package/scss/_button.scss

@@ -44,7 +44,8 @@ button.fwe-btn {
     color: variables.$text-disabled;
   }
 
-  &.fwe-btn-hero {
+  &.fwe-btn-hero, // deprecated
+  &.fwe-btn-primary {
     color: variables.$white;
     background: variables.$hero;
 
@@ -68,7 +69,8 @@ button.fwe-btn {
     width: 100%;
   }
 
-  &.fwe-btn-link {
+  &.fwe-btn-link, // deprecated
+  &.fwe-btn-tertiary {
     background: none;
     color: variables.$hero;
     padding: 0;

package/scss/_list.scss

@@ -100,7 +100,7 @@ ul.fwe-list-group {
     color: variables.$text;
 
     &:not(.fwe-disabled):hover {
-      background-color: variables.$sucanul;
+      background-color: variables.$background;
       .fwe-list-group-item-body,
       .fwe-list-group-item-footer {
         color: variables.$text;
@@ -118,7 +118,7 @@ ul.fwe-list-group {
 
     &:not(.fwe-disabled):hover {
       color: variables.$hero;
-      background-color: variables.$sucanul;
+      background-color: variables.$background;
     }
   }
 
@@ -191,9 +191,15 @@ ul.fwe-list-group {
     button.fwe-list-group-item {
       width: auto;
 
+      &:not(.fwe-disabled):hover {
+        background-color: variables.$background;
+      }
+    }
+
+    button.fwe-list-group-item {
       &:not(.fwe-disabled):hover {
         color: variables.$hero;
-        background-color: unset;
+        background-color: variables.$background;
       }
     }
   }

package/scss/{_bottom-navigation.scss → _mobile-tab-bar.scss}

@@ -1,47 +1,50 @@
-@use "variables";
-
-.fwe-bottom-navigation {
-  width: 100%;
-  display: flex;
-  background: variables.$white;
-  align-items: flex-start;
-  justify-content: space-around;
-  border-top: 1px solid variables.$border;
-  height: 84px;
-  padding: 22px 16px;
-  .fwe-bottom-navigation-button {
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    .fwe-icon {
-      line-height: 0px;
-    }
-    display: flex;
-    align-items: center;
-    background: none;
-    border: none;
-    outline: none;
-    color: variables.$hero-gray;
-    position: relative;
-    :after {
-      content: "";
-      position: absolute;
-      top: -23px;
-      left: 0px;
-      right: 0px;
-      height: 0px;
-      background: variables.$hero;
-      transition: height 0.3s ease;
-    }
-    &.fwe-selected {
-      color: variables.$hero;
-      cursor: default;
-      :after {
-        height: 4px;
-      }
-    }
-    &:active {
-      color: variables.$hero-active;
-    }
-  }
-}
+@use "variables";
+
+.fwe-bottom-navigation, // deprecated
+.fwe-mobile-tab-bar {
+  width: 100%;
+  display: flex;
+  background: variables.$white;
+  align-items: flex-start;
+  justify-content: space-around;
+  border-top: 1px solid variables.$border;
+  height: 84px;
+  padding: 22px 16px;
+
+  .fwe-bottom-navigation-button, // deprecated
+  .fwe-mobile-tab-bar-button {
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    .fwe-icon {
+      line-height: 0px;
+    }
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    outline: none;
+    color: variables.$hero-gray;
+    position: relative;
+    :after {
+      content: "";
+      position: absolute;
+      top: -23px;
+      left: 0px;
+      right: 0px;
+      height: 0px;
+      background: variables.$hero;
+      transition: height 0.3s ease;
+    }
+    &.fwe-selected {
+      color: variables.$hero;
+      cursor: default;
+      :after {
+        height: 4px;
+      }
+    }
+    &:active {
+      color: variables.$hero-active;
+    }
+  }
+}

package/scss/_modal.scss

@@ -91,7 +91,8 @@
 
     &.fwe-modal--warning,
     &.fwe-modal--error {
-      button.fwe-btn.fwe-btn-link {
+      button.fwe-btn.fwe-btn-link, // override for deprecated class fwe-btn-link
+      button.fwe-btn.fwe-btn-tertiary {
         color: variables.$text;
       }
     }