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

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -156,163 +159,229 @@
   border: 0 !important;
 }
 
+:host ::slotted(.layout_column > .stzh-fieldset-row > .stzh-fieldset-row),
 :host ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row),
 :host ::slotted(.stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-input),
 :host ::slotted(.stzh-fieldset-row > stzh-input),
 :host ::slotted(stzh-input),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-dropdown),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-dropdown),
 :host ::slotted(stzh-dropdown),
 :host ::slotted(.stzh-fieldset-row > stzh-fieldset),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),
 :host ::slotted(stzh-fieldset),
 :host ::slotted(.stzh-fieldset-row > stzh-upload),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-upload),
 :host ::slotted(stzh-upload),
 :host ::slotted(.stzh-fieldset-row > stzh-checkbox),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkbox),
 :host ::slotted(stzh-checkbox),
 :host ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkboxgroup),
 :host ::slotted(stzh-checkboxgroup),
 :host ::slotted(.stzh-fieldset-row > stzh-radio),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radio),
 :host ::slotted(stzh-radio),
 :host ::slotted(.stzh-fieldset-row > stzh-radiogroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radiogroup),
 :host ::slotted(stzh-radiogroup),
 :host ::slotted(.stzh-fieldset-row > stzh-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-row),
 :host ::slotted(stzh-row),
 :host ::slotted(.stzh-fieldset-row > stzh-vspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-vspace),
 :host ::slotted(stzh-vspace),
 :host ::slotted(.stzh-fieldset-row > stzh-hspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-hspace),
 :host ::slotted(stzh-hspace),
 :host ::slotted(.stzh-fieldset-row > stzh-text),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-text),
 :host ::slotted(stzh-text) {
   margin-bottom: var(--stzh-space-xsmall);
 }
 @media screen and (min-width: 900px) {
-  :host ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),
+  :host ::slotted(.layout_column > .stzh-fieldset-row > .stzh-fieldset-row),
+:host ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row),
 :host ::slotted(.stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-input),
 :host ::slotted(.stzh-fieldset-row > stzh-input),
 :host ::slotted(stzh-input),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-dropdown),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-dropdown),
 :host ::slotted(stzh-dropdown),
 :host ::slotted(.stzh-fieldset-row > stzh-fieldset),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),
 :host ::slotted(stzh-fieldset),
 :host ::slotted(.stzh-fieldset-row > stzh-upload),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-upload),
 :host ::slotted(stzh-upload),
 :host ::slotted(.stzh-fieldset-row > stzh-checkbox),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkbox),
 :host ::slotted(stzh-checkbox),
 :host ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkboxgroup),
 :host ::slotted(stzh-checkboxgroup),
 :host ::slotted(.stzh-fieldset-row > stzh-radio),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radio),
 :host ::slotted(stzh-radio),
 :host ::slotted(.stzh-fieldset-row > stzh-radiogroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radiogroup),
 :host ::slotted(stzh-radiogroup),
 :host ::slotted(.stzh-fieldset-row > stzh-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-row),
 :host ::slotted(stzh-row),
 :host ::slotted(.stzh-fieldset-row > stzh-vspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-vspace),
 :host ::slotted(stzh-vspace),
 :host ::slotted(.stzh-fieldset-row > stzh-hspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-hspace),
 :host ::slotted(stzh-hspace),
 :host ::slotted(.stzh-fieldset-row > stzh-text),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-text),
 :host ::slotted(stzh-text) {
     margin-bottom: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),
+  :host ::slotted(.layout_column > .stzh-fieldset-row > .stzh-fieldset-row),
+:host ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row),
 :host ::slotted(.stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-input),
 :host ::slotted(.stzh-fieldset-row > stzh-input),
 :host ::slotted(stzh-input),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-dropdown),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-dropdown),
 :host ::slotted(stzh-dropdown),
 :host ::slotted(.stzh-fieldset-row > stzh-fieldset),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),
 :host ::slotted(stzh-fieldset),
 :host ::slotted(.stzh-fieldset-row > stzh-upload),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-upload),
 :host ::slotted(stzh-upload),
 :host ::slotted(.stzh-fieldset-row > stzh-checkbox),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkbox),
 :host ::slotted(stzh-checkbox),
 :host ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkboxgroup),
 :host ::slotted(stzh-checkboxgroup),
 :host ::slotted(.stzh-fieldset-row > stzh-radio),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radio),
 :host ::slotted(stzh-radio),
 :host ::slotted(.stzh-fieldset-row > stzh-radiogroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radiogroup),
 :host ::slotted(stzh-radiogroup),
 :host ::slotted(.stzh-fieldset-row > stzh-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-row),
 :host ::slotted(stzh-row),
 :host ::slotted(.stzh-fieldset-row > stzh-vspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-vspace),
 :host ::slotted(stzh-vspace),
 :host ::slotted(.stzh-fieldset-row > stzh-hspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-hspace),
 :host ::slotted(stzh-hspace),
 :host ::slotted(.stzh-fieldset-row > stzh-text),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-text),
 :host ::slotted(stzh-text) {
     margin-bottom: var(--stzh-space-medium);
   }
 }
