@siemens/element-theme 51.0.0-rc.1 → 51.0.0-rc.10

package/src/styles/bootstrap/forms/_form-check.scss

@@ -1,4 +1,5 @@
 @use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 @use '../../variables/spacers';
 @use '../functions';
 @use '../variables';
@@ -8,13 +9,13 @@
 // there's too many differences between what BS5 does and what the design system expects
 @use 'sass:map';
 
-$form-check-size: 1rem;
-$form-radio-size: 1rem;
-$form-radio-inner-size: 0.375rem;
+$form-check-size: max(1rem, 16px); // FIXME: ref value
+$form-radio-size: max(1rem, 16px); // FIXME: ref value
+$form-radio-inner-size: max(0.375rem, 6px); // FIXME: ref value
 $form-radio-offset: calc((#{$form-radio-size} - #{$form-radio-inner-size}) * 0.5 - 1px);
-$form-check-padding-x: map.get(spacers.$spacers, 2);
+$form-check-padding-x: map.get(spacers.$spacers-inline, 2);
 
-$form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
+$form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline, 4));
 
 %form-check-spacing {
   .form-check-input {
@@ -23,8 +24,8 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 }
 
 .form-check {
-  padding-block: map.get(spacers.$spacers, 1);
-  padding-inline-start: calc($form-check-size + map.get(spacers.$spacers, 4));
+  padding-block: map.get(spacers.$spacers-block, 1);
+  padding-inline-start: calc($form-check-size + map.get(spacers.$spacers-inline, 4));
 
   @extend %form-check-spacing;
 
@@ -42,24 +43,22 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 %form-check-base {
   position: relative;
   appearance: none;
-  background-color: semantic-tokens.$element-base-1;
-  border: 1px solid semantic-tokens.$element-ui-1;
+  background-color: system-tokens.$si-sys-background-1;
+  border: 1px solid system-tokens.$si-sys-border-2;
   flex-shrink: 0;
   float: inline-start;
 
   &:is(:hover, .hover) {
-    border-color: semantic-tokens.$element-ui-1;
-    background: semantic-tokens.$element-base-1-hover;
+    background: system-tokens.$si-sys-background-hover;
   }
 
   &:is(:active, .active) {
-    border-color: semantic-tokens.$element-action-primary-active;
-    background: semantic-tokens.$element-action-primary-active;
+    background: system-tokens.$si-sys-background-active;
   }
 
   &:is([disabled], .disabled) {
-    border-color: semantic-tokens.$element-ui-3;
-    background-color: semantic-tokens.$element-ui-5;
+    border-color: system-tokens.$si-sys-text-disabled;
+    background-color: transparent;
   }
 }
 
@@ -80,59 +79,39 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
     opacity: 0;
   }
 
-  &:is(:checked, .checked) {
-    background-color: semantic-tokens.$element-action-primary;
-    border-color: semantic-tokens.$element-action-primary;
+  &:is(:checked, .checked, :indeterminate) {
+    background-color: system-tokens.$si-sys-background-accent;
+    border-color: transparent;
 
     &:hover {
-      background-color: semantic-tokens.$element-action-primary-hover;
-      border-color: semantic-tokens.$element-action-primary-hover;
+      background-color: system-tokens.$si-sys-background-accent-hover;
+      border-color: transparent;
     }
 
     &:active {
-      background-color: semantic-tokens.$element-action-primary-active;
-      border-color: semantic-tokens.$element-action-primary-active;
+      background-color: system-tokens.$si-sys-background-accent-active;
+      border-color: transparent;
     }
 
     &::after {
-      background-color: semantic-tokens.$element-text-inverse;
+      background-color: system-tokens.$si-sys-text-on-accent;
       opacity: 1;
     }
 
     &[disabled] {
-      background-color: semantic-tokens.$element-ui-3;
-      border-color: semantic-tokens.$element-ui-3;
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-text-disabled;
     }
   }
 
   &:indeterminate {
-    background-color: semantic-tokens.$element-base-1;
-    border-color: semantic-tokens.$element-action-primary;
-
     &::after {
       mask-image: none;
-      background-color: semantic-tokens.$element-action-primary;
-      inline-size: 0.625rem;
-      block-size: 0.125rem;
+      inline-size: calc($form-check-size * 0.625);
+      block-size: calc($form-check-size * 0.125);
       opacity: 1;
-      inset-inline-start: 0.125rem;
-      inset-block-start: 0.375rem;
-    }
-
-    &:hover {
-      border-color: semantic-tokens.$element-action-primary-hover;
-
-      &::after {
-        background-color: semantic-tokens.$element-action-primary-hover;
-      }
-    }
-
-    &:disabled {
-      border-color: semantic-tokens.$element-ui-3;
-
-      &::after {
-        background-color: semantic-tokens.$element-ui-3;
-      }
+      inset-inline-start: calc($form-check-size * 0.125);
+      inset-block-start: calc($form-check-size * 0.375);
     }
   }
 }
@@ -155,36 +134,27 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   }
 
   &:checked {
-    border-color: semantic-tokens.$element-action-primary;
-    background-color: semantic-tokens.$element-action-primary;
+    border-color: transparent;
+    background-color: system-tokens.$si-sys-background-accent;
 
     &::after {
-      background-color: semantic-tokens.$element-action-primary-text;
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-text-on-accent;
     }
 
     &:hover {
-      background-color: semantic-tokens.$element-action-primary-hover;
-      border-color: semantic-tokens.$element-action-primary-hover;
-
-      &::after {
-        background-color: semantic-tokens.$element-action-primary-text;
-      }
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-background-accent-hover;
     }
 
     &:active {
-      border-color: semantic-tokens.$element-action-primary-active;
-
-      &::after {
-        background-color: semantic-tokens.$element-action-primary-text;
-      }
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-border-accent-active;
     }
 
     &[disabled] {
-      border-color: semantic-tokens.$element-ui-3;
-
-      &::after {
-        background-color: semantic-tokens.$element-ui-3;
-      }
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-text-disabled;
     }
   }
 }
