@genexus/mercury 0.4.4 → 0.4.6

package/dist/mercury.scss

@@ -460,15 +460,27 @@ Grid Item
   --item__bg-color: var(--item__bg-color--selected);
   --item__color: var(--item__color--selected);
 }
-@mixin grid-cell-border-inline-block() {
-  box-shadow: var(--grid-cell__box-shadow--inline-block);
+@mixin grid-row-dragging() {
+  box-shadow: var(--mer-box-shadow--01);
 }
-@mixin grid-cell-colors-selected() {
-  background-color: var(--item__bg-color--selected);
+@mixin grid-cell-border-inline-block() {
+  // this mixin uses the box-shadow property, but it looks
+  // as a border to the user.
+  box-shadow: var(--grid-cell__box-shadow-inline-block);
 }
 @mixin grid-rowset-legend-padding-block() {
-  padding-block-start: var(--mer-spacing--3xs);
-  padding-block-end: var(--mer-spacing--3xs);
+  padding-block-start: var(--mer-spacing--2xs);
+  padding-block-end: var(--mer-spacing--2xs);
+}
+@mixin grid-rowset-legend-colors-enabled() {
+  --grid-rowset-legend__bg-color: var(--mer-color__elevation--02);
+  background-color: var(--grid-rowset-legend__bg-color);
+}
+@mixin grid-rowset-legend-colors-hover() {
+  --grid-rowset-legend__bg-color: var(--mer-color__elevation--03);
+}
+@mixin grid-rowset-legend-colors-active() {
+  --grid-rowset-legend__bg-color: var(--mer-color__elevation--02);
 }
 
 /*----------------------
@@ -548,6 +560,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() {
@@ -667,14 +747,15 @@ 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: #;
-
-  // tinted grays
+  // 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;
   --mer-color__tinted-yellow--60: #ffc96b99;
   --mer-color__tinted-red--5: #fb7c840d;
@@ -727,26 +808,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 grays
-  --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;
+  // 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;
@@ -1130,8 +1229,10 @@ Dialog Footer
   // - - - - - - - - - - - - - - - - - - - -
   //               Grid Cell
   // - - - - - - - - - - - - - - - - - - - -
-  --grid-cell__box-shadow--inline-block: 0 0 0 1px
-    var(--mer-color__elevation--04);
+  --grid-cell__border-color: var(--mer-color__elevation--04);
+  --grid-cell__border: var(--mer-border__width--sm) solid
+    var(--grid-cell__border-color);
+  --grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color);
 }
 
 @mixin semantic-general() {
@@ -1573,15 +1674,27 @@ Grid Item
   --item__bg-color: var(--item__bg-color--selected);
   --item__color: var(--item__color--selected);
 }
-@mixin grid-cell-border-inline-block() {
-  box-shadow: var(--grid-cell__box-shadow--inline-block);
+@mixin grid-row-dragging() {
+  box-shadow: var(--mer-box-shadow--01);
 }
-@mixin grid-cell-colors-selected() {
-  background-color: var(--item__bg-color--selected);
+@mixin grid-cell-border-inline-block() {
+  // this mixin uses the box-shadow property, but it looks
+  // as a border to the user.
+  box-shadow: var(--grid-cell__box-shadow-inline-block);
 }
 @mixin grid-rowset-legend-padding-block() {
-  padding-block-start: var(--mer-spacing--3xs);
-  padding-block-end: var(--mer-spacing--3xs);
+  padding-block-start: var(--mer-spacing--2xs);
+  padding-block-end: var(--mer-spacing--2xs);
+}
+@mixin grid-rowset-legend-colors-enabled() {
+  --grid-rowset-legend__bg-color: var(--mer-color__elevation--02);
+  background-color: var(--grid-rowset-legend__bg-color);
+}
+@mixin grid-rowset-legend-colors-hover() {
+  --grid-rowset-legend__bg-color: var(--mer-color__elevation--03);
+}
+@mixin grid-rowset-legend-colors-active() {
+  --grid-rowset-legend__bg-color: var(--mer-color__elevation--02);
 }
 
 /*----------------------
@@ -1661,6 +1774,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"] -
@@ -1935,6 +2116,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);
@@ -2127,12 +2312,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;
@@ -2170,19 +2355,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
@@ -2194,9 +2366,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",
@@ -2205,10 +2374,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;
@@ -2241,18 +2407,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() {
@@ -3273,15 +3427,27 @@ Grid Item
   --item__bg-color: var(--item__bg-color--selected);
   --item__color: var(--item__color--selected);
 }
-@mixin grid-cell-border-inline-block() {
-  box-shadow: var(--grid-cell__box-shadow--inline-block);
+@mixin grid-row-dragging() {
+  box-shadow: var(--mer-box-shadow--01);
 }
-@mixin grid-cell-colors-selected() {
-  background-color: var(--item__bg-color--selected);
+@mixin grid-cell-border-inline-block() {
+  // this mixin uses the box-shadow property, but it looks
+  // as a border to the user.
+  box-shadow: var(--grid-cell__box-shadow-inline-block);
 }
 @mixin grid-rowset-legend-padding-block() {
-  padding-block-start: var(--mer-spacing--3xs);
-  padding-block-end: var(--mer-spacing--3xs);
+  padding-block-start: var(--mer-spacing--2xs);
+  padding-block-end: var(--mer-spacing--2xs);
+}
+@mixin grid-rowset-legend-colors-enabled() {
+  --grid-rowset-legend__bg-color: var(--mer-color__elevation--02);
+  background-color: var(--grid-rowset-legend__bg-color);
+}
+@mixin grid-rowset-legend-colors-hover() {
+  --grid-rowset-legend__bg-color: var(--mer-color__elevation--03);
+}
+@mixin grid-rowset-legend-colors-active() {
+  --grid-rowset-legend__bg-color: var(--mer-color__elevation--02);
 }
 
 /*----------------------
@@ -3361,6 +3527,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;
+  }
+}
+
 :root {
   --ch-placeholder-color: var(--mer-text__neutral);
 }
@@ -3538,6 +3772,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);
@@ -3568,8 +3806,6 @@ Dialog Footer
   }
 
   &__content {
-    padding-block: var(--mer-spacing--lg);
-    padding-inline: var(--mer-spacing--md);
     overflow: auto;
   }
 
@@ -4272,23 +4508,7 @@ Dialog Footer
   }
 }
 
-@mixin tabular-grid-tokens() {
-  // Generic tokens for texts
-  --grid-base__font-size: var(--mer-body__font-size);
-  --grid-base__bg-color: var(--mer-color__elevation--01);
-  --grid-base__icon-gap: var(--mer-spacing--xs);
 
-  // - - - - - - - - - - - - - - - - - - - -
-  //             Part "Header"
-  // - - - - - - - - - - - - - - - - - - - -
-
-  // - - - - - - - - - - - - - - - - - - - -
-  //              Part "Main"
-  // - - - - - - - - - - - - - - - - - - - -
-
-  // This color simulates the grid cells border at the time of writing.
-  --grid-main__bg-color: var(--item__border-color--enabled);
-}
 
 @mixin tabular-grid-row-tokens() {
   /* This style-sheet applies for: 
@@ -4442,15 +4662,61 @@ Dialog Footer
 
 
 // - - - - - - - - - - - - - - - - - - - -
-//               ch-grid
+//           general settings
+// - - - - - - - - - - - - - - - - - - - -
+
+%tabular-grid__icon {
+  &-size {
+    @extend %icon-size--md;
+    margin-inline-end: var(--grid-common__gap);
+    flex-shrink: 0; // WA
+  }
+  &-caret {
+    // collapsed
+    &-collapsed--enabled {
+      --icon-path: var(--icon__gemini-tools_add_neutral--enabled);
+      cursor: pointer;
+    }
+    &-collapsed--hover {
+      --icon-path: var(--icon__gemini-tools_add_neutral--hover);
+    }
+    &-collapsed--active {
+      --icon-path: var(--icon__gemini-tools_add_neutral--active);
+    }
+    // expanded
+    &-expanded--enabled {
+      --icon-path: var(--icon__gemini-tools_minus_neutral--enabled);
+      cursor: pointer;
+    }
+    &-expanded--hover {
+      --icon-path: var(--icon__gemini-tools_minus_neutral--hover);
+    }
+    &-expanded--active {
+      --icon-path: var(--icon__gemini-tools_minus_neutral--active);
+    }
+  }
+  &-node {
+    --icon-path: var(--icon__gemini-tools_folder_on-surface--enabled);
+    &--leaf {
+      --icon-path: var(--icon__gemini-tools_file_on-surface--enabled);
+    }
+  }
+}
+
+// - - - - - - - - - - - - - - - - - - - -
+//            ch-tabular-grid
 // - - - - - - - - - - - - - - - - - - - -
 
 %tabular-grid {
+  --focus__outline-offset: -2px; // WA since the box-shadow hides the outline-block-end and outline-inline-end.
+  --grid-label__gap: var(--mer-spacing--xs);
+  --grid-common__gap: var(--mer-spacing--xs);
+
   --indent: 16px;
   @include items-container-colors();
 
   --item__border-color--enabled: var(--mer-color__elevation--04);
-  @include tabular-grid-tokens();
+  // @include tabular-grid-tokens();
   @include tabular-grid-row-tokens();
   @include tabular-grid-column-tokens();
   @include tabular-grid-cell-tokens();
@@ -4462,66 +4728,94 @@ Dialog Footer
 }
 
 // - - - - - - - - - - - - - - - - - - - -
-//            ch-grid-column
+//       ch-tabular-grid-column-set
+// - - - - - - - - - - - - - - - - - - - -
+%tabular-grid-column-set {
+  border-block-end: var(--grid-cell__border);
+}
+
+// - - - - - - - - - - - - - - - - - - - -
+//         ch-tabular-grid-column
 // - - - - - - - - - - - - - - - - - - - -
 
 %tabular-grid-column__bar {
+  --grid-label__gap: 0;
+  @include grid-row-colors-enabled();
   @include control-padding-inline-block();
   @include control-font-weight-semi-bold();
-  position: relative;
+  gap: var(--grid-common__gap);
   width: 100%;
-  gap: var(--grid-column-bar__gap);
-  line-height: var(--item__line-height);
 }
 
 %tabular-grid-column__bar-resize-split {
-  position: absolute;
-  height: 100%;
-  top: 0;
-  right: 0;
+  background-color: var(--mer-color__elevation--04);
   inline-size: var(--grid-bar-resize-split__inline-size);
   &--hover {
+    background-color: var(--mer-accent__primary--hover);
   }
 }
 
 // - - - - - - - - - - - - - - - - - - - -
-//            ch-grid-row
+//          ch-tabular-grid-row
 // - - - - - - - - - - - - - - - - - - - -
 
-// no styles on ch-grid-row, since it has "display:contents"
+// no styles on ch-tabular-grid-row, since it has "display:contents"
 %tabular-grid-row {
-  @include grid-row-colors-enabled();
-
+  &--focused {
+  }
   &--highlighted {
-    @include grid-row-colors-highlighted();
+    &__cell {
+      @include grid-row-colors-highlighted();
+    }
   }
-
   &--selected {
-    @include grid-row-colors-selected();
+    &__cell {
+      @include grid-row-colors-selected();
+    }
+  }
+  &--dragging {
+    @include grid-row-dragging();
   }
 }
 
 // - - - - - - - - - - - - - - - - - - - -
-//            ch-grid-rowset
+//         ch-tabular-grid-rowset
 // - - - - - - - - - - - - - - - - - - - -
 
 %tabular-grid-rowset {
+  &--collapsed {
+    &__legend {
+      border-block-end: var(--grid-cell__border);
+    }
+  }
 }
 
 // - - - - - - - - - - - - - - - - - - - -
-//        ch-grid-rowset-legend
+//     ch-tabular-grid-rowset-legend
 // - - - - - - - - - - - - - - - - - - - -
 
 %tabular-grid-rowset-legend {
+  @include grid-rowset-legend-colors-enabled();
+  @include grid-rowset-legend-padding-block();
+  display: flex;
+  align-items: center;
   cursor: pointer;
-
-  &:hover {
+  padding-inline-start: var(--grid-common__gap);
+  box-shadow: calc(var(--indent) * (var(--level) - 1) * -1) 0px 0px 0px
+    var(--grid-rowset-legend__bg-color);
+  &--hover {
+    @include grid-rowset-legend-colors-hover();
+  }
+  &--active {
+    @include grid-rowset-legend-colors-active();
   }
 }
 
 // Parts
 // TODO
 %tabular-grid-rowset-legend__caret {
+  @extend %tabular-grid__icon-size;
+  --icon-path: var(--icon__gemini-tools_minus_on-surface--enabled);
 }
 %tabular-grid-rowset-legend__selector-label {
 }
@@ -4530,26 +4824,31 @@ Dialog Footer
 %tabular-grid-rowset-legend__icon {
 }
 
-// no styles on ch-grid-row, since it has "display:contents"
+// no styles on ch-tabular-grid-row, since it has "display:contents"
 %tabular-grid-row {
 }
 
 // - - - - - - - - - - - - - - - - - - - -
-//            ch-grid-cell
+//         ch-tabular-grid-cell
 // - - - - - - - - - - - - - - - - - - - -
 
 %tabular-grid-cell {
   @include grid-cell-border-inline-block();
   @include control-padding-inline-block();
+  @include grid-row-colors-enabled();
   border: 0; //WA
 
-  &[focused] {
+  &--focused {
     @include focus-outline();
   }
+
+  &--selected {
+    // to be defined by design
+  }
 }
 
 %tabular-grid-cell__selector-label {
-  margin-inline-end: var(--label__gap--inline);
+  margin-inline-end: var(--grid-label__gap);
   block-size: var(--control-tiny__size);
   inline-size: var(--control-tiny__size);
 }
@@ -4606,7 +4905,7 @@ Dialog Footer
 // End Checkbox
 
 // - - - - - - - - - - - - - - - - - - - -
-//          ch-grid-row-actions
+//       ch-tabular-grid-row-actions
 // - - - - - - - - - - - - - - - - - - - -
 
 %tabular-grid-row-actions {
@@ -4621,35 +4920,62 @@ Dialog Footer
 }
 
 /// @group TabularGrid
+// ch-tabular-grid
 /// @param {String} $tabular-grid-selector [".tabular-grid"] -
 /// @param {String} $tabular-grid__main-selector [".tabular-grid::part(main)"] -
-/// @param {String} $tabular-grid__bar-selector [".tabular-grid-column::part(bar)"] -
-/// @param {String} $tabular-grid__bar-resize-split-selector [".tabular-grid-column::part(bar-resize-split)"] -
+// ch-tabular-grid-column-set
+/// @param {String} $tabular-grid-column-set [".tabular-grid-column-set"] -
+// ch-tabular-grid-column
+/// @param {String} $tabular-grid-column__bar-selector [".tabular-grid-column::part(bar)"] -
+/// @param {String} $tabular-grid-column__bar-resize-split-selector [".tabular-grid-column::part(bar-resize-split)"] -
 /// @param {String} $tabular-grid-column__selector-label-selector [".tabular-grid-column::part(selector-label)"] -
 /// @param {String} $tabular-grid-column__selector-selector [".tabular-grid-column::part(selector)"] -
 /// @param {String} $tabular-grid-column__selector--checked-selector [".tabular-grid-column::part(selector checked)"] -
 /// @param {String} $tabular-grid-column__selector--indeterminate-selector [".tabular-grid-column::part(selector indeterminate)"] -
+// ch-tabular-grid-row
 /// @param {String} $tabular-grid-row-selector [".tabular-grid-row"] -
+/// @param {String} $tabular-grid-row--focused-selector [".tabular-grid-row[focused]"] -
+/// @param {String} $tabular-grid-row--highlighted-selector [".tabular-grid-row[highlighted]"] -
+/// @param {String} $tabular-grid-row--selected-selector [".tabular-grid-row[selected]"] -
+/// @param {String} $tabular-grid-row--dragging-selector [".tabular-grid-row[dragging]"] -
+/// @param {String} $tabular-grid-row--highlighted__cell-selector [".tabular-grid-row[highlighted] > .tabular-grid-cell"] -
+// ch-tabular-grid-row  > cell
+/// @param {String} $tabular-grid-row--selected__cell-selector [".tabular-grid-row[selected] > .tabular-grid-cell"] -
+// ch-tabular-grid-rowset
 /// @param {String} $tabular-grid-rowset-selector [".tabular-grid-rowset"] -
+/// @param {String} $tabular-grid-rowset--collapsed__legend-selector [".tabular-grid-rowset[collapsed] > .tabular-grid-rowset-legend"] -
+// ch-tabular-grid-rowset-legend
 /// @param {String} $tabular-grid-rowset-legend-selector [".tabular-grid-rowset-legend"] -
-/// @param {String} $tabular-grid-rowset-legend__caret-selector [".tabular-grid-rowset-legend::part(caret)"] -
+/// @param {String} $tabular-grid-rowset-legend__caret-selector--collapsed [".tabular-grid-rowset[collapsed] > .tabular-grid-rowset-legend::part(caret)"] -
+/// @param {String} $tabular-grid-rowset-legend__caret-selector--expanded [".tabular-grid-rowset > .tabular-grid-rowset-legend::part(caret)"] -
 /// @param {String} $tabular-grid-rowset-legend__selector-label-selector [".tabular-grid-rowset-legend::part(selector-label)"] -
 /// @param {String} $tabular-grid-rowset-legend__selector-selector [".tabular-grid-rowset-legend::part(selector)"] -
 /// @param {String} $tabular-grid-rowset-legend__icon-selector [".tabular-grid-rowset-legend::part(icon)"] -
+// ch-tabular-grid-cell
 /// @param {String} $tabular-grid-cell-selector [".tabular-grid-cell"] -
-/// @param {String} $tabular-grid-cell__drag-icon-selector [".tabular-grid-cell::part(drag-icon)"] -
+/// @param {String} $tabular-grid-cell--focused-selector [".tabular-grid-cell[focused]"] -
+/// @param {String} $tabular-grid-cell--selected-selector [".tabular-grid-cell[selected]"] -
 /// @param {String} $tabular-grid-cell__selector-label-selector [".tabular-grid-cell::part(selector-label)"] -
 /// @param {String} $tabular-grid-cell__selector-selector [".tabular-grid-cell::part(selector)"] -
 /// @param {String} $tabular-grid-cell__selector--checked-selector [".tabular-grid-cell::part(selector checked)"] -
+// ch-tabular-grid-cell (icons)
 /// @param {String} $tabular-grid-cell__actions-icon-selector [".tabular-grid-cell::part(actions-icon)"] -
+/// @param {String} $tabular-grid-cell__caret-icon-selector--collapsed [".tabular-grid-row:is( [collapsed], [leaf="false"]:not(:has(> .tabular-grid-rowset)) ) > .tabular-grid-cell::part(caret)"] -
+/// @param {String} $tabular-grid-cell__caret-icon-selector--expanded [".tabular-grid-row > .tabular-grid-cell::part(caret)"] -
+/// @param {String} $tabular-grid-cell__drag-icon-selector [".tabular-grid-cell::part(drag-icon)"] -
+/// @param {String} $tabular-grid-cell__node-icon-selector [".tabular-grid-row:has(> .tabular-grid-rowset) > .tabular-grid-cell::part(node-icon)"] -
+/// @param {String} $tabular-grid-cell__node-leaf-icon-selector [".tabular-grid-cell::part(node-icon)"] -
+// row-actions
 /// @param {String} $tabular-grid-row-actions-selector [".tabular-grid-row-actions"] -
 /// @param {String} $tabular-grid-row-actions__window-selector [".tabular-grid-row-actions::part(window)"] -
 /// @param {String} $tabular-grid-row-actions__main-selector [".tabular-grid-row-actions::part(main)"] -
 @mixin tabular-grid(
-  // ch-grid
+  // ch-tabular-grid
   $tabular-grid-selector: ".tabular-grid",
   $tabular-grid__main-selector: ".tabular-grid::part(main)",
-  // ch-grid-column
+  // ch-tabular-grid-column-set
+  $tabular-grid-column-set: ".tabular-grid-column-set",
+  // ch-tabular-grid-column
   $tabular-grid-column__bar-selector: ".tabular-grid-column::part(bar)",
   $tabular-grid-column__bar-resize-split-selector:
     ".tabular-grid-column::part(bar-resize-split)",
@@ -4661,38 +4987,94 @@ Dialog Footer
     ".tabular-grid-column::part(selector checked)",
   $tabular-grid-column__selector--indeterminate-selector:
     ".tabular-grid-column::part(selector indeterminate)",
-  // ch-grid-row
+  // ch-tabular-grid-row
   $tabular-grid-row-selector: ".tabular-grid-row",
-  // ch-grid-rowset
+  $tabular-grid-row--focused-selector: ".tabular-grid-row[focused]",
+  $tabular-grid-row--highlighted-selector: ".tabular-grid-row[highlighted]",
+  $tabular-grid-row--selected-selector: ".tabular-grid-row[selected]",
+  $tabular-grid-row--dragging-selector: ".tabular-grid-row[dragging]",
+  $tabular-grid-row--highlighted__cell-selector:
+    ".tabular-grid-row[highlighted] > .tabular-grid-cell",
+  $tabular-grid-row--selected__cell-selector:
+    ".tabular-grid-row[selected] > .tabular-grid-cell",
+  // ch-tabular-grid-rowset
   $tabular-grid-rowset-selector: ".tabular-grid-rowset",
-  // ch-grid-rowset-legend
+  $tabular-grid-rowset--collapsed__legend-selector:
+    ".tabular-grid-rowset[collapsed] > .tabular-grid-rowset-legend",
+  // ch-tabular-grid-rowset-legend
   $tabular-grid-rowset-legend-selector: ".tabular-grid-rowset-legend",
-  $tabular-grid-rowset-legend__caret-selector:
-    ".tabular-grid-rowset-legend::part(caret)",
+  $tabular-grid-rowset-legend__caret-selector--collapsed:
+    ".tabular-grid-rowset[collapsed] > .tabular-grid-rowset-legend::part(caret)",
+  $tabular-grid-rowset-legend__caret-selector--expanded:
+    ".tabular-grid-rowset > .tabular-grid-rowset-legend::part(caret)",
   $tabular-grid-rowset-legend__selector-label-selector:
     ".tabular-grid-rowset-legend::part(selector-label)",
   $tabular-grid-rowset-legend__selector-selector:
     ".tabular-grid-rowset-legend::part(selector)",
   $tabular-grid-rowset-legend__icon-selector:
     ".tabular-grid-rowset-legend::part(icon)",
-  // ch-grid-cell
+  // ch-tabular-grid-cell
   $tabular-grid-cell-selector: ".tabular-grid-cell",
-  $tabular-grid-cell__drag-icon-selector: ".tabular-grid-cell::part(drag-icon)",
+  $tabular-grid-cell--focused-selector: ".tabular-grid-cell[focused]",
+  $tabular-grid-cell--selected-selector: ".tabular-grid-cell[selected]",
   $tabular-grid-cell__selector-label-selector:
     ".tabular-grid-cell::part(selector-label)",
   $tabular-grid-cell__selector-selector: ".tabular-grid-cell::part(selector)",
   $tabular-grid-cell__selector--checked-selector:
     ".tabular-grid-cell::part(selector checked)",
+  // ch-tabular-grid-cell (icons)
   $tabular-grid-cell__actions-icon-selector:
     ".tabular-grid-cell::part(actions-icon)",
-  // ch-grid-row-actions
+  $tabular-grid-cell__caret-icon-selector--collapsed:
+    ".tabular-grid-row:is( [collapsed], [leaf='false']:not(:has(> .tabular-grid-rowset)) ) > .tabular-grid-cell::part(caret)",
+  $tabular-grid-cell__caret-icon-selector--expanded:
+    ".tabular-grid-cell::part(caret)",
+  $tabular-grid-cell__drag-icon-selector: ".tabular-grid-cell::part(drag-icon)",
+  $tabular-grid-cell__node-icon-selector:
+    ".tabular-grid-row:has(> .tabular-grid-rowset) > .tabular-grid-cell::part(node-icon)",
+  $tabular-grid-cell__node-leaf-icon-selector:
+    ".tabular-grid-cell::part(node-icon)",
+  // ch-tabular-grid-row-actions
   $tabular-grid-row-actions-selector: ".tabular-grid-row-actions",
   $tabular-grid-row-actions__window-selector:
     ".tabular-grid-row-actions::part(window)",
   $tabular-grid-row-actions__main-selector:
     ".tabular-grid-row-actions::part(main)"
 ) {
-  // Base style
+  // - - - - - - - - - - - - - - - - - - - - - - - - -
+  //    icons that are present in more than one place
+  // - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  // caret collapsed
+  #{$tabular-grid-rowset-legend__caret-selector--collapsed},
+  #{$tabular-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
+  #{$tabular-grid-rowset-legend__caret-selector--expanded},
+  #{$tabular-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-tabular-grid
+  // - - - - - - - - - - - - - - - - - - - -
+
   #{$tabular-grid-selector} {
     @extend %tabular-grid;
     &:focus {
@@ -4700,17 +5082,20 @@ Dialog Footer
     }
   }
 
+  #{$tabular-grid__main-selector} {
+    @extend %tabular-grid__main;
+  }
+
   // - - - - - - - - - - - - - - - - - - - -
-  //               ch-grid
+  //      ch-tabular-grid-column-set
   // - - - - - - - - - - - - - - - - - - - -
 
-  #{$tabular-grid__main-selector} {
-    @extend %tabular-grid__main;
-    gap: 1px;
+  #{$tabular-grid-column-set} {
+    @extend %tabular-grid-column-set;
   }
 
   // - - - - - - - - - - - - - - - - - - - -
-  //            ch-grid-column
+  //          ch-tabular-grid-column
   // - - - - - - - - - - - - - - - - - - - -
 
   #{$tabular-grid-column__bar-selector} {
@@ -4742,10 +5127,6 @@ Dialog Footer
 
     &:focus {
       outline: none;
-
-      &:before {
-        @include focus-outline();
-      }
     }
   }
 
@@ -4762,65 +5143,57 @@ Dialog Footer
   }
 
   // - - - - - - - - - - - - - - - - - - - -
-  //            ch-grid-row
+  //          ch-tabular-grid-row
   // - - - - - - - - - - - - - - - - - - - -
 
+  // row
   #{$tabular-grid-row-selector} {
     @extend %tabular-grid-row;
-    // the following styles have to be applied here, because they depend on the
-    // $tabular-grid-cell selector, which is not known in the '%tabular-grid-row' placeholder.
-    &[highlighted] {
-      @extend %tabular-grid-row--highlighted;
-    }
-
-    &[selected] {
-      @extend %tabular-grid-row--selected;
-    }
-
-    &[focused] {
-    }
+  }
+  #{$tabular-grid-row--focused-selector} {
+    @extend %tabular-grid-row--focused;
+  }
+  #{$tabular-grid-row--highlighted-selector} {
+    @extend %tabular-grid-row--highlighted;
+  }
+  #{$tabular-grid-row--selected-selector} {
+    @extend %tabular-grid-row--selected;
+  }
+  #{$tabular-grid-row--dragging-selector} {
+    @extend %tabular-grid-row--dragging;
+  }
 
-    &[dragging] {
-      box-shadow: var(--mer-box-shadow--01);
-    }
+  // row[some-state] > cell
+  #{$tabular-grid-row--highlighted__cell-selector} {
+    @extend %tabular-grid-row--highlighted__cell;
+  }
+  #{$tabular-grid-row--selected__cell-selector} {
+    @extend %tabular-grid-row--selected__cell;
   }
 
   // - - - - - - - - - - - - - - - - - - - -
-  //             ch-grid-rowset
+  //             ch-tabular-grid-rowset
   // - - - - - - - - - - - - - - - - - - - -
 
   #{$tabular-grid-rowset-selector} {
     @extend %tabular-grid-rowset;
-
-    // part::(caret)
-    #{$tabular-grid-rowset-legend__caret-selector} {
-      @extend %icon-size--md;
-      --icon-path: var(--icon__gemini-tools_minus_on-surface--enabled);
-    }
-    &[collapsed] {
-      #{$tabular-grid-rowset-legend__caret-selector} {
-        --icon-path: var(--icon__gemini-tools_add_on-surface--enabled);
-      }
-    }
-
-    &[collapsed]:not(:last-child) {
-      #{$tabular-grid-rowset-legend-selector} {
-        margin-block-end: 1px;
-      }
-    }
+  }
+  #{$tabular-grid-rowset--collapsed__legend-selector} {
+    @extend %tabular-grid-rowset--collapsed__legend;
   }
 
   // - - - - - - - - - - - - - - - - - - - -
-  //         ch-grid-rowset-legend
+  //     ch-tabular-grid-rowset-legend
   // - - - - - - - - - - - - - - - - - - - -
-  #{$tabular-grid-rowset-legend-selector} {
-    background-color: var(--mer-color__elevation--02);
-    @include grid-rowset-legend-padding-block();
 
+  #{$tabular-grid-rowset-legend-selector} {
     @extend %tabular-grid-rowset-legend;
-    display: flex;
-    align-items: center;
-    gap: var(--grid-base__icon-gap);
+    &:hover {
+      @extend %tabular-grid-rowset-legend--hover;
+    }
+    &:active {
+      @extend %tabular-grid-rowset-legend--active;
+    }
   }
 
   #{$tabular-grid-rowset-legend__selector-label-selector} {
@@ -4833,27 +5206,24 @@ Dialog Footer
 
   #{$tabular-grid-rowset-legend__icon-selector} {
     @extend %tabular-grid-rowset-legend__icon;
-    @extend %icon-size--md;
+    @extend %tabular-grid__icon-size;
     --icon-path: var(--icon__gemini-tools_category-group_on-surface--enabled);
   }
 
   // - - - - - - - - - - - - - - - - - - - -
-  //            ch-grid-cell
+  //           ch-tabular-grid-cell
   // - - - - - - - - - - - - - - - - - - - -
 
   #{$tabular-grid-cell-selector} {
     @extend %tabular-grid-cell;
+  }
 
-    &[selected] {
-      @include grid-cell-colors-selected();
-    }
+  #{$tabular-grid-cell--focused-selector} {
+    @extend %tabular-grid-cell--focused;
   }
 
-  // drag icon
-  #{$tabular-grid-cell__drag-icon-selector} {
-    @extend %icon-size--md;
-    --icon-path: var(--icon__navigation_drag_on-surface--enabled);
-    margin-inline-end: var(--grid-base__icon-gap);
+  #{$tabular-grid-cell--selected-selector} {
+    @extend %tabular-grid-cell--selected;
   }
 
   // checkbox
@@ -4882,18 +5252,34 @@ Dialog Footer
     }
   }
 
-  // actions icon
+  // Icons
   #{$tabular-grid-cell__actions-icon-selector} {
     width: 100%;
-    @extend %icon-size--md;
+    @extend %tabular-grid__icon-size;
     --icon-path: var(
       --icon__gemini-tools_show-more-vertical_on-surface--enabled
     );
     border: none;
   }
 
+  #{$tabular-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);
+  }
+
+  #{$tabular-grid-cell__node-icon-selector} {
+    @extend %tabular-grid__icon-size;
+    @extend %tabular-grid__icon-node;
+  }
+
+  #{$tabular-grid-cell__node-leaf-icon-selector} {
+    @extend %tabular-grid__icon-size;
+    @extend %tabular-grid__icon-node--leaf;
+  }
+
   // - - - - - - - - - - - - - - - - - - - -
-  //          ch-grid-row-actions
+  //      ch-tabular-grid-row-actions
   // - - - - - - - - - - - - - - - - - - - -
 
   #{$tabular-grid-row-actions-selector} {
@@ -4933,7 +5319,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);
 
   // - - - - - - - - - - - - - - - - - - - -
@@ -4976,12 +5361,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
@@ -5084,7 +5464,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)",
@@ -5135,10 +5514,6 @@ Dialog Footer
     @include scrollbar-styles();
   }
 
-  #{$tree-view--no-padding-selector} {
-    @extend %tree-view--no-padding;
-  }
-
   // - - - - - - - - - - - - - - - - - - - -
   //               Drag preview
   // - - - - - - - - - - - - - - - - - - - -
@@ -5275,6 +5650,7 @@ Dialog Footer
   $form-controls-classes: true,
   $icon-classes: true,
   $layout-classes: true,
+  $spacing-classes: true,
   $typography-classes: true,
 
   // Components
@@ -27884,6 +28260,11 @@ Dialog Footer
       @include control-footer();
     }
 
+    // Spacing classes
+    @if $spacing-classes {
+      @include spacing-body();
+    }
+
     // Typography classes
     @if $typography-classes {
       @include typography-classes();
@@ -27992,6 +28373,7 @@ Dialog Footer
   $form-controls-classes: false,
   $icon-classes: false,
   $layout-classes: false,
+  $spacing-classes: false,
   $typography-classes: false,
 
   // Components
@@ -28050,6 +28432,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