@rolster/styles-foundations 2.7.3 → 3.0.0

package/scss/design-system-bordered/molecules/slider.scss

@@ -0,0 +1,74 @@
+// Rolster Technology Slider Component
+// v2.0.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Jul/2018
+// Updated: 30/Nov/2025
+
+.rls-slider {
+  --pvt-track-height: var(--rls-sizing-x3);
+  --pvt-thumb-background: var(--rls-theme-color-600);
+  --pvt-thumb-color: var(--rls-theme-color-050);
+
+  &--empty {
+    --pvt-thumb-background: var(--rls-app-color-300);
+    --pvt-thumb-color: var(--rls-app-color-900);
+  }
+
+  &__component {
+    position: relative;
+    width: calc(100% - var(--rls-sizing-x10));
+    margin: 0rem 5rem;
+    padding: var(--rls-sizing-x4) 0rem;
+    box-sizing: border-box;
+  }
+
+  &__body {
+    display: flex;
+    column-gap: var(--rls-sizing-x4);
+    align-items: center;
+
+    .rls-icon {
+      padding: var(--rls-sizing-x4);
+      border-radius: 50%;
+      background: var(--rls-app-color-300);
+    }
+  }
+
+  &__track {
+    position: relative;
+    width: 100%;
+    height: var(--pvt-track-height);
+    cursor: pointer;
+    background: var(--rls-app-color-300);
+
+    &__on {
+      position: absolute;
+      width: 0%;
+      height: var(--pvt-track-height);
+      overflow: hidden;
+      z-index: var(--rls-z-index-4);
+      transition: width 200ms 0ms var(--rls-standard-curve);
+      background: var(--rls-theme-color-600);
+    }
+  }
+
+  &__thumb {
+    position: absolute;
+    top: 0.5rem;
+    left: 0rem;
+    cursor: pointer;
+    width: var(--rls-sizing-x10);
+    height: var(--rls-sizing-x10);
+    line-height: var(--rls-sizing-x10);
+    text-align: center;
+    font-size: var(--rls-tiny-font-size);
+    font-weight: var(--rls-font-weight-medium);
+    color: var(--pvt-thumb-color);
+    z-index: var(--rls-z-index-4);
+    border-radius: 50%;
+    background: var(--pvt-thumb-background);
+    transform: translateX(-50%);
+    transition: left 200ms 0ms var(--rls-standard-curve);
+  }
+}

package/scss/design-system-bordered/molecules/tabs.scss

@@ -0,0 +1,51 @@
+// Rolster Technology Tabs Component
+// v1.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 10/Nov/2025
+// Updated: 13/Ene/2026
+
+.rls-tabs {
+  --pvt-background: var(--rls-app-color-100);
+  --pvt-border: var(--rls-app-border-1-200);
+  --pvt-children-font-color: var(--rls-app-color-800);
+
+  display: flex;
+  background: var(--pvt-background);
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x4);
+  border: var(--pvt-border);
+
+  &__children {
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    border-radius: var(--rls-sizing-x4);
+    color: var(--rls-app-color-500);
+    font-size: var(--rls-smalltext-font-size);
+    font-weight: var(--rls-font-weight-medium);
+    letter-spacing: var(--rls-smalltext-letter-spacing);
+    text-align: center;
+    cursor: pointer;
+    transition: all 240ms var(--rls-standard-curve);
+
+    &--active {
+      color: var(--pvt-children-font-color);
+      font-weight: var(--rls-font-weight-bold);
+      background: var(--rls-app-color-050);
+    }
+
+    &--disabled {
+      color: var(--rls-app-color-400);
+      font-weight: var(--rls-font-weight-regular);
+      background: transparent;
+      cursor: not-allowed;
+    }
+  }
+
+  &[rls-theme] {
+    --pvt-background: var(--rls-theme-color-050);
+    --pvt-border: var(--rls-theme-border-1-200);
+    --pvt-children-font-color: var(--rls-theme-color-600);
+  }
+}

package/scss/design-system-bordered/molecules/toolbar.scss

