<script lang="ts"> export let area = ''; export let listTitle = 'List'; </script> <div class="container" style={'--area:' + area}> <div class="header"> {listTitle} </div> <div class="list"> <slot /> </div> </div> <style> .container { grid-area: var(--area); display: grid; grid-template-areas: 'list-header' 'list-content'; grid-template-rows: 2rem calc(100% - 2rem); grid-template-columns: 100%; min-height: none; max-height: 100%; } .header { grid-area: list-header; line-height: 2; font-weight: bold; text-align: center; border: 1px solid var(--color-text); } .list { grid-area: list-content; min-height: none; max-height: 100%; overflow: hidden; border: 1px solid var(--color-text); } </style>