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

package/package.json

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

package/src/components/Disclaimer/Disclaimer.vue

@@ -1,71 +1,165 @@
 <template>
-  <section class="unnnic-disclaimer">
+  <section
+    :class="['unnnic-disclaimer', `unnnic-disclaimer--${type}`]"
+    data-testid="disclaimer"
+  >
     <UnnnicIcon
       class="unnnic-disclaimer__icon"
-      size="avatar-nano"
-      :icon="icon"
-      :scheme="iconColor"
+      size="ant"
+      :icon="variant.icon"
+      :scheme="variant.scheme"
       data-testid="disclaimer-icon"
     />
-    <p
-      class="unnnic-disclaimer__text"
-      data-testid="disclaimer-text"
-      v-html="text"
-    />
+
+    <section class="unnnic-disclaimer__content">
+      <p
+        v-if="title"
+        class="unnnic-disclaimer__title"
+        data-testid="disclaimer-title"
+      >
+        {{ title }}
+      </p>
+      <p
+        v-if="description"
+        class="unnnic-disclaimer__description"
+        data-testid="disclaimer-description"
+      >
+        {{ description }}
+      </p>
+    </section>
   </section>
 </template>
 
 <script setup lang="ts">
-import icons from '../../utils/iconList';
-import colors from '../../utils/colorsList';
+import { computed } from 'vue';
+
 import UnnnicIcon from '../Icon.vue';
-import type { DisclaimerProps } from './types';
+import type { SchemeColor } from '@/types/scheme-colors';
+import type { DisclaimerType, DisclaimerProps } from './types';
 
 defineOptions({
   name: 'UnnnicDisclaimer',
 });
 
-export type { DisclaimerProps };
-
 const props = withDefaults(defineProps<DisclaimerProps>(), {
-  icon: 'alert-circle-1-1',
-  iconColor: 'neutral-darkest',
+  title: 'Disclaimer',
+  description: 'The quick brown fox jumps over the lazy dog',
+  type: 'informational',
+  icon: undefined,
+  iconColor: undefined,
 });
 
-const validateIcon = (value: string): boolean => {
-  return icons.includes(value);
-};
+// This is a temporary solution to ensure backwards compatibility with the older version of the component.
+// TODO: It should be removed once the older version is discontinued.
+const variantCompatibleWithOlderVersion = computed((): DisclaimerType => {
+  if (props.icon) {
+    if (props.icon.includes('alert-circle')) return 'attention';
+    if (props.icon === 'info') return 'informational';
+    if (props.icon === 'error') return 'error';
+    return 'neutral';
+  }
 
-const validateIconColor = (value: string): boolean => {
-  return colors.includes(value);
-};
+  if (props.iconColor) {
+    if (props.iconColor.includes('yellow')) return 'attention';
+    if (props.iconColor.includes('red')) return 'error';
+    return 'neutral';
+  }
 
-if (!validateIcon(props.icon as string)) {
-  console.warn(`Invalid icon prop: ${props.icon}`);
-}
+  return props.type;
+});
 
-if (!validateIconColor(props.iconColor as string)) {
-  console.warn(`Invalid iconColor prop: ${props.iconColor}`);
-}
+const variant = computed(() => {
+  const variants: Record<
+    DisclaimerType,
+    { icon: string; scheme: SchemeColor }
+  > = {
+    informational: {
+      icon: 'info',
+      scheme: 'blue-500',
+    },
+    success: {
+      icon: 'check_circle',
+      scheme: 'green-500',
+    },
+    attention: {
+      icon: 'error',
+      scheme: 'yellow-500',
+    },
+    error: {
+      icon: 'cancel',
+      scheme: 'red-500',
+    },
+    neutral: {
+      icon: 'info',
+      scheme: 'gray-400',
+    },
+  };
+
+  return variants[variantCompatibleWithOlderVersion.value || props.type];
+});
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 @use '@/assets/scss/unnnic' as *;
+
 .unnnic-disclaimer {
-  display: inline-flex;
-  align-items: center;
-  gap: $unnnic-spacing-xs;
-  padding: $unnnic-spacing-sm;
-  border-radius: $unnnic-border-radius-sm;
-  border: 1px solid $unnnic-color-neutral-soft;
-  background: $unnnic-color-background-lightest;
-  .unnnic-disclaimer__text {
+  $border-width: 1px;
+
+  display: flex;
+  gap: $unnnic-space-2;
+
+  width: 100%;
+  min-height: 53px;
+  padding: calc($unnnic-space-4 - $border-width) $unnnic-space-4;
+  box-sizing: border-box;
+
+  border: $border-width solid $unnnic-color-border-base;
+  border-radius: $unnnic-radius-2;
+
+  background-color: $unnnic-color-bg-soft;
+
+  color: $unnnic-color-fg-emphasized;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: $unnnic-space-1;
+  }
+
+  &__title {
+    margin: 0;
+    font: $unnnic-font-action;
+  }
+
+  &__description {
     margin: 0;
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-line-height-large * 1.375;
-    font-weight: $unnnic-font-weight-regular;
-    color: $unnnic-color-neutral-dark;
+    font: $unnnic-font-caption-2;
+  }
+
+  &--informational {
+    background-color: $unnnic-color-bg-info;
+    border-color: $unnnic-color-border-info;
+  }
+
+  &--success {
+    background-color: $unnnic-color-bg-success;
+    border-color: $unnnic-color-border-success;
+  }
+
+  &--attention {
+    background-color: $unnnic-color-bg-warning;
+    border-color: $unnnic-color-border-warning;
+  }
+
+  &--error {
+    background-color: $unnnic-color-bg-critical;
+    border-color: $unnnic-color-border-critical;
+  }
+
+  &--neutral {
+    background-color: $unnnic-color-bg-soft;
+    border-color: $unnnic-color-border-base;
   }
 }
 </style>

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

