@marwes-ui/vue 1.0.2 → 1.0.3

package/README.md

@@ -352,6 +352,28 @@ import ThemeMenu from "./theme-menu.vue"
 
 This layer does not provide SSR no-flash behavior. Server output can still render the fallback mode before the client applies a stored or system preference. Use it for client-side preference and persistence, not for a no-flash SSR guarantee.
 
+### Root Target Sync
+
+By default Marwes keeps theme state scoped to the provider element. If your app shell also needs the resolved mode on `html` or `body`, set `target` and `attribute`:
+
+```vue
+<template>
+  <MarwesProvider
+    default-preference="system"
+    storage-key="marwes-theme"
+    target="html"
+    attribute="class"
+    disable-transition-on-change
+  >
+    <AppShell />
+  </MarwesProvider>
+</template>
+```
+
+`target` can be `"provider"`, `"html"`, or `"body"`. `attribute` can be `"class"`, `"data-theme"`, or `"data-mode"`. Class mode only adds the active `light` / `dark` class and removes the opposite one; unrelated classes are preserved. The provider root still keeps `mw-theme--light` / `mw-theme--dark` and provider-scoped `--mw-*` variables in every target mode.
+
+Use one global-target provider per app shell. If multiple providers target `html` or `body`, deciding which provider owns that global element is app-owned behavior.
+
 For a simple brand pass, override shared values once and let Marwes fill the rest. If your product needs different brand colors in light and dark mode, control `mode` and switch between two small `ThemeInput` override objects:
 
 ```vue

package/dist/index.d.ts

@@ -4,6 +4,9 @@ import * as _marwes_ui_core from '@marwes-ui/core';
 import { ThemeInput, ThemePreference, ThemeMode, FontLoadingConfig, ResolvedTheme, ButtonOptions, InputOptions, SelectOptions, SelectAppearance as SelectAppearance$1, SelectOption as SelectOption$1, TextareaOptions, RichTextOptions, InputOtpOptions, CurrencyCode, iconRegistry, IconSize, IconStrokeWidth, AvatarOptions, CheckboxProps as CheckboxProps$1, DividerOptions, DividerSize, DividerOrientation, SpinnerOptions, SpacingOptions, SpacingSize, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize, ToastOptions, ToastVariant, ToastIntent, ToastPlacement, TooltipOptions, IconNameType, RadioOptions, BadgeOptions, SwitchOptions, SliderOptions, TabOptions, DialogOptions } from '@marwes-ui/core';
 export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, Density, FontLoadingConfig, FontLoadingMode, FontLoadingOptions, IconName, MwAvailableFont, MwFontFallback, MwGoogleFontFamily, MwStyledTheme, MwThemeVarName, MwThemeVarNames, MwThemeVarReference, MwThemeVars, ResolvedTheme, SpacingSize, Spacings, SwitchSize, Theme, ThemeInput, ThemeMode, ThemePreference, ToneName, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 
+type ThemeTarget = "provider" | "html" | "body";
+type ThemeAttribute = "class" | "data-theme" | "data-mode";
+
 type MarwesProviderProps = {
     theme?: ThemeInput;
     defaultPreference?: ThemePreference;
@@ -15,9 +18,14 @@ type MarwesProviderProps = {
     onModeChange?: (mode: ThemeMode) => void;
     storageKey?: string | false;
     enableSystem?: boolean;
+    target?: ThemeTarget;
+    attribute?: ThemeAttribute;
+    disableTransitionOnChange?: boolean;
 };
 declare const MarwesProvider: vue.DefineComponent<{
     mode?: any;
+    target?: any;
+    attribute?: any;
     theme?: any;
     defaultPreference?: any;
     preference?: any;
@@ -27,10 +35,13 @@ declare const MarwesProvider: vue.DefineComponent<{
     onModeChange?: any;
     storageKey?: any;
     enableSystem?: any;
+    disableTransitionOnChange?: any;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
     mode?: any;
+    target?: any;
+    attribute?: any;
     theme?: any;
     defaultPreference?: any;
     preference?: any;
@@ -40,6 +51,7 @@ declare const MarwesProvider: vue.DefineComponent<{
     onModeChange?: any;
     storageKey?: any;
     enableSystem?: any;
+    disableTransitionOnChange?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare function useTheme(): ResolvedTheme;

package/dist/index.js

@@ -102,6 +102,42 @@ function writeStoredThemePreference(storageKey, preference) {
   } catch {
   }
 }
+function applyModeAttribute({
+  target,
+  providerElement,
+  mode,
+  attribute
+}) {
+  const element = getTargetElement(target, providerElement);
+  if (!element) return;
+  if (attribute === "class") {
+    const oppositeMode = mode === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark;
+    element.classList.remove(oppositeMode);
+    element.classList.add(mode);
+    return;
+  }
+  element.setAttribute(attribute, mode);
+}
+function withoutModeTransitions(callback) {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    callback();
+    return;
+  }
+  const style = document.createElement("style");
+  style.dataset.marwesDisableTransitions = "true";
+  style.textContent = "* { transition: none !important; }";
+  document.head.appendChild(style);
+  callback();
+  window.getComputedStyle(document.body);
+  window.requestAnimationFrame(() => {
+    style.remove();
+  });
+}
+function getTargetElement(target, providerElement) {
+  if (target === "provider") return providerElement;
+  if (typeof document === "undefined") return null;
+  return target === "html" ? document.documentElement : document.body;
+}
 
 // src/provider/marwes-provider.ts
 var MarwesProvider = defineComponent({
@@ -116,7 +152,10 @@ var MarwesProvider = defineComponent({
     "onPreferenceChange",
     "onModeChange",
     "storageKey",
-    "enableSystem"
+    "enableSystem",
+    "target",
+    "attribute",
+    "disableTransitionOnChange"
   ],
   setup(rawProps, { slots }) {
     const props = rawProps;
@@ -128,6 +167,9 @@ var MarwesProvider = defineComponent({
     );
     const enableSystem = computed(() => props.enableSystem !== false);
     const storageKey = computed(() => props.storageKey ?? false);
+    const target = computed(() => props.target ?? "provider");
+    const attribute = computed(() => props.attribute ?? "class");
+    const disableTransitionOnChange = computed(() => props.disableTransitionOnChange === true);
     const isPreferenceControlled = computed(
       () => props.preference !== void 0 || props.mode !== void 0 || props.theme?.mode !== void 0
     );
@@ -161,6 +203,22 @@ var MarwesProvider = defineComponent({
       }
       loadThemeFonts(resolved.value, props.fontLoading ?? "auto");
     }
+    function syncTargetModeAttribute() {
+      if (target.value === "provider") return;
+      const apply = () => {
+        applyModeAttribute({
+          target: target.value,
+          providerElement: rootRef.value,
+          mode: activeMode.value,
+          attribute: attribute.value
+        });
+      };
+      if (disableTransitionOnChange.value) {
+        withoutModeTransitions(apply);
+        return;
+      }
+      apply();
+    }
     let unsubscribeSystemThemeMode;
     function syncSystemThemeSubscription() {
       unsubscribeSystemThemeMode?.();
@@ -183,11 +241,13 @@ var MarwesProvider = defineComponent({
       }
       syncSystemThemeSubscription();
       syncThemeToRuntime();
+      syncTargetModeAttribute();
     });
     onUnmounted(() => {
       unsubscribeSystemThemeMode?.();
     });
     watch(resolved, syncThemeToRuntime);
+    watch([activeMode, target, attribute, disableTransitionOnChange], syncTargetModeAttribute);
     watch([activePreference, enableSystem], syncSystemThemeSubscription);
     provide(marwesContextKey, {
       theme: resolved,