@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

package/dist/collection/components/stzh-dropdown/stzh-dropdown.css

@@ -3,7 +3,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -28,6 +28,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -170,24 +173,29 @@ stzh-dropdown {
   --line-height: var(--stzh-font-milli-text-line-height);
   --letter-spacing: normal;
   --height: var(--stzh-form-input-height);
+  --border-radius: var(--stzh-form-input-border-radius);
   --icon-size: var(--stzh-icon-size-medium);
   --icon-angle-size: var(--stzh-icon-size-medium);
+  --popover-distance: var(--stzh-space-xsmall);
   --padding-top: var(--stzh-space-xsmall);
   --padding-bottom: var(--stzh-space-xsmall);
   --padding-left: var(--stzh-space-medium);
   --padding-right: var(--stzh-space-medium);
   --icon-gap: var(--stzh-space-xsmall);
   --icon-angle-gap: var(--stzh-space-xsmall);
+  --remove-gap: var(--stzh-space-xxsmall);
   --multiple-padding-top: calc(var(--stzh-space-xsmall) - 0.0625rem);
   --multiple-padding-bottom: calc(var(--stzh-space-xsmall) - 0.0625rem);
   --color: var(--stzh-color-secondary60);
   --border-color: var(--stzh-color-grey70);
-  --border-radius: var(--stzh-form-input-border-radius);
   --background-color: var(--stzh-color-white);
   --label-color: var(--stzh-color-primary);
   --placeholder-color: var(--stzh-color-grey70);
   --icon-color: var(--stzh-color-primary70);
   --icon-angle-color: var(--stzh-color-primary70);
+  --label-font-size: var(--stzh-font-micro-font-size);
+  --label-line-height: var(--stzh-font-micro-font-size);
+  --label-letter-spacing: normal;
   --hover-color: var(--stzh-color-secondary60);
   --hover-border-color: var(--stzh-color-secondary50);
   --hover-background-color: var(--stzh-color-white);
@@ -210,7 +218,6 @@ stzh-dropdown {
   --popover-background-color: var(--stzh-popover-background-color);
   --popover-box-shadow: var(--stzh-box-shadow-popover);
   --popover-border-radius: var(--stzh-popover-border-radius);
-  --popover-distance: var(--stzh-space-xsmall);
   --popover-skidding: 0px;
   position: relative;
   width: 100%;
@@ -250,6 +257,32 @@ stzh-dropdown .stzh-fylingfocus-focused {
 stzh-dropdown .stzh-fylingfocus-focused::-moz-focus-inner {
   border: 0 !important;
 }
+stzh-dropdown:where([variant="plain"]) {
+  --padding-left: 0px;
+  --padding-right: 0px;
+}
+stzh-dropdown:where([variant="filter"]) {
+  --font-size: var(--stzh-font-micro-font-size);
+  --line-height: var(--stzh-font-micro-text-line-height);
+  --letter-spacing: normal;
+  --border-radius: 1rem;
+  --height: 2rem;
+  --outer-height: 2.5rem;
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+  --padding-left: var(--stzh-space-small);
+  --padding-right: var(--stzh-space-xsmall);
+  --icon-size: var(--stzh-icon-size-xsmall);
+  --icon-angle-size: var(--stzh-icon-size-xsmall);
+  --remove-gap: var(--stzh-space-small);
+  --popover-distance: calc(var(--stzh-space-xsmall) - (var(--outer-height) - var(--height)) / 2);
+}
+@media screen and (min-width: 900px) {
+  stzh-dropdown:where([variant="filter"]) {
+    --outer-height: auto;
+    --popover-distance: var(--stzh-space-xsmall);
+  }
+}
 stzh-dropdown:where([inline]:not([inline="false"])) {
   --popover-width: auto;
   width: auto;
@@ -279,6 +312,29 @@ stzh-dropdown:where([variant="plain"][is-filled]:not([is-filled="false"])) {
   --hover-icon-color: var(--stzh-color-secondary60);
   --hover-icon-angle-color: var(--stzh-color-secondary60);
 }
+stzh-dropdown:where([variant="filter"]) {
+  --color: var(--stzh-chip-color, var(--stzh-color-primary70));
+  --background-color: var(--stzh-chip-background-color, var(--stzh-color-secondary30));
+  --label-color: var(--color);
+  --icon-color: var(--color);
+  --icon-angle-color: var(--color);
+  --hover-color: var(--stzh-chip-hover-color, var(--stzh-color-primary70));
+  --hover-background-color: var(--stzh-chip-hover-background-color, var(--stzh-color-secondary40));
+  --hover-label-color: var(--hover-color);
+  --hover-icon-color: var(--hover-color);
+  --hover-icon-angle-color: var(--hover-color);
+  --focus-color: var(--hover-color);
+  --focus-background-color: var(--hover-background-color);
+  --focus-label-color: var(--hover-label-color);
+  --focus-icon-color: var(--hover-icon-color);
+  --focus-icon-angle-color: var(--hover-icon-angle-color);
+}
+stzh-dropdown:where([variant="filter"][is-filled]:not([is-filled="false"])) {
+  --color: var(--stzh-chip-active-color, var(--stzh-color-white));
+  --background-color: var(--stzh-chip-active-background-color, var(--stzh-color-primary70));
+  --hover-color: var(--stzh-chip-active-hover-color, var(--stzh-color-white));
+  --hover-background-color: var(--stzh-chip-active-hover-background-color, var(--stzh-color-primary90));
+}
 stzh-dropdown[is-invalid] {
   --color: var(--stzh-color-error60);
   --border-color: var(--stzh-color-error60);
@@ -309,22 +365,31 @@ stzh-dropdown[disabled]:not([disabled=false]) {
   --description-color: var(--stzh-color-grey70);
   --icon-color: var(--stzh-color-grey70);
   --icon-angle-color: var(--stzh-color-grey70);
-  --hover-color: var(--stzh-color-grey70);
-  --hover-border-color: var(--stzh-color-grey70);
-  --hover-background-color: var(--stzh-color-grey10);
-  --hover-label-color: var(--stzh-color-grey70);
-  --hover-icon-color: var(--stzh-color-grey70);
-  --hover-icon-angle-color: var(--stzh-color-grey70);
-  --focus-color: var(--stzh-color-grey70);
-  --focus-border-color: var(--stzh-color-grey70);
-  --focus-background-color: var(--stzh-color-grey10);
-  --focus-label-color: var(--stzh-color-grey70);
-  --focus-icon-color: var(--stzh-color-grey70);
-  --focus-icon-angle-color: var(--stzh-color-grey70);
+  --hover-color: var(--color);
+  --hover-border-color: var(--border-color);
+  --hover-background-color: var(--background-color);
+  --hover-label-color: var(--label-color);
+  --hover-icon-color: var(--icon-color);
+  --hover-icon-angle-color: var(--icon-angle-color);
+  --focus-color: var(--color);
+  --focus-border-color: var(--border-color);
+  --focus-background-color: var(--background-color);
+  --focus-label-color: var(--label-color);
+  --focus-icon-color: var(--icon-color);
+  --focus-icon-angle-color: var(--icon-angle-color);
 }
 stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   --background-color: transparent;
 }
+stzh-dropdown[disabled]:not([disabled=false])[variant=filter] {
+  --color: var(--stzh-chip-disabled-color, var(--stzh-color-grey80));
+  --background-color: var(--stzh-chip-disabled-background-color, var(--stzh-color-grey20));
+  --label-color: var(--color);
+  --placeholder-color: var(--color);
+  --icon-color: var(--color);
+  --icon-angle-color: var(--color);
+  --description-color: var(--stzh-color-grey70);
+}
 stzh-dropdown:is(:has(.stzh-dropdown__label:hover)), stzh-dropdown:is(:has(.ts-control:hover)) {
   --color: var(--hover-color);
   --border-color: var(--hover-border-color);
@@ -342,6 +407,16 @@ stzh-dropdown:is(:has(.ts-control:focus-within)) {
   --icon-angle-color: var(--focus-icon-angle-color);
 }
 
+stzh-dropdown:where([size="large"]):where([variant="filter"]) {
+  --height: 2.5rem;
+  --border-radius: 1.25rem;
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+  --padding-left: var(--stzh-space-medium);
+  --padding-right: var(--stzh-space-small);
+  --remove-gap: var(--stzh-space-medium);
+}
+
 stzh-dropdown:where([size="small"]) {
   --font-size: var(--stzh-font-milli-font-size);
   --line-height: var(--stzh-font-milli-text-line-height);
@@ -355,9 +430,21 @@ stzh-dropdown:where([size="small"]) {
   --padding-right: var(--stzh-space-medium);
   --icon-gap: var(--stzh-space-xsmall);
   --icon-angle-gap: var(--stzh-space-xsmall);
+  --remove-gap: var(--stzh-space-xxsmall);
   --multiple-padding-top: var(--stzh-space-xxsmall);
   --multiple-padding-bottom: var(--stzh-space-xxsmall);
 }
+stzh-dropdown:where([size="small"]):where([variant="plain"]) {
+  --padding-left: 0px;
+  --padding-right: 0px;
+}
+stzh-dropdown:where([size="small"]):where([variant="filter"]) {
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+  --padding-left: var(--stzh-space-xsmall);
+  --padding-right: var(--stzh-space-xsmall);
+  --remove-gap: var(--stzh-space-xsmall);
+}
 
 stzh-dropdown:where([size="tiny"]) {
   --font-size: var(--stzh-font-milli-font-size);
@@ -372,9 +459,18 @@ stzh-dropdown:where([size="tiny"]) {
   --padding-right: var(--stzh-space-medium);
   --icon-gap: var(--stzh-space-xsmall);
   --icon-angle-gap: var(--stzh-space-xsmall);
+  --remove-gap: var(--stzh-space-xxsmall);
   --multiple-padding-top: var(--stzh-space-xxsmall);
   --multiple-padding-bottom: var(--stzh-space-xxsmall);
 }
+stzh-dropdown:where([size="tiny"]):where([variant="plain"]) {
+  --padding-left: 0px;
+  --padding-right: 0px;
+}
+stzh-dropdown:where([size="tiny"]):where([variant="filter"]) {
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+}
 
 @media screen and (min-width: 600px) {
   stzh-dropdown:where([size-small="default"]) {
@@ -382,18 +478,59 @@ stzh-dropdown:where([size="tiny"]) {
     --line-height: var(--stzh-font-milli-text-line-height);
     --letter-spacing: normal;
     --height: var(--stzh-form-input-height);
+    --border-radius: var(--stzh-form-input-border-radius);
     --icon-size: var(--stzh-icon-size-medium);
     --icon-angle-size: var(--stzh-icon-size-medium);
+    --popover-distance: var(--stzh-space-xsmall);
     --padding-top: var(--stzh-space-xsmall);
     --padding-bottom: var(--stzh-space-xsmall);
     --padding-left: var(--stzh-space-medium);
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: calc(var(--stzh-space-xsmall) - 0.0625rem);
     --multiple-padding-bottom: calc(var(--stzh-space-xsmall) - 0.0625rem);
   }
-
+  stzh-dropdown:where([size-small="default"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-small="default"]):where([variant="filter"]) {
+    --font-size: var(--stzh-font-micro-font-size);
+    --line-height: var(--stzh-font-micro-text-line-height);
+    --letter-spacing: normal;
+    --border-radius: 1rem;
+    --height: 2rem;
+    --outer-height: 2.5rem;
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-small);
+    --padding-right: var(--stzh-space-xsmall);
+    --icon-size: var(--stzh-icon-size-xsmall);
+    --icon-angle-size: var(--stzh-icon-size-xsmall);
+    --remove-gap: var(--stzh-space-small);
+    --popover-distance: calc(var(--stzh-space-xsmall) - (var(--outer-height) - var(--height)) / 2);
+  }
+}
+@media screen and (min-width: 600px) and (min-width: 900px) {
+  stzh-dropdown:where([size-small="default"]):where([variant="filter"]) {
+    --outer-height: auto;
+    --popover-distance: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 600px) {
+  stzh-dropdown:where([size-small="large"]):where([variant="filter"]) {
+    --height: 2.5rem;
+    --border-radius: 1.25rem;
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-medium);
+    --padding-right: var(--stzh-space-small);
+    --remove-gap: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 600px) {
   stzh-dropdown:where([size-small="small"]) {
     --font-size: var(--stzh-font-milli-font-size);
     --line-height: var(--stzh-font-milli-text-line-height);
@@ -407,10 +544,23 @@ stzh-dropdown:where([size="tiny"]) {
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: var(--stzh-space-xxsmall);
     --multiple-padding-bottom: var(--stzh-space-xxsmall);
   }
-
+  stzh-dropdown:where([size-small="small"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-small="small"]):where([variant="filter"]) {
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-xsmall);
+    --padding-right: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 600px) {
   stzh-dropdown:where([size-small="tiny"]) {
     --font-size: var(--stzh-font-milli-font-size);
     --line-height: var(--stzh-font-milli-text-line-height);
@@ -424,9 +574,18 @@ stzh-dropdown:where([size="tiny"]) {
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: var(--stzh-space-xxsmall);
     --multiple-padding-bottom: var(--stzh-space-xxsmall);
   }
+  stzh-dropdown:where([size-small="tiny"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-small="tiny"]):where([variant="filter"]) {
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+  }
 }
 @media screen and (min-width: 900px) {
   stzh-dropdown:where([size-medium="default"]) {
@@ -434,18 +593,59 @@ stzh-dropdown:where([size="tiny"]) {
     --line-height: var(--stzh-font-milli-text-line-height);
     --letter-spacing: normal;
     --height: var(--stzh-form-input-height);
+    --border-radius: var(--stzh-form-input-border-radius);
     --icon-size: var(--stzh-icon-size-medium);
     --icon-angle-size: var(--stzh-icon-size-medium);
+    --popover-distance: var(--stzh-space-xsmall);
     --padding-top: var(--stzh-space-xsmall);
     --padding-bottom: var(--stzh-space-xsmall);
     --padding-left: var(--stzh-space-medium);
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: calc(var(--stzh-space-xsmall) - 0.0625rem);
     --multiple-padding-bottom: calc(var(--stzh-space-xsmall) - 0.0625rem);
   }
-
+  stzh-dropdown:where([size-medium="default"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-medium="default"]):where([variant="filter"]) {
+    --font-size: var(--stzh-font-micro-font-size);
+    --line-height: var(--stzh-font-micro-text-line-height);
+    --letter-spacing: normal;
+    --border-radius: 1rem;
+    --height: 2rem;
+    --outer-height: 2.5rem;
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-small);
+    --padding-right: var(--stzh-space-xsmall);
+    --icon-size: var(--stzh-icon-size-xsmall);
+    --icon-angle-size: var(--stzh-icon-size-xsmall);
+    --remove-gap: var(--stzh-space-small);
+    --popover-distance: calc(var(--stzh-space-xsmall) - (var(--outer-height) - var(--height)) / 2);
+  }
+}
+@media screen and (min-width: 900px) and (min-width: 900px) {
+  stzh-dropdown:where([size-medium="default"]):where([variant="filter"]) {
+    --outer-height: auto;
+    --popover-distance: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 900px) {
+  stzh-dropdown:where([size-medium="large"]):where([variant="filter"]) {
+    --height: 2.5rem;
+    --border-radius: 1.25rem;
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-medium);
+    --padding-right: var(--stzh-space-small);
+    --remove-gap: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 900px) {
   stzh-dropdown:where([size-medium="small"]) {
     --font-size: var(--stzh-font-milli-font-size);
     --line-height: var(--stzh-font-milli-text-line-height);
@@ -459,10 +659,23 @@ stzh-dropdown:where([size="tiny"]) {
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: var(--stzh-space-xxsmall);
     --multiple-padding-bottom: var(--stzh-space-xxsmall);
   }
-
+  stzh-dropdown:where([size-medium="small"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-medium="small"]):where([variant="filter"]) {
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-xsmall);
+    --padding-right: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 900px) {
   stzh-dropdown:where([size-medium="tiny"]) {
     --font-size: var(--stzh-font-milli-font-size);
     --line-height: var(--stzh-font-milli-text-line-height);
@@ -476,9 +689,18 @@ stzh-dropdown:where([size="tiny"]) {
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: var(--stzh-space-xxsmall);
     --multiple-padding-bottom: var(--stzh-space-xxsmall);
   }
+  stzh-dropdown:where([size-medium="tiny"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-medium="tiny"]):where([variant="filter"]) {
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+  }
 }
 @media screen and (min-width: 1260px) {
   stzh-dropdown:where([size-large="default"]) {
@@ -486,18 +708,59 @@ stzh-dropdown:where([size="tiny"]) {
     --line-height: var(--stzh-font-milli-text-line-height);
     --letter-spacing: normal;
     --height: var(--stzh-form-input-height);
+    --border-radius: var(--stzh-form-input-border-radius);
     --icon-size: var(--stzh-icon-size-medium);
     --icon-angle-size: var(--stzh-icon-size-medium);
+    --popover-distance: var(--stzh-space-xsmall);
     --padding-top: var(--stzh-space-xsmall);
     --padding-bottom: var(--stzh-space-xsmall);
     --padding-left: var(--stzh-space-medium);
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: calc(var(--stzh-space-xsmall) - 0.0625rem);
     --multiple-padding-bottom: calc(var(--stzh-space-xsmall) - 0.0625rem);
   }
-
+  stzh-dropdown:where([size-large="default"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-large="default"]):where([variant="filter"]) {
+    --font-size: var(--stzh-font-micro-font-size);
+    --line-height: var(--stzh-font-micro-text-line-height);
+    --letter-spacing: normal;
+    --border-radius: 1rem;
+    --height: 2rem;
+    --outer-height: 2.5rem;
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-small);
+    --padding-right: var(--stzh-space-xsmall);
+    --icon-size: var(--stzh-icon-size-xsmall);
+    --icon-angle-size: var(--stzh-icon-size-xsmall);
+    --remove-gap: var(--stzh-space-small);
+    --popover-distance: calc(var(--stzh-space-xsmall) - (var(--outer-height) - var(--height)) / 2);
+  }
+}
+@media screen and (min-width: 1260px) and (min-width: 900px) {
+  stzh-dropdown:where([size-large="default"]):where([variant="filter"]) {
+    --outer-height: auto;
+    --popover-distance: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 1260px) {
+  stzh-dropdown:where([size-large="large"]):where([variant="filter"]) {
+    --height: 2.5rem;
+    --border-radius: 1.25rem;
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-medium);
+    --padding-right: var(--stzh-space-small);
+    --remove-gap: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
   stzh-dropdown:where([size-large="small"]) {
     --font-size: var(--stzh-font-milli-font-size);
     --line-height: var(--stzh-font-milli-text-line-height);
@@ -511,10 +774,23 @@ stzh-dropdown:where([size="tiny"]) {
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: var(--stzh-space-xxsmall);
     --multiple-padding-bottom: var(--stzh-space-xxsmall);
   }
-
+  stzh-dropdown:where([size-large="small"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-large="small"]):where([variant="filter"]) {
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-xsmall);
+    --padding-right: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 1260px) {
   stzh-dropdown:where([size-large="tiny"]) {
     --font-size: var(--stzh-font-milli-font-size);
     --line-height: var(--stzh-font-milli-text-line-height);
@@ -528,9 +804,18 @@ stzh-dropdown:where([size="tiny"]) {
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: var(--stzh-space-xxsmall);
     --multiple-padding-bottom: var(--stzh-space-xxsmall);
   }
+  stzh-dropdown:where([size-large="tiny"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-large="tiny"]):where([variant="filter"]) {
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+  }
 }
 @media screen and (min-width: 1600px) {
   stzh-dropdown:where([size-ultra="default"]) {
@@ -538,18 +823,59 @@ stzh-dropdown:where([size="tiny"]) {
     --line-height: var(--stzh-font-milli-text-line-height);
     --letter-spacing: normal;
     --height: var(--stzh-form-input-height);
+    --border-radius: var(--stzh-form-input-border-radius);
     --icon-size: var(--stzh-icon-size-medium);
     --icon-angle-size: var(--stzh-icon-size-medium);
+    --popover-distance: var(--stzh-space-xsmall);
     --padding-top: var(--stzh-space-xsmall);
     --padding-bottom: var(--stzh-space-xsmall);
     --padding-left: var(--stzh-space-medium);
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: calc(var(--stzh-space-xsmall) - 0.0625rem);
     --multiple-padding-bottom: calc(var(--stzh-space-xsmall) - 0.0625rem);
   }
-
+  stzh-dropdown:where([size-ultra="default"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-ultra="default"]):where([variant="filter"]) {
+    --font-size: var(--stzh-font-micro-font-size);
+    --line-height: var(--stzh-font-micro-text-line-height);
+    --letter-spacing: normal;
+    --border-radius: 1rem;
+    --height: 2rem;
+    --outer-height: 2.5rem;
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-small);
+    --padding-right: var(--stzh-space-xsmall);
+    --icon-size: var(--stzh-icon-size-xsmall);
+    --icon-angle-size: var(--stzh-icon-size-xsmall);
+    --remove-gap: var(--stzh-space-small);
+    --popover-distance: calc(var(--stzh-space-xsmall) - (var(--outer-height) - var(--height)) / 2);
+  }
+}
+@media screen and (min-width: 1600px) and (min-width: 900px) {
+  stzh-dropdown:where([size-ultra="default"]):where([variant="filter"]) {
+    --outer-height: auto;
+    --popover-distance: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 1600px) {
+  stzh-dropdown:where([size-ultra="large"]):where([variant="filter"]) {
+    --height: 2.5rem;
+    --border-radius: 1.25rem;
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-medium);
+    --padding-right: var(--stzh-space-small);
+    --remove-gap: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1600px) {
   stzh-dropdown:where([size-ultra="small"]) {
     --font-size: var(--stzh-font-milli-font-size);
     --line-height: var(--stzh-font-milli-text-line-height);
@@ -563,10 +889,23 @@ stzh-dropdown:where([size="tiny"]) {
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: var(--stzh-space-xxsmall);
     --multiple-padding-bottom: var(--stzh-space-xxsmall);
   }
-
+  stzh-dropdown:where([size-ultra="small"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-ultra="small"]):where([variant="filter"]) {
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --padding-left: var(--stzh-space-xsmall);
+    --padding-right: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 1600px) {
   stzh-dropdown:where([size-ultra="tiny"]) {
     --font-size: var(--stzh-font-milli-font-size);
     --line-height: var(--stzh-font-milli-text-line-height);
@@ -580,9 +919,18 @@ stzh-dropdown:where([size="tiny"]) {
     --padding-right: var(--stzh-space-medium);
     --icon-gap: var(--stzh-space-xsmall);
     --icon-angle-gap: var(--stzh-space-xsmall);
+    --remove-gap: var(--stzh-space-xxsmall);
     --multiple-padding-top: var(--stzh-space-xxsmall);
     --multiple-padding-bottom: var(--stzh-space-xxsmall);
   }
+  stzh-dropdown:where([size-ultra="tiny"]):where([variant="plain"]) {
+    --padding-left: 0px;
+    --padding-right: 0px;
+  }
+  stzh-dropdown:where([size-ultra="tiny"]):where([variant="filter"]) {
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+  }
 }
 .stzh-dropdown {
   /* Plugin: Input autogrow */
@@ -597,6 +945,7 @@ stzh-dropdown:where([size="tiny"]) {
   /* Plain */
   /* Styles for floating label */
   /* Has no search */
+  /* Filter */
   /* Disabled */
 }
 .stzh-dropdown__marker-symbol {
@@ -691,6 +1040,11 @@ stzh-dropdown:where([size="tiny"]) {
   overflow-x: hidden;
   overflow-scrolling: touch;
 }
+.stzh-dropdown .ts-wrapper {
+  display: flex;
+  align-items: center;
+  min-height: var(--outer-height);
+}
 .stzh-dropdown .ts-control {
   overflow: hidden;
   position: relative;
@@ -783,13 +1137,6 @@ stzh-dropdown:where([size="tiny"]) {
 .stzh-dropdown__select .ts-control > input, .stzh-dropdown__select.single .stzh-dropdown__item {
   color: var(--color);
 }
-.stzh-dropdown__icon-wrapper {
-  position: absolute;
-  color: var(--icon-color);
-}
-.stzh-dropdown__icon-angle-wrapper {
-  color: var(--icon-angle-color);
-}
 .stzh-dropdown__sizer {
   height: var(--height);
   display: flex;
@@ -826,10 +1173,12 @@ stzh-dropdown:where([size="tiny"]) {
   pointer-events: none;
 }
 .stzh-dropdown__icon-wrapper {
-  left: var(--stzh-space-medium);
+  left: var(--padding-left);
+  color: var(--icon-color);
 }
 .stzh-dropdown__icon-angle-wrapper {
-  right: var(--stzh-space-medium);
+  right: var(--padding-right);
+  color: var(--icon-angle-color);
 }
 .stzh-dropdown__icon-wrapper stzh-icon, .stzh-dropdown__icon {
   --size: var(--icon-size);
@@ -841,11 +1190,12 @@ stzh-dropdown:where([size="tiny"]) {
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
   font-style: var(--stzh-font-style-heavy);
-  font-size: var(--stzh-font-micro-font-size);
-  line-height: var(--stzh-font-micro-text-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  font-size: var(--label-font-size);
+  line-height: var(--label-line-height);
+  letter-spacing: var(--label-letter-spacing);
   color: var(--label-color);
   display: block;
   width: auto;
@@ -951,6 +1301,7 @@ stzh-dropdown:where([size="tiny"]) {
   position: absolute;
   top: auto;
   left: auto;
+  white-space: nowrap;
   margin-top: var(--popover-distance);
   margin-left: var(--popover-skidding);
   transform: none;
@@ -965,6 +1316,9 @@ stzh-dropdown:where([size="tiny"]) {
   box-shadow: var(--popover-box-shadow);
   border-radius: var(--popover-border-radius);
 }
+.stzh-dropdown__remove-icon {
+  --size: var(--stzh-icon-size-xxsmall);
+}
 .stzh-dropdown__select.plugin-input_autogrow.has-items .ts-control > input {
   min-width: 0;
 }
@@ -1033,16 +1387,15 @@ stzh-dropdown:where([size="tiny"]) {
   color: var(--stzh-color-white);
   background-color: var(--stzh-color-primary70);
 }
-.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item {
+.stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item, .stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item {
   display: inline-flex;
   align-items: center;
-  padding-right: calc(1.5rem + var(--stzh-space-xxsmall));
+  gap: var(--remove-gap);
+  padding-right: 0px;
 }
-.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove {
-  position: absolute;
-  top: 50%;
+.stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove {
+  position: relative;
   right: -0.0625rem;
-  transform: translateY(-50%);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
   width: 1.5rem;
@@ -1051,17 +1404,13 @@ stzh-dropdown:where([size="tiny"]) {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-left: var(--stzh-space-xxsmall);
   color: var(--stzh-color-primary70);
   transition: all var(--stzh-base-transition-animation-speed);
 }
-.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover {
+.stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover {
   color: var(--stzh-color-primary90);
   background-color: var(--stzh-color-primary30);
 }
-.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__remove-icon {
-  --size: var(--stzh-icon-size-xxsmall);
-}
 .stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item.active .stzh-dropdown__remove-icon {
   color: var(--stzh-color-white);
 }
@@ -1099,18 +1448,10 @@ stzh-dropdown:where([size="tiny"]) {
   position: absolute;
 }
 .stzh-dropdown--has-icon .stzh-dropdown__select.single .ts-control, .stzh-dropdown--has-icon .stzh-dropdown__select.multi .ts-control, .stzh-dropdown--has-icon .stzh-dropdown__sizer {
-  padding-left: calc(var(--icon-size) + var(--icon-gap) + var(--padding-left));
+  padding-left: calc(var(--padding-left) + var(--icon-size) + var(--icon-gap));
 }
 .stzh-dropdown--plain .stzh-dropdown__select.single .ts-control, .stzh-dropdown--plain .stzh-dropdown__select.multi .ts-control, .stzh-dropdown--plain .stzh-dropdown__sizer {
   border: none;
-  padding-left: 0;
-  padding-right: calc(var(--icon-angle-gap) + var(--icon-angle-size));
-}
-.stzh-dropdown--plain .stzh-dropdown__icon-wrapper {
-  left: 0;
-}
-.stzh-dropdown--plain .stzh-dropdown__icon-angle-wrapper {
-  right: 0;
 }
 .stzh-dropdown--plain .stzh-dropdown__label {
   left: 0;
@@ -1119,7 +1460,7 @@ stzh-dropdown:where([size="tiny"]) {
   z-index: 1;
   position: absolute;
   margin: 0;
-  top: calc(var(--height) / 2);
+  top: 50%;
   transform: translateY(-50%);
   transition: all var(--stzh-base-transition-animation-speed);
   pointer-events: none;
@@ -1131,13 +1472,7 @@ stzh-dropdown:where([size="tiny"]) {
   margin-top: 0;
 }
 .stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__label {
-  left: calc(var(--icon-size) + var(--stzh-space-medium) + var(--stzh-space-xsmall) + 0.0625rem);
-}
-.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__select.single .ts-control, .stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__select.multi .ts-control, .stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__sizer {
-  padding-left: calc(var(--icon-size) + var(--stzh-space-xsmall));
-}
-.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__label {
-  left: calc(var(--icon-size) + var(--stzh-space-xsmall) + 0.0625rem);
+  left: calc(var(--icon-size) + var(--icon-gap));
 }
 .stzh-dropdown--plain.stzh-dropdown--has-focus:not(.stzh-dropdown--has-no-search) .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-filled .stzh-dropdown__label {
   border: 0;
@@ -1158,6 +1493,62 @@ stzh-dropdown:where([size="tiny"]) {
 .stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control, .stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control > input {
   cursor: pointer;
 }
+.stzh-dropdown--filter .stzh-dropdown__select.single .ts-control, .stzh-dropdown--filter .stzh-dropdown__select.multi .ts-control, .stzh-dropdown--filter .stzh-dropdown__sizer {
+  border: none;
+}
+.stzh-dropdown--filter .stzh-dropdown__label {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  left: var(--padding-left);
+  max-width: 100%;
+  padding: 0;
+  z-index: 1;
+  position: absolute;
+  margin: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: all var(--stzh-base-transition-animation-speed);
+  pointer-events: none;
+}
+.stzh-dropdown--filter .stzh-dropdown__label::before {
+  content: none;
+}
+.stzh-dropdown--filter.stzh-dropdown--has-icon .stzh-dropdown__label {
+  left: calc(var(--padding-left) + var(--icon-size) + var(--icon-gap));
+}
+.stzh-dropdown--filter.stzh-dropdown--has-focus:not(.stzh-dropdown--has-no-search) .stzh-dropdown__label, .stzh-dropdown--filter.stzh-dropdown--is-filled .stzh-dropdown__label {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+.stzh-dropdown--filter .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove {
+  color: var(--stzh-color-primary70);
+  background-color: var(--stzh-color-secondary30);
+  width: var(--height);
+  height: var(--height);
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.stzh-dropdown--filter .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover {
+  color: var(--stzh-color-black);
+  background-color: var(--stzh-color-secondary40);
+}
+.stzh-dropdown--filter .stzh-dropdown__remove-icon {
+  --size: var(--stzh-icon-size-xsmall);
+}
+.stzh-dropdown--filter.stzh-dropdown--is-filled .stzh-dropdown__icon-angle-wrapper {
+  display: none;
+}
+.stzh-dropdown--filter.stzh-dropdown--is-filled .stzh-dropdown__select.single .ts-control, .stzh-dropdown--filter.stzh-dropdown--is-filled .stzh-dropdown__select.multi .ts-control, .stzh-dropdown--filter.stzh-dropdown--is-filled .stzh-dropdown__sizer {
+  padding-right: 0px;
+}
 .stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item, .stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove {
   cursor: not-allowed;
 }