Template With State

Combine sv-template with per-instance sv-ui-state stores. Template props and reactive stores can share a binding.
Order:

Code

The following example assumes that you have imported the component and set up the theme.
<sv-template id="order-item">
  <template>
    <sv-ui-state>
      <!-- Per-instance state -->
      <sv-store type="number" name="$qty" value="1"></sv-store>

      <!-- Template script: runs on every instance -->
      <script type="module">
        const { refs, props, onDisconnect } = TemplateHost;
        const { $qty } = TemplateHost.querySelector("sv-ui-state").stores;

        const onInputHandler = e => {
          const value = e.target.valueAsNumber;
          if (!Number.isFinite(value)) return;

          const newValue = Math.min(Math.max(value, 1), props.max);
          $qty.set(newValue);
          e.target.value = newValue;
        };

        refs.input.addEventListener("input", onInputHandler);

        onDisconnect(() => {
          refs.input.removeEventListener("input", onInputHandler);
        });
      </script>

      <!-- Template markup -->
      <div class="item">
        <div class="item-details">
          <span class="item-name">[[ name ]]</span>
          <span class="item-meta">$[[ price ]] per [[ unit ]]</span>
        </div>

        <div class="item-stepper">
          <button type="button" class="step-btn" bind-attr-toggle="disabled:$qty == 1" bind-event="click:$qty($qty - 1)">
            −
          </button>
          <input
            type="number"
            class="item-input"
            bind-prop="value:$qty"
            max="[[ max ]]"
            min="1"
            name="quantity"
            template-ref="input"
          />
          <span class="item-qty" bind-text="'[[ unit.toUpperCase() ]]' + ($qty > 1 ? 's' : '') "></span>
          <button type="button" class="step-btn" bind-attr-toggle="disabled:$qty >= [[ max ]]" bind-event="click:$qty($qty + 1)">
            +
          </button>
        </div>

        <span class="item-total" bind-text="'$' + $qty * [[ price ]]"></span>
      </div>
    </sv-ui-state>
  </template>

  <!-- Scoped style -->
84 collapsed lines
  <style>
    .item {
      display: flex;
      gap: 1rem;
      align-items: center;
      padding: 0.75rem 1rem;
      background-color: var(--sb-color-gray-6);
      border: 1px solid var(--sb-color-gray-5);
      border-radius: 0.5rem;
    }

    .item-stepper {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      padding: 0.25rem;
      background: var(--sb-color-gray-6);
      border-radius: 0.375rem;
    }

    .item-input {
      inline-size: 3rem;
      padding: 0.25rem;
      font-size: var(--sb-text-base);
      color: var(--sb-color-text);
      text-align: center;
      background: var(--sb-color-gray-5);
      border: none;
      border-radius: 0.25rem;
    }

    .item-details {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 0.15rem;
    }

    .item-name {
      font-size: var(--sb-text-sm);
      font-weight: 600;
      color: var(--sb-heading-color);
    }

    .item-meta {
      font-size: var(--sb-text-2xs);
      color: var(--sb-color-gray-4);
    }

    .step-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 1.5rem;
      block-size: 1.5rem;
      font-size: var(--sb-text-base);
      color: var(--sb-color-text);
      cursor: pointer;
      background: var(--sb-color-black);
      border: none;
      border-radius: 0.25rem;

      &:disabled {
        cursor: not-allowed;
        opacity: 0.35;
      }
    }

    .item-qty {
      min-inline-size: 2.5rem;
      font-size: var(--sb-text-xs);
      font-weight: 600;
      color: var(--sb-color-text);
      text-align: center;
    }

    .item-total {
      min-inline-size: 2.5rem;
      font-size: var(--sb-text-sm);
      font-weight: 600;
      color: var(--sb-color-accent-high);
      text-align: end;
    }
  </style>
</sv-template>

<h3 style="margin-block-start: 0.5em">Order:</h3>

<!-- Use and render the template -->
<div class="order-list">
  <sv-template prop-max:json="10" prop-name="Apples" prop-price:json="2" prop-unit="kg" use="order-item"></sv-template>
  <sv-template prop-max:json="5" prop-name="Bread" prop-price:json="3" prop-unit="loaf" use="order-item"></sv-template>
  <sv-template prop-max:json="3" prop-name="Coffee" prop-price:json="12" prop-unit="bag" use="order-item"></sv-template>
</div>

8 collapsed lines
<style>
  .order-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-block-start: 1em;
  }
</style>