@genexus/mercury 0.1.6 → 0.1.8

package/dist/mercury.scss

@@ -685,8 +685,9 @@ Window
   Icon Size
   ----------------------*/
   // box (shell)
-  --mer-icon__box--sm: var(--mer-spacing--md);
-  --mer-icon__box--lg: var(--mer-spacing--lg);
+  --mer-icon__box--sm: var(--mer-spacing--sm);
+  --mer-icon__box--md: var(--mer-spacing--md);
+  // --mer-icon__box--lg: var(--mer-spacing--lg);
 
   /*----------------------------------------------------------
   Form Input (form-input-*** background-position-x RTL support)
@@ -781,6 +782,82 @@ Window
 
 
 // Base classes
+@mixin label-tokens() {
+  --label__font-family: var(--mer-font-family--inter-semi-bold);
+  --label__font-size: var(--mer-font__size--2xs);
+  --label__color: var(--mer-text__on-surface);
+  --label__line-height: var(--mer-line-height--regular);
+  --label__block-margin: var(--mer-spacing--xs);
+  --label__inline-margin: var(--mer-spacing--xs);
+
+  // Disabled
+  --label__color--disabled: var(--mer-text__primary--disabled);
+}
+
+
+%label {
+  @include label-tokens();
+  font-family: var(--label__font-family);
+  font-size: var(--label__font-size);
+  color: var(--label__color);
+  line-height: var(--label__line-height);
+}
+
+// Positioning margin
+%label--disabled {
+  color: var(--label__color--disabled);
+}
+%label--above {
+  margin-block-end: var(--label__block-margin);
+}
+%label--after {
+  margin-inline-start: var(--label__inline-margin);
+}
+%label--below {
+  margin-block-start: var(--label__block-margin);
+}
+%label--before {
+  margin-inline-end: var(--label__inline-margin);
+}
+
+/// @group Label
+/// @param {String} $label-selector [".label"] -
+/// @param {String} $label--disabled-selector [".label--disabled"] -
+/// @param {String} $label--above-selector [".label--above"] -
+/// @param {String} $label--after-selector [".label--after"] -
+/// @param {String} $label--below-selector [".label--below"] -
+/// @param {String} $label--before-selector [".label--before"] -
+@mixin label(
+  $label-selector: ".label",
+  $label--disabled-selector: ".label--disabled",
+  $label--above-selector: ".label--above",
+  $label--after-selector: ".label--after",
+  $label--below-selector: ".label--below",
+  $label--before-selector: ".label--before"
+) {
+  #{$label-selector} {
+    @extend %label;
+  }
+
+  #{$label--disabled-selector} {
+    @extend %label--disabled;
+  }
+
+  // Positioning margin
+  #{$label--above-selector} {
+    @extend %label--above;
+  }
+  #{$label--after-selector} {
+    @extend %label--after;
+  }
+  #{$label--below-selector} {
+    @extend %label--below;
+  }
+  #{$label--before-selector} {
+    @extend %label--before;
+  }
+}
+
 @mixin button-tokens-base() {
   //font
   --button-base__font-family: inherit;
@@ -1054,11 +1131,11 @@ Window
   @include button-tertiary();
 }
 
-@mixin form-input-element-tokens() {
+@mixin form-input-tokens() {
   // Common form input element tokens
-  --mer-form-input__border-color: var(--mer-color__neutral-gray--500);
-  --mer-form-input__border-style: solid;
   --mer-form-input__border-width: var(--mer-border__width--sm);
+  --mer-form-input__border-style: solid;
+  --mer-form-input__border-color: var(--mer-color__neutral-gray--500);
   --mer-form-input__border: var(--mer-form-input__border-width)
     var(--mer-form-input__border-style) var(--mer-form-input__border-color);
   --mer-form-input__border-radius: var(--mer-border__radius--sm);
@@ -1070,58 +1147,114 @@ Window
   //--mer-form-input__padding-inline is defined globally in /tokens/semantic/_other/
   // (Form Input) because it the padding-inline value is required in the calculation
   // of background-x position for RTL support, and this calculation needs to be on the :root
+
+  // placeholder
+  --mer-form-input__color--placeholder: var(--mer-text__on-surface);
+
+  // hover
+  --mer-form-input__border-color--hover: var(--mer-color__neutral-gray--00);
+
+  // disabled
+  --mer-form-input__color--disabled: var(--mer-text__on-disabled);
+  --mer-form-input__bg-color--disabled: var(--mer-color__neutral-gray--1100);
+  --mer-form-input__border-color--disabled: var(
+    --mer-accent__primary--disabled
+  );
+
+  // error
+  --mer-form-input__border-color--error: var(--mer-border-color__error);
 }
 
 
-// Base form-input-text sty
-%form-input-base {
-  @include form-input-element-tokens();
+%form-input {
+  @include form-input-tokens();
   font-family: var(--mer-form-input__font-family);
   border: var(--mer-form-input__border);
   border-radius: var(--mer-form-input__border-radius);
   color: var(--mer-form-input__color);
   font-size: var(--mer-form-input__font-size);
   block-size: var(--mer-control__block-size);
-}
-
-%form-input-text-only {
-  @extend %form-input-base;
   padding-inline: var(--mer-form-input__padding-inline);
-}
 
-@mixin form-input-text-only(
-  $selector: ".form-input-text-only",
-  $add--disabled: true
-) {
-  #{$selector} {
-    @extend %form-input-text-only;
+  &--focus {
+    @include focus-style(false);
   }
-}
 
-@mixin form-input-bg-x-rtl-support() {
-  // has to be included in the root
-  :root[dir="rtl"] {
-    --mer-form-input__bg-position--x: calc(
-      100% - var(--mer-form-input__bg-position--x-value)
+  &--hover {
+    border-color: var(--mer-form-input__border-color--hover);
+  }
+
+  &--disabled {
+    color: var(--mer-form-input__color--disabled);
+    border-color: var(--mer-form-input__border-color--disabled);
+    background-color: var(--mer-form-input__bg-color--disabled);
+  }
+
+  &--disabled-placeholder {
+    --mer-form-input__color--placeholder: var(
+      --mer-form-input__color--disabled
     );
   }
+
+  &--error {
+    border-color: var(--mer-form-input__border-color--error);
+  }
 }
-// - - - - - - - - - - - - - - - - - - - -
-//    Icons | Mask & Background
-// - - - - - - - - - - - - - - - - - - - -
 
-// Icon mask styles
-@mixin mer-icon-mask-common-styles(
-  $size: "sm",
-  $mask-size: var(--icon-mask-size)
+%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
 ) {
-  $iconSize: var(--mer-icon__box--sm);
-  @if $size == "lg" {
-    $iconSize: var(--mer-icon__box--lg);
+  #{$selector} {
+    @extend %form-input;
+
+    @if $add--placeholder-var {
+      // @include form-input-placeholder-var(); TODO
+    }
+
+    @if $add--placeholder {
+      &::placeholder {
+        @extend %form-input__placeholder;
+      }
+    }
+
+    &:focus {
+      @extend %form-input--focus;
+    }
+
+    @if $add--disabled {
+      &:disabled,
+      &--disabled {
+        @extend %form-input--disabled;
+      }
+    }
+
+    @if $add--error {
+      &--error {
+        @extend %form-input--error;
+      }
+    }
   }
-  @include icon-mask-common-styles($iconSize, $iconSize, $mask-size);
 }
 
+// - - - - - - - - - - - - - - - - - - - -
+//              Icon Path
+// - - - - - - - - - - - - - - - - - - - -
+
 /// @group Icon
 /// @param {String} $selector [".icon-mask"] -
 /// @param {type} $icon-path [null] -
@@ -1136,31 +1269,7 @@ Window
     @if $icon-class != null {
       @extend #{$icon-class} !optional;
     }
-
-    &::before {
-      @extend %icon-mask--before;
-    }
-  }
-}
-
-%icon-mask--before {
-  @include mer-icon-mask-common-styles($size: "sm", $mask-size: 100%);
-}
-
-// Icon background styles
-@mixin mer-icon-background-common-styles(
-  $size: "sm",
-  $background-size: var(--icon-mask-size)
-) {
-  $iconSize: var(--mer-icon__box--sm);
-  @if $size == "lg" {
-    $iconSize: var(--mer-icon__box--lg);
   }
-  @include icon-background-common-styles(
-    $iconSize,
-    $iconSize,
-    $background-size
-  );
 }
 
 /// @group Icon
@@ -1181,21 +1290,60 @@ Window
     @if $icon-class != null {
       @extend #{$icon-class} !optional;
     }
-
-    &::before {
-      @extend %icon-background--before;
-    }
   }
 }
 
-%icon-background--before {
-  @include mer-icon-background-common-styles(
-    $size: "sm",
+// - - - - - - - - - - - - - - - - - - - -
+//               Icon Sizes
+// - - - - - - - - - - - - - - - - - - - -
+
+%icon-size--sm {
+  @include icon-background-common-styles(
+    $inline-size: var(--mer-icon__box--sm),
+    $block-size: var(--mer-icon__box--sm),
+    $background-size: 100%
+  );
+}
+%icon-size--md {
+  @include icon-background-common-styles(
+    $inline-size: var(--mer-icon__box--md),
+    $block-size: var(--mer-icon__box--md),
     $background-size: 100%
   );
 }
 
-// Icon Input background styles
+/// @group Icon
+/// @param {String} $selector [".icon-size-sm"] -
+@mixin icon-size-sm($selector: ".icon-size-sm") {
+  #{$selector} {
+    ::before {
+      @extend %icon-size--sm;
+    }
+  }
+}
+/// @group Icon
+/// @param {String} $selector [".icon-size-sm"] -
+@mixin icon-size-sm($selector: ".icon-size-md") {
+  #{$selector} {
+    ::before {
+      @extend %icon-size--md;
+    }
+  }
+}
+
+// - - - - - - - - - - - - - - - - - - - -
+//              Form Input
+// - - - - - - - - - - - - - - - - - - - -
+
+@mixin form-input-bg-x-rtl-support() {
+  // has to be included in the root
+  :root[dir="rtl"] {
+    --mer-form-input__bg-position--x: calc(
+      100% - var(--mer-form-input__bg-position--x-value)
+    );
+  }
+}
+
 @mixin icon-input-background-common-styles(
   $background-size: "0",
   $background-position-x: "0"
@@ -1762,7 +1910,7 @@ Window
     }
 
     &::before {
-      @extend %icon-mask--before;
+      @extend %icon-size--md;
     }
   }
 }
@@ -1779,7 +1927,7 @@ Window
     }
 
     &::before {
-      @extend %icon-background--before;
+      @extend %icon-size--md;
     }
   }
 }
@@ -1796,28 +1944,28 @@ Window
     }
 
     &::before {
-      @extend %icon-background--before;
+      @extend %icon-size--md;
       @extend %button-icon-after-and-text--before;
     }
   }
 }
 
-%form-input-element-icon {
-  @extend %form-input-base;
+%form-input-icon {
+  @extend %form-input;
   padding-inline-start: calc(
     var(--mer-form-input__padding-inline) * 2 + var(--mer-form-input__icon-size)
   );
 }
 
-@mixin form-input-text-icon(
-  $selector: ".form-input-text-icon",
-  $icon-path: null
-) {
+/// @group Form
+/// @param {String} $selector [".form-input--icon"] -
+/// @param {type} $icon-path [null] -
+@mixin form-input-icon($selector: ".form-input--icon", $icon-path: null) {
   #{$selector} {
     @if $icon-path != null {
       --icon-path: #{$icon-path};
     }
-    @extend %form-input-element-icon;
+    @extend %form-input-icon;
     @extend %icon-input-background;
   }
 }
@@ -1826,7 +1974,8 @@ Window
 // Components
 @mixin checkbox-tokens() {
   // size
-  --ch-checkbox__container-size: var(--mer-spacing--md);
+  --ch-checkbox__container-size: var(--mer-control__block-size--tiny);
+  --ch-checkbox__option-size: calc(var(--mer-control__block-size--tiny) / 2);
 
   // border
   --mer-checkbox__border: var(--mer-border__width--sm) solid
@@ -1841,48 +1990,62 @@ Window
 
 %checkbox {
   @include checkbox-tokens();
-  font-weight: var(--mer-label__font-weight);
+  // TODO (inherit this from the form-control
+  font-family: var(--mer-form-input__font-family);
+  font-size: var(--mer-form-input__font-size);
+  line-height: var(--mer-line-height--regular);
+  color: var(--mer-form-input__color);
+  // END TODO (inherit this from the form-control)
 
   // Input
   &__input {
-    background-color: var(--mer-checkbox__bg-color);
-    border: var(--mer-checkbox__border);
-    border-radius: var(--mer-checkbox__border-radius);
+    border: var(--mer-form-input__border);
+    border-radius: var(--mer-border__radius--2xs);
 
     &--focus {
-      @include focus-style();
+      @include focus-style(true);
+    }
+
+    &--checked-and-indeterminate {
+      border-color: var(--mer-color__neutral-gray--300);
+    }
+
+    // Not implemented yet in the control
+    &--error {
+      background-color: var(--colors-Foundation-un-color__red--5);
     }
 
     &--disabled {
-      border-color: var(--mer-text__disabled);
+      border-color: var(--mer-border-color__primary--disabled);
     }
   }
 
   // Option
   &__option {
     &--checked {
-      color: var(--mer-checkbox-check__color);
+      color: var(--mer-border-color__neutral--active);
     }
 
     &--indeterminate {
-      inline-size: 8px;
-      block-size: 1.5px;
-      border-radius: 2px;
-      color: var(--mer-checkbox-check__color);
+      color: var(--mer-color__neutral-gray--300);
+      block-size: var(--mer-spacing--3xs);
+    }
+
+    // Not implemented yet in the control
+    &--error {
+      color: var(--mer-color__message-red--100);
+      border-color: var(--mer-border-color__error);
     }
 
     &--disabled {
-      color: var(--mer-text__disabled);
+      color: var(--mer-accent__primary--disabled);
+      border-color: var(-mer-border-color__primary--disabled);
     }
   }
 
   // Label
-  &__label {
-    margin-inline-start: var(--mer-label__space);
-
-    &--disabled {
-      color: var(--mer-text__disabled);
-    }
+  &__label--disabled {
+    color: var(--mer-text__primary--disabled);
   }
 }
 
@@ -1890,12 +2053,17 @@ Window
 /// @param {String} $checkbox-selector [".checkbox"] -
 /// @param {String} $checkbox__input-selector [".checkbox::part(input)"] -
 /// @param {String} $checkbox__input--disabled-selector [".checkbox::part(input disabled)"] -
+/// @param {String} $checkbox__input--checked-selector [".checkbox::part(input checked)"] -
+/// @param {String} $checkbox__input--indeterminate-selector [".checkbox::part(input indeterminate)"] -
+/// @param {String} $checkbox__input--error-selector [".checkbox::part(input error)"] -
 /// @param {String} $checkbox__option--disabled-selector [".checkbox::part(option disabled)"] -
 /// @param {String} $checkbox__option--checked-selector [".checkbox::part(option checked)"] -
 /// @param {String} $checkbox__option--indeterminate-selector [".checkbox::part(option indeterminate)"] -
+/// @param {String} $checkbox__option--error-selector [".checkbox::part(option error)"] -
 /// @param {String} $checkbox__label-selector [".checkbox::part(label)"] -
 /// @param {String} $checkbox__label--disabled-selector [".checkbox::part(label disabled)"] -
 /// @param {Boolean} $add--disabled [true] -
+/// @param {Boolean} $add--error [true] -
 /// @param {Boolean} $add--label [true] -
 @mixin checkbox(
   $checkbox-selector: ".checkbox",
@@ -1904,6 +2072,13 @@ Window
 
   $checkbox__input--disabled-selector: ".checkbox::part(input disabled)",
 
+  $checkbox__input--checked-selector: ".checkbox::part(input checked)",
+
+  $checkbox__input--indeterminate-selector:
+    ".checkbox::part(input indeterminate)",
+
+  $checkbox__input--error-selector: ".checkbox::part(input error)",
+
   $checkbox__option--disabled-selector: ".checkbox::part(option disabled)",
 
   $checkbox__option--checked-selector: ".checkbox::part(option checked)",
@@ -1911,20 +2086,21 @@ Window
   $checkbox__option--indeterminate-selector:
     ".checkbox::part(option indeterminate)",
 
+  $checkbox__option--error-selector: ".checkbox::part(option error)",
+
   $checkbox__label-selector: ".checkbox::part(label)",
 
   $checkbox__label--disabled-selector: ".checkbox::part(label disabled)",
 
   $add--disabled: true,
+  $add--error: true,
   $add--label: true
 ) {
   #{$checkbox-selector} {
     @extend %checkbox;
   }
 
-  // - - - - - - - - - - - - - - - - - - - -
-  //                  Input
-  // - - - - - - - - - - - - - - - - - - - -
+  // Input
   #{$checkbox__input-selector} {
     @extend %checkbox__input;
 
@@ -1932,10 +2108,15 @@ Window
       @extend %checkbox__input--focus;
     }
   }
+  #{$checkbox__input--checked-selector} {
+    @extend %checkbox__input--checked-and-indeterminate;
+  }
 
-  // - - - - - - - - - - - - - - - - - - - -
-  //                 Option
-  // - - - - - - - - - - - - - - - - - - - -
+  #{$checkbox__input--indeterminate-selector} {
+    @extend %checkbox__input--checked-and-indeterminate;
+  }
+
+  // Option
   #{$checkbox__option--checked-selector} {
     @extend %checkbox__option--checked;
   }
@@ -1944,18 +2125,15 @@ Window
     @extend %checkbox__option--indeterminate;
   }
 
-  // - - - - - - - - - - - - - - - - - - - -
-  //                  Label
-  // - - - - - - - - - - - - - - - - - - - -
+  // Label
   @if $add--label {
     #{$checkbox__label-selector} {
-      @extend %checkbox__label;
+      @extend %label;
+      margin-inline-start: var(--label__inline-margin);
     }
   }
 
-  // - - - - - - - - - - - - - - - - - - - -
-  //                Disabled
-  // - - - - - - - - - - - - - - - - - - - -
+  // Disabled
   @if $add--disabled {
     // Input
     #{$checkbox__input--disabled-selector} {
@@ -1974,6 +2152,174 @@ Window
       }
     }
   }
+
+  // Error
+  @if $add--error {
+    // Input
+    #{$checkbox__input--error-selector} {
+      @extend %checkbox__input--error;
+    }
+
+    // Option
+    #{$checkbox__option--error-selector} {
+      @extend %checkbox__option--error;
+    }
+  }
+}
+
+@mixin radio-group-tokens() {
+  // css properties provided by ch-radio-group-render component. Do not edit their names.
+  --ch-radio-group__radio-container-size: var(--mer-control__block-size--tiny);
+  --ch-radio-group__radio-option-size: var(--mer-spacing--xs);
+  // /end
+
+  --radio-group_gap: var(--mer-spacing--xs);
+
+  // Item
+
+  // Container
+  --radio-group-container__border-color: var();
+
+  // Checked
+  --radio-group__color--checked: var();
+}
+
+
+%radio-group {
+  @include radio-group-tokens();
+
+  // TODO : Extend form input styles
+
+  // Css properties provided by the ch-radio-group-render
+  --ch-radio-group__radio-container-size: var(--mer-control__block-size--tiny);
+  --ch-radio-group__radio-option-size: calc(var(--mer-spacing--2xs) * 1.5);
+  // /End
+
+  color: var(--mer-body__color);
+  gap: var(--radio-group_gap);
+}
+
+%radio-item {
+  // gas is set as margin-inline-start on the "radio__label" part
+}
+
+%radio__container {
+  border: var(--mer-form-input__border);
+  flex-shrink: 0;
+
+  &--focus {
+    @include focus-style(true);
+  }
+
+  &--disabled {
+    color: var(--borders-un-border-color__disabled);
+  }
+
+  &--checked {
+    color: var(--mer-form-input-check__border-color);
+  }
+
+  // Not implemented yet in the control
+  &--error {
+    background-color: var(--colors-Foundation-un-color__red--100);
+    color: var(--borders-un-border-color__error);
+  }
+}
+
+%radio__label {
+  font-size: 12px;
+}
+
+%radio__label--disabled {
+  @extend %label--disabled;
+}
+
+/// @group Radio Group
+/// @param {String} $radio-group-selector [".radio-group"] -
+/// @param {String} $radio-item-selector [".radio-group::part(radio-item)"] -
+/// @param {String} $radio-item__container-selector [".radio-group::part(radio__container)"] -
+/// @param {String} $radio-item__container--focus-selector [".radio-group::part(radio__container):focus-within"] -
+/// @param {String} $radio-item__container--disabled-selector [".radio-group::part(radio__container disabled)"] -
+/// @param {String} $radio-item__container--checked-selector [".radio-group::part(radio__container checked)"] -
+/// @param {String} $radio-item__container--error-selector [".radio-group::part(radio__container error)"] -
+/// @param {String} $radio-item__label [".radio-group::part(radio__label)"] -
+/// @param {String} $radio-item__label--disabled-selector [".radio-group::part(radio__label disabled)"] -
+/// @param {Boolean} $add--disabled [true] -
+/// @param {Boolean} $add--error [true] -
+@mixin radio-group(
+  $radio-group-selector: ".radio-group",
+
+  $radio-item-selector: ".radio-group::part(radio-item)",
+
+  $radio-item__container-selector: ".radio-group::part(radio__container)",
+
+  $radio-item__container--focus-selector:
+    ".radio-group::part(radio__container):focus-within",
+
+  $radio-item__container--disabled-selector:
+    ".radio-group::part(radio__container disabled)",
+
+  $radio-item__container--checked-selector:
+    ".radio-group::part(radio__container checked)",
+
+  $radio-item__container--error-selector:
+    ".radio-group::part(radio__container error)",
+
+  $radio-item__label: ".radio-group::part(radio__label)",
+
+  $radio-item__label--disabled-selector:
+    ".radio-group::part(radio__label disabled)",
+
+  $add--disabled: true,
+
+  $add--error: true
+) {
+  #{$radio-group-selector} {
+    @extend %radio-group;
+  }
+
+  #{$radio-item-selector} {
+    @extend %radio-item;
+  }
+
+  #{$radio-item__container-selector} {
+    @extend %radio__container;
+  }
+
+  #{$radio-item__container--focus-selector} {
+    @extend %radio__container--focus;
+  }
+
+  @if $add--disabled {
+    #{$radio-item__container--disabled-selector} {
+      @extend %radio__container--disabled;
+      border-color: var(--mer-border-color__primary--disabled);
+    }
+  }
+
+  #{$radio-item__container--checked-selector} {
+    @extend %radio__container--checked;
+    border-color: var(--mer-color__neutral-gray--300);
+  }
+
+  @if $add--error {
+    #{$radio-item__container--error-selector} {
+      @extend %radio__container--error;
+    }
+  }
+
+  @if $radio-item__label {
+    #{$radio-item__label} {
+      @extend %label;
+      @extend %label--after;
+    }
+  }
+
+  @if $add--disabled {
+    #{$radio-item__label--disabled-selector} {
+      @extend %radio__label--disabled;
+    }
+  }
 }
 
 @mixin shortcuts-tokens() {
@@ -2029,13 +2375,25 @@ Window
 }
 
 @mixin tree-view-tokens() {
-  --ch-tree-view-item-custom-padding-inline-start: var(--mer-spacing--2xs);
+  // - - - - - - - - - - - - - - - - - - - -
+  //               Tree View
+  // - - - - - - - - - - - - - - - - - - - -
+  --tree-view__font-size: var(--mer-body__font-size);
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //     Item (Provided by the ch-tree)
+  // - - - - - - - - - - - - - - - - - - - -
+  --ch-tree-view-item-custom-padding-inline-start: var(--mer-spacing--xs);
   --ch-tree-view-item-gap: var(--mer-spacing--xs);
   --ch-tree-view-item__checkbox-size: var(--mer-spacing--md);
   --ch-tree-view-item__expandable-button-size: var(--mer-spacing--md);
   --ch-tree-view-item__image-size: var(--mer-spacing--md);
   --ch-tree-view-item__line--inset-inline-end: 4px;
 
+  // - - - - - - - - - - - - - - - - - - - -
+  //       Item (Custom css properties)
+  // - - - - - - - - - - - - - - - - - - - -
+
   --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);
@@ -2078,7 +2436,8 @@ Window
 
 %tree-view {
   @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);
 }
@@ -2215,6 +2574,10 @@ Window
     ".tree-view-primary::part(item__checkbox-input)",
   $item__checkbox-input--disabled-selector:
     ".tree-view-primary::part(item__checkbox-input disabled)",
+  $item__checkbox-input--checked-selector:
+    ".tree-view-primary::part(item__checkbox-input checked)",
+  $item__checkbox-input--indeterminate-selector:
+    ".tree-view-primary::part(item__checkbox-input indeterminate)",
   $item__checkbox-option--disabled-selector:
     ".tree-view-primary::part(item__checkbox-option disabled)",
   $item__checkbox-option--checked-selector:
@@ -2301,10 +2664,16 @@ Window
   @include checkbox(
     $checkbox-selector: #{$item__checkbox-selector},
 
+    // input
     $checkbox__input-selector: #{$item__checkbox-input-selector},
 
     $checkbox__input--disabled-selector: #{$item__checkbox-input--disabled-selector},
 
+    $checkbox__input--checked-selector: #{$item__checkbox-input--checked-selector},
+
+    $checkbox__input--indeterminate-selector: #{$item__checkbox-input--indeterminate-selector},
+
+    // option
     $checkbox__option--disabled-selector: #{$item__checkbox-option--disabled-selector},
 
     $checkbox__option--checked-selector: #{$item__checkbox-option--checked-selector},
@@ -2312,26 +2681,11 @@ Window
     $checkbox__option--indeterminate-selector: #{$item__checkbox-option--indeterminate-selector},
 
     $add--disabled: $add--disabled,
+    $add--error: false,
     $add--label: false
   );
 }
 
-// // folder
-// &--folder::part(action)::before {
-//   background-image: url("../src/showcase/assets/icons/folder.svg");
-// }
-// &--folder::part(action expanded)::before {
-//   background-image: url("../src/showcase/assets/icons/folder-open.svg");
-// }
-
-// // module
-// &--module::part(action)::before {
-//   background-image: url("../src/showcase/assets/icons/module.svg");
-// }
-// &--module::part(action expanded)::before {
-//   background-image: url("../src/showcase/assets/icons/module-open.svg");
-// }
-
 @mixin tabular-grid-tokens() {
   // Generic tokens for texts
   --grid-base__font-size: var(--mer-body__font-size);
@@ -2905,7 +3259,7 @@ Window
     gap: var(--grid-base__icon-gap);
   }
   #{$tabular-grid-rowset-legend__caret} {
-    @extend %icon-background--before;
+    @extend %icon-size--md;
   }
   #{$tabular-grid-rowset-legend__selector-label} {
     @extend %tabular-grid-rowset-legend__selector-label;
@@ -2915,7 +3269,7 @@ Window
   }
   #{$tabular-grid-rowset-legend__icon} {
     @extend %tabular-grid-rowset-legend__icon;
-    @extend %icon-background--before;
+    @extend %icon-size--md;
     @extend %icon__gemini-tools_category-group--on-surface-enabled-dark;
   }
 
@@ -2928,7 +3282,7 @@ Window
   }
   // drag icon
   #{$tabular-grid-cell__drag-icon} {
-    @extend %icon-background--before;
+    @extend %icon-size--md;
     @extend %icon__navigation_drag--on-surface-enabled-dark;
     margin-inline-end: var(--grid-base__icon-gap);
   }
@@ -2959,7 +3313,7 @@ Window
   // actions icon
   #{$tabular-grid-cell__actions-icon} {
     width: 100%;
-    @extend %icon-background--before;
+    @extend %icon-size--md;
     @extend %icon__gemini-tools_show-more-vertical--on-surface-enabled-dark;
     border: none;
   }
@@ -3165,8 +3519,9 @@ Window
 
   // Base
   $base-classes: true,
+  $label: true,
   $button-classes: true,
-  $form-input-text-classes: true,
+  $form-controls-classes: true,
   $icon-classes: true,
 
   // Icons
@@ -3175,6 +3530,7 @@ Window
   // Components
   $components: true,
   $checkbox: true,
+  $radio-group: true,
   $tree-view-primary: true,
   $tabular-grid: true,
   $code: true
@@ -18686,6 +19042,11 @@ gemini-tools: $gemini-tools,
   //              Base classes
   // - - - - - - - - - - - - - - - - - - - -
   @if $base-classes {
+    // Label classes
+    @if $label {
+      @include label();
+    }
+
     // Button classes
     @if $button-classes {
       // Button primary
@@ -18698,16 +19059,16 @@ gemini-tools: $gemini-tools,
       @include button-tertiary();
     }
 
-    // Form input text
-    @if $form-input-text-classes {
-      @include form-input-text-only();
+    // Form control classes
+    @if $form-controls-classes {
+      @include form-input();
     }
 
     // Icon classes
     @if $icon-classes {
       @include icon-mask();
       @include icon-background();
-      @include form-input-text-icon();
+      @include form-input-icon();
       @include form-input-bg-x-rtl-support();
     }
   }
@@ -18732,7 +19093,7 @@ gemini-tools: $gemini-tools,
     @include button-icon-after-and-text();
 
     // Form input text
-    @include form-input-text-icon();
+    @include form-input-icon();
   }
 
   // - - - - - - - - - - - - - - - -  - - -
@@ -18743,6 +19104,12 @@ gemini-tools: $gemini-tools,
     @if $checkbox {
       @include checkbox();
     }
+
+    // radio-group
+    @if $radio-group {
+      @include radio-group();
+    }
+
     // tree view
     @if $tree-view-primary {
       @include tree-view-primary();