origam 2.27.0 → 2.29.2

package/dist/src/directives/Contrast/contrast.directive.js

@@ -120,15 +120,70 @@ function enforceContrast(el, enabled) {
   const better = wcagRatio(WHITE, bg) >= wcagRatio(BLACK, bg) ? "#fff" : "#000";
   el.style.setProperty("color", better, "important");
   el.dataset.origamContrastFixed = "true";
-  console.warn(
-    `[origam] Low text contrast (${ratio.toFixed(2)}:1 < ${config.threshold}:1): text rgb(${fg.join(", ")}) on background rgb(${bg.join(", ")}). Overriding text colour to ${better} for legibility. Disable with createOrigam({ contrast: false }).`,
-    el
-  );
+  if (import.meta.env?.DEV) {
+    console.warn(
+      `[origam] Low text contrast (${ratio.toFixed(2)}:1 < ${config.threshold}:1): text rgb(${fg.join(", ")}) on background rgb(${bg.join(", ")}). Overriding text colour to ${better} for legibility. Disable with createOrigam({ contrast: false }).`,
+      el
+    );
+  }
+}
+const MAX_SETTLE_PASSES = 4;
+const COLOR_TRANSITION_PROPERTIES = /* @__PURE__ */ new Set(["color", "background-color"]);
+function declaredTransitionMs(el) {
+  const toMs = (value) => {
+    const n = parseFloat(value);
+    if (Number.isNaN(n)) return 0;
+    return value.trim().endsWith("ms") ? n : n * 1e3;
+  };
+  let longest = 0;
+  for (let node = el; node; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    const durations = style.transitionDuration.split(",");
+    const delays = style.transitionDelay.split(",");
+    durations.forEach((duration, i) => {
+      longest = Math.max(longest, toMs(duration) + toMs(delays[i % delays.length] ?? "0"));
+    });
+  }
+  return longest;
+}
+function runningColorTransitions(el) {
+  const found = [];
+  for (let node = el; node; node = node.parentElement) {
+    for (const animation of node.getAnimations()) {
+      const property = animation.transitionProperty;
+      if (property && COLOR_TRANSITION_PROPERTIES.has(property) && animation.playState !== "finished") {
+        found.push(animation);
+      }
+    }
+  }
+  return found;
+}
+function forceStyleRecalc(el) {
+  return getComputedStyle(el).color;
+}
+function settleThenEnforce(el, enabled, pending, pass = 0) {
+  if (pending.cancelled) return;
+  if (!forceStyleRecalc(el)) return;
+  if (typeof el.getAnimations === "function") {
+    const running = pass < MAX_SETTLE_PASSES ? runningColorTransitions(el) : [];
+    if (running.length) {
+      Promise.allSettled(running.map((animation) => animation.finished)).then(() => settleThenEnforce(el, enabled, pending, pass + 1));
+      return;
+    }
+    enforceContrast(el, enabled);
+    return;
+  }
+  const wait = declaredTransitionMs(el);
+  if (wait > 0 && pass === 0 && typeof setTimeout !== "undefined") {
+    pending.timeout = setTimeout(() => settleThenEnforce(el, enabled, pending, 1), wait);
+    return;
+  }
+  enforceContrast(el, enabled);
 }
