@genexus/mercury 0.5.0 → 0.5.2

package/dist/mercury.scss

@@ -245,9 +245,9 @@
 }
 
 
-/*----------------------
-Focus
-----------------------*/
+// ----------------------
+// Focus
+// ----------------------
 @mixin focus-outline($outline: false) {
   outline: var(--focus__outline-width) var(--focus__outline-style)
     var(--focus__outline-color);
@@ -257,9 +257,9 @@ Focus
   border-color: var(--borders-un-border-color__focused);
 }
 
-/*----------------------
-Scrollbar
-----------------------*/
+// ----------------------
+// Scrollbar Styles
+// ----------------------
 @mixin scrollbar-styles() {
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb__bg-color)
@@ -283,20 +283,26 @@ Scrollbar
     border-radius: var(--scrollbar-thumb__border-radius);
   }
 
-  // thumb:hover
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-thumb__bg-color--hover);
-  }
-
   // corner
   &::-webkit-scrollbar-corner {
     background: var(--scrollbar-corner__bg);
   }
 }
 
-/*----------------------
-Control
-----------------------*/
+// ----------------------
+// Scrollbar Components
+// ----------------------
+@mixin scrollbar-components() {
+  :host(.ch-scrollable),
+  .ch-scrollable,
+  .scrollable {
+    @include scrollbar-styles();
+  }
+}
+
+// ----------------------
+// Control
+// ----------------------
 
 // Colors
 @mixin control-colors-enabled() {
@@ -370,9 +376,9 @@ Control
   font-style: var(--control-placeholder__font-style);
 }
 
-/*----------------------
-Control Tiny
-----------------------*/
+// ----------------------
+// Control Tiny
+// ----------------------
 
 @mixin control-tiny-size() {
   block-size: var(--control-tiny__size);
@@ -394,9 +400,9 @@ Control Tiny
   --control__border-color: var(--control__border-color--error);
 }
 
-/*----------------------
-Items Container
-----------------------*/
+// ----------------------
+// Items Container
+// ----------------------
 
 @mixin items-container-border() {
   border-style: var(--items-container__border-style);
@@ -429,9 +435,9 @@ Items Container
   background-color: var(--items-container-separator__bg-color);
 }
 
-/*---------------------------------
-Single Item (Every item except grid)
-----------------------------------*/
+// ------------------------------------
+// Single Item (Every item except grid)
+// ------------------------------------
 
 @mixin item-colors-enabled() {
   background-color: var(--item__bg-color);
@@ -505,9 +511,9 @@ Single Item (Every item except grid)
   font-weight: var(--item-header__font-weight);
 }
 
-/*---------------------------------
-Grid Item
-----------------------------------*/
+// ---------------------------------
+// Grid Item
+// ---------------------------------
 
 // Row
 @mixin grid-row-colors-enabled() {
@@ -544,8 +550,8 @@ Grid Item
   // we should redefine '--grid-cell__padding-inline' here because when a control
   // is inside a a tabular-grid-cell the cell padding-inline value is required to
   // be applied on the control padding-inline.
-  padding-block: 0 !important; //WA to force padding 0
-  padding-inline: 0 !important; //WA to force padding 0
+  padding-block: 0;
+  padding-inline: 0;
 }
 @mixin grid-rowset-legend-padding-block() {
   padding-block-start: var(--mer-spacing--2xs);
@@ -562,9 +568,9 @@ Grid Item
   --grid-rowset-legend__bg-color: var(--mer-color__elevation--02);
 }
 
-/*----------------------
-Tab Caption (Button)
-----------------------*/
+// ----------------------
+// Tab Caption (Button)
+// ----------------------
 @mixin tab-button-border-block() {
   border-block: var(--tab-caption__border-width)
     var(--tab-caption__border-style) var(--tab-caption__border-color);
@@ -623,9 +629,9 @@ Tab Caption (Button)
   padding-inline: var(--tab-caption__padding-inline);
 }
 
-/*----------------------
-Label
-----------------------*/
+// ----------------------
+// Label
+// ----------------------
 
 @mixin label-font() {
   color: var(--label__color);
@@ -646,9 +652,9 @@ Label
   --label__color: var(--label__color--disabled);
 }
 
