@weni/unnnic-system 3.9.3-alpha.0 → 3.9.4

package/src/components/Switch/__tests__/Switch.spec.js

@@ -12,26 +12,93 @@ describe('Switch', () => {
   beforeEach(() => {
     wrapper = createWrapper({ modelValue: false });
   });
+  it('should render the component correctly with default props', () => {
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).exists()).toBe(true);
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('should render the left text (textLeft) when provided', async () => {
+    await wrapper.setProps({ textLeft: 'Left Text' });
+
+    // This check ensures that the icon is placed before the switch text
+    const switchChildren = wrapper.findComponent(Switch).element.children;
+    expect(switchChildren[0].getAttribute('data-test-id')).toBe(
+      'switch-text-left',
+    );
+    expect(switchChildren[1].getAttribute('data-test-id')).toBe('switch-icon');
+  });
+
+  it('should render the right text (textRight) when provided', async () => {
+    await wrapper.setProps({ textRight: 'Right Text' });
+
+    // This check ensures that the icon is placed after the switch text
+    const switchChildren = wrapper.findComponent(Switch).element.children;
+    expect(switchChildren[0].getAttribute('data-test-id')).toBe('switch-icon');
+    expect(switchChildren[1].getAttribute('data-test-id')).toBe(
+      'switch-text-right',
+    );
+  });
+
+  it('should render the correct icon when the switch is disabled/enabled', async () => {
+    await wrapper.setProps({ disabled: true });
+    const disabledIconComponent = wrapper.findComponent({ name: 'UnnnicIcon' });
+    expect(disabledIconComponent.props('icon')).toBe('switch-default-disabled');
 
-  it('should render the option when provided', async () => {
-    await wrapper.setProps({ option: 'Option Text' });
+    await wrapper.setProps({ modelValue: true });
+    const enabledIconComponent = wrapper.findComponent({ name: 'UnnnicIcon' });
+    expect(enabledIconComponent.props('icon')).toBe('switch-selected-disabled');
+  });
 
-    const switchOption = wrapper.find('[data-testid="switch-option"]');
-    expect(switchOption.text()).toBe('Option Text');
+  it('should render the correct icon based on the isActive state', async () => {
+    expect(wrapper.vm.isActive).toBe(false);
+    await wrapper.setProps({ modelValue: true });
+    expect(wrapper.vm.isActive).toBe(true);
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('icon')).toBe(
+      'switch-default',
+    );
+  });
+
+  it('should render the correct icon size based on the size prop', async () => {
+    await wrapper.setProps({ size: 'small' });
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('size')).toBe(
+      'sm',
+    );
+
+    await wrapper.setProps({ size: 'medium' });
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('size')).toBe(
+      'md',
+    );
+  });
+
+  it('should change the icon color based on the state', async () => {
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('scheme')).toBe(
+      'neutral-soft',
+    );
+
+    await wrapper.setProps({ modelValue: true });
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('scheme')).toBe(
+      'brand-weni',
+    );
+
+    await wrapper.setProps({ disabled: true });
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('scheme')).toBe(
+      'neutral-soft',
+    );
   });
 
   it('should toggle isActive state and emit the correct event when toggleState is called', async () => {
     const initialIsActive = wrapper.vm.isActive;
-    const switchInput = wrapper.find('input[type="checkbox"]');
-    await switchInput.trigger('change');
+    const switchIcon = wrapper.findComponent('[ data-test-id="switch-icon"]');
+    await switchIcon.trigger('click');
     expect(wrapper.emitted('update:model-value')).toBeTruthy();
     expect(wrapper.vm.isActive).toBe(!initialIsActive);
   });
 
   it('should not change state when disabled is true', async () => {
     await wrapper.setProps({ disabled: true });
-    const switchInput = wrapper.find('input[type="checkbox"]');
-    await switchInput.trigger('change');
+    const switchIcon = wrapper.findComponent('[ data-test-id="switch-icon"]');
+    await switchIcon.trigger('click');
     expect(wrapper.emitted('update:model-value')).toBeFalsy();
     expect(wrapper.vm.isActive).toBe(false);
   });

