origam 2.37.0 → 2.37.1

package/CHANGELOG.md

@@ -18,6 +18,17 @@ 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)

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.37.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": [