{#
    Quantity Stepper Component

    Parameters:
    - id: (string) Input ID
    - name: (string) Input name for form submission
    - value: (number) Current value (default: 1)
    - min: (number) Minimum value (default: 1)
    - max: (number) Maximum value (default: 9999)
    - step: (number) Increment/decrement step (default: 1)
    - class: (string) Additional CSS classes for the container
#}
<div class="qty-stepper {{ class|default('') }}"
     data-controller="quantity-stepper"
     data-quantity-stepper-min-value="{{ min|default(1) }}"
     data-quantity-stepper-max-value="{{ max|default(9999) }}"
     data-quantity-stepper-step-value="{{ step|default(1) }}">
    <button type="button" data-action="click->quantity-stepper#decrement">
        <i class="bi bi-dash"></i>
    </button>
    <input type="number"
           id="{{ id|default('') }}"
           name="{{ name|default('') }}"
           value="{{ value|default(1) }}"
           min="{{ min|default(1) }}"
           max="{{ max|default(9999) }}"
           step="{{ step|default(1) }}"
           class="item-qty"
           data-quantity-stepper-target="input"
           data-action="input->quantity-stepper#onInput">
    <button type="button" data-action="click->quantity-stepper#increment">
        <i class="bi bi-plus"></i>
    </button>
</div>