webawesome/docs/docs/components/reference.njk

---
title: Component Reference
layout: docs
---

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

<wa-input type=search label="Filter by name:" clearable id="name_search"></wa-input>
<script>
{
	let url = new URL(location);
	if (url.searchParams.get("name")) {
		name_search.value = url.searchParams.get("name");
	}
}
</script>
<script type=module>
	let url = new URL(location);
	let pushedURL = false;

	function filterByName (value) {
		let previousFilter = url.searchParams.get("name") || "";
		url = new URL(location);

		if (value) {
			for (let th of document.querySelectorAll("table tbody th:first-child")) {
				let tr = th.parentNode;
				tr.toggleAttribute("hidden", !th.textContent.includes(value));
			}
			url.searchParams.set("name", value);
		}
		else {
			for (let tr of document.querySelectorAll("table tbody tr[hidden]")) {
				tr.removeAttribute("hidden");
			}
			url.searchParams.delete("name");
		}

		if (value !== previousFilter) {
			history[pushedURL ? "replaceState" : "pushState"](null, "", url);
		}

		// Update heading counts
		for (let h2 of document.querySelectorAll("h2:has(+ table)")) {
			let count = h2.querySelector(".count");
			if (!count) continue;
			let table = h2.nextElementSibling;
			let visibleRows = table.querySelectorAll("tbody tr:not([hidden])").length;
			count.textContent = visibleRows;
			let outlineLink = document.querySelector(`#outline-standard a[href="#${ h2.id }"]`);
			if (outlineLink) {
				// Why not just = h2.textContent? To skip the "Jump to heading" link
				outlineLink.textContent = "";
				outlineLink.append(...[...h2.childNodes].slice(0, 3).map(n => n.cloneNode(true)));
			}
		}
	}

	if (name_search.value) {
		filterByName(name_search.value);
	}

	name_search.addEventListener("wa-input", e => filterByName(e.target.value));
</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>
			{% if thingComponents.length > 1 %}
				<details open>
					<summary><strong>{{ thingComponents.length }}</strong> components</summary>
			{% endif %}
			{% for component in thingComponents  %}
				<a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
			{%- endfor -%}
			{% if thingComponents.length > 1 %}
				</details>
			{% endif %}
		</td>
	</tr>
	{%- endfor %}
</table>

{%- endfor %}