-/*----------------------
-Window
-----------------------*/
+// ----------------------
+// Window
+// ----------------------
 
 // TODO: This styles should better be applied on the ch-window ?
 %window-styles {
@@ -659,18 +665,18 @@ Window
   box-shadow: var(--mer-box-shadow--01);
 }
 
-/*----------------------
-Dropdown
-----------------------*/
+// ----------------------
+// Dropdown
+// ----------------------
 
 @mixin dropdown-styles() {
   box-shadow: var(--mer-box-shadow--01);
   border-radius: var(--mer-border__radius--sm);
 }
 
-/*----------------------
-Dialog Footer
-----------------------*/
+// ----------------------
+// Dialog Footer
+// ----------------------
 
 // Defined here to be used on /components/dialog as well as to replicate
 // dialog footer styles on genexus-ide-ui components
@@ -700,9 +706,9 @@ Dialog Footer
   }
 }
 
-/*----------------------
-Body Spacing
-----------------------*/
+// ----------------------
+// Body Spacing
+// ----------------------
 
 // This custom properties define the block and inline spacing of containers.
 // i.e.: dialog, layout, etc..
@@ -1127,9 +1133,9 @@ Body Spacing
 }
 
 @mixin semantic-control() {
-  /*-------------------------------------------------------------
-  Inline Controls should have the same height to look good inline
-  --------------------------------------------------------------*/
+  // ---------------------------------------------------------------
+  // Inline Controls should have the same height to look good inline
+  // ---------------------------------------------------------------
 
   // - - - - - - - Colors - - - - - - -
 
@@ -1192,9 +1198,9 @@ Body Spacing
   );
   --control-placeholder__font-style: italic;
 
-  /*-------------------------------------------------------------
-  Tiny controls (ie.: checkbox, radio-button)
-  --------------------------------------------------------------*/
+  // -------------------------------------------------------------
+  // Tiny controls (ie.: checkbox, radio-button)
+  // -------------------------------------------------------------
 
   // border colors are the same from "--control__***" tokens
 
@@ -1205,9 +1211,9 @@ Body Spacing
   --control-tiny__border-radius-rounded: 50%;
   --control-tiny-option__color: var(--control__border-color);
 
-  /*-------------------------------------------------------------
-  Controls Label
-  --------------------------------------------------------------*/
+  // -------------------------------------------------------------
+  // Controls Label
+  // -------------------------------------------------------------
 
   // fixed values
   --label__font-size: var(--mer-font__size--3xs);
@@ -1234,9 +1240,9 @@ Body Spacing
   // error
   --label__color--error: var(--mer-text__neutral);
 
-  /*-------------------------------------------------------------
-  Controls Container
-  --------------------------------------------------------------*/
+  // -------------------------------------------------------------
+  // Controls Container
+  // -------------------------------------------------------------
 
   --controls__container-row-gap: var(--mer-spacing--md);
   --controls__group-gap--block: var(--mer-spacing--sm);
@@ -1449,9 +1455,9 @@ Body Spacing
 }
 
 @mixin semantic-general() {
-  /*----------------------
-  Body
-  ----------------------*/
+  // ----------------------
+  // Body
+  // ----------------------
   --mer-body__bg-color: var(--mer-color__surface);
   --mer-body__color: var(--mer-text__on-surface);
   --mer-body__font-size: var(--mer-font__size--3xs);
@@ -1460,37 +1466,37 @@ Body Spacing
   --mer-body__line-height: var(--mer-line-height--spaced);
   --mer-body__margin-block: var(--mer-spacing--sm);
 
-  /*----------------------
-  System
-  ----------------------*/
+  // ----------------------
+  // System
+  // ----------------------
   // System tokens are the most basic kind, used when there is not a more specific categorization.
   --mer-system__border-width: var(--mer-border__width--sm);
   --mer-system__border-style: solid;
   --mer-system__border-color: var(--mer-color__neutral-gray--500);
 
-  /*----------------------
-  Heading
-  ----------------------*/
+  // ----------------------
+  // Heading
+  // ----------------------
   --mer-heading__color: var(--mer-color__neutral-gray--100);
 
-  /*----------------------
-  Scrollbar
-  ----------------------*/
+  // ----------------------
+  // Scrollbar
+  // ----------------------
   // scrollbar
-  --scrollbar__size: var(--mer-spacing--xs);
+  --scrollbar__size: var(--mer-spacing--2xs);
   // scrollbar-track
-  --scrollbar-track__bg-color: var(--mer-color__elevation--03);
+  --scrollbar-track__bg-color: var(--mer-color__neutral-gray--650);
+
   --scrollbar-track__border-radius: var(--mer-spacing--xs);
   // scrollbar-thumb
-  --scrollbar-thumb__bg-color: var(--mer-color__elevation--04);
-  --scrollbar-thumb__bg-color--hover: #42474c;
+  --scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550);
   --scrollbar-thumb__border-radius: var(--mer-spacing--xs);
   // scrollbar-thumb
   --scrollbar-corner__bg: transparent;
 
