@weni/unnnic-system 3.12.3-alpha.4 → 3.12.3-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.12.3-alpha.4",
+  "version": "3.12.3-alpha.6",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/FormElement/FormElement.vue

@@ -18,8 +18,8 @@
     <slot></slot>
 
     <section
-      class="unnnic-form-element__hints-container"
       v-if="message || error || !!$slots.rightMessage"
+      class="unnnic-form-element__hints-container"
     >
       <section class="unnnic-form-element__message-container">
         <p

package/src/components/Input/BaseInput.vue

@@ -4,7 +4,7 @@
     v-mask="mask"
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="[classes, { focus: forceActiveStatus }]"
+    :class="[classes, { focus, 'use-focus-prop': useFocusProp }]"
     :type="nativeType"
     :readonly="readonly"
   />
@@ -12,7 +12,7 @@
     v-else
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="[classes, { focus: forceActiveStatus }]"
+    :class="[classes, { focus, 'use-focus-prop': useFocusProp }]"
     :type="nativeType"
     :maxlength="maxlength"
     :readonly="readonly"
@@ -60,15 +60,16 @@ export default {
       type: Boolean,
       default: false,
     },
-    forceActiveStatus: {
+    useFocusProp: {
+      type: Boolean,
+      default: false,
+    },
+    focus: {
       type: Boolean,
       default: false,
     },
   },
   emits: ['update:modelValue'],
