From 57a13698c05a1f815b9bcc3707303502c372ffbd Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 24 Aug 2026 23:51:39 +0800
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D1=81?=
 =?UTF-8?q?=D1=82=D0=B8=20popover=20=D0=BD=D0=B0=20=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B:=20=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D0=B5=D0=BB=D0=BA=D0=B0=20=D0=B8=D0=B7=20=D1=82?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=B5=D0=BD=D0=BE=D0=B2,=20=D0=BF=D1=80=D0=B8?=
 =?UTF-8?q?=D0=BC=D0=B5=D1=80=D1=8B=20=D0=B1=D0=B5=D0=B7=20appendTo=20self?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prime-preset/tokens/components/popover.ts    | 16 +++++++++-------
 .../popover/examples/popover-basic.component.ts  |  4 ++--
 .../examples/popover-rich-content.component.ts   |  4 ++--
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/lib/providers/prime-preset/tokens/components/popover.ts b/src/lib/providers/prime-preset/tokens/components/popover.ts
index 296010d9..9b4cbd1e 100644
--- a/src/lib/providers/prime-preset/tokens/components/popover.ts
+++ b/src/lib/providers/prime-preset/tokens/components/popover.ts
@@ -1,10 +1,12 @@
 export const popoverCss = ({ dt }: { dt: (token: string) => string }): string => `
-  .p-popover.p-component::before {
-    border-width: 0.73rem;
-    margin-left: -0.86rem;
-  }
+.p-popover.p-component::before {
+  border-width: ${dt('popover.extend.arrow.height')} calc(${dt('popover.extend.arrow.width')} / 2);
+  margin-left: calc(-1 * ${dt('popover.extend.arrow.width')} / 2);
+}
 
-  .p-popover.p-component::after {
-    margin-left: calc(-1 * ${dt('popover.extend.arrow.width')});
-  }
+.p-popover.p-component::after {
+  border-width: calc(${dt('popover.extend.arrow.height')} - ${dt('popover.extend.borderWidth')})
+    calc(${dt('popover.extend.arrow.width')} / 2 - ${dt('popover.extend.borderWidth')});
+  margin-left: calc(-1 * (${dt('popover.extend.arrow.width')} / 2 - ${dt('popover.extend.borderWidth')}));
+}
 `;
diff --git a/src/stories/components/popover/examples/popover-basic.component.ts b/src/stories/components/popover/examples/popover-basic.component.ts
index 33c887dd..bf047444 100644
--- a/src/stories/components/popover/examples/popover-basic.component.ts
+++ b/src/stories/components/popover/examples/popover-basic.component.ts
@@ -7,7 +7,7 @@ const template = `
 <div class="min-h-[200px]">
   <div class="relative inline-block">
     <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
-    <extra-popover #popover appendTo="self">
+    <extra-popover #popover>
       <p>Содержимое popover.</p>
     </extra-popover>
   </div>
@@ -46,7 +46,7 @@ import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
   imports: [ExtraPopoverComponent, ExtraButtonComponent],
   template: \`
     <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
-    <extra-popover #popover appendTo="self">
+    <extra-popover #popover>
       <p>Содержимое popover.</p>
     </extra-popover>
   \`,
diff --git a/src/stories/components/popover/examples/popover-rich-content.component.ts b/src/stories/components/popover/examples/popover-rich-content.component.ts
index 63d0dfb4..118e6a81 100644
--- a/src/stories/components/popover/examples/popover-rich-content.component.ts
+++ b/src/stories/components/popover/examples/popover-rich-content.component.ts
@@ -7,7 +7,7 @@ const template = `
 <div class="min-h-[250px]">
   <div class="relative inline-block">
     <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
-    <extra-popover #popover appendTo="self">
+    <extra-popover #popover>
       <div class="flex flex-col gap-2">
         <span class="font-semibold">Заголовок</span>
         <p class="text-sm text-secondary">Дополнительное описание или любой произвольный контент внутри popover.</p>
@@ -49,7 +49,7 @@ import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
   imports: [ExtraPopoverComponent, ExtraButtonComponent],
   template: \`
     <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
-    <extra-popover #popover appendTo="self">
+    <extra-popover #popover>
       <div class="flex flex-col gap-2">
         <span class="font-semibold">Заголовок</span>
         <p class="text-sm text-secondary">Дополнительное описание или любой произвольный контент внутри popover.</p>