@rolster/styles-foundations 2.7.3 → 3.0.0

package/scss/{components → design-system-bordered/molecules}/field-box.scss

@@ -1,9 +1,9 @@
 // Rolster Technology FieldBox Component
-// v2.3.2
+// v2.3.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 08/Sep/2022
-// Updated: 29/Nov/2025
+// Updated: 25/Abr/2026
 
 .rls-field-box {
   --pvt-body-background: var(--rlc-field-box-body-background, transparent);
@@ -40,6 +40,16 @@
     var(--rls-app-color-600)
   );
 
+  --pvt-action-dimension: var(
+    --rlc-field-box-action-dimension,
+    var(--rls-sizing-x12)
+  );
+
+  --pvt-action-background: var(
+    --rlc-field-box-action-background,
+    var(--rls-app-color-200)
+  );
+
   --pvt-label-opacity: 1;
   --pvt-body-opacity: 1;
 
@@ -120,6 +130,27 @@
     box-shadow: var(--pvt-body-shadow);
   }
 
+  &__action {
+    --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
+
+    display: flex;
+    flex: 0 0 auto;
+    width: var(--pvt-action-dimension);
+    height: var(--pvt-action-dimension);
+    align-items: center;
+    justify-content: center;
+    color: var(--rls-app-color-600);
+    padding: 0rem;
+    outline: none;
+    border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
+    background: var(--pvt-action-background);
+
+    &:disabled {
+      opacity: 0.5;
+      background: transparent;
+    }
+  }
+
   &__helper {
     color: var(--rls-app-color-400);
     padding: 0rem 5rem;

package/scss/design-system-bordered/molecules/field-decimal.scss

@@ -0,0 +1,14 @@
+// Rolster Technology FieldDecimal Component
+// v1.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 25/Sep/2025
+// Updated: 28/Oct/2025
+
+.rls-field-decimal {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}

package/scss/design-system-bordered/molecules/field-file.scss

@@ -0,0 +1,41 @@
+// Rolster Technology FieldFile Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 04/Apr/2026
+// Updated: 04/Apr/2026
+
+.rls-field-file {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-action-ripple-dimension: var(--rls-sizing-x12);
+  --rlc-action-ripple-position: -6rem;
+
+  --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
+  --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-input-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
+  --pvt-text-align: var(--rlc-input-text-align, left);
+  --pvt-component-font-color: var(--pvt-font-color);
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  .rls-field-file__input {
+    display: none;
+  }
+
+  .rls-input__component {
+    cursor: pointer;
+  }
+
+  .rls-button-action {
+    padding: 0rem;
+    width: var(--rls-sizing-x12);
+    height: var(--rls-sizing-x12);
+    z-index: 2;
+  }
+}

package/scss/design-system-bordered/molecules/field-list-suggestions.scss

@@ -0,0 +1,65 @@
+// Rolster Technology FieldListSuggestions Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Apr/2026
+
+.rls-field-list__ul {
+  &__search {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-top: var(--rls-sizing-x2);
+    margin-bottom: var(--rls-sizing-x6);
+    background: var(--rls-app-color-100);
+    border-radius: var(--rls-sizing-x4);
+    padding: var(--rls-sizing-x4);
+    box-sizing: border-box;
+
+    button {
+      color: var(--rls-app-color-600);
+      background: transparent;
+
+      &:not(:disabled):hover {
+        color: var(--rls-theme-color-300);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  &__control {
+    width: 100%;
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    padding: 0rem;
+    cursor: text;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--rls-app-color-900);
+    font-size: var(--rls-input-font-size);
+    font-weight: var(--rls-font-weight-medium);
+    letter-spacing: var(--rls-input-letter-spacing);
+
+    &::placeholder {
+      color: var(--rls-app-color-400);
+    }
+
+    &::selection {
+      background: var(--rls-theme-color-700);
+      color: var(--rls-app-color-050);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  .rls-progress-bar {
+    margin-bottom: var(--rls-sizing-x8);
+  }
+}

package/scss/{components → design-system-bordered/molecules}/field-list.scss

@@ -1,32 +1,19 @@
 // Rolster Technology FieldList Component
-// v1.5.3
+// v1.5.5
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 05/Feb/2026
+// Updated: 03/May/2026
 
 .rls-field-list {
-  --pvt-action-font-color: var(--rls-app-color-600);
-
-  --pvt-action-dimension: var(
-    --rlc-field-box-action-dimension,
-    var(--rls-sizing-x12)
-  );
-
-  --pvt-action-background: var(
-    --rlc-field-box-action-background,
-    var(--rls-app-color-200)
-  );
-
-  --pvt-control-width: calc(100% - var(--pvt-action-dimension));
   --pvt-control-pointer-events: initial;
   --pvt-list-height: 0rem;
-  --pvt-list-max-height: 160rem;
+  --pvt-list-max-height: 180rem;
   --pvt-list-opacity: 0;
   --pvt-list-transform: none;
   --pvt-list-body-component-display: none;
   --pvt-list-body-height: 0rem;
-  --pvt-list-body-max-height: 160rem;
+  --pvt-list-body-max-height: 180rem;
   --pvt-list-body-border: var(--rls-theme-border-1-500);
   --pvt-list-component-padding: 0rem var(--rls-sizing-x4);
   --pvt-element-opacity: 1;
@@ -51,7 +38,7 @@
 
   &__control {
     position: relative;
-    width: var(--pvt-control-width);
+    width: 100%;
     height: var(--rls-sizing-x12);
     line-height: var(--rls-sizing-x12);
     padding: 0rem;
@@ -89,22 +76,6 @@
     }
   }
 
-  &__action {
-    --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
-
-    width: var(--pvt-action-dimension);
-    height: var(--pvt-action-dimension);
-    color: var(--pvt-action-font-color);
-    padding: 0rem;
-    outline: none;
-    border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
-    background: var(--pvt-action-background);
-
-    .rls-icon {
-      margin: 1rem;
-    }
-  }
-
   &__suggestions {
     position: absolute;
     top: var(
@@ -146,10 +117,12 @@
 
     &__body {
       display: flex;
-      flex-direction: column;
       width: 100%;
       height: var(--pvt-list-body-height);
       max-height: var(--pvt-list-body-max-height);
+      flex-direction: column;
+      align-items: center;
+      row-gap: var(--rls-sizing-x6);
       padding: var(--rls-sizing-x4) var(--rls-sizing-x2);
       box-sizing: border-box;
       border-radius: var(--rls-sizing-x4);
@@ -166,9 +139,9 @@
         content: '';
         width: var(--rls-sizing-x24);
         height: var(--rls-sizing-x2);
+        margin: var(--rls-sizing-x3) auto;
         border-radius: var(--rls-sizing-x2);
         background: var(--rls-app-color-300);
-        margin: var(--rls-sizing-x3) auto;
       }
     }
   }
@@ -194,6 +167,7 @@
     border-radius: var(--rls-sizing-x4);
     padding: var(--rlc-field-list-element-padding, var(--rls-sizing-x2));
     box-sizing: border-box;
+    cursor: default;
     opacity: var(--pvt-element-opacity);
     pointer-events: var(--pvt-element-pointer-events);
 
@@ -206,6 +180,48 @@
     }
   }
 
+  &__action {
+    padding: var(--pvt-list-component-padding);
+    box-sizing: border-box;
+
+    & > button {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: center;
+      column-gap: var(--rls-sizing-x4);
+      padding: var(--rls-sizing-x4);
+      box-sizing: border-box;
+      background: transparent;
+      border: none;
+      outline: none;
+      border-radius: var(--rls-sizing-x4);
+      color: var(--rls-theme-color-500);
+      font-size: var(--rls-label-font-size);
+      font-weight: var(--rls-font-weight-medium);
+      letter-spacing: var(--rls-label-letter-spacing);
+
+      &:hover:not(:disabled) {
+        background: var(--rls-theme-color-100);
+      }
+
+      &:focus-visible:not(:disabled) {
+        background: var(--rls-theme-color-100);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    &__description {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
   &__ballot {
     --rlc-ballot-padding: var(--rls-sizing-x4) var(--rls-sizing-x2);
     --rlc-ballot-component-row-gap: var(--rls-sizing-x2);

package/scss/design-system-bordered/molecules/field-money.scss

@@ -0,0 +1,14 @@
+// Rolster Technology FieldMoney Component
+// v1.0.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 28/Oct/2025
+
+.rls-field-money {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}

package/scss/design-system-bordered/molecules/field-number.scss

@@ -0,0 +1,14 @@
+// Rolster Technology FieldNumber Component
+// v1.0.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 06/May/2023
+// Updated: 28/Oct/2025
+
+.rls-field-number {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}

package/scss/design-system-bordered/molecules/field-password.scss

@@ -0,0 +1,23 @@
+// Rolster Technology FieldPassword Component
+// v1.0.6
+// @license MIT
+// Author: Rolster Developers
+// Created: 06/May/2023
+// Updated: 28/Oct/2025
+
+.rls-field-password {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-action-ripple-dimension: var(--rls-sizing-x12);
+  --rlc-action-ripple-position: -6rem;
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  .rls-button-action {
+    padding: 0rem;
+    width: var(--rls-sizing-x12);
+    height: var(--rls-sizing-x12);
+    z-index: 2;
+  }
+}

package/scss/design-system-bordered/molecules/field-percentage.scss

@@ -0,0 +1,14 @@
+// Rolster Technology FieldPercentage Component
+// v1.0.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 06/May/2023
+// Updated: 28/Oct/2025
+
+.rls-field-percentage {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}

package/scss/design-system-bordered/molecules/field-readonly.scss

@@ -0,0 +1,24 @@
+// Rolster Technology FieldReadonly Component
+// v1.0.5
+// @license MIT
+// Author: Rolster Developers
+// Created: 14/Abr/2025
+// Updated: 28/Oct/2025
+
+.rls-field-readonly {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-600));
+  --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-input-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
+  --pvt-text-align: var(--rlc-input-text-align, left);
+  --pvt-component-font-color: var(--pvt-font-color);
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}

package/scss/design-system-bordered/molecules/field-text.scss

@@ -0,0 +1,14 @@
+// Rolster Technology FieldText Component
+// v1.0.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 28/Oct/2025
+
+.rls-field-text {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}

package/scss/design-system-bordered/molecules/label-check-box.scss

@@ -0,0 +1,72 @@
+// Rolster Technology LabelCheckBox Component
+// v1.0.11
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 03/Feb/2026
+
+.rls-label-checkbox {
+  --pvt-dimension: var(--rlc-label-checkbox-dimension, var(--rls-sizing-x12));
+  --pvt-label-font-size: var(
+    --rlc-label-checkbox-font-size,
+    var(--rls-label-font-size)
+  );
+
+  --pvt-label-letter-spacing: var(
+    --rlc-label-checkbox-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
+
+  --rlc-checkbox-dimension: var(--pvt-dimension);
+  --rlc-checkbox-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
+
+  --pvt-text-opacity: 1;
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+
+  display: flex;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+
+  &--disabled {
+    --pvt-text-opacity: 0.5;
+
+    pointer-events: none;
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &--extended {
+    --pvt-text-text-overflow: initial;
+    --pvt-text-overflow: initial;
+    --pvt-text-white-space: initial;
+  }
+
+  &__component {
+    width: var(--pvt-dimension);
+    flex: 0 0 auto;
+  }
+
+  &__text {
+    flex: 1 1 auto;
+    font-size: var(--pvt-label-font-size);
+    font-weight: var(--rls-font-weight-medium);
+    letter-spacing: var(--pvt-label-letter-spacing);
+    line-height: var(--rlc-label-checkbox-line-height, var(--rls-sizing-x12));
+    color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
+    user-select: none;
+    opacity: var(--pvt-text-opacity);
+    overflow: hidden;
+
+    & > p {
+      height: initial;
+      overflow: initial;
+      text-overflow: initial;
+      white-space: initial;
+    }
+  }
+}

package/scss/design-system-bordered/molecules/label-radio-button.scss

@@ -0,0 +1,79 @@
+// Rolster Technology RadiobuttonLabel Component
+// v1.0.10
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 03/Feb/2026
+
+.rls-label-radiobutton {
+  --pvt-dimension: var(
+    --rlc-label-radiobutton-dimension,
+    var(--rls-sizing-x12)
+  );
+
+  --pvt-label-font-size: var(
+    --rlc-label-radiobutton-font-size,
+    var(--rls-label-font-size)
+  );
+
+  --pvt-label-letter-spacing: var(
+    --rlc-label-radiobutton-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
+
+  --rlc-radiobutton-dimension: var(--pvt-dimension);
+  --rlc-radiobutton-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
+
+  --pvt-text-opacity: 1;
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+
+  display: flex;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+
+  &--disabled {
+    --pvt-text-opacity: 0.5;
+
+    pointer-events: none;
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &--extended {
+    --pvt-text-text-overflow: initial;
+    --pvt-text-overflow: initial;
+    --pvt-text-white-space: initial;
+  }
+
+  &__component {
+    width: var(--pvt-dimension);
+    flex: 0 0 auto;
+  }
+
+  &__text {
+    flex: 1 1 auto;
+    font-size: var(--pvt-label-font-size);
+    font-weight: var(--rls-font-weight-medium);
+    letter-spacing: var(--pvt-label-letter-spacing);
+    line-height: var(
+      --rlc-label-radiobutton-line-height,
+      var(--rls-sizing-x12)
+    );
+    color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
+    user-select: none;
+    opacity: var(--pvt-text-opacity);
+    overflow: hidden;
+
+    & > p {
+      height: initial;
+      overflow: initial;
+      text-overflow: initial;
+      white-space: initial;
+    }
+  }
+}

package/scss/design-system-bordered/molecules/label-switch.scss

@@ -0,0 +1,71 @@
+// Rolster Technology SwitchLabel Component
+// v1.0.12
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 03/Feb/2026
+
+.rls-label-switch {
+  --rlc-switch-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
+
+  --pvt-label-font-size: var(
+    --rlc-label-switch-font-size,
+    var(--rls-label-font-size)
+  );
+
+  --pvt-label-letter-spacing: var(
+    --rlc-label-switch-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
+
+  --pvt-text-opacity: 1;
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+
+  display: flex;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+
+  &--disabled {
+    --pvt-text-opacity: 0.5;
+
+    pointer-events: none;
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &--extended {
+    --pvt-text-text-overflow: initial;
+    --pvt-text-overflow: initial;
+    --pvt-text-white-space: initial;
+    --pvt-text-height: auto;
+  }
+
+  &__component {
+    width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
+    flex: 0 0 auto;
+  }
+
+  &__text {
+    flex: 1 1 auto;
+    font-size: var(--pvt-label-font-size);
+    font-weight: var(--rls-font-weight-medium);
+    letter-spacing: var(--pvt-label-letter-spacing);
+    line-height: var(--rlc-label-switch-line-height, var(--rls-sizing-x12));
+    color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
+    user-select: none;
+    opacity: var(--pvt-text-opacity);
+    overflow: hidden;
+
+    & > p {
+      height: initial;
+      overflow: initial;
+      text-overflow: initial;
+      white-space: initial;
+    }
+  }
+}