@wizco/fenixds-core 1.0.21 → 1.0.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wizco/fenixds-core",
   "description": "Fenix design system é um produto da Wiz com ativos de design e código de front-end para ajudar as equipes na criação dos seus produtos.",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "private": false,
   "sideEffects": false,
   "author": "Raul Melo Fernandez",

package/styles/core.css

@@ -379,6 +379,8 @@
   background-repeat: no-repeat;
   background-size: 1000px 100%; }
 
+button.wco-btn,
+a.wco-btn,
 button.btn,
 a.btn {
   font-size: var(--btn-size, 16px);
@@ -398,13 +400,19 @@ a.btn {
   cursor: pointer;
   text-decoration: none;
   font-family: var(--wco-font-family); }
+  button.wco-btn:focus-visible,
+  a.wco-btn:focus-visible,
   button.btn:focus-visible,
   a.btn:focus-visible {
     outline: 2px solid var(--btn-focus, var(--textBtn)); }
+  button.wco-btn:not([class*=" bg-"]),
+  a.wco-btn:not([class*=" bg-"]),
   button.btn:not([class*=" bg-"]),
   a.btn:not([class*=" bg-"]) {
     background-color: var(--bgBtn);
     color: var(--textBtn); }
+  button.wco-btn:disabled:not(.btn-loading),
+  a.wco-btn:disabled:not(.btn-loading),
   button.btn:disabled:not(.btn-loading),
   a.btn:disabled:not(.btn-loading) {
     text-decoration: none;
@@ -412,16 +420,26 @@ a.btn {
     --textBtn: var(--wco-color-neutral-900);
     pointer-events: none;
     opacity: 0.4; }
-  button.btn:not(:disabled):hover, button.btn:not(.btn-loading):hover,
+  button.wco-btn:not(:disabled):hover, button.wco-btn:not(.btn-loading):hover,
+  a.wco-btn:not(:disabled):hover,
+  a.wco-btn:not(.btn-loading):hover,
+  button.btn:not(:disabled):hover,
+  button.btn:not(.btn-loading):hover,
   a.btn:not(:disabled):hover,
   a.btn:not(.btn-loading):hover {
     transform: scale(1);
     box-shadow: var(--wco-shadow-level-1); }
-  button.btn:not(:disabled):active, button.btn:not(.btn-loading):active,
+  button.wco-btn:not(:disabled):active, button.wco-btn:not(.btn-loading):active,
+  a.wco-btn:not(:disabled):active,
+  a.wco-btn:not(.btn-loading):active,
+  button.btn:not(:disabled):active,
+  button.btn:not(.btn-loading):active,
   a.btn:not(:disabled):active,
   a.btn:not(.btn-loading):active {
     transform: scale(0.99) translateY(0.5px);
     box-shadow: var(--wco-shadow-level-0); }
+  button.wco-btn:not([class*=" btn-loading"]):after,
+  a.wco-btn:not([class*=" btn-loading"]):after,
   button.btn:not([class*=" btn-loading"]):after,
   a.btn:not([class*=" btn-loading"]):after {
     content: "";
@@ -434,129 +452,191 @@ a.btn {
     filter: contrast(100px);
     opacity: 0.1;
     transition: all 300ms ease; }
+  button.wco-btn.btn-primary,
+  a.wco-btn.btn-primary,
   button.btn.btn-primary,
   a.btn.btn-primary {
     --bgBtn: var(--wco-color-primary-600);
     --textBtn: var(--wco-color-primary-text);
     --btn-focus: var(--wco-color-primary-900); }
+    button.wco-btn.btn-primary:hover:not(.btn-outline),
+    a.wco-btn.btn-primary:hover:not(.btn-outline),
     button.btn.btn-primary:hover:not(.btn-outline),
     a.btn.btn-primary:hover:not(.btn-outline) {
       --bgBtn: var(--wco-color-primary-700);
       --textBtn: var(--wco-color-primary-50); }
+    button.wco-btn.btn-primary:active:not(.btn-outline),
+    a.wco-btn.btn-primary:active:not(.btn-outline),
     button.btn.btn-primary:active:not(.btn-outline),
     a.btn.btn-primary:active:not(.btn-outline) {
       --bgBtn: var(--wco-color-primary-700);
       --textBtn: var(--wco-color-primary-50); }
+    button.wco-btn.btn-primary.btn-outline,
+    a.wco-btn.btn-primary.btn-outline,
     button.btn.btn-primary.btn-outline,
     a.btn.btn-primary.btn-outline {
       background-color: transparent;
       --textBtn: var(--wco-color-primary-600);
       --btn-focus: var(--wco-color-primary-600); }
+      button.wco-btn.btn-primary.btn-outline:hover,
+      a.wco-btn.btn-primary.btn-outline:hover,
       button.btn.btn-primary.btn-outline:hover,
       a.btn.btn-primary.btn-outline:hover {
         background-color: var(--wco-color-primary-50);
         --textBtn: var(--wco-color-primary-700);
         --bgBtn: var(--wco-color-primary-700); }
+      button.wco-btn.btn-primary.btn-outline:active,
+      a.wco-btn.btn-primary.btn-outline:active,
       button.btn.btn-primary.btn-outline:active,
       a.btn.btn-primary.btn-outline:active {
         background-color: var(--wco-color-primary-50); }
+    button.wco-btn.btn-primary.btn-basic,
+    a.wco-btn.btn-primary.btn-basic,
     button.btn.btn-primary.btn-basic,
     a.btn.btn-primary.btn-basic {
       box-shadow: none;
       --bgBtn: transparent;
       --textBtn: var(--wco-color-primary-600); }
+      button.wco-btn.btn-primary.btn-basic:hover,
+      a.wco-btn.btn-primary.btn-basic:hover,
       button.btn.btn-primary.btn-basic:hover,
       a.btn.btn-primary.btn-basic:hover {
         --textBtn: var(--wco-color-primary-700);
         --bgBtn: var(--wco-color-primary-50); }
-      button.btn.btn-primary.btn-basic:focus-visible, button.btn.btn-primary.btn-basic:active,
+      button.wco-btn.btn-primary.btn-basic:focus-visible, button.wco-btn.btn-primary.btn-basic:active,
+      a.wco-btn.btn-primary.btn-basic:focus-visible,
+      a.wco-btn.btn-primary.btn-basic:active,
+      button.btn.btn-primary.btn-basic:focus-visible,
+      button.btn.btn-primary.btn-basic:active,
       a.btn.btn-primary.btn-basic:focus-visible,
       a.btn.btn-primary.btn-basic:active {
         --textBtn: var(--wco-color-primary-900);
         --bgBtn: var(--wco-color-primary-100); }
+  button.wco-btn.btn-secondary,
+  a.wco-btn.btn-secondary,
   button.btn.btn-secondary,
   a.btn.btn-secondary {
     --bgBtn: var(--wco-color-secondary-100);
     --textBtn: var(--wco-color-secondary-900);
     --btn-focus: var(--wco-color-secondary-900); }
+    button.wco-btn.btn-secondary:hover:not(.btn-outline),
+    a.wco-btn.btn-secondary:hover:not(.btn-outline),
     button.btn.btn-secondary:hover:not(.btn-outline),
     a.btn.btn-secondary:hover:not(.btn-outline) {
       --bgBtn: var(--wco-color-secondary-50);
       --textBtn: var(--wco-color-secondary-900);
       box-shadow: none; }
+    button.wco-btn.btn-secondary:active:not(.btn-outline),
+    a.wco-btn.btn-secondary:active:not(.btn-outline),
     button.btn.btn-secondary:active:not(.btn-outline),
     a.btn.btn-secondary:active:not(.btn-outline) {
       --bgBtn: var(--wco-color-secondary-50);
       --textBtn: var(--wco-color-secondary-900); }
+    button.wco-btn.btn-secondary.btn-outline,
+    a.wco-btn.btn-secondary.btn-outline,
     button.btn.btn-secondary.btn-outline,
     a.btn.btn-secondary.btn-outline {
       background-color: transparent;
       --textBtn: var(--wco-color-secondary-600);
       --btn-focus: var(--wco-color-secondary-600); }
+      button.wco-btn.btn-secondary.btn-outline:hover,
+      a.wco-btn.btn-secondary.btn-outline:hover,
       button.btn.btn-secondary.btn-outline:hover,
       a.btn.btn-secondary.btn-outline:hover {
         background-color: var(--wco-color-secondary-50); }
+      button.wco-btn.btn-secondary.btn-outline:active,
+      a.wco-btn.btn-secondary.btn-outline:active,
       button.btn.btn-secondary.btn-outline:active,
       a.btn.btn-secondary.btn-outline:active {
         background-color: var(--wco-color-secondary-100); }
+    button.wco-btn.btn-secondary.btn-basic,
+    a.wco-btn.btn-secondary.btn-basic,
     button.btn.btn-secondary.btn-basic,
     a.btn.btn-secondary.btn-basic {
       box-shadow: none;
       --bgBtn: transparent;
       --textBtn: var(--wco-color-secondary-600); }
+      button.wco-btn.btn-secondary.btn-basic:hover,
+      a.wco-btn.btn-secondary.btn-basic:hover,
       button.btn.btn-secondary.btn-basic:hover,
       a.btn.btn-secondary.btn-basic:hover {
         --textBtn: var(--wco-color-secondary-700);
         --bgBtn: var(--wco-color-secondary-50); }
-      button.btn.btn-secondary.btn-basic:focus-visible, button.btn.btn-secondary.btn-basic:active,
+      button.wco-btn.btn-secondary.btn-basic:focus-visible, button.wco-btn.btn-secondary.btn-basic:active,
+      a.wco-btn.btn-secondary.btn-basic:focus-visible,
+      a.wco-btn.btn-secondary.btn-basic:active,
+      button.btn.btn-secondary.btn-basic:focus-visible,
+      button.btn.btn-secondary.btn-basic:active,
       a.btn.btn-secondary.btn-basic:focus-visible,
       a.btn.btn-secondary.btn-basic:active {
         --textBtn: var(--wco-color-secondary-900);
         --bgBtn: var(--wco-color-secondary-100); }
+  button.wco-btn.btn-link,
+  a.wco-btn.btn-link,
   button.btn.btn-link,
   a.btn.btn-link {
     background-color: transparent;
     --textBtn: var(--wco-color-primary-600);
     text-decoration: underline; }
+    button.wco-btn.btn-link:hover:not(.btn-outline),
+    a.wco-btn.btn-link:hover:not(.btn-outline),
     button.btn.btn-link:hover:not(.btn-outline),
     a.btn.btn-link:hover:not(.btn-outline) {
       --textBtn: var(--wco-color-primary-700);
       box-shadow: none; }
+    button.wco-btn.btn-link:active:not(.btn-outline),
+    a.wco-btn.btn-link:active:not(.btn-outline),
     button.btn.btn-link:active:not(.btn-outline),
     a.btn.btn-link:active:not(.btn-outline) {
       background-color: var(--wco-color-primary-100);
       --bgBtn: var(--wco-color-primary-900);
       --textBtn: var(--wco-color-primary-900);
       box-shadow: none; }
+    button.wco-btn.btn-link.btn-outline,
+    a.wco-btn.btn-link.btn-outline,
     button.btn.btn-link.btn-outline,
     a.btn.btn-link.btn-outline {
       border: 0px solid transparent; }
+  button.wco-btn.btn-full,
+  a.wco-btn.btn-full,
   button.btn.btn-full,
   a.btn.btn-full {
     width: 100%;
     min-width: max-content; }
+  button.wco-btn.btn-md,
+  a.wco-btn.btn-md,
   button.btn.btn-md,
   a.btn.btn-md {
     --btn-min-h: 40px; }
+  button.wco-btn.btn-sm,
+  a.wco-btn.btn-sm,
   button.btn.btn-sm,
   a.btn.btn-sm {
     --btn-min-h: 32px;
     --btn-size: 14px;
     --btn-padding: 4px 16px; }
+  button.wco-btn.btn-outline,
+  a.wco-btn.btn-outline,
   button.btn.btn-outline,
   a.btn.btn-outline {
     border: 2px solid var(--bgBtn); }
+    button.wco-btn.btn-outline:disabled,
+    a.wco-btn.btn-outline:disabled,
     button.btn.btn-outline:disabled,
     a.btn.btn-outline:disabled {
       background-color: transparent;
       --textBtn: var(--wco-color-neutral-50);
       --bgBtn: var(--wco-color-neutral-700); }
+  button.wco-btn.btn-loading,
+  a.wco-btn.btn-loading,
   button.btn.btn-loading,
   a.btn.btn-loading {
     position: relative;
     overflow: hidden;
     pointer-events: none;
     cursor: none; }
+    button.wco-btn.btn-loading:before,
+    a.wco-btn.btn-loading:before,
     button.btn.btn-loading:before,
     a.btn.btn-loading:before {
       position: absolute;
@@ -564,6 +644,8 @@ a.btn {
       left: 0;
       width: 0%;
       height: 100%; }
+    button.wco-btn.btn-loading:before,
+    a.wco-btn.btn-loading:before,
     button.btn.btn-loading:before,
     a.btn.btn-loading:before {
       content: "";
@@ -574,20 +656,28 @@ a.btn {
 @keyframes loadingButton {
   to {
     width: 100%; } }
+  button.wco-btn.btn-icon,
+  a.wco-btn.btn-icon,
   button.btn.btn-icon,
   a.btn.btn-icon {
     --btn-padding: 4px;
     min-height: var(--btn-min-h, 48px);
     min-width: var(--btn-min-h, 48px); }
+  button.wco-btn.btn.btn-notification,
+  a.wco-btn.btn.btn-notification,
   button.btn.btn.btn-notification,
   a.btn.btn.btn-notification {
     --btn-notification-size: var(--wco-spacing-xxs);
     --btn-notification-time: 2s;
     --btn-notification-count: infinite;
     --btn-notification-color: var(--bgBtn); }
+    button.wco-btn.btn.btn-notification:not(.btn-outline):before,
+    a.wco-btn.btn.btn-notification:not(.btn-outline):before,
     button.btn.btn.btn-notification:not(.btn-outline):before,
     a.btn.btn.btn-notification:not(.btn-outline):before {
       outline: 2px solid var(--textBtn); }
+    button.wco-btn.btn.btn-notification:before,
+    a.wco-btn.btn.btn-notification:before,
     button.btn.btn.btn-notification:before,
     a.btn.btn.btn-notification:before {
       content: "";
@@ -648,11 +738,15 @@ a.btn {
   position: relative;
   accent-color: var(--wco-input-color-text);
   transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out; }
+  .wco-form-field:has(input:required) label::after,
   .wco-form-field:has(select:required) label::after,
+  .wco-form-field:has(textarea:required) label::after,
   .wco-form-field input:required + label::after,
   .wco-form-field textarea:required + label::after,
   .wco-form-field input:invalid:not(:placeholder-shown):required + label,
+  .form-field:has(input:required) label::after,
   .form-field:has(select:required) label::after,
+  .form-field:has(textarea:required) label::after,
   .form-field input:required + label::after,
   .form-field textarea:required + label::after,
   .form-field input:invalid:not(:placeholder-shown):required + label {
@@ -734,39 +828,6 @@ a.btn {
       --input-border: 1px solid var(--input-color-error);
       --input-shadow: 0px 2px 0px 1px var(--input-color-error);
       color: var(--input-color-error); }
-    .wco-form-field .form-field__input.input-sm,
-    .wco-form-field .form-field__textarea.input-sm,
-    .wco-form-field input.input-sm,
-    .wco-form-field textarea.input-sm,
-    .wco-form-field select.input-sm,
-    .form-field .form-field__input.input-sm,
-    .form-field .form-field__textarea.input-sm,
-    .form-field input.input-sm,
-    .form-field textarea.input-sm,
-    .form-field select.input-sm {
-      height: 32px; }
-    .wco-form-field .form-field__input.input-md,
-    .wco-form-field .form-field__textarea.input-md,
-    .wco-form-field input.input-md,
-    .wco-form-field textarea.input-md,
-    .wco-form-field select.input-md,
-    .form-field .form-field__input.input-md,
-    .form-field .form-field__textarea.input-md,
-    .form-field input.input-md,
-    .form-field textarea.input-md,
-    .form-field select.input-md {
-      height: 40px; }
-    .wco-form-field .form-field__input.input-lg,
-    .wco-form-field .form-field__textarea.input-lg,
-    .wco-form-field input.input-lg,
-    .wco-form-field textarea.input-lg,
-    .wco-form-field select.input-lg,
-    .form-field .form-field__input.input-lg,
-    .form-field .form-field__textarea.input-lg,
-    .form-field input.input-lg,
-    .form-field textarea.input-lg,
-    .form-field select.input-lg {
-      height: 48px; }
   .wco-form-field label,
   .form-field label {
     position: absolute;
@@ -853,23 +914,33 @@ a.btn {
     --wco-input-color-text: var(--wco-color-neutral-900, #e00707);
     --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
   .wco-form-field textarea ~ label,
-  .form-field textarea ~ label {
+  .wco-form-field:has(textarea) label,
+  .form-field textarea ~ label,
+  .form-field:has(textarea) label {
     top: 16px;
     transform: translateY(0); }
+  .wco-form-field:has(input:focus) label,
   .wco-form-field:has(select) label,
+  .wco-form-field:has(textarea:focus) label,
   .wco-form-field textarea:focus + label,
-  .wco-form-field input:focus + label,
   .wco-form-field .readonly + label,
+  .form-field:has(input:focus) label,
   .form-field:has(select) label,
+  .form-field:has(textarea:focus) label,
   .form-field textarea:focus + label,
-  .form-field input:focus + label,
   .form-field .readonly + label {
     color: var(--wco-input-color-label);
     top: 0;
     transform: translateY(-50%) translateX(-10px) scale(0.9) !important; }
+  .wco-form-field:has(input:not(:placeholder-shown)) label,
+  .wco-form-field:has(select:not(:placeholder-shown)) label,
+  .wco-form-field:has(textarea:not(:placeholder-shown)) label,
   .wco-form-field textarea:not(:placeholder-shown) + label,
   .wco-form-field input:not(:placeholder-shown) + label,
   .wco-form-field .readonly + label,
+  .form-field:has(input:not(:placeholder-shown)) label,
+  .form-field:has(select:not(:placeholder-shown)) label,
+  .form-field:has(textarea:not(:placeholder-shown)) label,
   .form-field textarea:not(:placeholder-shown) + label,
   .form-field input:not(:placeholder-shown) + label,
   .form-field .readonly + label {
@@ -881,33 +952,58 @@ a.btn {
   .form-field textarea:not(:focus)::placeholder,
   .form-field input:not(:focus)::placeholder {
     opacity: 0; }
+  .wco-form-field > i:first-child,
   .wco-form-field > span:first-child,
+  .form-field > i:first-child,
   .form-field > span:first-child {
     position: absolute;
     top: 50%;
     left: 12px;
     transform: translateY(-50%);
-    color: var(--wco-input-color-icon); }
+    color: var(--wco-input-color-icon);
+    width: fit-content; }
+  .wco-form-field:has(input):has(i:first-child) label,
+  .wco-form-field:has(input):has(span:first-child) label,
   .wco-form-field > span ~ .form-field__input + label,
   .wco-form-field > span ~ .form-field__select + label,
+  .form-field:has(input):has(i:first-child) label,
+  .form-field:has(input):has(span:first-child) label,
   .form-field > span ~ .form-field__input + label,
   .form-field > span ~ .form-field__select + label {
     margin-left: 44px; }
+  .wco-form-field:has(input):has(i:first-child) input,
+  .wco-form-field:has(input):has(span:first-child) input,
   .wco-form-field > span ~ .form-field__select,
   .wco-form-field > span ~ .form-field__input,
+  .form-field:has(input):has(i:first-child) input,
+  .form-field:has(input):has(span:first-child) input,
   .form-field > span ~ .form-field__select,
   .form-field > span ~ .form-field__input {
     padding-left: 44px; }
+  .wco-form-field:has(input):has(i:last-child) input,
+  .wco-form-field:has(input):has(span:last-child) input,
+  .form-field:has(input):has(i:last-child) input,
+  .form-field:has(input):has(span:last-child) input {
+    padding-right: 44px; }
+  .wco-form-field:has(input):has(i:last-child) i,
+  .wco-form-field:has(input):has(span:last-child) span,
   .wco-form-field > .form-field__select + label + span,
   .wco-form-field > .form-field__input + label + span,
+  .form-field:has(input):has(i:last-child) i,
+  .form-field:has(input):has(span:last-child) span,
   .form-field > .form-field__select + label + span,
   .form-field > .form-field__input + label + span {
+    width: fit-content;
     position: absolute;
     top: 50%;
     right: 12px;
     transform: translateY(-50%); }
+    .wco-form-field:has(input):has(i:last-child) i::before,
+    .wco-form-field:has(input):has(span:last-child) span::before,
     .wco-form-field > .form-field__select + label + span::before,
     .wco-form-field > .form-field__input + label + span::before,
+    .form-field:has(input):has(i:last-child) i::before,
+    .form-field:has(input):has(span:last-child) span::before,
     .form-field > .form-field__select + label + span::before,
     .form-field > .form-field__input + label + span::before {
       content: '';
@@ -924,6 +1020,11 @@ a.btn {
   .wco-form-field.form--lg,
   .form-field.form--lg {
     --wco-input-min-height: 48px; }
+  .wco-form-field:has(input) input,
+  .form-field:has(input) input {
+    min-height: var(--wco-input-min-height);
+    padding-top: 0;
+    padding-bottom: 0; }
   .wco-form-field:has(select) label,
   .form-field:has(select) label {
     z-index: 1; }
@@ -978,6 +1079,7 @@ a.btn {
     transform: translateY(-50%);
     width: 30px; }
 
+label.wco-form-radio, .wco-form-radio,
 label.form-radio, .form-radio {
   --accent-color: var(--wco-color-primary-700);
   --radio-size: 16px;
@@ -986,13 +1088,16 @@ label.form-radio, .form-radio {
   justify-content: center;
   align-items: center;
   gap: var(--radio-gap); }
+  label.wco-form-radio label, .wco-form-radio label,
   label.form-radio label, .form-radio label {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     gap: var(--radio-gap); }
+  label.wco-form-radio input[type="radio"], .wco-form-radio input[type="radio"],
   label.form-radio input[type="radio"], .form-radio input[type="radio"] {
     display: none; }
+  label.wco-form-radio input[type="radio"] ~ .radio, .wco-form-radio input[type="radio"] ~ .radio,
   label.form-radio input[type="radio"] ~ .radio, .form-radio input[type="radio"] ~ .radio {
     height: var(--radio-size);
     width: var(--radio-size);
@@ -1000,6 +1105,7 @@ label.form-radio, .form-radio {
     position: relative;
     border-radius: 50%;
     border: 1px solid var(--wco-color-neutral-500); }
+    label.wco-form-radio input[type="radio"] ~ .radio::before, .wco-form-radio input[type="radio"] ~ .radio::before,
     label.form-radio input[type="radio"] ~ .radio::before, .form-radio input[type="radio"] ~ .radio::before {
       content: "";
       position: absolute;
@@ -1011,23 +1117,30 @@ label.form-radio, .form-radio {
       border-radius: 50%;
       transition: box-shadow 300ms ease-in-out;
       box-shadow: inset 0px 0px 0px 0px var(--accent-color); }
+  label.wco-form-radio input[type="radio"]:checked ~ .radio, .wco-form-radio input[type="radio"]:checked ~ .radio,
   label.form-radio input[type="radio"]:checked ~ .radio, .form-radio input[type="radio"]:checked ~ .radio {
     border: 1px solid var(--accent-color); }
+    label.wco-form-radio input[type="radio"]:checked ~ .radio::before, .wco-form-radio input[type="radio"]:checked ~ .radio::before,
     label.form-radio input[type="radio"]:checked ~ .radio::before, .form-radio input[type="radio"]:checked ~ .radio::before {
       box-shadow: inset 0px 0px 12px 12px var(--accent-color); }
+  label.wco-form-radio .label, .wco-form-radio .label,
   label.form-radio .label, .form-radio .label {
     color: var(--wco-color-primary-700);
     font-size: var(--wco-font-size-xs);
     font-weight: 400; }
+  label.wco-form-radio input[type="radio"]:disabled ~ .radio, .wco-form-radio input[type="radio"]:disabled ~ .radio,
   label.form-radio input[type="radio"]:disabled ~ .radio, .form-radio input[type="radio"]:disabled ~ .radio {
     --accent-color: var(--wco-color-neutral-600);
     background-color: var(--wco-color-neutral-100est); }
+  label.wco-form-radio input[type="radio"]:checked:disabled ~ .radio, .wco-form-radio input[type="radio"]:checked:disabled ~ .radio,
   label.form-radio input[type="radio"]:checked:disabled ~ .radio, .form-radio input[type="radio"]:checked:disabled ~ .radio {
     --accent-color: var(--wco-color-neutral-600);
     border: 1px solid var(--wco-color-neutral-600); }
+    label.wco-form-radio input[type="radio"]:checked:disabled ~ .radio::before, .wco-form-radio input[type="radio"]:checked:disabled ~ .radio::before,
     label.form-radio input[type="radio"]:checked:disabled ~ .radio::before, .form-radio input[type="radio"]:checked:disabled ~ .radio::before {
       box-shadow: inset 0px 0px 12px 12px var(--wco-color-neutral-600); }
 
+label.wco-form-check, .wco-form-check,
 label.form-check, .form-check {
   --wco-checkbox-default-color-label: var(--wco-color-neutral-900);
   --wco-checkbox-default-color-iconunchecked: var(--wco-color-neutral-500);
@@ -1047,15 +1160,19 @@ label.form-check, .form-check {
   justify-content: center;
   align-items: center;
   gap: var(--wco-checkbox-checkbox-gap); }
+  label.wco-form-check.form--readonly, .wco-form-check.form--readonly,
   label.form-check.form--readonly, .form-check.form--readonly {
     pointer-events: none; }
+  label.wco-form-check label, .wco-form-check label,
   label.form-check label, .form-check label {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     gap: var(--wco-checkbox-checkbox-gap); }
+  label.wco-form-check input[type="checkbox"], .wco-form-check input[type="checkbox"],
   label.form-check input[type="checkbox"], .form-check input[type="checkbox"] {
     display: none; }
+  label.wco-form-check input[type="checkbox"] ~ .check, .wco-form-check input[type="checkbox"] ~ .check,
   label.form-check input[type="checkbox"] ~ .check, .form-check input[type="checkbox"] ~ .check {
     height: var(--wco-checkbox-checkbox-size);
     width: var(--wco-checkbox-checkbox-size);
@@ -1063,6 +1180,7 @@ label.form-check, .form-check {
     position: relative;
     border-radius: var(--wco-checkbox-checkbox-radius);
     border: 2px solid var(--wco-checkbox-default-color-iconunchecked); }
+    label.wco-form-check input[type="checkbox"] ~ .check::before, .wco-form-check input[type="checkbox"] ~ .check::before,
     label.form-check input[type="checkbox"] ~ .check::before, .form-check input[type="checkbox"] ~ .check::before {
       content: "";
       position: absolute;
@@ -1077,20 +1195,25 @@ label.form-check, .form-check {
       opacity: 0;
       transition: background-size 100ms linear;
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -3 12 15' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00009 6.77988L1.68676 4.46655C1.42676 4.20655 1.00676 4.20655 0.746758 4.46655C0.486758 4.72655 0.486758 5.14655 0.746758 5.40655L3.53342 8.19322C3.79342 8.45322 4.21342 8.45322 4.47342 8.19322L11.5268 1.13988C11.7868 0.879883 11.7868 0.459883 11.5268 0.199883C11.2668 -0.0601172 10.8468 -0.0601172 10.5868 0.199883L4.00009 6.77988Z' fill='%23F9F7F7'/%3E%3C/svg%3E%0A"); }
+  label.wco-form-check input[type="checkbox"]:checked ~ .check, .wco-form-check input[type="checkbox"]:checked ~ .check,
   label.form-check input[type="checkbox"]:checked ~ .check, .form-check input[type="checkbox"]:checked ~ .check {
     border: 2px solid var(--wco-checkbox-default-color-iconchecked);
     background-color: var(--wco-checkbox-default-color-iconchecked); }
+    label.wco-form-check input[type="checkbox"]:checked ~ .check::before, .wco-form-check input[type="checkbox"]:checked ~ .check::before,
     label.form-check input[type="checkbox"]:checked ~ .check::before, .form-check input[type="checkbox"]:checked ~ .check::before {
       opacity: 1;
       background-size: 100%; }
+  label.wco-form-check .label, .wco-form-check .label,
   label.form-check .label, .form-check .label {
     color: var(--wco-checkbox-default-color-label);
     font-size: var(--wco-font-size-xs);
     font-family: var(--wco-font-family);
     font-weight: 400;
     letter-spacing: 0.4px; }
+  label.wco-form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check, .wco-form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check,
   label.form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check, .form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check {
     border: 2px solid var(--wco-checkbox-default-color-iconchecked); }
+  label.wco-form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after, .wco-form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after,
   label.form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after, .form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after {
     background-color: var(--wco-checkbox-hover-color-bg);
     content: '';
@@ -1104,6 +1227,7 @@ label.form-check, .form-check {
     z-index: -1;
     transition: transform 300ms ease-in-out;
     animation: introScaleCheckboxWco 300ms ease-in-out forwards; }
+  label.wco-form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label, .wco-form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label,
   label.form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label, .form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label {
     cursor: pointer; }
 
@@ -1114,20 +1238,27 @@ label.form-check, .form-check {
     transform: translate(-50%, -50%) scale(1.1); }
   100% {
     transform: translate(-50%, -50%) scale(1); } }
+  label.wco-form-check:has(input[type="checkbox"]:disabled), .wco-form-check:has(input[type="checkbox"]:disabled),
   label.form-check:has(input[type="checkbox"]:disabled), .form-check:has(input[type="checkbox"]:disabled) {
     opacity: 0.3; }
+  label.wco-form-check input[type="checkbox"]:disabled ~ .check, .wco-form-check input[type="checkbox"]:disabled ~ .check,
   label.form-check input[type="checkbox"]:disabled ~ .check, .form-check input[type="checkbox"]:disabled ~ .check {
     border: 2px solid var(--wco-checkbox-disabled-color-iconchecked);
     background-color: var(--wco-color-neutral-50); }
+  label.wco-form-check input[type="checkbox"]:disabled ~ .label, .wco-form-check input[type="checkbox"]:disabled ~ .label,
   label.form-check input[type="checkbox"]:disabled ~ .label, .form-check input[type="checkbox"]:disabled ~ .label {
     color: var(--wco-checkbox-disabled-color-label); }
+  label.wco-form-check input[type="checkbox"]:checked:disabled ~ .check, .wco-form-check input[type="checkbox"]:checked:disabled ~ .check,
   label.form-check input[type="checkbox"]:checked:disabled ~ .check, .form-check input[type="checkbox"]:checked:disabled ~ .check {
     --accent-color: var(--wco-color-neutral-600);
     border: 2px solid var(--wco-color-neutral-600);
     background-color: var(--wco-checkbox-disabled-color-iconchecked); }
+  label.wco-form-check input[type="checkbox"]:checked:disabled ~ .label, .wco-form-check input[type="checkbox"]:checked:disabled ~ .label,
   label.form-check input[type="checkbox"]:checked:disabled ~ .label, .form-check input[type="checkbox"]:checked:disabled ~ .label {
     color: var(--wco-checkbox-disabled-color-label); }
-  label.form-check.form--error, label.form-check.form-field--error, .form-check.form--error, .form-check.form-field--error {
+  label.wco-form-check.form--error, label.wco-form-check.form-field--error, .wco-form-check.form--error, .wco-form-check.form-field--error,
+  label.form-check.form--error,
+  label.form-check.form-field--error, .form-check.form--error, .form-check.form-field--error {
     --wco-checkbox-default-color-label: var(--wco-color-danger-900);
     --wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
     --wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600); }

package/styles/scss/button.scss

@@ -1,3 +1,5 @@
+button.wco-btn,
+a.wco-btn,
 button.btn,
 a.btn {
   font-size: var(--btn-size, 16px);

package/styles/scss/forms.scss

@@ -29,7 +29,9 @@
   accent-color: var(--wco-input-color-text);
   transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out;
   // input Invalid
+  &:has(input:required) label::after,
   &:has(select:required) label::after,
+  &:has(textarea:required) label::after,
   input:required+label::after,
   textarea:required+label::after,
   input:invalid:not(:placeholder-shown):required+label{
@@ -72,17 +74,6 @@
         --input-shadow: 0px 2px 0px 1px var(--input-color-error);
         color: var(--input-color-error);
     }
-
-    // sizes
-    &.input-sm {
-        height: 32px;
-    }
-    &.input-md {
-        height: 40px;
-    }
-    &.input-lg {
-        height: 48px;
-    }
   }
 
   label {
@@ -173,15 +164,18 @@
   }
 
 
-  textarea~label {
+  textarea ~ label,
+  &:has(textarea) label
+   {
     top: 16px;
     transform: translateY(0);
   }
 
 
+  &:has(input:focus) label,
   &:has(select) label,
+  &:has(textarea:focus) label,
   textarea:focus+label,
-  input:focus+label,
   .readonly+label
   {
     color: var(--wco-input-color-label);
@@ -189,8 +183,11 @@
     transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
   }
 
-  textarea:not(:placeholder-shown)+label,
-  input:not(:placeholder-shown)+label,
+  &:has(input:not(:placeholder-shown)) label,
+  &:has(select:not(:placeholder-shown)) label,
+  &:has(textarea:not(:placeholder-shown)) label,
+  textarea:not(:placeholder-shown)+ label,
+  input:not(:placeholder-shown)+ label,
   .readonly+label
   {
       top: 0;
@@ -198,6 +195,7 @@
       font-weight: 500;
   }
 
+  
   textarea:not(:focus)::placeholder,
   input:not(:focus)::placeholder {
       opacity: 0;
@@ -205,24 +203,39 @@
 
 
   /// Input com ícone no inicio
+  > i:first-child,
   > span:first-child {
     position: absolute;
     top: 50%;
     left: 12px;
     transform: translateY(-50%);
     color: var(--wco-input-color-icon);
+    width: fit-content;
   }
+
+  &:has(input):has(i:first-child) label,
+  &:has(input):has(span:first-child) label,
   > span ~ .form-field__input + label,
   > span ~ .form-field__select + label {
     margin-left: 44px;
   }
+  &:has(input):has(i:first-child) input,
+  &:has(input):has(span:first-child) input,
   > span ~ .form-field__select,
   > span ~ .form-field__input {
     padding-left: 44px;
   }
 
+  &:has(input):has(i:last-child) input,
+  &:has(input):has(span:last-child) input {
+    padding-right: 44px;
+  }
+
+  &:has(input):has(i:last-child) i,
+  &:has(input):has(span:last-child) span,
   > .form-field__select + label + span,
   > .form-field__input + label + span {
+    width: fit-content;
     position: absolute;
     top: 50%;
     right: 12px;
@@ -250,6 +263,17 @@
   --wco-input-min-height: 48px;
 }
 
+///////////////////
+/// Input text ////
+///////////////////
+&:has(input) {
+  input {
+    min-height: var(--wco-input-min-height);
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
 ///////////
 /// Select
 ///////////
@@ -323,7 +347,9 @@
 ///////////
 /// RADIO
 ///////////
-label.form-radio, .form-radio {
+label.wco-form-radio, .wco-form-radio,
+label.form-radio, .form-radio 
+{
   --accent-color: var(--wco-color-primary-700);
   --radio-size: 16px;
   --radio-gap: 8px;
@@ -396,6 +422,7 @@ label.form-radio, .form-radio {
 
 /// Checkbox
 ///////////
+label.wco-form-check, .wco-form-check,
 label.form-check, .form-check {
   --wco-checkbox-default-color-label: var(--wco-color-neutral-900);
   --wco-checkbox-default-color-iconunchecked: var(--wco-color-neutral-500);