@genexus/mercury 0.4.6 → 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);
@@ -1045,9 +1082,9 @@ Body Spacing
 
   // - - - - - - - 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;
 
@@ -1110,7 +1147,7 @@ Body Spacing
   // 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() {
@@ -1359,12 +1396,6 @@ Body Spacing
 }
 
 
-// Tokens Other
-:root {
-  --ch-placeholder-color: var(--mer-text__neutral);
-}
-
-
 // Base classes
 @mixin button-common-styles() {
   display: inline-grid;
@@ -1430,6 +1461,20 @@ Body Spacing
   gap: $gap;
 }
 
+// - - - - - - - - - - - - - - - - - - - -
+//    Ellipsis
+// - - - - - - - - - - - - - - - - - - - -
+
+@mixin ellipsis() {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+%ellipsis {
+  @include ellipsis();
+}
+
 
 /*----------------------
 Focus
@@ -1486,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() {
@@ -1495,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);
@@ -1506,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);
@@ -2152,17 +2206,17 @@ Body Spacing
 /// @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;
@@ -2193,89 +2247,6 @@ Body Spacing
   }
 }
 
-%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
 // - - - - - - - - - - - - - - - - - - - -
@@ -2468,7 +2439,10 @@ Body Spacing
 }
 
 
-// heading
+/*----------------------
+Heading
+----------------------*/
+
 %heading {
   &-base {
     @include heading-tokens();
@@ -2620,6 +2594,18 @@ Body Spacing
   }
 }
 
+/*-------------------------------------
+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() {
@@ -3183,6 +3169,20 @@ Body Spacing
   gap: $gap;
 }
 
+// - - - - - - - - - - - - - - - - - - - -
+//    Ellipsis
+// - - - - - - - - - - - - - - - - - - - -
+
+@mixin ellipsis() {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+%ellipsis {
+  @include ellipsis();
+}
+
 
 /*----------------------
 Focus
@@ -3239,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() {
@@ -3248,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);
@@ -3259,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);
@@ -3595,10 +3604,6 @@ Body Spacing
   }
 }
 
-:root {
-  --ch-placeholder-color: var(--mer-text__neutral);
-}
-
 
 %combo-box {
   --ch-combo-box-separation-y: var(--mer-spacing--3xs);
@@ -3974,6 +3979,68 @@ Body Spacing
   }
 }
 
+%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);
@@ -4151,6 +4218,460 @@ Body Spacing
   }
 }
 
+// - - - - - - - - - - - - - - - - - - - -
+//            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);
@@ -4919,7 +5440,7 @@ Body Spacing
   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)"] -
@@ -28244,7 +28765,6 @@ Body Spacing
     // Form control classes
     @if $form-controls-classes {
       @include field();
-      @include form-input();
       @include label();
     }
 
@@ -28323,6 +28843,7 @@ Body Spacing
   // tabular grid
   @if $tabular-grid {
     @include tabular-grid();
+    @include property-grid(); // property-grid extends tabular-grid
   }
 
   // tree view