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

UIElement - a HTML-first library for reactive Web Components

<module-catalog>
	<header>
		<p>Shop</p>
		<basic-button disabled>
			<button type="button" disabled>
				<span class="label">🛒 Shopping Cart</span>
				<span class="badge"></span>
			</button>
		</basic-button>
	</header>
	<ul>
		<li>
			<p>Product 1</p>
			<form-spinbutton
				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>
			</form-spinbutton>
		</li>
		<li>
			<p>Product 2</p>
			<form-spinbutton
				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>
			</form-spinbutton>
		</li>
		<li>
			<p>Product 3</p>
			<form-spinbutton
				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>
			</form-spinbutton>
		</li>
	</ul>
</module-catalog>