From 57450222aeffb2f3bdfbb739f0ddcd9acd3e7df9 Mon Sep 17 00:00:00 2001
From: Rockwell Schrock <rockwell@schrock.me>
Date: Thu, 18 Dec 2025 15:38:02 -0500
Subject: [PATCH] Use data-* attributes instead of IDs

---
 README.md          | 24 ++++++++++++------------
 example/index.html | 10 +++++-----
 src/index.js       | 12 ++++++------
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 66b39a8..395bc3a 100644
--- a/README.md
+++ b/README.md
@@ -29,28 +29,28 @@ npm install @trmnl/picker
 
 ### 1. Create HTML Structure
 
-The library expects a form with specific element IDs. Apply your favorite CSS styling framework as desired.
+The library expects a form with specific data-* attributes. Apply your favorite CSS styling framework as desired.
 
 ```html
 <form id="picker-form">
   <!-- Required: Model selector -->
-  <select id="model-select"></select>
+  <select data-model-select></select>
 
   <!-- Required: Palette selector -->
-  <select id="palette-select"></select>
+  <select data-palette-select></select>
 
   <!-- Optional: Orientation toggle -->
-  <button type="button" id="orientation-toggle">
+  <button type="button" data-orientation-toggle>
     <span data-orientation-text>Landscape</span>
   </button>
 
   <!-- Optional: Dark mode toggle -->
-  <button type="button" id="dark-mode-toggle">
+  <button type="button" data-dark-mode-toggle>
     <span data-dark-mode-text>Light Mode</span>
   </button>
 
   <!-- Optional: Reset button -->
-  <button type="button" id="reset-button">Reset</button>
+  <button type="button" data-reset-button>Reset</button>
 </form>
 ```
 
@@ -255,16 +255,16 @@ document.getElementById('picker-form').addEventListener('trmnl:change', (event)
 
 ## Form Elements
 
-The library expects the following elements within the form:
+The library expects the following elements within the form using data-* attributes:
 
 ### Required Elements
-- `#model-select` - Model dropdown
-- `#palette-select` - Palette dropdown
+- `[data-model-select]` - Model dropdown (typically a `<select>` element)
+- `[data-palette-select]` - Palette dropdown (typically a `<select>` element)
 
 ### Optional Elements
-- `#orientation-toggle` - Button to toggle portrait/landscape
-- `#dark-mode-toggle` - Button to toggle dark mode
-- `#reset-button` - Button to reset to defaults (first palette, landscape orientation, light mode)
+- `[data-orientation-toggle]` - Button to toggle portrait/landscape
+- `[data-dark-mode-toggle]` - Button to toggle dark mode
+- `[data-reset-button]` - Button to reset to defaults (first palette, landscape orientation, light mode)
 - `[data-orientation-text]` - Text element showing current orientation
 - `[data-dark-mode-text]` - Text element showing current mode
 
diff --git a/example/index.html b/example/index.html
index 4252c80..790ce0d 100644
--- a/example/index.html
+++ b/example/index.html
@@ -28,23 +28,23 @@
       </div>
 
       <form id="picker-form" class="picker-form" style="display: none;">
-        <select id="model-select" class="picker-select"></select>
+        <select data-model-select class="picker-select"></select>
 
-        <select id="palette-select" class="picker-select"></select>
+        <select data-palette-select class="picker-select"></select>
 
         <div class="divider"></div>
 
-        <button type="button" id="orientation-toggle" class="picker-button">
+        <button type="button" data-orientation-toggle class="picker-button">
           <span data-orientation-text>Landscape</span>
         </button>
 
-        <button type="button" id="dark-mode-toggle" class="picker-button">
+        <button type="button" data-dark-mode-toggle class="picker-button">
           <span data-dark-mode-text>Light Mode</span>
         </button>
 
         <div class="divider"></div>
 
-        <button type="button" id="reset-button" class="picker-button">
+        <button type="button" data-reset-button class="picker-button">
           Reset
         </button>
       </form>
diff --git a/src/index.js b/src/index.js
index 830808b..585a2fe 100644
--- a/src/index.js
+++ b/src/index.js
@@ -176,16 +176,16 @@ class TRMNLPicker {
   }
 
   /**
-   * Find and store references to form elements
+   * Find and store references to form elements using data-* attributes
    * @private
    */
   _initializeElements() {
     this.elements = {
-      modelSelect: this.formElement.querySelector('#model-select'),
-      paletteSelect: this.formElement.querySelector('#palette-select'),
-      orientationToggle: this.formElement.querySelector('#orientation-toggle'),
-      darkModeToggle: this.formElement.querySelector('#dark-mode-toggle'),
-      resetButton: this.formElement.querySelector('#reset-button'),
+      modelSelect: this.formElement.querySelector('[data-model-select]'),
+      paletteSelect: this.formElement.querySelector('[data-palette-select]'),
+      orientationToggle: this.formElement.querySelector('[data-orientation-toggle]'),
+      darkModeToggle: this.formElement.querySelector('[data-dark-mode-toggle]'),
+      resetButton: this.formElement.querySelector('[data-reset-button]'),
 
       // Optional: UI indicator elements
       orientationText: this.formElement.querySelector('[data-orientation-text]'),