Collapsible with checkbox settings

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

const settings = [
  { id: "push", label: "Push notifications", defaultChecked: true },
  { id: "email", label: "Email notifications", defaultChecked: false },
  { id: "sms", label: "SMS notifications", defaultChecked: false },
]
</script>

<template>
  <div class="h-40 w-full max-w-xs">
    <Collapsible class="flex flex-col gap-2" default-open>
      <CollapsibleTrigger as-child>
        <Button variant="outline" class="bg-background! w-full justify-start">
          <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-4 group-data-panel-open/button:rotate-90"
          >
            <path d="m9 18 6-6-6-6" />
          </svg>
          <span class="sr-only">Toggle notification settings</span>
          Notification settings
        </Button>
      </CollapsibleTrigger>

      <CollapsibleContent>
        <Card class="p-0">
          <FieldGroup class="gap-0 divide-y">
            <Field v-for="item in settings" :key="item.id">
              <FieldLabel class="px-3 py-2">
                <Checkbox :model-value="item.defaultChecked" />
                <FieldTitle>{{ item.label }}</FieldTitle>
              </FieldLabel>
            </Field>
          </FieldGroup>
        </Card>
      </CollapsibleContent>
    </Collapsible>
  </div>
</template>