Trigonometric Radial Popover Menu

This is a Trigonometric Radial Popover Menu. It replaces heavy JavaScript positioning arrays with native CSS mathematics and the HTML Popover API. Its function is to reveal secondary actions in a circular layout on demand, expanding the interactive surface area without permanently cluttering the interface.

Specs

• Weight: ~2 KB. Zero dependencies. No JavaScript.
• Performance: Native rendering. The math and transitions are handled entirely by the browser’s CSS engine, ensuring fluid 60 FPS movement without script overhead.
• Theming / Customization: Radius and sizing are strictly controlled via --btn-size and --extra-space. Hue colors are dynamically calculated based on node order.
• Responsiveness: Inherently adaptive. Elements position themselves radially regardless of viewport constraints, locked to the center via CSS Grid.
• Web APIs: Popover API.
• Graceful Degradation: [!] Highly experimental. Relies on the bleeding-edge @function rule and sibling-index() (Chrome/Edge 139+). Fails completely in Firefox and Safari, stacking items statically without any radial spread.

Anatomy

The component merges semantic native features with advanced mathematical stylesheets.

• HTML (The Skeleton): A semantic <button> acts as the trigger, linked to a <ul> via the popovertarget attribute. The list contains accessible icon buttons and utilizes .sr-only text for screen readers.
• CSS (The Skin): Pure functional styling. Uses trigonometric functions (sin, cos) inside a custom @function to calculate absolute spatial coordinates on the fly.
• JS (The Nervous System): Absent. Interaction states are managed natively by the HTML Popover API and the CSS :popover-open pseudo-class.

Logic

The core mechanism is “Native Polar Calculation”:

@function --polar-coordinate(--angle, --distance) {
  result: translate(
    calc(cos(var(--angle)) * var(--distance)),
    calc(sin(var(--angle)) * var(--distance))
  );
}

Instead of manually hardcoding x and y pixel offsets for every individual menu item, the code defines a reusable math function directly in CSS. It takes an angle (dynamically calculated via the new sibling-index() property) and a radius, converting polar coordinates to Cartesian translations natively.

Feel

Responsive and organic. The menu items bloom outward like physical petals. The staggered delay, derived from each element’s structural index, gives the expansion a satisfying, mechanical spin. It feels precise, calculated, and entirely weightless.