Number Input experimental

<script lang="ts">
  import * as NumberInput from '@odbd/svelte/number-input'
</script>

<NumberInput.Root defaultValue="2" min={1} max={99} class="number-input-demo">
  <div class="number-input-demo__head">
    <NumberInput.Label>수량</NumberInput.Label>
    <NumberInput.ValueText />
  </div>
  <div class="number-input-demo__row">
    <NumberInput.Control>
      <NumberInput.DecrementTrigger aria-label="수량 줄이기">−</NumberInput.DecrementTrigger>
      <NumberInput.Input />
      <NumberInput.IncrementTrigger aria-label="수량 늘리기">+</NumberInput.IncrementTrigger>
    </NumberInput.Control>
    <NumberInput.Scrubber aria-label="수량 조절">↔</NumberInput.Scrubber>
  </div>
</NumberInput.Root>

<style>
  :global(.number-input-demo.odbd-number-input) {
    max-width: 16rem;
  }

  .number-input-demo__head {
    display: flex;
    align-items: baseline;
    gap: var(--odbd-space-2);
  }

  .number-input-demo__head :global(.odbd-number-input__value-text) {
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }

  .number-input-demo__row {
    display: flex;
    align-items: stretch;
    gap: var(--odbd-space-2);
  }

  .number-input-demo__row :global(.odbd-number-input__control) {
    flex: 1 1 auto;
  }
</style>