@rolster/styles-foundations 3.0.4 → 3.0.6

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

@@ -1,124 +1,124 @@
-// Rolster Technology ButtonAction Component
-// v1.1.2
-// @license MIT
-// Author: Rolster Developers
-// Created: 20/Mar/2018
-// Updated: 14/Feb/2025
-
-.rls-button-action {
-  --pvt-ripple-dimension: var(
-    --rlc-action-ripple-dimension,
-    var(--rls-sizing-x18)
-  );
-
-  --pvt-ripple-position: var(--rlc-action-ripple-position, -9rem);
-
-  --pvt-ripple-color: var(--rlc-action-ripple-color, var(--rls-app-color-600));
-  --pvt-tooltip-transition-delay: 0ms;
-  --pvt-tooltip-opacity: 0;
-
-  position: relative;
-  width: var(--rls-sizing-x16);
-  height: var(--rls-sizing-x16);
-  border: none;
-  outline: none;
-  padding: var(--rls-sizing-x2);
-  box-sizing: border-box;
-  user-select: none;
-  cursor: default;
-  border-radius: var(--rlc-action-radius, 50%);
-  color: var(--rlc-action-color, var(--rls-app-color-600));
-  background: var(--rlc-action-background, transparent);
-
-  &::before {
-    position: absolute;
-    display: block;
-    content: '';
-    top: 50%;
-    left: 50%;
-    opacity: 0.32;
-    visibility: hidden;
-    border-radius: 50%;
-    transform: scale(0);
-    background: var(--pvt-ripple-color);
-    padding-top: calc(120% - var(--rls-sizing-x4));
-    padding-left: calc(120% - var(--rls-sizing-x4));
-    margin-top: calc(-60% + var(--rls-sizing-x2));
-    margin-left: calc(-60% + var(--rls-sizing-x2));
-  }
-
-  &:not(:active)::before {
-    animation: ripple-button-action 1000ms var(--rls-standard-curve);
-  }
-
-  &:focus::before {
-    visibility: visible;
-  }
-
-  &::after {
-    position: absolute;
-    content: '';
-    top: 50%;
-    left: 50%;
-    opacity: 0.24;
-    width: var(--pvt-ripple-dimension);
-    height: var(--pvt-ripple-dimension);
-    margin-top: var(--pvt-ripple-position);
-    margin-left: var(--pvt-ripple-position);
-    border-radius: 50%;
-    background: var(--pvt-ripple-color);
-    transform: scale(0);
-    transition: transform 160ms 0ms var(--rls-sharp-curve);
-  }
-
-  &:not(:disabled):hover {
-    --pvt-tooltip-opacity: 1;
-    --pvt-tooltip-transition-delay: 480ms;
-
-    &::after {
-      transform: scale(1);
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  &__content {
-    pointer-events: none;
-  }
-
-  &__tooltip {
-    position: absolute;
-    top: calc(100% + var(--rls-sizing-x6));
-    left: 50%;
-    width: auto;
-    float: initial;
-    padding: var(--rls-sizing-x4);
-    border-radius: var(--rls-sizing-x2);
-    white-space: nowrap;
-    pointer-events: none;
-    transform: translateX(-50%);
-    background: var(--rls-app-color-900);
-    color: var(--rls-app-color-050);
-    transition: opacity 200ms 0ms var(--rls-deceleration-curve);
-    opacity: var(--pvt-tooltip-opacity);
-    transition-delay: var(--pvt-tooltip-transition-delay);
-  }
-}
-
-@keyframes ripple-button-action {
-  0% {
-    transform: scale(0);
-  }
-
-  20% {
-    transform: scale(1);
-  }
-
-  100% {
-    opacity: 0;
-    transform: scale(1);
-  }
-}
+// Rolster Technology ButtonAction Component
+// v1.1.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 14/Feb/2025
+
+.rls-button-action {
+  --pvt-ripple-dimension: var(
+    --rlc-action-ripple-dimension,
+    var(--rls-sizing-x18)
+  );
+
+  --pvt-ripple-position: var(--rlc-action-ripple-position, -9rem);
+
+  --pvt-ripple-color: var(--rlc-action-ripple-color, var(--rls-app-color-600));
+  --pvt-tooltip-transition-delay: 0ms;
+  --pvt-tooltip-opacity: 0;
+
+  position: relative;
+  width: var(--rls-sizing-x16);
+  height: var(--rls-sizing-x16);
+  border: none;
+  outline: none;
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  user-select: none;
+  cursor: default;
+  border-radius: var(--rlc-action-radius, 50%);
+  color: var(--rlc-action-color, var(--rls-app-color-600));
+  background: var(--rlc-action-background, transparent);
+
+  &::before {
+    position: absolute;
+    display: block;
+    content: '';
+    top: 50%;
+    left: 50%;
+    opacity: 0.32;
+    visibility: hidden;
+    border-radius: 50%;
+    transform: scale(0);
+    background: var(--pvt-ripple-color);
+    padding-top: calc(120% - var(--rls-sizing-x4));
+    padding-left: calc(120% - var(--rls-sizing-x4));
+    margin-top: calc(-60% + var(--rls-sizing-x2));
+    margin-left: calc(-60% + var(--rls-sizing-x2));
+  }
+
+  &:not(:active)::before {
+    animation: ripple-button-action 1000ms var(--rls-standard-curve);
+  }
+
+  &:focus::before {
+    visibility: visible;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    opacity: 0.24;
+    width: var(--pvt-ripple-dimension);
+    height: var(--pvt-ripple-dimension);
+    margin-top: var(--pvt-ripple-position);
+    margin-left: var(--pvt-ripple-position);
+    border-radius: 50%;
+    background: var(--pvt-ripple-color);
+    transform: scale(0);
+    transition: transform 160ms 0ms var(--rls-sharp-curve);
+  }
+
+  &:not(:disabled):hover {
+    --pvt-tooltip-opacity: 1;
+    --pvt-tooltip-transition-delay: 480ms;
+
+    &::after {
+      transform: scale(1);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &__content {
+    pointer-events: none;
+  }
+
+  &__tooltip {
+    position: absolute;
+    top: calc(100% + var(--rls-sizing-x6));
+    left: 50%;
+    width: auto;
+    float: initial;
+    padding: var(--rls-sizing-x4);
+    border-radius: var(--rls-sizing-x2);
+    white-space: nowrap;
+    pointer-events: none;
+    transform: translateX(-50%);
+    background: var(--rls-app-color-900);
+    color: var(--rls-app-color-050);
+    transition: opacity 200ms 0ms var(--rls-deceleration-curve);
+    opacity: var(--pvt-tooltip-opacity);
+    transition-delay: var(--pvt-tooltip-transition-delay);
+  }
+}
+
+@keyframes ripple-button-action {
+  0% {
+    transform: scale(0);
+  }
+
+  20% {
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}

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

@@ -1,49 +1,49 @@
-// Rolster Technology ButtonOption Component
-// v1.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 04/Dic/2025
-// Updated: 04/Dic/2025
-
-.rls-button-option {
-  --pvt-span-color: var(--rls-app-color-800);
-  --pvt-background-hover: var(--rls-theme-color-100);
-  --rlc-icon-color: var(--rls-app-color-600);
-
-  display: flex;
-  width: var(--rlc-button-option, auto);
-  flex-direction: column;
-  row-gap: var(--rls-sizing-x3);
-  align-items: center;
-  padding: var(--rls-sizing-x4) var(--rls-sizing-x3);
-  box-sizing: border-box;
-  outline: none;
-  background: transparent;
-  border: var(--rls-app-border-1-300);
-  border-radius: var(--rls-sizing-x4);
-  overflow: hidden;
-
-  &:not(:disabled):hover {
-    background: var(--pvt-background-hover);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-  }
-
-  &--checked {
-    --pvt-background-hover: var(--rls-theme-color-800);
-    --pvt-span-color: var(--rls-theme-color-050);
-    --rlc-icon-color: var(--rls-theme-color-050);
-
-    background: var(--rls-theme-gradient-500);
-    border: var(--rls-theme-border-1-500);
-  }
-
-  & > span {
-    font-size: var(--rls-span-font-size);
-    letter-spacing: var(--rls-span-letter-spacing);
-    color: var(--pvt-span-color);
-    font-weight: var(--rls-font-weight-medium);
-  }
-}
+// Rolster Technology ButtonOption Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 04/Dic/2025
+// Updated: 04/Dic/2025
+
+.rls-button-option {
+  --pvt-span-color: var(--rls-app-color-800);
+  --pvt-background-hover: var(--rls-theme-color-100);
+  --rlc-icon-color: var(--rls-app-color-600);
+
+  display: flex;
+  width: var(--rlc-button-option, auto);
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x3);
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x3);
+  box-sizing: border-box;
+  outline: none;
+  background: transparent;
+  border: var(--rls-app-border-1-300);
+  border-radius: var(--rls-sizing-x4);
+  overflow: hidden;
+
+  &:not(:disabled):hover {
+    background: var(--pvt-background-hover);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  &--checked {
+    --pvt-background-hover: var(--rls-theme-color-800);
+    --pvt-span-color: var(--rls-theme-color-050);
+    --rlc-icon-color: var(--rls-theme-color-050);
+
+    background: var(--rls-theme-gradient-500);
+    border: var(--rls-theme-border-1-500);
+  }
+
+  & > span {
+    font-size: var(--rls-span-font-size);
+    letter-spacing: var(--rls-span-letter-spacing);
+    color: var(--pvt-span-color);
+    font-weight: var(--rls-font-weight-medium);
+  }
+}

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

@@ -1,37 +1,38 @@
-// Rolster Technology Image Component
-// v2.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 27/Jul/2025
-// Updated: 12/Ago/2025
-
-.rls-image {
-  --pvt-background: transparent;
-  --pvt-width: var(--rlc-image-width, 100%);
-  --pvt-height: var(--rlc-image-height, 100%);
-  --pvt-img-display: none;
-
-  --rlc-skeleton-width: var(--pvt-width);
-  --rlc-skeleton-height: var(--pvt-height);
-
-  width: var(--pvt-width);
-  height: var(--pvt-height);
-  overflow: hidden;
-
-  &--complet {
-    --pvt-img-display: block;
-
-    background: var(--pvt-background);
-  }
-
-  &[rls-theme] {
-    --pvt-background: var(--rls-theme-color-600);
-  }
-
-  & > img {
-    display: var(--pvt-img-display);
-    width: var(--pvt-width);
-    height: var(--pvt-height);
-    content-visibility: auto;
-  }
-}
+// Rolster Technology Image Component
+// v2.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 27/Jul/2025
+// Updated: 14/May/2026
+
+.rls-image {
+  --pvt-background: transparent;
+  --pvt-width: var(--rlc-image-width, 100%);
+  --pvt-height: var(--rlc-image-height, 100%);
+  --pvt-img-display: none;
+
+  --rlc-skeleton-width: var(--pvt-width);
+  --rlc-skeleton-height: var(--pvt-height);
+
+  width: var(--pvt-width);
+  height: var(--pvt-height);
+  border-radius: var(--rlc-image-radius, 0rem);
+  overflow: hidden;
+
+  &--complet {
+    --pvt-img-display: block;
+
+    background: var(--pvt-background);
+  }
+
+  &[rls-theme] {
+    --pvt-background: var(--rls-theme-color-600);
+  }
+
+  & > img {
+    display: var(--pvt-img-display);
+    width: var(--pvt-width);
+    height: var(--pvt-height);
+    content-visibility: auto;
+  }
+}

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

@@ -1,15 +1,15 @@
-// Rolster Technology InputDecimal Component
-// v1.0.2
-// @license MIT
-// Author: Rolster Developers
-// Created: 25/Sep/2025
-// Updated: 04/Feb/2026
-
-.rls-input-decimal {
-  --rlc-tabular-text-font-size: var(--rls-input-font-size);
-  --rlc-tabular-text-char-width: 5.25rem;
-
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-}
+// Rolster Technology InputDecimal Component
+// v1.0.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 25/Sep/2025
+// Updated: 04/Feb/2026
+
+.rls-input-decimal {
+  --rlc-tabular-text-font-size: var(--rls-input-font-size);
+  --rlc-tabular-text-char-width: 5.25rem;
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}

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

@@ -1,15 +1,15 @@
-// Rolster Technology InputMoney Component
-// v1.0.7
-// @license MIT
-// Author: Rolster Developers
-// Created: 06/May/2023
-// Updated: 04/Feb/2026
-
-.rls-input-money {
-  --rlc-tabular-text-font-size: var(--rls-input-font-size);
-  --rlc-tabular-text-char-width: 5.25rem;
-
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-}
+// Rolster Technology InputMoney Component
+// v1.0.7
+// @license MIT
+// Author: Rolster Developers
+// Created: 06/May/2023
+// Updated: 04/Feb/2026
+
+.rls-input-money {
+  --rlc-tabular-text-font-size: var(--rls-input-font-size);
+  --rlc-tabular-text-char-width: 5.25rem;
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}

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

@@ -1,12 +1,12 @@
-// Rolster Technology InputNumber Component
-// v1.0.2
-// @license MIT
-// Author: Rolster Developers
-// Created: 06/May/2023
-// Updated: 24/Jun/2024
-
-.rls-input-number {
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-}
+// Rolster Technology InputNumber Component
+// v1.0.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 06/May/2023
+// Updated: 24/Jun/2024
+
+.rls-input-number {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}

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

@@ -1,48 +1,48 @@
-// Rolster Technology InputPassword Component
-// v1.0.4
-// @license MIT
-// Author: Rolster Developers
-// Created: 06/May/2023
-// Updated: 03/Feb/2026
-
-.rls-input-password {
-  position: relative;
-  width: var(--rlc-input-password-width, 100%);
-  box-sizing: border-box;
-
-  &__component {
-    position: relative;
-    float: left;
-    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(--rlc-input-font-color);
-    font-weight: var(--rls-font-weight-medium);
-    font-size: var(--rls-input-font-size);
-    letter-spacing: var(--rls-input-letter-spacing);
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      margin: 0rem;
-      -webkit-appearance: none;
-    }
-
-    &::placeholder {
-      color: var(--rls-app-color-400);
-    }
-
-    &::selection {
-      background: var(--rls-theme-color-700);
-      color: var(--rls-app-color-050);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-    }
-  }
-}
+// Rolster Technology InputPassword Component
+// v1.0.4
+// @license MIT
+// Author: Rolster Developers
+// Created: 06/May/2023
+// Updated: 03/Feb/2026
+
+.rls-input-password {
+  position: relative;
+  width: var(--rlc-input-password-width, 100%);
+  box-sizing: border-box;
+
+  &__component {
+    position: relative;
+    float: left;
+    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(--rlc-input-font-color);
+    font-weight: var(--rls-font-weight-medium);
+    font-size: var(--rls-input-font-size);
+    letter-spacing: var(--rls-input-letter-spacing);
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      margin: 0rem;
+      -webkit-appearance: none;
+    }
+
+    &::placeholder {
+      color: var(--rls-app-color-400);
+    }
+
+    &::selection {
+      background: var(--rls-theme-color-700);
+      color: var(--rls-app-color-050);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+}

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

@@ -1,12 +1,12 @@
-// Rolster Technology InputPercentage Component
-// v1.0.2
-// @license MIT
-// Author: Rolster Developers
-// Created: 06/May/2023
-// Updated: 24/Jun/2024
-
-.rls-input-percentage {
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-}
+// Rolster Technology InputPercentage Component
+// v1.0.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 06/May/2023
+// Updated: 24/Jun/2024
+
+.rls-input-percentage {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}