-  /*----------------------
-  Icon Size
-  ----------------------*/
+  // ----------------------
+  // Icon Size
+  // ----------------------
   // box (shell)
   --mer-icon__box--sm: var(--mer-spacing--sm);
   --mer-icon__box--md: 14px; // no spacing token exists for 14px.
@@ -1498,9 +1504,9 @@ Body Spacing
   --mer-icon__size--sm: 100%;
   --mer-icon__size--md: 100%;
 
-  /*----------------------------------------------------------
-  Form Input (form-input-*** background-position-x RTL support)
-  -----------------------------------------------------------*/
+  // ------------------------------------------------------------
+  // Form Input (form-input-*** background-position-x RTL support)
+  // ------------------------------------------------------------
   --mer-form-input__padding-inline: var(--mer-spacing--xs);
   --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline);
   --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value);
@@ -1523,9 +1529,9 @@ Body Spacing
   );
   --mer-checkbox__option-checked-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
 
-  /*----------------------
-  Window
-  ----------------------*/
+  // ----------------------
+  // Window
+  // ----------------------
   // TODO: This styles should better be applied on the ch-window.
   --window__border: var(--mer-border__width--sm) solid
     var(--mer-color__elevation--04);
@@ -1535,9 +1541,9 @@ Body Spacing
   --window__gap: var(--mer-spacing--xs);
   --window__box-shadow: var(--mer-box-shadow--01);
 
-  /*----------------------
-  Focus
-  ----------------------*/
+  // ----------------------
+  // Focus
+  // ----------------------
   --focus__outline-width: var(--mer-border__width--sm);
   --focus__outline-style: solid;
   --focus__outline-color: var(--mer-color__primary-blue--200);
@@ -1569,6 +1575,7 @@ Body Spacing
 
 @mixin semantic-heading() {
   --mer-heading__gray--light: var(--mer-color__neutral-gray--200);
+  --mer-header__background-color: var(--mer-color__neutral-gray--700);
 }
 
 
@@ -1652,9 +1659,9 @@ Body Spacing
 }
 
 
-/*----------------------
-Focus
-----------------------*/
+// ----------------------
+// Focus
+// ----------------------
 @mixin focus-outline($outline: false) {
   outline: var(--focus__outline-width) var(--focus__outline-style)
     var(--focus__outline-color);
@@ -1664,9 +1671,9 @@ Focus
   border-color: var(--borders-un-border-color__focused);
 }
 
-/*----------------------
-Scrollbar
-----------------------*/
+// ----------------------
+// Scrollbar Styles
+// ----------------------
 @mixin scrollbar-styles() {
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb__bg-color)
@@ -1690,20 +1697,26 @@ Scrollbar
     border-radius: var(--scrollbar-thumb__border-radius);
   }
 
-  // thumb:hover
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-thumb__bg-color--hover);
-  }
-
   // corner
   &::-webkit-scrollbar-corner {
     background: var(--scrollbar-corner__bg);
   }
 }
 
-/*----------------------
-Control
-----------------------*/
+// ----------------------
+// Scrollbar Components
+// ----------------------
+@mixin scrollbar-components() {
+  :host(.ch-scrollable),
+  .ch-scrollable,
+  .scrollable {
+    @include scrollbar-styles();
+  }
+}
+
+// ----------------------
+// Control
+// ----------------------
 
 // Colors
 @mixin control-colors-enabled() {
@@ -1777,9 +1790,9 @@ Control
   font-style: var(--control-placeholder__font-style);
 }
 
-/*----------------------
-Control Tiny
-----------------------*/
+// ----------------------
+// Control Tiny
+// ----------------------
 
 @mixin control-tiny-size() {
   block-size: var(--control-tiny__size);
@@ -1801,9 +1814,9 @@ Control Tiny
   --control__border-color: var(--control__border-color--error);
 }
 
