@weni/unnnic-system 3.2.9-alpha.0 → 3.2.9-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.9-alpha.0",
+  "version": "3.2.9-alpha.10",
   "type": "module",
   "files": [
     "dist",

package/src/assets/scss/scheme-colors.scss

@@ -3,242 +3,118 @@
 
 // Global scheme colors mapping for all components
 
-$unnnic-scheme-colors:
-  'white' $unnnic-color-white,
-
-  'black' $unnnic-color-black,
-
-  'gray-50' $unnnic-color-gray-50,
-  'gray-100' $unnnic-color-gray-100,
-  'gray-200' $unnnic-color-gray-200,
-  'gray-300' $unnnic-color-gray-300,
-  'gray-400' $unnnic-color-gray-400,
-  'gray-500' $unnnic-color-gray-500,
-  'gray-600' $unnnic-color-gray-600,
-  'gray-700' $unnnic-color-gray-700,
-  'gray-800' $unnnic-color-gray-800,
-  'gray-900' $unnnic-color-gray-900,
-  'gray-950' $unnnic-color-gray-950,
-
-  'teal-50' $unnnic-color-teal-50,
-  'teal-100' $unnnic-color-teal-100,
-  'teal-200' $unnnic-color-teal-200,
-  'teal-300' $unnnic-color-teal-300,
-  'teal-400' $unnnic-color-teal-400,
-  'teal-500' $unnnic-color-teal-500,
-  'teal-600' $unnnic-color-teal-600,
-  'teal-700' $unnnic-color-teal-700,
-  'teal-800' $unnnic-color-teal-800,
-  'teal-900' $unnnic-color-teal-900,
-  'teal-950' $unnnic-color-teal-950,
-
-  'green-50' $unnnic-color-green-50,
-  'green-100' $unnnic-color-green-100,
-  'green-200' $unnnic-color-green-200,
-  'green-300' $unnnic-color-green-300,
-  'green-400' $unnnic-color-green-400,
-  'green-500' $unnnic-color-green-500,
-  'green-600' $unnnic-color-green-600,
-  'green-700' $unnnic-color-green-700,
-  'green-800' $unnnic-color-green-800,
-  'green-900' $unnnic-color-green-900,
-  'green-950' $unnnic-color-green-950,
-
-  'blue-50' $unnnic-color-blue-50,
-  'blue-100' $unnnic-color-blue-100,
-  'blue-200' $unnnic-color-blue-200,
-  'blue-300' $unnnic-color-blue-300,
-  'blue-400' $unnnic-color-blue-400,
-  'blue-500' $unnnic-color-blue-500,
-  'blue-600' $unnnic-color-blue-600,
-  'blue-700' $unnnic-color-blue-700,
-  'blue-800' $unnnic-color-blue-800,
-  'blue-900' $unnnic-color-blue-900,
-  'blue-950' $unnnic-color-blue-950,
-
-  'purple-50' $unnnic-color-purple-50,
-  'purple-100' $unnnic-color-purple-100,
-  'purple-200' $unnnic-color-purple-200,
-  'purple-300' $unnnic-color-purple-300,
-  'purple-400' $unnnic-color-purple-400,
-  'purple-500' $unnnic-color-purple-500,
-  'purple-600' $unnnic-color-purple-600,
-  'purple-700' $unnnic-color-purple-700,
-  'purple-800' $unnnic-color-purple-800,
-  'purple-900' $unnnic-color-purple-900,
-  'purple-950' $unnnic-color-purple-950,
-
-  'red-50' $unnnic-color-red-50,
-  'red-100' $unnnic-color-red-100,
-  'red-200' $unnnic-color-red-200,
-  'red-300' $unnnic-color-red-300,
-  'red-400' $unnnic-color-red-400,
-  'red-500' $unnnic-color-red-500,
-  'red-600' $unnnic-color-red-600,
-  'red-700' $unnnic-color-red-700,
-  'red-800' $unnnic-color-red-800,
-  'red-900' $unnnic-color-red-900,
-  'red-950' $unnnic-color-red-950,
-
-  'orange-50' $unnnic-color-orange-50,
-  'orange-100' $unnnic-color-orange-100,
-  'orange-200' $unnnic-color-orange-200,
-  'orange-300' $unnnic-color-orange-300,
-  'orange-400' $unnnic-color-orange-400,
-  'orange-500' $unnnic-color-orange-500,
-  'orange-600' $unnnic-color-orange-600,
-  'orange-700' $unnnic-color-orange-700,
-  'orange-800' $unnnic-color-orange-800,
-  'orange-900' $unnnic-color-orange-900,
-  'orange-950' $unnnic-color-orange-950,
-
-  'yellow-50' $unnnic-color-yellow-50,
-  'yellow-100' $unnnic-color-yellow-100,
-  'yellow-200' $unnnic-color-yellow-200,
-  'yellow-300' $unnnic-color-yellow-300,
-  'yellow-400' $unnnic-color-yellow-400,
-  'yellow-500' $unnnic-color-yellow-500,
-  'yellow-600' $unnnic-color-yellow-600,
-  'yellow-700' $unnnic-color-yellow-700,
-  'yellow-800' $unnnic-color-yellow-800,
-  'yellow-900' $unnnic-color-yellow-900,
-  'yellow-950' $unnnic-color-yellow-950,
-
-  'bg-base' $unnnic-color-bg-base,
-  'bg-soft' $unnnic-color-bg-soft,
-  'bg-muted' $unnnic-color-bg-muted,
-  'bg-active' $unnnic-color-bg-active,
-  'bg-info' $unnnic-color-bg-info,
-  'bg-success' $unnnic-color-bg-success,
-  'bg-warning' $unnnic-color-bg-warning,
-  'bg-critical' $unnnic-color-bg-critical,
-
-  'fg-base' $unnnic-color-fg-base,
-  'fg-muted' $unnnic-color-fg-muted,
-  'fg-emphasized' $unnnic-color-fg-emphasized,
-  'fg-inverted' $unnnic-color-fg-inverted,
-  'fg-active' $unnnic-color-fg-active,
-  'fg-info' $unnnic-color-fg-info,
-  'fg-success' $unnnic-color-fg-success,
-  'fg-warning' $unnnic-color-fg-warning,
-  'fg-critical' $unnnic-color-fg-critical,
-
-  'border-base' $unnnic-color-border-base,
-  'border-soft' $unnnic-color-border-soft,
-  'border-muted' $unnnic-color-border-muted,
-  'border-emphasized' $unnnic-color-border-emphasized,
-  'border-active' $unnnic-color-border-active,
-  'border-info' $unnnic-color-border-info,
-  'border-success' $unnnic-color-border-success,
-  'border-warning' $unnnic-color-border-warning,
-  'border-critical' $unnnic-color-border-critical,
-
-  // Deprecated
-  'background-solo' $unnnic-color-teal-50,
-  'background-sky' $unnnic-color-gray-50,
-  'background-grass' $unnnic-color-green-50,
-  'background-carpet' $unnnic-color-gray-50,
-  'background-snow' $unnnic-color-white,
-  'background-lightest' $unnnic-color-gray-50,
-  'background-white' $unnnic-color-white,
-  
-  'neutral-black' $unnnic-color-gray-900,
-  'neutral-darkest' $unnnic-color-gray-800,
-  'neutral-dark' $unnnic-color-gray-700,
-  'neutral-cloudy' $unnnic-color-gray-500,
-  'neutral-cleanest' $unnnic-color-gray-200,
-  'neutral-clean' $unnnic-color-gray-300,
-  'neutral-soft' $unnnic-color-gray-100,
-  'neutral-lightest' $unnnic-color-gray-50,
-  'neutral-light' $unnnic-color-gray-50,
-  'neutral-white' $unnnic-color-white,
-  'neutral-snow' $unnnic-color-white,
-  
-  'feedback-red' $unnnic-color-red-500,
-  'feedback-green' $unnnic-color-green-500,
-  'feedback-yellow' $unnnic-color-yellow-500,
-  'feedback-blue' $unnnic-color-blue-500,
-  'feedback-grey' $unnnic-color-gray-500,
-  
-  'aux-blue' $unnnic-color-blue-500,
-  'aux-purple' $unnnic-color-purple-500,
-  'aux-orange' $unnnic-color-orange-500,
-  'aux-lemon' $unnnic-color-yellow-400,
-  'aux-pink' $unnnic-color-red-300,
-  'aux-baby-blue' $unnnic-color-blue-200,
-  'aux-baby-yellow' $unnnic-color-yellow-200,
-  'aux-baby-red' $unnnic-color-red-200,
-  'aux-baby-green' $unnnic-color-green-200,
-  'aux-baby-pink' $unnnic-color-red-100,
-  
-  'aux-green-100' $unnnic-color-green-100,
-  'aux-green-300' $unnnic-color-green-300,
-  'aux-green-500' $unnnic-color-green-500,
-  'aux-green-700' $unnnic-color-green-700,
-  'aux-green-900' $unnnic-color-green-900,
-  'aux-blue-100' $unnnic-color-blue-100,
-  'aux-blue-300' $unnnic-color-blue-300,
-  'aux-blue-500' $unnnic-color-blue-500,
-  'aux-blue-700' $unnnic-color-blue-700,
-  'aux-blue-900' $unnnic-color-blue-900,
-  'aux-purple-100' $unnnic-color-purple-100,
-  'aux-purple-300' $unnnic-color-purple-300,
-  'aux-purple-500' $unnnic-color-purple-500,
-  'aux-purple-700' $unnnic-color-purple-700,
-  'aux-purple-900' $unnnic-color-purple-900,
-  'aux-red-100' $unnnic-color-red-100,
-  'aux-red-300' $unnnic-color-red-300,
-  'aux-red-500' $unnnic-color-red-500,
-  'aux-red-700' $unnnic-color-red-700,
-  'aux-red-900' $unnnic-color-red-900,
-  'aux-orange-100' $unnnic-color-orange-100,
-  'aux-orange-300' $unnnic-color-orange-300,
-  'aux-orange-500' $unnnic-color-orange-500,
-  'aux-orange-700' $unnnic-color-orange-700,
-  'aux-orange-900' $unnnic-color-orange-900,
-  'aux-yellow-100' $unnnic-color-yellow-100,
-  'aux-yellow-300' $unnnic-color-yellow-300,
-  'aux-yellow-500' $unnnic-color-yellow-500,
-  'aux-yellow-700' $unnnic-color-yellow-700,
-  'aux-yellow-900' $unnnic-color-yellow-900,
-  
-  'floweditor-blue' $unnnic-color-blue-600,
-  'floweditor-purple' $unnnic-color-purple-600,
-  'floweditor-wine' $unnnic-color-red-800,
-  'floweditor-orange' $unnnic-color-orange-600,
-  'floweditor-pink' $unnnic-color-red-400,
-  'floweditor-turquoise' $unnnic-color-teal-500,
-  'floweditor-green' $unnnic-color-green-600,
-  
-  'weni-50' $unnnic-color-teal-50,
-  'weni-100' $unnnic-color-teal-100,
-  'weni-200' $unnnic-color-teal-200,
-  'weni-300' $unnnic-color-teal-300,
-  'weni-400' $unnnic-color-teal-400,
-  'weni-500' $unnnic-color-teal-500,
-  'weni-600' $unnnic-color-teal-600,
-  'weni-700' $unnnic-color-teal-700,
-  'weni-800' $unnnic-color-teal-800,
-  'weni-900' $unnnic-color-teal-900,
-  'weni-950' $unnnic-color-teal-950,
-  'brand-weni' $unnnic-color-teal-600,
-  'brand-weni-dark' $unnnic-color-teal-800,
-  'brand-weni-soft' $unnnic-color-teal-100,
-  'brand-sec-dark' $unnnic-color-blue-800,
-  'brand-sec-soft' $unnnic-color-blue-100,
-  'brand-sec' $unnnic-color-blue-600,
-
-  'teal-50' $unnnic-color-teal-50,
-  'teal-100' $unnnic-color-teal-100,
-  'teal-200' $unnnic-color-teal-200,
-  'teal-300' $unnnic-color-teal-300,
-  'teal-400' $unnnic-color-teal-400,
-  'teal-500' $unnnic-color-teal-500,
-  'teal-600' $unnnic-color-teal-600,
-  'teal-700' $unnnic-color-teal-700,
-  'teal-800' $unnnic-color-teal-800,
-  'teal-900' $unnnic-color-teal-900,
-  'teal-950' $unnnic-color-teal-950;
+$unnnic-scheme-colors: 'background-solo'$unnnic-color-teal-50,
+  'background-sky'$unnnic-color-gray-50,
+  'background-grass'$unnnic-color-green-50,
+  'background-carpet'$unnnic-color-gray-50,
+  'background-snow'$unnnic-color-white,
+  'background-lightest'$unnnic-color-gray-50,
+  'background-white'$unnnic-color-white,
+
+  'neutral-black'$unnnic-color-gray-900,
+  'neutral-darkest'$unnnic-color-gray-800,
+  'neutral-dark'$unnnic-color-gray-700,
+  'neutral-cloudy'$unnnic-color-gray-500,
+  'neutral-cleanest'$unnnic-color-gray-200,
+  'neutral-clean'$unnnic-color-gray-300,
+  'neutral-soft'$unnnic-color-gray-100,
+  'neutral-lightest'$unnnic-color-gray-50,
+  'neutral-light'$unnnic-color-gray-50,
+  'neutral-white'$unnnic-color-white,
+  'neutral-snow'$unnnic-color-white,
+
+  'feedback-red'$unnnic-color-red-500,
+  'feedback-green'$unnnic-color-green-500,
+  'feedback-yellow'$unnnic-color-yellow-500,
+  'feedback-blue'$unnnic-color-blue-500,
+  'feedback-grey'$unnnic-color-gray-500,
+
+  'aux-blue'$unnnic-color-blue-500,
+  'aux-purple'$unnnic-color-purple-500,
+  'aux-orange'$unnnic-color-orange-500,
+  'aux-lemon'$unnnic-color-yellow-400,
+  'aux-pink'$unnnic-color-red-300,
+  'aux-baby-blue'$unnnic-color-blue-200,
+  'aux-baby-yellow'$unnnic-color-yellow-200,
+  'aux-baby-red'$unnnic-color-red-200,
+  'aux-baby-green'$unnnic-color-green-200,
+  'aux-baby-pink'$unnnic-color-red-100,
+
+  'aux-green-100'$unnnic-color-green-100,
+  'aux-green-300'$unnnic-color-green-300,
+  'aux-green-500'$unnnic-color-green-500,
+  'aux-green-700'$unnnic-color-green-700,
+  'aux-green-900'$unnnic-color-green-900,
+  'aux-blue-100'$unnnic-color-blue-100,
+  'aux-blue-300'$unnnic-color-blue-300,
+  'aux-blue-500'$unnnic-color-blue-500,
+  'aux-blue-700'$unnnic-color-blue-700,
+  'aux-blue-900'$unnnic-color-blue-900,
+  'aux-purple-100'$unnnic-color-purple-100,
+  'aux-purple-300'$unnnic-color-purple-300,
+  'aux-purple-500'$unnnic-color-purple-500,
+  'aux-purple-700'$unnnic-color-purple-700,
+  'aux-purple-900'$unnnic-color-purple-900,
+  'aux-red-100'$unnnic-color-red-100,
+  'aux-red-300'$unnnic-color-red-300,
+  'aux-red-500'$unnnic-color-red-500,
+  'aux-red-700'$unnnic-color-red-700,
+  'aux-red-900'$unnnic-color-red-900,
+  'aux-orange-100'$unnnic-color-orange-100,
+  'aux-orange-300'$unnnic-color-orange-300,
+  'aux-orange-500'$unnnic-color-orange-500,
+  'aux-orange-700'$unnnic-color-orange-700,
+  'aux-orange-900'$unnnic-color-orange-900,
+  'aux-yellow-100'$unnnic-color-yellow-100,
+  'aux-yellow-300'$unnnic-color-yellow-300,
+  'aux-yellow-500'$unnnic-color-yellow-500,
+  'aux-yellow-700'$unnnic-color-yellow-700,
+  'aux-yellow-900'$unnnic-color-yellow-900,
+
+  "fg-critical"$unnnic-color-fg-critical,
+  "fg-muted"$unnnic-color-fg-muted,
+  "fg-base"$unnnic-color-fg-base,
+
+  'floweditor-blue'$unnnic-color-blue-600,
+  'floweditor-purple'$unnnic-color-purple-600,
+  'floweditor-wine'$unnnic-color-red-800,
+  'floweditor-orange'$unnnic-color-orange-600,
+  'floweditor-pink'$unnnic-color-red-400,
+  'floweditor-turquoise'$unnnic-color-teal-500,
+  'floweditor-green'$unnnic-color-green-600,
+
+  'weni-50'$unnnic-color-teal-50,
+  'weni-100'$unnnic-color-teal-100,
+  'weni-200'$unnnic-color-teal-200,
+  'weni-300'$unnnic-color-teal-300,
+  'weni-400'$unnnic-color-teal-400,
+  'weni-500'$unnnic-color-teal-500,
+  'weni-600'$unnnic-color-teal-600,
+  'weni-700'$unnnic-color-teal-700,
+  'weni-800'$unnnic-color-teal-800,
+  'weni-900'$unnnic-color-teal-900,
+  'weni-950'$unnnic-color-teal-950,
+  'brand-weni'$unnnic-color-teal-600,
+  'brand-weni-dark'$unnnic-color-teal-800,
+  'brand-weni-soft'$unnnic-color-teal-100,
+  'brand-sec-dark'$unnnic-color-blue-800,
+  'brand-sec-soft'$unnnic-color-blue-100,
+  'brand-sec'$unnnic-color-blue-600,
+
+  'bg-base'$unnnic-color-bg-base,
+  'bg-soft'$unnnic-color-bg-soft,
+
+  'teal-50'$unnnic-color-teal-50,
+  'teal-100'$unnnic-color-teal-100,
+  'teal-200'$unnnic-color-teal-200,
+  'teal-300'$unnnic-color-teal-300,
+  'teal-400'$unnnic-color-teal-400,
+  'teal-500'$unnnic-color-teal-500,
+  'teal-600'$unnnic-color-teal-600,
+  'teal-700'$unnnic-color-teal-700,
+  'teal-800'$unnnic-color-teal-800,
+  'teal-900'$unnnic-color-teal-900,
+  'teal-950'$unnnic-color-teal-950;
 
 @mixin generate-scheme-classes($component-name, $property: 'background-color') {
   @each $name, $color in $unnnic-scheme-colors {
@@ -250,10 +126,11 @@ $unnnic-scheme-colors:
 
 @function get-scheme-color($name) {
   @each $scheme-name, $color in $unnnic-scheme-colors {
-    @if $scheme-name == $name {
+    @if $scheme-name ==$name {
       @return $color;
     }
   }
+
   @warn "Scheme color '#{$name}' not found in $unnnic-scheme-colors";
   @return null;
-}
+}

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" icon="alert-icon" position="top-right" closetext="Close">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--informational" role="status" aria-live="polite" data-testid="unnnic-toast">
+    <section data-v-c3231c18="" class="unnnic-toast__content">
+      <header data-v-c3231c18="" class="unnnic-toast__header"><span data-v-26446d8e="" data-v-c3231c18="" class="material-symbols-rounded unnnic-icon-scheme--blue-500 unnnic-icon-size--ant" data-testid="toast-type-icon" translate="no">info</span>
+        <h3 data-v-c3231c18="" class="unnnic-toast__title">Test Alert</h3><span data-v-26446d8e="" data-v-c3231c18="" class="material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic--clickable unnnic-toast__close" data-testid="toast-close-button" translate="no">close</span>
+      </header>
+      <!--v-if-->
+    </section>
+    <!--v-if-->
+  </aside>
+</transition-stub>"
 `;

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

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert.vue > matches snapshot 1`] = `
-"<div data-v-fb94f284="" class="alert-container">
+"<div data-v-fb94f284="" class="alert-container" version="1.0" linkhref="https://example.com" linktarget="_blank" linktext="Learn more">
   <div data-v-fb94f284="" class="alert alert--scheme-aux-green">
     <div data-v-fb94f284="" class="alert__progress"></div>
-    <div data-v-fb94f284="" class="alert__text">Test Alert</div><a data-v-fb94f284="" class="alert__link" href="https://example.com" target="_blank">Learn more</a>
+    <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>
     </div>

package/src/components/Chip/Chip.vue

@@ -71,7 +71,7 @@ const chipClass = computed(() => {
 
 .chip {
   display: inline-flex;
-  height: 26px;
+  height: 22px;
   padding: $unnnic-space-1 $unnnic-space-3;
   justify-content: center;
   align-items: center;
@@ -79,6 +79,7 @@ const chipClass = computed(() => {
   flex-shrink: 0;
   border-radius: 600px;
   background-color: $unnnic-color-bg-base;
+  border: 1px solid transparent;
 
   &:hover {
     background-color: $unnnic-color-bg-soft;
@@ -96,7 +97,7 @@ const chipClass = computed(() => {
   }
 
   &--border {
-    border: 1px solid $unnnic-color-border-base;
+    border-color: $unnnic-color-border-base;
   }
 
   &__text {

package/src/components/DataTable/index.vue

@@ -16,7 +16,7 @@
             {
               'unnnic-data-table__header-cell--clickable': header.isSortable,
               'unnnic-data-table__header-cell--sorting':
-                sort.header === header.title && sort.order !== '',
+                sortState.header === header.title && sortState.order !== '',
             },
           ]"
           @click.stop="handleClickHeader(header)"
@@ -31,12 +31,12 @@
           </template>
           <template v-if="header.isSortable">
             <IconArrowsDefault
-              v-if="sort.header !== header.title"
+              v-if="sortState.header !== header.title"
               class="order-default-icon"
               data-testid="arrow-default-icon"
             />
             <Icon
-              v-else-if="sort.order === 'asc'"
+              v-else-if="sortState.order === 'asc'"
               clickable
               size="ant"
               :icon="'switch_left'"
@@ -44,7 +44,7 @@
               data-testid="arrow-asc-icon"
             />
             <Icon
-              v-else-if="sort.order === 'desc'"
+              v-else-if="sortState.order === 'desc'"
               clickable
               size="ant"
               :icon="'switch_left'"
@@ -183,6 +183,12 @@ type DataTableItem = {
   [key: string]: any;
 };
 
+type SortState = {
+  header: string;
+  itemKey: string;
+  order: string;
+};
+
 interface Props {
   headers: DataTableHeader[];
   items: DataTableItem[];
@@ -198,6 +204,7 @@ interface Props {
   pageTotal?: number;
   pageInterval?: number;
   locale?: string;
+  sort?: SortState;
 }
 
 defineOptions({
@@ -225,6 +232,7 @@ const props = withDefaults(defineProps<Props>(), {
   pageTotal: 0,
   pageInterval: 5,
   locale: 'en',
+  sort: undefined,
 });
 
 const defaultTranslations = {
@@ -251,12 +259,16 @@ const headersItemsKeys: ComputedRef<string[]> = computed(() => {
   return props.headers.map((header) => header.itemKey);
 });
 
-const sort = ref({
+const internalSort = ref({
   header: '',
   itemKey: '',
   order: '',
 });
 
+const sortState = computed(() => {
+  return props.sort !== undefined ? props.sort : internalSort.value;
+});
+
 const getHeaderColumnSize = (header: DataTableHeader): string => {
   return typeof header.size === 'number'
     ? `${header.size || 1}fr`
@@ -271,9 +283,12 @@ const gridTemplateColumns: ComputedRef<string> = computed(() => {
   return columnSizes.join(' ');
 });
 
-const handleSort = (header: typeof sort.value, order: string) => {
-  sort.value = { ...header, order };
-  emit('update:sort', sort.value);
+const handleSort = (header: SortState, order: string) => {
+  if (props.sort === undefined) {
+    internalSort.value = { ...header, order };
+  }
+
+  emit('update:sort', { ...header, order });
 };
 
 const handleClickHeader = (header: DataTableHeader) => {
@@ -286,9 +301,9 @@ const handleClickHeader = (header: DataTableHeader) => {
   };
 
   const nextSort =
-    header.title !== sort.value.header
+    header.title !== sortState.value.header
       ? 'asc'
-      : nextSortOrderMapper[sort.value.order];
+      : nextSortOrderMapper[sortState.value.order];
 
   handleSort(
     nextSort === ''

package/src/components/Input/BaseInput.vue

@@ -4,16 +4,18 @@
     v-mask="mask"
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="classes"
+    :class="[classes, { focus: forceActiveStatus }]"
     :type="nativeType"
+    :readonly="readonly"
   />
   <input
     v-else
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="classes"
+    :class="[classes, { focus: forceActiveStatus }]"
     :type="nativeType"
     :maxlength="maxlength"
+    :readonly="readonly"
   />
 </template>
 
@@ -49,10 +51,19 @@ export default {
     },
     hasIconLeft: Boolean,
     hasIconRight: Boolean,
+    hasClearIcon: Boolean,
     maxlength: {
       type: Number,
       default: null,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    forceActiveStatus: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue'],
   data() {
@@ -77,6 +88,7 @@ export default {
         {
           'input--has-icon-left': this.hasIconLeft,
           'input--has-icon-right': this.hasIconRight,
+          'input--has-clear-icon': this.hasClearIcon,
         },
       ];
     },
@@ -115,6 +127,13 @@ export default {
 
   &.input--has-icon-right {
     padding-right: $unnnic-space-10;
+    &.input--has-clear-icon {
+      padding-right: $unnnic-space-10 + $unnnic-space-6;
+    }
+  }
+
+  &.input--has-clear-icon {
+    padding-right: $unnnic-space-10;
   }
 
   &.error {

package/src/components/Input/Input.scss

@@ -9,7 +9,8 @@
   caret-color: $unnnic-color-fg-muted;
   font: $unnnic-font-body;
 
-  &:focus {
+  &:focus,
+  &.focus {
     border-color: $unnnic-color-border-active;
   }