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

UIElement - minimal reactive framework based on Web Components

<todo-app>
	<form action="#">
		<input-field>
			<label for="add-todo">What needs to be done?</label>
			<div class="row">
				<div class="group auto">
					<input id="add-todo" type="text" value="" required>
				</div>
			</div>
		</input-field>
		<input-button class="submit">
			<button type="submit" class="constructive" disabled>Add Todo</button>
		</input-button>
	</form>
	<ol filter="all"></ol>
	<template>
		<li>
			<input-checkbox class="todo">
				<label>
					<input type="checkbox" class="visually-hidden" />
					<span class="label"><slot></slot></span>
				</label>
			</input-checkbox>
			<input-button class="delete">
				<button type="button" class="destructive small">Delete</button>
			</input-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>
		<input-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>
		</input-radiogroup>
		<input-button class="clear-completed">
			<button type="button" class="destructive">
				<span class="label">Clear Completed</span>
				<span class="badge"></span>
			</button>
		</input-button>
	</footer>
</todo-app>