origam 2.37.1 → 2.37.3

package/CHANGELOG.md

@@ -18,6 +18,25 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.37.3] - 2026-10-19
+
+### Fixed — `v-intersect` lié avec le tuple `withDirectives` : handler jamais appelé (#1205)
+
+`OrigamLazy`, `OrigamTextField`, `OrigamTextareaField` et `OrigamPasswordField` passaient à `v-intersect` le tuple `[{ handler, options }, null, ['once']]` comme valeur. La directive lit `.handler` / `.options` sur la valeur : sur un tableau, elle obtient `undefined`. Aucune intersection n'appelait donc le handler, `once` n'était jamais lu et les `options` n'atteignaient pas l'`IntersectionObserver`.
+
+- **`OrigamLazy`** : le contenu ne s'affichait jamais à l'intersection, et les `options` du consommateur (ex. `rootMargin`) étaient ignorées. C'est corrigé ; mesuré dans Chromium.
+- **Champs texte, textarea et mot de passe** : l'appel JS de `focus()` sur intersection (autofocus) n'avait jamais lieu. Dans Chromium, l'attribut natif `autofocus` masquait le défaut. Safari et Firefox n'ont pas été mesurés.
+- Liaison désormais en `v-intersect.once="{ handler, options }"`.
+- La directive émet un `console.warn` en mode dev (une fois par balise) quand on lui lie un tableau.
+
+## [2.37.2] - 2026-10-19
+
+### Fixed — `OrigamImg` sous SSR : écart d'hydratation `aspect-ratio`, et image montée côté client jamais chargée (#1192)
+
+- **Écart d'hydratation** : sans prop `aspect-ratio`, `useAspectRatio` prend le ratio de la fenêtre (`innerWidth / innerHeight`), une valeur inconnue du serveur. Il était appliqué dès le premier rendu client d'une instance hydratée, d'où un `Hydration style mismatch`. Une instance qui hydrate l'applique désormais après `onMounted`. Une instance montée côté client l'applique tout de suite, comme avant. Un `aspect-ratio` explicite est inchangé.
+- **Image montée côté client jamais chargée** : `v-intersect` était lié avec le tuple `withDirectives` comme valeur. La directive lisait `.handler` sur un tableau, si bien que l'intersection ne déclenchait jamais le chargement. L'`<img>` restait en `display:none` + `loading="lazy"`, que Chromium ne charge pas. La directive est désormais liée en `v-intersect.once="{ handler, options }"`, et l'`<img>` passe en `loading="eager"` dès que son chargement est demandé.
+- La même forme de liaison subsiste dans d'autres composants : suivi en #1205.
+
 ## [2.37.1] - 2026-10-19
 
 ### Fixed — `OrigamImg` / `OrigamResponsive` : prop `tag`, `<img>` visible en SSR, fondu en rendu client seul (#1182)

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

@@ -1,7 +1,7 @@
 <template>
 	<origam-responsive
 			:id="id"
-			v-intersect="intersect"
+			v-intersect.once="intersect"
 			:aria-label="alt"
 			:class="imgClasses"
 			:role="alt ? 'img' : undefined"
@@ -327,11 +327,11 @@ const markBooted = (val) => {
 };
 stop = watch(aspectRatio, markBooted);
 markBooted(aspectRatio.value);
-const intersect = computed(() => [{
+const intersect = computed(() => ({
   handler: init,
   options: props.options
-}, null, ["once"]]);
-const nativeLoading = computed(() => props.eager ? "eager" : "lazy");
+}));
+const nativeLoading = computed(() => props.eager || state.value !== IMG_STATE.IDLE ? "eager" : "lazy");
 const isLoaded = computed(() => {
   return state.value === IMG_STATE.LOADED;
 });

package/dist/src/components/Lazy/OrigamLazy.vue

@@ -2,7 +2,7 @@
 	<component
 			:is="tag"
 			:id="id"
-			v-intersect="intersect"
+			v-intersect.once="intersect"
 			:aria-busy="!isActive || undefined"
 			:class="lazyClasses"
 			:style="lazyStyles"