-/*----------------------
-Items Container
-----------------------*/
+// ----------------------
+// Items Container
+// ----------------------
 
 @mixin items-container-border() {
   border-style: var(--items-container__border-style);
@@ -1836,9 +1849,9 @@ Items Container
   background-color: var(--items-container-separator__bg-color);
 }
 
-/*---------------------------------
-Single Item (Every item except grid)
-----------------------------------*/
+// ------------------------------------
+// Single Item (Every item except grid)
+// ------------------------------------
 
 @mixin item-colors-enabled() {
   background-color: var(--item__bg-color);
@@ -1912,9 +1925,9 @@ Single Item (Every item except grid)
   font-weight: var(--item-header__font-weight);
 }
 
-/*---------------------------------
-Grid Item
-----------------------------------*/
+// ---------------------------------
+// Grid Item
+// ---------------------------------
 
 // Row
 @mixin grid-row-colors-enabled() {
@@ -1951,8 +1964,8 @@ Grid Item
   // we should redefine '--grid-cell__padding-inline' here because when a control
   // is inside a a tabular-grid-cell the cell padding-inline value is required to
   // be applied on the control padding-inline.
-  padding-block: 0 !important; //WA to force padding 0
-  padding-inline: 0 !important; //WA to force padding 0
+  padding-block: 0;
+  padding-inline: 0;
 }
 @mixin grid-rowset-legend-padding-block() {
   padding-block-start: var(--mer-spacing--2xs);
@@ -1969,9 +1982,9 @@ Grid Item
   --grid-rowset-legend__bg-color: var(--mer-color__elevation--02);
 }
 
-/*----------------------
-Tab Caption (Button)
-----------------------*/
+// ----------------------
+// Tab Caption (Button)
+// ----------------------
 @mixin tab-button-border-block() {
   border-block: var(--tab-caption__border-width)
     var(--tab-caption__border-style) var(--tab-caption__border-color);
@@ -2030,9 +2043,9 @@ Tab Caption (Button)
   padding-inline: var(--tab-caption__padding-inline);
 }
 
-/*----------------------
-Label
-----------------------*/
+// ----------------------
+// Label
+// ----------------------
 
 @mixin label-font() {
   color: var(--label__color);
@@ -2053,9 +2066,9 @@ Label
   --label__color: var(--label__color--disabled);
 }
 
-/*----------------------
-Window
-----------------------*/
+// ----------------------
+// Window
+// ----------------------
 
 // TODO: This styles should better be applied on the ch-window ?
 %window-styles {
@@ -2066,18 +2079,18 @@ Window
   box-shadow: var(--mer-box-shadow--01);
 }
 
-/*----------------------
-Dropdown
-----------------------*/
+// ----------------------
+// Dropdown
+// ----------------------
 
 @mixin dropdown-styles() {
   box-shadow: var(--mer-box-shadow--01);
   border-radius: var(--mer-border__radius--sm);
 }
 
-/*----------------------
-Dialog Footer
-----------------------*/
+// ----------------------
+// Dialog Footer
+// ----------------------
 
 // Defined here to be used on /components/dialog as well as to replicate
 // dialog footer styles on genexus-ide-ui components
@@ -2107,9 +2120,9 @@ Dialog Footer
   }
 }
 
-/*----------------------
-Body Spacing
-----------------------*/
+// ----------------------
+// Body Spacing
+// ----------------------
 
 // This custom properties define the block and inline spacing of containers.
 // i.e.: dialog, layout, etc..
@@ -2735,9 +2748,9 @@ Body Spacing
 }
 
 
-/*----------------------
-Heading
-----------------------*/
+// ----------------------
+// Heading
+// ----------------------
 
 %heading {
   &-base {
@@ -2893,9 +2906,9 @@ Heading
   }
 }
 
-/*-------------------------------------
-Text States e.g.: for the property-grid
--------------------------------------*/
+// ---------------------------------------
+// Text States e.g.: for the property-grid
+// ---------------------------------------
 
 %text-edited {
   font-weight: var(--mer-font__weight--semi-bold);
@@ -3503,9 +3516,9 @@ Text States e.g.: for the property-grid
 }
 
 