package/src/components/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -1,10 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Switch > should match the snapshot 1`] = `
-"<section data-v-e4356c9d="" class="unnnic-switch">
-  <!--v-if--><label data-v-e4356c9d="" class="unnnic-switch__input-wrapper"><input data-v-e4356c9d="" class="unnnic-switch__input" type="checkbox">
-    <!--v-if-->
-  </label>
+"<div data-v-e4356c9d="" class="unnnic-switch">
+  <!--v-if--><svg data-v-3d58a7dd="" data-v-26446d8e="" data-v-e4356c9d="" id="default" width="80" height="40" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon--size-svg-md unnnic-icon__size--md unnnic--clickable unnnic-icon-scheme--neutral-soft unnnic-switch__icon" data-testid="custom-icon" lineHeight="" disabled="false" data-test-id="switch-icon">
+    <rect data-v-3d58a7dd="" x="4.20013" y="2.10046" width="71.6" height="35.8" rx="17.9" class="primary"></rect>
+    <circle data-v-3d58a7dd="" id="default-circle" cx="22.5" cy="20.0005" r="12.5" fill="white"></circle>
+  </svg>
   <!--v-if-->
-</section>"
+</div>"
 `;

package/src/components/Tab/Tab.vue

@@ -9,7 +9,6 @@
           class="tab-head"
           :class="{
             'tab-head--active': localValue === tab,
-            'tab-head--disabled': disabledTabs?.includes(tab),
           }"
           @click="change(tab)"
         >
@@ -21,9 +20,10 @@
             side="bottom"
           >
             <UnnnicIcon
-              icon="help"
+              icon="info"
               :size="size === 'sm' ? 'xs' : 'sm'"
-              scheme="fg-base"
+              filled
+              scheme="neutral-cleanest"
             />
           </UnnnicToolTip>
         </li>
@@ -65,13 +65,6 @@ export default {
     tabs: {
       type: Array,
       default: null,
-      validator: (tabs) => {
-        return tabs.every((tab) => typeof tab === 'string') && tabs.length <= 5;
-      },
-    },
-    disabledTabs: {
-      type: Array,
-      default: null,
     },
   },
   emits: ['change'],
@@ -112,10 +105,6 @@ export default {
       return '';
     },
     change(value) {
-      if (this.disabledTabs?.includes(value)) {
-        return;
-      }
-
       this.localValue = value;
       this.$emit('change', this.localValue);
     },
@@ -130,15 +119,18 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  color: $unnnic-color-fg-base;
-  font: $unnnic-font-action;
-  margin-bottom: $unnnic-space-4;
-  border-bottom: $unnnic-border-width-thinner solid $unnnic-color-border-base;
+  color: $unnnic-color-neutral-cloudy;
+  font-family: $unnnic-font-family-secondary;
+  font-weight: $unnnic-font-weight-bold;
+  font-size: $unnnic-font-size-body-lg;
+  line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
+  margin-bottom: $unnnic-inset-sm;
+  border-bottom: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
 }
 
 .tab-content {
   display: flex;
-  gap: $unnnic-space-6;
+  gap: $unnnic-spacing-sm;
 
   margin: 0;
   padding: 0;
@@ -147,24 +139,27 @@ export default {
 
 .tab-head {
   display: flex;
-  gap: $unnnic-space-2;
+  gap: $unnnic-spacing-xs;
   align-items: center;
 
   cursor: pointer;
-  padding: $unnnic-space-2 $unnnic-space-4;
+  margin: $unnnic-spacing-xs $unnnic-spacing-sm;
 
   .unnnic-tooltip {
     display: flex;
   }
 
   &:hover {
-    color: $unnnic-color-fg-emphasized;
+    color: $unnnic-color-neutral-black;
   }
 }
 
 .tab-head--active {
-  color: $unnnic-color-fg-emphasized;
-  font: $unnnic-font-action;
+  font-family: $unnnic-font-family-secondary;
+  font-weight: $unnnic-font-weight-bold;
+  color: $unnnic-color-neutral-black;
+  font-size: $unnnic-font-size-body-lg;
+  line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
   transition: 0.4s;
 
   position: relative;
@@ -173,23 +168,14 @@ export default {
     content: '';
 
     position: absolute;
-    bottom: 0;
-    left: 0;
+    bottom: -$unnnic-spacing-xs;
+    left: -$unnnic-spacing-sm;
 
     display: block;
 
-    width: 100%;
+    width: calc(100% + (#{$unnnic-spacing-sm} * 2));
 
-    border-bottom: $unnnic-border-width-thin solid $unnnic-color-border-active;
-  }
-}
-
-.tab-head--disabled {
-  color: $unnnic-color-fg-muted;
-  cursor: default;
-
-  &:hover {
-    color: $unnnic-color-fg-muted;
+    border-bottom: $unnnic-border-width-thin solid $unnnic-color-weni-600;
   }
 }
 

package/src/components/Tab/__test__/__snapshots__/Tab.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Tab.vue > matches the snapshot 1`] = `
 "<div data-v-b4e39fac="" class="tab size-md">
   <header data-v-b4e39fac="" class="tab-header">
     <ul data-v-b4e39fac="" class="tab-content">
-      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no">help</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
+      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-cleanest unnnic-icon-size--sm unnnic-icon__size--sm material-symbols-rounded--filled" data-testid="material-icon" translate="no">info</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
       </li>
       <li data-v-b4e39fac="" class="tab-head tab-head--active">tab2
         <!--v-if-->

package/src/components/TableNext/__test__/__snapshots__/TableNext.spec.js.snap

@@ -42,7 +42,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
     <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 1 of 1</p>
     <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
         <!--v-if-->
@@ -51,7 +51,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button></div>
   </section>

package/src/components/TableNext/__test__/__snapshots__/TablePagination.spec.js.snap

@@ -5,7 +5,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
   <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 10 of 100</p>
   <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
       <!--v-if-->
@@ -34,7 +34,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button></div>
 </section>"

package/src/components/Tag/BrandTag.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    :class="{
+      'unnnic-brand-tag': true,
+      'unnnic-brand-tag--disabled': !disabled,
+      'unnnic-brand-tag--clickable': clickable,
+    }"
+  >
+    <span class="unnnic-brand-tag__label">{{ text }}</span>
+    <UnnnicIcon
+      :icon="disabled ? 'close-1' : 'add-1'"
+      :scheme="disabled ? 'neutral-snow' : 'brand-weni-dark'"
+      class="unnnic-brand-tag__icon"
+      size="xs"
+    />
+  </div>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'UnnnicBrandTag',
+  components: {
+    UnnnicIcon,
+  },
+  props: {
+    text: {
+      type: String,
+      default: null,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    closeClicked() {
+      if (!this.closeClicked) return;
+      this.$emit('close-click');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-brand-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $unnnic-border-radius-pill;
+  border: 1px solid $unnnic-color-brand-weni-soft;
+  height: 1.875 * $unnnic-font-size;
+  white-space: nowrap;
+  transition: 0.2s;
+
+  color: $unnnic-color-neutral-snow;
+  background-color: $unnnic-color-brand-weni-dark;
+  &:hover {
+    background-color: $unnnic-color-brand-weni-soft;
+  }
+
+  &--disabled {
+    color: $unnnic-color-brand-weni-dark;
+    background-color: $unnnic-color-background-snow;
+    &:hover {
+      background-color: rgba(
+        $unnnic-color-brand-weni,
+        $unnnic-opacity-level-extra-light
+      );
+    }
+  }
+  &--clickable {
+    cursor: pointer;
+  }
+
+  &__label {
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-md;
+    font-weight: $unnnic-font-weight-regular;
+    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
+    padding: $unnnic-spacing-stack-nano $unnnic-inline-ant;
+  }
+
+  &__icon {
+    margin-right: $unnnic-inline-ant;
+    cursor: pointer;
+  }
+}
+</style>

package/src/components/Tag/DefaultTag.vue

@@ -1,88 +1,144 @@
 <template>
-  <section :class="`unnnic-tag unnnic-tag--${size}`">
+  <section
+    :class="`unnnic-tag
+        ${!disabled ? `unnnic-tag-scheme--${scheme}` : `unnnic-tag--disabled`}
+        ${clickable ? 'unnnic-tag--clickable' : ''}`"
+  >
     <section
       v-if="leftIcon"
       class="unnnic-tag__icon"
     >
       <UnnnicIcon
         :icon="leftIcon"
-        scheme="fg-emphasized"
+        :scheme="scheme"
+        size="sm"
+      />
+    </section>
+    <span
+      :class="`unnnic-tag__label
+      ${disabled ? 'unnnic-tag__label--disabled' : ''}`"
+      >{{ text }}</span
+    >
+    <section
+      v-if="rightIcon || hasCloseIcon"
+      :class="{ 'unnnic-tag__icon': true, clickable: !rightIcon }"
+      @click.stop="hasCloseIcon ? emitClose() : () => {}"
+    >
+      <UnnnicIcon
+        :icon="rightIcon || 'close'"
+        :scheme="rightIcon ? scheme : 'neutral-darkest'"
         size="sm"
       />
     </section>
-    <p :class="`unnnic-tag__label`">{{ text }}</p>
   </section>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { color as colors } from '@/assets/tokens/colors.json';
-
+<script>
 import UnnnicIcon from '../Icon.vue';
 
-import type { DefaultTagProps } from './types';
-
-const props = withDefaults(defineProps<DefaultTagProps>(), {
-  text: undefined,
-  size: 'medium',
-  scheme: 'aux-purple',
-  leftIcon: undefined,
-});
-
-const COLOR_MAPPING = [
-  { keywords: ['green'], color: colors.green[200].value },
-  { keywords: ['blue'], color: colors.blue[200].value },
-  { keywords: ['purple'], color: colors.purple[200].value },
-  { keywords: ['red', 'pink'], color: colors.red[200].value },
-  { keywords: ['orange'], color: colors.orange[200].value },
-  { keywords: ['yellow'], color: colors.yellow[200].value },
-  { keywords: ['gray'], color: colors.gray[200].value },
-  { keywords: ['teal', 'weni'], color: colors.teal[200].value },
-];
-
-const color = computed(() => {
-  const scheme = props.scheme.toLowerCase();
-
-  const match = COLOR_MAPPING.find(({ keywords }) =>
-    keywords.some((keyword) => scheme.includes(keyword)),
-  );
-
-  return match?.color ?? colors.gray[200].value;
-});
+export default {
+  name: 'UnnnicTag',
+  components: {
+    UnnnicIcon,
+  },
+  props: {
+    text: {
+      type: String,
+      default: null,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    hasCloseIcon: {
+      type: Boolean,
+      default: false,
+    },
+    scheme: {
+      type: String,
+      default: 'aux-purple',
+    },
+    leftIcon: {
+      type: String,
+      default: null,
+    },
+    rightIcon: {
+      type: String,
+      default: null,
+    },
+  },
+  methods: {
+    closeClicked() {
+      if (!this.closeClicked) return;
+      this.$emit('close-click');
+    },
+    emitClose() {
+      this.$emit('close');
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
+@each $name, $color in $scheme-colors {
+  .unnnic-tag-scheme--#{$name} {
+    background-color: rgba($color, $unnnic-opacity-level-light);
+    outline-style: solid;
+    outline-color: rgba($color, $unnnic-opacity-level-extra-light);
+    outline-width: $unnnic-border-width-thinner;
+    outline-offset: -$unnnic-border-width-thinner;
+  }
+}
+
 .unnnic-tag {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: $unnnic-space-1;
   border-radius: $unnnic-border-radius-pill;
-  padding: calc($unnnic-space-1 * 1.5) $unnnic-space-3;
-  width: fit-content;
+  padding: 0 $unnnic-spacing-xs;
 
-  background-color: v-bind(color);
+  &--disabled {
+    background-color: $unnnic-color-background-sky;
+  }
 
-  &--small {
-    padding: calc($unnnic-space-1 * 0.5) $unnnic-space-3;
+  &--clickable {
+    cursor: pointer;
+
+    @each $name, $color in $scheme-colors {
+      &.unnnic-tag-scheme--#{$name}:hover {
+        outline-style: solid;
+        outline-color: $unnnic-color-neutral-cleanest;
+        outline-width: $unnnic-border-width-thinner;
+        outline-offset: -$unnnic-border-width-thinner;
+      }
+    }
   }
 
   &__label {
-    margin: 0;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    font: $unnnic-font-caption-1;
-    color: $unnnic-color-fg-emphasized;
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-md;
+    font-weight: $unnnic-font-weight-regular;
+    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
+    padding: $unnnic-spacing-stack-nano;
+    color: $unnnic-color-neutral-darkest;
+
+    &--disabled {
+      color: $unnnic-color-neutral-cloudy;
+    }
   }
 
   &__icon {
     display: flex;
   }
+
+  .clickable {
+    cursor: pointer;
+  }
 }
 </style>