Rework state management, public API, and events; DRY up state changes

example/index.html

@@ -483,6 +483,7 @@
     </div>
 
     <div class="panel">
+      <h2>trmnl:change event</h2>
       <pre id="event-output">Waiting for picker to load...</pre>
     </div>
   </div>
@@ -493,7 +494,7 @@
 
     // Listen for changes (including initial state)
     // Attach listener BEFORE creating picker to catch initial event
-    document.getElementById('picker-form').addEventListener('trmnl:changed', (event) => {
+    document.getElementById('picker-form').addEventListener('trmnl:change', (event) => {
       // Display event data
       document.getElementById('event-output').textContent = JSON.stringify(event.detail, null, 2)
 

example/main.css

@@ -137,7 +137,7 @@ pre {
     display: inline-block;
 }
 
-.screen-preview h2 {
+h2 {
     margin: 0 0 1.5rem 0;
     color: #333;
     font-size: 1.25rem;