origam 2.36.0 → 2.37.1

package/CHANGELOG.md

@@ -18,6 +18,26 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.37.1] - 2026-10-19
+
+### Fixed — `OrigamImg` / `OrigamResponsive` : prop `tag`, `<img>` visible en SSR, fondu en rendu client seul (#1182)
+
+Un `<origam-img>` placé dans un `<p>` (contenu prose) produisait un `<div>` invalide dans un paragraphe, que le parseur HTML expulse : DOM serveur et client divergeaient. Et l'`<img>` était servie en `display:none` jusqu'au `load` côté client, donc invisible tant que le JS n'avait pas tourné.
+
+- **Nouvelle prop `tag`** (défaut `'div'`) sur `OrigamResponsive` et `OrigamImg` (transmise au Responsive et aux conteneurs placeholder / error / gradient). `tag="span"` garde un DOM valide dans un `<p>`.
+- **`<img>` visible dans le HTML serveur** : elle n'est plus masquée avant le `load`.
+- **Fondu conservé uniquement au montage client** (navigation SPA, `v-if` après hydratation). Une image hydratée depuis le HTML serveur s'affiche sans fondu et sans clignotement.
+- ⚠️ Changement de rendu assumé : en rendu serveur puis hydratation, l'image n'apparaît plus en fondu.
+
+## [2.37.0] - 2026-10-19
+
+### Added — module Nuxt : options `locale` transmises à `createOrigam` (#1181)
+
+- Le module accepte `origam: { locale: { locale, fallbackLocale, messages } }` (même forme que `createOrigam({ locale })`, type `ILocaleOptions`). Les options transitent par `runtimeConfig.public.origam.locale` et sont passées à l'identique par les plugins client et serveur : pas d'écart d'hydratation.
+- Avant, les deux plugins appelaient `createOrigam({ themes, ssr: true })` sans locale : sous Nuxt, `useLocale().current` valait toujours `en`, et les libellés intégrés (noms accessibles des blocs de code, palette de commandes…) restaient en anglais sur un site ja/ko/zh.
+- `messages` est fusionné avec les locales intégrées `en` et `fr` : un site peut fournir `ja` complet ou surcharger quelques clés `fr`. `fallbackLocale` et `messages` deviennent optionnels dans `ILocaleOptions`.
+- Doc : section « Ajouter une langue (gabarit de traduction) » dans le guide i18n ; la liste des clés est `origam/assets/locales/en.json`.
+
 ## [2.36.0] - 2026-10-19
 
 ### Added — `OrigamCodeGroup` : groupe de code à onglets (npm / pnpm / yarn) en une seule surface (#1179)

package/dist/src/components/Carousel/OrigamCarouselItem.vue

@@ -76,6 +76,7 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Img/OrigamImg.vue

@@ -10,11 +10,11 @@
 	>
 		<template #additional>
 			<origam-transition
+					:appear="fadesIn"
 					:transition="transition"
-					appear
 			>
 				<img
-						v-show="isLoaded"
+						v-show="isPictureShown"
 						ref="image"
 						:alt="alt"
 						:class="imgPictureClasses"
@@ -46,25 +46,28 @@
 					:transition="transition"
 					appear
 			>
-				<div
+				<component
+						:is="tag"
 						v-if="(isLoading || (isError && !slots.error)) && slots.placeholder"
 						class="origam-img__placeholder"
 				>
 					<slot name="placeholder"/>
-				</div>
+				</component>
 			</origam-transition>
 			<origam-transition
 					:transition="transition"
 					appear
 			>
-				<div
+				<component
+						:is="tag"
 						v-if="isError && slots.error"
 						class="origam-img__error"
 				>
 					<slot name="error"/>
-				</div>
+				</component>
 			</origam-transition>
-			<div
+			<component
+					:is="tag"
 					v-if="gradient"
 					:style="imgGradientStyles"
 					class="origam-img__gradient"
