====== behavior: popup-selector ======

Similar to ''<select type="dropdown-select">'' but uses popup menu instead of list of options.

The ''popup-selector'' allows to share single list of items among many elements that have this behavior. 

Use popup-selector instead of <select> when you need to switch state of repeatable items, e.g. in rows of some table/grid.  

===== Elements =====
that have this behavior applied by default (see 
[[h-smile:built-in-behaviors:master_style_sheet]]): 
    *  button[type="selector"]





===== Attributes =====
that this behavior knows about:
  * ''menu="css-selector"'' - CSS selector of menu element, example: ''<div menu="popup.list-of-options">...</div>''
  * ''value="string"'' - initial and current value. Menu items (''<li>s'') may have ''value'' attribute declared. On click of such item:
    - content will be copied to the ''<caption>'' portion of the control and
    - value of the ''value'' attribute will be copied to the ''value'' attribute of the control itself.

If there is no ''menu'' attribute defined then this behavior will use first ''<menu>'' or ''<popup>'' child of the element that has this behavior applied.  

Example #1, selector with external items: 

<code html>
  <button type="selector" menu="popup#some-popup" />
  ...
  <popup id="some-popup">
     <li value="1">First</li>
     <li value="2">Second</li>
     ...
  </popup>
</code>

Example #2, selector with internal items: 

<code html>
  <button type="selector">
    <caption>Select some value</caption>
    <popup>
       <li value="1">First</li>
       <li value="2">Second</li>
       ...
    </popup>
  </button>
</code>

===== Value =====

Value of the element is a value of attribute "value" of the selected menu item.

===== Events =====
Along with the standard set of events (mouse, keyboard, focus) //behavior: selector// generates:
    *  BUTTON_STATE_CHANGED event - value was changed by the user.