leaflet-theme-control 0.0.4 → 0.0.5

package/package.json

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