Segment Group experimental

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

  const modes = ['light', 'dark', 'system']
</script>

<div class="segment-demo">
  <SegmentGroup.Root defaultValue="light" orientation="horizontal">
    <SegmentGroup.Indicator />
    {#each modes as mode}
      <SegmentGroup.Item value={mode}>
        <SegmentGroup.ItemText>{mode}</SegmentGroup.ItemText>
        <SegmentGroup.ItemControl />
        <SegmentGroup.ItemHiddenInput />
      </SegmentGroup.Item>
    {/each}
  </SegmentGroup.Root>
</div>

<style>
  .segment-demo {
    display: grid;
    justify-items: center;
  }

  .segment-demo :global(.odbd-segment-group) {
    inline-size: fit-content;
  }
</style>