@@ -0,0 +1,53 @@
+// Rolster Technology Toolbar Component
+// v1.1.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 14/Nov/2025
+
+.rls-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: var(--rls-sizing-x6);
+  height: var(--rlc-toolbar-height, var(--rls-sizing-x28));
+
+  & > * {
+    width: auto;
+  }
+
+  &__description {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x2);
+    overflow: hidden;
+
+    & > label {
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__title {
+    color: var(--rls-app-color-900);
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    font-size: var(--rls-body-font-size);
+    letter-spacing: var(--rls-label-letter-spacing);
+    font-weight: var(--rls-font-weight-bold);
+  }
+
+  &__subtitle {
+    color: var(--rls-app-color-600);
+  }
+
+  &__actions {
+    display: flex;
+    box-sizing: border-box;
+    column-gap: var(--rls-sizing-x8);
+    align-items: center;
+  }
+}

package/scss/design-system-bordered/organisms/bottom-sheet.scss

@@ -0,0 +1,108 @@
+// Rolster Technology BottomSheet Component
+// v1.0.4
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Sep/2025
+// Updated: 08/Abr/2026
+
+.rls-bottom-sheet {
+  --pvt-component-transform: translateY(100%);
+  --pvt-component-height: 0rem;
+  --pvt-component-max-height: 75%;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 320ms;
+
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+
+  &--visible {
+    --pvt-component-visibility: visible;
+    --pvt-component-height: auto;
+    --pvt-component-opacity: 1;
+    --pvt-component-transform: translateY(0);
+    --pvt-backdrop-bottom: 0rem;
+    --pvt-backdrop-opacity: 1;
+
+    visibility: visible;
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    bottom: 0px;
+    width: 100%;
+    max-width: 240rem;
+    max-height: var(--pvt-component-max-height);
+    flex-direction: column;
+    opacity: var(--pvt-component-opacity);
+    visibility: var(--pvt-component-visibility);
+    z-index: var(--rls-z-index-2);
+    border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
+    background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
+    transform: var(--pvt-component-transform);
+    transition:
+      opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+      transform var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve),
+      visibility var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve);
+
+    &::before {
+      display: block;
+      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;
+    }
+  }
+
+  &__backdrop {
+    position: absolute;
+    display: block;
+    top: 0rem;
+    left: 0rem;
+    right: 0rem;
+    bottom: var(--pvt-backdrop-bottom);
+    opacity: var(--pvt-backdrop-opacity);
+    z-index: var(--rls-z-index-1);
+    background: var(
+      --rlc-bottom-sheet-backdrop-color,
+      var(--rls-theme-backdrop-400)
+    );
+    backdrop-filter: var(--rlc-bottom-sheet-backdrop-filter, blur(2px));
+    transition:
+      opacity 120ms 0ms var(--rls-deceleration-curve),
+      bottom 120ms 0ms var(--rls-deceleration-curve);
+  }
+}
+
+@media screen and (max-height: 960px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 32rem);
+  }
+}
+
+@media screen and (max-height: 720px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 24rem);
+  }
+}
+
+@media screen and (max-height: 560px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 16rem);
+  }
+}

package/scss/design-system-bordered/organisms/card.scss

@@ -0,0 +1,36 @@
+// Rolster Technology Card Component
+// v1.2.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 25/Nov/2025
+
+.rls-card {
+  --rlc-divider-background: var(--rls-app-color-300);
+  --pvt-background: var(--rls-app-color-050);
+  --pvt-border: var(--rlc-card-border, var(--rls-app-border-1-300));
+  --pvt-box-shadow: var(--rlc-card-box-shadow, var(--rls-app-shadow-center-6));
+
+  background: var(--pvt-background);
+  border-radius: var(--rls-sizing-x4);
+  box-shadow: var(--pvt-box-shadow);
+
+  &[rls-theme] {
+    --rlc-divider-background: var(--rls-theme-color-200);
+    --pvt-background: var(--rls-theme-color-050);
+    --pvt-border: var(--rlc-card-border, var(--rls-theme-border-1-200));
+  }
+
+  &--outline {
+    border: var(--pvt-border);
+    box-sizing: border-box;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rlc-card-content-gap, var(--rls-sizing-x4));
+    padding: var(--rlc-card-content-padding, var(--rls-sizing-x8));
+    box-sizing: border-box;
+  }
+}

package/scss/design-system-bordered/organisms/confirmation.scss

