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

UIElement - a HTML-first library for reactive Web Components

<module-todo>
	<form action="#">
		<form-textbox>
			<label for="add-todo">What needs to be done?</label>
			<div class="input">
				<input id="add-todo" type="text" value="" />
			</div>
		</form-textbox>
		<basic-button class="submit">
			<button type="submit" class="constructive" disabled>
				Add Todo
			</button>
		</basic-button>
	</form>
	<ol filter="all"></ol>
	<template>
		<li>
			<form-checkbox class="todo">
				<label>
					<input type="checkbox" class="visually-hidden" />
					<span class="label"><slot></slot></span>
				</label>
			</form-checkbox>
			<basic-button class="delete">
				<button type="button" class="destructive small">Delete</button>
			</basic-button>
		</li>
	</template>
	<footer>
		<div class="todo-count">
			<p class="all-done">Well done, all done!</p>
			<p class="remaining">
				<span class="count"></span>
				<span class="singular">task</span>
				<span class="plural">tasks</span>
				remaining
			</p>
		</div>
		<form-radiogroup value="all" class="split-button">
			<fieldset>
				<legend class="visually-hidden">Filter</legend>
				<label class="selected">
					<input
						type="radio"
						class="visually-hidden"
						name="filter"
						value="all"
						checked
					/>
					<span>All</span>
				</label>
				<label>
					<input
						type="radio"
						class="visually-hidden"
						name="filter"
						value="active"
					/>
					<span>Active</span>
				</label>
				<label>
					<input
						type="radio"
						class="visually-hidden"
						name="filter"
						value="completed"
					/>
					<span>Completed</span>
				</label>
			</fieldset>
		</form-radiogroup>
		<basic-button class="clear-completed">
			<button type="button" class="destructive">
				<span class="label">Clear Completed</span>
				<span class="badge"></span>
			</button>
		</basic-button>
	</footer>
</module-todo>