@weni/unnnic-system 3.27.1 → 3.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.27.1",
+  "version": "3.28.1",
   "type": "commonjs",
   "files": [
     "dist",

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

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { beforeEach, describe, expect, afterEach, test } from 'vitest';
+import { h } from 'vue';
 import UnnnicSelect from '../index.vue';
 import i18n from '@/utils/plugins/i18n';
 
@@ -484,4 +485,142 @@ describe('UnnnicSelect.vue', () => {
       expect(wrapper.html()).toMatchSnapshot();
     });
   });
+
+  describe('option slot', () => {
+    test('renders custom content for each option through the option slot', async () => {
+      const slotWrapper = mountWrapper(
+        {},
+        {
+          option: (slotProps) =>
+            h('span', { class: 'custom-option' }, `custom-${slotProps.label}`),
+        },
+      );
+
+      slotWrapper.vm.setOpenPopover(true);
+      await slotWrapper.vm.$nextTick();
+
+      const options = slotWrapper.findAllComponents({
+        name: 'UnnnicPopoverOption',
+      });
+      expect(options.length).toBe(3);
+      expect(options[0].find('.custom-option').exists()).toBe(true);
+      expect(options[0].find('.custom-option').text()).toBe('custom-Option 1');
+
+      slotWrapper.unmount();
+    });
+
+    test('falls back to default label rendering without option slot', async () => {
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      const options = wrapper.findAllComponents({
+        name: 'UnnnicPopoverOption',
+      });
+      expect(options[0].find('.custom-option').exists()).toBe(false);
+      expect(options[0].find('.unnnic-popover-option__label').exists()).toBe(
+        true,
+      );
+    });
+  });
+
+  describe('selected slot (custom trigger)', () => {
+    const selectedSlot = {
+      selected: (slotProps) =>
+        h('span', { class: 'custom-selected' }, `selected-${slotProps.label}`),
+    };
+
+    test('renders custom trigger when selected slot is used and an item is selected', () => {
+      const slotWrapper = mountWrapper({ modelValue: 'option1' }, selectedSlot);
+
+      expect(slotWrapper.find('.unnnic-select__trigger').exists()).toBe(true);
+      expect(slotWrapper.find('.custom-selected').text()).toBe(
+        'selected-Option 1',
+      );
+      expect(slotWrapper.findComponent({ name: 'UnnnicInput' }).exists()).toBe(
+        false,
+      );
+
+      slotWrapper.unmount();
+    });
+
+    test('falls back to UnnnicInput when no item is selected', () => {
+      const slotWrapper = mountWrapper({ modelValue: null }, selectedSlot);
+
+      expect(slotWrapper.find('.unnnic-select__trigger').exists()).toBe(false);
+      expect(slotWrapper.findComponent({ name: 'UnnnicInput' }).exists()).toBe(
+        true,
+      );
+
+      slotWrapper.unmount();
+    });
+
+    test('falls back to UnnnicInput when selected slot is not provided', () => {
+      const fallbackWrapper = mountWrapper({ modelValue: 'option1' });
+
+      expect(fallbackWrapper.find('.unnnic-select__trigger').exists()).toBe(
+        false,
+      );
+      expect(
+        fallbackWrapper.findComponent({ name: 'UnnnicInput' }).exists(),
+      ).toBe(true);
+
+      fallbackWrapper.unmount();
+    });
+
+    test('shows the field label above the custom trigger', () => {
+      const slotWrapper = mountWrapper(
+        { modelValue: 'option1', label: 'Representative' },
+        selectedSlot,
+      );
+
+      const label = slotWrapper.find('.unnnic-select__trigger-label');
+      expect(label.exists()).toBe(true);
+      expect(label.text()).toBe('Representative');
+
+      slotWrapper.unmount();
+    });
+
+    test('reflects the popover state through the chevron icon', async () => {
+      const slotWrapper = mountWrapper({ modelValue: 'option1' }, selectedSlot);
+
+      const arrow = slotWrapper.find('.unnnic-select__trigger-arrow');
+      expect(arrow.exists()).toBe(true);
+
+      slotWrapper.vm.setOpenPopover(true);
+      await slotWrapper.vm.$nextTick();
+      expect(slotWrapper.vm.openPopover).toBe(true);
+
+      slotWrapper.unmount();
+    });
+
+    test('emits update:modelValue with empty value when clear is clicked', async () => {
+      const slotWrapper = mountWrapper(
+        { modelValue: 'option1', clearable: true },
+        selectedSlot,
+      );
+
+      const clear = slotWrapper.find('.unnnic-select__trigger-clear');
+      expect(clear.exists()).toBe(true);
+
+      await clear.trigger('click');
+
+      expect(slotWrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(slotWrapper.emitted('update:modelValue')[0]).toEqual(['']);
+
+      slotWrapper.unmount();
+    });
+
+    test('does not render clear icon when clearable is false', () => {
+      const slotWrapper = mountWrapper(
+        { modelValue: 'option1', clearable: false },
+        selectedSlot,
+      );
+
+      expect(slotWrapper.find('.unnnic-select__trigger-clear').exists()).toBe(
+        false,
+      );
+
+      slotWrapper.unmount();
+    });
+  });
 });

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