@@ -0,0 +1,186 @@
+// Rolster Technology Confirmation Component
+// v1.4.10
+// @license MIT
+// Author: Rolster Developers
+// Created: 04/Abr/2018
+// Updated: 04/May/2026
+
+.rls-confirmation {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+
+  --pvt-title-font-size: var(--rls-heading6-font-size);
+  --pvt-title-letter-spacing: var(--rls-heading6-letter-spacing);
+  --pvt-title-line-height: var(--rls-heading6-line-height);
+  --pvt-title-text-transform: initial;
+
+  --pvt-subtitle-font-size: var(--rls-body-font-size);
+  --pvt-subtitle-letter-spacing: var(--rls-body-letter-spacing);
+  --pvt-subtitle-line-height: var(--rls-body-line-height);
+  --pvt-subtitle-text-transform: initial;
+
+  --pvt-content-font-size: var(--rls-input-font-size);
+  --pvt-content-letter-spacing: var(--rls-input-letter-spacing);
+  --pvt-content-line-height: var(--rls-input-line-height);
+
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: var(--rls-html-max-width);
+  height: var(--rls-html-max-height);
+  justify-content: center;
+  align-items: center;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+
+  &--visible {
+    --pvt-component-visibility: visible;
+    --pvt-component-height: auto;
+    --pvt-component-opacity: 1;
+    --pvt-component-transform: translateY(0) scale(1);
+    --pvt-backdrop-bottom: 0rem;
+    --pvt-backdrop-opacity: 1;
+
+    visibility: visible;
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    width: calc(100% - var(--rls-sizing-x16));
+    max-width: 180rem;
+    height: var(--pvt-component-height);
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x8);
+    opacity: var(--pvt-component-opacity);
+    visibility: var(--pvt-component-visibility);
+    padding: var(--rls-sizing-x8) 0rem;
+    box-sizing: border-box;
+    z-index: var(--rls-z-index-4);
+    border-radius: var(--rls-sizing-x4);
+    background: var(--rls-app-color-050);
+    box-shadow: var(--rls-app-shadow-4);
+    transform: var(--pvt-component-transform);
+    transition:
+      opacity 125ms 0ms var(--rls-deceleration-curve),
+      transform 125ms 0ms var(--rls-deceleration-curve),
+      visibility 125ms 0ms var(--rls-deceleration-curve);
+  }
+
+  &__header {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x4);
+    padding: 0rem var(--rls-sizing-x8);
+    box-sizing: border-box;
+  }
+
+  &__title {
+    text-align: center;
+    color: var(--rls-app-color-900);
+    font-weight: var(--rls-font-weight-bold);
+    font-size: var(--pvt-title-font-size);
+    line-height: var(--pvt-title-line-height);
+    letter-spacing: var(--pvt-title-letter-spacing);
+    text-transform: var(--pvt-title-text-transform);
+  }
+
+  &__subtitle {
+    text-align: center;
+    color: var(--rls-theme-color-400);
+    font-weight: var(--rls-font-weight-bold);
+    font-size: var(--pvt-subtitle-font-size);
+    line-height: var(--pvt-subtitle-line-height);
+    letter-spacing: var(--pvt-subtitle-letter-spacing);
+    text-transform: var(--pvt-subtitle-text-transform);
+  }
+
+  &__body {
+    position: relative;
+    width: 100%;
+    padding: 0rem var(--rls-sizing-x8);
+    box-sizing: border-box;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x8);
+
+    & > p {
+      font-weight: var(--rls-font-weight-medium);
+      font-size: var(--pvt-content-font-size);
+      line-height: var(--pvt-content-line-height);
+      letter-spacing: var(--pvt-content-letter-spacing);
+      text-align: center;
+      color: var(--rls-app-color-600);
+    }
+  }
+
+  &__footer {
+    position: relative;
+    width: 100%;
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x12) 0rem
+      var(--rls-sizing-x12);
+    box-sizing: border-box;
+  }
+
+  &__actions {
+    --rlc-button-width: 100%;
+
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: row-reverse;
+    justify-content: center;
+    column-gap: var(--rls-sizing-x8);
+  }
+
+  &__backdrop {
+    position: absolute;
+    display: block;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: var(--pvt-backdrop-bottom);
+    opacity: var(--pvt-backdrop-opacity);
+    z-index: var(--rls-z-index-2);
+    background: var(--rlc-modal-backdrop-color, var(--rls-theme-backdrop-400));
+    backdrop-filter: var(--rlc-modal-backdrop-filter, blur(2px));
+    transition:
+      opacity 120ms 0ms var(--rls-deceleration-curve),
+      bottom 120ms 0ms var(--rls-deceleration-curve);
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .rls-confirmation {
+    --pvt-title-font-size: var(--rls-title-font-size);
+    --pvt-title-letter-spacing: var(--rls-title-letter-spacing);
+    --pvt-title-line-height: var(--rls-title-line-height);
+
+    --pvt-subtitle-font-size: var(--rls-smalltext-font-size);
+    --pvt-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
+    --pvt-subtitle-line-height: var(--rls-smalltext-line-height);
+
+    --pvt-content-font-size: var(--rls-paragraph-font-size);
+
+    &__header {
+      row-gap: var(--rls-sizing-x2);
+    }
+
+    &__actions {
+      flex-direction: column-reverse;
+      column-gap: 0rem;
+      row-gap: var(--rls-sizing-x4);
+    }
+  }
+}