-/*----------------------
-Focus
-----------------------*/
+// ----------------------
+// Focus
+// ----------------------
 @mixin focus-outline($outline: false) {
   outline: var(--focus__outline-width) var(--focus__outline-style)
     var(--focus__outline-color);
@@ -3515,9 +3528,9 @@ Focus
   border-color: var(--borders-un-border-color__focused);
 }
 
-/*----------------------
-Scrollbar
-----------------------*/
+// ----------------------
+// Scrollbar Styles
+// ----------------------
 @mixin scrollbar-styles() {
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb__bg-color)
@@ -3541,20 +3554,26 @@ Scrollbar
     border-radius: var(--scrollbar-thumb__border-radius);
   }
 
-  // thumb:hover
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-thumb__bg-color--hover);
-  }
-
   // corner
   &::-webkit-scrollbar-corner {
     background: var(--scrollbar-corner__bg);
   }
 }
 
-/*----------------------
-Control
-----------------------*/
+// ----------------------
+// Scrollbar Components
+// ----------------------
+@mixin scrollbar-components() {
+  :host(.ch-scrollable),
+  .ch-scrollable,
+  .scrollable {
+    @include scrollbar-styles();
+  }
+}
+
+// ----------------------
+// Control
+// ----------------------
 
 // Colors
 @mixin control-colors-enabled() {
@@ -3628,9 +3647,9 @@ Control
   font-style: var(--control-placeholder__font-style);
 }
 
-/*----------------------
-Control Tiny
-----------------------*/
+// ----------------------
+// Control Tiny
+// ----------------------
 
 @mixin control-tiny-size() {
   block-size: var(--control-tiny__size);
@@ -3652,9 +3671,9 @@ Control Tiny
   --control__border-color: var(--control__border-color--error);
 }
 
-/*----------------------
-Items Container
-----------------------*/
+// ----------------------
+// Items Container
+// ----------------------
 
 @mixin items-container-border() {
   border-style: var(--items-container__border-style);
@@ -3687,9 +3706,9 @@ Items Container
   background-color: var(--items-container-separator__bg-color);
 }
 
-/*---------------------------------
-Single Item (Every item except grid)
-----------------------------------*/
+// ------------------------------------
+// Single Item (Every item except grid)
+// ------------------------------------
 
 @mixin item-colors-enabled() {
   background-color: var(--item__bg-color);
@@ -3763,9 +3782,9 @@ Single Item (Every item except grid)
   font-weight: var(--item-header__font-weight);
 }
 
-/*---------------------------------
-Grid Item
-----------------------------------*/
+// ---------------------------------
+// Grid Item
+// ---------------------------------
 
 // Row
 @mixin grid-row-colors-enabled() {
@@ -3802,8 +3821,8 @@ Grid Item
   // we should redefine '--grid-cell__padding-inline' here because when a control
   // is inside a a tabular-grid-cell the cell padding-inline value is required to
   // be applied on the control padding-inline.
-  padding-block: 0 !important; //WA to force padding 0
-  padding-inline: 0 !important; //WA to force padding 0
+  padding-block: 0;
+  padding-inline: 0;
 }
 @mixin grid-rowset-legend-padding-block() {
   padding-block-start: var(--mer-spacing--2xs);
@@ -3820,9 +3839,9 @@ Grid Item
   --grid-rowset-legend__bg-color: var(--mer-color__elevation--02);
 }
 
-/*----------------------
-Tab Caption (Button)
-----------------------*/
+// ----------------------
+// Tab Caption (Button)
+// ----------------------
 @mixin tab-button-border-block() {
   border-block: var(--tab-caption__border-width)
     var(--tab-caption__border-style) var(--tab-caption__border-color);
@@ -3881,9 +3900,9 @@ Tab Caption (Button)
   padding-inline: var(--tab-caption__padding-inline);
 }
 
-/*----------------------
-Label
-----------------------*/
+// ----------------------
+// Label
+// ----------------------
 
 @mixin label-font() {
   color: var(--label__color);
@@ -3904,9 +3923,9 @@ Label
   --label__color: var(--label__color--disabled);
 }
 
-/*----------------------
-Window
-----------------------*/
+// ----------------------
+// Window
+// ----------------------
 
 // TODO: This styles should better be applied on the ch-window ?
 %window-styles {
@@ -3917,18 +3936,18 @@ Window
   box-shadow: var(--mer-box-shadow--01);
 }
 
