<%
var _el      = locals.element  || 'button';
var _v       = locals.variant  || 'primary';
var _sz      = locals.size     || 'md';
var _tp      = locals.type     || 'button';
var _loading = locals.loading  || false;
var _dis     = locals.disabled || _loading;
var _sel     = locals.selected || false;
var _isBtn   = _el === 'button';
var _isLink  = _el === 'a';

var vc = {
  primary:   'bg-primary text-primary-fg hover:bg-primary-hover',
  secondary: 'bg-secondary text-secondary-fg hover:bg-secondary-hover',
  ghost:     'bg-transparent text-text-primary hover:bg-surface-overlay',
  danger:    'bg-error text-text-inverse hover:opacity-90',
  outline:   'border border-border text-text-primary hover:bg-surface-overlay',
}[_v] || 'bg-primary text-primary-fg hover:bg-primary-hover';

var sc = {
  xs: 'px-2 py-1 text-xs',
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-sm',
  lg: 'px-5 py-2.5 text-base',
  xl: 'px-6 py-3 text-lg',
}[_sz] || 'px-4 py-2 text-sm';

var spinnerSz = {
  xs: 'h-3 w-3 border',
  sm: 'h-3 w-3 border',
  md: 'h-4 w-4 border-2',
  lg: 'h-4 w-4 border-2',
  xl: 'h-5 w-5 border-2',
}[_sz] || 'h-4 w-4 border-2';

var selClass  = _sel ? ' ring-2 ring-inset ring-border-focus' : '';
var disClass  = (_dis && !_isBtn) ? ' opacity-50 pointer-events-none cursor-not-allowed' : '';
%><<%= _el %>
  <% if (_isBtn) { %>type="<%= _tp %>"<% } %>
  <% if (_isLink && locals.href) { %>href="<%= locals.href %>"<% } %>
  <% if (_isLink && locals.target) { %>target="<%= locals.target %>"<% } %>
  <% if (_isLink && locals.target === '_blank') { %>rel="<%= locals.rel || 'noopener noreferrer' %>"<% } %>
  class="inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50 disabled:cursor-not-allowed <%= vc %> <%= sc %><%= locals.fullWidth ? ' w-full' : '' %><%= selClass %><%= disClass %><%= locals.className ? ' ' + locals.className : '' %>"
  <% if (_dis && _isBtn)  { %>disabled<% } %>
  <% if (_dis && _isLink) { %>aria-disabled="true" tabindex="-1"<% } %>
  <% if (_loading) { %>aria-busy="true"<% } %>
  <% if (locals.ariaLabel) { %>aria-label="<%= locals.ariaLabel %>"<% } %>
  <% if (_sel || locals.ariaPressed !== undefined) { %>aria-pressed="<%= _sel ? 'true' : locals.ariaPressed %>"<% } %>
>
  <% if (_loading) { %>
    
  <% } else if (locals.iconLeft) { %>
    <%- locals.iconLeft %>
  <% } %>
  <% if (locals.children) { %><%= locals.children %><% } %>
  <% if (!_loading && locals.iconRight) { %><%- locals.iconRight %><% } %>
>