@farm-investimentos/front-mfe-components-vue3 1.4.0 → 1.5.0

package/dist/img/currency-exchange.00d6a787.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.59366 6.90002C7.40699 6.50669 6.83366 6.26002 6.83366 5.63335C6.83366 4.95335 7.57366 4.70669 8.04033 4.70669C8.91366 4.70669 9.23366 5.36669 9.30699 5.60002L10.3603 5.15335C10.2603 4.85335 9.81366 3.87335 8.66699 3.66002V2.83335H7.33366V3.67335C5.68033 4.04669 5.67366 5.58002 5.67366 5.64669C5.67366 7.16002 7.17366 7.58669 7.90699 7.85335C8.96033 8.22669 9.42699 8.56669 9.42699 9.20669C9.42699 9.96002 8.72699 10.28 8.10699 10.28C6.89366 10.28 6.54699 9.03335 6.50699 8.88669L5.40033 9.33335C5.82033 10.7934 6.92033 11.1867 7.33366 11.3067V12.1667H8.66699V11.34C8.93366 11.28 10.6003 10.9467 10.6003 9.19335C10.6003 8.26669 10.1937 7.45335 8.59366 6.90002ZM2.00033 13.5H0.666992V9.50002H4.66699V10.8334H3.01366C4.08699 12.44 5.92033 13.5 8.00033 13.5C11.3137 13.5 14.0003 10.8134 14.0003 7.50002H15.3337C15.3337 11.5534 12.0537 14.8334 8.00033 14.8334C5.52033 14.8334 3.32699 13.6 2.00033 11.72V13.5ZM0.666992 7.50002C0.666992 3.44669 3.94699 0.166687 8.00033 0.166687C10.4803 0.166687 12.6737 1.40002 14.0003 3.28002V1.50002H15.3337V5.50002H11.3337V4.16669H12.987C11.9137 2.56002 10.0803 1.50002 8.00033 1.50002C4.68699 1.50002 2.00033 4.18669 2.00033 7.50002H0.666992Z" fill="#F5F5F5"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farm-investimentos/front-mfe-components-vue3",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": false,
   "repository": {
     "type": "git",

package/src/assets/icons/README.md

@@ -0,0 +1,33 @@
+# Custom Icons System
+
+This directory contains custom SVG icons for the component library.
+
+## How to Add a New Custom Icon
+
+1. **Create a folder** with the icon name in this directory: `src/assets/icons/[icon-name]/`
+2. **Add the SVG file**: `[icon-name].svg`
+3. **Create the SCSS file**: `[icon-name].scss` with the appropriate CSS class
+4. **Import the SCSS** in `custom-icons.scss`
+5. **Add to the list** in `custom-icons-list.ts`
+
+## Example Structure
+
+```
+currency-exchange/
+├── currency-exchange.svg    # SVG file from Figma
+└── currency-exchange.scss   # CSS styles with .custom-currency-exchange class
+```
+
+## Usage
+
+```vue
+<farm-icon>custom-currency-exchange</farm-icon>
+```
+
+## CSS Class Pattern
+
+All custom icons must follow the pattern:
+
+-   **Prefix**: `custom-`
+-   **Class name**: `.custom-[icon-name]`
+-   **CSS**: Uses `mask` property with `currentColor` for dynamic coloring

package/src/assets/icons/currency-exchange/currency-exchange.scss

@@ -0,0 +1,14 @@
+.farm-icon {
+	&.custom-currency-exchange:before {
+		content: '';
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+		background-color: currentColor;
+		mask: url('../../assets/icons/currency-exchange/currency-exchange.svg') no-repeat center;
+		mask-size: contain;
+		-webkit-mask: url('../../assets/icons/currency-exchange/currency-exchange.svg') no-repeat
+			center;
+		-webkit-mask-size: contain;
+	}
+}

package/src/assets/icons/currency-exchange/currency-exchange.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.59366 6.90002C7.40699 6.50669 6.83366 6.26002 6.83366 5.63335C6.83366 4.95335 7.57366 4.70669 8.04033 4.70669C8.91366 4.70669 9.23366 5.36669 9.30699 5.60002L10.3603 5.15335C10.2603 4.85335 9.81366 3.87335 8.66699 3.66002V2.83335H7.33366V3.67335C5.68033 4.04669 5.67366 5.58002 5.67366 5.64669C5.67366 7.16002 7.17366 7.58669 7.90699 7.85335C8.96033 8.22669 9.42699 8.56669 9.42699 9.20669C9.42699 9.96002 8.72699 10.28 8.10699 10.28C6.89366 10.28 6.54699 9.03335 6.50699 8.88669L5.40033 9.33335C5.82033 10.7934 6.92033 11.1867 7.33366 11.3067V12.1667H8.66699V11.34C8.93366 11.28 10.6003 10.9467 10.6003 9.19335C10.6003 8.26669 10.1937 7.45335 8.59366 6.90002ZM2.00033 13.5H0.666992V9.50002H4.66699V10.8334H3.01366C4.08699 12.44 5.92033 13.5 8.00033 13.5C11.3137 13.5 14.0003 10.8134 14.0003 7.50002H15.3337C15.3337 11.5534 12.0537 14.8334 8.00033 14.8334C5.52033 14.8334 3.32699 13.6 2.00033 11.72V13.5ZM0.666992 7.50002C0.666992 3.44669 3.94699 0.166687 8.00033 0.166687C10.4803 0.166687 12.6737 1.40002 14.0003 3.28002V1.50002H15.3337V5.50002H11.3337V4.16669H12.987C11.9137 2.56002 10.0803 1.50002 8.00033 1.50002C4.68699 1.50002 2.00033 4.18669 2.00033 7.50002H0.666992Z" fill="#F5F5F5"/>
+</svg>

package/src/assets/icons/custom-icons-list.ts

@@ -0,0 +1,3 @@
+export const customIconsList = ['custom-currency-exchange'];
+
+export default customIconsList;

package/src/assets/icons/custom-icons.scss

@@ -0,0 +1,2 @@
+// Import all custom icon styles
+@import './currency-exchange/currency-exchange.scss';

package/src/assets/icons/index.ts

@@ -0,0 +1,2 @@
+export { default as customIconsList, customIconsList as customIcons } from './custom-icons-list';
+export * from './custom-icons-list';

package/src/components/Icon/Icon.scss

@@ -1,5 +1,6 @@
 @import '../../configurations/variables';
 @import '../../configurations/theme-colors';
+@import '../../assets/icons/custom-icons.scss';
 
 .farm-icon {
 	align-items: center;

package/src/components/Icon/Icon.stories.js

@@ -2,6 +2,7 @@
 import Icon from './Icon.vue';
 import iconsList from './icons_list';
 
+import { customIconsList } from '../../assets/icons';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 import bwThemeColors from '../../configurations/_theme-colors-bw.module.scss';
 import sizes from '../../configurations/sizes';
@@ -156,3 +157,30 @@ export const ListOfIcons = () => ({
         </div>
     </div>`,
 });
+
+export const CustomIcons = () => ({
+	data() {
+		return {
+			customIconsList: [...customIconsList],
+			colors: [...colors],
+		};
+	},
+	template: `<div>
+        <h3>Custom Icons ({{ customIconsList.length }} available)</h3>
+        <div class="icons-container__list">
+            <div v-for="icon of customIconsList" :key="'custom_icon_' + icon">
+                <farm-icon>
+                    {{ icon }}
+                </farm-icon>
+                <span>{{ icon }}</span>
+            </div>
+        </div>
+        <br />
+        <h4>Color Examples</h4>
+        <div class="icons-container">
+            <farm-icon v-for="color of colors" :key="'currency_' + color" :color="color">
+                custom-currency-exchange
+            </farm-icon>
+        </div>
+    </div>`,
+});

package/src/components/Icon/Icon.vue

@@ -53,11 +53,16 @@ export default {
 		const el = ref(null);
 
 		const classes = computed(() => {
+			const isCustomIcon = icon.value.startsWith('custom-');
+			
 			return {
 				'farm-icon': true,
 				['farm-icon--' + color.value]: true,
-				mdi: true,
-				['mdi-' + icon.value]: true,
+				// Classes MDI para ícones padrão
+				...(isCustomIcon ? {} : { mdi: true, ['mdi-' + icon.value]: true }),
+				// Classe customizada para ícones personalizados  
+				...(isCustomIcon ? { [icon.value]: true } : {}),
+				// Variações de cor
 				'farm-icon--lighten': variation.value === 'lighten',
 				'farm-icon--darken': variation.value === 'darken',
 				['farm-icon--black-' + variation.value]: color.value === 'black',

package/src/components/Icon/icons_list.ts

@@ -1,4 +1,7 @@
+import { customIconsList } from '../../assets/icons';
+
 export default [
+	...customIconsList,
 	'access-point',
 	'access-point-network',
 	'account',

package/src/components/Tooltip/Tooltip.scss

@@ -1,23 +1,12 @@
-/* 
- * CSS simplificado para Tooltip - Abordagem simples e direta
- * SEMPRE usa position: fixed via JavaScript
- */
-
-/* Container principal */
 .tooltip-container {
 	display: inline-block;
 	position: relative;
 }
 
-/* Activator */
 .tooltip-activator {
 	display: inline-block;
 }
 
-/* 
- * COMPATIBILIDADE: Classes antigas mantidas para outros componentes
- * que fazem @extend .farm-tooltip__popup
- */
 .farm-tooltip {
 	display: inline-block;
 	position: relative;
@@ -28,7 +17,6 @@
 }
 
 .farm-tooltip__popup {
-	/* Estilos base mantidos para compatibilidade */
 	background-color: #333333;
 	color: #f5f5f5;
 	border-radius: 5px;
@@ -41,12 +29,10 @@
 	transform: translateZ(0);
 	pointer-events: auto;
 
-	/* Estados */
 	opacity: 0;
 	visibility: hidden;
 	transition: opacity 0.3s linear, visibility 0.3s linear;
 
-	/* Variantes */
 	&--visible {
 		opacity: 1;
 		visibility: visible;
@@ -57,7 +43,6 @@
 		max-width: 300px;
 	}
 
-	/* Header */
 	.farm-tooltip__header {
 		display: flex;
 		justify-content: space-between;
@@ -86,7 +71,6 @@
 	}
 }
 
-/* Estilos globais para tooltip criado dinamicamente */
 .tooltip-popup {
 	background-color: #333333;
 	color: #f5f5f5;
@@ -100,7 +84,6 @@
 	transform: translateZ(0);
 	pointer-events: auto;
 
-	/* Estados */
 	opacity: 0;
 	visibility: hidden;
 	transition: opacity 0.3s linear, visibility 0.3s linear;
@@ -110,7 +93,6 @@
 		visibility: visible;
 	}
 
-	/* Variantes */
 	&--dark {
 		background-color: #333333;
 		color: #f5f5f5;
@@ -147,7 +129,6 @@
 		}
 	}
 
-	/* Tamanhos */
 	&--sm {
 		font-size: 11px;
 		padding: 12px;
@@ -163,7 +144,6 @@
 		padding: 20px;
 	}
 
-	/* Header */
 	.tooltip-header {
 		display: flex;
 		justify-content: space-between;
@@ -205,7 +185,6 @@
 		pointer-events: none;
 	}
 
-	/* Posicionamento específico */
 	&--has-title {
 		.tooltip-content {
 			margin-top: 4px;

package/src/components/Tooltip/Tooltip.stories.js

@@ -7,7 +7,7 @@ export default {
 		docs: {
 			description: {
 				component: `Tooltip<br />
-        selector: <em>Tooltip</em><br />
+        selector: <em>farm-tooltip</em><br />
         <span style="color: var(--farm-primary-base);">ready for use</span>
         `,
 			},
@@ -43,17 +43,17 @@ export default {
 
 export const Primary = {
 	render: () => ({
-		components: { Tooltip },
+		components: { 'farm-tooltip': Tooltip },
 		template: `
       <div style="padding-left: 80px; padding-top: 80px;">
         <div style="display: flex; align-items: center; gap: 8px;">
           <span>Hover over the icon</span>
-          <Tooltip placement="top-center">
+          <farm-tooltip placement="top-center">
             <template #activator>
               <span style="display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #666; color: white; border-radius: 50%; font-size: 10px; cursor: help;">?</span>
             </template>
             This is a simple tooltip
-          </Tooltip>
+          </farm-tooltip>
         </div>
       </div>
     `,
@@ -62,70 +62,70 @@ export const Primary = {
 
 export const AllPositions = {
 	render: () => ({
-		components: { Tooltip },
+		components: { 'farm-tooltip': Tooltip },
 		template: `
       <div style="padding: 100px; display: flex; flex-direction: column; align-items: center; gap: 50px;">
         <div style="display: flex; gap: 30px; margin-bottom: 50px;">
           <div style="display: flex; flex-direction: column; align-items: center;">
             <p style="margin-bottom: 10px;">Top Left</p>
-            <Tooltip placement="top-left">
+            <farm-tooltip placement="top-left">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
               </template>
               Top-Left Position
-            </Tooltip>
+            </farm-tooltip>
           </div>
 
           <div style="display: flex; flex-direction: column; align-items: center;">
             <p style="margin-bottom: 10px;">Top Center</p>
-            <Tooltip placement="top-center">
+            <farm-tooltip placement="top-center">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
               </template>
               Top-Center Position (Default)
-            </Tooltip>
+            </farm-tooltip>
           </div>
 
           <div style="display: flex; flex-direction: column; align-items: center;">
             <p style="margin-bottom: 10px;">Top Right</p>
-            <Tooltip placement="top-right">
+            <farm-tooltip placement="top-right">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
               </template>
               Top-Right Position
-            </Tooltip>
+            </farm-tooltip>
           </div>
         </div>
 
         <div style="display: flex; gap: 30px;">
           <div style="display: flex; flex-direction: column; align-items: center;">
             <p style="margin-bottom: 10px;">Bottom Left</p>
-            <Tooltip placement="bottom-left">
+            <farm-tooltip placement="bottom-left">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
               </template>
               Bottom-Left Position
-            </Tooltip>
+            </farm-tooltip>
           </div>
 
           <div style="display: flex; flex-direction: column; align-items: center;">
             <p style="margin-bottom: 10px;">Bottom Center</p>
-            <Tooltip placement="bottom-center">
+            <farm-tooltip placement="bottom-center">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
               </template>
               Bottom-Center Position
-            </Tooltip>
+            </farm-tooltip>
           </div>
 
           <div style="display: flex; flex-direction: column; align-items: center;">
             <p style="margin-bottom: 10px;">Bottom Right</p>
-            <Tooltip placement="bottom-right">
+            <farm-tooltip placement="bottom-right">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
               </template>
               Bottom-Right Position
-            </Tooltip>
+            </farm-tooltip>
           </div>
         </div>
       </div>
@@ -135,7 +135,7 @@ export const AllPositions = {
 
 export const ControlledTooltip = {
 	render: () => ({
-		components: { Tooltip },
+		components: { 'farm-tooltip': Tooltip },
 		data() {
 			return {
 				showTooltip: false,
@@ -145,7 +145,7 @@ export const ControlledTooltip = {
       <div style="padding: 80px;">
         <div style="display: flex; align-items: center; gap: 8px;">
           <span>Click to open:</span>
-          <Tooltip v-model="showTooltip" placement="top-right">
+          <farm-tooltip v-model="showTooltip" placement="top-right">
             <template #activator>
               <span 
                 @click="showTooltip = !showTooltip" 
@@ -154,7 +154,7 @@ export const ControlledTooltip = {
             </template>
             <template #title>Controlled Tooltip</template>
             This tooltip is controlled by v-model
-          </Tooltip>
+          </farm-tooltip>
         </div>
       </div>
     `,
@@ -163,18 +163,18 @@ export const ControlledTooltip = {
 
 export const FluidTooltip = {
 	render: () => ({
-		components: { Tooltip },
+		components: { 'farm-tooltip': Tooltip },
 		template: `
       <div style="padding-left: 80px; padding-top: 80px;">
         <div style="display: flex; align-items: center; gap: 8px;">
           <span>Fluid width tooltip</span>
-          <Tooltip placement="top-center" :fluid="true">
+          <farm-tooltip placement="top-center" :fluid="true">
             <template #activator>
               <span style="display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #666; color: white; border-radius: 50%; font-size: 10px; cursor: help;">?</span>
             </template>
             This is a fluid tooltip that will grow based on its content.
             It contains a longer text to demonstrate how it expands horizontally.
-          </Tooltip>
+          </farm-tooltip>
         </div>
       </div>
     `,
@@ -184,38 +184,38 @@ export const FluidTooltip = {
 
 export const Sizes = {
 	render: () => ({
-		components: { Tooltip },
+		components: { 'farm-tooltip': Tooltip },
 		template: `
       <div style="padding: 80px;">
         <div style="display: flex; gap: 30px; align-items: center;">
           <div style="display: flex; align-items: center; gap: 8px;">
             <span>Small:</span>
-            <Tooltip placement="top-center" size="sm">
+            <farm-tooltip placement="top-center" size="sm">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #666; color: white; border-radius: 50%; font-size: 10px; cursor: help;">?</span>
               </template>
               Small tooltip
-            </Tooltip>
+            </farm-tooltip>
           </div>
           
           <div style="display: flex; align-items: center; gap: 8px;">
             <span>Medium:</span>
-            <Tooltip placement="top-center" size="md">
+            <farm-tooltip placement="top-center" size="md">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
               </template>
               Medium tooltip (default)
-            </Tooltip>
+            </farm-tooltip>
           </div>
           
           <div style="display: flex; align-items: center; gap: 8px;">
             <span>Large:</span>
-            <Tooltip placement="top-center" size="lg">
+            <farm-tooltip placement="top-center" size="lg">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #666; color: white; border-radius: 50%; font-size: 12px; cursor: help;">?</span>
               </template>
               Large tooltip
-            </Tooltip>
+            </farm-tooltip>
           </div>
         </div>
       </div>
@@ -225,28 +225,28 @@ export const Sizes = {
 
 export const WithCustomMaxWidth = {
 	render: () => ({
-		components: { Tooltip },
+		components: { 'farm-tooltip': Tooltip },
 		template: `
       <div style="padding: 80px;">
         <div style="display: flex; gap: 30px; align-items: center;">
           <div style="display: flex; align-items: center; gap: 8px;">
             <span>Default width:</span>
-            <Tooltip placement="top-center">
+            <farm-tooltip placement="top-center">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
               </template>
               This is a tooltip with default width that can be quite long and will wrap naturally
-            </Tooltip>
+            </farm-tooltip>
           </div>
           
           <div style="display: flex; align-items: center; gap: 8px;">
             <span>Custom max-width (200px):</span>
-            <Tooltip placement="top-center" max-width="200px">
+            <farm-tooltip placement="top-center" max-width="200px">
               <template #activator>
                 <span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #007bff; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
               </template>
               This is a tooltip with custom max-width of 200px that will wrap when it exceeds that width
-            </Tooltip>
+            </farm-tooltip>
           </div>
         </div>
       </div>
@@ -256,12 +256,12 @@ export const WithCustomMaxWidth = {
 
 export const ComplexContent = {
 	render: () => ({
-		components: { Tooltip },
+		components: { 'farm-tooltip': Tooltip },
 		template: `
       <div style="padding: 80px;">
         <div style="display: flex; align-items: center; gap: 8px;">
           <span>Complex tooltip with title:</span>
-          <Tooltip placement="top-center" :fluid="true">
+          <farm-tooltip placement="top-center" :fluid="true">
             <template #activator>
               <span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #28a745; color: white; border-radius: 50%; font-size: 11px; cursor: help;">i</span>
             </template>
@@ -274,7 +274,7 @@ export const ComplexContent = {
                 <li>Processing time: 2-3 business days</li>
               </ul>
             </div>
-          </Tooltip>
+          </farm-tooltip>
         </div>
       </div>
     `,

package/src/components/Tooltip/Tooltip.vue

@@ -52,6 +52,10 @@
 <script setup lang="ts">
 import { ref, computed, onBeforeUnmount, nextTick, watch, useSlots } from 'vue';
 
+defineOptions({
+	name: 'farm-tooltip',
+});
+
 export interface TooltipProps {
 	modelValue?: boolean;
 	trigger?: 'hover' | 'click' | 'manual';
@@ -69,7 +73,6 @@ export interface TooltipProps {
 	delay?: number | [number, number];
 	disabled?: boolean;
 	fluid?: boolean;
-	position?: string;
 }
 
 const props = withDefaults(defineProps<TooltipProps>(), {
@@ -83,7 +86,6 @@ const props = withDefaults(defineProps<TooltipProps>(), {
 	delay: () => [100, 50],
 	disabled: false,
 	fluid: false,
-	position: undefined,
 });
 
 const emit = defineEmits<{
@@ -111,13 +113,6 @@ const isControlled = computed(() => props.modelValue !== undefined);
 const hasTitle = computed(() => !!slots.title);
 const showCloseButton = computed(() => isControlled.value && hasTitle.value);
 
-const normalizedPlacement = computed(() => {
-	if (props.position) {
-		return props.position as typeof props.placement;
-	}
-	return props.placement;
-});
-
 const normalizedMaxWidth = computed(() => {
 	if (props.fluid) {
 		return '300px';
@@ -131,7 +126,7 @@ const tooltipClasses = computed(() => ({
 	[`tooltip-popup--${props.variant}`]: true,
 	[`tooltip-popup--${props.size}`]: true,
 	'tooltip-popup--has-title': hasTitle.value,
-	[`tooltip-popup--${normalizedPlacement.value}`]: true,
+	[`tooltip-popup--${props.placement}`]: true,
 }));
 
 const tooltipStyles = computed(() => {
@@ -152,7 +147,7 @@ const tooltipStyles = computed(() => {
 });
 
 const arrowStyles = computed(() => {
-	const [verticalPos] = normalizedPlacement.value.split('-');
+	const [verticalPos] = props.placement.split('-');
 	const arrowColor = props.variant === 'light' ? '#ffffff' : '#333333';
 
 	const styles: Record<string, string> = {
@@ -315,7 +310,7 @@ const updatePosition = () => {
 	const position = calculateTooltipPosition(
 		activatorRect,
 		tooltipRect,
-		normalizedPlacement.value,
+		props.placement,
 		props.offset
 	);