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

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

@@ -157,10 +157,11 @@
 }
 
 :host {
+  --calendar-width: var(--stzh-calendar-width);
   width: 100%;
 }
 :host[inline]:not([inline=false]) {
-  width: var(--stzh-calendar-width);
+  width: var(--calendar-width);
 }
 
 .stzh-datepicker {
@@ -169,15 +170,29 @@
 .stzh-datepicker__popover {
   --width: auto;
 }
+.stzh-datepicker__calendar {
+  margin-left: auto;
+  margin-right: auto;
+}
 .stzh-datepicker__calendar.is-inline {
   width: 100%;
+  margin-left: 0px;
+  margin-right: 0px;
 }
 .stzh-datepicker__actions {
   display: flex;
-  justify-content: flex-end;
+  width: var(--calendar-width);
+  margin-left: auto;
+  margin-right: auto;
+}
+.stzh-datepicker__actions.is-inline {
+  width: 100%;
+  margin-left: 0px;
+  margin-right: 0px;
 }
 .stzh-datepicker__actions:not(:empty) {
-  margin-right: var(--stzh-space-small);
+  padding-left: var(--stzh-space-small);
+  padding-right: var(--stzh-space-small);
 }
 .stzh-datepicker--has-action .stzh-datepicker__popover {
   --content-padding: 0 0 var(--stzh-space-small) 0;

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

@@ -166,17 +166,28 @@ stzh-dropdown {
   display: block;
   /* default outline value, which will be applied to all elements receiving focus
   the .has-focus class is used by the focus target */
+  --font-size: var(--stzh-font-milli-font-size);
+  --line-height: var(--stzh-font-milli-text-line-height);
+  --letter-spacing: normal;
+  --height: var(--stzh-form-input-height);
+  --icon-size: var(--stzh-icon-size-medium);
+  --icon-angle-size: var(--stzh-icon-size-medium);
+  --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);
+  --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);
-  --height: var(--stzh-form-input-height);
   --label-color: var(--stzh-color-primary);
   --placeholder-color: var(--stzh-color-grey70);
-  --icon-size: var(--stzh-icon-size-medium);
-  --icon-color: var(--stzh-color-grey80);
-  --icon-angle-size: var(--stzh-icon-size-medium);
-  --icon-angle-color: var(--stzh-color-grey80);
+  --icon-color: var(--stzh-color-primary70);
+  --icon-angle-color: var(--stzh-color-primary70);
   --hover-color: var(--stzh-color-secondary60);
   --hover-border-color: var(--stzh-color-secondary50);
   --hover-background-color: var(--stzh-color-white);
@@ -239,22 +250,11 @@ stzh-dropdown .stzh-fylingfocus-focused {
 stzh-dropdown .stzh-fylingfocus-focused::-moz-focus-inner {
   border: 0 !important;
 }
-stzh-dropdown[variant=plain] {
-  --background-color: transparent;
-  --hover-background-color: transparent;
-  --hover-label-color: var(--stzh-color-primary90);
-  --focus-background-color: transparent;
-  --focus-label-color: var(--stzh-color-primary90);
-}
-stzh-dropdown[inline]:not([inline=false]) {
+stzh-dropdown:where([inline]:not([inline="false"])) {
   --popover-width: auto;
   width: auto;
 }
-stzh-dropdown[size=small] {
-  --height: var(--stzh-form-input-small-height);
-  --icon-angle-size: var(--stzh-icon-size-small);
-}
-stzh-dropdown[is-filled]:not([is-filled=false]) {
+stzh-dropdown:where([is-filled]:not([is-filled="false"])) {
   --icon-color: var(--stzh-color-primary70);
   --icon-angle-color: var(--stzh-color-primary70);
   --hover-icon-color: var(--stzh-color-primary70);
@@ -262,6 +262,23 @@ stzh-dropdown[is-filled]:not([is-filled=false]) {
   --focus-icon-angle-color: var(--stzh-color-black);
   --focus-icon-color: var(--stzh-color-black);
 }
+stzh-dropdown:where([variant="plain"]) {
+  --background-color: transparent;
+  --hover-background-color: transparent;
+  --hover-label-color: var(--stzh-color-primary90);
+  --hover-icon-color: var(--stzh-color-primary90);
+  --hover-icon-angle-color: var(--stzh-color-primary90);
+  --focus-background-color: transparent;
+  --focus-label-color: var(--stzh-color-primary90);
+  --focus-icon-color: var(--stzh-color-primary90);
+  --focus-icon-angle-color: var(--stzh-color-primary90);
+}
+stzh-dropdown:where([variant="plain"][is-filled]:not([is-filled="false"])) {
+  --icon-color: var(--stzh-color-secondary60);
+  --icon-angle-color: var(--stzh-color-secondary60);
+  --hover-icon-color: var(--stzh-color-secondary60);
+  --hover-icon-angle-color: var(--stzh-color-secondary60);
+}
 stzh-dropdown[is-invalid] {
   --color: var(--stzh-color-error60);
   --border-color: var(--stzh-color-error60);
@@ -325,6 +342,248 @@ stzh-dropdown:is(:has(.ts-control:focus-within)) {
   --icon-angle-color: var(--focus-icon-angle-color);
 }
 
+stzh-dropdown:where([size="small"]) {
+  --font-size: var(--stzh-font-milli-font-size);
+  --line-height: var(--stzh-font-milli-text-line-height);
+  --letter-spacing: normal;
+  --height: var(--stzh-form-input-small-height);
+  --icon-size: var(--stzh-icon-size-medium);
+  --icon-angle-size: var(--stzh-icon-size-medium);
+  --padding-top: var(--stzh-space-xxsmall);
+  --padding-bottom: var(--stzh-space-xxsmall);
+  --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);
+  --multiple-padding-top: var(--stzh-space-xxsmall);
+  --multiple-padding-bottom: var(--stzh-space-xxsmall);
+}
+
+stzh-dropdown:where([size="tiny"]) {
+  --font-size: var(--stzh-font-milli-font-size);
+  --line-height: var(--stzh-font-milli-text-line-height);
+  --letter-spacing: normal;
+  --height: var(--stzh-form-input-tiny-height);
+  --icon-size: var(--stzh-icon-size-medium);
+  --icon-angle-size: var(--stzh-icon-size-medium);
+  --padding-top: var(--stzh-space-xxsmall);
+  --padding-bottom: var(--stzh-space-xxsmall);
+  --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);
+  --multiple-padding-top: var(--stzh-space-xxsmall);
+  --multiple-padding-bottom: var(--stzh-space-xxsmall);
+}
+
+@media screen and (min-width: 600px) {
+  stzh-dropdown:where([size-small="default"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --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);
+    --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="small"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-small-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --padding-top: var(--stzh-space-xxsmall);
+    --padding-bottom: var(--stzh-space-xxsmall);
+    --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);
+    --multiple-padding-top: var(--stzh-space-xxsmall);
+    --multiple-padding-bottom: var(--stzh-space-xxsmall);
+  }
+
+  stzh-dropdown:where([size-small="tiny"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-tiny-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --padding-top: var(--stzh-space-xxsmall);
+    --padding-bottom: var(--stzh-space-xxsmall);
+    --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);
+    --multiple-padding-top: var(--stzh-space-xxsmall);
+    --multiple-padding-bottom: var(--stzh-space-xxsmall);
+  }
+}
+@media screen and (min-width: 900px) {
+  stzh-dropdown:where([size-medium="default"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --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);
+    --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="small"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-small-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --padding-top: var(--stzh-space-xxsmall);
+    --padding-bottom: var(--stzh-space-xxsmall);
+    --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);
+    --multiple-padding-top: var(--stzh-space-xxsmall);
+    --multiple-padding-bottom: var(--stzh-space-xxsmall);
+  }
+
+  stzh-dropdown:where([size-medium="tiny"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-tiny-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --padding-top: var(--stzh-space-xxsmall);
+    --padding-bottom: var(--stzh-space-xxsmall);
+    --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);
+    --multiple-padding-top: var(--stzh-space-xxsmall);
+    --multiple-padding-bottom: var(--stzh-space-xxsmall);
+  }
+}
+@media screen and (min-width: 1260px) {
+  stzh-dropdown:where([size-large="default"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --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);
+    --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="small"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-small-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --padding-top: var(--stzh-space-xxsmall);
+    --padding-bottom: var(--stzh-space-xxsmall);
+    --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);
+    --multiple-padding-top: var(--stzh-space-xxsmall);
+    --multiple-padding-bottom: var(--stzh-space-xxsmall);
+  }
+
+  stzh-dropdown:where([size-large="tiny"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-tiny-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --padding-top: var(--stzh-space-xxsmall);
+    --padding-bottom: var(--stzh-space-xxsmall);
+    --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);
+    --multiple-padding-top: var(--stzh-space-xxsmall);
+    --multiple-padding-bottom: var(--stzh-space-xxsmall);
+  }
+}
+@media screen and (min-width: 1600px) {
+  stzh-dropdown:where([size-ultra="default"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --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);
+    --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="small"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-small-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --padding-top: var(--stzh-space-xxsmall);
+    --padding-bottom: var(--stzh-space-xxsmall);
+    --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);
+    --multiple-padding-top: var(--stzh-space-xxsmall);
+    --multiple-padding-bottom: var(--stzh-space-xxsmall);
+  }
+
+  stzh-dropdown:where([size-ultra="tiny"]) {
+    --font-size: var(--stzh-font-milli-font-size);
+    --line-height: var(--stzh-font-milli-text-line-height);
+    --letter-spacing: normal;
+    --height: var(--stzh-form-input-tiny-height);
+    --icon-size: var(--stzh-icon-size-medium);
+    --icon-angle-size: var(--stzh-icon-size-medium);
+    --padding-top: var(--stzh-space-xxsmall);
+    --padding-bottom: var(--stzh-space-xxsmall);
+    --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);
+    --multiple-padding-top: var(--stzh-space-xxsmall);
+    --multiple-padding-bottom: var(--stzh-space-xxsmall);
+  }
+}
 .stzh-dropdown {
   /* Plugin: Input autogrow */
   /* Has Items */
@@ -334,7 +593,6 @@ stzh-dropdown:is(:has(.ts-control:focus-within)) {
   /* Popover placement */
   /* Has fullwidth popover */
   /* Hidden label */
-  /* Small */
   /* Has icon */
   /* Plain */
   /* Styles for floating label */
@@ -458,6 +716,9 @@ stzh-dropdown:is(:has(.ts-control:focus-within)) {
   font-family: var(--stzh-font-family-medium);
   font-weight: var(--stzh-font-weight-medium);
   font-style: var(--stzh-font-style-medium);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  letter-spacing: var(--letter-spacing);
   width: 100%;
   border: 0.125rem solid var(--border-color);
 }
@@ -552,8 +813,10 @@ stzh-dropdown:is(:has(.ts-control:focus-within)) {
   left: -625rem;
 }
 .stzh-dropdown__select.single .ts-control, .stzh-dropdown__select.multi .ts-control, .stzh-dropdown__sizer {
-  padding: var(--stzh-space-xsmall) var(--stzh-space-medium);
-  padding-right: calc(var(--stzh-icon-size-medium) + var(--stzh-space-medium) + var(--stzh-space-xsmall));
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  padding-left: var(--padding-left);
+  padding-right: calc(var(--icon-angle-size) + var(--icon-angle-gap) + var(--padding-right));
 }
 .stzh-dropdown__icon-wrapper, .stzh-dropdown__icon-angle-wrapper {
   display: flex;
@@ -737,8 +1000,8 @@ stzh-dropdown:is(:has(.ts-control:focus-within)) {
   opacity: 1;
 }
 .stzh-dropdown--is-multiple .stzh-dropdown__select.multi.has-items .ts-control {
-  padding-top: calc(var(--stzh-space-xsmall) - 0.0625rem);
-  padding-bottom: calc(var(--stzh-space-xsmall) - 0.0625rem);
+  padding-top: var(--multiple-padding-top);
+  padding-bottom: var(--multiple-padding-bottom);
 }
 .stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item {
   font-size: var(--stzh-font-micro-font-size);
@@ -835,25 +1098,13 @@ stzh-dropdown:is(:has(.ts-control:focus-within)) {
   padding: 0;
   position: absolute;
 }
-.stzh-dropdown--size-small .ts-control, .stzh-dropdown--size-small .stzh-dropdown__sizer {
-  font-size: var(--stzh-font-micro-font-size);
-  line-height: var(--stzh-font-micro-text-line-height);
-}
-.stzh-dropdown--size-small .stzh-dropdown__select.single .ts-control, .stzh-dropdown--size-small .stzh-dropdown__select.multi .ts-control, .stzh-dropdown--size-small .stzh-dropdown__sizer {
-  padding: var(--stzh-space-xxsmall) var(--stzh-space-medium);
-  padding-right: calc(var(--stzh-icon-size-small) + var(--stzh-space-medium) + var(--stzh-space-xsmall));
-}
-.stzh-dropdown--size-small.stzh-dropdown--is-multiple .stzh-dropdown__select.multi.has-items .ts-control {
-  padding-top: var(--stzh-space-xxsmall);
-  padding-bottom: var(--stzh-space-xxsmall);
-}
 .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(--stzh-space-medium) + var(--stzh-space-xsmall));
+  padding-left: calc(var(--icon-size) + var(--icon-gap) + var(--padding-left));
 }
 .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(--stzh-icon-size-medium) + var(--stzh-space-xsmall));
+  padding-right: calc(var(--icon-angle-gap) + var(--icon-angle-size));
 }
 .stzh-dropdown--plain .stzh-dropdown__icon-wrapper {
   left: 0;
@@ -879,9 +1130,6 @@ stzh-dropdown:is(:has(.ts-control:focus-within)) {
 .stzh-dropdown--plain .stzh-dropdown__dropdown {
   margin-top: 0;
 }
-.stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__select.single .ts-control, .stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__select.multi .ts-control, .stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__sizer {
-  padding-right: calc(var(--stzh-icon-size-small) + var(--stzh-space-xsmall));
-}
 .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);
 }

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

