<%
  var _id     = locals.id     || 'select-' + Math.random().toString(36).substr(2, 9);
  var _dis    = locals.disabled  ? 'disabled' : '';
  var _req    = locals.required  ? 'required' : '';
  var _opts   = locals.options   || [];
  var _sz     = locals.size      || 'md';

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

  var baseClass = 'block w-full rounded-md border bg-surface-base text-text-primary appearance-none focus:outline-none focus:ring-2 focus:ring-border-focus disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-sunken transition-colors';
  var stateClass = locals.error
    ? 'border-error ring-1 ring-error bg-error-subtle'
    : 'border-border hover:border-border-strong';
%>

  <% if (locals.label) { %>
    
      <%= locals.label %><% if (locals.required) { %> *<% } %>
    
  <% } %>
  

    
      <%= _req %>
      <% if (locals.name)  { %>name="<%= locals.name %>"<% } %>
      <% if (locals.value !== undefined) { %>
        onchange="this.dataset.value=this.value"
        data-value="<%= locals.value %>"
      <% } %>
    >
      <% if (locals.placeholder) { %>
        <%= locals.placeholder %>
      <% } %>
      <% _opts.forEach(function(opt) { %>
        ><%= opt.label %>
      <% }); %>
    
    

      
    
  
  <% if (locals.hint || locals.error) { %>
    

      <%= locals.error || locals.hint %>
    
  <% } %>