<div id="elastic-toggle-demo">
  <neo-button role="button" tabindex="0" id="elastic-toggle-btn">Show details</neo-button>
  <neo-elastic>
    <div id="elastic-toggle-details" hidden>
      <p>The classic accordion case. While the inner is display:none the wrapper measures at zero height and the host shrinks all the way closed; on reveal it animates back to the natural content height.</p>
    </div>
  </neo-elastic>
  <script>
    (() => {
      const btn = document.getElementById('elastic-toggle-btn');
      const det = document.getElementById('elastic-toggle-details');
      btn.addEventListener('click', () => {
        const opening = det.hidden;
        det.hidden = !opening;
        btn.textContent = opening ? 'Hide details' : 'Show details';
      });
    })();

  </script>
</div>

package examples

import "github.com/romshark/morpheus/neo"

templ ElasticToggleReveal() {
	<div id="elastic-toggle-demo">
		@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
			"id": "elastic-toggle-btn",
		}) {
			Show details
		}
		@neo.Elastic(neo.ElasticOpts{}) {
			<div id="elastic-toggle-details" hidden>
				<p>
					The classic accordion case. While the inner is
					display:none the wrapper measures at zero height
					and the host shrinks all the way closed; on reveal
					it animates back to the natural content height.
				</p>
			</div>
		}
		<script>
			(() => {
				const btn = document.getElementById('elastic-toggle-btn');
				const det = document.getElementById('elastic-toggle-details');
				btn.addEventListener('click', () => {
					const opening = det.hidden;
					det.hidden = !opening;
					btn.textContent = opening ? 'Hide details' : 'Show details';
				});
			})();
		</script>
	</div>
}

<neo-layout
  column
  align-items="flex-start"
  gap="none"
  data-signals:elastic_count="2"
>
  <neo-layout align-items="center" gap="sm">
    <neo-buttongroup>
      <neo-button
        role="button"
        tabindex="0"
        aria-label="Remove an item"
        data-on:click="@post(&#39;/elastic/list/dec/&#39;, { requestCancellation: &#39;disabled&#39; })"
      >&minus;</neo-button>
      <neo-button
        role="button"
        tabindex="0"
        aria-label="Add an item"
        data-on:click="@post(&#39;/elastic/list/inc/&#39;, { requestCancellation: &#39;disabled&#39; })"
      >+</neo-button>
    </neo-buttongroup>
    <span>Items:&nbsp;<span data-text="$elastic_count">2</span></span>
  </neo-layout>
  <neo-elastic>
    <ul id="elastic-list"><li>First item</li><li>Second item</li></ul>
  </neo-elastic>
</neo-layout>

package examples

import "github.com/romshark/morpheus/neo"

templ ElasticGrowingList() {
	@neo.LayoutAttrs(
		neo.LayoutOpts{Direction: neo.Set(neo.Column), AlignItems: neo.Set(neo.AlignItemsFlexStart), Gap: neo.Set(neo.GapNone)},
		templ.Attributes{"data-signals:elastic_count": "2"},
	) {
		@neo.Layout(
			neo.LayoutOpts{AlignItems: neo.Set(neo.AlignItemsCenter), Gap: neo.Set(neo.GapSm)},
		) {
			@neo.ButtonGroup(neo.ButtonGroupOpts{}) {
				@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
					"data-on:click": "@post('/elastic/list/dec/', { requestCancellation: 'disabled' })",
					"aria-label":    "Remove an item",
				}) {
					−
				}
				@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
					"data-on:click": "@post('/elastic/list/inc/', { requestCancellation: 'disabled' })",
					"aria-label":    "Add an item",
				}) {
					+
				}
			}
			<span>Items:&nbsp;<span data-text="$elastic_count">2</span></span>
		}
		@neo.Elastic(neo.ElasticOpts{}) {
			<ul id="elastic-list">
				<li>First item</li>
				<li>Second item</li>
			</ul>
		}
	}
}

// Server handler for the "Growing list" example. Reads the current
// `$elastic_count` signal, clamps the new value to [0, 8], and emits
// both the updated signal and a morph patch for the `<ul>` body. Real
// production would do the same: tweak server state, send the new
// signal value and the re-rendered HTML fragment.

