Popover

<button type="button" class="aura-btn aura-btn--secondary"
        aria-haspopup="dialog" aria-expanded="true" aria-controls="p1">Filters</button>

<div id="p1" role="dialog" aria-label="Filters" data-state="open" class="aura-popup aura-popover aura-card">
  <p class="aura-text aura-text--body">Anything can go here.</p>
</div>

import { Button, Popover, Stack, Typography } from '@ilomee/aura-react';

/**
 * Нажмите на триггер. Панель портализуется в `document.body` и позиционируется через `place()`: она
 * переворачивается, когда не влезает, и следует за прокруткой, а закрывается по Escape или по
 * нажатию где угодно, кроме себя и триггера.
 */
export default function Demo() {
  return (
    <Popover
      label="Filters"
      content={
        <Stack gap={2}>
          <Typography variant="h3">Filters</Typography>
          <Typography variant="body" tone="muted">
            Anything can go here — a popover holds things to interact with, which is the half a
            tooltip cannot have.
          </Typography>
        </Stack>
      }
    >
      <Button variant="secondary">Filters</Button>
    </Popover>
  );
}

<script setup lang="ts">
import { Popover, Button } from '@ilomee/aura-vue';
</script>

<template>
  <Popover label="Filters">
    <template #content><p>Anything can go here.</p></template>
    <Button variant="secondary">Filters</Button>
  </Popover>
</template>

<script lang="ts">
  import { Popover } from '@ilomee/aura-svelte';
</script>

<Popover label="Filters">
  {#snippet trigger(props)}
    <button type="button" class="aura-btn aura-btn--secondary" {...props}>Filters</button>
  {/snippet}
  <p>Anything can go here.</p>
</Popover>

<button auraButton variant="secondary" [auraPopover]="panel" label="Filters">Filters</button>
<ng-template #panel><p auraText>Anything can go here.</p></ng-template>