Accordion with plus/minus indicators

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "plus"/"minus") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

const items = [
  {
    value: "security",
    trigger: "Data Security",
    content:
      "We use industry-standard AES-256 encryption to protect your sensitive information at rest and in transit.",
  },
  {
    value: "integration",
    trigger: "API Integration",
    content: "Seamlessly connect with your favorite tools using our robust REST API and pre-built connectors.",
  },
  {
    value: "collaboration",
    trigger: "Team Collaboration",
    content: "Invite team members, assign roles, and work together in real-time on shared projects and documents.",
  },
]
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Accordion type="multiple" :default-value="['security']">
      <AccordionItem v-for="item in items" :key="item.value" :value="item.value">
        <AccordionTrigger class="hover:no-underline *:data-[slot=accordion-trigger-icon]:hidden">
          <span>{{ item.trigger }}</span>
          <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="text-muted-foreground ml-auto size-3.5 shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:hidden"
          >
            <path d="M5 12h14" />
            <path d="M12 5v14" />
          </svg>
          <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="text-muted-foreground ml-auto hidden size-3.5 shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:inline"
          >
            <path d="M5 12h14" />
          </svg>
        </AccordionTrigger>
        <AccordionContent>{{ item.content }}</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
</template>