@genexus/mercury 0.4.5 → 0.4.7

package/dist/mercury.scss

@@ -63,6 +63,20 @@
   gap: $gap;
 }
 
+// - - - - - - - - - - - - - - - - - - - -
+//    Ellipsis
+// - - - - - - - - - - - - - - - - - - - -
+
+@mixin ellipsis() {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+%ellipsis {
+  @include ellipsis();
+}
+
 /// Replace `$search` with `$replace` in `$string`
 /// @param {String} $string - Initial string
 /// @param {String} $search - Substring to replace
@@ -216,6 +230,20 @@
   gap: $gap;
 }
 
+// - - - - - - - - - - - - - - - - - - - -
+//    Ellipsis
+// - - - - - - - - - - - - - - - - - - - -
+
+@mixin ellipsis() {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+%ellipsis {
+  @include ellipsis();
+}
+
 
 /*----------------------
 Focus
@@ -272,6 +300,7 @@ Control
 @mixin control-colors-enabled() {
   background-color: var(--control__bg-color);
   color: var(--control__color);
+  --ch-placeholder-color: var(--control-placeholder__color);
   // enabled border color is defined in control-border()
 }
 @mixin control-colors-hover() {
@@ -281,6 +310,7 @@ Control
   --control__bg-color: var(--control__background-color--disabled);
   --control__border-color: var(--control__border-color--disabled);
   --control__color: var(--control__color--disabled);
+  --ch-placeholder-color: var(--control-placeholder__color--disabled);
 }
 @mixin control-colors-error() {
   --control__border-color: var(--control__border-color--error);
@@ -292,6 +322,13 @@ Control
   border-color: var(--control__border-color);
   border-radius: var(--control__border-radius);
 }
+@mixin control-remove-border() {
+  // This resets the border applied
+  // (for controls inside the property grid)
+  --control__border-width: 0;
+  --control__border-color: transparent;
+  --control__border-radius: 0;
+}
 // Font
 @mixin control-font-weight-regular() {
   font-weight: var(--control__font-weight--regular);
@@ -560,6 +597,74 @@ Dialog Footer
   }
 }
 
+/*----------------------
+Body Spacing
+----------------------*/
+
+// This custom properties define the block and inline spacing of containers.
+// i.e.: dialog, layout, etc..
+
+%spacing-body {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+
+%spacing-body-block {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+}
+%spacing-body-block-start {
+  padding-block-start: var(--spacing-body-block-start);
+}
+%spacing-body-block-end {
+  padding-block-end: var(--spacing-body-block-end);
+}
+
+%spacing-body-inline {
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+%spacing-body-inline-start {
+  padding-inline-start: var(--spacing-body-inline-start);
+}
+%spacing-body-inline-end {
+  padding-inline-end: var(--spacing-body-inline-end);
+}
+
+@mixin spacing-body(
+  $body-selector: ".spacing-body",
+  $body-block-selector: ".spacing-body-block",
+  $body-block-start-selector: ".spacing-body-block-start",
+  $body-block-end-selector: ".spacing-body-block-end",
+  $body-inline-selector: ".spacing-body-inline",
+  $body-inline-start-selector: ".spacing-body-inline-start",
+  $body-inline-end-selector: ".spacing-body-inline-end"
+) {
+  #{$body-selector} {
+    @extend %spacing-body;
+  }
+  // block
+  #{$body-block-selector} {
+    @extend %spacing-body-block;
+  }
+  #{$body-block-start-selector} {
+    @extend %spacing-body-block-start;
+  }
+  #{$body-block-end-selector} {
+    @extend %spacing-body-block-end;
+  }
+  // inline
+  #{$body-inline-selector} {
+    @extend %spacing-body-inline;
+  }
+  #{$body-inline-start-selector} {
+    @extend %spacing-body-inline-start;
+  }
+  #{$body-inline-end-selector} {
+    @extend %spacing-body-inline-end;
+  }
+}
+
 
 // Resets
 @mixin typography-reset() {
@@ -679,12 +784,13 @@ Dialog Footer
   --mer-color__neutral-gray--700: #c0ccd9;
   --mer-color__neutral-gray--800: #d2ddeb;
   --mer-color__neutral-gray--900: #e1ecf9;
-  // 1000 to 1400 do not exist anymore in figma (check with designer)
-  --mer-color__neutral-gray--1000: #;
-  --mer-color__neutral-gray--1100: #;
-  --mer-color__neutral-gray--1200: #;
-  --mer-color__neutral-gray--1300: #;
-  --mer-color__neutral-gray--1400: #;
+  // 1000 to 1400 do not exist anymore in figma but can not be removed yet
+  // because gemini is dependent on this tokens (check with designer)
+  --mer-color__neutral-gray--1000: #f8f8f8;
+  --mer-color__neutral-gray--1100: #f1f1f1;
+  --mer-color__neutral-gray--1200: #e4e4e4;
+  --mer-color__neutral-gray--1300: #dedede;
+  --mer-color__neutral-gray--1400: #ffffff;
 
   // tinted
   --mer-color__tinted-yellow--5: #ffc96b0d;
@@ -739,33 +845,44 @@ Dialog Footer
   --mer-color__neutral-gray--700: #242d3c;
   --mer-color__neutral-gray--800: #181f2a;
   --mer-color__neutral-gray--900: #11151c;
-  // 1000 to 1400 do not exist anymore in figma (check with designer)
-  --mer-color__neutral-gray--1000: #;
-  --mer-color__neutral-gray--1100: #;
-  --mer-color__neutral-gray--1200: #;
-  --mer-color__neutral-gray--1300: #;
-  --mer-color__neutral-gray--1400: #;
-
-  // tinted
-  --mer-color__tinted-yellow--5: #ffc96b0d;
-  --mer-color__tinted-yellow--60: #ffc96b99;
-  --mer-color__tinted-red--5: #fb7c840d;
-  --mer-color__tinted-red--60: #fb7c8499;
-  --mer-color__tinted-green--5: #3fa89b0d;
-  --mer-color__tinted-green--60: #3fa89b99;
-  --mer-color__tinted-blue--5: #5ba7ff0d;
-  --mer-color__tinted-blue--8: #5ba7ff14;
-  --mer-color__tinted-blue--10: #5ba7ff1a;
-  --mer-color__tinted-blue--20: #5ba7ff33;
-  --mer-color__tinted-blue--30: #5ba7ff4d;
-  --mer-color__tinted-blue--50: #5ba7ff80;
-  // tinted no opacity // WA
-  // --mer-color__tinted-blue--5: #1d2838;
-  // --mer-color__tinted-blue--8: #1f2c3f;
-  // --mer-color__tinted-blue--10: #1f2e43;
-  // --mer-color__tinted-blue--20: #293d5c;
-  // --mer-color__tinted-blue--30: #2e4e72;
-  // --mer-color__tinted-blue--50: #3c689c;
+  // 1000 to 1400 do not exist anymore in figma but can not be removed yet
+  // because gemini is dependent on this tokens (check with designer)
+  --mer-color__neutral-gray--1000: #1f2225;
+  --mer-color__neutral-gray--1100: #24272a;
+  --mer-color__neutral-gray--1200: #2d3032;
+  --mer-color__neutral-gray--1300: #3b3e40;
+  --mer-color__neutral-gray--1400: #2d3134;
+
+  // tinted (with opacity) this values had to be updated to the no opacity
+  // version (see below), because colors with opacity caused some issues when
+  // overlapping. Until this is not a definitive edition
+
+  // --mer-color__tinted-yellow--5: #ffc96b0d;
+  // --mer-color__tinted-yellow--60: #ffc96b99;
+  // --mer-color__tinted-red--5: #fb7c840d;
+  // --mer-color__tinted-red--60: #fb7c8499;
+  // --mer-color__tinted-green--5: #3fa89b0d;
+  // --mer-color__tinted-green--60: #3fa89b99;
+  // --mer-color__tinted-blue--5: #5ba7ff0d;
+  // --mer-color__tinted-blue--8: #5ba7ff14;
+  // --mer-color__tinted-blue--10: #5ba7ff1a;
+  // --mer-color__tinted-blue--20: #5ba7ff33;
+  // --mer-color__tinted-blue--30: #5ba7ff4d;
+  // --mer-color__tinted-blue--50: #5ba7ff80;
+
+  // tinted (no opacity) // tints with opacity were giving some issues
+  --mer-color__tinted-yellow--5: #282a2d;
+  --mer-color__tinted-yellow--60: #ad8a53;
+  --mer-color__tinted-red--5: #29252f;
+  --mer-color__tinted-red--60: #aa5962;
+  --mer-color__tinted-green--5: #1c2830;
+  --mer-color__tinted-green--60: #317571;
+  --mer-color__tinted-blue--5: #1d2838;
+  --mer-color__tinted-blue--8: #1f2c3f;
+  --mer-color__tinted-blue--10: #1f2e43;
+  --mer-color__tinted-blue--20: #293d5c;
+  --mer-color__tinted-blue--30: #2e4e72;
+  --mer-color__tinted-blue--50: #3c689c;
 
   // message
   --mer-color__message-green--100: #3fa89b;
@@ -965,9 +1082,9 @@ Dialog Footer
 
   // - - - - - - - Placeholder - - - - - - -
 
-  --control-placeholder__color: var(
-    --ch-placeholder-color,
-    var(--mer-text__neutral)
+  --control-placeholder__color: var(--ch-placeholder-color);
+  --control-placeholder__color--disabled: var(
+    --mer-form-input__color--disabled
   );
   --control-placeholder__font-style: italic;
 
@@ -1030,7 +1147,7 @@ Dialog Footer
   // field
   --field__row-gap: var(--mer-spacing--xs);
   --field__column-gap: var(--mer-spacing--md);
-  --field-inline-label__margin-block-start: var(--mer-spacing--2xs);
+  --field-inline-label__margin-block-start: 6px; // 6px is the proper value, but it does not exists on the mercury ds.
 }
 
 @mixin semantic-icon() {
@@ -1279,12 +1396,6 @@ Dialog Footer
 }
 
 
-// Tokens Other
-:root {
-  --ch-placeholder-color: var(--mer-text__neutral);
-}
-
-
 // Base classes
 @mixin button-common-styles() {
   display: inline-grid;
@@ -1350,6 +1461,20 @@ Dialog Footer
   gap: $gap;
 }
 
+// - - - - - - - - - - - - - - - - - - - -
+//    Ellipsis
+// - - - - - - - - - - - - - - - - - - - -
+
+@mixin ellipsis() {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+%ellipsis {
+  @include ellipsis();
+}
+
 
 /*----------------------
 Focus
@@ -1406,6 +1531,7 @@ Control
 @mixin control-colors-enabled() {
   background-color: var(--control__bg-color);
   color: var(--control__color);
+  --ch-placeholder-color: var(--control-placeholder__color);
   // enabled border color is defined in control-border()
 }
 @mixin control-colors-hover() {
@@ -1415,6 +1541,7 @@ Control
   --control__bg-color: var(--control__background-color--disabled);
   --control__border-color: var(--control__border-color--disabled);
   --control__color: var(--control__color--disabled);
+  --ch-placeholder-color: var(--control-placeholder__color--disabled);
 }
 @mixin control-colors-error() {
   --control__border-color: var(--control__border-color--error);
@@ -1426,6 +1553,13 @@ Control
   border-color: var(--control__border-color);
   border-radius: var(--control__border-radius);
 }
+@mixin control-remove-border() {
+  // This resets the border applied
+  // (for controls inside the property grid)
+  --control__border-width: 0;
+  --control__border-color: transparent;
+  --control__border-radius: 0;
+}
 // Font
 @mixin control-font-weight-regular() {
   font-weight: var(--control__font-weight--regular);
@@ -1694,6 +1828,74 @@ Dialog Footer
   }
 }
 
+/*----------------------
+Body Spacing
+----------------------*/
+
+// This custom properties define the block and inline spacing of containers.
+// i.e.: dialog, layout, etc..
+
+%spacing-body {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+
+%spacing-body-block {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+}
+%spacing-body-block-start {
+  padding-block-start: var(--spacing-body-block-start);
+}
+%spacing-body-block-end {
+  padding-block-end: var(--spacing-body-block-end);
+}
+
+%spacing-body-inline {
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+%spacing-body-inline-start {
+  padding-inline-start: var(--spacing-body-inline-start);
+}
+%spacing-body-inline-end {
+  padding-inline-end: var(--spacing-body-inline-end);
+}
+
+@mixin spacing-body(
+  $body-selector: ".spacing-body",
+  $body-block-selector: ".spacing-body-block",
+  $body-block-start-selector: ".spacing-body-block-start",
+  $body-block-end-selector: ".spacing-body-block-end",
+  $body-inline-selector: ".spacing-body-inline",
+  $body-inline-start-selector: ".spacing-body-inline-start",
+  $body-inline-end-selector: ".spacing-body-inline-end"
+) {
+  #{$body-selector} {
+    @extend %spacing-body;
+  }
+  // block
+  #{$body-block-selector} {
+    @extend %spacing-body-block;
+  }
+  #{$body-block-start-selector} {
+    @extend %spacing-body-block-start;
+  }
+  #{$body-block-end-selector} {
+    @extend %spacing-body-block-end;
+  }
+  // inline
+  #{$body-inline-selector} {
+    @extend %spacing-body-inline;
+  }
+  #{$body-inline-start-selector} {
+    @extend %spacing-body-inline-start;
+  }
+  #{$body-inline-end-selector} {
+    @extend %spacing-body-inline-end;
+  }
+}
+
 
 /// @group Label
 /// @param {String} $label-selector [".label"] -
