Popover

popover.css

.popover {
  background-color: var(--color-bg);
  border-width: var(--border);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  inline-size: var(--popover-width, var(--size-72));
  margin-block: var(--size-1);
  padding: var(--size-4);

  /* Anchor position */
  inset-area: block-end;
  position-anchor: var(--popover-anchor);
  position-try-options: flip-block, flip-inline, flip-block flip-inline;

  /* Setup animation */
  opacity: 0;
  transform: var(--scale-95);
  transition-behavior: allow-discrete;
  transition-duration: var(--time-150);
  transition-property: display, overlay, opacity, transform;

  /* In animation */
  &:popover-open {
    opacity: 1; transform: var(--scale-100);
  }

  /* Out animation */
  @starting-style {
    &:popover-open {
      opacity: 0; transform: var(--scale-95);
    }
  }
}

.popover--bottom-start {
  inset-area: block-end span-inline-end;
}

.popover--bottom-end {
  inset-area: block-end span-inline-start;
}

.popover--top-center {
  inset-area: block-start;
}

.popover--top-start {
  inset-area: block-start span-inline-end;
}

.popover--top-end {
  inset-area: block-start span-inline-start;
}

popover.html

<button popovertarget="my_popover" class="btn btn--outline" style="anchor-name: --my-popover-toggle;">
  Open popover
</button>

<div popover id="my_popover" class="popover popover--bottom-start" style="--popover-anchor: --my-popover-toggle; --popover-width: 20rem;">
  <div class="grid gap">
      <div class="flex flex-col gap-sm">
        <h4 class="font-medium leading-none">Dimensions</h4>
        <p class="text-sm text-subtle">Set the dimensions for the layer.</p>
      </div>
      <div class="grid gap-sm">
        <div class="grid grid-cols-3 items-center gap">
          <label for="width" class="text-sm font-medium">Width</label>
          <input type="text" id="width" value="100%" class="input col-span-2" style="block-size: 2rem;" />
        </div>
        <div class="grid grid-cols-3 items-center gap">
          <label for="maxWidth" class="text-sm font-medium">Max. width</label>
          <input type="text" id="maxWidth" value="300px" class="input col-span-2" style="block-size: 2rem;" />
        </div>
        <div class="grid grid-cols-3 items-center gap">
          <label for="height" class="text-sm font-medium">Height</label>
          <input type="text" id="height" value="25px" class="input col-span-2" style="block-size: 2rem;" />
        </div>
        <div class="grid grid-cols-3 items-center gap">
          <label for="maxHeight" class="text-sm font-medium">Max. height</label>
          <input type="text" id="maxHeight" value="none" class="input col-span-2" style="block-size: 2rem;" />
        </div>
      </div>
    </div>
</div>