@weni/unnnic-system 3.8.2-alpha.2 → 3.9.1-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.8.2-alpha.2",
+  "version": "3.9.1-alpha.0",
   "type": "commonjs",
   "files": [
     "dist",

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

@@ -1,11 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
-"<div data-v-284427ba="" class="unnnic-alert unnnic-alert-position--top-right"><span data-v-26446d8e="" data-v-284427ba="" class="material-symbols-rounded unnnic-icon-scheme--primary unnnic-icon-size--sm" data-testid="material-icon" translate="no" data-test="unnnic-icon">alert-icon</span>
-  <div data-v-284427ba="" class="unnnic-alert__content">
-    <div data-v-284427ba="" class="unnnic-alert__title">TEST ALERT</div>
-    <div data-v-284427ba="" class="unnnic-alert__text">This is an alert message</div>
-  </div>
-  <div data-v-284427ba="" class="unnnic-alert__close-text unnnic--clickable">CLOSE</div>
-</div>"
+"<transition-stub data-v-c3231c18="" name="toast-slide" appear="true" persisted="false" css="true" data-testid="toast-transition">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast">
+    <section data-v-c3231c18="" class="unnnic-toast__content" data-testid="toast-content">
+      <header data-v-c3231c18="" class="unnnic-toast__header" data-testid="toast-header"><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--green-500 unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="toast-type-icon" translate="no">check_circle</span>
+        <h3 data-v-c3231c18="" class="unnnic-toast__title" data-testid="toast-title">Test Alert</h3><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable unnnic-toast__close" data-testid="toast-close-icon" translate="no">close</span>
+      </header>
+      <!--v-if-->
+    </section>
+    <!--v-if-->
+  </aside>
+</transition-stub>"
 `;

package/src/components/Alert/__tests__/__snapshots__/Version1dot1.spec.js.snap

@@ -6,7 +6,7 @@ exports[`Alert.vue > matches snapshot 1`] = `
     <div data-v-fb94f284="" class="alert__progress"></div>
     <div data-v-fb94f284="" class="alert__text">Test Alert</div>
     <div data-v-fb94f284="" class="alert__close">
-      <unnnic-icon-stub data-v-fb94f284="" filled="false" next="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
+      <unnnic-icon-stub data-v-fb94f284="" filled="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
     </div>
   </div>
 </div>"

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

@@ -2,6 +2,6 @@
 
 exports[`AvatarIcon.vue > matches the snapshot 1`] = `
 "<div data-v-5f185a90="" class="unnnic-avatar-icon aux-blue sm">
-  <unnnic-icon-stub data-v-5f185a90="" filled="false" next="false" icon="graph-stats-1" clickable="false" size="md" scheme="aux-blue"></unnnic-icon-stub>
+  <unnnic-icon-stub data-v-5f185a90="" filled="false" icon="graph-stats-1" clickable="false" size="md" scheme="aux-blue"></unnnic-icon-stub>
 </div>"
 `;

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

@@ -2,9 +2,7 @@
 
 exports[`Collapse.vue > matches the snapshot 1`] = `
 "<div data-v-7d0d9fbd="" data-testid="collapse" class="unnnic-collapse unnnic-collapse--size-lg">
-  <div data-v-7d0d9fbd="" data-testid="collapse-header" class="unnnic-collapse__header">Test Title<svg data-v-26446d8e="" data-v-7d0d9fbd="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--xs unnnic-icon-scheme--neutral-cloudy" data-testid="old-map-icons">
-      <path d="M5.31471 14.0096L19.0432 29.5967C19.1676 29.7264 19.3169 29.8296 19.4822 29.9001C19.6474 29.9707 19.8253 30.007 20.005 30.007C20.1847 30.007 20.3625 29.9707 20.5278 29.9001C20.6931 29.8296 20.8424 29.7264 20.9668 29.5967L34.689 14.0096C34.7987 13.886 34.8825 13.7415 34.9353 13.5849C34.9882 13.4282 35.009 13.2625 34.9965 13.0977C34.984 12.9328 34.9385 12.7721 34.8627 12.6252C34.7869 12.4783 34.6824 12.3481 34.5553 12.2423L32.243 10.2963C31.9852 10.0789 31.6522 9.97163 31.316 9.99759C30.9797 10.0235 30.6671 10.1807 30.4457 10.435L20.2406 22.25C20.2112 22.2841 20.1749 22.3114 20.134 22.3302C20.0931 22.3489 20.0487 22.3587 20.0037 22.3587C19.9588 22.3587 19.9143 22.3489 19.8734 22.3302C19.8326 22.3114 19.7962 22.2841 19.7669 22.25L9.558 10.4338C9.33639 10.1806 9.02374 10.0252 8.68809 10.0013C8.52167 9.9865 8.35397 10.0052 8.19489 10.0563C8.03582 10.1074 7.8886 10.1898 7.76195 10.2988L5.44845 12.2423C5.32061 12.3479 5.21534 12.4781 5.13889 12.6252C5.06245 12.7723 5.0164 12.9332 5.0035 13.0985C4.99099 13.2635 5.01212 13.4294 5.06562 13.586C5.11911 13.7426 5.20386 13.8868 5.31471 14.0096Z" fill="#3B414D" class="primary"></path>
-    </svg></div>
+  <div data-v-7d0d9fbd="" data-testid="collapse-header" class="unnnic-collapse__header">Test Title<span data-v-26446d8e="" data-v-7d0d9fbd="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--xs unnnic-icon__size--xs" data-testid="material-icon" translate="no">expand_more</span></div>
   <div data-v-7d0d9fbd="" class="unnnic-collapse__body" style="display: none;"></div>
 </div>"
 `;

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

@@ -10,12 +10,12 @@ exports[`Drawer.vue > Component Rendering > Component Rendering > matches the sn
           <h1 data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</h1>
           <p data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
         </section>
-        <unnnic-icon-stub data-v-196de012="" filled="false" next="false" icon="arrow_back" clickable="true" size="avatar-nano" scheme="neutral-darkest" class="unnnic-drawer__close" data-testid="close-icon"></unnnic-icon-stub>
+        <unnnic-icon-stub data-v-196de012="" filled="false" icon="arrow_back" clickable="true" size="avatar-nano" scheme="neutral-darkest" class="unnnic-drawer__close" data-testid="close-icon"></unnnic-icon-stub>
       </header>
       <section data-v-196de012="" class="unnnic-drawer__content"></section>
       <footer data-v-196de012="" class="unnnic-drawer__footer" data-testid="footer">
-        <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" next="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
-        <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" next="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
+        <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
+        <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
       </footer>
     </section>
   </transition-stub>

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

@@ -1,9 +1,18 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Input.vue > matches the snapshot 1`] = `
-"<div data-v-d890ad85="" class="unnnic-form md">
-  <p data-v-d890ad85="" class="unnnic-form__label">Sample Label</p>
-  <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md text-input--icon-right-size-sm unnnic-form-input" mask="####-####"><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-form-input input-itself input size-md normal input--has-icon-left input--has-icon-right unnnic-form-input input-itself" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" iconrightsize="sm" hascloudycolor="false" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>
-  <p data-v-d890ad85="" class="unnnic-form__message">Error message</p>
-</div>"
+"<section data-v-9f8d6c86="" data-v-d890ad85="" class="unnnic-form-element unnnic-form md" data-testid="form-element">
+  <section data-v-7f222291="" data-v-9f8d6c86="" class="unnnic-label unnnic-form-element__label">
+    <p data-v-7f222291="" class="unnnic-label__label">Sample Label</p>
+    <!--v-if-->
+  </section>
+  <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-form-input" hascloudycolor="false" mask="####-####"><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-form-input input-itself input size-md normal input--has-icon-left input--has-icon-right unnnic-form-input input-itself" hascloudycolor="false" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>
+  <section data-v-9f8d6c86="" class="unnnic-form-element__hints-container">
+    <section data-v-9f8d6c86="" class="unnnic-form-element__message-container">
+      <p data-v-9f8d6c86="" class="unnnic-form-element__message">Error message</p>
+      <!--v-if-->
+    </section>
+    <!--v-if-->
+  </section>
+</section>"
 `;

package/src/components/Input/__test__/__snapshots__/TextInput.spec.js.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`TextInput.vue > matches the snapshot 1`] = `"<div data-v-a0d36167="" class="text-input size--md text-input--icon-right-size-sm"><input data-v-86533b41="" data-v-a0d36167="" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" iconrightsize="sm" allowtogglepassword="false" hascloudycolor="false" class="input-itself input size-md normal input--has-icon-left input--has-icon-right input-itself" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cloudy unnnic-icon-size--sm unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>"`;
+exports[`TextInput.vue > matches the snapshot 1`] = `"<div data-v-a0d36167="" class="text-input size--md"><input data-v-86533b41="" data-v-a0d36167="" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" allowtogglepassword="false" class="input-itself input size-md normal input--has-icon-left input--has-icon-right input-itself" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>"`;

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

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Label > applies the correct classes and styles 1`] = `"<p class="unnnic-label__label">Label Test</p>"`;
+exports[`Label > applies the correct classes and styles 1`] = `"<p data-v-7f222291="" class="unnnic-label__label">Label Test</p>"`;

package/src/components/PageHeader/PageHeader.vue

@@ -0,0 +1,154 @@
+<template>
+  <header
+    :class="`page-header 
+      ${hasBackButton ? 'page-header--has-back-button' : ''} 
+      ${hasTabsSlot ? 'page-header--has-tabs' : ''}
+    `"
+  >
+    <UnnnicButton
+      v-if="hasBackButton"
+      data-testid="back-button"
+      type="tertiary"
+      iconCenter="arrow_back_ios_new"
+      class="page-header__back-button"
+      @click="handleBackClick"
+    />
+
+    <section class="page-header__infos">
+      <section class="page-header__main-infos">
+        <h1
+          class="page-header__title"
+          data-testid="page-title"
+        >
+          {{ title }}
+        </h1>
+
+        <slot name="tag" />
+      </section>
+
+      <p
+        v-if="description"
+        class="page-header__description"
+        data-testid="page-description"
+      >
+        {{ description }}
+      </p>
+    </section>
+
+    <section
+      v-if="hasActionsSlot"
+      class="page-header__actions"
+      data-testid="page-actions"
+    >
+      <slot name="actions" />
+    </section>
+
+    <section
+      v-if="hasTabsSlot"
+      class="page-header__tabs"
+      data-testid="page-tabs"
+    >
+      <slot name="tabs" />
+    </section>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+import UnnnicButton from '../Button/Button.vue';
+
+import type { PageHeaderProps, PageHeaderEmits } from './types';
+
+withDefaults(defineProps<PageHeaderProps>(), {
+  description: '',
+  hasBackButton: false,
+});
+
+const emit = defineEmits<PageHeaderEmits>();
+
+const slots = useSlots();
+const hasActionsSlot = !!slots.actions;
+const hasTabsSlot = !!slots.tabs;
+
+const handleBackClick = (): void => {
+  emit('back');
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.page-header {
+  width: 100%;
+
+  margin-top: $unnnic-space-2;
+  padding-bottom: $unnnic-space-6;
+
+  display: grid;
+  gap: $unnnic-space-4;
+  grid-template-columns: 1fr minmax(250px, 20%); // TODO: Verify if is 250px or 20% (8fr 2fr)
+  align-items: center;
+
+  border-bottom: 1px solid $unnnic-color-border-soft;
+
+  &--has-back-button {
+    grid-template-columns: auto 1fr minmax(250px, 20%);
+  }
+
+  &--has-tabs {
+    border-bottom: none;
+  }
+
+  &__infos {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-space-2;
+  }
+
+  &__main-infos {
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+  }
+
+  &__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    color: $unnnic-color-fg-emphasized;
+    text-overflow: ellipsis;
+
+    font: $unnnic-font-display-1;
+  }
+
+  &__description {
+    color: $unnnic-color-fg-base;
+
+    font: $unnnic-font-body;
+  }
+
+  &__actions {
+    display: flex;
+    gap: $unnnic-space-2;
+    align-items: center;
+    justify-content: flex-end;
+
+    > * {
+      width: 100%;
+    }
+  }
+
+  &__tabs {
+    grid-column: 1 / -1;
+    grid-row: 2 / 3;
+  }
+}
+</style>

package/src/components/PageHeader/index.ts

@@ -0,0 +1,2 @@
+export { default } from './PageHeader.vue';
+export { default as PageHeader } from './PageHeader.vue';

package/src/components/PageHeader/types.ts

@@ -0,0 +1,10 @@
+export interface PageHeaderProps {
+  title: string;
+  description?: string;
+
+  hasBackButton?: boolean;
+}
+
+export interface PageHeaderEmits {
+  (event: 'back'): void;
+}

package/src/components/Radio/Radio.vue

@@ -26,6 +26,13 @@
         {{ label }}
         <slot />
       </p>
+
+      <footer
+        v-if="helper"
+        class="unnnic-radio__helper"
+      >
+        {{ helper }}
+      </footer>
     </label>
   </section>
 </template>
@@ -55,6 +62,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  helper: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -93,9 +104,11 @@ $radio-size: 21px;
   &__input-wrapper {
     width: fit-content;
 
-    display: flex;
+    display: grid;
+    grid-template-columns: $radio-size auto;
+    grid-template-rows: auto auto;
     align-items: center;
-    gap: $unnnic-space-2;
+    column-gap: $unnnic-space-2;
 
     cursor: pointer;
 
@@ -143,5 +156,13 @@ $radio-size: 21px;
       color: $unnnic-color-fg-muted;
     }
   }
+
+  &__helper {
+    grid-column: 2 / -1;
+    grid-row: 2;
+
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-base;
+  }
 }
 </style>

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Radio.vue > matches the snapshot 1`] = `
-"<div data-v-38c6bf5e="" class="unnnic-radio-container unnnic-radio-container--md"><svg data-v-26446d8e="" data-v-38c6bf5e="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--md unnnic-icon-scheme--neutral-cleanest unnnic-radio" data-testid="old-map-icons">
-    <circle cx="20" cy="20.0005" r="14.5" stroke="#3B414D" class="primary-stroke"></circle>
-  </svg><span data-v-38c6bf5e="" class="label">Option 1</span></div>"
+"<section data-v-38c6bf5e="" class="unnnic-radio" size="md"><label data-v-38c6bf5e="" class="unnnic-radio__input-wrapper"><input data-v-38c6bf5e="" class="unnnic-radio__input" type="radio" name="">
+    <p data-v-38c6bf5e="" class="unnnic-radio__label"> Option 1</p>
+  </label></section>"
 `;

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