@@ -72,6 +72,10 @@ export class StzhDropdown {
     this.isOpen = false;
     this.variant = "default";
     this.size = "default";
+    this.sizeSmall = undefined;
+    this.sizeMedium = undefined;
+    this.sizeLarge = undefined;
+    this.sizeUltra = undefined;
     this.disabled = false;
     this.popoverPlacement = "bottom";
     this.popoverFullwidth = "";
@@ -189,7 +193,8 @@ export class StzhDropdown {
     return this.tomSelect.close();
   }
   updateFilled() {
-    if (this._items.length > 0) {
+    var _a;
+    if (((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
       this.rootElement.classList.add(CLASS_FILLED);
       this.element.setAttribute("is-filled", "true");
     }
@@ -469,6 +474,7 @@ export class StzhDropdown {
     if (this._items) {
       tomSelectOptions.items = this._items;
     }
+    this.updateFilled();
     this.tomSelect = new TomSelect(this.select, tomSelectOptions);
     if (!this.openOnFocus) {
       // we still want to enable opening the dropdown by click
@@ -1054,9 +1060,15 @@ export class StzhDropdown {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"default\" | \"small\"",
-          "resolved": "\"default\" | \"small\"",
-          "references": {}
+          "original": "StzhDropdownSize",
+          "resolved": "\"default\" | \"small\" | \"tiny\"",
+          "references": {
+            "StzhDropdownSize": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhDropdownSize"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -1068,6 +1080,98 @@ export class StzhDropdown {
         "reflect": true,
         "defaultValue": "\"default\""
       },
+      "sizeSmall": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDropdownSize",
+          "resolved": "\"default\" | \"small\" | \"tiny\"",
+          "references": {
+            "StzhDropdownSize": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhDropdownSize"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant (abobe small breakpoint)"
+        },
+        "attribute": "size-small",
+        "reflect": true
+      },
+      "sizeMedium": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDropdownSize",
+          "resolved": "\"default\" | \"small\" | \"tiny\"",
+          "references": {
+            "StzhDropdownSize": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhDropdownSize"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant (abobe medium breakpoint)"
+        },
+        "attribute": "size-medium",
+        "reflect": true
+      },
+      "sizeLarge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDropdownSize",
+          "resolved": "\"default\" | \"small\" | \"tiny\"",
+          "references": {
+            "StzhDropdownSize": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhDropdownSize"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant (abobe large breakpoint)"
+        },
+        "attribute": "size-large",
+        "reflect": true
+      },
+      "sizeUltra": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDropdownSize",
+          "resolved": "\"default\" | \"small\" | \"tiny\"",
+          "references": {
+            "StzhDropdownSize": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhDropdownSize"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant (abobe ultra breakpoint)"
+        },
+        "attribute": "size-ultra",
+        "reflect": true
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,