<script setup lang="ts">
withDefaults(defineProps<{ title:string; description?:string; labelledBy?:string }>(), { description:'' })
</script>
<template>
  <section class="kbx-section" :aria-labelledby="labelledBy">
    <header class="kbx-section__header">
      <h2 :id="labelledBy">{{ title }}</h2>
      <p v-if="description">{{description}}</p>
      <div v-if="$slots.actions" class="kbx-section__actions"><slot name="actions" /></div>
    </header>
    <div class="kbx-section__content"><slot /></div>
  </section>
</template>
<style scoped>
.kbx-section{display:flex;flex-direction:column;gap:var(--kbx-form-section-heading-gap);margin-bottom:var(--kbx-form-section-gap)}.kbx-section__header{min-height:var(--kbx-control-xs);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--kbx-space-2);padding-bottom:var(--kbx-form-section-heading-padding);border-bottom:var(--kbx-border-width) solid var(--kbx-color-border)}.kbx-section h2{margin:0;font-size:var(--kbx-font-lg);font-weight:600}.kbx-section p{grid-column:1;margin:0;color:var(--kbx-color-text-muted);font-size:var(--kbx-font-xs)}.kbx-section__actions{grid-column:2;grid-row:1/-1;display:flex;align-items:center;gap:var(--kbx-space-1)}.kbx-section__content{min-width:0}
</style>
