Spinner

<%= poetry_spinner %>

<%# Loading buttons: the spinner leads the label; disabled holds the
    pressed flow while work runs. %>
<div class="flex flex-col items-center gap-4">
  <%= poetry_button(size: :sm, disabled: true) do %>
    <%= poetry_spinner %> Loading...
  <% end %>
  <%= poetry_button(variant: :outline, size: :sm, disabled: true) do %>
    <%= poetry_spinner %> Please wait
  <% end %>
  <%= poetry_button(variant: :secondary, size: :sm, disabled: true) do %>
    <%= poetry_spinner %> Processing
  <% end %>
</div>

<%# Any icon becomes a spinner: animate-spin + the status role and an
    accessible name are the whole contract (upstream builds theirs from
    the segmented loader glyph). %>
<div class="flex items-center gap-4">
  <%= poetry_icon(name: :loader, role: "status", "aria-label": "Loading",
                  class: "size-4 animate-spin") %>
</div>

<%# A full-panel loading state: the spinner fills the Empty media slot above a
    real heading and muted copy, with a cancel action as the content block. %>
<%= poetry_empty do |empty| %>
  <% empty.with_media { poetry_spinner(class: "size-8", label: "Preparing your workspace") } %>
  <% empty.with_title { "Preparing your workspace" } %>
  <% empty.with_description { "This only takes a moment. We'll drop you in as soon as everything is ready." } %>
  <%= poetry_button(variant: :outline, size: :sm) { "Cancel" } %>
<% end %>

<%# The spinner rides inside a status Badge to mark live activity. It inherits
    the badge's text color through currentColor, and label: names the work for
    assistive tech while the visible word carries the meaning. %>
<div class="flex flex-wrap items-center gap-2">
  <%= poetry_badge(variant: :info) do %>
    <%= poetry_spinner(label: "Importing contacts") %>
    Importing
  <% end %>
  <%= poetry_badge(variant: :secondary) do %>
    <%= poetry_spinner(label: "Rebuilding index") %>
    Rebuilding
  <% end %>
</div>

<%# Upstream's pair: a waiting message input with the trailing spinner,
    and a textarea whose block-end rail pairs the validating state with
    the send action. %>
<div class="flex w-full max-w-md flex-col gap-4">
  <%= poetry_input_group do %>
    <%= poetry_input_group_input(name: "message", placeholder: "Send a message...", disabled: true) %>
    <%= poetry_input_group_addon(align: :"inline-end") do %>
      <%= poetry_spinner(label: "Sending") %>
    <% end %>
  <% end %>
  <%= poetry_input_group do %>
    <%= poetry_input_group_textarea(name: "notes", placeholder: "Autosaving draft...", disabled: true) %>
    <%= poetry_input_group_addon(align: :"block-end") do %>
      <%= poetry_spinner(label: "Validating") %> Validating...
      <%= poetry_input_group_button(label: "Send", class: "ml-auto", variant: :default) do %>
        <%= poetry_icon(name: :"arrow-up") %>
      <% end %>
    <% end %>
  <% end %>
</div>

<%# Size rides class - the spinner is an icon. %>
<div class="flex items-center gap-6">
  <%= poetry_spinner(class: "size-3") %>
  <%= poetry_spinner(class: "size-4") %>
  <%= poetry_spinner(class: "size-6") %>
  <%= poetry_spinner(class: "size-8") %>
</div>

<%= poetry_spinner(label: "Saving your changes") %>