@rolster/styles-foundations 3.0.6 → 3.1.0

package/scss/design-system-bordered/atoms/input-counter.scss

@@ -0,0 +1,110 @@
+// Rolster Technology InputCounter Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 15/May/2026
+// Updated: 15/May/2026
+
+.rls-input-counter {
+  --rlc-button-icon-border: none;
+
+  --pvt-body-border: var(
+    --rlc-input-counter-border,
+    var(--rls-app-border-1-200)
+  );
+  --pvt-body-background: var(
+    --rlc-input-counter-background,
+    var(--rls-app-color-050)
+  );
+
+  --pvt-body-shadow: none;
+
+  --pvt-button-background: var(
+    --rlc-input-counter-action-background,
+    var(--rls-app-color-200)
+  );
+
+  --pvt-button-background-hover: var(
+    --rlc-input-counter-action-background-hover,
+    var(--rls-app-color-300)
+  );
+
+  display: flex;
+  width: auto;
+  height: auto;
+  flex: 0 0 auto;
+  align-items: center;
+  column-gap: var(--rls-sizing-x3);
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: var(--rlc-input-counter-radius, var(--rls-sizing-x3));
+  border: var(--pvt-body-border);
+  box-shadow: var(--pvt-body-shadow);
+  background: var(--pvt-body-background);
+  transition: box-shadow 160ms 0ms var(--rls-standard-curve);
+
+  &--focused {
+    --pvt-body-shadow: var(
+      --rlc-input-counter-shadow-focused,
+      var(--rls-theme-shadow-500)
+    );
+
+    --pvt-body-border: var(
+      --rlc-input-counter-border-focused,
+      var(--rls-theme-border-1-500)
+    );
+  }
+
+  &--disabled {
+    --pvt-body-background: var(--rls-app-color-100);
+    --pvt-body-border: var(--rls-app-border-1-transparent);
+  }
+
+  &--readonly {
+    --pvt-body-background: transparent;
+  }
+
+  &__down {
+    --rlc-button-icon-radius: var(--rls-sizing-x3) 0rem 0rem
+      var(--rls-sizing-x3);
+  }
+
+  &__up {
+    --rlc-button-icon-radius: 0rem var(--rls-sizing-x3) var(--rls-sizing-x3)
+      0rem;
+  }
+
+  &__body {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  &__control {
+    width: var(--rlc-input-counter-width, 20rem);
+    padding: 0rem var(--rls-sizing-x3);
+    border: none;
+    outline: none;
+    text-align: center;
+    background: transparent;
+    color: var(--rlc-input-counter-font-color, var(--rls-app-color-900));
+    font-size: var(--rlc-input-counter-font-size, var(--rls-input-font-size));
+    font-weight: var(--rls-font-weight-medium);
+    letter-spacing: var(--rls-input-letter-spacing);
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &::placeholder {
+      color: var(--rls-app-color-400);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+}

package/scss/design-system-bordered/atoms/led.scss

@@ -12,7 +12,6 @@
   --pvt-shadow-width: var(--rlc-led-shadow-width, var(--rls-sizing-x4));
 
   width: auto;
-  background: var(--pvt-background);
   border-radius: 50%;
   box-shadow: 0 0 0 var(--pvt-shadow-width) var(--pvt-shadow-color);
 

package/scss/design-system-bordered/atoms/radio-button.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Radiobutton Component
-// v1.3.2
+// v1.3.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 16/Ene/2026
+// Updated: 17/May/2026
 
 .rls-radiobutton {
   --pvt-dimension: var(--rlc-radiobutton-dimension, var(--rls-sizing-x12));
@@ -14,6 +14,7 @@
   display: flex;
   width: var(--pvt-dimension);
   height: var(--pvt-dimension);
+  flex: 0 0 auto;
   justify-content: center;
   align-items: center;
   outline: none;

package/scss/design-system-bordered/atoms/switch.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Switch Component
-// v1.3.0
+// v1.3.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 25/Mar/2018
-// Updated: 28/Oct/2025
+// Updated: 17/May/2026
 
 .rls-switch {
   --pvt-component-background: var(--rls-app-color-400);
@@ -18,6 +18,7 @@
   --pvt-element-radius: var(--rlc-switch-element-radius, 50%);
 
   max-width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
+  flex: 0 0 auto;
 
   &:hover {
     cursor: var(--rlc-switch-cursor, initial);

package/scss/design-system-bordered/index.scss

@@ -14,6 +14,7 @@
   @include meta.load-css('atoms/area-text');
   @include meta.load-css('atoms/avatar');
   @include meta.load-css('atoms/badge');
+  @include meta.load-css('atoms/button-icon');
   @include meta.load-css('atoms/breadcrumb');
   @include meta.load-css('atoms/button');
   @include meta.load-css('atoms/button-action');
@@ -21,6 +22,7 @@
   @include meta.load-css('atoms/check-box');
   @include meta.load-css('atoms/icon');
   @include meta.load-css('atoms/image');
+  @include meta.load-css('atoms/input-counter');
   @include meta.load-css('atoms/input');
   @include meta.load-css('atoms/input-decimal');
   @include meta.load-css('atoms/input-money');
@@ -46,6 +48,7 @@
   @include meta.load-css('molecules/alert');
   @include meta.load-css('molecules/ballot');
   @include meta.load-css('molecules/button-progress');
+  @include meta.load-css('molecules/button-stepper');
   @include meta.load-css('molecules/button-toggle');
   @include meta.load-css('molecules/field-area');
   @include meta.load-css('molecules/field-box');
@@ -80,6 +83,7 @@
   @include meta.load-css('organisms/dropdown');
   @include meta.load-css('organisms/field-autocomplete');
   @include meta.load-css('organisms/field-clock');
+  @include meta.load-css('organisms/field-color');
   @include meta.load-css('organisms/field-date');
   @include meta.load-css('organisms/field-date-range');
   @include meta.load-css('organisms/field-select');
@@ -91,6 +95,7 @@
   @include meta.load-css('organisms/modal');
   @include meta.load-css('organisms/modal-sheet');
   @include meta.load-css('organisms/picker-clock');
+  @include meta.load-css('organisms/picker-color');
   @include meta.load-css('organisms/picker-date');
   @include meta.load-css('organisms/picker-date-range');
   @include meta.load-css('organisms/snackbar');

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

@@ -0,0 +1,14 @@
+// Rolster Technology ButtonStepper Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 16/May/2026
+// Updated: 16/May/2026
+
+.rls-button-stepper {
+  display: flex;
+  width: auto;
+  flex: 0 0 auto;
+  align-items: center;
+  column-gap: var(--rls-sizing-x4);
+}

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

@@ -117,6 +117,17 @@
   }
 
   &__body {
+    --rlc-button-icon-dimension: var(--rls-sizing-x12);
+    --rlc-button-icon-icon-dimension: calc(
+      var(--pvt-action-dimension) - var(--rls-sizing-x2)
+    );
+    --rlc-button-icon-background: var(--pvt-action-background);
+    --rlc-button-icon-border: none;
+    --rlc-button-icon-radius: var(
+      --rlc-field-box-action-radius,
+      var(--rls-sizing-x2)
+    );
+
     display: flex;
     align-items: center;
     column-gap: var(--rls-sizing-x2);
@@ -130,27 +141,6 @@
     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-list.scss

@@ -1,9 +1,9 @@
 // Rolster Technology FieldList Component
-// v1.5.5
+// v1.5.6
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 03/May/2026
+// Updated: 17/May/2026
 
 .rls-field-list {
   --pvt-control-pointer-events: initial;
@@ -180,6 +180,65 @@
     }
   }
 
+  &__multi {
+    &__chips {
+      display: flex;
+      min-height: var(--rls-sizing-x12);
+      flex-wrap: wrap;
+      gap: var(--rls-sizing-x2);
+    }
+
+    &__placeholder {
+      margin: auto 0rem;
+      cursor: default;
+      font-weight: var(
+        --rlc-field-list-control-font-weight,
+        var(--rls-font-weight-medium)
+      );
+      font-size: var(
+        --rlc-field-list-control-font-size,
+        var(--rls-input-font-size)
+      );
+      letter-spacing: var(
+        --rlc-field-list-control-letter-spacing,
+        var(--rls-input-letter-spacing)
+      );
+      color: var(--rls-app-color-400);
+    }
+
+    &__chip {
+      display: flex;
+      width: auto;
+      align-items: center;
+      column-gap: var(--rls-sizing-x1);
+      border-radius: var(--rls-sizing-x2);
+      padding: var(--rls-sizing-x1) var(--rls-sizing-x3);
+      background: var(--rls-app-color-200);
+
+      &__description {
+        font-size: var(--rls-caption-font-size);
+        letter-spacing: var(--rls-caption-letter-spacing);
+        font-weight: var(--rls-font-weight-semibold);
+      }
+
+      &__remove {
+        --rlc-icon-dimension: var(--rls-sizing-x8);
+
+        flex: 0 0 auto;
+        background: none;
+        padding: 0rem;
+        margin: 0rem;
+        outline: none;
+      }
+    }
+
+    &__element {
+      display: flex;
+      align-items: center;
+      column-gap: var(--rls-sizing-x4);
+    }
+  }
+
   &__action {
     padding: var(--pvt-list-component-padding);
     box-sizing: border-box;

package/scss/design-system-bordered/molecules/picker-selector-title.scss

@@ -32,23 +32,10 @@
     }
   }
 
-  & > button {
-    --rlc-icon-dimension: var(--rls-sizing-x10);
-
-    background: var(--rls-app-color-050);
-    outline: none;
-    padding: var(--rls-sizing-x2);
-    border-radius: var(--rls-sizing-x4);
-    color: var(--rls-app-color-900);
-
-    &:hover {
-      background: var(--rls-app-color-300);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      background: transparent;
-      color: var(--rls-app-color-600);
-    }
+  .rls-button-icon {
+    --rlc-button-icon-size: var(--rls-sizing-x14);
+    --rlc-button-icon-icon-size: var(--rls-sizing-x10);
+    --rlc-button-icon-background: var(--rls-app-color-050);
+    --rlc-button-icon-radius: var(--rls-sizing-x4);
   }
 }

package/scss/design-system-bordered/molecules/picker-year.scss

@@ -33,24 +33,11 @@
     }
   }
 
-  &__action {
-    --rlc-icon-dimension: var(--rls-sizing-x10);
-
-    background: var(--rls-theme-color-100);
-    color: var(--rls-theme-color-600);
-    outline: none;
-    padding: var(--rls-sizing-x2);
-    border-radius: var(--rls-sizing-x4);
-
-    &:not(:disabled):hover {
-      color: var(--rls-theme-color-500);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      background: transparent;
-      color: var(--rls-theme-color-300);
-    }
+  .rls-button-icon {
+    --rlc-button-icon-size: var(--rls-sizing-x14);
+    --rlc-button-icon-icon-size: var(--rls-sizing-x10);
+    --rlc-button-icon-background: var(--rls-theme-color-100);
+    --rlc-button-icon-radius: var(--rls-sizing-x4);
   }
 
   &__component {

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

@@ -0,0 +1,69 @@
+// Rolster Technology FieldColor Component
+// v1.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 15/May/2026
+// Updated: 17/May/2026
+
+.rls-field-color {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  --pvt-font-size: var(--rlc-field-color-font-size, var(--rls-input-font-size));
+
+  --pvt-letter-spacing: var(
+    --rlc-field-color-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  .rls-field-box--readonly {
+    --pvt-control-width: 100%;
+  }
+
+  .rls-field-box__body {
+    column-gap: var(--rls-sizing-x2);
+  }
+
+  &__swatch {
+    width: var(--rls-sizing-x10);
+    height: var(--rls-sizing-x10);
+    flex: 0 0 auto;
+    border-radius: var(--rls-sizing-x2);
+    border: var(--rls-app-border-1-300);
+  }
+
+  &__control {
+    position: relative;
+    width: 100%;
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    padding: 0rem;
+    cursor: default;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--rls-app-color-900);
+    font-weight: var(--rls-font-weight-medium);
+    font-size: var(--pvt-font-size);
+    letter-spacing: var(--pvt-letter-spacing);
+
+    &::placeholder {
+      color: var(--rls-app-color-400);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.rls-field-color-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-color-radius: var(--rls-sizing-x4);
+  --rlc-picker-color-background: var(--rls-app-color-050);
+}

package/scss/design-system-bordered/organisms/picker-color.scss

@@ -0,0 +1,189 @@
+// Rolster Technology PickerColor Component
+// v1.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 15/May/2026
+// Updated: 17/May/2026
+
+.rls-picker-color {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x6);
+  overflow: hidden;
+  user-select: none;
+  padding: var(--rlc-picker-color-padding, var(--rls-sizing-x6));
+  box-sizing: border-box;
+  border-radius: var(--rlc-picker-color-radius, 0rem);
+  background: var(--rlc-picker-color-background, transparent);
+
+  &__preview {
+    display: flex;
+    width: 100%;
+    height: 130rem;
+    justify-content: center;
+    padding: var(--rls-sizing-x6);
+    box-sizing: border-box;
+    border-radius: var(--rls-sizing-x6);
+    border: var(--rls-app-border-1-300);
+    background: var(--rls-app-color-200);
+  }
+
+  &__canvas {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--rls-sizing-x6);
+    cursor: crosshair;
+    box-sizing: border-box;
+  }
+
+  &__indicator {
+    position: absolute;
+    width: var(--rls-sizing-x14);
+    height: var(--rls-sizing-x14);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+
+    &__circle {
+      width: 100%;
+      height: 100%;
+      border-radius: var(--rls-sizing-x4);
+      border: var(--rls-border-2) solid var(--rls-app-color-050);
+      box-sizing: border-box;
+      box-shadow:
+        0 0 0 1px rgba(0, 0, 0, 0.3),
+        0 0 var(--rls-sizing-x4) rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x4);
+    padding: var(--rls-sizing-x6) var(--rls-sizing-x10);
+    box-sizing: border-box;
+    border-radius: var(--rls-sizing-x6);
+    border: var(--rls-app-border-1-300);
+    background: var(--rls-app-color-200);
+  }
+
+  &__slider {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: var(--rls-sizing-x12);
+
+    &__track {
+      position: relative;
+      width: 100%;
+      height: var(--rls-sizing-x10);
+      cursor: pointer;
+      border-radius: var(--rls-sizing-x5);
+
+      &--alpha {
+        background-size: 8rem 8rem;
+        background-position:
+          0 0,
+          4rem 4rem;
+        background-image:
+          linear-gradient(45deg, var(--rls-app-color-300) 25%, transparent 25%),
+          linear-gradient(
+            -45deg,
+            var(--rls-app-color-300) 25%,
+            transparent 25%
+          ),
+          linear-gradient(45deg, transparent 75%, var(--rls-app-color-300) 75%),
+          linear-gradient(-45deg, transparent 75%, var(--rls-app-color-300) 75%);
+      }
+    }
+
+    &__thumb {
+      position: absolute;
+      top: 50%;
+      width: var(--rls-sizing-x12);
+      height: var(--rls-sizing-x12);
+      transform: translate(-50%, -50%);
+      border-radius: var(--rls-sizing-x4);
+      border: var(--rls-border-2) solid var(--rls-app-color-050);
+      box-sizing: border-box;
+      box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0.2);
+      pointer-events: none;
+      background: transparent;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x4);
+  }
+
+  &__hex {
+    --pvt-font-size: var(
+      --rlc-field-color-font-size,
+      var(--rls-input-font-size)
+    );
+    --pvt-font-weight: var(
+      --rlc-field-color-font-weight,
+      var(--rls-font-weight-medium)
+    );
+
+    display: flex;
+    height: var(--rls-sizing-x20);
+    align-items: center;
+    justify-content: center;
+    column-gap: var(--rls-sizing-x4);
+    padding: 0rem var(--rls-sizing-x4);
+    box-sizing: border-box;
+    border-radius: var(--rls-sizing-x4);
+    border: var(--rls-app-border-1-300);
+    background: var(--rls-app-color-200);
+
+    &__swatch {
+      flex: 0 0 auto;
+      width: var(--rls-sizing-x12);
+      height: var(--rls-sizing-x12);
+      border-radius: var(--rls-sizing-x2);
+      border: var(--rls-app-border-1-300);
+    }
+
+    &__prefix {
+      font-size: var(--pvt-font-size);
+      font-weight: var(--pvt-font-weight);
+      color: var(--rls-app-color-600);
+    }
+
+    &__input {
+      width: 35rem;
+      height: 100%;
+      padding: 0rem;
+      text-align: center;
+      text-transform: uppercase;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: var(--rls-app-color-900);
+      font-size: var(--pvt-font-size);
+      font-weight: var(--pvt-font-weight);
+      letter-spacing: var(--rls-input-letter-spacing);
+
+      &::placeholder {
+        color: var(--rls-app-color-400);
+      }
+    }
+  }
+
+  &__actions {
+    --rlc-button-width: 100%;
+    --rlc-button-content-padding: 0rem var(--rls-sizing-x2);
+
+    display: flex;
+    column-gap: var(--rls-sizing-x6);
+    align-items: center;
+    padding-top: var(--rls-sizing-x4);
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+}

package/scss/design-system-filled/atoms/button-icon.scss

@@ -0,0 +1,46 @@
+// Rolster Technology ButtonIcon Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 15/May/2026
+// Updated: 15/May/2026
+
+.rls-button-icon {
+  --rlc-icon-dimension: var(
+    --rlc-button-icon-icon-dimension,
+    var(--rls-sizing-x12)
+  );
+
+  --pvt-button-dimension: var(
+    --rlc-button-icon-dimension,
+    var(--rls-sizing-x16)
+  );
+
+  display: flex;
+  flex: 0 0 auto;
+  width: var(--pvt-button-dimension);
+  height: var(--pvt-button-dimension);
+  align-items: center;
+  justify-content: center;
+  padding: 0rem;
+  outline: none;
+  border-radius: var(--rlc-button-icon-radius, var(--rls-sizing-x3));
+  cursor: pointer;
+  border: none;
+  color: var(--rlc-button-icon-font-color, var(--rls-app-color-600));
+  background: var(--rlc-button-icon-background, var(--rls-app-color-200));
+  transition: transform 240ms var(--rls-standard-curve);
+
+  &:active {
+    transform: scale(0.8);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &--skeleton {
+    background: var(--rls-theme-color-300);
+  }
+}