origam 2.5.0 → 2.6.1

package/dist/src/interfaces/Title/title.interface.d.ts

@@ -1,4 +1,4 @@
-import type { IBorderProps, IBgColorProps, IColorProps, ICommonsComponentProps, IDensityProps, IMarginProps, IPaddingProps, ITagProps } from '../../interfaces';
-export interface ITitleProps extends ITagProps, ICommonsComponentProps, IColorProps, IBgColorProps, IDensityProps, IPaddingProps, IMarginProps, IBorderProps {
+import type { IBorderProps, IBgColorProps, IColorProps, ICommonsComponentProps, IDensityProps, IMarginProps, IPaddingProps, ITagProps, ITypographyProps } from '../../interfaces';
+export interface ITitleProps extends ITagProps, ICommonsComponentProps, IColorProps, IBgColorProps, IDensityProps, IPaddingProps, IMarginProps, IBorderProps, ITypographyProps {
     text?: string;
 }

package/dist/src/interfaces/Toolbar/toolbar.interface.d.ts

@@ -1,5 +1,5 @@
-import type { IActiveProps, IBgColorProps, IBorderProps, IColorProps, ICommonsComponentProps, IDensityProps, IDimensionProps, IElevationProps, IHoverProps, IMarginProps, IPaddingProps, IPositionProps, IRoundedProps, ITagProps } from '../../interfaces';
-export interface IToolbarProps extends ITagProps, ICommonsComponentProps, IBorderProps, IRoundedProps, IElevationProps, IDensityProps, IColorProps, IBgColorProps, IPaddingProps, IMarginProps, IPositionProps, IDimensionProps, IActiveProps, IHoverProps {
+import type { IActiveProps, IBgColorProps, IBorderProps, IColorProps, ICommonsComponentProps, IDensityProps, IDimensionProps, IElevationProps, IHoverProps, IMarginProps, IPaddingProps, IPositionProps, IRoundedProps, ITagProps, ITypographyProps } from '../../interfaces';
+export interface IToolbarProps extends ITagProps, ICommonsComponentProps, IBorderProps, IRoundedProps, IElevationProps, IDensityProps, IColorProps, IBgColorProps, IPaddingProps, IMarginProps, IPositionProps, IDimensionProps, IActiveProps, IHoverProps, ITypographyProps {
     collapse?: boolean;
     flat?: boolean;
     floating?: boolean;

package/dist/src/interfaces/Tooltip/tooltip.interface.d.ts

@@ -1,5 +1,5 @@
-import type { IActivatorProps, IBgColorProps, IColorProps, ICommonsComponentEmits, ICommonsComponentProps, IDimensionProps, ILazyProps, ILocationStrategyProps, IOverlayProps, IScrimProps, IScrollStrategyProps, ITransitionComponentProps } from '../../interfaces';
-export interface ITooltipProps extends ICommonsComponentProps, IOverlayProps, IColorProps, IBgColorProps, IDimensionProps, IActivatorProps, ILocationStrategyProps, IScrollStrategyProps, ILazyProps, ITransitionComponentProps, IScrimProps {
+import type { IActivatorProps, IBgColorProps, IColorProps, ICommonsComponentEmits, ICommonsComponentProps, IDimensionProps, ILazyProps, ILocationStrategyProps, IOverlayProps, IScrimProps, IScrollStrategyProps, ITransitionComponentProps, ITypographyProps } from '../../interfaces';
+export interface ITooltipProps extends ICommonsComponentProps, IOverlayProps, IColorProps, IBgColorProps, IDimensionProps, IActivatorProps, ILocationStrategyProps, IScrollStrategyProps, ILazyProps, ITransitionComponentProps, IScrimProps, ITypographyProps {
     id?: string;
     text?: string;
 }

package/dist/src/interfaces/Video/video.interface.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import type { IBgColorProps, IBorderProps, IColorProps, ICommonsComponentProps, IDimensionProps, IElevationProps, IMarginProps, IMediaPlayerEmits, IMediaPlayerMethods, IMediaPlayerState, IPaddingProps, IRoundedProps, IUseMediaPlayerOptions, IVideoSource, IVideoTrack } from '../../interfaces';
+import type { IBgColorProps, IBorderProps, IColorProps, ICommonsComponentProps, IDimensionProps, IElevationProps, IMarginProps, IMediaPlayerEmits, IMediaPlayerMethods, IMediaPlayerState, IPaddingProps, IRoundedProps, ITypographyProps, IUseMediaPlayerOptions, IVideoSource, IVideoTrack } from '../../interfaces';
 import type { TVideoControls } from '../../types';
 /**
  * Bindings passed to the `#controls` scoped slot of `<OrigamVideo>`.
@@ -71,7 +71,7 @@ export interface IVideoSlots {
 /**
  * Props for `<OrigamVideo>`.
  */
-export interface IVideoProps extends ICommonsComponentProps, IColorProps, IBgColorProps, IDimensionProps, IRoundedProps, IBorderProps, IMarginProps, IPaddingProps, IElevationProps {
+export interface IVideoProps extends ICommonsComponentProps, IColorProps, IBgColorProps, IDimensionProps, IRoundedProps, IBorderProps, IMarginProps, IPaddingProps, IElevationProps, ITypographyProps {
     /**
      * Media URL — either a single string for `<video src>`, or an array
      * of `<source>` descriptors when multiple formats are provided. The

package/dist/src/interfaces/Window/window.interface.d.ts

@@ -1,7 +1,7 @@
-import type { IBorderProps, ICommonsComponentEmits, ICommonsComponentProps, IDirectionProps, IElevationProps, IMarginProps, IPaddingProps, IRoundedProps, ITagProps, ITouchHandlers } from '../../interfaces';
+import type { IActiveProps, IBgColorProps, IBorderProps, ICommonsComponentEmits, ICommonsComponentProps, IDirectionProps, IElevationProps, IHoverProps, IMarginProps, IPaddingProps, IRoundedProps, ITagProps, ITouchHandlers } from '../../interfaces';
 import type { TIcon } from '../../types';
 import type { ComputedRef, Ref } from 'vue';
-export interface IWindowProps extends ICommonsComponentProps, ITagProps, IDirectionProps, IBorderProps, IPaddingProps, IMarginProps, IRoundedProps, IElevationProps {
+export interface IWindowProps extends ICommonsComponentProps, ITagProps, IDirectionProps, IBorderProps, IPaddingProps, IMarginProps, IRoundedProps, IElevationProps, IBgColorProps, IHoverProps, IActiveProps {
     continuous?: boolean;
     nextIcon?: TIcon;
     prevIcon?: TIcon;

package/dist/src/interfaces/index.cjs

@@ -14,6 +14,17 @@ Object.keys(_alert).forEach(function (key) {
     }
   });
 });
+var _app = require("./App/app.interface.cjs");
+Object.keys(_app).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _app[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _app[key];
+    }
+  });
+});
 var _appBar = require("./App/app-bar.interface.cjs");
 Object.keys(_appBar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1015,6 +1026,17 @@ Object.keys(_touch).forEach(function (key) {
     }
   });
 });
+var _typography = require("./Commons/typography.interface.cjs");
+Object.keys(_typography).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _typography[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _typography[key];
+    }
+  });
+});
 var _validation = require("./Commons/validation.interface.cjs");
 Object.keys(_validation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -2478,6 +2500,17 @@ Object.keys(_nuxtModule).forEach(function (key) {
     }
   });
 });
+var _origamTheme = require("./Theme/origam-theme.interface.cjs");
+Object.keys(_origamTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _origamTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _origamTheme[key];
+    }
+  });
+});
 var _qrCode = require("./QrCode/qr-code.interface.cjs");
 Object.keys(_qrCode).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/src/interfaces/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Alert/alert.interface';
+export * from './App/app.interface';
 export * from './App/app-bar.interface';
 export * from './Avatar/avatar.interface';
 export * from './Avatar/avatar-group.interface';
@@ -90,6 +91,7 @@ export * from './Commons/status.interface';
 export * from './Commons/sticky.interface';
 export * from './Commons/style.interface';
 export * from './Commons/touch.interface';
+export * from './Commons/typography.interface';
 export * from './Commons/validation.interface';
 export * from './Commons/virtual.interface';
 export * from './ContextualMenu/contextual-menu.interface';
@@ -223,6 +225,7 @@ export * from './Timeline/timeline.interface';
 export * from './Treeview/treeview.interface';
 export * from './Mask/mask-options.interface';
 export * from './Nuxt/nuxt-module.interface';
+export * from './Theme/origam-theme.interface';
 export * from './QrCode/qr-code.interface';
 export * from './QrCode/qr-code-logo.interface';
 export * from './Watermark/watermark.interface';

package/dist/src/interfaces/index.js

@@ -1,4 +1,5 @@
 export * from "./Alert/alert.interface.js";
+export * from "./App/app.interface.js";
 export * from "./App/app-bar.interface.js";
 export * from "./Avatar/avatar.interface.js";
 export * from "./Avatar/avatar-group.interface.js";
@@ -90,6 +91,7 @@ export * from "./Commons/status.interface.js";
 export * from "./Commons/sticky.interface.js";
 export * from "./Commons/style.interface.js";
 export * from "./Commons/touch.interface.js";
+export * from "./Commons/typography.interface.js";
 export * from "./Commons/validation.interface.js";
 export * from "./Commons/virtual.interface.js";
 export * from "./ContextualMenu/contextual-menu.interface.js";
@@ -223,6 +225,7 @@ export * from "./Timeline/timeline.interface.js";
 export * from "./Treeview/treeview.interface.js";
 export * from "./Mask/mask-options.interface.js";
 export * from "./Nuxt/nuxt-module.interface.js";
+export * from "./Theme/origam-theme.interface.js";
 export * from "./QrCode/qr-code.interface.js";
 export * from "./QrCode/qr-code-logo.interface.js";
 export * from "./Watermark/watermark.interface.js";

package/dist/src/nuxt/module.cjs

@@ -4,18 +4,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _nodeFs = require("node:fs");
+var _nodePath = require("node:path");
 var _kit = require("@nuxt/kit");
 const MODULE_NAME = "origam-nuxt";
 const CONFIG_KEY = "origam";
+const NUXT_COMPOSABLES_BLOCKLIST = /* @__PURE__ */new Set(["useRoute", "useRouter", "useLink", "useHydration"]);
+const DEFAULT_THEMES = [];
+const DEFAULT_MODES = ["light", "dark"];
 const DEFAULTS = {
-  themes: ["light", "dark"],
+  themes: DEFAULT_THEMES,
   defaultTheme: "auto",
+  modes: DEFAULT_MODES,
+  defaultMode: "auto",
   cookieName: "origam-theme",
+  modeCookieName: "origam-mode",
   cookieMaxAge: 60 * 60 * 24 * 365,
   autoImport: true,
   includeUtilities: true,
   prefix: "Origam"
 };
+const SCALAR_DEFAULTS = {
+  defaultTheme: DEFAULTS.defaultTheme,
+  defaultMode: DEFAULTS.defaultMode,
+  cookieName: DEFAULTS.cookieName,
+  modeCookieName: DEFAULTS.modeCookieName,
+  cookieMaxAge: DEFAULTS.cookieMaxAge,
+  autoImport: DEFAULTS.autoImport,
+  includeUtilities: DEFAULTS.includeUtilities,
+  prefix: DEFAULTS.prefix
+};
 module.exports = (0, _kit.defineNuxtModule)({
   meta: {
     name: MODULE_NAME,
@@ -24,12 +42,15 @@ module.exports = (0, _kit.defineNuxtModule)({
       nuxt: "^3.0.0 || ^4.0.0"
     }
   },
-  defaults: DEFAULTS,
+  defaults: SCALAR_DEFAULTS,
   setup(options, nuxt) {
     const resolver = (0, _kit.createResolver)(require('url').pathToFileURL(__filename).toString());
-    const themes = options.themes ?? DEFAULTS.themes;
+    const themes = options.themes ?? DEFAULT_THEMES;
     const defaultTheme = options.defaultTheme ?? DEFAULTS.defaultTheme;
+    const modes = options.modes ?? DEFAULT_MODES;
+    const defaultMode = options.defaultMode ?? DEFAULTS.defaultMode;
     const cookieName = options.cookieName ?? DEFAULTS.cookieName;
+    const modeCookieName = options.modeCookieName ?? DEFAULTS.modeCookieName;
     const cookieMaxAge = options.cookieMaxAge ?? DEFAULTS.cookieMaxAge;
     const autoImport = options.autoImport ?? DEFAULTS.autoImport;
     const includeUtilities = options.includeUtilities ?? DEFAULTS.includeUtilities;
@@ -37,10 +58,9 @@ module.exports = (0, _kit.defineNuxtModule)({
     if (!nuxt.options.css.includes("origam/tokens/css/primitive")) {
       nuxt.options.css.unshift("origam/tokens/css/primitive");
     }
-    for (const theme of themes) {
-      const cssId = `origam/tokens/css/${theme}`;
-      if (!nuxt.options.css.includes(cssId)) {
-        nuxt.options.css.push(cssId);
+    for (const sheet of ["origam/tokens/css/light", "origam/tokens/css/dark"]) {
+      if (!nuxt.options.css.includes(sheet)) {
+        nuxt.options.css.push(sheet);
       }
     }
     if (includeUtilities && !nuxt.options.css.includes("origam/tokens/css/utilities")) {
@@ -55,7 +75,52 @@ module.exports = (0, _kit.defineNuxtModule)({
       mode: "client"
     });
     if (autoImport) {
-      (0, _kit.addImportsDir)(resolver.resolve("../composables"));
+      const composablesRoot = resolver.resolve("../composables");
+      const exportNameRegex = /export\s+(?:async\s+)?(?:function|const|let|var)\s+([A-Za-z_$][\w$]*)/g;
+      const collect = (dir, acc) => {
+        let entries;
+        try {
+          entries = (0, _nodeFs.readdirSync)(dir);
+        } catch {
+          return;
+        }
+        for (const entry of entries) {
+          const full = (0, _nodePath.join)(dir, entry);
+          let s;
+          try {
+            s = (0, _nodeFs.statSync)(full);
+          } catch {
+            continue;
+          }
+          if (s.isDirectory()) {
+            collect(full, acc);
+            continue;
+          }
+          if (!/\.(?:m?js|ts)$/.test(entry)) continue;
+          if (entry.endsWith(".d.ts")) continue;
+          let src = "";
+          try {
+            src = (0, _nodeFs.readFileSync)(full, "utf-8");
+          } catch {
+            continue;
+          }
+          let m;
+          exportNameRegex.lastIndex = 0;
+          while (m = exportNameRegex.exec(src)) {
+            const name = m[1];
+            if (NUXT_COMPOSABLES_BLOCKLIST.has(name)) continue;
+            acc.push({
+              name,
+              from: full
+            });
+          }
+        }
+      };
+      const imports = [];
+      collect(composablesRoot, imports);
+      if (imports.length) {
+        (0, _kit.addImports)(imports);
+      }
       (0, _kit.addComponentsDir)({
         path: resolver.resolve("../components"),
         prefix: "",
@@ -65,9 +130,14 @@ module.exports = (0, _kit.defineNuxtModule)({
     }
     nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {};
     nuxt.options.runtimeConfig.public.origam = {
+      // Installed theme OBJECTS, passed straight to createOrigam in the
+      // plugins (ADR-004 — no preset-name resolution).
       themes,
       defaultTheme,
+      modes,
+      defaultMode,
       cookieName,
+      modeCookieName,
       cookieMaxAge
     };
   }

package/dist/src/nuxt/module.js

@@ -1,15 +1,38 @@
-import { addComponentsDir, addImportsDir, addPlugin, createResolver, defineNuxtModule } from "@nuxt/kit";
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { addComponentsDir, addImports, addPlugin, createResolver, defineNuxtModule } from "@nuxt/kit";
 const MODULE_NAME = "origam-nuxt";
 const CONFIG_KEY = "origam";
+const NUXT_COMPOSABLES_BLOCKLIST = /* @__PURE__ */ new Set([
+  "useRoute",
+  "useRouter",
+  "useLink",
+  "useHydration"
+]);
+const DEFAULT_THEMES = [];
+const DEFAULT_MODES = ["light", "dark"];
 const DEFAULTS = {
-  themes: ["light", "dark"],
+  themes: DEFAULT_THEMES,
   defaultTheme: "auto",
+  modes: DEFAULT_MODES,
+  defaultMode: "auto",
   cookieName: "origam-theme",
+  modeCookieName: "origam-mode",
   cookieMaxAge: 60 * 60 * 24 * 365,
   autoImport: true,
   includeUtilities: true,
   prefix: "Origam"
 };
+const SCALAR_DEFAULTS = {
+  defaultTheme: DEFAULTS.defaultTheme,
+  defaultMode: DEFAULTS.defaultMode,
+  cookieName: DEFAULTS.cookieName,
+  modeCookieName: DEFAULTS.modeCookieName,
+  cookieMaxAge: DEFAULTS.cookieMaxAge,
+  autoImport: DEFAULTS.autoImport,
+  includeUtilities: DEFAULTS.includeUtilities,
+  prefix: DEFAULTS.prefix
+};
 export default defineNuxtModule({
   meta: {
     name: MODULE_NAME,
@@ -18,12 +41,15 @@ export default defineNuxtModule({
       nuxt: "^3.0.0 || ^4.0.0"
     }
   },
-  defaults: DEFAULTS,
+  defaults: SCALAR_DEFAULTS,
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    const themes = options.themes ?? DEFAULTS.themes;
+    const themes = options.themes ?? DEFAULT_THEMES;
     const defaultTheme = options.defaultTheme ?? DEFAULTS.defaultTheme;
+    const modes = options.modes ?? DEFAULT_MODES;
+    const defaultMode = options.defaultMode ?? DEFAULTS.defaultMode;
     const cookieName = options.cookieName ?? DEFAULTS.cookieName;
+    const modeCookieName = options.modeCookieName ?? DEFAULTS.modeCookieName;
     const cookieMaxAge = options.cookieMaxAge ?? DEFAULTS.cookieMaxAge;
     const autoImport = options.autoImport ?? DEFAULTS.autoImport;
     const includeUtilities = options.includeUtilities ?? DEFAULTS.includeUtilities;
@@ -31,10 +57,9 @@ export default defineNuxtModule({
     if (!nuxt.options.css.includes("origam/tokens/css/primitive")) {
       nuxt.options.css.unshift("origam/tokens/css/primitive");
     }
-    for (const theme of themes) {
-      const cssId = `origam/tokens/css/${theme}`;
-      if (!nuxt.options.css.includes(cssId)) {
-        nuxt.options.css.push(cssId);
+    for (const sheet of ["origam/tokens/css/light", "origam/tokens/css/dark"]) {
+      if (!nuxt.options.css.includes(sheet)) {
+        nuxt.options.css.push(sheet);
       }
     }
     if (includeUtilities && !nuxt.options.css.includes("origam/tokens/css/utilities")) {
@@ -49,7 +74,49 @@ export default defineNuxtModule({
       mode: "client"
     });
     if (autoImport) {
-      addImportsDir(resolver.resolve("../composables"));
+      const composablesRoot = resolver.resolve("../composables");
+      const exportNameRegex = /export\s+(?:async\s+)?(?:function|const|let|var)\s+([A-Za-z_$][\w$]*)/g;
+      const collect = (dir, acc) => {
+        let entries;
+        try {
+          entries = readdirSync(dir);
+        } catch {
+          return;
+        }
+        for (const entry of entries) {
+          const full = join(dir, entry);
+          let s;
+          try {
+            s = statSync(full);
+          } catch {
+            continue;
+          }
+          if (s.isDirectory()) {
+            collect(full, acc);
+            continue;
+          }
+          if (!/\.(?:m?js|ts)$/.test(entry)) continue;
+          if (entry.endsWith(".d.ts")) continue;
+          let src = "";
+          try {
+            src = readFileSync(full, "utf-8");
+          } catch {
+            continue;
+          }
+          let m;
+          exportNameRegex.lastIndex = 0;
+          while (m = exportNameRegex.exec(src)) {
+            const name = m[1];
+            if (NUXT_COMPOSABLES_BLOCKLIST.has(name)) continue;
+            acc.push({ name, from: full });
+          }
+        }
+      };
+      const imports = [];
+      collect(composablesRoot, imports);
+      if (imports.length) {
+        addImports(imports);
+      }
       addComponentsDir({
         path: resolver.resolve("../components"),
         prefix: "",
@@ -59,9 +126,14 @@ export default defineNuxtModule({
     }
     nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {};
     nuxt.options.runtimeConfig.public.origam = {
+      // Installed theme OBJECTS, passed straight to createOrigam in the
+      // plugins (ADR-004 — no preset-name resolution).
       themes,
       defaultTheme,
+      modes,
+      defaultMode,
       cookieName,
+      modeCookieName,
       cookieMaxAge
     };
   }

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 
 var _vue = require("vue");
 var _composables = require("../composables/index.cjs");
-var _consts = require("../consts/index.cjs");
 var _origam = require("../origam.cjs");
 var _app = require("#app");
 module.exports = (0, _app.defineNuxtPlugin)({
@@ -14,29 +13,48 @@ module.exports = (0, _app.defineNuxtPlugin)({
   setup(nuxtApp) {
     const runtimeConfig = (0, _app.useRuntimeConfig)().public;
     const config = runtimeConfig.origam;
-    const cookie = (0, _app.useCookie)(config.cookieName, {
+    const themeCookie = (0, _app.useCookie)(config.cookieName, {
       maxAge: config.cookieMaxAge,
       sameSite: "lax",
       path: "/"
     });
-    const fromDom = typeof document !== "undefined" && document.documentElement.dataset.theme || null;
-    const initialTheme = fromDom ?? cookie.value ?? config.defaultTheme;
-    const origam = (0, _origam.createOrigam)();
+    const modeCookie = (0, _app.useCookie)(config.modeCookieName, {
+      maxAge: config.cookieMaxAge,
+      sameSite: "lax",
+      path: "/"
+    });
+    const themeFromDom = typeof document !== "undefined" && document.documentElement.dataset.theme || null;
+    const initialTheme = themeFromDom ?? themeCookie.value ?? config.defaultTheme;
+    const initialMode = modeCookie.value ?? config.defaultMode;
+    const themes = config.themes ?? [];
+    const origam = (0, _origam.createOrigam)({
+      themes,
+      ssr: true
+    });
     nuxtApp.vueApp.use(origam);
     const themeApi = (0, _composables.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);
+    }, {
+      immediate: true
+    });
     (0, _vue.watch)(themeApi.theme, next => {
-      cookie.value = next;
-      if (typeof document !== "undefined") {
-        document.documentElement.setAttribute(_consts.ORIGAM_THEME_ATTR, next);
-      }
+      themeCookie.value = next;
+    }, {
+      flush: "post"
+    });
+    (0, _vue.watch)(themeApi.mode, next => {
+      modeCookie.value = next;
     }, {
       flush: "post"
     });
     return {
       provide: {
         origam: {
-          theme: initialTheme
+          theme: initialTheme,
+          mode: initialMode
         }
       }
     };

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

@@ -1,6 +1,5 @@
 import { watch } from "vue";
 import { useTheme } from "../composables/index.js";
-import { ORIGAM_THEME_ATTR } from "../consts/index.js";
 import { createOrigam } from "../origam.js";
 import { defineNuxtPlugin, useCookie, useRuntimeConfig } from "#app";
 export default defineNuxtPlugin({
@@ -8,27 +7,46 @@ export default defineNuxtPlugin({
   setup(nuxtApp) {
     const runtimeConfig = useRuntimeConfig().public;
     const config = runtimeConfig.origam;
-    const cookie = useCookie(config.cookieName, {
+    const themeCookie = useCookie(config.cookieName, {
       maxAge: config.cookieMaxAge,
       sameSite: "lax",
       path: "/"
     });
-    const fromDom = typeof document !== "undefined" && document.documentElement.dataset.theme || null;
-    const initialTheme = fromDom ?? cookie.value ?? config.defaultTheme;
-    const origam = createOrigam();
+    const modeCookie = useCookie(config.modeCookieName, {
+      maxAge: config.cookieMaxAge,
+      sameSite: "lax",
+      path: "/"
+    });
+    const themeFromDom = typeof document !== "undefined" && document.documentElement.dataset.theme || null;
+    const initialTheme = themeFromDom ?? themeCookie.value ?? config.defaultTheme;
+    const initialMode = modeCookie.value ?? config.defaultMode;
+    const themes = config.themes ?? [];
+    const origam = createOrigam({ themes, ssr: true });
     nuxtApp.vueApp.use(origam);
     const themeApi = useTheme();
     themeApi.setTheme(initialTheme);
+    themeApi.setMode(initialMode);
+    watch(
+      [themeApi.theme, themeApi.resolvedMode],
+      ([brand, mode]) => {
+        origam._defaultsRef.value = origam._activeDefaultsFor(
+          brand === "auto" ? "" : brand,
+          mode
+        );
+      },
+      { immediate: true }
+    );
     watch(themeApi.theme, (next) => {
-      cookie.value = next;
-      if (typeof document !== "undefined") {
-        document.documentElement.setAttribute(ORIGAM_THEME_ATTR, next);
-      }
+      themeCookie.value = next;
+    }, { flush: "post" });
+    watch(themeApi.mode, (next) => {
+      modeCookie.value = next;
     }, { flush: "post" });
     return {
       provide: {
         origam: {
-          theme: initialTheme
+          theme: initialTheme,
+          mode: initialMode
         }
       }
     };

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

@@ -5,20 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 var _origam = require("../origam.cjs");
+var _applyTheme = require("../utils/Theme/apply-theme.util.cjs");
 var _consts = require("../consts/index.cjs");
 var _app = require("#app");
-function resolveServerTheme(cookieValue, config, headers) {
+function resolveServerTheme(cookieValue, config) {
   if (cookieValue && cookieValue !== _consts.ORIGAM_THEME_AUTO) {
     return cookieValue;
   }
-  if (config.defaultTheme && config.defaultTheme !== _consts.ORIGAM_THEME_AUTO && cookieValue !== _consts.ORIGAM_THEME_AUTO) {
+  if (config.defaultTheme && config.defaultTheme !== _consts.ORIGAM_THEME_AUTO) {
     return config.defaultTheme;
   }
+  return _consts.ORIGAM_THEME_AUTO;
+}
+function resolveServerMode(cookieValue, config, headers) {
+  if (cookieValue === _consts.ORIGAM_MODE_LIGHT || cookieValue === _consts.ORIGAM_MODE_DARK) {
+    return cookieValue;
+  }
+  if (config.defaultMode === _consts.ORIGAM_MODE_LIGHT || config.defaultMode === _consts.ORIGAM_MODE_DARK) {
+    return config.defaultMode;
+  }
   const hint = headers["sec-ch-prefers-color-scheme"];
-  if (hint === _consts.ORIGAM_THEME_DARK) {
-    return config.themes.includes(_consts.ORIGAM_THEME_DARK) ? _consts.ORIGAM_THEME_DARK : config.themes[0] ?? _consts.ORIGAM_THEME_LIGHT;
+  if (hint === _consts.ORIGAM_MODE_DARK && config.modes.includes(_consts.ORIGAM_MODE_DARK)) {
+    return _consts.ORIGAM_MODE_DARK;
   }
-  return config.themes.includes(_consts.ORIGAM_THEME_LIGHT) ? _consts.ORIGAM_THEME_LIGHT : config.themes[0] ?? _consts.ORIGAM_THEME_LIGHT;
+  if (hint === _consts.ORIGAM_MODE_LIGHT && config.modes.includes(_consts.ORIGAM_MODE_LIGHT)) {
+    return _consts.ORIGAM_MODE_LIGHT;
+  }
+  return _consts.ORIGAM_MODE_LIGHT;
 }
 module.exports = (0, _app.defineNuxtPlugin)({
   name: "origam:server",
@@ -26,24 +39,51 @@ module.exports = (0, _app.defineNuxtPlugin)({
   setup(nuxtApp) {
     const runtimeConfig = (0, _app.useRuntimeConfig)().public;
     const config = runtimeConfig.origam;
-    const cookie = (0, _app.useCookie)(config.cookieName, {
+    const themeCookie = (0, _app.useCookie)(config.cookieName, {
+      maxAge: config.cookieMaxAge,
+      sameSite: "lax",
+      path: "/"
+    });
+    const modeCookie = (0, _app.useCookie)(config.modeCookieName, {
       maxAge: config.cookieMaxAge,
       sameSite: "lax",
       path: "/"
     });
     const headers = (0, _app.useRequestHeaders)(["sec-ch-prefers-color-scheme"]);
-    const resolved = resolveServerTheme(cookie.value, config, headers);
+    const resolvedTheme = resolveServerTheme(themeCookie.value, config);
+    const resolvedMode = resolveServerMode(modeCookie.value, config, headers);
+    const htmlAttrs = {
+      [_consts.ORIGAM_MODE_ATTR]: resolvedMode
+    };
+    if (resolvedTheme !== _consts.ORIGAM_THEME_AUTO) {
+      htmlAttrs[_consts.ORIGAM_THEME_ATTR] = resolvedTheme;
+    }
+    const themes = config.themes ?? [];
+    const activeThemes = themes.filter(theme => {
+      const brandMatches = resolvedTheme === _consts.ORIGAM_THEME_AUTO ? theme.name === void 0 || theme.name === "" : theme.name === resolvedTheme;
+      const modeMatches = theme.mode === void 0 || theme.mode === resolvedMode;
+      return brandMatches && modeMatches;
+    });
+    const ssrThemeCss = activeThemes.map(_applyTheme.themeToCss).join("\n");
     (0, _app.useHead)({
-      htmlAttrs: {
-        "data-theme": resolved
-      }
+      htmlAttrs,
+      style: ssrThemeCss ? [{
+        id: "origam-theme-ssr",
+        key: "origam-theme-ssr",
+        innerHTML: ssrThemeCss
+      }] : []
+    });
+    const origam = (0, _origam.createOrigam)({
+      themes,
+      ssr: true
     });
-    const origam = (0, _origam.createOrigam)();
+    origam._defaultsRef.value = origam._activeDefaultsFor(resolvedTheme === _consts.ORIGAM_THEME_AUTO ? "" : resolvedTheme, resolvedMode);
     nuxtApp.vueApp.use(origam);
     return {
       provide: {
         origam: {
-          theme: resolved
+          theme: resolvedTheme,
+          mode: resolvedMode
         }
       }
     };