Popover

<script lang="ts">
  import Popper from './Popper.svelte'
</script>

<Popper title="Resize">
  <div class="flex flex-col space-y-2">
    <div class="flex flex-row gap-2">
      <label for="width">Width</label>
      <input
        type="number"
        id="width"
        name="width"
        min="0"
        max="100"
        value="50"
      />
    </div>
    <div class="flex flex-row gap-2">
      <label for="height">Height</label>
      <input
        type="number"
        id="height"
        name="height"
        min="0"
        max="100"
        value="50"
      />
    </div>
  </div>
</Popper>

<style lang="postcss">
  input {
    @apply w-full rounded bg-white px-2 py-1 text-sm shadow dark:bg-neutral-700 dark:text-neutral-100;
  }
</style>

<script lang="ts">
  import { createPopover } from 'louisette'

  export let title: string

  const { triggerAttrs, popoverAttrs, visible, position } = createPopover({
    placement: 'bottom',
  })
</script>

<button
  {...$triggerAttrs}
  class="mx-auto flex w-auto select-none items-center rounded-md border border-transparent bg-accent-500 px-4 py-2 text-base font-medium text-white shadow-sm transition duration-150 ease-in-out hover:bg-accent-400 focus:outline-none focus-visible:ring focus-visible:ring-accent-500 focus-visible:ring-opacity-50 active:bg-accent-700 active:shadow-inner"
>
  {title}
</button>

<div
  {...$popoverAttrs}
  class="absolute mt-2 w-full max-w-sm rounded bg-neutral-100 p-4 shadow dark:bg-neutral-900"
  class:hidden={!$visible}
  style:left={$position.x + 'px'}
  style:top={$position.y + 'px'}
>
  <slot />
</div>