@siemens/element-theme 51.0.0-rc.6 → 51.0.0-rc.8

package/src/styles/bootstrap/_variables.scss

@@ -104,13 +104,15 @@ $container-max-widths: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns: 12 !default;
-$grid-gutter-width: spacers.$spacer !default;
+$grid-gutter-width: map.get(spacers.$spacers-inline, 6) !default;
 $grid-row-columns: 6 !default;
-$gutters: spacers.$spacers !default;
+$gutters-inline: spacers.$spacers-inline !default;
+$gutters-block: spacers.$spacers-block !default;
+$gutters: $gutters-block !default;
 
 // Container padding
 
-$container-padding-x: $grid-gutter-width * 0.5 !default;
+$container-padding-x: calc(#{$grid-gutter-width} * 0.5) !default;
 
 // Components
 //
@@ -155,8 +157,7 @@ $aspect-ratios: (
 //
 // Font, line-height, and color for body text, headings, and more.
 $font-family-sans-serif: var(--element-body-font-family);
-$font-family-monospace:
-  SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+$font-family-monospace: typography.$si-font-family-mono !default;
 
 $font-family-base: $font-family-sans-serif !default;
 $font-family-code: $font-family-monospace !default;
@@ -170,7 +171,7 @@ $font-weight-lighter: typography.$si-font-weight-lighter;
 $font-weight-light: typography.$si-font-weight-light;
 $font-weight-normal: typography.$si-font-weight-normal;
 $font-weight-medium: typography.$si-font-weight-medium;
-$font-weight-semibold: typography.$si-font-weight-semibold;
+$font-weight-semibold: typography.$si-font-weight-sbold;
 $font-weight-bold: typography.$si-font-weight-bold;
 $font-weight-bolder: typography.$si-font-weight-bolder;
 
@@ -185,7 +186,7 @@ $h2-font-size: typography.$si-font-size-h2 !default;
 $h3-font-size: typography.$si-font-size-h3 !default;
 $h4-font-size: typography.$si-font-size-h4 !default;
 $h5-font-size: typography.$si-font-size-h5 !default;
-$h6-font-size: $font-size-base !default;
+$h6-font-size: typography.$si-font-size-h6 !default;
 
 $font-sizes: (
   1: $h1-font-size,
@@ -196,10 +197,10 @@ $font-sizes: (
   6: $h6-font-size
 ) !default;
 
-$headings-margin-bottom: spacers.$spacer * 0.5 !default;
+$headings-margin-bottom: map.get(spacers.$spacers-block, 4) !default;
 $headings-font-family: null !default;
 $headings-font-style: null !default;
-$headings-font-weight: typography.$si-font-weight-semibold !default;
+$headings-font-weight: typography.$si-font-weight-sbold !default;
 $headings-line-height: 1.2 !default;
 $headings-color: system-tokens.$si-sys-text-primary !default;
 
@@ -213,14 +214,14 @@ $sub-sup-font-size: 0.75em !default;
 
 $initialism-font-size: $small-font-size !default;
 
-$text-muted: system-tokens.$si-sys-text-disabled !default;
+$text-disabled: system-tokens.$si-sys-text-disabled !default;
 
-$blockquote-margin-y: spacers.$spacer !default;
+$blockquote-margin-y: map.get(spacers.$spacers-block, 6) !default;
 $blockquote-font-size: typography.$si-font-size-body-lg !default;
 $blockquote-footer-color: system-tokens.$si-sys-text-secondary !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
-$hr-margin-y: spacers.$spacer !default;
+$hr-margin-y: map.get(spacers.$spacers-block, 6) !default;
 $hr-color: system-tokens.$si-sys-border-4 !default;
 $hr-height: $border-width !default;
 $hr-opacity: 1 !default;
@@ -244,10 +245,10 @@ $mark-color: system-tokens.$si-sys-text-on-caution;
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding-y: map.get(spacers.$spacers, 4) !default;
-$table-cell-padding-x: map.get(spacers.$spacers, 4) !default;
-$table-cell-padding-y-sm: map.get(spacers.$spacers, 2) !default;
-$table-cell-padding-x-sm: map.get(spacers.$spacers, 4) !default;
+$table-cell-padding-y: map.get(spacers.$spacers-block, 4) !default;
+$table-cell-padding-x: map.get(spacers.$spacers-inline, 4) !default;
+$table-cell-padding-y-sm: map.get(spacers.$spacers-block, 2) !default;
+$table-cell-padding-x-sm: map.get(spacers.$spacers-inline, 4) !default;
 
 $table-cell-vertical-align: top !default;
 
@@ -273,7 +274,7 @@ $table-striped-order: odd !default;
 
 $table-group-separator-color: currentColor !default;
 
-$table-caption-color: $text-muted !default;
+$table-caption-color: semantic-tokens.$element-text-secondary !default;
 
 $table-variants: (
   'success': system-tokens.$si-sys-background-success-subtle,
@@ -286,14 +287,14 @@ $table-variants: (
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
 
-$btn-padding-y: map.get(spacers.$spacers, 4);
-$btn-padding-x: map.get(spacers.$spacers, 4);
+$btn-padding-y: map.get(spacers.$spacers-block, 4);
+$btn-padding-x: map.get(spacers.$spacers-inline, 4);
 $btn-font-size: $font-size-base;
 $btn-line-height: $line-height-base;
 $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
 
-$btn-padding-y-sm: map.get(spacers.$spacers, 2);
-$btn-padding-y-lg: map.get(spacers.$spacers, 5);
+$btn-padding-y-sm: map.get(spacers.$spacers-block, 2);
+$btn-padding-y-lg: map.get(spacers.$spacers-block, 5);
 
 $btn-link-color: $link-color !default;
 $btn-link-hover-color: $link-hover-color !default;
@@ -313,7 +314,7 @@ $btn-transition:
 // Forms
 // According to figma it should be 2px + line-height: 16px
 // As overriding line-height is not planned by bootstrap, we use 4px + line-height of 14px
-$form-text-margin-top: map.get(spacers.$spacers, 2);
+$form-text-margin-top: map.get(spacers.$spacers-block, 2);
 $form-text-font-size: $small-font-size !default;
 $form-text-font-style: null !default;
 $form-text-font-weight: null !default;
@@ -325,14 +326,16 @@ $form-label-font-style: null !default;
 $form-label-font-weight: null !default;
 $form-label-color: system-tokens.$si-sys-text-secondary !default;
 
-$input-padding-y: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px border
-$input-padding-x: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px border
+$input-padding-y-full: map.get(spacers.$spacers-block, 4);
+$input-padding-y: calc(map.get(spacers.$spacers-block, 4) - 1px); // 8px including 1px border
+$input-padding-x-full: map.get(spacers.$spacers-inline, 4);
+$input-padding-x: calc(map.get(spacers.$spacers-inline, 4) - 1px); // 8px including 1px border
 $input-font-family: null !default;
 $input-font-size: $font-size-base;
 $input-font-weight: $font-weight-base;
 // Use an explicit rem value instead of a unitless ratio to prevent cross-browser
 // rounding differences (Safari rounds 14 × 1.1428... to 15px, Chrome to 16px). See #2031
-$input-line-height: typography.$si-line-height-body-rem !default;
+$input-line-height: calc(typography.$si-font-size-body * typography.$si-line-height-body);
 
 $input-bg: system-tokens.$si-sys-background-1 !default;
 $input-disabled-bg: system-tokens.$si-sys-background-1 !default;
@@ -356,10 +359,10 @@ $input-plaintext-color: $body-color !default;
 
 $input-height-border: $input-border-width * 2 !default;
 
-$input-height: functions.add(1lh, ($input-padding-y + $input-border-width) * 2) !default;
+$input-height: calc(1lh + ($input-padding-y-full * 2));
 
 // don't derive from $input-height as it generates a nested calc() expression
-$input-height-inner: functions.add($input-line-height, $input-padding-y * 2) !default;
+$input-height-inner: calc($input-line-height + ($input-padding-y-full - 1px) * 2) !default;
 // Wrap in parenthesis: `*` binds tighter than `-`, so without them only the border term gets multiplied.
 // DEPRECATED: Calculate it yourself using $input-height-inner
 $input-height-inner-half: calc((#{$input-height-inner}) * 0.5) !default;
@@ -419,7 +422,7 @@ $form-validation-states: (
 // Navs
 
 $nav-link-padding-y: 10px;
-$nav-link-padding-x: map.get(spacers.$spacers, 8);
+$nav-link-padding-x: map.get(spacers.$spacers-inline, 8);
 $nav-link-font-size: typography.$si-font-size-h4;
 $nav-link-font-weight: typography.$si-font-weight-h4;
 $nav-link-line-height: typography.$si-line-height-h4;
@@ -439,8 +442,8 @@ $nav-tabs-link-active-bg: transparent !default;
 $badge-font-size: typography.$si-font-size-body;
 $badge-font-weight: typography.$si-font-weight-body;
 $badge-color: system-tokens.$si-sys-text-inverse !default;
-$badge-padding-y: map.get(spacers.$spacers, 1);
-$badge-padding-x: map.get(spacers.$spacers, 4);
+$badge-padding-y: map.get(spacers.$spacers-block, 1);
+$badge-padding-x: map.get(spacers.$spacers-inline, 4);
 $badge-border-radius: 0.75rem;
 $badge-dot-size: 0.625rem;
 $badge-line-height: 1.25rem;
@@ -451,7 +454,7 @@ $badge-height: calc($badge-line-height + 2 * $badge-padding-y);
 // Dropdown menu container and contents.
 $dropdown-min-width: 10rem !default;
 $dropdown-padding-x: 0 !default;
-$dropdown-padding-y: map.get(spacers.$spacers, 4) !default;
+$dropdown-padding-y: map.get(spacers.$spacers-block, 4) !default;
 $dropdown-spacer: 0.125rem !default;
 $dropdown-font-size: $font-size-base !default;
 // this is to have room for icon and badges
@@ -464,25 +467,25 @@ $dropdown-divider-margin-y: 4px !default;
 $dropdown-box-shadow: elevation.$element-elevation-2 !default;
 $dropdown-link-color: system-tokens.$si-sys-text-primary !default;
 $dropdown-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
-$dropdown-item-padding-y: map.get(spacers.$spacers, 2);
-$dropdown-item-padding-x: map.get(spacers.$spacers, 5);
+$dropdown-item-padding-y: map.get(spacers.$spacers-block, 2);
+$dropdown-item-padding-x: map.get(spacers.$spacers-inline, 5);
 $dropdown-header-color: system-tokens.$si-sys-text-primary !default;
 
 // Cards
 
-$card-spacer-y: map.get(spacers.$spacers, 6) !default;
-$card-spacer-x: map.get(spacers.$spacers, 6) !default;
-$card-title-spacer-y: map.get(spacers.$spacers, 5) !default;
+$card-spacer-y: map.get(spacers.$spacers-block, 6) !default;
+$card-spacer-x: map.get(spacers.$spacers-inline, 6) !default;
+$card-title-spacer-y: map.get(spacers.$spacers-block, 5) !default;
 $card-border-radius: $border-radius !default;
 $card-inner-border-radius: $card-border-radius;
-$card-cap-padding-y: map.get(spacers.$spacers, 5) !default;
+$card-cap-padding-y: map.get(spacers.$spacers-block, 5) !default;
 $card-cap-padding-x: $card-spacer-x !default;
 $card-cap-bg: system-tokens.$si-sys-background-1 !default;
 $card-cap-color: null !default;
 $card-height: null !default;
 $card-color: null !default;
 $card-bg: system-tokens.$si-sys-background-1 !default;
-$card-img-overlay-padding: spacers.$spacer !default;
+$card-img-overlay-padding: map.get(spacers.$spacers-block, 6) map.get(spacers.$spacers-inline, 6) !default;
 $card-group-margin: $grid-gutter-width !default;
 
 // Tooltips
@@ -493,8 +496,8 @@ $tooltip-color: system-tokens.$si-sys-text-inverse !default;
 $tooltip-bg: system-tokens.$si-sys-background-inverse !default;
 $tooltip-border-radius: semantic-tokens.$element-radius-2 !default;
 $tooltip-opacity: 0.9 !default;
-$tooltip-padding-y: map.get(spacers.$spacers, 4) !default;
-$tooltip-padding-x: map.get(spacers.$spacers, 6) !default;
+$tooltip-padding-y: map.get(spacers.$spacers-block, 4) !default;
+$tooltip-padding-x: map.get(spacers.$spacers-inline, 6) !default;
 $tooltip-margin: 0 !default;
 
 $tooltip-arrow-width: 12px !default;
@@ -517,8 +520,8 @@ $popover-box-shadow: $box-shadow !default;
 
 $popover-header-bg: system-tokens.$si-sys-background-3 !default;
 $popover-header-color: system-tokens.$si-sys-text-accent;
-$popover-header-padding-y: map.get(spacers.$spacers, 5) !default;
-$popover-header-padding-x: map.get(spacers.$spacers, 5) !default;
+$popover-header-padding-y: map.get(spacers.$spacers-block, 5) !default;
+$popover-header-padding-x: map.get(spacers.$spacers-inline, 5) !default;
 
 $popover-body-color: system-tokens.$si-sys-text-primary !default;
 $popover-body-padding-y: $popover-header-padding-y !default;
@@ -533,13 +536,13 @@ $popover-arrow-outer-color: $popover-border-color !default;
 // Modals
 
 // Padding applied to the modal body
-$modal-inner-padding: map.get(spacers.$spacers, 8);
+$modal-inner-padding: map.get(spacers.$spacers-block, 8);
 
 // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
-$modal-footer-margin-between: map.get(spacers.$spacers, 6);
+$modal-footer-margin-between: map.get(spacers.$spacers-block, 6);
 
-$modal-dialog-margin: map.get(spacers.$spacers, 4);
-$modal-dialog-margin-y-sm-up: map.get(spacers.$spacers, 9);
+$modal-dialog-margin: map.get(spacers.$spacers-block, 4);
+$modal-dialog-margin-y-sm-up: map.get(spacers.$spacers-block, 9);
 
 $modal-title-line-height: typography.$si-line-height-h4 !default;
 
@@ -560,8 +563,8 @@ $modal-header-border-color: $border-color !default;
 $modal-footer-border-color: $modal-header-border-color !default;
 $modal-header-border-width: 0 !default;
 $modal-footer-border-width: 0 !default;
-$modal-header-padding-y: map.get(spacers.$spacers, 5);
-$modal-header-padding-x: map.get(spacers.$spacers, 8);
+$modal-header-padding-y: map.get(spacers.$spacers-block, 5);
+$modal-header-padding-x: map.get(spacers.$spacers-inline, 8);
 
 $modal-sm: 300px !default;
 $modal-md: 500px !default;
@@ -578,17 +581,19 @@ $modal-scale-transform: scale(1.02) !default;
 // Define alert colors, border radius, and padding.
 
 $alert-padding-y: 10px !default;
-$alert-padding-x: map.get(spacers.$spacers, 5) !default;
+$alert-padding-x: map.get(spacers.$spacers-inline, 5) !default;
 $alert-margin-bottom: 0 !default;
 $alert-border-radius: 0 !default;
 $alert-link-font-weight: $font-weight-bold !default;
 $alert-border-width: 0 !default;
-$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+$alert-dismissible-padding-r: calc(
+  $alert-padding-x * 3
+) !default; // 3x covers width of x plus default padding on either side
 
 // Progress bars
 
 $progress-height: 0.5rem !default;
-$progress-font-size: $font-size-base * 0.75 !default;
+$progress-font-size: calc(#{$font-size-base} * 0.75) !default;
 $progress-bg: system-tokens.$si-sys-border-4 !default;
 $progress-border-radius: $progress-height * 0.5 !default;
 $progress-box-shadow: none !default;
@@ -605,8 +610,8 @@ $list-group-border-color: $border-color !default;
 $list-group-border-width: $border-width !default;
 $list-group-border-radius: $border-radius !default;
 
-$list-group-item-padding-y: map.get(spacers.$spacers, 4) !default;
-$list-group-item-padding-x: map.get(spacers.$spacers, 6) !default; // 1.25rem !default;
+$list-group-item-padding-y: map.get(spacers.$spacers-block, 4) !default;
+$list-group-item-padding-x: map.get(spacers.$spacers-inline, 6) !default; // 1.25rem !default;
 
 $list-group-hover-bg: system-tokens.$si-sys-background-hover !default;
 $list-group-active-color: $body-color !default;
@@ -641,7 +646,7 @@ $figure-caption-color: system-tokens.$si-sys-text-secondary !default;
 $breadcrumb-font-size: null !default;
 $breadcrumb-padding-y: 0;
 $breadcrumb-padding-x: 0;
-$breadcrumb-item-padding-x: map.get(spacers.$spacers, 5);
+$breadcrumb-item-padding-x: map.get(spacers.$spacers-inline, 5);
 $breadcrumb-margin-bottom: 0;
 $breadcrumb-bg: inherit !default;
 $breadcrumb-divider-color: system-tokens.$si-sys-text-secondary !default;
@@ -656,8 +661,8 @@ $code-font-size: typography.$si-font-size-body !default;
 $code-line-height: typography.$si-line-height-body !default;
 $code-color: system-tokens.$si-sys-text-primary !default;
 $code-background: system-tokens.$si-sys-background-selected !default;
-$code-padding-y: map.get(spacers.$spacers, 1) !default;
-$code-padding-x: map.get(spacers.$spacers, 2) !default;
+$code-padding-y: map.get(spacers.$spacers-block, 1) !default;
+$code-padding-x: map.get(spacers.$spacers-inline, 2) !default;
 $code-border-radius: semantic-tokens.$element-radius-1 !default;
 
 $kbd-padding-y: 0.2rem !default;
@@ -668,8 +673,8 @@ $kbd-bg: system-tokens.$si-sys-background-3 !default;
 $kbd-font-size: $code-font-size !default;
 
 $pre-color: system-tokens.$si-sys-text-primary !default;
-$pre-padding-y: map.get(spacers.$spacers, 4) !default;
-$pre-padding-x: map.get(spacers.$spacers, 4) !default;
+$pre-padding-y: map.get(spacers.$spacers-block, 4) !default;
+$pre-padding-x: map.get(spacers.$spacers-inline, 4) !default;
 $pre-border-color: system-tokens.$si-sys-border-4 !default;
 $pre-border-width: $border-width !default;
 $pre-border-radius: semantic-tokens.$element-radius-1 !default;

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

@@ -9,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 {
@@ -24,8 +24,9 @@ $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));
+  margin-block-end: map.get(spacers.$spacers-block, 2);
 
   @extend %form-check-spacing;
 
@@ -36,6 +37,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 
 .form-check-inline {
   display: inline-block;
+  margin-block-end: 0;
   margin-inline-end: variables.$form-check-inline-margin-end;
   @extend %form-check-spacing;
 }
@@ -107,11 +109,11 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   &:indeterminate {
     &::after {
       mask-image: none;
-      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;
+      inset-inline-start: calc($form-check-size * 0.125);
+      inset-block-start: calc($form-check-size * 0.375);
     }
   }
 }

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

@@ -1,6 +1,7 @@
 @use '../../variables/focus';
 @use '../../variables/system-tokens';
 @use '../../variables/spacers';
+@use '../../variables/sizing';
 @use '../../variables/utilities';
 @use '../../variables/si-vars';
 @use '../variables';
@@ -16,7 +17,7 @@
   // + 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%;
@@ -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,7 +63,9 @@
   // 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 {
@@ -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,16 @@ 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%;
+    right calc(map.get(spacers.$spacers-block, 2) - variables.$input-border-width) top 50%;
   background-size: si-vars.$si-icon-font-size, variables.$form-feedback-icon-size;
 
   @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 & {
@@ -211,7 +217,7 @@ select:is(.form-control, .form-select)[multiple] {
   padding: 0;
 
   option {
-    padding: map.get(spacers.$spacers, 4);
+    padding: map.get(spacers.$spacers-block, 4) map.get(spacers.$spacers-inline, 4);
   }
 
   option:checked,

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

@@ -16,8 +16,8 @@
     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;
   }

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

@@ -1,4 +1,40 @@
+@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;

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

@@ -63,8 +63,8 @@
   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);
+  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

@@ -10,8 +10,8 @@
   font-size: typography.$si-font-size-caption;
   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

@@ -6,18 +6,19 @@ $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, 6);
+    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 + variables.$input-border-width;
+      padding-block: variables.$input-padding-y-full;
       line-height: variables.$input-line-height;
 
       &:empty {
@@ -36,16 +37,17 @@ $form-col-layout-label-width: 16ch !default;
 
     .form-check-input {
       margin-inline-start: 0;
-      margin-inline-end: map.get(spacers.$spacers, 4);
+      margin-inline-end: map.get(spacers.$spacers-inline, 4);
     }
   }
 
-  si-form-fieldset.si-form-input {
+  .si-form-fieldset {
     align-items: start;
 
     > .form-label {
       align-self: start;
-      padding-block: map.get(spacers.$spacers, 1) 0 !important; // stylelint-disable-line declaration-no-important
+      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
     }
   }
 }

package/src/styles/bootstrap/mixins/_grid.scss

@@ -133,15 +133,15 @@
       // Gutters
       //
       // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
-      @each $key, $value in variables.$gutters {
+      @each $key, $block-value in variables.$gutters-block {
         .g#{$infix}-#{$key},
         .gx#{$infix}-#{$key} {
-          --#{variables.$variable-prefix}gutter-x: #{$value};
+          --#{variables.$variable-prefix}gutter-x: #{map.get(variables.$gutters-inline, $key)};
         }
 
         .g#{$infix}-#{$key},
         .gy#{$infix}-#{$key} {
-          --#{variables.$variable-prefix}gutter-y: #{$value};
+          --#{variables.$variable-prefix}gutter-y: #{$block-value};
         }
       }
     }