<div class="select-menu">
  <button popovertarget=listbox>
    Select option
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
    </svg>
  </button>
  <div popover=auto id=listbox>
    <option>A</option>
    <option>Styled</option>
    <option>Select?</option>
  </div>
</div>

@layer demo {
  [popovertarget] {
    anchor-name: --select-button;
    display: flex;
    gap: var(--size-2);
    align-items: center;
    padding: var(--size-2) var(--size-4);
    box-shadow: var(--shadow-5);
    background: var(--surface-1);
  }
  .select-menu:has(:open) svg {
    rotate: 180deg;
  }
  option:hover {
    background: var(--surface-4);
  }
  svg {
    width: var(--size-4);
    transition: rotate 0.2s;
  }
  [popover] {
    anchor-default: --select-button;
    top: anchor(bottom);
    width: anchor-size(width);
    left: anchor(left);
    background: var(--surface-1);
  }
  .select-menu {
    color: var(--text-1);
  }
}

* {
  box-sizing: border-box;
}

:root {
}

:where(html) {
  background-color: transparent;
  color-scheme: none;
}

body {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  background-color: var(--surface-2);
}