import sim from "/static/datasim.js";

const labels = [
	"First item", "Second item", "Third item", "Fourth item",
	"Fifth item", "Sixth item", "Seventh item", "Eighth item",
];

const escText = (str) =>
	String(str)
		.replace(/&/g, "&amp;")
		.replace(/</g, "&lt;")
		.replace(/>/g, "&gt;");

function renderList(count) {
	const items = labels.slice(0, count)
		.map(l => `<li>${escText(l)}</li>`)
		.join("");
	const baseStyle = "margin: 0.75rem 0 0; padding-left: 1.25rem;";
	const style = count === 0
		? `${baseStyle} display: none;`
		: baseStyle;
	return `<ul id="elastic-list" style="${style}">${items}</ul>`;
}

sim.post("/elastic/list/:dir/", async (ctx, sse) => {
	const dir = ctx.params.dir;
	const s = ctx.signals || {};
	let count = Number(s.elastic_count) || 0;
	if (dir === "inc") count = Math.min(8, count + 1);
	else if (dir === "dec") count = Math.max(0, count - 1);
	sse.patchSignals({ elastic_count: count });
	sse.patchElements(renderList(count));
});

<div data-signals:verbose="false">
  <neo-button role="button" tabindex="0" data-on:click="$verbose = !$verbose">
    <span data-text="$verbose ? 'Brief' : 'Verbose'">Verbose</span>
  </neo-button>
  <neo-elastic class="elastic-content-swap">
    <p data-show="!$verbose">Short summary: one sentence and out.</p>
    <div data-show="$verbose" class="elastic-content-swap-verbose">
      <p>The same container animates between wildly different content sizes.</p>
      <ul>
        <li>Each toggle reads the new natural height.</li>
        <li>Mid-animation interrupts retarget the latest height.</li>
        <li>Resizing the viewport reflows; ResizeObserver re-pins.</li>
      </ul>
    </div>
  </neo-elastic>
</div>

package examples

import "github.com/romshark/morpheus/neo"

templ ElasticContentSwap() {
	<div data-signals:verbose="false">
		@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
			"data-on:click": "$verbose = !$verbose",
		}) {
			<span data-text="$verbose ? 'Brief' : 'Verbose'">Verbose</span>
		}
		@neo.ElasticAttrs(neo.ElasticOpts{}, templ.Attributes{
			"class": "elastic-content-swap",
		}) {
			<p data-show="!$verbose">Short summary: one sentence and out.</p>
			<div data-show="$verbose" class="elastic-content-swap-verbose">
				<p>The same container animates between wildly different content sizes.</p>
				<ul>
					<li>Each toggle reads the new natural height.</li>
					<li>Mid-animation interrupts retarget the latest height.</li>
					<li>Resizing the viewport reflows; ResizeObserver re-pins.</li>
				</ul>
			</div>
		}
	</div>
}

.elastic-content-swap {
	max-width: 36rem;
}

.elastic-content-swap-verbose {
	display: none;
}

<neo-layout
  column
  align-items="flex-start"
  gap="none"
  data-signals:elastic_open="false"
>
  <neo-button
    role="button"
    tabindex="0"
    data-on:click="$elastic_open = !$elastic_open; if ($elastic_open) { @post(&#39;/elastic/async-load/&#39;, { requestCancellation: $elastic_load }) } else { $elastic_load.abort(); $elastic_load = new AbortController() }"
    data-signals:elastic_load="new AbortController()"
  >
    <span data-text="$elastic_open ? 'Collapse' : 'Load details'">Load details</span>
  </neo-button>
  <neo-elastic
    open="false"
    reset-on-collapse
    class="elastic-async-placeholder"
    data-attr:open="$elastic_open ? &#39;true&#39; : &#39;false&#39;"
  >
    <template data-neo-async-placeholder>
      <div id="elastic-async-content">
        <neo-skeleton
          immediate
          class="elastic-async-placeholder-line-1"
        ></neo-skeleton>
        <neo-skeleton
          immediate
          class="elastic-async-placeholder-line-2"
        ></neo-skeleton>
        <neo-skeleton
          immediate
          class="elastic-async-placeholder-line-3"
        ></neo-skeleton>
      </div>
    </template>
    <div id="elastic-async-content">
      <neo-skeleton
        immediate
        class="elastic-async-placeholder-line-1"
      ></neo-skeleton>
      <neo-skeleton
        immediate
        class="elastic-async-placeholder-line-2"
      ></neo-skeleton>
      <neo-skeleton
        immediate
        class="elastic-async-placeholder-line-3"
      ></neo-skeleton>
    </div>
  </neo-elastic>
