Collapsible card with bottom trigger

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "chevron-down") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Progress } from "@/components/ui/progress"

const items = [
  { label: "Requests", value: "$210.84" },
  { label: "Active CPU", value: "$21.95" },
  { label: "Events", value: "$21.20" },
  { label: "Storage Usage", value: "$20.45" },
]
</script>

<template>
  <div class="h-72 w-full max-w-xs">
    <Collapsible class="relative">
      <Card>
        <CardHeader class="flex items-center justify-between">
          <CardTitle class="text-sm">3 days remaining in cycle</CardTitle>
          <CardAction>
            <Button variant="outline" size="sm">Billing</Button>
          </CardAction>
        </CardHeader>
        <CardContent class="space-y-4">
          <div class="bg-muted/60 border-border rounded-lg space-y-2 border p-3">
            <div class="flex justify-between text-sm font-medium">
              <span>$18.08 / $20</span>
              <span>$200</span>
            </div>
            <Progress :model-value="90" class="bg-primary/20 h-1.5" />
          </div>

          <CollapsibleContent class="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
            <div class="flex flex-col gap-2.5 pt-2">
              <div v-for="item in items" :key="item.label" class="flex justify-between text-xs">
                <span class="text-muted-foreground font-medium">{{ item.label }}</span>
                <span class="font-medium">{{ item.value }}</span>
              </div>
            </div>
          </CollapsibleContent>
        </CardContent>
      </Card>

      <div class="absolute -bottom-3.5 left-1/2 -translate-x-1/2">
        <CollapsibleTrigger as-child>
          <Button variant="outline" size="icon-sm" class="bg-background! rounded-full shadow-sm">
            <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"
              aria-hidden="true"
              class="size-3.5 transition-transform in-data-panel-open:rotate-180"
            >
              <path d="m6 9 6 6 6-6" />
            </svg>
            <span class="sr-only">Toggle details</span>
          </Button>
        </CollapsibleTrigger>
      </div>
    </Collapsible>
  </div>
</template>