fix(popover): arrow border is missing #8

Author: pimenovoleg

apps/origin-ui/src/registry/default/components/popovers/popover-09.ts

@@ -1,6 +1,4 @@
 import { Component, signal } from '@angular/core';
-import { OriButton } from '~/registry/default/ui/button';
-import { OriPopoverContent } from '~/registry/default/ui/popover';
 import { RdxPositionSide } from '@radix-ng/primitives/core';
 import {
     RdxPopoverAnchorDirective,
@@ -10,6 +8,8 @@ import {
     RdxPopoverTriggerDirective
 } from '@radix-ng/primitives/popover';
 import { Club, Diamond, Heart, LucideAngularModule, Spade } from 'lucide-angular';
+import { OriButton } from '~/registry/default/ui/button';
+import { OriPopoverContent } from '~/registry/default/ui/popover';
 
 interface TourStep {
     icon: any;
@@ -67,7 +67,7 @@ interface TourStep {
                                 </button>
                             </div>
                         </div>
-                        <div class="fill-popover -my-px drop-shadow-[0_1px_0_hsl(var(--border))]" rdxPopoverArrow></div>
+                        <div class="fill-popover -my-px drop-shadow-[0_1px_0_var(--border)]" rdxPopoverArrow></div>
                     </ori-popover-content>
                 </ng-template>
             </ng-container>

apps/origin-ui/src/registry/default/ui/popover.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, Directive, input } from '@angular/core';
-import { cn } from '~/registry/default/lib/utils';
 import { RdxTooltipTriggerDirective } from '@radix-ng/primitives/tooltip';
 import { cva } from 'class-variance-authority';
+import { cn } from '~/registry/default/lib/utils';
 
 @Directive({
     selector: '[oriPopoverTrigger]',
@@ -10,7 +10,7 @@ import { cva } from 'class-variance-authority';
 export class OriPopoverTriggerDirective {}
 
 const variants = cva(
-    'border-border bg-popover text-popover-foreground 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 z-50 max-h-[var(--radix-popover-content-available-height)] min-w-[8rem] rounded-lg border p-4 shadow-lg shadow-black/5 outline-none'
+    'bg-popover text-popover-foreground 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 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden'
 );
 
 @Component({

packages/components/popover/src/popover.ts

@@ -10,7 +10,7 @@ import { cva } from 'class-variance-authority';
 export class OriPopoverTriggerDirective {}
 
 const variants = cva(
-    'border-border bg-popover text-popover-foreground 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 z-50 max-h-[var(--radix-popover-content-available-height)] min-w-[8rem] rounded-lg border p-4 shadow-lg shadow-black/5 outline-none'
+    'bg-popover text-popover-foreground 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 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden'
 );
 
 @Component({