Input group with popover trigger addon

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "shield-check") — см. docs/PORTING.md §5.
  Плавающий слой (`PopoverContent`) не раскрывается в кейсе.
-->
<script setup lang="ts">
import { Field } from "@/components/ui/field"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/popover"
</script>

<template>
  <Field class="max-w-xs">
    <InputGroup class="gap-0">
      <InputGroupAddon>
        <Popover>
          <PopoverTrigger as-child>
            <InputGroupButton variant="ghost" size="icon-xs" class="cursor-help">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-shield-check text-emerald-500"
              >
                <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
                <path d="m9 12 2 2 4-4" />
              </svg>
            </InputGroupButton>
          </PopoverTrigger>
          <PopoverContent align="start" class="w-72">
            <PopoverHeader>
              <PopoverTitle>Secure Connection</PopoverTitle>
              <PopoverDescription>
                Your data is encrypted end-to-end using industry-standard protocols.
              </PopoverDescription>
            </PopoverHeader>
          </PopoverContent>
        </Popover>
      </InputGroupAddon>
      <InputGroupInput value="https://reui.com" class="pl-0.5!" readonly />
    </InputGroup>
  </Field>
</template>