@@ -133,6 +136,7 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -219,7 +223,7 @@ const normalisedSrc = computed(() => {
 const aspectRatio = computed(() => {
   return normalisedSrc.value.aspectRatio || naturalWidth.value / naturalHeight.value || 0;
 });
-const responsiveProps = computed(() => pick(props, ["aspectRatio", "contentClass", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "width", "class", "style"]));
+const responsiveProps = computed(() => pick(props, ["tag", "aspectRatio", "contentClass", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "width", "class", "style"]));
 watch(() => props.src, () => {
   init(state.value !== IMG_STATE.IDLE);
 });
@@ -337,6 +341,10 @@ const isLoading = computed(() => {
 const isError = computed(() => {
   return state.value === IMG_STATE.ERROR;
 });
+const fadesIn = IN_BROWSER && !vm.vnode.el;
+const isPictureShown = computed(() => {
+  return fadesIn ? isLoaded.value : !isError.value;
+});
 const hasContent = computed(() => {
   return slots.default;
 });

package/dist/src/components/Responsive/OrigamResponsive.vue

@@ -1,17 +1,19 @@
 <template>
-	<div
+	<component
+			:is="tag"
 			:id="id"
 			:class="responsiveClasses"
 			:style="responsiveStyles"
 	>
 		<slot name="additional"/>
-		<div
+		<component
+				:is="tag"
 				v-if="slots.default"
 				:class="responsiveContentClasses"
 		>
 			<slot name="default"/>
-		</div>
-	</div>
+		</component>
+	</component>
 </template>
 
 <script lang="ts" setup>
@@ -36,6 +38,7 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

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

@@ -13,8 +13,8 @@ export interface ILocaleInstance {
 }
 export interface ILocaleOptions {
     locale?: string;
-    fallbackLocale: string;
-    messages: Record<string, unknown>;
+    fallbackLocale?: string;
+    messages?: Record<string, unknown>;
 }
 /**
  * Formes STRUCTURELLES de vue-i18n, declarees localement.

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

@@ -1,3 +1,4 @@
+import type { ILocaleOptions } from './locale.interface';
 import type { IOrigamTheme } from './theme.interface';
 import type { TMode, TTheme } from '../../types/Commons/theme.type';
 /**
@@ -26,6 +27,20 @@ export interface IOrigamNuxtModuleOptions {
      * When omitted, `createOrigam` installs the DS built-in baseline (neutral identity).
      */
     themes?: IOrigamTheme[];
+    /*********************************************************
+     * locale
+     *
+     * @description
+     * Locale of Origam's built-in strings (aria-labels, button labels, …), forwarded to `createOrigam({ locale })` by BOTH plugins (client and server) so the SSR markup and the hydration render agree.
+     * @description
+     * Must stay serialisable — it travels through `runtimeConfig`. `messages` is MERGED over the built-in `en` / `fr` catalogues: a site can supply a complete `ja`, or override a few `fr` keys. Origam does NOT follow `<html lang>`.
+     * @description
+     * The key list to translate is `origam/assets/locales/en.json`.
+     *
+     * @example
+     * origam: { locale: { locale: 'ja', fallbackLocale: 'en', messages: { ja } } }
+     ********************************************************/
+    locale?: ILocaleOptions;
     /**
      * Theme (brand) applied when no cookie is set. Use `'auto'` to render no
      * `data-theme` attribute (the default brand).
@@ -111,6 +126,7 @@ export interface IOrigamNuxtRuntimeConfig {
     cookieName: string;
     modeCookieName: string;
     cookieMaxAge: number;
+    locale?: ILocaleOptions;
 }
 /*********************************************************
  * IOrigamNuxtProvide

package/dist/src/interfaces/Responsive/responsive.interface.d.ts

@@ -1,10 +1,10 @@
 import type { IBorderProps } from '../Commons/border.interface';
-import type { ICommonsComponentProps } from '../Commons/commons.interface';
+import type { ICommonsComponentProps, ITagProps } from '../Commons/commons.interface';
 import type { IDimensionProps } from '../Commons/dimension.interface';
 import type { IMarginProps } from '../Commons/margin.interface';
 import type { IPaddingProps } from '../Commons/padding.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
-export interface IResponsiveProps extends IDimensionProps, ICommonsComponentProps, IPaddingProps, IMarginProps, IBorderProps, IRoundedProps {
+export interface IResponsiveProps extends IDimensionProps, ICommonsComponentProps, ITagProps, IPaddingProps, IMarginProps, IBorderProps, IRoundedProps {
     aspectRatio?: string | number;
     contentClass?: string;
 }

package/dist/src/nuxt/module.cjs

@@ -23,7 +23,8 @@ const DEFAULTS = {
   cookieMaxAge: 60 * 60 * 24 * 365,
   autoImport: true,
   includeUtilities: true,
-  prefix: "Origam"
+  prefix: "Origam",
+  locale: {}
 };
 const SCALAR_DEFAULTS = {
   defaultTheme: DEFAULTS.defaultTheme,
@@ -139,7 +140,8 @@ const origamNuxtModule = (0, _kit.defineNuxtModule)({
       defaultMode,
       cookieName,
       modeCookieName,
-      cookieMaxAge
+      cookieMaxAge,
+      locale: options.locale
     };
   }
 });

package/dist/src/nuxt/module.js

@@ -22,7 +22,8 @@ const DEFAULTS = {
   cookieMaxAge: 60 * 60 * 24 * 365,
   autoImport: true,
   includeUtilities: true,
-  prefix: "Origam"
+  prefix: "Origam",
+  locale: {}
 };
 const SCALAR_DEFAULTS = {
   defaultTheme: DEFAULTS.defaultTheme,
@@ -135,7 +136,8 @@ const origamNuxtModule = defineNuxtModule({
       defaultMode,
       cookieName,
       modeCookieName,
-      cookieMaxAge
+      cookieMaxAge,
+      locale: options.locale
     };
   }
 });

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 _nuxtLocale = require("../utils/Commons/nuxt-locale.util.cjs");
 var _applyTheme = require("../utils/Commons/apply-theme.util.cjs");
 var _app = require("#app");
 module.exports = (0, _app.defineNuxtPlugin)({
@@ -31,7 +32,8 @@ module.exports = (0, _app.defineNuxtPlugin)({
     const themes = config.themes ?? [];
     const origam = (0, _origam.createOrigam)({
       themes,
-      ssr: true
+      ssr: true,
+      ...(0, _nuxtLocale.nuxtLocaleOptions)(config)
     });
     nuxtApp.vueApp.use(origam);
     const themeApi = (0, _theme.useTheme)();

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

@@ -1,6 +1,7 @@
 import { ref, watch } from "vue";
 import { useTheme } from "../composables/Commons/theme.composable.js";
 import { createOrigam } from "../origam.js";
+import { nuxtLocaleOptions } from "../utils/Commons/nuxt-locale.util.js";
 import { isModePinned } from "../utils/Commons/apply-theme.util.js";
 import { defineNuxtPlugin, useCookie, useRuntimeConfig } from "#app";
 export default defineNuxtPlugin({
@@ -23,7 +24,7 @@ export default defineNuxtPlugin({
     const initialTheme = themeFromDom ?? themeCookie.value ?? config.defaultTheme;
     const initialMode = modeCookie.value ?? config.defaultMode;
     const themes = config.themes ?? [];
-    const origam = createOrigam({ themes, ssr: true });
+    const origam = createOrigam({ themes, ssr: true, ...nuxtLocaleOptions(config) });
     nuxtApp.vueApp.use(origam);
     const themeApi = useTheme();
     themeApi.setTheme(initialTheme);

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 var _origam = require("../origam.cjs");
+var _nuxtLocale = require("../utils/Commons/nuxt-locale.util.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");
@@ -67,7 +68,8 @@ module.exports = (0, _app.defineNuxtPlugin)({
     });
     const origam = (0, _origam.createOrigam)({
       themes,
-      ssr: true
+      ssr: true,
+      ...(0, _nuxtLocale.nuxtLocaleOptions)(config)
     });
     origam._defaultsRef.value = origam._activeDefaultsFor(resolvedTheme === _theme.ORIGAM_THEME_AUTO ? "" : resolvedTheme, resolvedMode);
     nuxtApp.vueApp.use(origam);

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

@@ -1,4 +1,5 @@
 import { createOrigam } from "../origam.js";
+import { nuxtLocaleOptions } from "../utils/Commons/nuxt-locale.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";
@@ -59,7 +60,7 @@ export default defineNuxtPlugin({
       htmlAttrs,
       style: ssrThemeCss ? [{ id: "origam-theme-ssr", key: "origam-theme-ssr", innerHTML: ssrThemeCss }] : []
     });
-    const origam = createOrigam({ themes, ssr: true });
+    const origam = createOrigam({ themes, ssr: true, ...nuxtLocaleOptions(config) });
     origam._defaultsRef.value = origam._activeDefaultsFor(
       resolvedTheme === ORIGAM_THEME_AUTO ? "" : resolvedTheme,
       resolvedMode

package/dist/src/utils/Commons/nuxt-locale.util.cjs

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.nuxtLocaleOptions = nuxtLocaleOptions;
+function nuxtLocaleOptions(config) {
+  return config.locale ? {
+    locale: config.locale
+  } : {};
+}

package/dist/src/utils/Commons/nuxt-locale.util.d.ts

@@ -0,0 +1,15 @@
+import type { IOrigamOptions } from '../../interfaces/Commons/commons.interface';
+import type { IOrigamNuxtRuntimeConfig } from '../../interfaces/Commons/nuxt-module.interface';
+/*********************************************************
+ * nuxtLocaleOptions
+ *
+ * @description
+ * The `createOrigam()` options derived from the module's `locale` setting (#1181).
+ * Shared by `plugin.client.ts` and `plugin.server.ts` so both feed `createOrigam`
+ * the SAME locale — a difference would render different built-in strings on the
+ * server and during hydration.
+ * @description
+ * Returns `{}` when no locale is configured, so `createLocale()` keeps its own
+ * defaults (`en`, fallback `en`, built-in `en` / `fr` messages).
+ ********************************************************/
+export declare function nuxtLocaleOptions(config: Pick<IOrigamNuxtRuntimeConfig, 'locale'>): Pick<IOrigamOptions, 'locale'>;

package/dist/src/utils/Commons/nuxt-locale.util.js

@@ -0,0 +1,3 @@
+export function nuxtLocaleOptions(config) {
+  return config.locale ? { locale: config.locale } : {};
+}

package/dist/src/utils/index.cjs

@@ -190,6 +190,17 @@ Object.keys(_locale).forEach(function (key) {
     }
   });
 });
+var _nuxtLocale = require("./Commons/nuxt-locale.util.cjs");
+Object.keys(_nuxtLocale).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _nuxtLocale[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _nuxtLocale[key];
+    }
+  });
+});
 var _nested = require("./Commons/nested.util.cjs");
 Object.keys(_nested).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -15,6 +15,7 @@ export * from './Commons/getCurrentInstance.util';
 export * from './Commons/ssr-styles.util';
 export * from './Commons/layout.util';
 export * from './Commons/locale.util';
+export * from './Commons/nuxt-locale.util';
 export * from './Commons/nested.util';
 export * from './Commons/ripple.util';
 export * from './Commons/rounded.util';

package/dist/src/utils/index.js

@@ -15,6 +15,7 @@ export * from "./Commons/getCurrentInstance.util.js";
 export * from "./Commons/ssr-styles.util.js";
 export * from "./Commons/layout.util.js";
 export * from "./Commons/locale.util.js";
+export * from "./Commons/nuxt-locale.util.js";
 export * from "./Commons/nested.util.js";
 export * from "./Commons/ripple.util.js";
 export * from "./Commons/rounded.util.js";

package/package.json

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