leaflet-theme-control 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-theme-control",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "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-control.js

@@ -158,11 +158,29 @@ export class ThemeControl extends Control {
     const theme = this.options.themes[themeKey]
     const label = this._getThemeLabel(themeKey)
 
-    button.setAttribute('aria-label', 'Theme: ' + label)
-    button.title = 'Theme: ' + label
+    // Get translated button prefix or use default
+    let buttonPrefix = 'Theme'
+    if (this.options.getEditorLabels) {
+      const translated = this.options.getEditorLabels('themeButton')
+      if (translated && translated !== 'themeButton') {
+        buttonPrefix = translated
+      }
+    }
+
+    const fullLabel = `${buttonPrefix}: ${label}`
+    button.setAttribute('aria-label', fullLabel)
+    button.title = fullLabel
     button.textContent = theme.icon || '🎨'
   }
 
+  /**
+   * Update button label (useful for language changes)
+   * Call this method after changing language to update the button's aria-label and title
+   */
+  updateButtonLabel() {
+    this._updateButton(this.button, this.currentTheme)
+  }
+
   _getThemeLabel(themeKey) {
     // Use custom label function if provided
     if (this.options.getLabel) {

package/src/leaflet-theme-editor.js

@@ -152,6 +152,7 @@ export class ThemeEditor {
       contrast: 'Contrast',
       sepia: 'Sepia',
       grayscaleFilter: 'Grayscale',
+      themeButton: 'Theme',
     }
 
     return labels[key] || key
@@ -332,20 +333,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
   }