@henriquepetrelli/hp-design-system 1.1.16 → 1.1.18

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

@@ -1423,24 +1423,22 @@ const props = __props;
 
 const emit = __emit;
 
-const isDarkMode = 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 = 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 = () => {
@@ -1448,13 +1446,23 @@ const handleKeydown = () => {
   toggleTheme();
 };
 
+/**
+ * ✅ Sincroniza o toggle com o tema real após F5
+ */
+onMounted(() => {
+  const isDark = getInitialTheme();
+  isDarkMode.value = isDark;
+  emit('update:modelValue', isDark);
+});
+
 watch(
   () => props.modelValue,
   (value) => {
-    isDarkMode.value = value;
-    applyTheme(value);
-  },
-  { immediate: true }
+    if (value !== isDarkMode.value) {
+      isDarkMode.value = value;
+      applyTheme(value);
+    }
+  }
 );
 
 const computedLightBorderColor = computed(
@@ -1510,7 +1518,7 @@ return (_ctx, _cache) => {
 }
 
 };
-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 = {