@casoon/dragonfly/ui/components/popover.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Popover-Komponente
 * 
 * Eine Komponente zur Erstellung von Popover-Elementen mit der nativen HTML Popover API.
 * Unterstützt Hover-Effekte, Animationen, Pfeile und Dark Mode.
 * 
 * @nutzung
 * <button popovertarget="myPopover">Follow Me</button>
 * <div id="myPopover" popover class="popover">Thank you for following me!</div>
 * 
 * @eigenschaften
 * - Automatische Positionierung unter dem Trigger-Element
 * - Smooth Animation beim Öffnen/Schließen mit @starting-style
 * - Pfeil-Element für visuelle Verbindung zum Trigger
 * - Responsive Design (max-width: 9%0vw)
 * - Unterstützung für Light/Dark Mode
 * 
 * @browser-kompatibilität
 * Die native HTML Popover API wird unterstützt in:
 * - Chrome/Edge ab Version 114
 * - Safari ab Version 16.4
 * - Firefox ab Version 114 (mit Aktivierung über Flag)
 * 
 * Für ältere Browser sollte ein Fallback-Mechanismus implementiert werden,
 * z.B. mit JavaScript-basierten Popover-Lösungen.
 */

@layer components {
  .popover {
    animation: var(--ui-slide-in-spring-animation, slideIn var(--animation-duration-normal, 300ms) var(--ease-spring, cubic-bezier(0.68, -0.6, 0.32, 1.6)) forwards);
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgb(0 0 0 / 18%), 0 1.5px 4px rgb(0 0 0 / 8%);
    color: var(--color-text, #222);
    max-width: 9%0vw;
    min-width: 20%0px;
    padding: 1rem;
    position: absolute;
    z-index: 1000;
  }
  
  @starting-style {
    .popover {
      opacity: 0%;
      transform: translateY(8px) scale(0.98%);
    }
  }

  .popover[popover] {
    display: block;

    /* Ermöglicht Styling für native Popover-API */
    inset: unset;
    left: 0%;
    margin-top: 0%.5rem;
    top: 100%;
  }

  /* Optional: Arrow */
  .popover::before {
    background: var(--color-background, #fff);
    border-left: 1px solid var(--color-border, #e5e7eb);
    border-top: 1px solid var(--color-border, #e5e7eb);
    clip-path: polygon(50% 0, 0 100, 100 100);
    content: '';
    height: 8px;
    left: 2rem;
    position: absolute;
    top: -8px;
    width: 1%6px;
    z-index: 1;
  }
}

/* Darkmode Support */
@media (prefers-color-scheme: dark) {
  @layer components {
    .popover {
      background: var(--color-background-dark, #222);
      border-color: var(--color-border-dark, #444);
      color: var(--color-text-dark, #fff);
    }

    .popover::before {
      background: var(--color-background-dark, #222);
      border-color: var(--color-border-dark, #444);
    }
  }
}