@energycap/components 0.43.3 → 0.43.4-ECAP-29229-tag-component.20250502-1711

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.43.3",
+  "version": "0.43.4-ECAP-29229-tag-component.20250502-1711",
   "schematics": "./schematics/collection.json",
   "dependencies": {
     "tslib": "^2.0.0"

package/src/styles/components/_tag.scss

@@ -0,0 +1,18 @@
+@import '../mixins/tags-base';
+
+.tag {
+  @include tag;
+
+  &.is-condensed {
+    @include tag-condensed;
+  }
+
+  a::after {
+    opacity: 1;
+    margin-left: .1875rem;
+  }
+}
+
+.tag-close-btn {
+  @include tag-close-btn;
+}

package/src/styles/index.scss

@@ -16,6 +16,7 @@
 @import 'components/splash';
 @import 'components/unsupported-browsers';
 @import 'components/link-icons';
+@import 'components/tag';
 
 /*!
 * EnergyCAP Components - Utility Styles

package/src/styles/mixins/_tags-base.scss

@@ -1,4 +1,5 @@
 @import '../core';
+@import '../mixins/text';
 
 $tag-colors: (
   info: (bg: var(--ec-color-cobalt-1), border: var(--ec-color-info)),
@@ -37,6 +38,7 @@ $tag-colors: (
 }
 
 @mixin tag() {
+  @include text-caption-1;
   @include truncate;
 
   background-color: var(--ec-color-gray-1);
@@ -46,7 +48,7 @@ $tag-colors: (
   border-radius: calc(var(--ec-border-radius, .25rem) * 3);
   height: 1.5rem;
   line-height: 1.25rem;
-  padding: 0 0.4375rem;
+  padding: 0 var(--ec-tag-padding-x, 0.4375rem);
   vertical-align: top;
 
   > .ec-icon:first-child {
@@ -84,6 +86,7 @@ $tag-colors: (
   height: 100%;
   cursor: pointer;
   position: relative;
+  margin-right: calc(0rem - var(--ec-tag-padding-x, 0.4375rem));
 
   &:hover,
   &:focus {
@@ -103,9 +106,11 @@ $tag-colors: (
 }
 
 @mixin tag-condensed {
+  @include text-caption-2;
+  --ec-tag-padding-x: 0.25rem;
+  
   border-radius: var(--ec-border-radius);
   border-width: 1px;
-  padding: 0 .25rem;
   height: 1.125rem;
   line-height: 1.125rem;
   min-width: 1.125rem;