Floating Action Button

---
// src/components/ui/overlays/floating-action-button/FloatingActionButton.astro — headless primitive
// (see ../../README.md).
//
// A plain floating button would not earn a file here: it is a <button> with `position: fixed`, and
// this library ships no positioning. What earns it one is the EXPAND-TO-MENU behavior — and the
// honest version of that turned out to be no JavaScript at all.
//
// Point `for` at any menu surface in the library (a DropdownMenu, a MenubarContent, a PopoverContent)
// and the platform's `popovertarget` opens it, while whichever controller already drives that panel
// places it and syncs the `aria-expanded` below. So the component is the ARIA and the attribute
// surface: `aria-haspopup="menu"`, an expanded state a theme can rotate an icon off, and a
// `data-position` for a theme to pin the corner — because a FAB that is not fixed still works, and
// this library does not ship looks.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & {
  for: string;
  label: string;
  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
  size?: "sm" | "md" | "lg";
};

const {
  for: target,
  label,
  position = "bottom-right",
  size = "lg",
  class: className,
  ...rest
} = Astro.props;
---

<button
  type="button"
  popovertarget={target}
  aria-label={label}
  aria-haspopup="menu"
  aria-expanded="false"
  data-slot="floating-action-button"
  data-position={position}
  data-size={size}
  class={className}
  {...rest}
>
  <slot />
</button>

import FloatingActionButton from "./FloatingActionButton.astro";

export { FloatingActionButton };
export default FloatingActionButton;