@@ -1,11 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Switch > should match the snapshot 1`] = `
-"<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--md unnnic--clickable unnnic-icon-scheme--neutral-soft unnnic-switch__icon" data-testid="old-map-icons" 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>
+"<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>
   <!--v-if-->
-</div>"
+</section>"
 `;

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="material-symbols-rounded unnnic-icon-scheme--neutral-cleanest 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 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>
       <li data-v-b4e39fac="" class="tab-head tab-head--active">tab2
         <!--v-if-->

package/src/components/Tag/DefaultTag.vue

@@ -62,6 +62,7 @@ const color = computed(() => {
   gap: $unnnic-space-1;
   border-radius: $unnnic-border-radius-pill;
   padding: calc($unnnic-space-1 * 1.5) $unnnic-space-3;
+  width: fit-content;
 
   background-color: v-bind(color);
 
@@ -72,6 +73,10 @@ const color = computed(() => {
   &__label {
     margin: 0;
 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
     font: $unnnic-font-caption-1;
     color: $unnnic-color-fg-emphasized;
   }

package/src/components/TextArea/TextArea.vue

@@ -4,6 +4,7 @@
     :size="size"
     :disabled="disabled"
     :message="message"
+    :tooltip="tooltip"
     :error="computedError"
   >
     <textarea
@@ -85,6 +86,11 @@ export default {
       },
     },
 
+    tooltip: {
+      type: String,
+      default: '',
+    },
+
     errors: {
       type: Array,
       default: () => [],

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

@@ -2,8 +2,16 @@
 
 exports[`TextArea.vue > matches the snapshot 1`] = `
 "<section data-v-9f8d6c86="" data-v-735b3c51="" class="unnnic-form-element">