@@ -1968,6 +2170,10 @@ Dialog Footer
   display: grid;
 
   &-group {
+    --spacing-body-block-start: var(--mer-spacing--lg);
+    --spacing-body-block-end: var(--mer-spacing--lg);
+    --spacing-body-inline-start: var(--mer-spacing--md);
+    --spacing-body-inline-end: var(--mer-spacing--md);
     display: grid;
     row-gap: var(--field-group__row-gap);
     column-gap: var(--field-group__column-gap);
@@ -2000,17 +2206,17 @@ Dialog Footer
 /// @param {String} $field-selector [".field"] -
 /// @param {String} $field-block-selector [".field-block"] -
 /// @param {String} $field-inline-selector [".field-inline"] -
-/// @param {String} $field-inline__label-selector [".field-inline > .label"] -
+/// @param {String} $field-inline__label-selector [".field-inline .label"] -
 /// @param {String} $field-group-cols-2-selector [".field-group-cols-2"] -
-/// @param {String} $field-group-cols-2__label-selector [".field-group-cols-2 > .label"] -
+/// @param {String} $field-group-cols-2__label-selector [".field-group-cols-2 .label"] -
 @mixin field(
   $field-group-selector: ".field-group",
   $field-selector: ".field",
   $field-block-selector: ".field-block",
   $field-inline-selector: ".field-inline",
-  $field-inline__label-selector: ".field-inline > .label",
+  $field-inline__label-selector: ".field-inline .label",
   $field-group-cols-2-selector: ".field-group-cols-2",
-  $field-group-cols-2__label-selector: ".field-group-cols-2 > .label"
+  $field-group-cols-2__label-selector: ".field-group-cols-2 .label"
 ) {
   #{$field-group-selector} {
     @extend %field-group;
@@ -2041,89 +2247,6 @@ Dialog Footer
   }
 }
 
