---
/**
 * MenuButton — two lines that open a menu and turn into an X to close it.
 * state: 'hover' | 'focus' | 'pressed' | 'open' — forces a state; 'open' also draws the X.
 * as: 'button' (default) | 'span' (for specimens). Other attributes pass through.
 */
interface Props { state?: 'hover' | 'focus' | 'pressed' | 'open'; as?: 'button' | 'span'; class?: string; iconClass?: string; [attr: string]: any }
const { state, as: Tag = 'button', class: extra, iconClass, ...rest } = Astro.props;
---
<Tag class:list={[extra, 'menu-button', state && `is-${state}`]} {...rest}><span class:list={[iconClass, 'menu-button-icon']} aria-hidden="true"></span><slot /></Tag>