-  <p data-v-9f8d6c86="" class="unnnic-form-element__label">Description</p><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
-  <!--v-if-->
-  <p data-v-9f8d6c86="" class="unnnic-form-element__message"> <span data-v-9f8d6c86="" class="unnnic-form-element__right-message">0/200</span></p>
+  <section data-v-7f222291="" data-v-9f8d6c86="" class="unnnic-label unnnic-form-element__label">
+    <p data-v-7f222291="" class="unnnic-label__label">Description</p>
+    <!--v-if-->
+  </section><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
+  <section data-v-9f8d6c86="" class="unnnic-form-element__hints-container">
+    <section data-v-9f8d6c86="" class="unnnic-form-element__message-container">
+      <!--v-if-->
+      <!--v-if-->
+    </section>
+    <p data-v-9f8d6c86="">0/200</p>
+  </section>
 </section>"
 `;

package/src/components/Toast/Toast.vue

@@ -128,7 +128,7 @@ const startTimeout = () => {
   }
 };
 
-const clearTimeout = () => {
+const stopTimeout = () => {
   if (timeoutId) {
     window.clearTimeout(timeoutId);
     timeoutId = null;
@@ -141,7 +141,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  clearTimeout();
+  stopTimeout();
 });
 </script>
 
@@ -192,16 +192,16 @@ onUnmounted(() => {
     width: 100%;
 
     display: flex;
-    gap: $unnnic-space-2;
   }
 
   &__content {
     flex-direction: column;
-    gap: $unnnic-space-2;
+    gap: $unnnic-space-1;
   }
 
   &__header {
     align-items: center;
+    gap: $unnnic-space-2;
   }
 
   &__title {

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

@@ -254,11 +254,18 @@ describe('UnnnicToast', () => {
     });
 
     test('clears timeout when component is unmounted', () => {
+      vi.useRealTimers();
       const clearTimeoutSpy = vi.spyOn(window, 'clearTimeout');
-      wrapper = createTimeoutWrapper();
 
-      wrapper.unmount();
+      const localWrapper = shallowMount(Toast, {
+        props: { title: 'Test Toast', timeout: 1000 },
+      });
+
+      localWrapper.unmount();
       expect(clearTimeoutSpy).toHaveBeenCalled();
+
+      clearTimeoutSpy.mockRestore();
+      vi.useFakeTimers();
     });
   });
 

package/src/components/index.ts

@@ -106,6 +106,11 @@ import DialogHeader from './ui/dialog/DialogHeader.vue';
 import DialogTitle from './ui/dialog/DialogTitle.vue';
 import DialogTrigger from './ui/dialog/DialogTrigger.vue';
 import DialogClose from './ui/dialog/DialogClose.vue';
+import Tabs from './ui/tabs/Tabs.vue';
+import TabsList from './ui/tabs/TabsList.vue';
+import TabsTrigger from './ui/tabs/TabsTrigger.vue';
+import TabsContent from './ui/tabs/TabsContent.vue';
+import PageHeader from './PageHeader/PageHeader.vue';
 
 type VueComponent = Component;
 
@@ -221,6 +226,11 @@ export const components: ComponentsMap = {
   unnnicDialogTitle: DialogTitle,
   unnnicDialogTrigger: DialogTrigger,
   unnnicDialogClose: DialogClose,
+  unnnicTabs: Tabs,
+  unnnicTabsList: TabsList,
+  unnnicTabsTrigger: TabsTrigger,
+  unnnicTabsContent: TabsContent,
+  unnnicPageHeader: PageHeader,
 };
 
 export const unnnicFontSize = fontSize;
@@ -319,6 +329,8 @@ export const unnnicTemplatePreview = TemplatePreview as VueComponent;
 export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 export const unnnicDataTable = DataTable as VueComponent;
 export const unnnicChip = Chip;
+export const unnnicToast = Toast;
+export const unnnicToastManager = toast;
 export const unnnicPopover = Popover;
 export const unnnicPopoverContent = PopoverContent;
 export const unnnicPopoverTrigger = PopoverTrigger;
@@ -330,6 +342,11 @@ export const unnnicDialogHeader = DialogHeader;
 export const unnnicDialogTitle = DialogTitle;
 export const unnnicDialogTrigger = DialogTrigger;
 export const unnnicDialogClose = DialogClose;
+export const unnnicTabs = Tabs;
+export const unnnicTabsList = TabsList;
+export const unnnicTabsTrigger = TabsTrigger;
+export const unnnicTabsContent = TabsContent;
+export const unnnicPageHeader = PageHeader;
 
 export const UnnnicFontSize = fontSize;
 export const UnnnicInput = input;
@@ -439,3 +456,8 @@ export const UnnnicDialogHeader = DialogHeader;
 export const UnnnicDialogTitle = DialogTitle;
 export const UnnnicDialogTrigger = DialogTrigger;
 export const UnnnicDialogClose = DialogClose;
+export const UnnnicTabs = Tabs;
+export const UnnnicTabsList = TabsList;
+export const UnnnicTabsTrigger = TabsTrigger;
+export const UnnnicTabsContent = TabsContent;
+export const UnnnicPageHeader = PageHeader;

package/src/components/ui/dialog/DialogHeader.vue

@@ -52,6 +52,7 @@ const iconsMapper = {
       <UnnnicButton
         type="tertiary"
         iconCenter="close"
+        size="small"
       />
     </DialogClose>
   </header>

package/src/components/ui/tabs/Tabs.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
+
+defineOptions({
+  name: 'UnnnicTabs',
+});
+
+const props = defineProps<TabsRootProps>();
+const emits = defineEmits<TabsRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

package/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsContent } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  TabsContentProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <TabsContent
+    :class="cn(props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>