Navbox

<noinclude>
Collapsible navbox. The header bar '''is''' the toggle — there is no separate
"[ Show/Hide ]" row. Pair it with <code>&#123;&#123;Endnavbox&#125;&#125;</code>. Content
between the two is wikitable rows; Navbox opens the <code>&#123;|</code> for you.

'''Parameters''' (all named, all must be quoted)

* <code>title</code> — header content. Any markup: text, images, divs, whatever the header needs. Include <code>&lt;span class=\"hw-navbox-arrow\">&lt;/span></code> where the toggle arrow should sit.
* <code>color</code> — master accent. Anything below that is left out falls back to this. Default <code>#333333</code>.
* <code>border</code> — outer border and header underline. Defaults to <code>color</code>.
* <code>headerbg</code> — header background. Default <code>transparent</code>, matching the body.
* <code>textcolor</code> — header text. Defaults to <code>color</code>.
* <code>style</code> — extra CSS on the inner table.

'''Layout is the caller's job.''' <code>title</code> takes a block of markup and the header
is an ordinary block box, so a plain div stacks and a flex div sits things side by side.
Two classes are provided to save repeating the type sizes:

* <code>hw-navbox-title</code> — bold, 1.15em
* <code>hw-navbox-sub</code> — 0.82em, slightly dimmed
* <code>hw-navbox-arrow</code> — the toggle chevron. Place it anywhere inside <code>title</code>; it points down when collapsed and up when expanded. Drawn from two rotated borders rather than a glyph, so it scales with <code>font-size</code> and takes its color from the surrounding text.

'''Example''' — icon stacked above a centred title

 &#123;&#123;Navbox&#124;color="#000000"&#124;title="<div style=\"text-align: center;\">!&#91;&#91;icon.svg&#124;56px&#124;alt=Icon&#93;&#93;<div class=\"hw-navbox-title\">Heading<span class=\"hw-navbox-arrow\"></span></div><div class=\"hw-navbox-sub\">Subheading</div></div>"&#125;&#125;
 |-
 | Row label
 | Row content
 &#123;&#123;Endnavbox&#125;&#125;

Quotes inside a quoted parameter are escaped as <code>\"</code>. The arrow is driven by the
<code>hw-collapsed</code> class the engine sets on the collapsible div. Leave the span out
and the navbox still works, but nothing marks it as collapsible.
</noinclude><includeonly><style>
.hw-navbox { border-width: 2px; border-style: solid; border-collapse: collapse; margin: 0.4rem 0; }
.hw-navbox-head { box-sizing: border-box; padding: 10px 14px; user-select: none; cursor: pointer; border-bottom-width: 2px; border-bottom-style: solid; }
.hw-navbox-title { font-weight: bold; font-size: 1.15em; }
.hw-navbox-sub { font-size: 0.82em; opacity: 0.85; }
.hw-navbox-arrow { display: inline-block; margin-left: 0.35em; font-size: 0.75em; line-height: 1; vertical-align: middle; }
.hw-navbox-arrow::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; border-right: 0.13em solid currentColor; border-bottom: 0.13em solid currentColor; transform: rotate(-135deg); vertical-align: -0.05em; }
.hw-navbox:has(> .hw-collapsible.hw-collapsed) .hw-navbox-arrow::after { transform: rotate(45deg); vertical-align: 0.18em; }
</style><div class="hw-navbox" style="border-color: {{{border|{{{color|#333333}}}}}};"><div class="hw-customtoggle-{{{_uid}}} hw-navbox-head" style="background: {{{headerbg|transparent}}}; color: {{{textcolor|{{{color|#333333}}}}}}; border-bottom-color: {{{border|{{{color|#333333}}}}}};">{{{title|Navbox}}}</div>
<div class="hw-collapsible hw-collapsed" id="hw-customcollapsible-{{{_uid}}}">
{|style="width: 100%; border-collapse: collapse; {{{style|}}}"
</includeonly>