+:host > .section > stzh-chipgroup, :host > stzh-chipgroup, :host > .section > stzh-chipselect, :host > stzh-chipselect {
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (max-width: 899px) {
+  :host ::slotted(.stzh-fieldset-row > stzh-daterange),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-daterange),
+:host ::slotted(stzh-daterange) {
+    margin-bottom: calc(var(--stzh-fieldset-description-min-height) + var(--stzh-space-xsmall));
+  }
+}
 :host ::slotted(.stzh-fieldset-row > stzh-message),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-message),
 :host ::slotted(stzh-message) {
   margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 900px) {
   :host ::slotted(.stzh-fieldset-row > stzh-message),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-message),
 :host ::slotted(stzh-message) {
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(.stzh-fieldset-row > stzh-message),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-message),
 :host ::slotted(stzh-message) {
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
 :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
   margin-top: var(--stzh-space-xlarge);
   margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 900px) {
   :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
     margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
     margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 600px) {
   :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
 @media screen and (min-width: 900px) {
   :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
     margin-bottom: var(--stzh-space-xbig);
   }
 }
-:host ::slotted(*) stzh-checkbox,
-:host ::slotted(*) stzh-radio {
+:host ::slotted(*) stzh-checkboxgroup stzh-checkbox,
+:host ::slotted(*) stzh-radiogroup stzh-radio {
   --stzh-description-min-height: none;
 }
 :host ::slotted(.stzh-fieldset-row > :last-child),
+:host ::slotted(.layout_column > .stzh-fieldset-row > :last-child),
 :host ::slotted(:last-child),
+:host ::slotted(.layout_column > .stzh-fieldset-row:has(cq) > :nth-last-child(2)),
 :host ::slotted(.stzh-fieldset-row:has(cq) > :nth-last-child(2)) {
   margin-bottom: 0;
 }
 
 .stzh-fieldset {
-  --stzh-description-min-height: 1.375rem;
+  --stzh-description-min-height: var(--stzh-fieldset-description-min-height);
   margin: 0;
   padding: 0;
   border: none;

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -343,21 +346,16 @@
   }
 }
 .stzh-ghettobox__description:not(:empty) {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  .stzh-ghettobox__description:not(:empty) {
-    margin-bottom: var(--stzh-space-large);
-  }
+  margin-bottom: var(--stzh-space-small);
 }
 @media screen and (min-width: 900px) {
   .stzh-ghettobox__description:not(:empty) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-medium);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-ghettobox__description:not(:empty) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-large);
   }
 }
 .stzh-ghettobox__button {

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -208,8 +211,9 @@
   /* Has empty metabar */
   /* Metabar Stay */
   /* Fixed variant (as soon as header is passed) */
-  /* Sticky variant */
+  /* Sticky (transition) variant */
   /* Sticky disabled */
+  /* Sticky always */
   /* Flyout open */
 }
 .stzh-header__inner, .stzh-header__main {
@@ -908,14 +912,16 @@
   display: block;
 }
 .stzh-header__menu-item, .stzh-header__menu-metanav-item {
-  font-family: var(--stzh-font-family-medium);
-  font-weight: var(--stzh-font-weight-medium);
-  font-style: var(--stzh-font-style-medium);
+  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-milli-font-size);
   line-height: var(--stzh-font-milli-text-line-height);
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  text-align: left;
   display: flex;
   align-items: center;
+  gap: var(--stzh-space-xsmall);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -924,19 +930,11 @@
   background-color: transparent;
   color: var(--stzh-color-primary70);
   padding-left: var(--stzh-space-xxxlarge);
-  transition-property: color, background-color;
-  transition-duration: var(--stzh-base-transition-animation-speed);
-}
-.stzh-header__menu-item, .stzh-header__menu-metanav-item {
-  font-family: var(--stzh-font-family-heavy);
-  font-weight: var(--stzh-font-weight-heavy);
-  font-style: var(--stzh-font-style-heavy);
-  gap: var(--stzh-space-xsmall);
   padding-top: var(--stzh-space-small);
   padding-bottom: var(--stzh-space-small);
   padding-right: var(--stzh-space-large);
-}
-.stzh-header__menu-item, .stzh-header__menu-metanav-item {
+  transition-property: color, background-color;
+  transition-duration: var(--stzh-base-transition-animation-speed);
   cursor: pointer;
 }
 .stzh-header__menu-item, .stzh-header__menu-metanav-item.is-title {
@@ -1156,11 +1154,11 @@
     transition-duration: var(--stzh-base-transition-animation-speed);
   }
 }
-.stzh-header--is-sticky .stzh-header__logobar {
+.stzh-header--is-sticky-transition .stzh-header__logobar {
   transition-property: opacity, visibility;
   transition-duration: var(--stzh-base-transition-animation-speed);
 }
-.stzh-header--is-sticky .stzh-header__inner, .stzh-header--is-sticky .stzh-header__main {
+.stzh-header--is-sticky-transition .stzh-header__inner, .stzh-header--is-sticky-transition .stzh-header__main {
   transition-property: transform, margin-top;
   transition-duration: var(--stzh-base-transition-animation-speed);
 }
@@ -1206,6 +1204,13 @@
   visibility: hidden;
   opacity: 0;
 }
+.stzh-header--sticky-always-full .stzh-header__inner, .stzh-header--sticky-always-full .stzh-header__main {
+  margin-top: 0px;
+}
+.stzh-header--sticky-always-full .stzh-header__logobar {
+  visibility: visible;
+  opacity: 1;
+}
 .stzh-header--is-flyout-open .stzh-header__flyout {
   visibility: visible;
 }