leaflet-theme-control 0.0.5 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-theme-control",
-  "version": "0.0.5",
+  "version": "0.1.1",
   "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",
@@ -40,7 +40,7 @@
   "bugs": {
     "url": "https://github.com/kristjanesperanto/leaflet-theme-control/issues"
   },
-  "homepage": "https://github.com/kristjanesperanto/leaflet-theme-control#readme",
+  "homepage": "https://kristjanesperanto.github.io/leaflet-theme-control/",
   "peerDependencies": {
     "leaflet": ">=2.0.0-alpha.1"
   },

package/src/leaflet-theme-control.js

@@ -57,6 +57,9 @@ export class ThemeControl extends Control {
     // AbortController for automatic event cleanup
     this._abortController = new AbortController()
 
+    // Setup MutationObserver to watch for language changes on html[lang]
+    this._setupLanguageObserver()
+
     // Setup media query listener for system theme changes
     if (this.options.detectSystemTheme) {
       const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
@@ -143,6 +146,12 @@ export class ThemeControl extends Control {
     // Abort all event listeners
     this._abortController.abort()
 
+    // Disconnect language observer
+    if (this._langObserver) {
+      this._langObserver.disconnect()
+      this._langObserver = null
+    }
+
     // Cleanup editor
     if (this.editor) {
       this.editor.cleanup()
@@ -152,6 +161,25 @@ export class ThemeControl extends Control {
     this.map = null
   }
 
+  _setupLanguageObserver() {
+    // Watch for changes to html[lang] attribute
+    this._langObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'lang') {
+          // Language changed, update button label
+          this.updateButtonLabel()
+          break
+        }
+      }
+    })
+
+    // Observe the html element for lang attribute changes
+    this._langObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['lang'],
+    })
+  }
+
   _updateButton(button, themeKey) {
     if (!button) return // No button if addButton: false
 

package/types/index.d.ts

@@ -116,6 +116,18 @@ declare module "leaflet" {
      * @returns The translated label
      */
     getEditorLabels?: (key: string) => string;
+
+    /**
+     * Position of the theme editor panel.
+     * @default "topright"
+     */
+    panelPosition?: "topright" | "topleft" | "bottomright" | "bottomleft";
+
+    /**
+     * Z-index for the theme editor panel.
+     * @default 1000
+     */
+    panelZIndex?: number;
   }
 
   /**
@@ -167,6 +179,13 @@ declare module "leaflet" {
      * @returns The theme collection
      */
     getThemes(): ThemeCollection;
+
+    /**
+     * Updates the button label text.
+     * Useful for updating translations after a language change.
+     * Called automatically when html[lang] attribute changes (since v0.1.0).
+     */
+    updateButtonLabel(): void;
   }
 }