leaflet-theme-control 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-theme-control",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A Leaflet control for switching between visual themes (light, dark, grayscale, custom, etc.) using CSS filters",
   "main": "src/leaflet-theme-control.js",
   "module": "src/leaflet-theme-control.js",

package/src/leaflet-theme-editor.js

@@ -332,20 +332,23 @@ export class ThemeEditor {
       selectBtn.appendChild(this._el('span', { 'className': 'theme-active-badge', 'aria-hidden': 'true' }, '✓'))
     }
 
-    // Create edit button
-    const editBtn = this._el('button', {
-      'className': 'theme-edit-btn',
-      'data-theme': themeKey,
-      'aria-label': `${this._getLabel('customizeTheme')}: ${themeLabel}`,
-    }, '⚙️')
-
     // Create row container
     const row = this._el('div', {
       'className': `theme-row ${isActive ? 'active' : ''}`,
       'data-theme': themeKey,
     })
     row.appendChild(selectBtn)
-    row.appendChild(editBtn)
+
+    // Only show edit button for the active theme
+    // User needs to see the theme to edit it meaningfully
+    if (isActive) {
+      const editBtn = this._el('button', {
+        'className': 'theme-edit-btn',
+        'data-theme': themeKey,
+        'aria-label': `${this._getLabel('customizeTheme')}: ${themeLabel}`,
+      }, '⚙️')
+      row.appendChild(editBtn)
+    }
 
     return row
   }