-%form-input {
-  @include control-colors-enabled();
-  @include control-border();
-  @include control-font-weight-regular();
-  @include control-height-regular();
-  @include control-padding-inline();
-
-  &--focus {
-    @include focus-border();
-  }
-
-  &--hover {
-    @include control-colors-hover();
-  }
-
-  &--disabled {
-    @include control-colors-disabled();
-  }
-
-  &--disabled-placeholder {
-    --mer-form-input__color--placeholder: var(
-      --mer-form-input__color--disabled
-    );
-  }
-
-  &--error {
-    border-color: var(--mer-form-input__border-color--error);
-  }
-}
-
-%form-input__placeholder {
-  font-style: italic;
-  color: var(--mer-form-input__color--placeholder);
-}
-
-/// @group Form
-/// @param {String} $selector [".form-input"] -
-/// @param {Boolean} $add--disabled [true] -
-/// @param {Boolean} $add--placeholder [true] -
-/// @param {Boolean} $add--placeholder-var [true] -
-/// @param {Boolean} $add--error [true] -
-@mixin form-input(
-  $selector: ".form-input",
-  $add--disabled: true,
-  $add--placeholder: true,
-  $add--placeholder-var: false,
-  $add--error: true
-) {
-  #{$selector} {
-    @extend %form-input;
-
-    &:hover {
-      @extend %form-input--hover;
-    }
-
-    @if $add--placeholder-var {
-    }
-
-    @if $add--placeholder {
-      &::placeholder {
-        @include control-placeholder();
-      }
-    }
-
-    &:focus {
-      @extend %form-input--focus;
-    }
-
-    @if $add--disabled {
-      &:disabled,
-      &--disabled {
-        @extend %form-input--disabled;
-      }
-    }
-
-    @if $add--error {
-      &--error {
-        @include control-colors-error();
-      }
-    }
-  }
-}
-
 // - - - - - - - - - - - - - - - - - - - -
 //               Icon Sizes
 // - - - - - - - - - - - - - - - - - - - -
@@ -2160,12 +2283,12 @@ Dialog Footer
 }
 
 %layout {
-  --layout__padding-block: var(--mer-spacing--md);
-  --layout__padding-inline: var(--mer-spacing--lg);
+  --spacing-body-block-start: var(--mer-spacing--md);
+  --spacing-body-block-end: var(--mer-spacing--md);
+  --spacing-body-inline-start: var(--mer-spacing--lg);
+  --spacing-body-inline-end: var(--mer-spacing--lg);
 
   display: grid;
-  padding-block: var(--layout__padding-block);
-  padding-inline: var(--layout__padding-inline);
   gap: var(--mer-spacing--md);
   &__panel {
     display: grid;
@@ -2203,19 +2326,6 @@ Dialog Footer
     grid-template-rows: 1fr;
     grid-template-columns: 2fr 1fr;
   }
-
-  &--no-padding {
-    --layout__padding-block: 0;
-    --layout__padding-inline: 0;
-  }
-
-  &--no-block-padding {
-    --layout__padding-block: 0;
-  }
-
-  &--no-inline-padding {
-    --layout__padding-inline: 0;
-  }
 }
 
 /// @group Layout
