@rolster/styles-foundations 3.0.4 → 3.0.6

package/scss/design-system-bordered/molecules/button-toggle.scss

@@ -1,100 +1,100 @@
-// Rolster Technology ButtonToggle Component
-// v1.1.4
-// @license MIT
-// Author: Rolster Developers
-// Created: 31/May/2023
-// Updated: 14/Nov/2025
-
-.rls-button-toggle {
-  width: auto;
-
-  &__content {
-    display: flex;
-    justify-content: center;
-  }
-
-  &__action {
-    --rlc-button-content-radius: var(--rls-sizing-x2) 0rem 0rem
-      var(--rls-sizing-x2);
-
-    width: auto;
-  }
-
-  &__icon {
-    --rlc-button-content-radius: 0rem var(--rls-sizing-x2) var(--rls-sizing-x2)
-      0rem;
-    --rlc-button-content-padding: var(--rls-sizing-x2);
-
-    width: auto;
-  }
-
-  &__list {
-    --rlc-button-toggle-ul-height: 0rem;
-    --rlc-button-toggle-ul-opacity: 0;
-    --rlc-button-toggle-ul-transform: none;
-
-    position: absolute;
-    top: 22.5rem;
-    left: 0rem;
-    width: 100%;
-    height: 0rem;
-    overflow: hidden;
-    z-index: var(--rls-z-index-4);
-
-    &--hide {
-      --rlc-button-toggle-ul-opacity: 0;
-      --rlc-button-toggle-ul-transform: scale(0, 0);
-    }
-
-    &--visible {
-      --rlc-button-toggle-ul-height: auto;
-      --rlc-button-toggle-ul-opacity: 1;
-      --rlc-button-toggle-ul-transform: scale(1, 1);
-
-      overflow: initial;
-      opacity: 1;
-      height: auto;
-    }
-
-    ul {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      float: left;
-      width: 100%;
-      height: var(--rlc-button-toggle-ul-height);
-      opacity: var(--rlc-button-toggle-ul-opacity);
-      padding: var(--rls-sizing-x4) 0rem;
-      border-radius: var(--rls-sizing-x4);
-      box-sizing: border-box;
-      overflow-y: auto;
-      overflow-x: hidden;
-      z-index: var(--rls-z-index-2);
-      background: var(--rls-app-color-050);
-      border: var(--rls-theme-border-1-500);
-      transform: var(--rlc-button-toggle-ul-transform);
-      transform-origin: 0% 0%;
-      box-shadow: var(--rls-theme-shadow-500);
-      transition: transform 240ms 0ms var(--rls-standard-curve),
-        opacity 240ms 0ms var(--rls-standard-curve);
-
-      li {
-        padding: 0rem var(--rls-sizing-x6);
-        box-sizing: border-box;
-        height: var(--rls-sizing-x20);
-        line-height: var(--rls-sizing-x20);
-        cursor: default;
-        font-weight: var(--rls-font-weight-semibold);
-        font-size: var(--rls-smalltext-font-size);
-        letter-spacing: var(--rls-smalltext-letter-spacing);
-        text-transform: uppercase;
-        color: var(--rls-app-color-600);
-
-        &:hover {
-          background: var(--rls-app-color-100);
-          color: var(--rls-app-color-900);
-        }
-      }
-    }
-  }
-}
+// Rolster Technology ButtonToggle Component
+// v1.1.4
+// @license MIT
+// Author: Rolster Developers
+// Created: 31/May/2023
+// Updated: 14/Nov/2025
+
+.rls-button-toggle {
+  width: auto;
+
+  &__content {
+    display: flex;
+    justify-content: center;
+  }
+
+  &__action {
+    --rlc-button-content-radius: var(--rls-sizing-x2) 0rem 0rem
+      var(--rls-sizing-x2);
+
+    width: auto;
+  }
+
+  &__icon {
+    --rlc-button-content-radius: 0rem var(--rls-sizing-x2) var(--rls-sizing-x2)
+      0rem;
+    --rlc-button-content-padding: var(--rls-sizing-x2);
+
+    width: auto;
+  }
+
+  &__list {
+    --rlc-button-toggle-ul-height: 0rem;
+    --rlc-button-toggle-ul-opacity: 0;
+    --rlc-button-toggle-ul-transform: none;
+
+    position: absolute;
+    top: 22.5rem;
+    left: 0rem;
+    width: 100%;
+    height: 0rem;
+    overflow: hidden;
+    z-index: var(--rls-z-index-4);
+
+    &--hide {
+      --rlc-button-toggle-ul-opacity: 0;
+      --rlc-button-toggle-ul-transform: scale(0, 0);
+    }
+
+    &--visible {
+      --rlc-button-toggle-ul-height: auto;
+      --rlc-button-toggle-ul-opacity: 1;
+      --rlc-button-toggle-ul-transform: scale(1, 1);
+
+      overflow: initial;
+      opacity: 1;
+      height: auto;
+    }
+
+    ul {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      float: left;
+      width: 100%;
+      height: var(--rlc-button-toggle-ul-height);
+      opacity: var(--rlc-button-toggle-ul-opacity);
+      padding: var(--rls-sizing-x4) 0rem;
+      border-radius: var(--rls-sizing-x4);
+      box-sizing: border-box;
+      overflow-y: auto;
+      overflow-x: hidden;
+      z-index: var(--rls-z-index-2);
+      background: var(--rls-app-color-050);
+      border: var(--rls-theme-border-1-500);
+      transform: var(--rlc-button-toggle-ul-transform);
+      transform-origin: 0% 0%;
+      box-shadow: var(--rls-theme-shadow-500);
+      transition: transform 240ms 0ms var(--rls-standard-curve),
+        opacity 240ms 0ms var(--rls-standard-curve);
+
+      li {
+        padding: 0rem var(--rls-sizing-x6);
+        box-sizing: border-box;
+        height: var(--rls-sizing-x20);
+        line-height: var(--rls-sizing-x20);
+        cursor: default;
+        font-weight: var(--rls-font-weight-semibold);
+        font-size: var(--rls-smalltext-font-size);
+        letter-spacing: var(--rls-smalltext-letter-spacing);
+        text-transform: uppercase;
+        color: var(--rls-app-color-600);
+
+        &:hover {
+          background: var(--rls-app-color-100);
+          color: var(--rls-app-color-900);
+        }
+      }
+    }
+  }
+}

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

@@ -1,14 +1,14 @@
-// Rolster Technology FieldArea Component
-// v1.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 17/Abr/2026
-// Updated: 17/Abr/2026
-
-.rls-field-area {
-  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
-
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
+// Rolster Technology FieldArea Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 17/Abr/2026
+// Updated: 17/Abr/2026
+
+.rls-field-area {
+  --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-decimal.scss

@@ -1,14 +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;
-}
+// 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

@@ -1,41 +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;
-  }
-}
+// 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

@@ -1,65 +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);
-  }
-}
+// 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/design-system-bordered/molecules/field-money.scss

@@ -1,14 +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;
-}
+// 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-password.scss

@@ -1,23 +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;
-  }
-}
+// 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-readonly.scss

@@ -1,24 +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;
-}
+// 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;
+}