Reset orientation and dark mode as well

README.md

@@ -340,7 +340,7 @@ The library expects the following elements within the form:
 ### Optional Elements
 - `#orientation-toggle` - Button to toggle portrait/landscape
 - `#dark-mode-toggle` - Button to toggle dark mode
-- `#reset-button` - Button to reset palette to model's default
+- `#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
 

src/index.js

@@ -521,6 +521,9 @@ class TRMNLPicker {
       this.elements.orientationText.textContent = this.state.isPortrait ? 'Portrait' : 'Landscape'
     }
 
+    // Update reset button state
+    this._updateResetButton()
+
     // Emit change event
     this._emitChangeEvent()
   }
@@ -537,12 +540,15 @@ class TRMNLPicker {
       this.elements.darkModeText.textContent = this.state.isDarkMode ? 'Dark Mode' : 'Light Mode'
     }
 
+    // Update reset button state
+    this._updateResetButton()
+
     // Emit change event
     this._emitChangeEvent()
   }
 
   /**
-   * Reset palette to model's default (first valid palette)
+   * Reset to defaults: first valid palette, landscape orientation, light mode
    * @private
    */
   _resetToDefaults() {
@@ -554,6 +560,18 @@ class TRMNLPicker {
     this.elements.paletteSelect.value = firstPaletteId
     this.state.selectedPalette = this.palettes.find(p => p.id === firstPaletteId)
 
+    // Reset to landscape orientation
+    this.state.isPortrait = false
+    if (this.elements.orientationText) {
+      this.elements.orientationText.textContent = 'Landscape'
+    }
+
+    // Reset to light mode
+    this.state.isDarkMode = false
+    if (this.elements.darkModeText) {
+      this.elements.darkModeText.textContent = 'Light Mode'
+    }
+
     // Update UI
     this._updateResetButton()
 
@@ -563,6 +581,7 @@ class TRMNLPicker {
 
   /**
    * Update reset button enabled/disabled state
+   * Button is disabled only when palette, orientation, and dark mode are all at defaults
    * @private
    */
   _updateResetButton() {
@@ -572,7 +591,11 @@ class TRMNLPicker {
     if (!model) return
 
     const firstValidPaletteId = this._getFirstValidPaletteId(model)
-    const isAtDefaults = this.elements.paletteSelect.value === String(firstValidPaletteId)
+    const isPaletteDefault = this.elements.paletteSelect.value === String(firstValidPaletteId)
+    const isOrientationDefault = this.state.isPortrait === false
+    const isDarkModeDefault = this.state.isDarkMode === false
+
+    const isAtDefaults = isPaletteDefault && isOrientationDefault && isDarkModeDefault
 
     this.elements.resetButton.disabled = isAtDefaults