@@ -2227,9 +2337,6 @@ Dialog Footer
 /// @param {String} $layout--cols-4-selector [".layout--cols-4"] -
 /// @param {String} $layout--cols-1-2-selector [".layout--cols-1-2"] -
 /// @param {String} $layout--cols-2-1-selector [".layout--cols-2-1"] -
-/// @param {String} $layout--no-padding-selector [".layout--no-padding"] -
-/// @param {String} $layout--no-block-padding-selector [".layout--no-block-padding"] -
-/// @param {String} $layout--no-inline-padding-selector [".layout--no-inline-padding"] -
 @mixin layout(
   $layout-selector: ".layout",
   $panel-selector: ".layout__panel",
@@ -2238,10 +2345,7 @@ Dialog Footer
   $layout--cols-3-selector: ".layout--cols-3",
   $layout--cols-4-selector: ".layout--cols-4",
   $layout--cols-1-2-selector: ".layout--cols-1-2",
-  $layout--cols-2-1-selector: ".layout--cols-2-1",
-  $layout--no-padding-selector: ".layout--no-padding",
-  $layout--no-block-padding-selector: ".layout--no-block-padding",
-  $layout--no-inline-padding-selector: ".layout--no-inline-padding"
+  $layout--cols-2-1-selector: ".layout--cols-2-1"
 ) {
   #{$layout-selector} {
     @extend %layout;
@@ -2274,18 +2378,6 @@ Dialog Footer
   #{$layout--cols-2-1-selector} {
     @extend %layout--cols-2-1;
   }
-
-  #{$layout--no-padding-selector} {
-    @extend %layout--no-padding;
-  }
-
-  #{$layout--no-block-padding-selector} {
-    @extend %layout--no-block-padding;
-  }
-
-  #{$layout--no-inline-padding-selector} {
-    @extend %layout--no-inline-padding;
-  }
 }
 
 @mixin heading-tokens() {
@@ -2347,7 +2439,10 @@ Dialog Footer
 }
 
 
-// heading
+/*----------------------
+Heading
+----------------------*/
+
 %heading {
   &-base {
     @include heading-tokens();
@@ -2499,6 +2594,18 @@ Dialog Footer
   }
 }
 
+/*-------------------------------------
+Text States e.g.: for the property-grid
+-------------------------------------*/
+
+%text-edited {
+  font-weight: var(--mer-font__weight--bold);
+}
+%text-readonly {
+  font-style: italic;
+  color: var(--item__color--disabled);
+}
+
 
 // Icons
 @mixin button-tokens-primary() {
@@ -3062,6 +3169,20 @@ Dialog Footer
   gap: $gap;
 }
 
+// - - - - - - - - - - - - - - - - - - - -
+//    Ellipsis
+// - - - - - - - - - - - - - - - - - - - -
+
+@mixin ellipsis() {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+%ellipsis {
+  @include ellipsis();
+}
+
 
 /*----------------------
 Focus
@@ -3118,6 +3239,7 @@ Control
 @mixin control-colors-enabled() {
   background-color: var(--control__bg-color);
   color: var(--control__color);
+  --ch-placeholder-color: var(--control-placeholder__color);
   // enabled border color is defined in control-border()
 }
 @mixin control-colors-hover() {
@@ -3127,6 +3249,7 @@ Control
   --control__bg-color: var(--control__background-color--disabled);
   --control__border-color: var(--control__border-color--disabled);
   --control__color: var(--control__color--disabled);
+  --ch-placeholder-color: var(--control-placeholder__color--disabled);
 }
 @mixin control-colors-error() {
   --control__border-color: var(--control__border-color--error);
@@ -3138,6 +3261,13 @@ Control
   border-color: var(--control__border-color);
   border-radius: var(--control__border-radius);
 }
+@mixin control-remove-border() {
+  // This resets the border applied
+  // (for controls inside the property grid)
+  --control__border-width: 0;
+  --control__border-color: transparent;
+  --control__border-radius: 0;
+}
 // Font
 @mixin control-font-weight-regular() {
   font-weight: var(--control__font-weight--regular);
@@ -3406,8 +3536,72 @@ Dialog Footer
   }
 }
 
-:root {
-  --ch-placeholder-color: var(--mer-text__neutral);
+/*----------------------
+Body Spacing
+----------------------*/
+
+// This custom properties define the block and inline spacing of containers.
+// i.e.: dialog, layout, etc..
+
+%spacing-body {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+
+%spacing-body-block {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+}
+%spacing-body-block-start {
+  padding-block-start: var(--spacing-body-block-start);
+}
+%spacing-body-block-end {
+  padding-block-end: var(--spacing-body-block-end);
+}
+
+%spacing-body-inline {
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+%spacing-body-inline-start {
+  padding-inline-start: var(--spacing-body-inline-start);
+}
+%spacing-body-inline-end {
+  padding-inline-end: var(--spacing-body-inline-end);
+}
+
+@mixin spacing-body(
+  $body-selector: ".spacing-body",
+  $body-block-selector: ".spacing-body-block",
+  $body-block-start-selector: ".spacing-body-block-start",
+  $body-block-end-selector: ".spacing-body-block-end",
+  $body-inline-selector: ".spacing-body-inline",
+  $body-inline-start-selector: ".spacing-body-inline-start",
+  $body-inline-end-selector: ".spacing-body-inline-end"
+) {
+  #{$body-selector} {
+    @extend %spacing-body;
+  }
+  // block
+  #{$body-block-selector} {
+    @extend %spacing-body-block;
+  }
+  #{$body-block-start-selector} {
+    @extend %spacing-body-block-start;
+  }
+  #{$body-block-end-selector} {
+    @extend %spacing-body-block-end;
+  }
+  // inline
+  #{$body-inline-selector} {
+    @extend %spacing-body-inline;
+  }
+  #{$body-inline-start-selector} {
+    @extend %spacing-body-inline-start;
+  }
+  #{$body-inline-end-selector} {
+    @extend %spacing-body-inline-end;
+  }
 }
 
 
