Editing User:Eviand/TemplateTesting (section)

== Universal Popups v3 — Full Testbed (Sectioned) ==

=== 1) Notes (Small Hover) — Bullet List ===
<div class="sv-tip">
<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Info" aria-controls="sv-tb-notes-1" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
<div class="sv-tip-pop sv-hidden" id="sv-tb-notes-1" role="dialog" aria-label="Info">
<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Info</div></div>
<div class="sv-tip-pop-body">
* Bullet line one (wrap test for compact width).
* Bullet line two with a longer phrase to force vertical growth.
</div>
</div>
</div>

=== 2) Notes (Small Hover) — Single Sentence ===
<div class="sv-tip">
<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Notes" aria-controls="sv-tb-notes-2" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
<div class="sv-tip-pop sv-hidden" id="sv-tb-notes-2" role="dialog" aria-label="Notes">
<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Notes</div></div>
<div class="sv-tip-pop-body">
A short single-line note that should wrap early and grow vertically.
</div>
</div>
</div>

=== 3) Notes (Small Hover) — Two Paragraphs ===
<div class="sv-tip">
<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Details" aria-controls="sv-tb-notes-3" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
<div class="sv-tip-pop sv-hidden" id="sv-tb-notes-3" role="dialog" aria-label="Details">
<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Details</div></div>
<div class="sv-tip-pop-body">
First paragraph for spacing checks.
Second paragraph for spacing checks (should not add huge margins).
</div>
</div>
</div>

=== 4) Definition (Small Hover) — No Link, 2 Lines ===
<span class="sv-def" tabindex="0" data-sv-def-tip="Hover-only definition.\nSecond line test for newline rendering.">Ground Cast (no link)</span>

=== 5) Definition (Small Hover) — No Link, Long Wrap ===
<span class="sv-def" tabindex="0" data-sv-def-tip="This is a longer definition tooltip meant to wrap quickly to validate narrow width behavior and vertical growth.">Piercing (no link)</span>

=== 6) Users (Large Click) — Grouped List ===
<div class="sv-disclose">
<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Users" aria-controls="sv-tb-users-1" aria-expanded="false"><span class="sv-disclose-label">Users</span><span class="sv-disclose-count">(6)</span></span>
<div class="sv-disclose-pop sv-hidden" id="sv-tb-users-1" role="dialog" aria-label="Users">
<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Users</div></div>
<ul class="sv-disclose-list">
<li class="sv-disclose-group-title">Classes</li>
<li>Paladin</li>
<li>Cleric</li>
<li>Templar</li>
<li class="sv-disclose-group-title">Summons</li>
<li>Turtle Champion</li>
<li>Celestial Squire</li>
<li>Holy Sentinel</li>
</ul>
</div>
</div>

=== 7) Requirements (Large Click) — Simple List ===
<div class="sv-disclose">
<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Requirements" aria-controls="sv-tb-req-1" aria-expanded="false"><span class="sv-disclose-label">Requirements</span><span class="sv-disclose-count">(4)</span></span>
<div class="sv-disclose-pop sv-hidden" id="sv-tb-req-1" role="dialog" aria-label="Requirements">
<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Requirements</div></div>
<ul class="sv-disclose-list">
<li>Level 25</li>
<li>Weapon: Sword</li>
<li>Cost: 12 SP</li>
<li>Cooldown: 8s</li>
</ul>
</div>
</div>

=== 8) Scroll Test (Large Click) — Long List ===
<div class="sv-disclose">
<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Scroll Test" aria-controls="sv-tb-scroll-1" aria-expanded="false"><span class="sv-disclose-label">Scroll Test</span><span class="sv-disclose-count">(14)</span></span>
<div class="sv-disclose-pop sv-hidden" id="sv-tb-scroll-1" role="dialog" aria-label="Scroll Test">
<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Scroll Test</div></div>
<ul class="sv-disclose-list">
<li class="sv-disclose-group-title">Entries</li>
<li>Entry 1</li>
<li>Entry 2</li>
<li>Entry 3</li>
<li>Entry 4</li>
<li>Entry 5</li>
<li>Entry 6</li>
<li>Entry 7</li>
<li>Entry 8</li>
<li>Entry 9</li>
<li>Entry 10</li>
<li>Entry 11</li>
<li>Entry 12</li>
<li>Entry 13</li>
<li>Entry 14</li>
</ul>
</div>
</div>

=== 9) Definition (Large Click) — With Link (Header Link) ===
<span class="sv-def" tabindex="0" data-sv-def-tip="This definition is click-open so the user can interact inside the popup.\nHeader title should be a real link (no action button)." data-sv-def-link="Casting">Casting (with link)</span>

=== 10) Definition (Large Click) — With Link, Long Wrap ===
<span class="sv-def" tabindex="0" data-sv-def-tip="A longer linked definition to confirm that click-open popups remain compact in width but comfortably readable with vertical growth and scrolling when needed." data-sv-def-link="Judgement Blade">Judgement Blade (with link)</span>

=== 11) Notes (Small Hover) — Inline Wiki Link in Body ===
<div class="sv-tip">
<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Link Test" aria-controls="sv-tb-link-1" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
<div class="sv-tip-pop sv-hidden" id="sv-tb-link-1" role="dialog" aria-label="Link Test">
<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Link Test</div></div>
<div class="sv-tip-pop-body">
This popup contains a wiki link to validate Popups extension behavior: [[Casting]].
</div>
</div>
</div>

=== 12) Mixed Content (Large Click) — Text + List ===
<div class="sv-disclose">
<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Mixed" aria-controls="sv-tb-mixed-1" aria-expanded="false"><span class="sv-disclose-label">Mixed</span><span class="sv-disclose-count">(5)</span></span>
<div class="sv-disclose-pop sv-hidden" id="sv-tb-mixed-1" role="dialog" aria-label="Mixed">
<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Mixed</div></div>
<div class="sv-disclose-pop-body">
Short intro line for mixed content test.
<ul>
<li>Bullet A</li>
<li>Bullet B</li>
<li>Bullet C</li>
</ul>
</div>
</div>
</div>