package/scss/{components → design-system-bordered/organisms}/data-table.scss

@@ -69,20 +69,19 @@
     @include datatable_cell_control();
   }
 
-  &.rls-align-center {
-    justify-content: center;
-  }
-
   & > span {
     display: block;
-    width: 100%;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
   & > p {
-    padding: var(--rls-sizing-x2) 0rem;
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   .rls-field-list {
@@ -272,15 +271,16 @@
     position: relative;
     display: flex;
     min-height: var(--rls-sizing-x20);
-    align-items: center;
+    align-items: var(--rlc-datatable-align-items, center);
+    justify-content: var(--rlc-datatable-justify-content, flex-start);
+    text-align: left;
+    white-space: nowrap;
     font-weight: var(
       --rlc-datatable-header-font-weight,
       var(--rls-font-weight-semibold)
     );
     font-size: var(--pvt-datatable-font-size);
     letter-spacing: var(--pvt-datatable-letter-spacing);
-    text-align: left;
-    white-space: nowrap;
 
     @include datatable_cell_styles();
 
@@ -360,10 +360,12 @@
 
     position: relative;
     display: flex;
-    align-items: center;
+    min-height: var(--rls-sizing-x20);
+    align-items: var(--rlc-datatable-align-items, center);
+    justify-content: var(--rlc-datatable-justify-content, flex-start);
     cursor: default;
     text-align: left;
-    min-height: var(--rls-sizing-x20);
+    padding: var(--rls-sizing-x2) 0rem;
     font-size: var(--pvt-datatable-font-size);
     letter-spacing: var(--pvt-datatable-letter-spacing);
 

package/scss/design-system-bordered/organisms/dropdown.scss

@@ -0,0 +1,45 @@
+// Rolster Technology Dropdown Component
+// v1.0.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 13/Feb/2026
+// Updated: 28/Abr/2026
+
+.rls-dropdown {
+  --pvt-content-opacity: 0;
+  --pvt-content-transform: scale(0, 0);
+
+  position: var(--rlc-dropdown-position, absolute);
+  display: block;
+  opacity: 0;
+  width: auto;
+  z-index: -16;
+  pointer-events: none;
+  transition: opacity 240ms 0ms var(--rls-standard-curve);
+
+  &--visible {
+    --pvt-content-opacity: 1;
+    --pvt-content-transform: scale(1, 1);
+
+    opacity: 1;
+    pointer-events: initial;
+    z-index: var(--rlc-dropdown-z-index, var(--rls-z-index-4));
+  }
+
+  &__content {
+    display: block;
+    width: auto;
+    max-width: var(--rlc-dropdown-max-width, 150rem);
+    border-radius: var(--rlc-dropdown-radius, var(--rls-sizing-x6));
+    padding: var(--rlc-dropdown-padding, var(--rls-sizing-x6));
+    box-sizing: border-box;
+    border: var(--rlc-dropdown-border, var(--rls-app-border-1-200));
+    background: var(--rlc-dropdown-background, var(--rls-app-color-050));
+    box-shadow: var(--rls-theme-shadow-500);
+    opacity: var(--pvt-content-opacity);
+    transform: var(--pvt-content-transform);
+    transition:
+      transform 240ms 0ms var(--rls-standard-curve),
+      opacity 240ms 0ms var(--rls-standard-curve);
+  }
+}

package/scss/design-system-bordered/organisms/field-autocomplete.scss

@@ -0,0 +1,79 @@
+// Rolster Technology FieldAutocomplete Component
+// v1.0.7
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 26/May/2025
+
+.rls-field-autocomplete {
+  --pvt-control-width: 100%;
+  --pvt-control-opacity: 1;
+
+  &.rls-field-box--selected {
+    --pvt-control-width: calc(100% - var(--pvt-action-dimension));
+  }
+
+  &.rls-field-box--disabled {
+    --pvt-control-opacity: 0.5;
+  }
+
+  .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);
+    }
+  }
+}