@@ -193,7 +163,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   display: inline-block;
   position: relative;
   padding-inline-end: $form-check-padding-x;
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
 }
 
 .form-check-input {
@@ -204,7 +174,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   }
 
   &[disabled] ~ .form-check-label {
-    color: semantic-tokens.$element-text-disabled;
+    color: system-tokens.$si-sys-text-disabled;
   }
 
   &:is([type='checkbox'], .si-form-checkbox) {
@@ -239,7 +209,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
     + .btn {
       pointer-events: none;
       filter: none;
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
   }
 }
@@ -271,7 +241,7 @@ formly-field-multicheckbox {
     }
 
     &[disabled] ~ label {
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
   }
 }
@@ -286,7 +256,7 @@ formly-field-radio {
     }
 
     &[disabled] ~ label {
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
   }
 }

package/src/styles/bootstrap/forms/_form-control.scss

@@ -1,6 +1,7 @@
 @use '../../variables/focus';
-@use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 @use '../../variables/spacers';
+@use '../../variables/sizing';
 @use '../../variables/utilities';
 @use '../../variables/si-vars';
 @use '../variables';
@@ -8,15 +9,15 @@
 @use 'sass:map';
 
 :is(.form-control, .form-select) {
-  --border-color: #{semantic-tokens.$element-ui-2};
-  --si-textarea-mask: #{semantic-tokens.$element-base-1};
+  --border-color: #{system-tokens.$si-sys-border-2};
+  --si-textarea-mask: #{system-tokens.$si-sys-background-1};
   // Formula:
   // (1.25rem / 0px) (feedback icon size)
   // + (action-size / 0px) (action-offset includes a padding)
   // + 3px (min padding between input and first action or validation icon)
   --si-input-padding-inline-end: calc(
     var(--si-feedback-icon-size, 0px) + var(--si-action-icon-offset, 0px) +
-      #{map.get(spacers.$spacers, 2) - variables.$input-border-width}
+      #{map.get(spacers.$spacers-block, 2)} - #{variables.$input-border-width}
   );
   display: block;
   inline-size: 100%;
@@ -27,8 +28,8 @@
   font-size: variables.$input-font-size;
   font-weight: variables.$input-font-weight;
   line-height: variables.$input-line-height;
-  color: semantic-tokens.$element-text-primary;
-  background-color: semantic-tokens.$element-base-1;
+  color: system-tokens.$si-sys-text-primary;
+  background-color: system-tokens.$si-sys-background-1;
   background-clip: padding-box;
   border: variables.$input-border-width solid var(--border-color);
   border-radius: variables.$input-border-radius;
@@ -40,14 +41,15 @@
     calc((#{variables.$input-height-inner} - #{variables.$form-feedback-icon-size}) * 0.5);
   background-position-x: right
     calc(
-      #{map.get(spacers.$spacers, 2) - variables.$input-border-width} +
+      map.get(spacers.$spacers-block, 2) - variables.$input-border-width +
         var(--si-action-icon-offset, 0px)
     );
 
   @include utilities.rtl {
     background-position-x: left
       calc(
-        map.get(spacers.$spacers, 1) + var(--si-action-icon-offset, variables.$input-border-width)
+        map.get(spacers.$spacers-block, 1) +
+          var(--si-action-icon-offset, variables.$input-border-width)
       );
   }
 
@@ -61,36 +63,38 @@
   // form-control must not add extra `padding-inline-end` for it.
   &:has(.form-control-actions) {
     background-image: none;
-    --si-input-padding-inline-end: #{map.get(spacers.$spacers, 2) - variables.$input-border-width};
+    --si-input-padding-inline-end: calc(
+      #{map.get(spacers.$spacers-block, 2)} - #{variables.$input-border-width}
+    );
   }
 
   &:autofill {
-    background: semantic-tokens.$element-base-information;
+    background: system-tokens.$si-sys-background-information-subtle;
   }
 
   &:is(:focus, :hover, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-    --border-color: #{semantic-tokens.$element-ui-1};
-    --si-textarea-mask: #{semantic-tokens.$element-base-input-experimental};
-    background-color: semantic-tokens.$element-base-input-experimental;
+    --border-color: #{system-tokens.$si-sys-border-1};
+    --si-textarea-mask: #{system-tokens.$si-sys-background-4};
+    background-color: system-tokens.$si-sys-background-4;
   }
 
   &:is(.readonly, [readonly]) {
     &,
     &:is(:hover, :focus, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-      --border-color: #{semantic-tokens.$element-ui-4};
+      --border-color: #{system-tokens.$si-sys-border-4};
       --si-textarea-mask: transparent;
       background-color: transparent;
-      color: semantic-tokens.$element-text-primary;
+      color: system-tokens.$si-sys-text-primary;
     }
   }
 
   &:is(.disabled, :disabled) {
     &,
     &:is(:hover, :focus, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-      --border-color: #{semantic-tokens.$element-ui-4};
+      --border-color: #{system-tokens.$si-sys-border-4};
       --si-textarea-mask: transparent;
       background-color: transparent;
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
 
     &::placeholder {
@@ -117,10 +121,11 @@
 .form-control:not(textarea):not(select[multiple]) {
   // force height to fix line-height issue in firefox
   block-size: variables.$input-height;
+  min-block-size: map.get(sizing.$sizing, 80);
 }
 
 .addon-second-icon {
-  --input-addon-inset-end: #{map.get(spacers.$spacers, 9)};
+  --input-addon-inset-end: #{map.get(spacers.$spacers-block, 9)};
 }
 
 // Wrapper for trailing actions (buttons, icons, unit labels) inside
@@ -135,7 +140,7 @@
   display: inline-flex;
   align-items: center;
   block-size: variables.$input-height-inner;
-  padding-inline-start: map.get(spacers.$spacers, 1);
+  padding-inline-start: map.get(spacers.$spacers-inline, 1);
 }
 
 .form-control .form-control-actions::before {
@@ -143,13 +148,13 @@
   margin-block: auto;
   inline-size: variables.$form-feedback-icon-size;
   block-size: variables.$form-feedback-icon-size;
-  padding-inline-end: map.get(spacers.$spacers, 1);
+  padding-inline-end: map.get(spacers.$spacers-inline, 1);
   content: var(--si-feedback-icon, none);
 }
 
 .form-control + .form-control-actions {
   position: absolute;
-  inset-inline-end: map.get(spacers.$spacers, 2);
+  inset-inline-end: map.get(spacers.$spacers-inline, 2);
   inset-block-start: variables.$input-border-width;
   z-index: 2;
 }
@@ -187,15 +192,15 @@ select:is(.form-control, .form-select):not([multiple]) {
     // + spacer-1(between arrow and validation)
     right
       calc(
-        #{map.get(spacers.$spacers, 2) - variables.$input-border-width +
-          map.get(spacers.$spacers, 1)} + #{si-vars.$si-icon-font-size}
+        map.get(spacers.$spacers-block, 2) - variables.$input-border-width +
+          map.get(spacers.$spacers-block, 1) + si-vars.$si-icon-font-size
       )
       center,
-    right map.get(spacers.$spacers, 2) - variables.$input-border-width top 50%;
-  background-size: si-vars.$si-icon-font-size, variables.$form-feedback-icon-size;
+    right calc(map.get(spacers.$spacers-block, 2) - variables.$input-border-width) top 50%;
 
   @include utilities.rtl {
-    background-position: left map.get(spacers.$spacers, 2) - variables.$input-border-width top 50%;
+    background-position: left
+      calc(map.get(spacers.$spacers-inline, 2) - variables.$input-border-width) top 50%;
   }
 
   .app--dark & {
@@ -209,14 +214,15 @@ select:is(.form-control, .form-select)[multiple] {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   padding: 0;
+  block-size: unset;
 
   option {
-    padding: map.get(spacers.$spacers, 4);
+    padding: map.get(spacers.$spacers-block, 4) map.get(spacers.$spacers-inline, 4);
   }
 
   option:checked,
   &:not(:disabled) option:not(:disabled):hover {
-    background: semantic-tokens.$element-base-0;
-    color: semantic-tokens.$element-text-active;
+    background: system-tokens.$si-sys-background-0;
+    color: system-tokens.$si-sys-text-accent;
   }
 }

package/src/styles/bootstrap/forms/_form-file.scss

@@ -1,4 +1,4 @@
-@use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 @use '../variables';
 
 .form-control {
@@ -11,24 +11,24 @@
   }
 
   &::file-selector-button {
-    color: semantic-tokens.$element-action-secondary-text;
-    background: semantic-tokens.$element-action-secondary;
+    color: system-tokens.$si-sys-text-on-accent-secondary;
+    background: system-tokens.$si-sys-background-accent-secondary;
     border-color: inherit;
     border-block-width: 0;
     border-inline-width: 0 1px;
-    margin-block: -(variables.$input-padding-y);
-    margin-inline: -(variables.$input-padding-x) variables.$input-padding-x;
+    margin-block: calc(variables.$input-padding-y * -1);
+    margin-inline: calc(variables.$input-padding-x * -1) variables.$input-padding-x;
     block-size: inherit;
     padding-inline: variables.$btn-padding-x;
   }
 
   &:hover::file-selector-button {
-    color: semantic-tokens.$element-action-secondary-text-hover;
-    background: semantic-tokens.$element-action-secondary-hover;
+    color: system-tokens.$si-sys-text-on-accent-secondary-hover;
+    background: system-tokens.$si-sys-background-accent-secondary-hover;
   }
 
   &:active::file-selector-button {
-    color: semantic-tokens.$element-action-primary-active;
-    background: semantic-tokens.$element-action-secondary-active;
+    color: system-tokens.$si-sys-text-on-accent-secondary-active;
+    background: system-tokens.$si-sys-background-accent-secondary-active;
   }
 }

package/src/styles/bootstrap/forms/_form-label.scss

@@ -14,7 +14,7 @@
 
 .form-label {
   display: inline-block;
-  padding-block: map.get(spacers.$spacers, 2);
+  padding-block: map.get(spacers.$spacers-block, 2);
 
   .text-end & {
     padding-inline-end: variables.$input-padding-x;

package/src/styles/bootstrap/forms/_form-layout.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use '../mixins/form-layout';
+@use '../../variables/spacers';
+
+.si-form-fieldset,
+.si-form-input {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: map.get(spacers.$spacers-block, 6);
+
+  .form-item-content {
+    flex-grow: 1;
+  }
+}
+
+.si-form-fieldset {
+  .form-label {
+    margin-block-end: map.get(spacers.$spacers-block, 2);
+  }
+
+  .form-check:not(.form-check-inline) {
+    display: block;
+  }
+}
+
+:is(.si-form-fieldset, .si-form-input) .form-label:empty {
+  display: none;
+}
+
+// Maintain compatibility with the old si-form-item style which allows wrapping multiple checkboxes.
+:is(.si-form-fieldset, .si-form-input).form-check:not(.form-check-inline) {
+  display: block;
+}
+
+:is(.si-form-fieldset, .si-form-input).form-check:has(.form-check) {
+  padding-block: 0;
+}
+
+.form-col-layout {
+  @include form-layout.form-col-layout;
+}
+
+/* Default responsive layout. */
+.responsive-form-col-layout {
+  @include form-layout.responsive-form-col-layout(48ch);
+}

package/src/styles/bootstrap/forms/_form-range.scss

@@ -1,8 +1,7 @@
-@use '../../variables/elevation';
 @use '../../variables/focus';
-@use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 
-$track-color: semantic-tokens.$element-ui-4 !default;
+$track-color: system-tokens.$si-sys-border-4 !default;
 $track-height: 4px !default;
 $thumb-size: 24px !default;
 
@@ -15,36 +14,36 @@ $thumb-size: 24px !default;
 
 @mixin range-thumb {
   box-shadow: var(--thumb-shadow);
-  border: 1px solid semantic-tokens.$element-action-secondary-border;
+  border: 1px solid system-tokens.$si-sys-border-accent;
   block-size: $thumb-size;
   inline-size: $thumb-size;
   border-radius: 50%;
-  background: semantic-tokens.$element-base-1;
+  background: system-tokens.$si-sys-background-1;
   cursor: pointer;
 
   &:hover {
-    border-color: semantic-tokens.$element-action-secondary-border-hover;
+    border-color: system-tokens.$si-sys-border-accent-hover;
     background: radial-gradient(
       circle,
-      semantic-tokens.$element-action-secondary-text-hover 0%,
-      semantic-tokens.$element-action-secondary-text-hover 35%,
-      semantic-tokens.$element-action-secondary-hover 36%
+      system-tokens.$si-sys-text-accent-hover 0%,
+      system-tokens.$si-sys-text-accent-hover 35%,
+      system-tokens.$si-sys-background-accent-secondary-hover 36%
     );
   }
 
   &:active {
-    border-color: semantic-tokens.$element-action-primary-active;
+    border-color: system-tokens.$si-sys-border-accent-active;
     background: radial-gradient(
       circle,
-      semantic-tokens.$element-action-primary-active 0%,
-      semantic-tokens.$element-action-primary-active 35%,
-      semantic-tokens.$element-action-secondary-active 36%
+      system-tokens.$si-sys-background-accent-active 0%,
+      system-tokens.$si-sys-background-accent-active 35%,
+      system-tokens.$si-sys-background-accent-secondary-active 36%
     );
   }
 }
 
 .form-range {
-  --thumb-shadow: #{elevation.$element-elevation-1};
+  --thumb-shadow: #{system-tokens.$si-sys-effects-shadow-2};
   -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
   background: transparent;
   inline-size: 100%;

package/src/styles/bootstrap/forms/_validation.scss

@@ -43,9 +43,6 @@
 @mixin form-validation-styles($state, $color, $icon) {
   @if ($state and $icon) {
     --si-feedback-icon: #{$icon};
-    // TODO: remove with v50
-    // DEPRECATED: use --si-feedback-icon-size instead
-    --si-feedback-icon-offset: 1.5rem;
     --si-feedback-icon-size: #{si-vars.$si-icon-font-size};
   }
 
@@ -65,9 +62,9 @@
   font-size: variables.$form-feedback-font-size;
   display: none;
   inline-size: 100%;
-  line-height: typography.$si-line-height-caption;
-  margin-block: map.get(spacers.$spacers, 1);
-  margin-inline: map.get(spacers.$spacers, 1);
+  line-height: typography.$si-line-height-body-sm;
+  margin-block: map.get(spacers.$spacers-block, 1);
+  margin-inline: map.get(spacers.$spacers-inline, 1);
 }
 
 @mixin form-validation-state-enh($state, $color, $icon, $text-color) {

package/src/styles/bootstrap/mixins/_badge-text.scss

@@ -7,11 +7,11 @@
 @mixin badge-text {
   min-inline-size: 0.875rem;
   border-radius: 0.4375rem;
-  font-size: typography.$si-font-size-caption;
+  font-size: typography.$si-font-size-body-sm;
   line-height: 0.875rem;
   padding-block: 0;
-  padding-inline: map.get(spacers.$spacers, 2);
+  padding-inline: map.get(spacers.$spacers-inline, 2);
   font-family: variables.$font-family-sans-serif;
-  font-weight: typography.$si-font-weight-semibold;
+  font-weight: typography.$si-font-weight-sbold;
   text-align: center;
 }

package/src/styles/bootstrap/mixins/_form-layout.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+@use '../../variables/spacers';
+@use '../variables';
+
+$form-col-layout-label-width: 16ch !default;
+
+/* Turns every inner form-field into a column layout */
+@mixin form-col-layout {
+  .si-form-fieldset,
+  .si-form-input:not(.form-check),
+  .si-form-input.form-check:not(.form-check-inline) {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    column-gap: map.get(spacers.$spacers-inline, 6);
+
+    > .form-label {
+      flex: 0 0 var(--si-form-label-width, #{$form-col-layout-label-width});
+      max-inline-size: var(--si-form-label-width, #{$form-col-layout-label-width});
+      align-self: start;
+      padding-block: variables.$input-padding-y-full;
+      line-height: variables.$input-line-height;
+
+      &:empty {
+        display: block;
+      }
+    }
+
+    > :not(.form-label) {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+  }
+
+  .si-form-input.form-check:not(.form-check-inline) {
+    padding-inline-start: 0;
+
+    .form-check-input {
+      margin-inline-start: 0;
+      margin-inline-end: map.get(spacers.$spacers-inline, 4);
+    }
+  }
+
+  .si-form-fieldset {
+    align-items: start;
+
+    > .form-label {
+      align-self: start;
+      padding-block: map.get(spacers.$spacers-block, 1) 0 !important; // stylelint-disable-line declaration-no-important
+      margin-block-end: 0 !important; // stylelint-disable-line declaration-no-important
+    }
+  }
+}
+
+/* Turns every inner form-field into a column layout above a min-width. */
+@mixin responsive-form-col-layout($min-width) {
+  container-type: inline-size;
+
+  @container (min-width: #{$min-width}) {
+    @include form-col-layout;
+  }
+}