@rolster/styles-foundations 2.5.44 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.5.44",
+  "version": "2.6.0",
   "description": "Front-end style pack to develop responsive and mobile projects on the web with Rolster.",
   "sass": "scss/styles.scss",
   "style": "dist/styles.css",

package/scss/components/app.scss

@@ -131,10 +131,10 @@
   }
 }
 
-@media screen and (max-width: 320px) {
+@media screen and (max-width: 480px) {
   .rls-app {
     &__body {
-      --pvt-navbar-dimension: 120rem;
+      --pvt-navbar-dimension: calc(100vw - 32rem);
     }
   }
 }

package/scss/components/data-table.scss

@@ -1,27 +1,51 @@
 // Rolster Technology Datatable Component
-// v2.5.2
+// v2.6.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 24/Sep/2025
+// Updated: 08/Nov/2025
+
+@mixin datatable_cell() {
+  --rlc-field-box-body-background: transparent;
+  --rlc-field-box-body-background-focused: transparent;
+  --rlc-field-box-body-padding: 0rem;
+  --rlc-field-box-body-border: none;
+  --rlc-field-box-body-border-focused: none;
+  --rlc-field-box-body-border-error: none;
+  --rlc-field-box-body-border-disabled: none;
+  --rlc-field-box-body-shadow: none;
+  --rlc-field-box-body-shadow-error: none;
+  --rlc-field-box-action-background: transparent;
+
+  --rlc-field-list-control-font-size: var(--pvt-datatable-font-size);
+  --rlc-field-list-control-font-weight: var(--rls-font-weight-medium);
+  --rlc-field-list-control-letter-spacing: var(--rls-body-letter-spacing);
+  --rlc-field-list-element-padding: var(--rls-sizing-x4);
+  --rlc-field-list-suggestions-bottom: var(--rls-sizing-x24);
+  --rlc-field-list-suggestions-top: var(--rls-sizing-x24);
+
+  --rlc-poster-font-size: var(--pvt-datatable-font-size);
+  --rlc-poster-width: calc(100% - var(--rls-sizing-x2));
+  --rlc-poster-height: var(--rls-sizing-x8);
+  --rlc-poster-padding: var(--rls-sizing-x2);
+}
 
 @mixin datatable_cell_control() {
+  --rlc-action-ripple-dimension: var(--rls-sizing-x16);
+  --rlc-action-ripple-position: -8rem;
+
   --rlc-avatar-radius: var(--rls-sizing-x3);
   --rlc-avatar-width: var(--rls-sizing-x16);
   --rlc-avatar-height: var(--rls-sizing-x16);
   --rlc-avatar-font-size: var(--pvt-datatable-font-size);
 
-  --rlc-action-ripple-dimension: var(--rls-sizing-x16);
-  --rlc-action-ripple-position: -8rem;
-
   --rlc-image-width: var(--rls-sizing-x12);
   --rlc-image-height: var(--rls-sizing-x12);
 
-  --rlc-switch-max-width: 17rem;
-  --rlc-switch-component-padding: var(--rls-sizing-x3) var(--rls-sizing-x1);
-  --rlc-switch-element-size: var(--rls-sizing-x10);
-  --rlc-switch-bar-radius: var(--rls-sizing-x2);
-  --rlc-switch-bar-height: var(--rls-sizing-x4);
+  --rlc-switch-max-width: var(--rls-sizing-x16);
+  --rlc-switch-component-height: var(--rls-sizing-x8);
+  --rlc-switch-element-height: var(--rls-sizing-x4);
+  --rlc-switch-element-radius: var(--rls-sizing-x4);
 
   display: flex;
   justify-content: center;
@@ -44,21 +68,24 @@
 
   --pvt-datatable-header-background: var(
     --rlc-datatable-header-background,
-    var(--rls-theme-color-050)
+    var(--rls-app-color-100)
   );
 
   --pvt-datatable-record-background: var(
     --rlc-datatable-record-background,
-    var(--rls-app-color-100)
+    transparent
   );
 
   --pvt-datatable-padding-component: 0rem;
   --pvt-datatable-padding-scroll: var(--rlc-datatable-padding-scroll, 0rem);
   --pvt-datatable-header-padding-right: var(--pvt-datatable-padding-scroll);
+  --pvt-datatable-floating-background: var(--rls-app-color-100);
 
   --rlc-amount-font-size: var(--pvt-datatable-font-size);
   --rlc-amount-width: 100%;
+
   --rlc-badge-padding: 0.5rem 1.5rem;
+
   --rlc-ballot-padding: 0rem;
   --rlc-ballot-component-row-gap: var(--rls-sizing-x1);
   --rlc-ballot-title-letter-spacing: var(--rls-smalltext-letter-spacing);
@@ -67,16 +94,16 @@
   --rlc-ballot-subtitle-letter-spacing: var(--rls-overline-letter-spacing);
   --rlc-ballot-subtitle-font-size: var(--rls-overline-font-size);
   --rlc-ballot-subtitle-height: var(--rls-overline-line-height);
-  --rlc-fieldbox-body-background: transparent;
-  --rlc-fieldbox-padding: 0rem;
-  --rlc-fieldbox-width: 100%;
-  --rlc-fieldbox-error-display: none;
-  --rlc-fieldbox-label-display: none;
+
+  --rlc-field-box-body-background: transparent;
+  --rlc-field-box-padding: 0rem;
+  --rlc-field-box-width: 100%;
+  --rlc-field-box-error-display: none;
+  --rlc-field-box-label-display: none;
+
   --rlc-input-font-size: var(--pvt-datatable-font-size);
   --rlc-input-letter-spacing: var(--pvt-datatable-letter-spacing);
-  --rlc-poster-font-size: var(--pvt-datatable-font-size);
-  --rlc-poster-height: var(--rls-sizing-x8);
-  --rlc-poster-padding: var(--rls-sizing-x2);
+
   --rlc-skeleton-text-column-gap: var(--rls-sizing-x2);
 
   position: relative;
@@ -128,6 +155,7 @@
     padding: 0rem var(--rls-sizing-x6);
     box-sizing: border-box;
     background: var(--pvt-datatable-header-background);
+    border: var(--rls-app-border-1-300);
     border-radius: var(--rls-sizing-x4);
 
     .rls-poster {
@@ -144,7 +172,7 @@
     display: flex;
     height: var(--rls-sizing-x20);
     line-height: var(--rls-sizing-x20);
-    color: var(--rls-app-color-900);
+    color: var(--rls-app-color-700);
     font-weight: var(
       --rlc-datatable-header-font-weight,
       var(--rls-font-weight-semibold)
@@ -185,26 +213,39 @@
     column-gap: var(--rls-sizing-x6);
     padding: 0rem var(--rls-sizing-x6);
     box-sizing: border-box;
-    border-radius: var(--rls-sizing-x4);
     background: var(--pvt-datatable-record-background);
+    border: var(--rls-app-border-1-300);
+    border-radius: var(--rls-sizing-x4);
 
     &--success {
+      --pvt-datatable-floating-background: var(--rls-success-color-100);
+
       background: var(--rls-success-color-050);
+      border: var(--rls-success-border-1-300);
     }
 
     &--info {
+      --pvt-datatable-floating-background: var(--rls-info-color-100);
+
       background: var(--rls-info-color-050);
+      border: var(--rls-info-border-1-300);
     }
 
     &--warning {
+      --pvt-datatable-floating-background: var(--rls-warning-color-100);
+
       background: var(--rls-warning-color-050);
+      border: var(--rls-warning-border-1-300);
     }
 
     &--error {
+      --pvt-datatable-floating-background: var(--rls-danger-color-100);
+
       background: var(--rls-danger-color-050);
+      border: var(--rls-danger-border-1-300);
     }
 
-    &--overflow {
+    &--contained {
       overflow: hidden;
     }
   }
@@ -219,19 +260,7 @@
 
   &__cell,
   &__data {
-    --rlc-fieldbox-body-background: transparent;
-    --rlc-fieldbox-body-background-focused: transparent;
-    --rlc-fieldbox-body-padding: 0rem;
-    --rlc-fieldbox-body-shadow: none;
-    --rlc-fieldbox-body-shadow-error: none;
-    --rlc-fieldbox-action-background: transparent;
-
-    --rlc-fieldlist-control-font-size: var(--pvt-datatable-font-size);
-    --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
-    --rlc-fieldlist-control-letter-spacing: var(--rls-body-letter-spacing);
-    --rlc-fieldlist-element-padding: var(--rls-sizing-x4);
-    --rlc-fieldlist-suggestions-bottom: var(--rls-sizing-x24);
-    --rlc-fieldlist-suggestions-top: var(--rls-sizing-x24);
+    @include datatable_cell();
 
     position: relative;
     display: flex;
@@ -244,7 +273,7 @@
     font-size: var(--pvt-datatable-font-size);
     letter-spacing: var(--pvt-datatable-letter-spacing);
 
-    &--overflow {
+    &--contained {
       overflow: hidden;
     }
 
@@ -269,12 +298,11 @@
     }
 
     .rls-field-list {
-      --rlc-fieldbox-body-padding: var(--rls-sizing-x4) 0rem;
-      --rlc-fieldbox-action-dimension: var(--rls-sizing-x10);
+      --rlc-field-box-body-padding: var(--rls-sizing-x4) 0rem;
+      --rlc-field-box-action-dimension: var(--rls-sizing-x10);
     }
 
     .rls-poster {
-      width: calc(100% - var(--rls-sizing-x2));
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -304,7 +332,7 @@
     align-items: center;
     z-index: var(--rls-z-index-2);
     padding: 0rem var(--rls-sizing-x6);
-    background: var(--rls-theme-color-100);
+    background: var(--pvt-datatable-floating-background);
     border-right: none;
     transform: translateX(calc(100% - var(--rls-sizing-x4)));
     transition: transform 240ms var(--rls-standard-curve);
@@ -325,6 +353,10 @@
       transform: translateX(calc(-100% + var(--rls-sizing-x4)));
     }
 
+    &[rls-theme] {
+      background: var(--rls-theme-color-050);
+    }
+
     .rls-button-action__tooltip {
       top: 0;
       left: var(--pvt-action-tooltip-left);
@@ -335,14 +367,14 @@
   }
 
   &__summary {
-    --pvt-datatable-record-background: var(--rls-app-color-200);
+    --pvt-datatable-record-background: var(--rls-app-color-100);
 
     padding-right: var(--pvt-datatable-header-padding-right);
     box-sizing: border-box;
   }
 
   &__footer {
-    --pvt-datatable-record-background: var(--rls-app-color-200);
+    --pvt-datatable-record-background: var(--rls-app-color-100);
 
     position: relative;
     width: 100%;

package/scss/components/field-box.scss

@@ -1,20 +1,40 @@
 // Rolster Technology FieldBox Component
-// v2.2.2
+// v2.3.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 08/Sep/2022
-// Updated: 18/Sep/2025
+// Updated: 28/Oct/2025
 
 .rls-field-box {
   --pvt-body-background: var(
-    --rlc-fieldbox-body-background,
-    var(--rls-app-color-100)
+    --rlc-field-box-body-background,
+    var(--rls-app-color-050)
+  );
+
+  --pvt-body-border: var(
+    --rlc-field-box-body-border,
+    var(--rls-app-border-1-300)
+  );
+
+  --pvt-body-border-focused: var(
+    --rlc-field-box-body-border-focused,
+    var(--rls-theme-border-1-500)
+  );
+
+  --pvt-body-border-error: var(
+    --rlc-field-box-body-border-error,
+    var(--rls-danger-border-1-300)
+  );
+
+  --pvt-body-border-disabled: var(
+    --rlc-field-box-body-border-disabled,
+    var(--rls-app-border-1-300)
   );
 
   --pvt-body-shadow: none;
 
   --pvt-label-font-color: var(
-    --rlc-fieldbox-label-font-color,
+    --rlc-field-box-label-font-color,
     var(--rls-app-color-600)
   );
 
@@ -23,38 +43,39 @@
 
   position: relative;
   display: flex;
-  width: var(--rlc-fieldbox-width, 100%);
+  width: var(--rlc-field-box-width, 100%);
   flex-direction: column;
-  padding: var(--rlc-fieldbox-padding, 0rem);
+  row-gap: var(--rls-sizing-x2);
+  padding: var(--rlc-field-box-padding, 0rem);
   box-sizing: border-box;
   transition: height 160ms 0ms var(--rls-standard-curve);
 
   &--focused {
-    --pvt-body-background: var(
-      --rlc-fieldbox-body-background-focused,
-      var(--rls-app-color-050)
-    );
-
     --pvt-body-shadow: var(
-      --rlc-fieldbox-body-shadow,
+      --rlc-field-box-body-shadow,
       0px 0px 0px 3px var(--rls-theme-shadow-500)
     );
 
     --pvt-label-font-color: var(--rls-theme-color-500);
+    --pvt-body-border: var(--pvt-body-border-focused);
   }
 
   &--error {
     --pvt-body-shadow: var(
-      --rlc-fieldbox-body-shadow-error,
+      --rlc-field-box-body-shadow-error,
       0px 0px 0px 3px var(--rls-danger-shadow-500)
     );
 
     --pvt-label-font-color: var(--rls-danger-color-500);
+    --pvt-body-border: var(--pvt-body-border-error);
   }
 
   &--disabled {
     --pvt-body-opacity: 0.75;
     --pvt-label-opacity: 0.5;
+
+    --pvt-body-background: var(--rls-app-color-100);
+    --pvt-body-border: var(--pvt-body-border-disabled);
   }
 
   &--readonly {
@@ -63,11 +84,10 @@
 
   &__label {
     position: relative;
-    display: var(--rlc-fieldbox-label-display, block);
+    display: var(--rlc-field-box-label-display, block);
     width: 100%;
     padding: 0rem 5rem;
     box-sizing: border-box;
-    margin-bottom: var(--rls-sizing-x2);
     color: var(--pvt-label-font-color);
     opacity: var(--pvt-label-opacity);
     overflow: hidden;
@@ -88,12 +108,13 @@
     display: flex;
     align-items: center;
     column-gap: var(--rls-sizing-x2);
-    box-sizing: border-box;
     overflow: hidden;
-    opacity: var(--pvt-body-opacity);
-    border-radius: var(--rlc-fieldbox-body-radius, var(--rls-sizing-x2));
     background: var(--pvt-body-background);
-    padding: var(--rlc-fieldbox-body-padding, 0rem);
+    opacity: var(--pvt-body-opacity);
+    border-radius: var(--rlc-field-box-body-radius, var(--rls-sizing-x4));
+    padding: var(--rlc-field-box-body-padding, 0rem);
+    box-sizing: border-box;
+    border: var(--pvt-body-border);
     box-shadow: var(--pvt-body-shadow);
   }
 
@@ -112,9 +133,8 @@
   }
 
   &__error {
-    display: var(--rlc-fieldbox-error-display, block);
+    display: var(--rlc-field-box-error-display, block);
     padding: 0rem var(--rls-sizing-x4);
     box-sizing: border-box;
-    margin-top: var(--rls-sizing-x2);
   }
 }

package/scss/components/field-list.scss

@@ -1,33 +1,45 @@
 // Rolster Technology FieldList Component
-// v1.4.2
+// v1.5.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 17/Sep/2025
+// Updated: 08/Nov/2025
 
 .rls-field-list {
+  --pvt-action-font-color: var(--rls-app-color-600);
+
   --pvt-action-dimension: var(
-    --rlc-fieldbox-action-dimension,
+    --rlc-field-box-action-dimension,
     var(--rls-sizing-x12)
   );
 
-  --pvt-action-font-color: var(--rls-app-color-600);
+  --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-opacity: 0;
   --pvt-list-transform: none;
+  --pvt-list-body-component-display: none;
+  --pvt-list-body-height: 0rem;
+  --pvt-list-body-max-height: 100%;
+  --pvt-list-body-border: var(--rls-theme-border-1-500);
+  --pvt-list-component-padding: 0rem var(--rls-sizing-x4);
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
 
-  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
 
   position: relative;
   box-sizing: border-box;
 
   &.rls-field-box--disabled {
     --pvt-action-font-color: var(--rls-app-color-400);
+    --pvt-action-background: transparent;
   }
 
   &.rls-field-box--readonly {
@@ -41,20 +53,20 @@
     height: var(--rls-sizing-x12);
     line-height: var(--rls-sizing-x12);
     padding: 0rem;
-    cursor: var(--rlc-fieldlist-control-cursor, default);
+    cursor: var(--rlc-field-list-control-cursor, default);
     border: none;
     outline: none;
     background: transparent;
     font-weight: var(
-      --rlc-fieldlist-control-font-weight,
+      --rlc-field-list-control-font-weight,
       var(--rls-font-weight-medium)
     );
     font-size: var(
-      --rlc-fieldlist-control-font-size,
+      --rlc-field-list-control-font-size,
       var(--rls-input-font-size)
     );
     letter-spacing: var(
-      --rlc-fieldlist-control-letter-spacing,
+      --rlc-field-list-control-letter-spacing,
       var(--rls-input-letter-spacing)
     );
     color: var(--rlc-input-font-color);
@@ -83,8 +95,8 @@
     color: var(--pvt-action-font-color);
     padding: 0rem;
     outline: none;
-    border-radius: var(--rlc-fieldbox-action-radius, var(--rls-sizing-x2));
-    background: var(--rlc-fieldbox-action-background, var(--rls-app-color-050));
+    border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
+    background: var(--pvt-action-background);
 
     .rls-icon {
       margin: 1rem;
@@ -94,7 +106,7 @@
   &__suggestions {
     position: absolute;
     top: var(
-      --rlc-fieldlist-suggestions-top,
+      --rlc-field-list-suggestions-top,
       calc(100% + var(--rls-sizing-x6))
     );
     bottom: initial;
@@ -109,7 +121,7 @@
 
     &--visible {
       --pvt-list-height: auto;
-      --pvt-list-max-height: 160rem;
+      --pvt-list-body-height: auto;
       --pvt-list-opacity: 1;
 
       overflow: initial;
@@ -120,7 +132,7 @@
     &--higher {
       top: initial;
       bottom: var(
-        --rlc-fieldlist-suggestions-bottom,
+        --rlc-field-list-suggestions-bottom,
         calc(100% - var(--rls-sizing-x4))
       );
     }
@@ -129,17 +141,28 @@
       display: flex;
       flex-direction: column;
       width: 100%;
-      height: var(--pvt-list-height);
-      max-height: var(--pvt-list-max-height);
+      height: var(--pvt-list-body-height);
+      max-height: var(--pvt-list-body-max-height);
       padding: var(--rls-sizing-x4) var(--rls-sizing-x2);
       box-sizing: border-box;
       border-radius: var(--rls-sizing-x4);
       opacity: var(--pvt-list-opacity);
       overflow: hidden;
       z-index: var(--rls-z-index-2);
+      border: var(--pvt-list-body-border);
       background: var(--rls-app-color-050);
       box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
       transform: var(--pvt-list-transform);
+
+      &::before {
+        display: var(--pvt-list-body-component-display);
+        content: '';
+        width: var(--rls-sizing-x24);
+        height: var(--rls-sizing-x2);
+        border-radius: var(--rls-sizing-x2);
+        background: var(--rls-app-color-300);
+        margin: var(--rls-sizing-x3) auto;
+      }
     }
   }
 
@@ -149,7 +172,7 @@
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: 0rem var(--rls-sizing-x4);
+    padding: var(--pvt-list-component-padding);
     box-sizing: border-box;
   }
 
@@ -161,7 +184,7 @@
     box-sizing: border-box;
     outline: none;
     border-radius: var(--rls-sizing-x4);
-    padding: var(--rlc-fieldlist-element-padding, var(--rls-sizing-x2));
+    padding: var(--rlc-field-list-element-padding, var(--rls-sizing-x2));
     box-sizing: border-box;
 
     &:hover {
@@ -226,6 +249,9 @@
 @media screen and (max-width: 480px) {
   .rls-field-list {
     --pvt-list-transform: translateY(100%);
+    --pvt-list-body-component-display: block;
+    --pvt-list-body-border: none;
+    --pvt-list-component-padding: var(--rls-sizing-x6) var(--rls-sizing-x4);
 
     &__suggestions {
       position: fixed;
@@ -237,6 +263,7 @@
 
       &--visible {
         --pvt-list-max-height: initial;
+        --pvt-list-body-max-height: calc(100% - 28rem);
         --pvt-list-transform: translateY(0%);
         --pvt-backdrop-opacity: 1;
         --pvt-backdrop-bottom: 0rem;
@@ -247,23 +274,14 @@
       &__body {
         position: absolute;
         bottom: 0px;
-        border: none;
         z-index: var(--rls-z-index-4);
+        box-shadow: none;
         transition:
           opacity 240ms 0ms var(--rls-standard-curve),
           transform 240ms 0ms var(--rls-standard-curve);
       }
     }
 
-    &__ul {
-      max-width: 100%;
-      max-height: 75%;
-      padding: var(--rls-sizing-x8) var(--rls-sizing-x6);
-      border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
-      border: none;
-      box-shadow: none;
-    }
-
     &__empty {
       flex-direction: column;
       padding: var(--rls-sizing-x12) var(--rls-sizing-x2);

package/scss/foundations/borders.scss

@@ -0,0 +1,14 @@
+// Rolster Technology Borders Foundations
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 28/Oct/2025
+// Updated: 28/Oct/2025
+
+body {
+  --rls-app-border-1-transparent: var(--rls-border-1) solid transparent;
+
+  --rls-app-border-2-transparent: var(--rls-border-2) solid transparent;
+
+  --rls-app-border-4-transparent: var(--rls-border-4) solid transparent;
+}