@@ -3583,6 +3777,10 @@ Dialog Footer
 }
 
 %dialog {
+  --spacing-body-block-start: var(--mer-spacing--lg);
+  --spacing-body-block-end: var(--mer-spacing--lg);
+  --spacing-body-inline-start: var(--mer-spacing--md);
+  --spacing-body-inline-end: var(--mer-spacing--md);
   --ch-dialog-max-inline-size: 800px;
   background-color: var(--mer-color__elevation--01);
   box-shadow: var(--mer-box-shadow--01);
@@ -3613,8 +3811,6 @@ Dialog Footer
   }
 
   &__content {
-    padding-block: var(--mer-spacing--lg);
-    padding-inline: var(--mer-spacing--md);
     overflow: auto;
   }
 
@@ -3783,6 +3979,68 @@ Dialog Footer
   }
 }
 
+%form-input {
+  // ch-chameleon custom vars (do not edit their names)
+  // --ch-edit-auto-fill-background-color: var(); not defined by design yet
+  --ch-edit-gap: var(--control__icon-gap);
+  --ch-edit__image-size: var(--mer-icon__box--md);
+
+  @include control-colors-enabled();
+  @include control-border();
+  @include control-font-weight-regular();
+  @include control-height-regular();
+  @include control-padding-inline();
+
+  &--focus {
+    @include focus-border();
+  }
+
+  &--hover {
+    @include control-colors-hover();
+  }
+
+  &--disabled {
+    @include control-colors-disabled();
+  }
+}
+
+/// @group Form
+/// @param {String} $selector [".form-input"] -
+/// @param {String} $error-selector [".form-input-error"] -
+/// @param {Boolean} $add--disabled [true] -
+/// @param {Boolean} $add--error [true] -
+@mixin form-input(
+  $selector: ".form-input",
+  $error-selector: ".form-input-error",
+  $add--disabled: true,
+  $add--error: true,
+  $add--placeholder: true
+) {
+  #{$selector} {
+    @extend %form-input;
+
+    &:hover {
+      @extend %form-input--hover;
+    }
+
+    &:focus {
+      @extend %form-input--focus;
+    }
+
+    @if $add--disabled {
+      &:disabled {
+        @extend %form-input--disabled;
+      }
+    }
+  }
+
+  @if $add--error {
+    #{$error-selector} {
+      @include control-colors-error();
+    }
+  }
+}
+
 %list-box {
   --ch-action-list-group__expandable-button-size: 30px;
   // --ch-action-list-group__expandable-button-image-size: calc(100% - 4px);
@@ -3960,6 +4218,460 @@ Dialog Footer
   }
 }
 
