# NativeSelect — accessible headless native select wrapper
#
# Wraps a native <select> element with state tracking via data attributes.
# Use when the browser's built-in dropdown is preferred. Ships zero CSS.
#
# Usage:
#   NativeSelect value <=> role, @change: handleChange
#     option value: "", "Choose a role..."
#     option value: "admin", "Admin"
#     option value: "user", "User"

export NativeSelect = component
  @value:: string := ""
  @disabled:: boolean := false
  @required:: boolean := false

  focused := false

  onChange: (e) ->
    e.isTrusted or return
    @value = e.target.value
    @emit 'change', @value

  render
    select value: @value, disabled: @disabled, required: @required
      aria-disabled: @disabled?!
      aria-required: @required?!
      $disabled: @disabled?!
      $focused: focused?!
      @change: @onChange
      @focusin: (=> focused = true)
      @focusout: (=> focused = false)
      slot