@@ -1,72 +1,97 @@
 import { mount } from '@vue/test-utils';
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect } from 'vitest';
 
 import Disclaimer from '../Disclaimer.vue';
 import Icon from '../../Icon.vue';
 
+const mountComponent = (props = {}) =>
+  mount(Disclaimer, {
+    props,
+    global: {
+      components: { UnnnicIcon: Icon },
+    },
+  });
+
 describe('Disclaimer', () => {
-  let wrapper;
+  it('renders default title and description', () => {
+    const wrapper = mountComponent();
 
-  beforeEach(() => {
-    wrapper = mount(Disclaimer, {
-      props: { text: 'Test Disclaimer Text' },
-      global: { components: { UnnnicIcon: Icon } },
-    });
+    expect(wrapper.find('[data-testid="disclaimer-title"]').text()).toBe(
+      'Disclaimer',
+    );
+    expect(wrapper.find('[data-testid="disclaimer-description"]').text()).toBe(
+      'The quick brown fox jumps over the lazy dog',
+    );
   });
 
-  it('renders the text prop correctly', () => {
-    expect(wrapper.find('[data-testid="disclaimer-text"]').text()).toBe(
-      'Test Disclaimer Text',
+  it('hides title when no title is provided', () => {
+    const wrapper = mountComponent({ title: '' });
+
+    expect(wrapper.find('[data-testid="disclaimer-title"]').exists()).toBe(
+      false,
     );
   });
 
-  it('renders the UnnnicIcon component with correct icon and color', async () => {
-    const icon = 'alert-circle-1-1';
-    const iconColor = 'neutral-darkest';
+  it('hides description when no description is provided', () => {
+    const wrapper = mountComponent({ description: '' });
+
+    expect(
+      wrapper.find('[data-testid="disclaimer-description"]').exists(),
+    ).toBe(false);
+  });
 
-    await wrapper.setProps({ icon, iconColor });
+  it.each([
+    ['informational', 'info', 'blue-500'],
+    ['success', 'check_circle', 'green-500'],
+    ['attention', 'error', 'yellow-500'],
+    ['error', 'cancel', 'red-500'],
+    ['neutral', 'info', 'gray-400'],
+  ])('applies variant %s styles', (type, icon, scheme) => {
+    const wrapper = mountComponent({ type });
+
+    expect(wrapper.classes()).toContain(`unnnic-disclaimer--${type}`);
 
     const iconComponent = wrapper.findComponent(
       '[data-testid="disclaimer-icon"]',
     );
-    expect(iconComponent.exists()).toBe(true);
+
     expect(iconComponent.props('icon')).toBe(icon);
-    expect(iconComponent.props('scheme')).toBe(iconColor);
+    expect(iconComponent.props('scheme')).toBe(scheme);
   });
 
-  it('renders with default icon and color if not provided', () => {
-    const iconComponent = wrapper.findComponent(
-      '[data-testid="disclaimer-icon"]',
-    );
-    expect(iconComponent.props('icon')).toBe('alert-circle-1-1');
-    expect(iconComponent.props('scheme')).toBe('neutral-darkest');
-  });
+  describe('legacy compatibility', () => {
+    it.each([
+      ['alert-circle-1-1', 'error', 'yellow-500'],
+      ['info', 'info', 'blue-500'],
+      ['error', 'cancel', 'red-500'],
+      ['custom-icon', 'info', 'gray-400'],
+    ])('maps icon prop "%s" to variant', (icon, expectedIcon, scheme) => {
+      const wrapper = mountComponent({ icon });
 
-  it('validates the icon prop correctly', () => {
-    const wrapperValid = mount(Disclaimer, {
-      props: { text: 'Test', icon: 'alert-circle-1-1' },
-      global: { components: { UnnnicIcon: Icon } },
-    });
-    expect(wrapperValid.exists()).toBe(true);
+      const iconComponent = wrapper.findComponent(
+        '[data-testid="disclaimer-icon"]',
+      );
 
-    const wrapperInvalid = mount(Disclaimer, {
-      props: { text: 'Test', icon: 'invalid-icon' },
-      global: { components: { UnnnicIcon: Icon } },
+      expect(iconComponent.props('icon')).toBe(expectedIcon);
+      expect(iconComponent.props('scheme')).toBe(scheme);
     });
-    expect(wrapperInvalid.exists()).toBe(true);
-  });
 
-  it('validates the iconColor prop correctly', () => {
-    const wrapperValid = mount(Disclaimer, {
-      props: { text: 'Test', iconColor: 'neutral-darkest' },
-      global: { components: { UnnnicIcon: Icon } },
-    });
-    expect(wrapperValid.exists()).toBe(true);
+    it.each([
+      ['feedback-yellow', 'error', 'yellow-500'],
+      ['feedback-red', 'cancel', 'red-500'],
+      ['feedback-blue', 'info', 'gray-400'],
+    ])(
+      'maps iconColor prop "%s" to variant',
+      (iconColor, expectedIcon, scheme) => {
+        const wrapper = mountComponent({ iconColor });
 
-    const wrapperInvalid = mount(Disclaimer, {
-      props: { text: 'Test', iconColor: 'invalid-color' },
-      global: { components: { UnnnicIcon: Icon } },
-    });
-    expect(wrapperInvalid.exists()).toBe(true);
+        const iconComponent = wrapper.findComponent(
+          '[data-testid="disclaimer-icon"]',
+        );
+
+        expect(iconComponent.props('icon')).toBe(expectedIcon);
+        expect(iconComponent.props('scheme')).toBe(scheme);
+      },
+    );
   });
 });

package/src/components/Disclaimer/types.ts

@@ -1,7 +1,16 @@
 import type { SchemeColor } from '@/types/scheme-colors';
 
+export type DisclaimerType =
+  | 'informational'
+  | 'success'
+  | 'attention'
+  | 'error'
+  | 'neutral';
+
 export interface DisclaimerProps {
-  text: string;
-  icon?: string;
-  iconColor?: SchemeColor;
+  title?: string;
+  description?: string;
+  type?: DisclaimerType;
+  icon?: string | undefined;
+  iconColor?: SchemeColor | undefined;
 }

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

@@ -4,9 +4,11 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with defaul
 "<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">
     <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="">
+      <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="">
         <!--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>
+        <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>
+        </section>
       </div>
       <!--v-if-->
     </section>
@@ -20,9 +22,11 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with disabl
 "<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">
     <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 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="" 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 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"><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 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-muted unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
+        <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>
+        </section>
       </div>
       <!--v-if-->
     </section>
@@ -52,9 +56,11 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with search
 "<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">
     <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="">
+      <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="">
         <!--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>
+        <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>
+        </section>
       </div>
       <!--v-if-->
     </section>

package/src/components/MultiSelect/index.vue

@@ -17,7 +17,7 @@
           :message="props.message"
           :iconRight="openPopover ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
           :disabled="props.disabled"
-          showClear
+          :showClear="!!selectedItems.length"
           @clear="emit('update:modelValue', [])"
         />
       </PopoverTrigger>

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

@@ -245,20 +245,20 @@ describe('UnnnicSelect.vue', () => {
   });
 
   describe('computed properties', () => {
-    test('calculatedMaxHeight returns correct value', () => {
-      const maxHeight = wrapper.vm.calculatedMaxHeight;
+    test('calculatedPopoverHeight returns correct value', () => {
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
       expect(maxHeight).toBe('235px');
     });
 
-    test('calculatedMaxHeight includes search height when enabled', async () => {
+    test('calculatedPopoverHeight includes search height when enabled', async () => {
       await wrapper.setProps({ enableSearch: true });
-      const maxHeight = wrapper.vm.calculatedMaxHeight;
-      expect(maxHeight).toBe('289px');
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
+      expect(maxHeight).toBe('282px');
     });
 
-    test('calculatedMaxHeight returns unset when no options', async () => {
+    test('calculatedPopoverHeight returns unset when no options', async () => {
       await wrapper.setProps({ options: [] });
-      const maxHeight = wrapper.vm.calculatedMaxHeight;
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
       expect(maxHeight).toBe('unset');
     });
 
@@ -360,7 +360,7 @@ describe('UnnnicSelect.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 null modelValue', async () => {

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

@@ -4,9 +4,11 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with default pro
 "<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">
     <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="">
+      <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="">
         <!--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>
+        <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>
+        </section>
       </div>
       <!--v-if-->
     </section>
@@ -20,9 +22,11 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with disabled st
 "<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">
     <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 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="" 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 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"><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 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-muted unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
+        <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>
+        </section>
       </div>
       <!--v-if-->
     </section>
@@ -36,9 +40,11 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with search enab
 "<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">
     <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="">
+      <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="">
         <!--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>
+        <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>
+        </section>
       </div>
       <!--v-if-->
     </section>

package/src/components/Select/index.vue

@@ -20,16 +20,14 @@
           :message="props.message"
           :iconRight="openPopover ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
           :disabled="props.disabled"
-          showClear
+          :showClear="!!selectedItem"
           @clear="emit('update:modelValue', '')"
         />
       </PopoverTrigger>
       <PopoverContent
         align="start"
-        :style="{
-          maxHeight: calculatedMaxHeight,
-          overflow: 'auto',
-        }"
+        :class="'h-full'"
+        :style="popoverContentCustomStyles"
       >
         <div class="unnnic-select__content">
           <UnnnicInput
@@ -40,8 +38,15 @@
             iconLeft="search"
             @update:model-value="handleSearch"
           />
+          <p
+            v-if="filteredOptions.length === 0"
+            class="unnnic-select__content-no-results"
+          >
+            {{ $t('without_results') }}
+          </p>
           <PopoverOption
             v-for="(option, index) in filteredOptions"
+            v-else
             :key="option[props.itemValue]"
             :data-option-index="index"
             data-testid="select-option"
@@ -69,6 +74,7 @@ import {
   PopoverContent,
   PopoverOption,
 } from '../ui/popover/index';
+
 import UnnnicI18n from '../../mixins/i18n';
 
 defineOptions({
@@ -141,6 +147,7 @@ watch(openPopover, () => {
 const handleKeyDown = (event) => {
   const { key } = event;
   const validKeys = ['ArrowUp', 'ArrowDown', 'Enter'];
+
   if (validKeys.includes(key)) {
     event.preventDefault();
     if (key === 'ArrowUp') {
@@ -153,7 +160,7 @@ const handleKeyDown = (event) => {
       focusedOptionIndex.value++;
       scrollToOption(focusedOptionIndex.value);
     }
-    if (key === 'Enter') {
+    if (key === 'Enter' && focusedOptionIndex.value !== -1) {
       handleSelectOption(filteredOptions.value[focusedOptionIndex.value]);
     }
   }
@@ -174,15 +181,32 @@ const scrollToOption = (
   });
 };
 
-const calculatedMaxHeight = computed(() => {
+const calculatedPopoverHeight = computed(() => {
   if (!props.options || props.options.length === 0) return 'unset';
   const popoverPadding = 32;
   const popoverGap = 4;
   // 37 = 21px (height) + 16px (padding)
   const fieldsHeight = 37 * props.optionsLines;
+  const gapsCompensation = props.enableSearch ? 1 : 2;
+
   const size =
-    fieldsHeight + popoverPadding + (popoverGap * props.optionsLines - 2);
-  return `${props.enableSearch ? size + 54 : size}px`;
+    fieldsHeight +
+    popoverPadding +
+    (popoverGap * props.optionsLines - gapsCompensation);
+
+  return `${props.enableSearch ? size + 45 + 1 : size}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 selectedItem = computed(() => {
@@ -256,6 +280,18 @@ const filteredOptions = computed(() => {
     padding: 0;
     margin: 0;
     gap: $unnnic-space-1;
+
+    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;
+    }
   }
 }
 </style>