+// - - - - - - - - - - - - - - - - - - - -
+//            ch-property-grid
+// - - - - - - - - - - - - - - - - - - - -
+
+%property-grid {
+  // shared properties
+  &__property,
+  &__value {
+    align-items: center;
+  }
+
+  &__property {
+    &--readonly {
+      @extend %text-readonly;
+    }
+  }
+  &__value {
+    @include control-remove-border();
+    @extend %ellipsis;
+
+    &--readonly {
+      @extend %text-readonly;
+    }
+    &--edited {
+      @extend %text-edited;
+    }
+    &--editing {
+      display: grid;
+      padding: 0;
+    }
+  }
+
+  &-column-set {
+    display: none; // Property grid should not display the column-set by design
+  }
+}
+
+/// @group Grid
+// ch-property-grid
+/// @param {String} $property-grid-selector [".property-grid"] -
+/// @param {String} $property-grid__main-selector [".property-grid::part(main)"] -
+// ch-property-grid-column-set
+/// @param {String} $property-grid-column-set [".property-grid-column-set"] -
+// ch-property-grid-column
+/// @param {String} $property-grid-column__bar-selector [".property-grid-column::part(bar)"] -
+/// @param {String} $property-grid-column__bar-resize-split-selector [".property-grid-column::part(bar-resize-split)"] -
+/// @param {String} $property-grid-column__selector-label-selector [".property-grid-column::part(selector-label)"] -
+/// @param {String} $property-grid-column__selector-selector [".property-grid-column::part(selector)"] -
+/// @param {String} $property-grid-column__selector--checked-selector [".property-grid-column::part(selector checked)"] -
+/// @param {String} $property-grid-column__selector--indeterminate-selector [".property-grid-column::part(selector indeterminate)"] -
+// ch-property-grid-row
+/// @param {String} $property-grid-row-selector [".property-grid-row"] -
+/// @param {String} $property-grid-row--focused-selector [".property-grid-row[focused]"] -
+/// @param {String} $property-grid-row--highlighted-selector [".property-grid-row[highlighted]"] -
+/// @param {String} $property-grid-row--selected-selector [".property-grid-row[selected]"] -
+/// @param {String} $property-grid-row--dragging-selector [".property-grid-row[dragging]"] -
+/// @param {String} $property-grid-row--highlighted__cell-selector [".property-grid-row[highlighted] > .property-grid-cell"] -
+// ch-property-grid-row  > cell
+/// @param {String} $property-grid-row--selected__cell-selector [".property-grid-row[selected] > .property-grid-cell"] -
+// ch-property-grid-rowset
+/// @param {String} $property-grid-rowset-selector [".property-grid-rowset"] -
+/// @param {String} $property-grid-rowset--collapsed__legend-selector [".property-grid-rowset[collapsed] > .property-grid-rowset-legend"] -
+// ch-property-grid-rowset-legend
+/// @param {String} $property-grid-rowset-legend-selector [".property-grid-rowset-legend"] -
+/// @param {String} $property-grid-rowset-legend__caret-selector--collapsed [".property-grid-rowset[collapsed] > .property-grid-rowset-legend::part(caret)"] -
+/// @param {String} $property-grid-rowset-legend__caret-selector--expanded [".property-grid-rowset > .property-grid-rowset-legend::part(caret)"] -
+/// @param {String} $property-grid-rowset-legend__selector-label-selector [".property-grid-rowset-legend::part(selector-label)"] -
+/// @param {String} $property-grid-rowset-legend__selector-selector [".property-grid-rowset-legend::part(selector)"] -
+/// @param {String} $property-grid-rowset-legend__icon-selector [".property-grid-rowset-legend::part(icon)"] -
+// ch-property-grid-cell
+/// @param {String} $property-grid-cell-selector [".property-grid-cell"] -
+/// @param {String} $property-grid-cell--focused-selector [".property-grid-cell[focused]"] -
+/// @param {String} $property-grid-cell--selected-selector [".property-grid-cell[selected]"] -
+/// @param {String} $property-grid-cell__selector-label-selector [".property-grid-cell::part(selector-label)"] -
+/// @param {String} $property-grid-cell__selector-selector [".property-grid-cell::part(selector)"] -
+/// @param {String} $property-grid-cell__selector--checked-selector [".property-grid-cell::part(selector checked)"] -
+// ch-property-grid-cell (icons)
+/// @param {String} $property-grid-cell__actions-icon-selector [".property-grid-cell::part(actions-icon)"] -
+/// @param {String} $property-grid-cell__caret-icon-selector--collapsed [".property-grid-row:is( [collapsed], [leaf="false"]:not(:has(> .property-grid-rowset)) ) > .property-grid-cell::part(caret)"] -
+/// @param {String} $property-grid-cell__caret-icon-selector--expanded [".property-grid-row > .property-grid-cell::part(caret)"] -
+/// @param {String} $property-grid-cell__drag-icon-selector [".property-grid-cell::part(drag-icon)"] -
+/// @param {String} $property-grid-cell__node-icon-selector [".property-grid-row:has(> .property-grid-rowset) > .property-grid-cell::part(node-icon)"] -
+/// @param {String} $property-grid-cell__node-leaf-icon-selector [".property-grid-cell::part(node-icon)"] -
+// row-actions
+/// @param {String} $property-grid-row-actions-selector [".property-grid-row-actions"] -
+/// @param {String} $property-grid-row-actions__window-selector [".property-grid-row-actions::part(window)"] -
+/// @param {String} $property-grid-row-actions__main-selector [".property-grid-row-actions::part(main)"] -
+@mixin property-grid(
+  // ch-property-grid
+  $property-grid-selector: ".property-grid",
+  $property-grid__main-selector: ".property-grid::part(main)",
+  // ch-property-grid-column-set
+  $property-grid-column-set: ".property-grid-column-set",
+  // ch-property-grid-column
+  $property-grid-column__bar-selector: ".property-grid-column::part(bar)",
+  $property-grid-column__bar-resize-split-selector:
+    ".property-grid-column::part(bar-resize-split)",
+  $property-grid-column__selector-label-selector:
+    ".property-grid-column::part(selector-label)",
+  $property-grid-column__selector-selector:
+    ".property-grid-column::part(selector)",
+  $property-grid-column__selector--checked-selector:
+    ".property-grid-column::part(selector checked)",
+  $property-grid-column__selector--indeterminate-selector:
+    ".property-grid-column::part(selector indeterminate)",
+  // ch-property-grid-row
+  $property-grid-row-selector: ".property-grid-row",
+  // ch-property-grid-row
+  // interaction states
+  $property-grid-row--focused-selector: ".property-grid-row[focused]",
+  $property-grid-row--highlighted-selector: ".property-grid-row[highlighted]",
+  $property-grid-row--selected-selector: ".property-grid-row[selected]",
+  $property-grid-row--dragging-selector: ".property-grid-row[dragging]",
+  $property-grid-row--highlighted__cell-selector:
+    ".property-grid-row[highlighted] > .property-grid-cell",
+  $property-grid-row--selected__cell-selector:
+    ".property-grid-row[selected] > .property-grid-cell",
+  // functional states (properties and values)
+  $property-grid__property-selector:
+    ".property-grid-row > .property-grid-cell:nth-child(1)",
+  $property-grid__value-selector:
+    ".property-grid-row > .property-grid-cell:nth-child(2)",
+  $property-grid__property--readonly-selector:
+    ".property-grid-property-readonly > .property-grid-cell:nth-child(1)",
+  $property-grid__value--readonly-selector:
+    ".property-grid-value-readonly > .property-grid-cell:nth-child(2)",
+  $property-grid__value--edited-selector:
+    ".property-grid-value-edited > .property-grid-cell:nth-child(2)",
+  $property-grid__value--editing-selector:
+    ".property-grid-value-editing > .property-grid-cell:nth-child(2)",
+
+  // ch-property-grid-rowset
+  $property-grid-rowset-selector: ".property-grid-rowset",
+  $property-grid-rowset--collapsed__legend-selector:
+    ".property-grid-rowset[collapsed] > .property-grid-rowset-legend",
+  // ch-property-grid-rowset-legend
+  $property-grid-rowset-legend-selector: ".property-grid-rowset-legend",
+  $property-grid-rowset-legend__caret-selector--collapsed:
+    ".property-grid-rowset[collapsed] > .property-grid-rowset-legend::part(caret)",
+  $property-grid-rowset-legend__caret-selector--expanded:
+    ".property-grid-rowset > .property-grid-rowset-legend::part(caret)",
+  $property-grid-rowset-legend__selector-label-selector:
+    ".property-grid-rowset-legend::part(selector-label)",
+  $property-grid-rowset-legend__selector-selector:
+    ".property-grid-rowset-legend::part(selector)",
+  $property-grid-rowset-legend__icon-selector:
+    ".property-grid-rowset-legend::part(icon)",
+  // ch-property-grid-cell
+  $property-grid-cell-selector: ".property-grid-cell",
+  $property-grid-cell--focused-selector: ".property-grid-cell[focused]",
+  $property-grid-cell--selected-selector: ".property-grid-cell[selected]",
+  $property-grid-cell__selector-label-selector:
+    ".property-grid-cell::part(selector-label)",
+  $property-grid-cell__selector-selector: ".property-grid-cell::part(selector)",
+  $property-grid-cell__selector--checked-selector:
+    ".property-grid-cell::part(selector checked)",
+  // ch-property-grid-cell (icons)
+  $property-grid-cell__actions-icon-selector:
+    ".property-grid-cell::part(actions-icon)",
+  $property-grid-cell__caret-icon-selector--collapsed:
+    ".property-grid-row:is( [collapsed], [leaf='false']:not(:has(> .property-grid-rowset)) ) > .property-grid-cell::part(caret)",
+  $property-grid-cell__caret-icon-selector--expanded:
+    ".property-grid-cell::part(caret)",
+  $property-grid-cell__drag-icon-selector:
+    ".property-grid-cell::part(drag-icon)",
+  $property-grid-cell__node-icon-selector:
+    ".property-grid-row:has(> .property-grid-rowset) > .property-grid-cell::part(node-icon)",
+  $property-grid-cell__node-leaf-icon-selector:
+    ".property-grid-cell::part(node-icon)",
+  // ch-property-grid-row-actions
+  $property-grid-row-actions-selector: ".property-grid-row-actions",
+  $property-grid-row-actions__window-selector:
+    ".property-grid-row-actions::part(window)",
+  $property-grid-row-actions__main-selector:
+    ".property-grid-row-actions::part(main)"
+) {
+  // - - - - - - - - - - - - - - - - - - - - - - - - -
+  //    icons that are present in more than one place
+  // - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  // caret collapsed
+  #{$property-grid-rowset-legend__caret-selector--collapsed},
+  #{$property-grid-cell__caret-icon-selector--collapsed} {
+    @extend %tabular-grid__icon-size;
+    @extend %tabular-grid__icon-caret-collapsed--enabled;
+    &:hover {
+      @extend %tabular-grid__icon-caret-collapsed--hover;
+    }
+    &:active {
+      @extend %tabular-grid__icon-caret-collapsed--active;
+    }
+  }
+
+  // caret expanded
+  #{$property-grid-rowset-legend__caret-selector--expanded},
+  #{$property-grid-cell__caret-icon-selector--expanded} {
+    @extend %tabular-grid__icon-size;
+    @extend %tabular-grid__icon-caret-expanded--enabled;
+    &:hover {
+      @extend %tabular-grid__icon-caret-expanded--hover;
+    }
+    &:active {
+      @extend %tabular-grid__icon-caret-expanded--active;
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //             ch-property-grid
+  // - - - - - - - - - - - - - - - - - - - -
+
+  #{$property-grid-selector} {
+    @extend %tabular-grid;
+    &:focus {
+      outline: none;
+    }
+  }
+
+  #{$property-grid__main-selector} {
+    @extend %tabular-grid__main;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //      ch-property-grid-column-set
+  // - - - - - - - - - - - - - - - - - - - -
+
+  #{$property-grid-column-set} {
+    @extend %tabular-grid-column-set;
+    @extend %property-grid-column-set;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //         ch-property-grid-column
+  // - - - - - - - - - - - - - - - - - - - -
+
+  #{$property-grid-column__bar-selector} {
+    @extend %tabular-grid-column__bar;
+  }
+
+  #{$property-grid-column__bar-resize-split-selector} {
+    @extend %tabular-grid-column__bar-resize-split;
+    &:hover {
+      @extend %tabular-grid-column__bar-resize-split--hover;
+    }
+  }
+
+  // checkbox (same styles add cell checkbox)
+  #{$property-grid-column__selector-label-selector} {
+    @extend %tabular-grid-cell__selector-label;
+  }
+
+  #{$property-grid-column__selector-selector} {
+    @extend %tabular-grid-cell__selector;
+
+    &::before {
+      @extend %tabular-grid-cell__selector--before;
+    }
+
+    &::after {
+      @extend %tabular-grid-cell__selector--after;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  #{$property-grid-column__selector--checked-selector} {
+    &::after {
+      @extend %tabular-grid-cell__selector--after-checked;
+    }
+  }
+
+  #{$property-grid-column__selector--indeterminate-selector} {
+    &::after {
+      @extend %tabular-grid-cell__selector--after-indeterminate;
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //          ch-property-grid-row
+  // - - - - - - - - - - - - - - - - - - - -
+
+  // row
+  #{$property-grid-row-selector} {
+    @extend %tabular-grid-row;
+  }
+  #{$property-grid-row--focused-selector} {
+    @extend %tabular-grid-row--focused;
+  }
+  #{$property-grid-row--highlighted-selector} {
+    @extend %tabular-grid-row--highlighted;
+  }
+  #{$property-grid-row--selected-selector} {
+    @extend %tabular-grid-row--selected;
+  }
+  #{$property-grid-row--dragging-selector} {
+    @extend %tabular-grid-row--dragging;
+  }
+
+  // row[some-state] > cell
+  #{$property-grid-row--highlighted__cell-selector} {
+    @extend %tabular-grid-row--highlighted__cell;
+  }
+  #{$property-grid-row--selected__cell-selector} {
+    @extend %tabular-grid-row--selected__cell;
+  }
+
+  // Functional States
+  #{$property-grid__property-selector} {
+    @extend %property-grid__property;
+  }
+  #{$property-grid__property--readonly-selector} {
+    @extend %property-grid__property--readonly;
+  }
+
+  #{$property-grid__value-selector} {
+    @extend %property-grid__value;
+  }
+  #{$property-grid__value--readonly-selector} {
+    @extend %property-grid__value--readonly;
+  }
+  #{$property-grid__value--edited-selector} {
+    @extend %property-grid__value--edited;
+  }
+  #{$property-grid__value--editing-selector} {
+    @extend %property-grid__value--editing;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //        ch-property-grid-rowset
+  // - - - - - - - - - - - - - - - - - - - -
+
+  #{$property-grid-rowset-selector} {
+    @extend %tabular-grid-rowset;
+  }
+  #{$property-grid-rowset--collapsed__legend-selector} {
+    @extend %tabular-grid-rowset--collapsed__legend;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //     ch-property-grid-rowset-legend
+  // - - - - - - - - - - - - - - - - - - - -
+
+  #{$property-grid-rowset-legend-selector} {
+    @extend %tabular-grid-rowset-legend;
+    &:hover {
+      @extend %tabular-grid-rowset-legend--hover;
+    }
+    &:active {
+      @extend %tabular-grid-rowset-legend--active;
+    }
+  }
+
+  #{$property-grid-rowset-legend__selector-label-selector} {
+    @extend %tabular-grid-rowset-legend__selector-label;
+  }
+
+  #{$property-grid-rowset-legend__selector-selector} {
+    @extend %tabular-grid-rowset-legend__selector;
+  }
+
+  #{$property-grid-rowset-legend__icon-selector} {
+    @extend %tabular-grid-rowset-legend__icon;
+    @extend %tabular-grid__icon-size;
+    --icon-path: var(--icon__gemini-tools_category-group_on-surface--enabled);
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //           ch-property-grid-cell
+  // - - - - - - - - - - - - - - - - - - - -
+
+  #{$property-grid-cell-selector} {
+    @extend %tabular-grid-cell;
+  }
+
+  #{$property-grid-cell--focused-selector} {
+    @extend %tabular-grid-cell--focused;
+  }
+
+  #{$property-grid-cell--selected-selector} {
+    @extend %tabular-grid-cell--selected;
+  }
+
+  // checkbox
+  #{$property-grid-cell__selector-label-selector} {
+    @extend %tabular-grid-cell__selector-label;
+  }
+
+  #{$property-grid-cell__selector-selector} {
+    @extend %tabular-grid-cell__selector;
+    &::before {
+      @extend %tabular-grid-cell__selector--before;
+    }
+
+    &::after {
+      @extend %tabular-grid-cell__selector--after;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  #{$property-grid-cell__selector--checked-selector} {
+    &::after {
+      @extend %tabular-grid-cell__selector--after-checked;
+    }
+  }
+
+  // Icons
+  #{$property-grid-cell__actions-icon-selector} {
+    inline-size: 100%;
+    @extend %tabular-grid__icon-size;
+    --icon-path: var(
+      --icon__gemini-tools_show-more-vertical_on-surface--enabled
+    );
+    border: none;
+  }
+
+  #{$property-grid-cell__drag-icon-selector} {
+    @extend %tabular-grid__icon-size;
+    --icon-path: var(--icon__navigation_drag_on-surface--enabled);
+    margin-inline-end: var(--grid-common__gap);
+  }
+
+  #{$property-grid-cell__node-icon-selector} {
+    @extend %tabular-grid__icon-size;
+    @extend %tabular-grid__icon-node;
+  }
+
+  #{$property-grid-cell__node-leaf-icon-selector} {
+    @extend %tabular-grid__icon-size;
+    @extend %tabular-grid__icon-node--leaf;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //     ch-property-grid-row-actions
+  // - - - - - - - - - - - - - - - - - - - -
+
+  #{$property-grid-row-actions-selector} {
+    &[show-on-row-hover]::part(window) {
+      margin-inline-end: var(--mer-spacing--xs);
+    }
+  }
+
+  #{$property-grid-row-actions__window-selector} {
+    @extend %tabular-grid-row-actions__window;
+  }
+
+  #{$property-grid-row-actions__main-selector} {
+    @extend %tabular-grid-row-actions__main;
+  }
+}
+
 @mixin radio-group-tokens() {
   // Css properties provided by the ch-radio-group-render
   --ch-radio-group__radio-container-size: var(--control-tiny__size);
@@ -4728,7 +5440,7 @@ Dialog Footer
   gap: var(--window__gap);
 }
 
