@festo-ui/web-essentials 9.0.1 → 10.0.0-dev.827

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

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v10.0.0-dev.827 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -927,7 +927,7 @@ template {
 }
 
 /*!
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v10.0.0-dev.827 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -11866,21 +11866,21 @@ table.fwe-table tr th.fwe-table-order {
 table.fwe-table tr th.fwe-table-order::before {
   content: "";
   display: inline-block;
-  width: 9px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   background-size: cover;
   position: relative;
   top: 2px;
-  left: 12px;
+  left: 8px;
 }
 table.fwe-table tr th.fwe-table-order::before {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzEuNjQ2IC0xMzguOTM5KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4IDE0MikiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDQgMTQ5LjY0Nikgcm90YXRlKDE4MCkiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48L2c+PC9zdmc+");
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOCAxMC43MDdMMy42NDYgNi4zNTRMNC4zNTQgNS42NDZMOCA5LjI5M0wxMS42NDYgNS42NDZMMTIuMzU0IDYuMzU0TDggMTAuNzA3WiIgZmlsbD0iIzMzMzMzMyIvPjwvc3ZnPg==");
 }
 table.fwe-table tr th.fwe-table-order.fwe-table-order-ascending::before {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0MC4zNTQgMTUyLjcwNykgcm90YXRlKDE4MCkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyOCAxNDIpIj48cGF0aCBkPSJNOCwxMC43MDcsMy42NDYsNi4zNTRsLjcwOC0uNzA4TDgsOS4yOTNsMy42NDYtMy42NDcuNzA4LjcwOFoiIGZpbGw9IiMwMDkxZGMiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQ0IDE0OS42NDYpIHJvdGF0ZSgxODApIj48cGF0aCBkPSJNOCwxMC43MDcsMy42NDYsNi4zNTRsLjcwOC0uNzA4TDgsOS4yOTNsMy42NDYtMy42NDcuNzA4LjcwOFoiIGZpbGw9IiNhM2IyYmMiLz48L2c+PC9nPjwvc3ZnPg==");
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTEuNjQ2IDkuMzUzOTdMOCA1LjcwNjk3TDQuMzU0IDkuMzUzOTdMMy42NDYgOC42NDU5N0w4IDQuMjkyOTdMMTIuMzU0IDguNjQ1OTdMMTEuNjQ2IDkuMzUzOTdaIiBmaWxsPSIjMDA5MWRjIi8+PC9zdmc+");
 }
 table.fwe-table tr th.fwe-table-order.fwe-table-order-descending::before {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzEuNjQ2IC0xMzguOTM5KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4IDE0MikiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iIzAwOTFkYyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDQgMTQ5LjY0Nikgcm90YXRlKDE4MCkiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48L2c+PC9zdmc+");
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOCAxMC43MDdMMy42NDYgNi4zNTRMNC4zNTQgNS42NDZMOCA5LjI5M0wxMS42NDYgNS42NDZMMTIuMzU0IDYuMzU0TDggMTAuNzA3WiIgZmlsbD0iIzAwOTFkYyIvPjwvc3ZnPg==");
 }
 table.fwe-table tr th.fwe-active {
   color: var(--fwe-hero);
@@ -12388,7 +12388,7 @@ header.fwe-fixed-header {
 }
 
 /*!
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v10.0.0-dev.827 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -12532,42 +12532,60 @@ header.fwe-fixed-header {
 }
 
 .fwe-breadcrumb {
+  overflow: hidden;
+}
+.fwe-breadcrumb ol {
+  overflow: hidden;
   display: flex;
-  flex-wrap: wrap;
-  justify-items: center;
+  flex-wrap: nowrap;
+  white-space: nowrap;
   align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
-.fwe-breadcrumb .fwe-breadcrumb-item,
-.fwe-breadcrumb a {
+.fwe-breadcrumb li {
   display: flex;
+  overflow: hidden;
+  flex-shrink: 0;
   align-items: center;
   min-height: 24px;
   color: var(--fwe-text);
+  font-size: var(--fwe-font-size-md);
+  line-height: calc(var(--fwe-font-size-md) + 2px);
+}
+.fwe-breadcrumb li:last-child {
+  flex-shrink: 1;
+  min-width: 36px;
+}
+.fwe-breadcrumb li:last-child a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fwe-breadcrumb a {
+  display: block;
+  align-items: center;
+  color: var(--fwe-text);
   text-decoration: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
-  font-size: var(--fwe-font-size-md);
-  line-height: calc(var(--fwe-font-size-md) + 2px);
 }
-.fwe-breadcrumb .fwe-breadcrumb-item:focus,
 .fwe-breadcrumb a:focus {
   outline: none;
 }
-.fwe-breadcrumb .fwe-breadcrumb-item:not(:last-child),
-.fwe-breadcrumb a:not(:last-child) {
-  cursor: pointer;
-}
-.fwe-breadcrumb .fwe-breadcrumb-item:not(:last-child):hover,
-.fwe-breadcrumb a:not(:last-child):hover {
+.fwe-breadcrumb a:hover {
   color: var(--fwe-hero);
 }
-.fwe-breadcrumb .fwe-breadcrumb-item:not(:last-child):active,
-.fwe-breadcrumb a:not(:last-child):active {
+.fwe-breadcrumb a:active {
   color: var(--fwe-hero-active);
 }
-.fwe-breadcrumb .fwe-breadcrumb-item:not(:last-child)::after,
-.fwe-breadcrumb a:not(:last-child)::after {
+.fwe-breadcrumb a[aria-current=page] {
+  font-weight: bold;
+  cursor: default;
+  pointer-events: none;
+}
+.fwe-breadcrumb li:not(:last-child)::after {
   content: "";
   margin-left: 4px;
   margin-right: 4px;
@@ -12575,11 +12593,19 @@ header.fwe-fixed-header {
   width: 16px;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAxNlYwaDE2djE2eiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xMC43MDcgOC00LjM1MyA0LjM1NC0uNzA4LS43MDhMOS4yOTMgOCA1LjY0NiA0LjM1NGwuNzA4LS43MDhMMTAuNzA3IDh6Ii8+PC9zdmc+");
 }
-.fwe-breadcrumb .fwe-breadcrumb-item:last-child,
-.fwe-breadcrumb a:last-child {
-  font-weight: bold;
-  cursor: default;
-  pointer-events: none;
+.fwe-breadcrumb--mobile li {
+  display: none;
+}
+.fwe-breadcrumb--mobile li:nth-last-child(-n+2) {
+  display: flex;
+}
+.fwe-breadcrumb--mobile li:nth-last-child(2)::before {
+  content: "";
+  margin-left: 0px;
+  margin-right: 4px;
+  height: 16px;
+  width: 16px;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAxNlYwaDE2djE2eiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xMC43MDcgOC00LjM1MyA0LjM1NC0uNzA4LS43MDhMOS4yOTMgOCA1LjY0NiA0LjM1NGwuNzA4LS43MDhMMTAuNzA3IDh6Ii8+PC9zdmc+");
 }
 
 a {
@@ -12905,6 +12931,57 @@ label.fwe-input-text textarea ~ .fwe-input-text-invalid {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+label.fwe-input-text:has(input:user-invalid:not(:disabled)) .fwe-input-text-info, label.fwe-input-text:has(input:user-invalid:not(:disabled)) .fwe-input-text-invalid, label.fwe-input-text.fwe-input-text--invalid .fwe-input-text-info, label.fwe-input-text.fwe-input-text--invalid .fwe-input-text-invalid {
+  display: none;
+}
+label.fwe-input-text:has(input:user-invalid:not(:disabled)) .fwe-input-text-invalid, label.fwe-input-text.fwe-input-text--invalid .fwe-input-text-invalid {
+  display: block;
+}
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-valid:not(:disabled)):not(.fwe-input-text-icon) input[type=text],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-valid:not(:disabled)):not(.fwe-input-text-icon) input[type=email],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-valid:not(:disabled)):not(.fwe-input-text-icon) input[type=password],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-valid:not(:disabled)):not(.fwe-input-text-icon) input[type=number],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-valid:not(:disabled)):not(.fwe-input-text-icon) input[type=date],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-valid:not(:disabled)):not(.fwe-input-text-icon) input[type=time],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-valid:not(:disabled)):not(.fwe-input-text-icon) input[type=datetime-local], label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-invalid:not(:disabled)):not(.fwe-input-text-icon) input[type=text],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-invalid:not(:disabled)):not(.fwe-input-text-icon) input[type=email],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-invalid:not(:disabled)):not(.fwe-input-text-icon) input[type=password],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-invalid:not(:disabled)):not(.fwe-input-text-icon) input[type=number],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-invalid:not(:disabled)):not(.fwe-input-text-icon) input[type=date],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-invalid:not(:disabled)):not(.fwe-input-text-icon) input[type=time],
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-invalid:not(:disabled)):not(.fwe-input-text-icon) input[type=datetime-local], label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--valid:not(.fwe-input-text-icon) input[type=text],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--valid:not(.fwe-input-text-icon) input[type=email],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--valid:not(.fwe-input-text-icon) input[type=password],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--valid:not(.fwe-input-text-icon) input[type=number],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--valid:not(.fwe-input-text-icon) input[type=date],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--valid:not(.fwe-input-text-icon) input[type=time],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--valid:not(.fwe-input-text-icon) input[type=datetime-local], label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--invalid:not(.fwe-input-text-icon) input[type=text],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--invalid:not(.fwe-input-text-icon) input[type=email],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--invalid:not(.fwe-input-text-icon) input[type=password],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--invalid:not(.fwe-input-text-icon) input[type=number],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--invalid:not(.fwe-input-text-icon) input[type=date],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--invalid:not(.fwe-input-text-icon) input[type=time],
+label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--invalid:not(.fwe-input-text-icon) input[type=datetime-local] {
+  padding-right: 24px;
+}
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-valid:not(:disabled)):not(.fwe-input-text-icon)::after, label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-invalid:not(:disabled)):not(.fwe-input-text-icon)::after, label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--valid:not(.fwe-input-text-icon)::after, label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--invalid:not(.fwe-input-text-icon)::after {
+  content: "";
+  position: absolute;
+  bottom: 27px;
+  right: 0px;
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-valid:not(:disabled)):not(.fwe-input-text-icon)::after, label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--valid:not(.fwe-input-text-icon)::after {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'><path d='M4.207 9.621L0 5.414L1.414 4L4.207 6.793L11 0L12.414 1.414L4.207 9.621Z' fill='%230091DC'/></svg>");
+  background-size: 13px 13px;
+}
+label.fwe-input-text.fwe-input-text--with-validation-icons:has(input:user-invalid:not(:disabled)):not(.fwe-input-text-icon)::after, label.fwe-input-text.fwe-input-text--with-validation-icons.fwe-input-text--invalid:not(.fwe-input-text-icon)::after {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M16.95 8.46405L15.536 7.05005L12 10.586L8.46405 7.05005L7.05005 8.46405L10.586 12L7.05005 15.536L8.46405 16.95L12 13.414L15.536 16.95L16.95 15.536L13.414 12L16.95 8.46405Z' fill='%23D50000'/></svg>");
+  background-size: 24px 24px;
+}
 label.fwe-input-text.fwe-input-text-icon .fwe-svg-icon,
 label.fwe-input-text.fwe-input-text-icon i {
   line-height: 1;
@@ -13568,7 +13645,7 @@ a.fwe-btn.fwe-disabled {
 }
 
 /*!
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v10.0.0-dev.827 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -13897,7 +13974,12 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
   content: "";
   height: 24px;
   width: 24px;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
+  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==") center/24px 24px no-repeat;
+  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==") center/24px 24px no-repeat;
+  background-color: var(--fwe-text);
+}
+.fwe-select-wrapper:has(.fwe-select:disabled)::before {
+  background-color: var(--fwe-text-disabled);
 }
 .fwe-select-wrapper .fwe-select-label {
   height: 18px;
@@ -13908,11 +13990,15 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
   font-weight: var(--fwe-font-weight-bold);
 }
 .fwe-select-wrapper .fwe-select {
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   cursor: pointer;
   order: 2;
   height: 33px;
-  padding-bottom: 4px;
-  padding-top: 4px;
+  padding-inline: unset;
+  padding: 4px 24px 4px 0px;
   width: 100%;
   font-size: var(--fwe-font-size-base);
   -webkit-appearance: none;
@@ -13924,14 +14010,14 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
   border: none;
   border-bottom: 1px solid var(--fwe-control-border);
 }
-.fwe-select-wrapper .fwe-select:hover:not(:disabled) {
+.fwe-select-wrapper .fwe-select:hover:not(:disabled), .fwe-select-wrapper .fwe-select:focus:not(:disabled) {
   color: var(--fwe-hero);
   border-color: var(--fwe-hero);
 }
-.fwe-select-wrapper .fwe-select:hover:not(:disabled) option {
+.fwe-select-wrapper .fwe-select:hover:not(:disabled) option, .fwe-select-wrapper .fwe-select:focus:not(:disabled) option {
   color: var(--fwe-text);
 }
-.fwe-select-wrapper .fwe-select:hover:user-invalid {
+.fwe-select-wrapper .fwe-select:hover.fwe-invalid, .fwe-select-wrapper .fwe-select:hover:user-invalid, .fwe-select-wrapper .fwe-select:focus.fwe-invalid, .fwe-select-wrapper .fwe-select:focus:user-invalid {
   border-color: var(--fwe-red);
 }
 .fwe-select-wrapper .fwe-select:disabled {
@@ -13944,14 +14030,14 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
 .fwe-select-wrapper .fwe-select::-ms-expand {
   display: none;
 }
-.fwe-select-wrapper .fwe-select:user-invalid {
+.fwe-select-wrapper .fwe-select.fwe-invalid, .fwe-select-wrapper .fwe-select:user-invalid {
   box-shadow: none;
   border-color: var(--fwe-red);
 }
-.fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-invalid {
+.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-invalid, .fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-invalid {
   display: block;
 }
-.fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-description {
+.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-description, .fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-description {
   display: none;
 }
 .fwe-select-wrapper .fwe-select-invalid {
@@ -13959,6 +14045,54 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
   color: var(--fwe-red);
 }
 
+.fwe-options-container {
+  max-width: 100%;
+  background-color: var(--fwe-white);
+  padding: 16px 0px;
+  margin: 0;
+  box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
+  list-style: none;
+}
+.fwe-options-container:focus {
+  outline: none;
+}
+.fwe-options-container--multi-select {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px 12px;
+}
+
+.fwe-combobox-option {
+  padding: 8px 16px;
+  cursor: pointer;
+  position: relative;
+}
+.fwe-combobox-option:hover, .fwe-combobox-option:focus, .fwe-combobox-option.fwe-focus {
+  background-color: var(--fwe-background);
+  color: var(--fwe-hero);
+}
+.fwe-combobox-option.fwe-selected {
+  color: var(--fwe-hero);
+}
+.fwe-combobox-option.fwe-selected::before {
+  content: "";
+  width: 4px;
+  height: 100%;
+  background-color: var(--fwe-hero);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.fwe-combobox-option.fwe-disabled {
+  color: var(--fwe-text-disabled);
+  cursor: default;
+}
+.fwe-combobox-option.fwe-disabled:hover {
+  background-color: transparent;
+  color: var(--fwe-text-disabled);
+}
+
 .fwe-badge {
   display: inline-block;
   border-radius: 2px;
@@ -14001,6 +14135,10 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
   background-color: var(--fwe-caerul) !important;
 }
 
+.fwe-badge-dark {
+  background-color: var(--fwe-text) !important;
+}
+
 .fwe-badge-green {
   background-color: var(--fwe-green) !important;
 }
@@ -14419,7 +14557,7 @@ fieldset.fwe-progress-container label {
 }
 
 /*!
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v10.0.0-dev.827 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -14650,7 +14788,7 @@ fieldset.fwe-progress-container label {
   }
 }
 /*!
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v10.0.0-dev.827 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -14902,7 +15040,7 @@ fieldset.fwe-progress-container label {
   padding: 16px;
 }
 
-.fwe-popover-menu-trigger .fwe-popover-menu-trigger-button {
+.fwe-popover-menu-trigger {
   background: none;
   border: none;
   padding: 0;
@@ -14911,7 +15049,7 @@ fieldset.fwe-progress-container label {
   display: block;
   cursor: pointer;
 }
-.fwe-popover-menu-trigger .fwe-popover-menu-trigger-button:hover {
+.fwe-popover-menu-trigger:hover {
   color: var(--fwe-hero);
 }
 
@@ -15386,7 +15524,7 @@ fieldset.fwe-progress-container label {
 }
 
 /*!
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v10.0.0-dev.827 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -15519,6 +15657,7 @@ input[type=search]::-webkit-search-cancel-button {
 
 .fwe-search-suggestions {
   position: absolute;
+  z-index: var(--fwe-z-index-dropdown);
   top: 38px;
   left: 0px;
   right: 0px;
@@ -15884,7 +16023,7 @@ input[type=search]::-webkit-search-cancel-button {
   }
 }
 /*!
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v10.0.0-dev.827 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -16168,7 +16307,7 @@ input[type=search]::-webkit-search-cancel-button {
 }
 
 /*!
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v10.0.0-dev.827 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */