module-catalog.html html

<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>

module-catalog.css css

module-catalog {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);

	> header,
	p {
		margin: 0;
	}

	& ul {
		padding: 0;
		margin: 0;
	}

	& header,
	li {
		display: flex;
		gap: var(--space-m);
		justify-content: space-between;
	}
}

module-catalog.ts ts

import { component, pass, reduced } from '../../..'

export default component('module-catalog', {}, (el, { first }) => {
	const total = reduced(
		el,
		'form-spinbutton',
		(sum, item) => sum + item.value,
		0,
	)

	return [
		first(
			'basic-button',
			pass({
				badge: () => (total.get() > 0 ? String(total.get()) : ''),
				disabled: () => !total.get(),
			}),
		),
	]
})