-const SETTLE_MS = 250;
 function cancelScheduled(el) {
   const pending = el._contrastTimers;
   if (!pending) return;
+  pending.cancelled = true;
   if (pending.raf !== void 0 && typeof cancelAnimationFrame !== "undefined") {
     cancelAnimationFrame(pending.raf);
   }
@@ -141,10 +196,7 @@ function schedule(el, enabled) {
   cancelScheduled(el);
   const pending = {};
   if (typeof requestAnimationFrame !== "undefined") {
-    pending.raf = requestAnimationFrame(() => enforceContrast(el, enabled));
-  }
-  if (typeof setTimeout !== "undefined") {
-    pending.timeout = setTimeout(() => enforceContrast(el, enabled), SETTLE_MS);
+    pending.raf = requestAnimationFrame(() => settleThenEnforce(el, enabled, pending));
   }
   el._contrastTimers = pending;
 }

package/dist/src/interfaces/Btn/btn.interface.d.ts

@@ -33,6 +33,7 @@ export interface IBtnProps extends ICommonsComponentProps, IColorProps, IBgColor
     block?: boolean;
     slim?: boolean;
     stacked?: boolean;
+    wrap?: boolean;
     text?: string;
     status?: TStatus;
     statusIconPosition?: TStatusPosition;

package/dist/src/interfaces/Commons/commons.interface.d.ts

@@ -15,6 +15,20 @@ import { TSSROptions } from '../../types/Commons/display.type';
  * `enabled` toggles the whole feature; `threshold` is the minimum acceptable
  * WCAG contrast ratio (default 4.5:1 — AA for normal text).
  */
+/*********************************************************
+ * IContrastScheduled
+ *
+ * @description
+ * What `v-contrast` has queued for one element: the animation frame that
+ * starts the measure, the fallback timer (browsers without `getAnimations`,
+ * derived from the declared transition) and a flag that cancels a measure
+ * already waiting on a transition. Stored on the element as `_contrastTimers`.
+ ********************************************************/
+export interface IContrastScheduled {
+    raf?: number;
+    timeout?: number;
+    cancelled?: boolean;
+}
 export interface IContrastOptions {
     enabled?: boolean;
     threshold?: number;

package/dist/src/interfaces/Commons/nuxt-module.interface.d.ts

@@ -1,4 +1,5 @@
 import type { IOrigamTheme } from './theme.interface';
+import type { TMode, TTheme } from '../../types/Commons/theme.type';
 /**
  * Options passed by a consumer in `nuxt.config.ts` under the `origam` key.
  *
@@ -9,7 +10,7 @@ import type { IOrigamTheme } from './theme.interface';
  * a name×mode scoped `--origam-*` block. The theme-invariant `primitive` +
  * `utilities` sheets are still loaded as CSS. Two orthogonal axes are resolved
  * SSR-side to avoid FOUC: the brand `theme` (cookie) and the color `mode`
- * (cookie + `Sec-CH-Prefers-Color-Scheme` hint).
+ * (cookie, else the system `prefers-color-scheme` via `@media`).
  *
  * ADR-004 (Implemented): the DS ships exactly ONE neutral identity (the origam
  * baseline). Brand themes live in the consuming app (e.g. the marketing
@@ -40,9 +41,9 @@ export interface IOrigamNuxtModuleOptions {
      */
     modes?: string[];
     /**
-     * Color mode applied when no cookie is set and no usable
-     * `Sec-CH-Prefers-Color-Scheme` hint is sent. Use `'auto'` to let the
-     * server fall back to the client hint (or `'light'` if absent).
+     * Color mode applied when no cookie is set. `'light'` / `'dark'` pins it.
+     * `'auto'` leaves it to the system: the server inlines both modes, the dark
+     * one under `@media (prefers-color-scheme: dark)` (#1103).
      *
      * @default 'auto'
      */
@@ -111,3 +112,16 @@ export interface IOrigamNuxtRuntimeConfig {
     modeCookieName: string;
     cookieMaxAge: number;
 }
+/*********************************************************
+ * IOrigamNuxtProvide
+ *
+ * @description
+ * Shape of what the Nuxt plugins `provide` under `nuxtApp.$origam`.
+ * @description
+ * `mode` is `'auto'` when the colour mode is NOT pinned (#1103), otherwise the
+ * pinned concrete mode.
+ ********************************************************/
+export interface IOrigamNuxtProvide {
+    theme: TTheme;
+    mode: TMode;
+}

package/dist/src/interfaces/Commons/style.interface.d.ts

@@ -23,3 +23,24 @@ export interface IStyleTagOptions extends IConfigurableDocument {
      */
     id?: string;
 }
+/*********************************************************
+ * ISsrStyleEntry / ISsrStyleCollector (#1092)
+ *
+ * @description
+ * `ISsrStyleEntry` is one `useStyle()` rule resolved for the server render:
+ * `id` is the DOM id of the `<style>` tag it belongs to, `css` the
+ * `#element-id { … }` rule, already safe to embed in a `<style>`.
+ *
+ * @description
+ * `ISsrStyleCollector` is the per-app registry of those rules. Rules are
+ * registered as GETTERS and read at collection time, so a value a later pass
+ * of the render settled on is what ships.
+ ********************************************************/
+export interface ISsrStyleEntry {
+    id: string;
+    css: string;
+}
+export interface ISsrStyleCollector {
+    add(id: string, css: () => string): void;
+    entries(): ISsrStyleEntry[];
+}

package/dist/src/nuxt/module.d.ts

@@ -1,4 +1,4 @@
-import type { IOrigamNuxtModuleOptions, IOrigamNuxtRuntimeConfig } from '../interfaces/Commons/nuxt-module.interface'
+import type { IOrigamNuxtModuleOptions, IOrigamNuxtProvide, IOrigamNuxtRuntimeConfig } from '../interfaces/Commons/nuxt-module.interface'
 
 declare module '@nuxt/schema' {
     interface NuxtConfig {
@@ -14,6 +14,12 @@ declare module '@nuxt/schema' {
     }
 }
 
+declare module '#app' {
+    interface NuxtApp {
+        $origam: IOrigamNuxtProvide
+    }
+}
+
 declare module 'nuxt/schema' {
     interface NuxtConfig {
         origam?: IOrigamNuxtModuleOptions
@@ -28,4 +34,4 @@ declare module 'nuxt/schema' {
     }
 }
 
-export { IOrigamNuxtModuleOptions, IOrigamNuxtRuntimeConfig }
+export { IOrigamNuxtModuleOptions, IOrigamNuxtProvide, IOrigamNuxtRuntimeConfig }

package/dist/src/nuxt/plugin.client.cjs

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 var _vue = require("vue");
 var _theme = require("../composables/Commons/theme.composable.cjs");
 var _origam = require("../origam.cjs");
+var _applyTheme = require("../utils/Commons/apply-theme.util.cjs");
 var _app = require("#app");
 module.exports = (0, _app.defineNuxtPlugin)({
   name: "origam:client",
@@ -23,6 +24,7 @@ module.exports = (0, _app.defineNuxtPlugin)({
       sameSite: "lax",
       path: "/"
     });
+    const modePinned = (0, _applyTheme.isModePinned)(modeCookie.value, config.defaultMode);
     const themeFromDom = typeof document !== "undefined" && document.documentElement.dataset.theme || null;
     const initialTheme = themeFromDom ?? themeCookie.value ?? config.defaultTheme;
     const initialMode = modeCookie.value ?? config.defaultMode;
@@ -35,8 +37,14 @@ module.exports = (0, _app.defineNuxtPlugin)({
     const themeApi = (0, _theme.useTheme)();
     themeApi.setTheme(initialTheme);
     themeApi.setMode(initialMode);
-    (0, _vue.watch)([themeApi.theme, themeApi.resolvedMode], ([brand, mode]) => {
-      origam._defaultsRef.value = origam._activeDefaultsFor(brand === "auto" ? "" : brand, mode);
+    const hydrated = (0, _vue.ref)(modePinned);
+    if (!modePinned) {
+      nuxtApp.hook("app:mounted", () => {
+        hydrated.value = true;
+      });
+    }
+    (0, _vue.watch)([themeApi.theme, themeApi.resolvedMode, hydrated], ([brand, mode, isHydrated]) => {
+      origam._defaultsRef.value = origam._activeDefaultsFor(brand === "auto" ? "" : brand, isHydrated ? mode : "light");
     }, {
       immediate: true
     });

package/dist/src/nuxt/plugin.client.js

@@ -1,6 +1,7 @@
-import { watch } from "vue";
+import { ref, watch } from "vue";
 import { useTheme } from "../composables/Commons/theme.composable.js";
 import { createOrigam } from "../origam.js";
+import { isModePinned } from "../utils/Commons/apply-theme.util.js";
 import { defineNuxtPlugin, useCookie, useRuntimeConfig } from "#app";
 export default defineNuxtPlugin({
   name: "origam:client",
@@ -17,6 +18,7 @@ export default defineNuxtPlugin({
       sameSite: "lax",
       path: "/"
     });
+    const modePinned = isModePinned(modeCookie.value, config.defaultMode);
     const themeFromDom = typeof document !== "undefined" && document.documentElement.dataset.theme || null;
     const initialTheme = themeFromDom ?? themeCookie.value ?? config.defaultTheme;
     const initialMode = modeCookie.value ?? config.defaultMode;
@@ -26,12 +28,18 @@ export default defineNuxtPlugin({
     const themeApi = useTheme();
     themeApi.setTheme(initialTheme);
     themeApi.setMode(initialMode);
+    const hydrated = ref(modePinned);
+    if (!modePinned) {
+      nuxtApp.hook("app:mounted", () => {
+        hydrated.value = true;
+      });
+    }
     watch(
-      [themeApi.theme, themeApi.resolvedMode],
-      ([brand, mode]) => {
+      [themeApi.theme, themeApi.resolvedMode, hydrated],
+      ([brand, mode, isHydrated]) => {
         origam._defaultsRef.value = origam._activeDefaultsFor(
           brand === "auto" ? "" : brand,
-          mode
+          isHydrated ? mode : "light"
         );
       },
       { immediate: true }

package/dist/src/nuxt/plugin.server.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _origam = require("../origam.cjs");
 var _applyTheme = require("../utils/Commons/apply-theme.util.cjs");
+var _ssrStyles = require("../utils/Commons/ssr-styles.util.cjs");
 var _theme = require("../consts/Commons/theme.const.cjs");
 var _app = require("#app");
 function resolveServerTheme(cookieValue, config) {
@@ -17,21 +18,11 @@ function resolveServerTheme(cookieValue, config) {
   }
   return _theme.ORIGAM_THEME_AUTO;
 }
-function resolveServerMode(cookieValue, config, headers) {
+function resolveServerMode(cookieValue, config) {
   if (cookieValue === _theme.ORIGAM_MODE_LIGHT || cookieValue === _theme.ORIGAM_MODE_DARK) {
     return cookieValue;
   }
-  if (config.defaultMode === _theme.ORIGAM_MODE_LIGHT || config.defaultMode === _theme.ORIGAM_MODE_DARK) {
-    return config.defaultMode;
-  }
-  const hint = headers["sec-ch-prefers-color-scheme"];
-  if (hint === _theme.ORIGAM_MODE_DARK && config.modes.includes(_theme.ORIGAM_MODE_DARK)) {
-    return _theme.ORIGAM_MODE_DARK;
-  }
-  if (hint === _theme.ORIGAM_MODE_LIGHT && config.modes.includes(_theme.ORIGAM_MODE_LIGHT)) {
-    return _theme.ORIGAM_MODE_LIGHT;
-  }
-  return _theme.ORIGAM_MODE_LIGHT;
+  return config.defaultMode === _theme.ORIGAM_MODE_DARK ? _theme.ORIGAM_MODE_DARK : _theme.ORIGAM_MODE_LIGHT;
 }
 module.exports = (0, _app.defineNuxtPlugin)({
   name: "origam:server",
@@ -49,22 +40,23 @@ module.exports = (0, _app.defineNuxtPlugin)({
       sameSite: "lax",
       path: "/"
     });
-    const headers = (0, _app.useRequestHeaders)(["sec-ch-prefers-color-scheme"]);
     const resolvedTheme = resolveServerTheme(themeCookie.value, config);
-    const resolvedMode = resolveServerMode(modeCookie.value, config, headers);
-    const htmlAttrs = {
-      [_theme.ORIGAM_MODE_ATTR]: resolvedMode
-    };
+    const modePinned = (0, _applyTheme.isModePinned)(modeCookie.value, config.defaultMode);
+    const resolvedMode = resolveServerMode(modeCookie.value, config);
+    const htmlAttrs = {};
+    if (modePinned) {
+      htmlAttrs[_theme.ORIGAM_MODE_ATTR] = resolvedMode;
+    }
     if (resolvedTheme !== _theme.ORIGAM_THEME_AUTO) {
       htmlAttrs[_theme.ORIGAM_THEME_ATTR] = resolvedTheme;
     }
     const themes = config.themes ?? [];
     const activeThemes = themes.filter(theme => {
       const brandMatches = resolvedTheme === _theme.ORIGAM_THEME_AUTO ? theme.name === void 0 || theme.name === "" : theme.name === resolvedTheme;
-      const modeMatches = theme.mode === void 0 || theme.mode === resolvedMode;
+      const modeMatches = !modePinned || theme.mode === void 0 || theme.mode === "auto" || theme.mode === resolvedMode;
       return brandMatches && modeMatches;
     });
-    const ssrThemeCss = activeThemes.map(_applyTheme.themeToCss).join("\n");
+    const ssrThemeCss = modePinned ? activeThemes.map(_applyTheme.themeToCss).join("\n") : [...activeThemes.filter(t => t.mode !== "light" && t.mode !== "dark").map(_applyTheme.themeToCss), ...activeThemes.filter(t => t.mode === "light").map(_applyTheme.themeToUnpinnedCss), ...activeThemes.filter(t => t.mode === "dark").map(_applyTheme.themeToUnpinnedCss)].join("\n");
     (0, _app.useHead)({
       htmlAttrs,
       style: ssrThemeCss ? [{
@@ -79,11 +71,28 @@ module.exports = (0, _app.defineNuxtPlugin)({
     });
     origam._defaultsRef.value = origam._activeDefaultsFor(resolvedTheme === _theme.ORIGAM_THEME_AUTO ? "" : resolvedTheme, resolvedMode);
     nuxtApp.vueApp.use(origam);
+    nuxtApp.hook("app:rendered", ({
+      ssrContext
+    }) => {
+      const styles = (0, _ssrStyles.getSsrStyles)(nuxtApp.vueApp);
+      if (styles.length && ssrContext) {
+        ssrContext.head.push({
+          style: styles.map(({
+            id,
+            css
+          }) => ({
+            id,
+            key: id,
+            innerHTML: css
+          }))
+        });
+      }
+    });
     return {
       provide: {
         origam: {
           theme: resolvedTheme,
-          mode: resolvedMode
+          mode: modePinned ? resolvedMode : "auto"
         }
       }
     };

package/dist/src/nuxt/plugin.server.js

@@ -1,7 +1,8 @@
 import { createOrigam } from "../origam.js";
-import { themeToCss } from "../utils/Commons/apply-theme.util.js";
+import { isModePinned, themeToCss, themeToUnpinnedCss } from "../utils/Commons/apply-theme.util.js";
+import { getSsrStyles } from "../utils/Commons/ssr-styles.util.js";
 import { ORIGAM_MODE_ATTR, ORIGAM_MODE_DARK, ORIGAM_MODE_LIGHT, ORIGAM_THEME_ATTR, ORIGAM_THEME_AUTO } from "../consts/Commons/theme.const.js";
-import { defineNuxtPlugin, useCookie, useHead, useRequestHeaders, useRuntimeConfig } from "#app";
+import { defineNuxtPlugin, useCookie, useHead, useRuntimeConfig } from "#app";
 function resolveServerTheme(cookieValue, config) {
   if (cookieValue && cookieValue !== ORIGAM_THEME_AUTO) {
     return cookieValue;
@@ -11,21 +12,11 @@ function resolveServerTheme(cookieValue, config) {
   }
   return ORIGAM_THEME_AUTO;
 }
-function resolveServerMode(cookieValue, config, headers) {
+function resolveServerMode(cookieValue, config) {
   if (cookieValue === ORIGAM_MODE_LIGHT || cookieValue === ORIGAM_MODE_DARK) {
     return cookieValue;
   }
-  if (config.defaultMode === ORIGAM_MODE_LIGHT || config.defaultMode === ORIGAM_MODE_DARK) {
-    return config.defaultMode;
-  }
-  const hint = headers["sec-ch-prefers-color-scheme"];
-  if (hint === ORIGAM_MODE_DARK && config.modes.includes(ORIGAM_MODE_DARK)) {
-    return ORIGAM_MODE_DARK;
-  }
-  if (hint === ORIGAM_MODE_LIGHT && config.modes.includes(ORIGAM_MODE_LIGHT)) {
-    return ORIGAM_MODE_LIGHT;
-  }
-  return ORIGAM_MODE_LIGHT;
+  return config.defaultMode === ORIGAM_MODE_DARK ? ORIGAM_MODE_DARK : ORIGAM_MODE_LIGHT;
 }
 export default defineNuxtPlugin({
   name: "origam:server",
@@ -43,22 +34,27 @@ export default defineNuxtPlugin({
       sameSite: "lax",
       path: "/"
     });
-    const headers = useRequestHeaders(["sec-ch-prefers-color-scheme"]);
     const resolvedTheme = resolveServerTheme(themeCookie.value, config);
-    const resolvedMode = resolveServerMode(modeCookie.value, config, headers);
-    const htmlAttrs = {
-      [ORIGAM_MODE_ATTR]: resolvedMode
-    };
+    const modePinned = isModePinned(modeCookie.value, config.defaultMode);
+    const resolvedMode = resolveServerMode(modeCookie.value, config);
+    const htmlAttrs = {};
+    if (modePinned) {
+      htmlAttrs[ORIGAM_MODE_ATTR] = resolvedMode;
+    }
     if (resolvedTheme !== ORIGAM_THEME_AUTO) {
       htmlAttrs[ORIGAM_THEME_ATTR] = resolvedTheme;
     }
     const themes = config.themes ?? [];
     const activeThemes = themes.filter((theme) => {
       const brandMatches = resolvedTheme === ORIGAM_THEME_AUTO ? theme.name === void 0 || theme.name === "" : theme.name === resolvedTheme;
-      const modeMatches = theme.mode === void 0 || theme.mode === resolvedMode;
+      const modeMatches = !modePinned || theme.mode === void 0 || theme.mode === "auto" || theme.mode === resolvedMode;
       return brandMatches && modeMatches;
     });
-    const ssrThemeCss = activeThemes.map(themeToCss).join("\n");
+    const ssrThemeCss = modePinned ? activeThemes.map(themeToCss).join("\n") : [
+      ...activeThemes.filter((t) => t.mode !== "light" && t.mode !== "dark").map(themeToCss),
+      ...activeThemes.filter((t) => t.mode === "light").map(themeToUnpinnedCss),
+      ...activeThemes.filter((t) => t.mode === "dark").map(themeToUnpinnedCss)
+    ].join("\n");
     useHead({
       htmlAttrs,
       style: ssrThemeCss ? [{ id: "origam-theme-ssr", key: "origam-theme-ssr", innerHTML: ssrThemeCss }] : []
@@ -69,11 +65,19 @@ export default defineNuxtPlugin({
       resolvedMode
     );
     nuxtApp.vueApp.use(origam);
+    nuxtApp.hook("app:rendered", ({ ssrContext }) => {
+      const styles = getSsrStyles(nuxtApp.vueApp);
+      if (styles.length && ssrContext) {
+        ssrContext.head.push({
+          style: styles.map(({ id, css }) => ({ id, key: id, innerHTML: css }))
+        });
+      }
+    });
     return {
       provide: {
         origam: {
           theme: resolvedTheme,
-          mode: resolvedMode
+          mode: modePinned ? resolvedMode : "auto"
         }
       }
     };

package/dist/src/origam.cjs

@@ -69,6 +69,9 @@ function createOrigam(origam = {}) {
       app.provide(_consts.ORIGAM_GO_TO_KEY, goTo);
       app.provide(_consts.ORIGAM_THEMES_KEY, installedThemes);
       app.provide(_consts.ORIGAM_DEFAULTS_KEY, defaultsRef);
+      if (!_consts.IN_BROWSER) {
+        app.provide(_consts.ORIGAM_SSR_STYLES_KEY, (0, _utils.registerSsrStyleCollector)(app));
+      }
       (0, _composables.installThemePropsResolver)(app, themedKeysUnion, variantPresets);
       app.provide(_consts.ORIGAM_THEME_DEFAULTS_KEY, (brand, mode) => activeDefaultsFor(allThemes, brand, mode));
       if (_consts.IN_BROWSER && options.ssr) {

package/dist/src/origam.js

@@ -20,13 +20,14 @@ import {
   ORIGAM_GO_TO_KEY,
   ORIGAM_ICONS_KEY,
   ORIGAM_LOCALE_KEY,
+  ORIGAM_SSR_STYLES_KEY,
   ORIGAM_THEME_DEFAULTS_KEY,
   ORIGAM_THEMES_KEY,
   VARIANT_PRESETS
 } from "./consts/index.js";
 import * as origamDirectives from "./directives/index.js";
 import { setContrastConfig } from "./directives/Contrast/contrast.directive.js";
-import { applyThemes, installedThemesFromList, mergeDeep } from "./utils/index.js";
+import { applyThemes, installedThemesFromList, mergeDeep, registerSsrStyleCollector } from "./utils/index.js";
 import "@mdi/font/css/materialdesignicons.css";
 import { defineComponent, effectScope, nextTick, reactive } from "vue";
 export function createOrigam(origam = {}) {
@@ -88,6 +89,9 @@ export function createOrigam(origam = {}) {
       app.provide(ORIGAM_GO_TO_KEY, goTo);
       app.provide(ORIGAM_THEMES_KEY, installedThemes);
       app.provide(ORIGAM_DEFAULTS_KEY, defaultsRef);
+      if (!IN_BROWSER) {
+        app.provide(ORIGAM_SSR_STYLES_KEY, registerSsrStyleCollector(app));
+      }
       installThemePropsResolver(app, themedKeysUnion, variantPresets);
       app.provide(ORIGAM_THEME_DEFAULTS_KEY, (brand, mode) => activeDefaultsFor(allThemes, brand, mode));
       if (IN_BROWSER && options.ssr) {