@marwes-ui/vue 1.0.4 → 1.1.0

package/README.md

@@ -393,6 +393,12 @@ Marwes is compatible with Tailwind and shadcn-style dark variants through `targe
 
 Read the [Tailwind and shadcn integration guide](https://github.com/niklas-westman/marwes/blob/main/docs/guides/tailwind-shadcn-integration.md) for Tailwind v3/v4 examples, token mapping, provider-scoped variable limits, and the SSR no-flash boundary.
 
+### Nuxt SSR
+
+Use `createMarwesThemeStyle()`, `createMarwesThemeScript()`, and `variable-strategy="style-tag"` when a server-rendered app needs the correct light or dark variables before hydration. This is opt-in; normal Vue apps keep inline provider variables by default.
+
+Read the [theme SSR no-flash guide](https://github.com/niklas-westman/marwes/blob/main/docs/guides/theme-ssr-no-flash.md) for Nuxt setup, CSP nonces, hydration warning guidance, custom light/dark themes, and stored/system preference 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/chunk-DVJD5CQS.js

@@ -0,0 +1,3 @@
+export { createMarwesThemeScript, createMarwesThemeStyle } from '@marwes-ui/core';
+//# sourceMappingURL=chunk-DVJD5CQS.js.map
+//# sourceMappingURL=chunk-DVJD5CQS.js.map

package/dist/chunk-DVJD5CQS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-DVJD5CQS.js","sourcesContent":[]}

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as vue from 'vue';
 import { ComputedRef, VNodeChild } from 'vue';
 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';
+import { ThemeInput, ThemePreference, ThemeMode, FontLoadingConfig, ThemeVariableStrategy, 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, MarwesThemeScriptOptions, MarwesThemeStyleOptions, MwAvailableFont, MwFontFallback, MwGoogleFontFamily, MwStyledTheme, MwThemeVarName, MwThemeVarNames, MwThemeVarReference, MwThemeVars, ResolvedTheme, SpacingSize, Spacings, SwitchSize, Theme, ThemeInput, ThemeMode, ThemeModeAttribute, ThemeModeRootTarget, ThemePreference, ThemeVariableStrategy, ToneName, createFontStack, createMarwesThemeScript, createMarwesThemeStyle, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 
 type ThemeTarget = "provider" | "html" | "body";
 type ThemeAttribute = "class" | "data-theme" | "data-mode";
@@ -21,37 +21,40 @@ type MarwesProviderProps = {
     target?: ThemeTarget;
     attribute?: ThemeAttribute;
     disableTransitionOnChange?: boolean;
+    variableStrategy?: ThemeVariableStrategy;
 };
 declare const MarwesProvider: vue.DefineComponent<{
     mode?: any;
+    storageKey?: any;
+    defaultPreference?: any;
+    enableSystem?: any;
     target?: any;
     attribute?: any;
-    theme?: any;
-    defaultPreference?: any;
     preference?: any;
+    theme?: any;
     defaultMode?: any;
     fontLoading?: any;
     onPreferenceChange?: any;
     onModeChange?: any;
-    storageKey?: any;
-    enableSystem?: any;
     disableTransitionOnChange?: any;
+    variableStrategy?: any;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
     mode?: any;
+    storageKey?: any;
+    defaultPreference?: any;
+    enableSystem?: any;
     target?: any;
     attribute?: any;
-    theme?: any;
-    defaultPreference?: any;
     preference?: any;
+    theme?: any;
     defaultMode?: any;
     fontLoading?: any;
     onPreferenceChange?: any;
     onModeChange?: any;
-    storageKey?: any;
-    enableSystem?: any;
     disableTransitionOnChange?: any;
+    variableStrategy?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare function useTheme(): ResolvedTheme;
@@ -2162,11 +2165,11 @@ type YesNoRadioGroupProps = Omit<RadioGroupFieldProps, "options"> & {
 declare const YesNoRadioGroup: vue.DefineComponent<{
     disabled?: any;
     label?: any;
+    value?: any;
     error?: any;
     id?: any;
     required?: any;
     name?: any;
-    value?: any;
     ariaDescribedBy?: any;
     defaultValue?: any;
     options?: any;
@@ -2181,11 +2184,11 @@ declare const YesNoRadioGroup: vue.DefineComponent<{
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
     disabled?: any;
     label?: any;
+    value?: any;
     error?: any;
     id?: any;
     required?: any;
     name?: any;
-    value?: any;
     ariaDescribedBy?: any;
     defaultValue?: any;
     options?: any;
@@ -2204,11 +2207,11 @@ type RatingRadioGroupProps = Omit<RadioGroupFieldProps, "options"> & {
 declare const RatingRadioGroup: vue.DefineComponent<{
     disabled?: any;
     label?: any;
+    value?: any;
     error?: any;
     id?: any;
     required?: any;
     name?: any;
-    value?: any;
     ariaDescribedBy?: any;
     defaultValue?: any;
     options?: any;
@@ -2224,11 +2227,11 @@ declare const RatingRadioGroup: vue.DefineComponent<{
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
     disabled?: any;
     label?: any;
+    value?: any;
     error?: any;
     id?: any;
     required?: any;
     name?: any;
-    value?: any;
     ariaDescribedBy?: any;
     defaultValue?: any;
     options?: any;
@@ -2244,11 +2247,11 @@ type OptionRadioGroupProps = RadioGroupFieldProps;
 declare const OptionRadioGroup: vue.DefineComponent<{
     disabled?: any;
     label?: any;
+    value?: any;
     error?: any;
     id?: any;
     required?: any;
     name?: any;
-    value?: any;
     ariaDescribedBy?: any;
     defaultValue?: any;
     options?: any;
@@ -2261,11 +2264,11 @@ declare const OptionRadioGroup: vue.DefineComponent<{
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
     disabled?: any;
     label?: any;
+    value?: any;
     error?: any;
     id?: any;
     required?: any;
     name?: any;
-    value?: any;
     ariaDescribedBy?: any;
     defaultValue?: any;
     options?: any;

package/dist/index.js

@@ -1,10 +1,9 @@
+export { createMarwesThemeScript, createMarwesThemeStyle } from './chunk-DVJD5CQS.js';
 import '@marwes-ui/presets/firstEdition/styles.css';
 import { ThemeMode, resolveThemePreference, resolveThemeInput, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, sanitizeCurrencyValue, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, createDividerRecipe, createSpacingRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, createSliderRecipe, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, createDialogRecipe, isThemePreference, nextThemeMode, themeToCSSVars, richTextCommandByFormat, headingRecipe, moveTabSelection, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
 export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, IconName, Spacings, SwitchSize, ThemeMode, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 import { defineComponent, ref, computed, onMounted, onUnmounted, watch, provide, h, useAttrs, onBeforeUnmount, shallowRef, Fragment, nextTick, Teleport, inject } from 'vue';
 
-// src/index.ts
-
 // src/provider/marwes-context.ts
 var marwesContextKey = /* @__PURE__ */ Symbol("MarwesContext");
 var loadedFonts = /* @__PURE__ */ new Set();
@@ -18,6 +17,7 @@ function themeToRootStyle(theme) {
 }
 function applyThemeToElement(element, theme) {
   element.setAttribute("data-marwes-theme", "true");
+  element.setAttribute("data-marwes-mode", theme.mode);
   for (const [property, value] of Object.entries(themeToRootStyle(theme))) {
     if (property === "backgroundColor") {
       element.style.backgroundColor = value;
@@ -155,7 +155,8 @@ var MarwesProvider = defineComponent({
     "enableSystem",
     "target",
     "attribute",
-    "disableTransitionOnChange"
+    "disableTransitionOnChange",
+    "variableStrategy"
   ],
   setup(rawProps, { slots }) {
     const props = rawProps;
@@ -170,6 +171,9 @@ var MarwesProvider = defineComponent({
     const target = computed(() => props.target ?? "provider");
     const attribute = computed(() => props.attribute ?? "class");
     const disableTransitionOnChange = computed(() => props.disableTransitionOnChange === true);
+    const variableStrategy = computed(
+      () => props.variableStrategy ?? "inline"
+    );
     const isPreferenceControlled = computed(
       () => props.preference !== void 0 || props.mode !== void 0 || props.theme?.mode !== void 0
     );
@@ -198,7 +202,7 @@ var MarwesProvider = defineComponent({
       setMode(nextThemeMode(activeMode.value));
     }
     function syncThemeToRuntime() {
-      if (rootRef.value) {
+      if (rootRef.value && variableStrategy.value === "inline") {
         applyThemeToElement(rootRef.value, resolved.value);
       }
       loadThemeFonts(resolved.value, props.fontLoading ?? "auto");
@@ -246,7 +250,7 @@ var MarwesProvider = defineComponent({
     onUnmounted(() => {
       unsubscribeSystemThemeMode?.();
     });
-    watch(resolved, syncThemeToRuntime);
+    watch([resolved, variableStrategy], syncThemeToRuntime);
     watch([activeMode, target, attribute, disableTransitionOnChange], syncTargetModeAttribute);
     watch([activePreference, enableSystem], syncSystemThemeSubscription);
     provide(marwesContextKey, {
@@ -264,7 +268,8 @@ var MarwesProvider = defineComponent({
         ref: rootRef,
         class: `mw-theme--${resolved.value.mode}`,
         "data-marwes-theme": "true",
-        style: themeToRootStyle(resolved.value)
+        "data-marwes-mode": resolved.value.mode,
+        style: variableStrategy.value === "inline" ? themeToRootStyle(resolved.value) : void 0
       },
       slots.default?.()
     );