origam 2.29.1 → 2.30.0

package/CHANGELOG.md

@@ -18,6 +18,25 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.30.0] - 2026-10-15
+
+### Changed — `OrigamBtn` `block` : `flex: 0 0 auto` + `width: 100%`, plus de croissance sur l'axe principal (#1095)
+
+`.origam-btn--block` portait `flex: 1 0 auto` : dans un parent flex en colonne le bouton GRANDISSAIT pour remplir la hauteur (une carte etiree a la hauteur de sa voisine, ou une colonne a hauteur fixe). Il passe a **`flex: 0 0 auto` + `width: 100%`** : pleine largeur, aucune croissance. Mesure Chromium (story « Prop — block (flex column) », `size="large"`) : bouton `block` dans une carte etiree 188 px -> **44 px**, dans une colonne de 200 px 168 px -> **44 px** ; largeur = 100 % du parent en colonne et en ligne (inchangee).
+
+**Rupture (assumee, pre-1.0) :** une rangee flex de plusieurs boutons `block` qui se partageaient la largeur par `grow` (`flex-grow: 1`) donne desormais N boutons de 100 % de large. **Migration :** envelopper les boutons dans un `OrigamBtnGroup` ou une grille CSS (`display: grid; grid-auto-flow: column`) ; ou retirer `block` et poser `flex: 1` sur chaque bouton via une classe. **Ecart de rendu mesure au repos** (sonde `pnpm -F @origam/tests audit:btn-height -- --compare`, 54 752 releves, 2 544 configurations au repos, 8 identites x 2 modes, meme code de sonde avant/apres) : **160 ecarts de valeur sur 80 configurations**, TOUS `block` + `density="compact"`, sur 5 tailles : la largeur passe de 296 px a **304 px** dans un conteneur de 304 px (le `min-width: calc(100% + density)` retirait 8 px a un bouton `block` compact ; `width: 100%` le remet a la pleine largeur) et le contenu se decale de 4 px. 0 ecart de hauteur, 0 ecart hors `block` + `compact`, 0 sur `BtnGroup` / `BtnToggle`. `--origam-btn---min-width: 100%` est inchange (`max-width` ne plafonne toujours pas un `block`), `stacked`, `wrap` et la hauteur minimale se comportent comme avant.
+
+## [2.29.2] - 2026-10-15
+
+
+### Fixed — plus de flash clair -> sombre a la premiere visite : le bloc de theme SSR contient les deux modes (#1103)
+
+`origam-theme-ssr` n'emettait que la marque x le mode actifs ; un visiteur en systeme sombre sans cookie recevait le bloc clair (`data-mode` `light` -> `dark`, `--origam-color__surface---default` `#fff` -> `#0a0a0a`, fond du body blanc -> `rgb(10,10,10)`). Quand aucun mode n'est epingle (pas de cookie `light`/`dark`, `defaultMode: 'auto'`), le serveur omet desormais `data-mode` et inline les deux modes de la marque : le clair sous `@media not (prefers-color-scheme: dark)`, le sombre sous `@media (prefers-color-scheme: dark)`, avec des selecteurs ancres sur la racine et `:not([data-mode])` (marque nommee `:root:root[data-theme="X"]:not([data-mode])` (0,4,0) ; sans nom `html:not([data-theme]):not([data-mode])` (0,2,1)). Un mode epingle (cookie, `defaultMode` `light`/`dark`, ou le `data-mode` ecrit par le client a l'hydratation) l'emporte toujours. Cout : un bloc de theme de plus par theme a mode dans le HTML (+6,8 Ko mesures sur le site marketing).
+
+Les props de composants (`theme.components`) ne suivent pas le `@media` : mode non epingle, elles sont amorcees en CLAIR cote serveur et pour le rendu d'hydratation, puis passent au mode systeme apres l'hydratation (`app:mounted`) — pas de mismatch. Une marque dont les `components` different entre clair et sombre (`editorial`) montre donc ses props claires une frame sur un systeme sombre ; les tokens, eux, ne clignotent pas.
+
+La branche `Sec-CH-Prefers-Color-Scheme` de `resolveServerMode` est retiree (aucun `Accept-CH` n'etait emis : morte en pratique) ; l'overload `useRequestHeaders` du shim `#app` aussi. Le site marketing passe en `defaultMode: 'auto'`, et son bouton de bascule de mode hydrate avec l'icone « clair » avant de passer au mode systeme. Specs : `marketing-ssr-both-modes.spec.ts`, `marketing-theme-honored.spec.ts` (adaptee), `apply-theme-unpinned.util.spec.ts`.
+
 ## [2.29.1] - 2026-10-15
 
 ### Fixed — publication de rattrapage : 2.28.0 et 2.29.0 n'avaient pas été publiées

package/dist/src/components/Btn/OrigamBtn.vue

@@ -933,7 +933,11 @@ defineExpose({
 
 		&--block {
 			display: flex;
-			flex: 1 0 auto;
+			// #1095 — `flex: 1 0 auto` faisait GRANDIR le bouton sur l'axe principal
+			// d'un parent flex en colonne (80 px au lieu de 44 px dans une carte a
+			// hauteur egale). La pleine largeur est portee par `width`, pas par `grow`.
+			flex: 0 0 auto;
+			width: 100%;
 
 			--origam-btn---min-width: 100%;
 		}

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/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

@@ -18,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",
@@ -50,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 ? [{
@@ -101,7 +92,7 @@ module.exports = (0, _app.defineNuxtPlugin)({
       provide: {
         origam: {
           theme: resolvedTheme,
-          mode: resolvedMode
+          mode: modePinned ? resolvedMode : "auto"
         }
       }
     };

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

@@ -1,8 +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;
@@ -12,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",
@@ -44,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 }] : []
@@ -82,7 +77,7 @@ export default defineNuxtPlugin({
       provide: {
         origam: {
           theme: resolvedTheme,
-          mode: resolvedMode
+          mode: modePinned ? resolvedMode : "auto"
         }
       }
     };

package/dist/src/utils/Commons/apply-theme.util.cjs

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.applyTheme = applyTheme;
 exports.applyThemes = applyThemes;
 exports.installedThemesFromList = installedThemesFromList;
+exports.isModePinned = isModePinned;
 exports.resolveThemeVars = resolveThemeVars;
 exports.semanticTreeToVars = semanticTreeToVars;
 exports.themeSelector = themeSelector;
 exports.themeToCss = themeToCss;
+exports.themeToUnpinnedCss = themeToUnpinnedCss;
 exports.themeVarsToVars = themeVarsToVars;
 var _tokenName = require("./token-name.util.cjs");
 const STYLE_ELEMENT_PREFIX = "origam-theme";
@@ -91,6 +93,24 @@ ${decls}
 }
 `;
 }
+function isModePinned(cookieValue, defaultMode) {
+  const concrete = v => v === "light" || v === "dark";
+  return concrete(cookieValue) || concrete(defaultMode);
+}
+function themeToUnpinnedCss(theme) {
+  if (theme.mode !== "light" && theme.mode !== "dark") return "";
+  const vars = resolveThemeVars(theme);
+  const decls = Object.keys(vars).map(name => `    ${name}: ${vars[name]};`).join("\n");
+  const hasName = typeof theme.name === "string" && theme.name.length > 0;
+  const selector = hasName ? `:root:root[data-theme="${theme.name}"]:not([data-mode])` : "html:not([data-theme]):not([data-mode])";
+  const query = theme.mode === "dark" ? "(prefers-color-scheme: dark)" : "not (prefers-color-scheme: dark)";
+  return `@media ${query} {
+  ${selector} {
+${decls}
+  }
+}
+`;
+}
 function applyTheme(theme) {
   if (typeof document === "undefined") return null;
   const vars = resolveThemeVars(theme);

package/dist/src/utils/Commons/apply-theme.util.d.ts

@@ -42,6 +42,40 @@ export declare function themeSelector(theme: IOrigamTheme): string;
  * the Theme Builder's CSS export so a single code path produces both.
  */
 export declare function themeToCss(theme: IOrigamTheme): string;
+/*********************************************************
+ * isModePinned
+ *
+ * @description
+ * Is the colour mode PINNED by the visitor or the configuration? Pinned means a
+ * `light` / `dark` mode cookie, or a configured `defaultMode` of `light` /
+ * `dark`. Anything else (`auto`, absent, junk) leaves the mode to the system.
+ * @description
+ * Shared by both Nuxt plugins so server and client never disagree on it (#1103).
+ ********************************************************/
+export declare function isModePinned(cookieValue: string | null | undefined, defaultMode: string | undefined): boolean;
+/*********************************************************
+ * themeToUnpinnedCss
+ *
+ * @description
+ * Serialise a MODE-SCOPED theme (`mode` = `light` | `dark`) for a page whose
+ * mode is NOT pinned (#1103): no `data-mode` on `<html>`, the system decides.
+ * Returns `''` for a mode-agnostic theme — its selector never mentions
+ * `data-mode`, so the plain `themeToCss` block already serves both modes.
+ * @description
+ * light → wrapped in `@media not (prefers-color-scheme: dark)`; dark → wrapped
+ * in `@media (prefers-color-scheme: dark)`.
+ * @description
+ * Selectors are ROOT-ONLY and carry `:not([data-mode])`, so the moment a mode is
+ * pinned (the client writes `data-mode`) they stop matching and the regular
+ * `[data-mode]` blocks take over. No sub-tree form is emitted on purpose: an
+ * `<OrigamThemeProvider>` nested in a pinned page must never match them.
+ * @description
+ * Specificity is kept equal to the pinned form: named brand
+ * `:root:root[…]:not([data-mode])` = (0,4,0); unnamed
+ * `html:not([data-theme]):not([data-mode])` = (0,2,1), which beats the built-in
+ * #794 rule (0,2,0) and stays under every named brand.
+ ********************************************************/
+export declare function themeToUnpinnedCss(theme: IOrigamTheme): string;
 /**
  * Inject (or replace) a theme's CSS variables into `<head>` at runtime.
  * SSR-safe: a no-op when `document` is unavailable. Returns the `<style>`

package/dist/src/utils/Commons/apply-theme.util.js

@@ -72,6 +72,24 @@ ${decls}
 }
 `;
 }
+export function isModePinned(cookieValue, defaultMode) {
+  const concrete = (v) => v === "light" || v === "dark";
+  return concrete(cookieValue) || concrete(defaultMode);
+}
+export function themeToUnpinnedCss(theme) {
+  if (theme.mode !== "light" && theme.mode !== "dark") return "";
+  const vars = resolveThemeVars(theme);
+  const decls = Object.keys(vars).map((name) => `    ${name}: ${vars[name]};`).join("\n");
+  const hasName = typeof theme.name === "string" && theme.name.length > 0;
+  const selector = hasName ? `:root:root[data-theme="${theme.name}"]:not([data-mode])` : "html:not([data-theme]):not([data-mode])";
+  const query = theme.mode === "dark" ? "(prefers-color-scheme: dark)" : "not (prefers-color-scheme: dark)";
+  return `@media ${query} {
+  ${selector} {
+${decls}
+  }
+}
+`;
+}
 export function applyTheme(theme) {
   if (typeof document === "undefined") return null;
   const vars = resolveThemeVars(theme);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.29.1",
+  "version": "2.30.0",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [