---
title: Component Cheatsheet
layout: docs
unlisted: true
---

<style>
table code {
	white-space: nowrap;
}
</style>

<p>
	This page lists every bit of syntax used by every Web Awesome component and which components share it.
	For these times when your memory is failing, or to simply explore the possibilities!
</p>

<fieldset id="name_search_group">
	<legend>Filter by name</legend>
	<wa-input type=search clearable id="name_search"></wa-input>
	<wa-checkbox id="name_search_i" checked>Case sensitive</wa-checkbox>
	<wa-checkbox id="name_search_regexp">Regular expression</wa-checkbox>
</fieldset>

<script>
{
	let url = new URL(location);
	if (url.searchParams.get("name")) {
		name_search.value = url.searchParams.get("name");
	}

	if (url.searchParams.get("match")) {
		let matcherId = url.searchParams.get("match");
		let caseSensitive = !matcherId.startsWith("i");
		let isRegexp = matcherId.endsWith("regexp");

		customElements.whenDefined("wa-checkbox").then(async () => {
			await Promise.all([
				name_search_i.updateComplete,
				name_search_regexp.updateComplete,
			]);
			name_search_i.checked = caseSensitive;
			name_search_regexp.checked = isRegexp;
		});
	}
}
</script>
<script type="module" src="./cheatsheet.js"></script>

{% for type, all in componentsBy -%}
{% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %}
<h2 id="{{ typeTitle | slugify }}">
	All <span class="count">{{ (all | keys).length }}</span>
	{{ typeTitle }}
</h2>

<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Components</th>
		</tr>
	</thead>
	{% for name, thingComponents in all -%}
	<tr>
		<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
		<td>
      {% set componentLinks = [] %}
			{% for component in thingComponents  %}
			  {%- set link -%}
				  <a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
				{%- endset -%}
				{# https://giuliachiola.dev/posts/add-items-to-an-array-in-nunjucks/ #}
        {% set componentLinks = (componentLinks.push(link), componentLinks) %}
			{%- endfor -%}
			{% if thingComponents.length > 1 %}
				<details open>
					<summary><strong>{{ thingComponents.length }}</strong> components</summary>
					{{ componentLinks | safe }}
				</details>
			{% else %}
				{{ componentLinks | safe }}
			{% endif %}
		</td>
	</tr>
	{%- endfor %}
</table>

{%- endfor %}