-/*----------------------
-Dropdown
-----------------------*/
+// ----------------------
+// Dropdown
+// ----------------------
 
 @mixin dropdown-styles() {
   box-shadow: var(--mer-box-shadow--01);
   border-radius: var(--mer-border__radius--sm);
 }
 
-/*----------------------
-Dialog Footer
-----------------------*/
+// ----------------------
+// Dialog Footer
+// ----------------------
 
 // Defined here to be used on /components/dialog as well as to replicate
 // dialog footer styles on genexus-ide-ui components
@@ -3958,9 +3977,9 @@ Dialog Footer
   }
 }
 
-/*----------------------
-Body Spacing
-----------------------*/
+// ----------------------
+// Body Spacing
+// ----------------------
 
 // This custom properties define the block and inline spacing of containers.
 // i.e.: dialog, layout, etc..
@@ -4227,9 +4246,9 @@ Body Spacing
     @extend %control-footer--with-border;
   }
 
-  /*------------------------------
-  Edges (For dragging)
-  -------------------------------*/
+  // ------------------------------
+  // Edges (For dragging)
+  // ------------------------------
   &__edge {
     $edge-border-width: var(--mer-border__width--lg);
     $edge-border-style: solid;
@@ -4334,9 +4353,9 @@ Body Spacing
     @extend %dialog__footer;
   }
 
-  /*------------------------------
-  Edges (For dragging)
-  -------------------------------*/
+  // ------------------------------
+  // Edges (For dragging)
+  // ------------------------------
   #{$edge-selector} {
     @extend %dialog__edge;
     &:hover {
@@ -4885,6 +4904,154 @@ Body Spacing
   }
 }
 
+// node type
+@mixin cell-node-type-text() {
+  @include grid-cell-padding-inline-block();
+}
+@mixin cell-node-type-element() {
+  @include control-remove-border();
+  @include grid-cell-remove-padding();
+  --control__padding-inline: var(--grid-cell__padding-inline);
+  // to stretch the control
+  display: grid;
+  align-items: stretch;
+  justify-content: stretch;
+}
+@mixin cell-node-type-element--hover() {
+  outline: var(--focus__outline-width) var(--focus__outline-style)
+    var(--control__border-color--hover);
+  outline-offset: var(--focus__outline-offset);
+}
+// cell alignment block
+@mixin cell-alignment-block-start() {
+  align-items: start;
+}
+@mixin cell-alignment-block-center() {
+  align-items: center;
+}
+@mixin cell-alignment-block-end() {
+  align-items: end;
+}
+// cell alignment inline
+@mixin cell-alignment-inline-start() {
+  justify-content: start;
+}
+@mixin cell-alignment-inline-center() {
+  justify-content: center;
+}
+@mixin cell-alignment-inline-end() {
+  justify-content: center;
+}
+// cell with ellipsis
+@mixin cell-ellipsis() {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/// @group Grid
+/// @param {String} $tabular-grid-selector [".tabular-grid"] -
+/// @param {("text" | "element")} $tabular-grid-cell-node-type ["text"] -
+/// @param {("start" | "center" | "end")} $tabular-grid-cell-block-alignment ["start"] -
+/// @param {("start" | "center" | "end")} $tabular-grid-cell-inline-alignment ["start"] -
+/// @param {Boolean} $tabular-grid-cell-apply-ellipsis [false] -
+/// @param {List} $tabular-grid-affected-columns-nth-list [null] -
+
+@mixin tabular-grid-cell-layout(
+  $tabular-grid-selector: ".tabular-grid",
+  $tabular-grid-cell-node-type: "text",
+  $tabular-grid-cell-block-alignment: "start",
+  $tabular-grid-cell-inline-alignment: "start",
+  $tabular-grid-cell-apply-ellipsis: false,
+  $tabular-grid-affected-columns-nth-list: null
+) {
+  $selector: null;
+  $cell-tag-name: "ch-tabular-grid-cell";
+  $where-pseudo-class: ":where";
+  $where-selector: ();
+  // the selector varies depending on wether $tabular-grid-affected-columns-nth-list is null or not.
+  // if it is null, all cells should be affected.
+  @if $tabular-grid-affected-columns-nth-list != null {
+    @each $nth in $tabular-grid-affected-columns-nth-list {
+      $where-selector: append($where-selector, ":nth-child(#{$nth})", comma);
+    }
+    $selector: #{$tabular-grid-selector}
+      #{$cell-tag-name}#{$where-pseudo-class
+      }(#{$where-selector});
+  } @else {
+    // if no $editable-columns-nth was provided, apply to all cells
+    $selector: #{$tabular-grid-selector} #{$cell-tag-name};
+  }
+  #{$selector} {
+    // node type
+    @if $tabular-grid-cell-node-type == "text" {
+      @include cell-node-type-text();
+    }
+    @if $tabular-grid-cell-node-type == "element" {
+      @include cell-node-type-element();
+    }
+    &:hover {
+      @if $tabular-grid-cell-node-type == "element" {
+        @include cell-node-type-element--hover();
+      }
+    }
+    // block alignment (only should apply if $tabular-grid-cell-node-type == "text"
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-block-alignment ==
+      "start"
+    {
+      @include cell-alignment-block-start();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-block-alignment ==
+      "center"
+    {
+      @include cell-alignment-block-center();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-block-alignment ==
+      "end"
+    {
+      @include cell-alignment-block-end();
+    }
+    // inline alignment
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-inline-alignment ==
+      "start"
+    {
+      @include cell-alignment-inline-start();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-inline-alignment ==
+      "center"
+    {
+      @include cell-alignment-inline-center();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-inline-alignment ==
+      "end"
+    {
+      @include cell-alignment-inline-end();
+    }
+    // ellipsis (only should apply if $tabular-grid-cell-node-type == "text"
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-apply-ellipsis ==
+      true
+    {
+      @include cell-ellipsis();
+    }
+  }
+}
+
+
 // - - - - - - - - - - - - - - - - - - - -
 //            ch-property-grid
 // - - - - - - - - - - - - - - - - - - - -
@@ -4893,7 +5060,7 @@ Body Spacing
   // shared properties
   &__property,
   &__value {
-    align-items: center;
+    @include cell-ellipsis();
   }
 
   &__property {
@@ -4902,9 +5069,6 @@ Body Spacing
     }
   }
   &__value {
-    @include control-remove-border();
-    @extend %ellipsis;
-
     &--readonly {
       @extend %text-readonly;
     }
@@ -4912,8 +5076,10 @@ Body Spacing
       @extend %text-edited;
     }
     &--editing {
-      display: grid;
-      padding: 0;
+      @include cell-node-type-element();
+      &-hover {
+        @include cell-node-type-element--hover();
+      }
     }
   }
 
@@ -5212,6 +5378,9 @@ Body Spacing
   #{$property-grid__value--editing-selector} {
     @extend %property-grid__value--editing;
   }
+  #{$property-grid__value--editing-selector}:hover {
+    @extend %property-grid__value--editing-hover;
+  }
 
   // - - - - - - - - - - - - - - - - - - - -
   //        ch-property-grid-rowset