-/// @group TabularGrid
+/// @group Grid
 // ch-tabular-grid
 /// @param {String} $tabular-grid-selector [".tabular-grid"] -
 /// @param {String} $tabular-grid__main-selector [".tabular-grid::part(main)"] -
@@ -5128,7 +5840,6 @@ Dialog Footer
   // - - - - - - - - - - - - - - - - - - - -
 
   --tree-view__min-inline-size: max-content;
-  --tree-view__padding: var(--mer-spacing--xs);
   --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs);
 
   // - - - - - - - - - - - - - - - - - - - -
@@ -5171,12 +5882,7 @@ Dialog Footer
   @include tree-view-tokens();
   font-size: var(--tree-view__font-size);
   line-height: var(--mer-line-height--regular);
-  padding: var(--tree-view__padding);
   min-inline-size: var(--tree-view__min-inline-size);
-
-  &--no-padding {
-    padding: 0;
-  }
 }
 
 // TODO: Improve this
@@ -5279,7 +5985,6 @@ Dialog Footer
 ///
 @mixin tree-view(
   $tree-view-selector: ".tree-view",
-  $tree-view--no-padding-selector: ".tree-view--no-padding",
 
   // Drag preview
   $drag-preview-selector: ".tree-view::part(drag-preview)",
@@ -5330,10 +6035,6 @@ Dialog Footer
     @include scrollbar-styles();
   }
 