-  data() {
-    return {};
-  },
   computed: {
     attributes() {
       return {

package/src/components/Input/Input.scss

@@ -9,7 +9,7 @@
   caret-color: $unnnic-color-fg-muted;
   font: $unnnic-font-body;
 
-  &:focus,
+  &:focus:not(.use-focus-prop),
   &.focus {
     border-color: $unnnic-color-border-active;
   }

package/src/components/Input/Input.vue

@@ -13,7 +13,8 @@
       v-bind="$attrs"
       v-model="val"
       class="unnnic-form-input"
-      :forceActiveStatus="forceActiveStatus"
+      :useFocusProp="useFocusProp"
+      :focus="focus"
       :placeholder="placeholder"
       :iconLeft="iconLeft"
       :iconRight="iconRight"
@@ -135,7 +136,11 @@ export default {
       type: Boolean,
       default: false,
     },
-    forceActiveStatus: {
+    useFocusProp: {
+      type: Boolean,
+      default: false,
+    },
+    focus: {
       type: Boolean,
       default: false,
     },

package/src/components/Input/TextInput.vue

@@ -15,9 +15,8 @@
       :hasClearIcon="showClear"
       :maxlength="maxlength"
       :readonly="readonly"
-      :forceActiveStatus="forceActiveStatus"
-      @focus="onFocus"
-      @blur="onBlur"
+      :useFocusProp="useFocusProp"
+      :focus="focus"
     />
 
     <UnnnicIcon
@@ -120,7 +119,11 @@ export default {
       type: Boolean,
       default: false,
     },
-    forceActiveStatus: {
+    useFocusProp: {
+      type: Boolean,
+      default: false,
+    },
+    focus: {
       type: Boolean,
       default: false,
     },
@@ -162,7 +165,7 @@ export default {
   },
 
   methods: {
-    focus() {
+    focusInput() {
       this.$refs['base-input'].$el.focus();
     },
 

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

@@ -129,7 +129,7 @@ describe('TextInput.vue', () => {
 
   test('focus method calls focus on base input element', () => {
     const focusSpy = vi.spyOn(wrapper.vm.$refs['base-input'].$el, 'focus');
-    wrapper.vm.focus();
+    wrapper.vm.focusInput();
 
     expect(focusSpy).toHaveBeenCalled();
     focusSpy.mockRestore();

package/src/components/ModalDialog/ModalDialog.vue

@@ -102,8 +102,8 @@ export default {
     UnnnicDialogTitle,
     UnnnicDialogFooter,
   },
-  inheritAttrs: false,
   mixins: [UnnnicI18n],
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Boolean,

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

@@ -282,19 +282,20 @@ describe('UnnnicMultiSelect.vue', () => {
 
   describe('computed properties', () => {
     test('calculatedMaxHeight returns correct value', () => {
-      const maxHeight = wrapper.vm.calculatedMaxHeight;
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
+      console.log(maxHeight);
       expect(maxHeight).toBe('228px');
     });
 
     test('calculatedMaxHeight includes search height when enabled', async () => {
       await wrapper.setProps({ enableSearch: true });
-      const maxHeight = wrapper.vm.calculatedMaxHeight;
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
       expect(maxHeight).toBe('295px');
     });
 
     test('calculatedMaxHeight returns unset when no options', async () => {
       await wrapper.setProps({ options: [] });
-      const maxHeight = wrapper.vm.calculatedMaxHeight;
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
       expect(maxHeight).toBe('unset');
     });
 
@@ -458,7 +459,7 @@ describe('UnnnicMultiSelect.vue', () => {
     test('handles empty options array', async () => {
       await wrapper.setProps({ options: [] });
       expect(wrapper.vm.filteredOptions).toEqual([]);
-      expect(wrapper.vm.calculatedMaxHeight).toBe('unset');
+      expect(wrapper.vm.calculatedPopoverHeight).toBe('unset');
     });
 
     test('handles empty modelValue array', async () => {

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

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with default props 1`] = `
-"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
       <!--v-if-->
-      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
         <!--v-if-->
         <section data-v-a0d36167="" class="icon-right-container">
           <!--v-if--><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 icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -19,10 +19,10 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with defaul
 `;
 
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with disabled state 1`] = `
-"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form-element--disabled unnnic-form md unnnic-multi-select__input" data-testid="form-element">
       <!--v-if-->
-      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
         <!--v-if-->
         <section data-v-a0d36167="" class="icon-right-container">
           <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-muted unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -37,10 +37,10 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with disabl
 `;
 
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with multiple selected values 1`] = `
-"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
       <!--v-if-->
-      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1, Option 2">
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1, Option 2">
         <!--v-if-->
         <section data-v-a0d36167="" class="icon-right-container"><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-clear" data-testid="material-icon" translate="no">close</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 icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
       </div>
@@ -53,10 +53,10 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with multip
 `;
 
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with search enabled 1`] = `
-"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
       <!--v-if-->
-      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
         <!--v-if-->
         <section data-v-a0d36167="" class="icon-right-container">
           <!--v-if--><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 icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -71,10 +71,10 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with search
 `;
 
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with selected values 1`] = `
-"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
       <!--v-if-->
-      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1">
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1">
         <!--v-if-->
         <section data-v-a0d36167="" class="icon-right-container"><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-clear" data-testid="material-icon" translate="no">close</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 icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
       </div>

package/src/components/MultiSelect/index.vue

@@ -4,12 +4,14 @@
       :open="openPopover"
       @update:open="openPopover = $event"
     >
-      <PopoverTrigger>
+      <PopoverTrigger class="w-full">
         <UnnnicInput
+          ref="multiSelectInputRef"
           :modelValue="inputValue"
           class="unnnic-multi-select__input"
           readonly
-          :forceActiveStatus="openPopover"
+          useFocusProp
+          :focus="openPopover"
           :size="props.size"
           :placeholder="props.placeholder"
           :label="props.label"
@@ -23,7 +25,9 @@
       </PopoverTrigger>
       <PopoverContent
         align="start"
-        :style="{ maxHeight: calculatedMaxHeight, overflow: 'auto' }"
+        class="h-full"
+        :style="popoverContentCustomStyles"
+        :width="inputWidthString"
       >
         <div class="unnnic-multi-select__content">
           <UnnnicInput
@@ -34,6 +38,12 @@
             iconLeft="search"
             @update:model-value="handleSearch"
           />
+          <p
+            v-if="filteredOptions.length === 0"
+            class="unnnic-multi-select__content-no-results"
+          >
+            {{ $t('without_results') }}
+          </p>
           <div class="unnnic-multi-select__options">
             <UnnnicMultiSelectOption
               v-for="(option, index) in filteredOptions"
@@ -58,6 +68,7 @@ import { computed, ref } from 'vue';
 import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover';
 import UnnnicInput from '../Input/Input.vue';
 import UnnnicMultiSelectOption from './MultSelectOption.vue';
+import { useElementSize } from '@vueuse/core';
 
 defineOptions({
   name: 'UnnnicMultiSelect',
@@ -102,8 +113,26 @@ const props = withDefaults(defineProps<MultiSelectProps>(), {
 });
 
 const openPopover = ref(false);
+const multiSelectInputRef = ref<HTMLInputElement | null>(null);
+const { width: inputWidth } = useElementSize(multiSelectInputRef);
 
-const calculatedMaxHeight = computed(() => {
+const inputWidthString = computed(() => {
+  return `${inputWidth.value}px`;
+});
+
+const popoverContentCustomStyles = computed(() => {
+  const emptyFilteredOptions = filteredOptions.value?.length === 0;
+  return {
+    overflow: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: calculatedPopoverHeight.value,
+    maxHeight: emptyFilteredOptions ? 'unset' : calculatedPopoverHeight.value,
+    height: emptyFilteredOptions ? calculatedPopoverHeight.value : 'unset',
+  };
+});
+
+const calculatedPopoverHeight = computed(() => {
   if (!props.options || props.options.length === 0) return 'unset';
   const popoverSearchGap = props.enableSearch ? 16 : 0;
   const popoverGap = 24;
@@ -211,6 +240,18 @@ const handleSelectOption = (
     padding: 0;
     margin: 0;
     gap: $unnnic-space-4;
+
+    height: -webkit-fill-available;
+
+    &-no-results {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font: $unnnic-font-emphasis;
+      color: $unnnic-color-fg-muted;
+    }
   }
 
   &__options {

package/src/components/Radio/Radio.vue

@@ -12,9 +12,9 @@
         type="radio"
         :disabled="disabled"
         :checked="computedModelValue === value"
-        @change="click"
         :name="computedName"
         v-bind="pick($attrs, ['id'])"
+        @change="click"
       />
 
       <p

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

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with default props 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
-      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
         <!--v-if-->
         <section data-v-a0d36167="" class="icon-right-container">
           <!--v-if--><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 icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -19,10 +19,10 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with default pro
 `;
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with disabled state 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form-element--disabled unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
-      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
         <!--v-if-->
         <section data-v-a0d36167="" class="icon-right-container">
           <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-muted unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -37,10 +37,10 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with disabled st
 `;
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with search enabled 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
-      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
         <!--v-if-->
         <section data-v-a0d36167="" class="icon-right-container">
           <!--v-if--><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 icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -55,10 +55,10 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with search enab
 `;
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with selected value 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
-      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1">
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1">
         <!--v-if-->
         <section data-v-a0d36167="" class="icon-right-container"><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-clear" data-testid="material-icon" translate="no">close</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 icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
       </div>

package/src/components/Select/index.vue

@@ -7,12 +7,14 @@
       :open="openPopover"
       @update:open="openPopover = $event"
     >
-      <PopoverTrigger>
+      <PopoverTrigger class="w-full">
         <UnnnicInput
+          ref="selectInputRef"
           :modelValue="inputValue"
           class="unnnic-select__input"
           readonly
-          :forceActiveStatus="openPopover"
+          useFocusProp
+          :focus="openPopover"
           :size="props.size"
           :placeholder="props.placeholder"
           :label="props.label"
@@ -28,6 +30,7 @@
         align="start"
         :class="'h-full'"
         :style="popoverContentCustomStyles"
+        :width="inputWidthString"
       >
         <div class="unnnic-select__content">
           <UnnnicInput
@@ -66,6 +69,8 @@
 
 <script setup lang="ts">
 import { computed, ref, watch, nextTick } from 'vue';
+import { useElementSize } from '@vueuse/core';
+
 import UnnnicInput from '../Input/Input.vue';
 
 import {
@@ -127,6 +132,12 @@ const emit = defineEmits<{
 }>();
 
 const openPopover = ref(false);
+const selectInputRef = ref<HTMLInputElement | null>(null);
+const { width: inputWidth } = useElementSize(selectInputRef);
+
+const inputWidthString = computed(() => {
+  return `${inputWidth.value}px`;
+});
 
 watch(openPopover, () => {
   if (!openPopover.value) {

package/src/components/Switch/Switch.vue

@@ -19,8 +19,8 @@
         type="checkbox"
         :disabled="disabled"
         :checked="modelValue"
-        @change="toggleState"
         v-bind="pick($attrs, ['id', 'name'])"
+        @change="toggleState"
       />
 
       <p

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -13,11 +13,11 @@
         }`"
       >
         <img
-          class="unnnic-template-preview__header__media__preview"
           v-if="
             template?.header.type === 'MEDIA' &&
             template?.header.mediaType === 'IMAGE'
           "
+          class="unnnic-template-preview__header__media__preview"
           :src="template.header.src || imagePreview"
         />
         <template
@@ -50,8 +50,8 @@
           />
         </template>
         <h1
-          class="unnnic-template-preview__header__text__preview"
           v-else-if="template?.header.type === 'TEXT'"
+          class="unnnic-template-preview__header__text__preview"
         >
           {{ template.header.text }}
         </h1>

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -1,10 +1,10 @@
 <template>
   <UnnnicModalDialog
     :modelValue="modelValue"
-    @update:modelValue="$event === false && $emit('close')"
     :title="defaultTranslations.title[props.locale]"
     :showCloseIcon="true"
     class="unnnic-template-preview-modal"
+    @update:model-value="$event === false && $emit('close')"
   >
     <UnnnicTemplatePreview :template="template" />
   </UnnnicModalDialog>

package/src/components/ToolTip/ToolTip.vue

@@ -17,8 +17,8 @@
       <template v-if="enableHtml">
         <!-- eslint-disable-next-line vue/no-v-html -->
         <section
-          v-html="text"
           data-testid="tooltip-html-content"
+          v-html="text"
         ></section>
       </template>
       <template

package/src/components/ui/popover/PopoverContent.vue

@@ -2,14 +2,13 @@
   <PopoverPortal>
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
+      :style="{ width: contentWidth, zIndex: popoverZIndex }"
       :class="
         cn(
           'unnnic-popover',
-          `unnnic-popover--size-${props.size}`,
           'bg-popover text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         )
       "
-      :style="{ zIndex: popoverZIndex }"
     >
       <section :class="`unnnic-popover__content ${props.class || ''}`">
         <component
@@ -45,7 +44,8 @@ const props = withDefaults(
   defineProps<
     PopoverContentProps & {
       class?: HTMLAttributes['class'];
-      size?: 'small' | 'medium' | 'large';
+      size?: string;
+      width?: string;
     }
   >(),
   {
@@ -53,6 +53,7 @@ const props = withDefaults(
     sideOffset: 4,
     size: 'medium',
     class: '',
+    width: '',
   },
 );
 const emits = defineEmits<PopoverContentEmits>();
@@ -83,6 +84,18 @@ const footerChildren = computed(() => {
     (vnode: VNode) => getComponentName(vnode) === 'UnnnicPopoverFooter',
   );
 });
+
+const contentWidth = computed(() => {
+  if (props.width) return props.width;
+
+  const sizes = {
+    small: '240px',
+    medium: '320px',
+    large: '400px',
+  };
+
+  return sizes[props.size as keyof typeof sizes];
+});
 </script>
 
 <style lang="scss">
@@ -109,16 +122,6 @@ $popover-space: $unnnic-space-4;
     border-radius: $unnnic-border-radius-pill;
   }
 
-  &--size-small {
-    width: 240px;
-  }
-  &--size-medium {
-    width: 320px;
-  }
-  &--size-large {
-    width: 400px;
-  }
-
   &__content {
     padding: $popover-space;
   }

package/src/components/ui/popover/PopoverOption.vue

@@ -76,7 +76,7 @@ const schemeColor = computed(() => {
 .unnnic-popover-option {
   cursor: pointer;
   border-radius: $unnnic-radius-2;
-  padding: $unnnic-space-2;
+  padding: $unnnic-space-2 $unnnic-space-4;
   font: $unnnic-font-emphasis;
   display: flex;
   gap: $unnnic-space-2;

package/src/stories/Input.mdx

@@ -42,6 +42,9 @@ The `Input` component is designed to provide an input field for users to enter t
 | placeholder | `String` of the native input placeholder | `String`                 | `''`        |
 | iconLeft    | `String` of the left icon                | `String`                 | `undefined` |
 | iconRight   | `String` of the right icon               | `String`                 | `false`     |
+| useFocusProp | `Boolean` to enable use focus by prop (ignore native css) | `true` \| `false` | `false` |
+| focus | `Boolean` to enable focus component status | `true` \| `false` | `false` |
+
 
 ## Example
 Some examples of uses of the `UnnnicInput`