@@ -52,11 +52,7 @@ const { filterProps } = useProps(props);
 const { dimensionStyles } = useDimension(props);
 const isActive = useVModel(props, "modelValue");
 const intersect = computed(() => {
-  return [
-    { handler: handleIntersect, options: props.options },
-    null,
-    isActive.value ? [] : ["once"]
-  ];
+  return { handler: handleIntersect, options: props.options };
 });
 const handleIntersect = (isIntersecting) => {
   if (isActive.value) return;

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -124,7 +124,7 @@
 							/>
 							<input
 									ref="inputRef"
-									v-intersect="intersect"
+									v-intersect.once="intersect"
 									:autofocus="autofocus"
 									:disabled="isDisabled"
 									:name="name"
@@ -501,7 +501,7 @@ const handleIntersect = (isIntersecting, entries) => {
   entries[0].target?.focus?.();
 };
 const intersect = computed(() => {
-  return [{ handler: handleIntersect }, null, ["once"]];
+  return { handler: handleIntersect };
 });
 const origamInputRef = ref();
 const origamFieldRef = ref();

package/dist/src/components/TextField/OrigamTextField.vue

@@ -83,7 +83,7 @@
 							/>
 							<input
 									ref="inputRef"
-									v-intersect="intersect"
+									v-intersect.once="intersect"
 									:autofocus="autofocus"
 									:disabled="isDisabled"
 									:name="name"
@@ -372,9 +372,7 @@ const max = computed(() => {
   return props.counter;
 });
 const intersect = computed(() => {
-  return [{
-    handler: handleIntersect
-  }, null, ["once"]];
+  return { handler: handleIntersect };
 });
 const handleIntersect = (isIntersecting, entries) => {
   if (!props.autofocus || !isIntersecting) return;

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -131,7 +131,7 @@
 						<textarea
 								v-else
 								ref="textareaRef"
-								v-intersect="intersect"
+								v-intersect.once="intersect"
 								:autofocus="autofocus"
 								:disabled="isDisabled"
 								:name="name"
@@ -499,9 +499,7 @@ const {
   onClickAppend: handleClickAppend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const intersect = computed(() => {
-  return [{
-    handler: handleIntersect
-  }, null, ["once"]];
+  return { handler: handleIntersect };
 });
 const handleIntersect = (isIntersecting, entries) => {
   if (!props.autofocus || !isIntersecting) return;

package/dist/src/composables/Responsive/aspect.composable.cjs

@@ -8,6 +8,11 @@ var _vue = require("vue");
 var _commons = require("../../consts/Commons/commons.const.cjs");
 const isUsableRatio = value => Number.isFinite(value) && value > 0;
 function useAspectRatio(props) {
+  const isHydrating = _commons.IN_BROWSER && !!(0, _vue.getCurrentInstance)()?.vnode.el;
+  const isViewportReady = (0, _vue.shallowRef)(!isHydrating);
+  if (isHydrating) (0, _vue.onMounted)(() => {
+    isViewportReady.value = true;
+  });
   const ratio = (0, _vue.computed)(() => {
     if (props.aspectRatio) {
       const raw = String(props.aspectRatio).trim();
@@ -21,7 +26,7 @@ function useAspectRatio(props) {
       const value = Number(raw);
       return isUsableRatio(value) ? String(value) : void 0;
     }
-    if (!_commons.IN_BROWSER) return void 0;
+    if (!_commons.IN_BROWSER || !isViewportReady.value) return void 0;
     const viewport = window.innerWidth / window.innerHeight;
     return isUsableRatio(viewport) ? String(viewport) : void 0;
   });

package/dist/src/composables/Responsive/aspect.composable.d.ts

@@ -40,6 +40,19 @@
  * runtime, never a design-time default a theme would override, so there is
  * nothing for the token pipeline to carry.
  *
+ * Hydration (#1192)
+ * ─────────────────
+ * The viewport fallback is a CLIENT-ONLY value: the server cannot emit it.
+ * Applied from the first render of an instance that is being hydrated, it
+ * made the client's first render differ from the server HTML
+ * (`style="width:120px;"` vs `style="aspect-ratio:1.77…;width:120px;"`),
+ * i.e. a "Hydration style mismatch" that Vue does not rectify in
+ * production. So an instance hydrating server HTML (`vnode.el` already set
+ * when `setup()` runs) holds the fallback back until `onMounted`; the style
+ * is then patched by an ordinary reactive update. An instance created on
+ * the client (no server HTML to match) applies it at once, as before.
+ * An explicit `aspectRatio` is deterministic and is emitted by both sides.
+ *
  * Guarding the value
  * ──────────────────
  * The returned ratio rejects NaN, 0, negatives and Infinity. Any of them

package/dist/src/composables/Responsive/aspect.composable.js

@@ -1,7 +1,12 @@
-import { computed } from "vue";
+import { computed, getCurrentInstance, onMounted, shallowRef } from "vue";
 import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
 const isUsableRatio = (value) => Number.isFinite(value) && value > 0;
 export function useAspectRatio(props) {
+  const isHydrating = IN_BROWSER && !!getCurrentInstance()?.vnode.el;
+  const isViewportReady = shallowRef(!isHydrating);
+  if (isHydrating) onMounted(() => {
+    isViewportReady.value = true;
+  });
   const ratio = computed(() => {
     if (props.aspectRatio) {
       const raw = String(props.aspectRatio).trim();
@@ -15,7 +20,7 @@ export function useAspectRatio(props) {
       const value = Number(raw);
       return isUsableRatio(value) ? String(value) : void 0;
     }
-    if (!IN_BROWSER) return void 0;
+    if (!IN_BROWSER || !isViewportReady.value) return void 0;
     const viewport = window.innerWidth / window.innerHeight;
     return isUsableRatio(viewport) ? String(viewport) : void 0;
   });

package/dist/src/directives/Intersect/intersect.directive.cjs

@@ -9,6 +9,7 @@ var _intersect = require("../../utils/Commons/intersect.util.cjs");
 const Intersect = exports.Intersect = {
   mounted(el, binding) {
     if (!_commons.SUPPORTS_INTERSECTION) return;
+    (0, _intersect.warnIntersectTupleBinding)(el, binding.value);
     const read = () => {
       const b = el._observe?.[binding.instance.$.uid]?.binding ?? binding;
       const v = b.value;

package/dist/src/directives/Intersect/intersect.directive.js

@@ -1,8 +1,9 @@
 import { SUPPORTS_INTERSECTION } from "../../consts/Commons/commons.const.js";
-import { unmountIntersect } from "../../utils/Commons/intersect.util.js";
+import { unmountIntersect, warnIntersectTupleBinding } from "../../utils/Commons/intersect.util.js";
 export const Intersect = {
   mounted(el, binding) {
     if (!SUPPORTS_INTERSECTION) return;
+    warnIntersectTupleBinding(el, binding.value);
     const read = () => {
       const b = el._observe?.[binding.instance.$.uid]?.binding ?? binding;
       const v = b.value;

package/dist/src/utils/Commons/intersect.util.cjs

@@ -4,9 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.unmountIntersect = unmountIntersect;
+exports.warnIntersectTupleBinding = warnIntersectTupleBinding;
 function unmountIntersect(el, binding) {
   const observe = el._observe?.[binding.instance.$.uid];
   if (!observe) return;
   observe.observer.unobserve(el);
   delete el._observe[binding.instance.$.uid];
+}
+const _warnedIntersectTupleTags = /* @__PURE__ */new Set();
+function warnIntersectTupleBinding(el, value) {
+  if (!Array.isArray(value)) return;
+  if (typeof console === "undefined") return;
+  if (!process.env?.DEV) return;
+  const tag = el.tagName.toLowerCase();
+  if (_warnedIntersectTupleTags.has(tag)) return;
+  _warnedIntersectTupleTags.add(tag);
+  console.warn(`[origam] v-intersect on <${tag}> is bound to an array (the withDirectives tuple): the handler will never be called. Bind { handler, options } and use the modifier, e.g. v-intersect.once="{ handler, options }".`);
 }

package/dist/src/utils/Commons/intersect.util.d.ts

@@ -6,3 +6,15 @@ import type { IIntersectDirectiveBinding, IIntersectHtmlElement } from '../../in
  * @param binding …
  */
 export declare function unmountIntersect(el: IIntersectHtmlElement, binding: IIntersectDirectiveBinding): void;
+/*********************************************************
+ * warnIntersectTupleBinding
+ *
+ * @description
+ * Dev-only warning (#1205, once per element tag) when `v-intersect` is bound
+ * to an ARRAY. The `withDirectives` tuple `[{ handler, options }, null,
+ * ['once']]` is not a valid binding VALUE: the directive reads `.handler` /
+ * `.options` off it, gets `undefined`, never calls the handler and never
+ * reads the `once`. The correct form is `v-intersect.once="{ handler,
+ * options }"`. Gated on `import.meta.env.DEV`, like `warnUnsupportedProp`.
+ ********************************************************/
+export declare function warnIntersectTupleBinding(el: HTMLElement, value: unknown): void;

package/dist/src/utils/Commons/intersect.util.js

@@ -4,3 +4,15 @@ export function unmountIntersect(el, binding) {
   observe.observer.unobserve(el);
   delete el._observe[binding.instance.$.uid];
 }
+const _warnedIntersectTupleTags = /* @__PURE__ */ new Set();
+export function warnIntersectTupleBinding(el, value) {
+  if (!Array.isArray(value)) return;
+  if (typeof console === "undefined") return;
+  if (!import.meta.env?.DEV) return;
+  const tag = el.tagName.toLowerCase();
+  if (_warnedIntersectTupleTags.has(tag)) return;
+  _warnedIntersectTupleTags.add(tag);
+  console.warn(
+    `[origam] v-intersect on <${tag}> is bound to an array (the withDirectives tuple): the handler will never be called. Bind { handler, options } and use the modifier, e.g. v-intersect.once="{ handler, options }".`
+  );
+}

package/package.json

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