-  #{$tree-view--no-padding-selector} {
-    @extend %tree-view--no-padding;
-  }
-
   // - - - - - - - - - - - - - - - - - - - -
   //               Drag preview
   // - - - - - - - - - - - - - - - - - - - -
@@ -5470,6 +6171,7 @@ Dialog Footer
   $form-controls-classes: true,
   $icon-classes: true,
   $layout-classes: true,
+  $spacing-classes: true,
   $typography-classes: true,
 
   // Components
@@ -28063,7 +28765,6 @@ Dialog Footer
     // Form control classes
     @if $form-controls-classes {
       @include field();
-      @include form-input();
       @include label();
     }
 
@@ -28079,6 +28780,11 @@ Dialog Footer
       @include control-footer();
     }
 
+    // Spacing classes
+    @if $spacing-classes {
+      @include spacing-body();
+    }
+
     // Typography classes
     @if $typography-classes {
       @include typography-classes();
@@ -28137,6 +28843,7 @@ Dialog Footer
   // tabular grid
   @if $tabular-grid {
     @include tabular-grid();
+    @include property-grid(); // property-grid extends tabular-grid
   }
 
   // tree view
@@ -28187,6 +28894,7 @@ Dialog Footer
   $form-controls-classes: false,
   $icon-classes: false,
   $layout-classes: false,
+  $spacing-classes: false,
   $typography-classes: false,
 
   // Components
@@ -28245,6 +28953,7 @@ Dialog Footer
     $form-controls-classes: $form-controls-classes,
     $icon-classes: $icon-classes,
     $layout-classes: $layout-classes,
+    $spacing-classes: $spacing-classes,
     $typography-classes: $typography-classes,
 
     // Components