float-button — the fixed corner action

A second live instance sits in the bottom-right column, one rung above the stage demo's fab (the class prop's geometry-only channel — the documented stack idiom) — press the + button there to open its stack; the panel anchors above the stack, END-aligned, with position-try fallbacks flipping it when the viewport edge is near. Items are ordinary buttons carrying role="menuitem"; the popover itself already carries role="menu". The other corners are deliberately not demoed — both are contested lanes on scaffold-based docs pages (measured): the sections-nav column owns the left 256px full-height, and the page-toc rail owns the top-right block (x1231–1421, y94–358 at the task-86 read — content- dependent: the rail's width and height ride its headings; a later measurement read x1220 w212 on the same lane) — a fab there paints under the rail and its hit area is covered. Consumers embedding in the scaffold should float right-side, below the rail (the lane question is queued for the Owner, W-next).

<script lang="ts">
  import FloatButton from '@ui/float-button.svelte';
</script>

<!-- menu idiom: children + an actions snippet — the button toggles a
     popover=auto stack above itself (native light dismiss, Escape, top layer) -->
<FloatButton label="quick actions" corner="bottom-right" class="fab-lift-a">
  <span aria-hidden="true">+</span>
  {#snippet actions()}
    <button type="button" role="menuitem" onclick={backToTop}>back to top</button>
    <button type="button" role="menuitem" onclick={copyPageLink}>copy this page link</button>
    <a role="menuitem" href="https://github.com/jixoai/ui" target="_blank" rel="noreferrer">github ↗</a>
  {/snippet}
</FloatButton>

<script lang="ts">
  import FloatButton from '@ui/float-button.svelte';
</script>

<!-- plain idiom: a lone fixed action (compose, support, back-to-top) -->
<FloatButton label="back to top" onclick={() => scrollToTop()}>
  <span aria-hidden="true">↑</span>
</FloatButton>

<!-- menu idiom: children + an actions snippet — the button toggles a
     popover=auto stack above itself (native light dismiss, Escape, top layer) -->
<FloatButton label="quick actions" corner="bottom-right" class="fab-lift-a">
  <span aria-hidden="true">+</span>
  {#snippet actions()}
    <button type="button" role="menuitem" onclick={compose}>compose</button>
    <button type="button" role="menuitem" onclick={support}>support</button>
  {/snippet}
</FloatButton>