</neo-layout>

package examples

import "github.com/romshark/morpheus/neo"

templ ElasticAsyncPlaceholder() {
	@neo.LayoutAttrs(
		neo.LayoutOpts{Direction: neo.Set(neo.Column), AlignItems: neo.Set(neo.AlignItemsFlexStart), Gap: neo.Set(neo.GapNone)},
		templ.Attributes{"data-signals:elastic_open": "false"},
	) {
		@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
			"data-signals:elastic_load": "new AbortController()",
			"data-on:click":             "$elastic_open = !$elastic_open; if ($elastic_open) { @post('/elastic/async-load/', { requestCancellation: $elastic_load }) } else { $elastic_load.abort(); $elastic_load = new AbortController() }",
		}) {
			<span data-text="$elastic_open ? 'Collapse' : 'Load details'">Load details</span>
		}
		@neo.ElasticAttrs(
			neo.ElasticOpts{Collapsed: neo.Set(true), ResetOnCollapse: neo.Set(true)},
			templ.Attributes{"data-attr:open": "$elastic_open ? 'true' : 'false'", "class": "elastic-async-placeholder"},
		) {
			<template { neo.AsyncPlaceholder()... }>
				<div id="elastic-async-content">
					<neo-skeleton immediate class="elastic-async-placeholder-line-1"></neo-skeleton>
					<neo-skeleton immediate class="elastic-async-placeholder-line-2"></neo-skeleton>
					<neo-skeleton immediate class="elastic-async-placeholder-line-3"></neo-skeleton>
				</div>
			</template>
			<div id="elastic-async-content">
				<neo-skeleton immediate class="elastic-async-placeholder-line-1"></neo-skeleton>
				<neo-skeleton immediate class="elastic-async-placeholder-line-2"></neo-skeleton>
				<neo-skeleton immediate class="elastic-async-placeholder-line-3"></neo-skeleton>
			</div>
		}
	}
}

.elastic-async-placeholder {
	max-width: 32rem;
}

.elastic-async-placeholder-line-1 {
	height: 0.9rem;
	width: 90%;
}

.elastic-async-placeholder-line-2 {
	height: 0.9rem;
	width: 72%;
}

.elastic-async-placeholder-line-3 {
	height: 0.9rem;
	width: 54%;
}

// Server handler for the "Async placeholder" example. Each open @posts
// here; after a delay the simulator morphs the loaded panel into
// #elastic-async-content, replacing the skeleton placeholder (match-by-id).
// No reset route: neo-elastic owns the <template data-neo-async-placeholder>
// slot and reinstates the skeleton after the collapse transition, so the
// next open loads fresh. Closing aborts any in-flight request so a late
// response can't overwrite the restored placeholder.

import sim from "/static/datasim.js";

const CONTENT =
	`<div id="elastic-async-content" style="padding-top: 0.75rem;">` +
		`<p style="margin: 0 0 0.5rem;">Build #4821 finished in 3m 12s. All 248 checks passed.</p>` +
		`<ul style="margin: 0; padding-left: 1.25rem; color: var(--muted);">` +
			`<li>frontend: bundled 1.2 MB, 0 type errors</li>` +
			`<li>backend: 96% coverage across 1,043 tests</li>` +
			`<li>deploy: promoted to staging at 14:07 UTC</li>` +
		`</ul>` +
	`</div>`;

sim.post("/elastic/async-load/", async (_ctx, sse) => {
	await sse.delay(900);
	sse.patchElements(CONTENT);
});