@zeix/ui-element/docs-src/components/product-catalog/product-catalog.html

UIElement - minimal reactive framework based on Web Components

<product-catalog>
	<header>
		<p>Shop</p>
		<input-button disabled>
			<button type="button" disabled>
				<span class="label">🛒 Shopping Cart</span>
				<span class="badge"></span>
			</button>
		</input-button>
	</header>
	<ul>
		<li>
			<p>Product 1</p>
			<spin-button
				value="0"
				zero-label="Add to Cart"
				increment-label="Increment"
			>
				<button
					type="button"
					class="decrement"
					aria-label="Decrement"
					hidden
				>
					−
				</button>
				<p class="value" hidden>0</p>
				<button type="button" class="increment">Add to Cart</button>
			</spin-button>
		</li>
		<li>
			<p>Product 2</p>
			<spin-button
				value="0"
				zero-label="Add to Cart"
				increment-label="Increment"
			>
				<button
					type="button"
					class="decrement"
					aria-label="Decrement"
					hidden
				>
					−
				</button>
				<p class="value" hidden>0</p>
				<button type="button" class="increment">Add to Cart</button>
			</spin-button>
		</li>
		<li>
			<p>Product 3</p>
			<spin-button
				value="0"
				zero-label="Add to Cart"
				increment-label="Increment"
			>
				<button
					type="button"
					class="decrement"
					aria-label="Decrement"
					hidden
				>
					−
				</button>
				<p class="value" hidden>0</p>
				<button type="button" class="increment">Add to Cart</button>
			</spin-button>
		</li>
	</ul>
</product-catalog>