@@ -19,7 +19,7 @@ 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 w-full" 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="reka-popover-content-v-1" 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 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="">
@@ -55,7 +55,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with infinite sc
 `;
 
 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 w-full" 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="reka-popover-content-v-1" 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 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="">
@@ -73,7 +73,7 @@ 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 w-full" 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="reka-popover-content-v-1" 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 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="Option 1">

package/src/components/Select/index.vue

@@ -5,7 +5,53 @@
       @update:open="setOpenPopover"
     >
       <PopoverTrigger class="w-full">
+        <section
+          v-if="hasSelectedSlot && selectedItem"
+          ref="selectInputRef"
+          class="unnnic-select__trigger-wrapper"
+        >
+          <span
+            v-if="props.label"
+            class="unnnic-select__trigger-label"
+          >
+            {{ props.label }}
+          </span>
+          <section
+            :class="[
+              'unnnic-select__trigger',
+              `unnnic-select__trigger--${props.size}`,
+              {
+                'unnnic-select__trigger--focused': openPopover,
+                'unnnic-select__trigger--disabled': props.disabled,
+              },
+            ]"
+          >
+            <section class="unnnic-select__trigger-content">
+              <slot
+                name="selected"
+                :option="selectedItem"
+                :label="inputValue as string"
+              />
+            </section>
+            <UnnnicIcon
+              v-if="props.clearable && !props.disabled"
+              class="unnnic-select__trigger-clear"
+              icon="close"
+              size="ant"
+              scheme="fg-base"
+              clickable
+              @click.stop="emit('update:modelValue', '')"
+            />
+            <UnnnicIcon
+              class="unnnic-select__trigger-arrow"
+              :icon="openPopover ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+              size="ant"
+              scheme="fg-base"
+            />
+          </section>
+        </section>
         <UnnnicInput
+          v-else
           ref="selectInputRef"
           :modelValue="inputValue as string"
           class="unnnic-select__input"
@@ -60,7 +106,23 @@
               :focused="focusedOptionIndex === index"
               :disabled="option.disabled"
               @click="handleSelectOption(option)"
-            />
+            >
+              <template
+                v-if="$slots.option"
+                #default
+              >
+                <slot
+                  name="option"
+                  :option="option"
+                  :label="option[props.itemLabel] as string"
+                  :active="
+                    option[props.itemValue] === selectedItem?.[props.itemValue]
+                  "
+                  :focused="focusedOptionIndex === index"
+                  :index="index"
+                />
+              </template>
+            </PopoverOption>
             <div
               v-if="props.infiniteScroll && infiniteScrollLoading"
               class="unnnic-select__infinite-loading"
@@ -85,11 +147,13 @@ import {
   nextTick,
   onBeforeUnmount,
   useTemplateRef,
+  useSlots,
 } from 'vue';
 
 import { useInfiniteScroll } from '@vueuse/core';
 
 import UnnnicInput from '../Input/Input.vue';
+import UnnnicIcon from '../Icon.vue';
 import UnnnicIconLoading from '../IconLoading/IconLoading.vue';
 import {
   Popover,
@@ -141,6 +205,20 @@ const emit = defineEmits<{
   'scroll-end': [];
 }>();
 
+defineSlots<{
+  option?: (props: {
+    option: SelectOption;
+    label: string;
+    active: boolean;
+    focused: boolean;
+    index: number;
+  }) => unknown;
+  selected?: (props: { option: SelectOption; label: string }) => unknown;
+}>();
+
+const slots = useSlots();
+const hasSelectedSlot = computed(() => !!slots.selected);
+
 const selectInputRef = useTemplateRef<HTMLElement>('selectInputRef');
 const contentRef = useTemplateRef<HTMLDivElement>('contentRef');
 
@@ -155,8 +233,11 @@ function setOpenPopover(value: boolean) {
   base.openPopover.value = value;
 }
 
-const selectedItem = computed(() => {
-  if (props.returnObject) return props.modelValue;
+const selectedItem = computed((): SelectOption | undefined => {
+  if (props.returnObject) {
+    if (props.modelValue == null || props.modelValue === '') return undefined;
+    return props.modelValue as SelectOption;
+  }
 
   return props.options.find(
     (option) => option[props.itemValue] === props.modelValue,
@@ -289,6 +370,70 @@ defineExpose({
 }
 
 .unnnic-select {
+  &__trigger-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-space-1;
+    width: 100%;
+    text-align: left;
+    font: $unnnic-font-body;
+  }
+
+  &__trigger-label {
+    font: $unnnic-font-body;
+    color: $unnnic-color-fg-base;
+  }
+
+  &__trigger {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    background: $unnnic-color-bg-base;
+    border: 1px solid $unnnic-color-border-base;
+    border-radius: $unnnic-radius-2;
+    padding: $unnnic-space-3 $unnnic-space-4;
+    height: 45px;
+
+    transition: border-color 0.1s ease-in-out;
+
+    &--sm {
+      padding: $unnnic-space-2 $unnnic-space-4;
+      height: 37px;
+    }
+
+    &--focused {
+      border-color: $unnnic-color-border-accent-strong;
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      border-color: $unnnic-color-border-muted;
+      background-color: $unnnic-color-bg-muted;
+    }
+
+    &-content {
+      flex: 1 1 0;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: $unnnic-space-2;
+      overflow: hidden;
+      font: $unnnic-font-body;
+      color: $unnnic-color-fg-emphasized;
+    }
+
+    &-clear,
+    &-arrow {
+      flex-shrink: 0;
+    }
+  }
+
   &__content {
     display: flex;
     flex-direction: column;

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

@@ -11,17 +11,12 @@
       "
     >
       <section :class="`unnnic-popover__content ${props.class || ''}`">
-        <component
-          :is="child"
-          v-for="(child, index) in contentChildren"
-          :key="index"
-        />
+        <slot />
       </section>
 
-      <component
-        :is="child"
-        v-for="(child, index) in footerChildren"
-        :key="index"
+      <div
+        ref="footerContainer"
+        data-testid="popover-footer-container"
       />
     </PopoverContent>
   </PopoverPortal>
@@ -29,13 +24,14 @@
 
 <script setup lang="ts">
 import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
-import type { HTMLAttributes, Slots, VNode } from 'vue';
-import { computed, useSlots } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import { computed, provide, ref } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '@/lib/utils';
 import { useLayerZIndex } from '@/lib/layer-manager';
 import { useTeleportTarget } from '@/lib/teleport-target';
+import { POPOVER_FOOTER_TARGET } from './context';
 
 defineOptions({
   inheritAttrs: false,
@@ -63,29 +59,11 @@ const delegatedProps = reactiveOmit(props, 'class', 'size');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const slots = useSlots() as Slots;
-
 const popoverZIndex = useLayerZIndex();
 const portalTarget = useTeleportTarget();
 
-const getComponentName = (vnode: VNode): string | undefined => {
-  const componentType = vnode.type as { name?: string; __name?: string };
-  return componentType?.name || componentType?.__name;
-};
-
-const contentChildren = computed(() => {
-  const defaultSlot = slots.default?.() || [];
-  return defaultSlot.filter(
-    (vnode: VNode) => getComponentName(vnode) !== 'UnnnicPopoverFooter',
-  );
-});
-
-const footerChildren = computed(() => {
-  const defaultSlot = slots.default?.() || [];
-  return defaultSlot.filter(
-    (vnode: VNode) => getComponentName(vnode) === 'UnnnicPopoverFooter',
-  );
-});
+const footerContainer = ref<HTMLElement | null>(null);
+provide(POPOVER_FOOTER_TARGET, footerContainer);
 
 const contentWidth = computed(() => {
   if (props.width) return props.width;

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

@@ -1,13 +1,32 @@
 <template>
-  <footer class="unnnic-popover__footer">
+  <Teleport
+    v-if="target"
+    :to="target"
+  >
+    <footer class="unnnic-popover__footer">
+      <slot />
+    </footer>
+  </Teleport>
+
+  <footer
+    v-else
+    class="unnnic-popover__footer"
+  >
     <slot />
   </footer>
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue';
+import { POPOVER_FOOTER_TARGET } from './context';
+
 defineOptions({
   name: 'UnnnicPopoverFooter',
 });
+
+// When rendered inside a PopoverContent, teleport into its footer container.
+// Falls back to inline rendering when used standalone (no target provided).
+const target = inject(POPOVER_FOOTER_TARGET, null);
 </script>
 
 <style lang="scss">
@@ -21,12 +40,8 @@ $popover-space: $unnnic-space-4;
   padding: $popover-space;
 
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   gap: $unnnic-space-2;
-
-  > * {
-    width: 100%;
-  }
 }
 </style>

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

@@ -6,6 +6,7 @@
         'unnnic-popover-option--disabled': props.disabled,
         'unnnic-popover-option--active': props.active,
         'unnnic-popover-option--focused': props.focused,
+        'unnnic-popover-option--with-content': hasDefaultSlot,
       },
     ]"
   >
@@ -15,15 +16,17 @@
       :scheme="schemeColor"
       size="ant"
     />
-    <p
-      :class="[
-        'unnnic-popover-option__label',
-        `unnnic-popover-option__label--${schemeColor}`,
-        `unnnic-popover-option--disabled: ${props.disabled}`,
-      ]"
-    >
-      {{ props.label }}
-    </p>
+    <slot>
+      <p
+        :class="[
+          'unnnic-popover-option__label',
+          `unnnic-popover-option__label--${schemeColor}`,
+          `unnnic-popover-option--disabled: ${props.disabled}`,
+        ]"
+      >
+        {{ props.label }}
+      </p>
+    </slot>
   </div>
 </template>
 
@@ -31,7 +34,7 @@
 import UnnnicIcon from '@/components/Icon.vue';
 
 import type { SchemeColor } from '@/types/scheme-colors';
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
 
 defineOptions({
   name: 'UnnnicPopoverOption',
@@ -54,6 +57,9 @@ const props = withDefaults(defineProps<PopoverOptionProps>(), {
   icon: '',
 });
 
+const slots = useSlots();
+const hasDefaultSlot = computed(() => !!slots.default);
+
 const schemeColor = computed(() => {
   if (props.active) {
     return 'fg-on-primary';
@@ -82,6 +88,10 @@ const schemeColor = computed(() => {
   gap: $unnnic-space-2;
   align-items: center;
 
+  &--with-content {
+    justify-content: space-between;
+  }
+
   &:hover:not(&--active):not(&--disabled),
   &--focused {
     background-color: $unnnic-color-bg-soft;

package/src/components/ui/popover/__tests__/PopoverFooter.spec.js

@@ -0,0 +1,116 @@
+import { mount, flushPromises } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import PopoverContent from '../PopoverContent.vue';
+import PopoverFooter from '../PopoverFooter.vue';
+
+// Render reka-ui's portal/content inline so the component's own markup
+// (`.unnnic-popover__content` + footer container) is testable. The native
+// Teleport is kept real so we can assert the footer actually moves.
+const inlineSlot = { template: '<div><slot /></div>' };
+
+const globalStubs = {
+  PopoverPortal: inlineSlot,
+  PopoverContent: inlineSlot,
+};
+
+// A child component that renders the footer from its own template, simulating
+// a footer nested inside a consumer component rather than a direct slot child.
+const NestedFooterChild = {
+  components: { PopoverFooter },
+  template: `
+    <section data-testid="nested-wrapper">
+      <PopoverFooter>
+        <button data-testid="nested-footer-btn">Save</button>
+      </PopoverFooter>
+    </section>
+  `,
+};
+
+const mountPopover = (defaultSlot) =>
+  mount(PopoverContent, {
+    attachTo: document.body,
+    slots: { default: defaultSlot },
+    global: {
+      stubs: globalStubs,
+      components: { PopoverFooter, NestedFooterChild },
+    },
+  });
+
+const content = (wrapper) => wrapper.find('.unnnic-popover__content');
+const footerContainer = (wrapper) =>
+  wrapper.find('[data-testid="popover-footer-container"]');
+
+describe('UnnnicPopoverFooter', () => {
+  it('renders a direct footer child inside the footer container, outside the content', async () => {
+    const wrapper = mountPopover(
+      `<p data-testid="body">Body</p>
+       <PopoverFooter><button data-testid="footer-btn">Save</button></PopoverFooter>`,
+    );
+    await flushPromises();
+
+    expect(
+      footerContainer(wrapper).find('.unnnic-popover__footer').exists(),
+    ).toBe(true);
+    expect(content(wrapper).find('.unnnic-popover__footer').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find('[data-testid="footer-btn"]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('renders a footer nested inside a child component in the footer container', async () => {
+    const wrapper = mountPopover('<NestedFooterChild />');
+    await flushPromises();
+
+    expect(
+      footerContainer(wrapper).find('.unnnic-popover__footer').exists(),
+    ).toBe(true);
+    expect(
+      footerContainer(wrapper)
+        .find('[data-testid="nested-footer-btn"]')
+        .exists(),
+    ).toBe(true);
+    expect(content(wrapper).find('.unnnic-popover__footer').exists()).toBe(
+      false,
+    );
+
+    wrapper.unmount();
+  });
+
+  it('renders no footer area when no footer is provided', async () => {
+    const wrapper = mountPopover('<p data-testid="body">Body</p>');
+    await flushPromises();
+
+    expect(wrapper.find('.unnnic-popover__footer').exists()).toBe(false);
+    expect(footerContainer(wrapper).element.children.length).toBe(0);
+
+    wrapper.unmount();
+  });
+
+  it('teleports every footer into the container when multiple are provided', async () => {
+    const wrapper = mountPopover(
+      `<PopoverFooter><span>First</span></PopoverFooter>
+       <PopoverFooter><span>Second</span></PopoverFooter>`,
+    );
+    await flushPromises();
+
+    const footers = footerContainer(wrapper).findAll('.unnnic-popover__footer');
+    expect(footers).toHaveLength(2);
+    expect(content(wrapper).find('.unnnic-popover__footer').exists()).toBe(
+      false,
+    );
+
+    wrapper.unmount();
+  });
+
+  it('renders inline as a fallback when used without a PopoverContent target', () => {
+    const wrapper = mount(PopoverFooter, {
+      slots: { default: '<button data-testid="standalone">Save</button>' },
+    });
+
+    const footer = wrapper.find('.unnnic-popover__footer');
+    expect(footer.exists()).toBe(true);
+    expect(footer.find('[data-testid="standalone"]').exists()).toBe(true);
+  });
+});

package/src/components/ui/popover/context.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export const POPOVER_FOOTER_TARGET: InjectionKey<Ref<HTMLElement | null>> =
+  Symbol('unnnicPopoverFooterTarget');