@henriquepetrelli/hp-design-system 1.1.16 → 1.1.18

package/dist/hp-design-system.umd.js

@@ -1427,24 +1427,22 @@
 
   const emit = __emit;
 
-  const isDarkMode = vue.ref(
-    typeof window !== 'undefined' && localStorage.getItem('theme') === 'dark'
-  );
-
-  const applyTheme = (isDark) => {
-    if (typeof document === 'undefined') return
-
-    const theme = isDark ? 'dark' : 'light';
+  /**
+   * 🔑 Fonte única da verdade
+   */
+  const getInitialTheme = () => localStorage.getItem('theme') === 'dark';
 
-    document.documentElement.classList.remove('dark', 'light');
-    document.documentElement.classList.add(theme);
+  const isDarkMode = vue.ref(getInitialTheme());
 
-    localStorage.setItem('theme', theme);
+  const applyTheme = (isDark) => {
+    document.documentElement.classList.toggle('dark', isDark);
+    document.documentElement.classList.toggle('light', !isDark);
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
   };
 
   const toggleTheme = () => {
-    emit('update:modelValue', isDarkMode.value);
     applyTheme(isDarkMode.value);
+    emit('update:modelValue', isDarkMode.value);
   };
 
   const handleKeydown = () => {
@@ -1452,13 +1450,23 @@
     toggleTheme();
   };
 
+  /**
+   * ✅ Sincroniza o toggle com o tema real após F5
+   */
+  vue.onMounted(() => {
+    const isDark = getInitialTheme();
+    isDarkMode.value = isDark;
+    emit('update:modelValue', isDark);
+  });
+
   vue.watch(
     () => props.modelValue,
     (value) => {
-      isDarkMode.value = value;
-      applyTheme(value);
-    },
-    { immediate: true }
+      if (value !== isDarkMode.value) {
+        isDarkMode.value = value;
+        applyTheme(value);
+      }
+    }
   );
 
   const computedLightBorderColor = vue.computed(
@@ -1514,7 +1522,7 @@
   }
 
   };
-  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-ba2225dd"]]);
+  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-f9bbbf36"]]);
 
   const _hoisted_1$3 = { class: "input__fieldset" };
   const _hoisted_2$3 = {