From e586d7d704d475afe3373a1de6ae20d504f79d6d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 5 Jun 2025 14:25:23 +0000
Subject: Sync from a8e1c0a7402940e0fc5beef669522b315052df1b

---
 examples/hackernews/src/components/Toggle.astro | 78 +++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 examples/hackernews/src/components/Toggle.astro

(limited to 'examples/hackernews/src/components/Toggle.astro')

diff --git a/examples/hackernews/src/components/Toggle.astro b/examples/hackernews/src/components/Toggle.astro
new file mode 100644
index 000000000..799fca08c
--- /dev/null
+++ b/examples/hackernews/src/components/Toggle.astro
@@ -0,0 +1,78 @@
+---
+interface Props {
+	open?: boolean;
+}
+
+const { open = false } = Astro.props;
+---
+
+<hn-toggle open={open ? '' : undefined}>
+	<div class="toggle">
+		<a>{open ? '[-]' : '[+] comments collapsed'}</a>
+	</div>
+	<ul class="comment-children">
+		<slot />
+	</ul>
+</hn-toggle>
+
+<style>
+	hn-toggle[open] > .toggle {
+		padding: 0;
+		background-color: transparent;
+		margin-bottom: -0.5em;
+	}
+
+	hn-toggle:not([open]) > .toggle {
+		background-color: rgb(255 247 237);
+	}
+	hn-toggle:not([open]) ul {
+		display: none;
+	}
+
+	.toggle {
+		font-size: 0.9em;
+		margin: 1em 0;
+		padding: 0.3em 0.5em;
+		border-radius: 4px;
+	}
+
+	a {
+		color: rgb(51 65 85);
+		cursor: pointer;
+	}
+</style>
+
+<script>
+	class HnToggle extends HTMLElement {
+		#btn = this.querySelector<HTMLAnchorElement>('a')!;
+		#toggleOpen = this.toggleOpen.bind(this);
+
+		connectedCallback() {
+			this.#btn.addEventListener('click', this.#toggleOpen, false);
+		}
+
+		disconnectedCallback() {
+			this.#btn.addEventListener('click', this.#toggleOpen);
+		}
+
+		get open() {
+			return this.hasAttribute('open');
+		}
+
+		set open(value: boolean) {
+			if (value) {
+				this.setAttribute('open', '');
+				this.#btn.textContent = '[-]';
+			} else {
+				this.removeAttribute('open');
+				this.#btn.textContent = '[+] comments collapsed';
+			}
+		}
+
+		toggleOpen() {
+			this.open = !this.open;
+		}
+	}
+
+	customElements.define('hn-toggle', HnToggle);
+</script>
-- 
cgit v1.2.3