ToggleGroup experimental

<script lang="ts">
  import * as ToggleGroup from '@odbd/svelte/toggle-group'

  const views = [
    { value: 'list', label: '목록' },
    { value: 'board', label: '보드' },
    { value: 'calendar', label: '달력' },
  ]

  const filters = [
    { value: 'today', label: '오늘' },
    { value: 'blocked', label: '막힘' },
    { value: 'review', label: '검토' },
  ]
</script>

<div style="display: grid; max-width: 30rem; gap: 1rem;">
  <section style="display: grid; gap: 0.5rem;">
    <strong>업무 보기</strong>
    <ToggleGroup.Root defaultValue={['list']} aria-label="업무 보기">
      {#each views as view}
        <ToggleGroup.Item value={view.value}>{view.label}</ToggleGroup.Item>
      {/each}
    </ToggleGroup.Root>
  </section>

  <section style="display: grid; gap: 0.5rem;">
    <strong>상태 필터</strong>
    <ToggleGroup.Root multiple defaultValue={['today', 'review']} aria-label="상태 필터">
      {#each filters as filter}
        <ToggleGroup.Item value={filter.value}>{filter.label}</ToggleGroup.Item>
      {/each}
    </ToggleGroup.Root>
    <p style="margin: 0;">여러 상태를 함께 켜서 검토 범위를 좁히세요.</p>
  </section>
</div>