@wizco/fenixds-core 1.5.1 → 1.5.3

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.5.1",
+  "version": "1.5.3",
   "private": false,
   "sideEffects": false,
   "author": "Raul Melo Fernandez",

package/styles/core.css

@@ -1057,13 +1057,14 @@ a.btn {
     right: 19px;
     transform: translateY(-50%);
     width: min-content;
-    height: 5px;
+    height: min-content;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-top: 6px solid var(--wco-color-primary-600);
     background-size: 30px;
     background-position: center;
-    background-repeat: no-repeat; }
+    background-repeat: no-repeat;
+    pointer-events: none; }
   .wco-form-field:has(select + i):after,
   .form-field:has(select + i):after {
     display: none; }
@@ -1291,7 +1292,8 @@ label.form-check, .form-check {
   transition: all 0.3s;
   container-type: inline-size;
   overflow: hidden;
-  min-width: max-content; }
+  min-width: max-content;
+  position: relative; }
   .wco-form-upload:has(input[type="file"]:not(:disabled)):not(.wco-form-disabled):hover {
     border-color: var(--wco-attachment-hover-color-border);
     background-color: var(--wco-attachment-hover-color-bg); }
@@ -1490,6 +1492,8 @@ label.form-check, .form-check {
   --wco-tag-border-radius: var(--wco-radius-lg, 24px);
   --wco-tag-border-color: var(--wco-color-neutral-700);
   --wco-tag-font-size: var(--wco-font-size-xxs, 14px);
+  --wco-tag-icon-size: var(--wco-icon-size-small);
+  --wco-tag-icon-color: var(--wco-color-neutral-700);
   font-size: var(--wco-tag-font-size, 14px);
   color: var(--wco-tag-color, #333);
   background-color: var(--wco-tag-background-color, #fff);
@@ -1511,10 +1515,34 @@ label.form-check, .form-check {
   text-wrap: nowrap; }
   .wco-tag span,
   .wco-tag i {
-    --wco-tag-icon-size: var(--wco-icon-size-small);
-    --wco-tag-icon-color: var(--wco-color-neutral-700);
     color: var(--wco-tag-icon-color);
-    font-size: var(--wco-tag-icon-size, 14px); }
+    font-size: var(--wco-tag-icon-size, 14px);
+    line-height: 150%; }
+  .wco-tag.tag-icon-toggle {
+    position: relative;
+    padding-inline-end: calc(var(--wco-spacing-xxxs) + 2px); }
+    .wco-tag.tag-icon-toggle > i, .wco-tag.tag-icon-toggle > span, .wco-tag.tag-icon-toggle > button {
+      position: absolute;
+      right: -4px;
+      height: 100%;
+      opacity: 0;
+      display: inline-flex;
+      align-items: center;
+      width: min-content;
+      visibility: hidden;
+      --wco-tag-icon-size: calc(var(--wco-tag-font-size) - 2px);
+      transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, right 0.2s ease-in-out; }
+    .wco-tag.tag-icon-toggle:has(button:last-child):hover > button {
+      cursor: pointer;
+      opacity: 1;
+      visibility: visible;
+      right: 2px; }
+    .wco-tag.tag-icon-toggle:is(button, a):not(:disabled) {
+      cursor: pointer; }
+      .wco-tag.tag-icon-toggle:is(button, a):not(:disabled):hover i, .wco-tag.tag-icon-toggle:is(button, a):not(:disabled):hover span {
+        opacity: 1;
+        visibility: visible;
+        right: 2px; }
 
 .tag-success {
   --wco-tag-color: var(--wco-color-success-700);
@@ -1557,6 +1585,23 @@ label.form-check, .form-check {
   .tag-disabled i {
     --wco-tag-icon-color: var(--wco-color-neutral-500); }
 
+.tag-basic {
+  --wco-tag-size: 28px;
+  --wco-tag-spacing: var(--wco-spacing-quark) var(--wco-spacing-xxxs);
+  --wco-tag-gap: var(--wco-spacing-quark, 4px);
+  --wco-tag-color: var(--wco-color-neutral-900);
+  --wco-tag-background-color: var(--wco-color-neutral-100);
+  --wco-tag-border-radius: var(--wco-radius-nano, 8px);
+  --wco-tag-border-color: transparent; }
+  .tag-basic span, .tag-basic i {
+    font-size: calc(var(--wco-tag-font-size) - 2px); }
+  .tag-basic:is(button):disabled {
+    --wco-tag-background-color: var(--wco-color-neutral-300); }
+  .tag-basic:not(.tag-icon-toggle):has(i:last-child) {
+    padding-right: var(--wco-spacing-quark); }
+  .tag-basic:not(.tag-icon-toggle):has(i:first-child) {
+    padding-left: var(--wco-spacing-quark); }
+
 .wco-group-tags {
   display: flex;
   flex-wrap: wrap;

package/styles/scss/forms.scss

@@ -310,13 +310,14 @@
       right: 19px;
       transform: translateY(-50%);
       width: min-content;
-      height: 5px;
+      height: min-content;
       border-left: 6px solid transparent;
 	    border-right: 6px solid transparent;
 	    border-top: 6px solid var(--wco-color-primary-600);
       background-size: 30px;
       background-position: center;
       background-repeat: no-repeat;
+      pointer-events: none;
     }
 
   }
@@ -611,6 +612,7 @@ label.form-check, .form-check {
   container-type: inline-size;
   overflow: hidden;
   min-width: max-content;
+  position: relative;
   &:has(input[type="file"]:not(:disabled)) {
     &:not(.wco-form-disabled) {
       &:hover {

package/styles/scss/tags.scss

@@ -7,6 +7,8 @@
   --wco-tag-border-radius: var(--wco-radius-lg, 24px);
   --wco-tag-border-color: var(--wco-color-neutral-700);
   --wco-tag-font-size: var(--wco-font-size-xxs, 14px);
+  --wco-tag-icon-size: var(--wco-icon-size-small);
+  --wco-tag-icon-color: var(--wco-color-neutral-700);
   font-size: var(--wco-tag-font-size, 14px);
   color: var(--wco-tag-color, #333);
   background-color: var(--wco-tag-background-color, #fff);
@@ -28,14 +30,60 @@
   text-wrap: nowrap;
   span,
   i {
-    --wco-tag-icon-size: var(--wco-icon-size-small);
-    --wco-tag-icon-color: var(--wco-color-neutral-700);
     color: var(--wco-tag-icon-color);
     font-size: var(--wco-tag-icon-size, 14px);
+    line-height: 150%;
+  }
+
+
+
+  //////////////////////////////////////
+  /// Comportamento do ícone hiden/show
+  //////////////////////////////////////
+  &.tag-icon-toggle {
+    position: relative;
+    padding-inline-end: calc(var(--wco-spacing-xxxs) + 2px);
+    > i, > span, > button {
+      position: absolute;
+      right: -4px;
+      height: 100%;
+      opacity: 0;
+      display: inline-flex;
+      align-items: center;
+      width: min-content;
+      visibility: hidden;
+      --wco-tag-icon-size: calc(var(--wco-tag-font-size) - 2px);
+      transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, right 0.2s ease-in-out;
+    }
+    &:has(button:last-child) { 
+      &:hover {
+      > button {
+          cursor: pointer;
+          opacity: 1;
+          visibility: visible;
+          right: 2px;
+        }
+      }
+    }
+    &:is(button, a) { 
+      &:not(:disabled) {
+        cursor: pointer;
+        &:hover { 
+          i, span {
+            opacity: 1;
+            visibility: visible;
+            right: 2px;
+          }
+        }
+      }
+    }
   }
 }
 
 .tag {
+  //////////
+  // COLORS 
+  //////////
   &-success {
     --wco-tag-color: var(--wco-color-success-700);
     --wco-tag-border-color: var(--wco-color-success-700);
@@ -86,6 +134,35 @@
       --wco-tag-icon-color: var(--wco-color-neutral-500);
     }
   }
+
+  //////////
+  // SIZES
+  //////////
+  &-basic {
+    --wco-tag-size: 28px;
+    --wco-tag-spacing: var(--wco-spacing-quark) var(--wco-spacing-xxxs);
+    --wco-tag-gap: var(--wco-spacing-quark, 4px);
+    --wco-tag-color: var(--wco-color-neutral-900);
+    --wco-tag-background-color: var(--wco-color-neutral-100);
+    --wco-tag-border-radius: var(--wco-radius-nano, 8px);
+    --wco-tag-border-color: transparent;
+    span, i {
+      font-size: calc(var(--wco-tag-font-size) - 2px);
+    }
+    &:is(button) {
+      &:disabled {
+        --wco-tag-background-color: var(--wco-color-neutral-300);
+      }
+    }
+    &:not(.tag-icon-toggle){
+      &:has(i:last-child) {
+        padding-right: var(--wco-spacing-quark);
+      }
+      &:has(i:first-child) {
+        padding-left: var(--wco-spacing-quark);
+      }
+    }
+  }
 }
 
 .wco-group-tags {