@@ -6676,8 +6845,8 @@ Body Spacing
   --control__padding-inline: var(--grid-cell__padding-inline);
   // to stretch the control
   display: grid;
-  align-items: stretch !important; // WA to win over other rule that is more specific
-  justify-content: stretch !important; // WA to win over other rule that is more specific
+  align-items: stretch;
+  justify-content: stretch;
 }
 @mixin cell-node-type-element--hover() {
   outline: var(--focus__outline-width) var(--focus__outline-style)
@@ -7171,6 +7340,7 @@ Body Spacing
   $layout-classes: true,
   $spacing-classes: true,
   $typography-classes: true,
+  $scrollbar-components: true,
 
   // Components
   $components: true,
@@ -15313,9 +15483,13 @@ Body Spacing
     @if $typography-classes {
       @include typography-classes();
     }
+
+    @if $scrollbar-components {
+      @include scrollbar-components();
+    }
   }
 
-  // - - - - - - - - - - - - - - - -  - - -
+  // - - - - - - - - - - - - - - - - - - -
   //               Components
   // - - - - - - - - - - - - - - - - - - -
   @if $accordion {
@@ -15421,6 +15595,7 @@ Body Spacing
   $layout-classes: false,
   $spacing-classes: false,
   $typography-classes: false,
+  $scrollbar-components: false,
 
   // Components
   $components: false,
@@ -15482,6 +15657,7 @@ Body Spacing
     $layout-classes: $layout-classes,
     $spacing-classes: $spacing-classes,
     $typography-classes: $typography-classes,
+    $scrollbar-components: $scrollbar-components,
 
     // Components
     $components: $components,