Bubble

<div class="flex w-full max-w-md flex-col gap-2">
  <%= poetry_bubble(variant: :secondary) { "Here's the summary you asked for." } %>
  <%= poetry_bubble(align: :end) { "Sounds good - see you at 10." } %>
</div>

<%# Show more / show less without JS state: the visible preview sits above
    the collapsible, the remainder IS its panel, and the two trigger labels
    + chevron swap on the root's data-open via in-data-open:. %>
<div class="flex w-full max-w-sm flex-col gap-6">
  <%= poetry_bubble(variant: :muted) { "How can I help you today?" } %>
  <%= poetry_bubble(variant: :muted, align: :end) do %>
    <p>
      The accessibility review found two focus states that were visually
      too subtle in dark mode. I checked the dialog, menu, and drawer
      paths because each one renders focusable controls inside a layered
      surface&hellip;
    </p>
    <%= poetry_collapsible(class: "mt-1") do |collapsible| %>
      <% collapsible.with_trigger(class: "flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground") do %>
        <span class="in-data-open:hidden">Show more</span>
        <span class="hidden in-data-open:inline">Show less</span>
        <%= poetry_icon(name: :"chevron-down", class: "size-3.5 transition-transform in-data-open:rotate-180") %>
      <% end %>
      <div class="space-y-2 pt-2">
        <p>The dialog and drawer are fine. The menu needs the hover and focus
        tokens split so keyboard focus stays visible when the pointer is not
        involved.</p>
        <p>I also recommend keeping the change in the style file instead of
        the primitive so the other themes can choose their own focus
        treatment later.</p>
      </div>
    <% end %>
  <% end %>
</div>

<div class="flex w-full max-w-md flex-col gap-4">
  <%= poetry_bubble_group do %>
    <%= poetry_bubble(variant: :secondary) { "Did the nightly export run?" } %>
    <%= poetry_bubble(variant: :secondary) { "The report still shows yesterday's totals." } %>
  <% end %>

  <%= poetry_bubble_group do %>
    <%= poetry_bubble(align: :end) { "It finished a few minutes ago." } %>
    <%= poetry_bubble(align: :end) { "Refresh once and the new totals should land." } %>
  <% end %>
</div>

<%# Quick replies are real controls: tag: :button carries the caller's
    data-action, tag: :a + href: is a navigational reply - never a click
    handler on a div. %>
<div class="flex w-full max-w-sm flex-col gap-6">
  <%= poetry_bubble(variant: :muted) { "How can I help you today?" } %>
  <%= poetry_bubble_group(class: "items-end") do %>
    <%= poetry_bubble(variant: :tinted, align: :end, tag: :button) { "I forgot my password" } %>
    <%= poetry_bubble(variant: :tinted, align: :end, tag: :button) { "I need help with my subscription" } %>
    <%= poetry_bubble(variant: :tinted, align: :end, tag: :a, href: "#links-and-buttons") { "Something else. Talk to a human." } %>
  <% end %>
</div>

<%# A reaction can open a popover - error details on demand: the
    destructive bubble stays terse, the popover carries the diagnosis.
    pb reserves the opened panel's area inside the preview card. %>
<div class="flex w-full max-w-sm flex-col gap-4 pb-32">
  <%= poetry_bubble(align: :end) { "Run the build script." } %>
  <%= poetry_bubble(variant: :destructive) do |bubble| %>
    <% bubble.with_reactions(label: "Error details") do %>
      <%= poetry_popover(content_class: "w-80") do |popover| %>
        <% popover.with_trigger(variant: :ghost, size: :"icon-xs", label: "Show error details") do %>
          <%= poetry_icon(name: :info) %>
        <% end %>
        <% popover.with_title { "Command failed with exit code 1" } %>
        <% popover.with_description { "ENOENT: no such file or directory, open pnpm-lock.yaml" } %>
      <% end %>
    <% end %>
    Failed to run the command.
  <% end %>
</div>

<div class="flex flex-wrap gap-2">
  <%= poetry_bubble(variant: :outline, tag: :button) { "Yes, book it" } %>
  <%= poetry_bubble(variant: :outline, tag: :a, href: "/details") { "View details" } %>
</div>

<%# The reactions pill overlays an edge: side:/align: pick which one
    (default bottom/end). label: is REQUIRED - it names the cluster for
    screen readers. A reaction can be a real control, not just an emoji:
    the destructive bubble carries a ghost Button reply. %>
<div class="flex w-full max-w-sm flex-col gap-8">
  <%= poetry_bubble(variant: :muted, align: :end) do |bubble| %>
    <% bubble.with_reactions(label: "Reactions: thumbs up, surprised", align: :start) do %>
      <span>👍</span><span>😮</span>
    <% end %>
    I don't need tests, I know my code works.
  <% end %>
  <%= poetry_bubble(variant: :muted) do |bubble| %>
    <% bubble.with_reactions(label: "Reactions: eyes, rocket, and 2 more") do %>
      <span>👀</span><span>🚀</span><span>+2</span>
    <% end %>
    Bold. Fine, I'll add some tests. I'll let you know when they're done.
  <% end %>
  <%= poetry_bubble(align: :end) do |bubble| %>
    <% bubble.with_reactions(label: "Reactions: party popper, clapping hands", side: :top, align: :start) do %>
      <span>🎉</span><span>👏</span>
    <% end %>
    Tests passed on the first try. All 142 of them. Looking good!
  <% end %>
  <%= poetry_bubble(variant: :destructive) do |bubble| %>
    <% bubble.with_reactions(label: "Confirm running the command") do %>
      <%= poetry_button(variant: :ghost, size: :xs) { "Yes, run it" } %>
    <% end %>
    Are you sure I can run this command?
  <% end %>
</div>

<%# A reaction can carry a tooltip - the read receipt: an icon-xs ghost
    trigger in the reactions pill, the timestamp in the tip. label: names
    the icon-only button; the tooltip adds detail on hover/focus. %>
<div class="flex w-full max-w-sm flex-col gap-4">
  <%= poetry_bubble(variant: :secondary) { "Did you remove the stale route?" } %>
  <%= poetry_bubble(align: :end) do |bubble| %>
    <% bubble.with_reactions(label: "Read receipt") do %>
      <%= poetry_tooltip do |tooltip| %>
        <% tooltip.with_trigger(variant: :ghost, size: :"icon-xs", label: "Read status") do %>
          <%= poetry_icon(name: :check) %>
        <% end %>
        Read on Jan 5, 2026 at 4:32 PM
      <% end %>
    <% end %>
    Yes, removed it from the registry.
  <% end %>
</div>

<div class="flex w-full max-w-md flex-col gap-2">
  <%= poetry_bubble { "Sounds good - see you at 10." } %>
  <%= poetry_bubble(variant: :secondary) { "Here's the summary you asked for." } %>
  <%= poetry_bubble(variant: :muted) { "Typing indicator context." } %>
  <%= poetry_bubble(variant: :tinted) { "A tinted assistant reply." } %>
  <%= poetry_bubble(variant: :outline) { "An outlined reply." } %>
  <%= poetry_bubble(variant: :ghost) { "Tool output flows full-width without a surface." } %>
  <%= poetry_bubble(variant: :destructive) { "That upload failed." } %>
</div>