Dropdown with vanilla CSS transition

GridCollapsible.svelte

<script lang="ts">
  export let open = false;
  let cls ='';
  export { cls as class };
</script>

<div class="grid-collapsible {cls}" data-open={open.toString()}>
  <div class="grid-collapsible-content">
    <slot />
  </div>
</div>

<style lang="postcss">
  .grid-collapsible {
    --transition-duration: 250ms;
    --template-rows-transition: grid-template-rows var(--transition-duration) ease-out;

    display: grid;
    grid-template-rows: 0fr;
    transition: var(--template-rows-transition) box-shadow 1ms var(--transition-duration);

    &[data-open="true"] {
      grid-template-rows: 1fr;
      transition: var(--template-rows-transition);
    }
  }

  .grid-collapsible-content {
    overflow: hidden;
  }
</style>

SingleSelect.svelte

<script context="module" lang="ts">
  type SingleSelectBaseOption = string | { label: string; value: string };
</script>

<script lang='ts' generics="T extends SingleSelectBaseOption">
  import { GridCollapsible } from '$client/components/grid-collapsible';


  // eslint-disable-next-line no-undef
  type Option = T;

  export let options: Option[];

</script>

<GridCollapsible>
  
</GridCollapsible>