origam 2.15.0 → 2.17.0

package/dist/src/composables/Commons/stateEffect.composable.cjs

@@ -10,7 +10,7 @@ var _elevation = require("./elevation.composable.cjs");
 var _margin = require("./margin.composable.cjs");
 var _padding = require("./padding.composable.cjs");
 var _rounded = require("./rounded.composable.cjs");
-var _utils = require("../../utils/index.cjs");
+var _color = require("../../utils/Commons/color.util.cjs");
 function pickEffective(rest, isHover, isActive, hoverState, activeState, key) {
   return (0, _vue.computed)(() => {
     if (isHover.value && hoverState.value?.[key] != null) {
@@ -45,15 +45,15 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   const margin = pickEffective(() => props.margin, isHover, isActive, hoverState, activeState, "margin");
   const gap = pickEffective(() => props.gap, isHover, isActive, hoverState, activeState, "gap");
   const sameIntent = (a, b) => {
-    return !!a && !!b && a === b && (0, _utils.isIntent)(a);
+    return !!a && !!b && a === b && (0, _color.isIntent)(a);
   };
   const colorClasses = (0, _vue.computed)(() => {
     if (isHover.value || isActive.value || isDisabled.value) return [];
     const classes = [];
     const bgVal = bgColor.value;
     const fgVal = color.value;
-    if (bgVal && (0, _utils.isUtilityIntent)(bgVal)) classes.push(`origam--bg-${bgVal}`);
-    if (fgVal && (0, _utils.isUtilityIntent)(fgVal)) classes.push(`origam--color-${fgVal}`);
+    if (bgVal && (0, _color.isUtilityIntent)(bgVal)) classes.push(`origam--bg-${bgVal}`);
+    if (fgVal && (0, _color.isUtilityIntent)(fgVal)) classes.push(`origam--color-${fgVal}`);
     return classes;
   });
   const colorStyles = (0, _vue.computed)(() => {
@@ -64,31 +64,31 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     let bgDecl = null;
     let fgDecl = null;
     let bgIntentFg = null;
-    if (bgColor.value && (0, _utils.isIntent)(bgColor.value)) {
-      const m = (0, _utils.tokenStylesForIntent)(bgColor.value, bgRole);
+    if (bgColor.value && (0, _color.isIntent)(bgColor.value)) {
+      const m = (0, _color.tokenStylesForIntent)(bgColor.value, bgRole);
       bgDecl = `background-color: ${m["background-color"]}`;
-      bgIntentFg = (0, _utils.tokenStylesForIntent)(bgColor.value, "default").color;
+      bgIntentFg = (0, _color.tokenStylesForIntent)(bgColor.value, "default").color;
     } else if (bgColor.value === "transparent") {
-      bgDecl = `background-color: ${(0, _utils.rawBgExprWithState)("transparent", bgRole)}`;
-    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _utils.isCssColor)(bgColor.value)) {
-      (0, _utils.warnLegacyColor)("bgColor", bgColor.value);
-      bgDecl = `background-color: ${(0, _utils.rawBgExprWithState)(bgColor.value, bgRole)}`;
+      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)("transparent", bgRole)}`;
+    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _color.isCssColor)(bgColor.value)) {
+      (0, _color.warnLegacyColor)("bgColor", bgColor.value);
+      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)(bgColor.value, bgRole)}`;
     }
-    if (color.value && (0, _utils.isIntent)(color.value)) {
-      if (bgIntentFg && bgColor.value && (0, _utils.isIntent)(bgColor.value) && color.value === bgColor.value) {
+    if (color.value && (0, _color.isIntent)(color.value)) {
+      if (bgIntentFg && bgColor.value && (0, _color.isIntent)(bgColor.value) && color.value === bgColor.value) {
         fgDecl = `color: ${bgIntentFg}`;
       } else {
-        fgDecl = `color: ${(0, _utils.tokenForegroundForIntent)(color.value)}`;
+        fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(color.value)}`;
       }
-    } else if (color.value && typeof color.value === "string" && (0, _utils.isCssColor)(color.value)) {
-      if (color.value !== "transparent") (0, _utils.warnLegacyColor)("color", color.value);
+    } else if (color.value && typeof color.value === "string" && (0, _color.isCssColor)(color.value)) {
+      if (color.value !== "transparent") (0, _color.warnLegacyColor)("color", color.value);
       fgDecl = `color: ${color.value}`;
     } else if (!color.value && bgIntentFg) {
       fgDecl = `color: ${bgIntentFg}`;
-    } else if (!color.value && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _utils.isParsableColor)(bgColor.value)) {
-      const parsed = (0, _utils.parseColor)(bgColor.value);
+    } else if (!color.value && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _color.isParsableColor)(bgColor.value)) {
+      const parsed = (0, _color.parseColor)(bgColor.value);
       if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${(0, _utils.getForeground)(parsed)}`;
+        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
       }
     }
     const styles = [];
@@ -96,7 +96,7 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     if (fgDecl) styles.push(fgDecl);
     return styles;
   });
-  void _utils.intentBgExpr;
+  void _color.intentBgExpr;
   const {
     borderClasses,
     borderStyles
@@ -144,7 +144,23 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   const {
     roundedClasses,
     roundedStyles
-  } = (0, _rounded.useRounded)(rounded);
+  } = (0, _rounded.useRounded)((0, _vue.reactive)({
+    get rounded() {
+      return rounded.value;
+    },
+    get roundedTopLeft() {
+      return props.roundedTopLeft;
+    },
+    get roundedTopRight() {
+      return props.roundedTopRight;
+    },
+    get roundedBottomLeft() {
+      return props.roundedBottomLeft;
+    },
+    get roundedBottomRight() {
+      return props.roundedBottomRight;
+    }
+  }));
   const {
     elevationClasses,
     elevationStyles
@@ -155,6 +171,24 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   } = (0, _padding.usePadding)((0, _vue.reactive)({
     get padding() {
       return padding.value;
+    },
+    get paddingTop() {
+      return props.paddingTop;
+    },
+    get paddingRight() {
+      return props.paddingRight;
+    },
+    get paddingBottom() {
+      return props.paddingBottom;
+    },
+    get paddingLeft() {
+      return props.paddingLeft;
+    },
+    get paddingBlock() {
+      return props.paddingBlock;
+    },
+    get paddingInline() {
+      return props.paddingInline;
     }
   }));
   const {
@@ -163,6 +197,24 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   } = (0, _margin.useMargin)((0, _vue.reactive)({
     get margin() {
       return margin.value;
+    },
+    get marginTop() {
+      return props.marginTop;
+    },
+    get marginRight() {
+      return props.marginRight;
+    },
+    get marginBottom() {
+      return props.marginBottom;
+    },
+    get marginLeft() {
+      return props.marginLeft;
+    },
+    get marginBlock() {
+      return props.marginBlock;
+    },
+    get marginInline() {
+      return props.marginInline;
     }
   }));
   const gapStyles = (0, _vue.computed)(() => {

package/dist/src/composables/Commons/stateEffect.composable.d.ts

@@ -1,11 +1,31 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { IActiveState, IBgColorProps, IBorderProps, IColorProps, IElevationProps, IHoverState, IMarginProps, IPaddingProps, IRoundedProps } from '../../interfaces';
-import type { TColor } from '../../types';
-type TStateEffectProps = IColorProps & IBgColorProps & IBorderProps & IRoundedProps & IElevationProps & IPaddingProps & IMarginProps & {
-    gap?: boolean | number | string;
-};
+import type { IActiveState, IHoverState } from '../../interfaces/Commons/state-effect.interface';
+import type { TColor } from '../../types/Commons/color.type';
+import type { TStateEffectProps } from '../../types/Commons/state-effect.type';
 /*********************************************************
  * useStateEffect
+ *
+ * @description
+ * Composable unique remplacant la chaine `useColorEffect` +
+ * `useBorder` + `useRounded` + `useElevation` + `usePadding` + `useMargin`
+ * que chaque composant visuel devait repeter. Lit les etats `isHover`/
+ * `isActive`/`isDisabled` (et leurs overrides `hoverState`/`activeState`)
+ * et resout 8 axes state-aware : color, bgColor, border, rounded,
+ * elevation, padding, margin, gap — chacun avec classes ET styles.
+ * Priorite de resolution par axe : HOVER gagne sur ACTIVE (survoler un
+ * element presse/selectionne montre la surface hover), qui gagne sur la
+ * valeur de repos (`props.xxx`).
+ *
+ * @description
+ * ⛔ `status` (`success|info|warning|error`) ECRASE `color`/`bgColor` —
+ * il n'est PAS surchargeable par les props de couleur du consommateur,
+ * sinon le statut serait cosmetiquement sans effet. Les props directionnelles
+ * (`borderTop`, `paddingBlock`, `marginInline`, les coins `roundedTopLeft`…)
+ * ne sont PAS state-swappables : elles sont lues directement depuis
+ * `props` via un objet `reactive` a accesseurs `get` — jamais un litteral
+ * plat, qui figerait la valeur au moment de l'appel et casserait la
+ * reactivite sur un changement de prop ulterieur (meme piege que
+ * `pickEffective` documente plus haut pour la valeur de repos).
  ********************************************************/
 export declare function useStateEffect(props: TStateEffectProps, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, hoverState?: ComputedRef<IHoverState | undefined>, activeState?: ComputedRef<IActiveState | undefined>, isDisabled?: Ref<boolean> | ComputedRef<boolean>, 
 /**
@@ -38,4 +58,3 @@ flat?: Ref<boolean> | ComputedRef<boolean>): {
     gapClasses: ComputedRef<string[]>;
     gapStyles: ComputedRef<string[]>;
 };
-export {};

package/dist/src/composables/Commons/stateEffect.composable.js

@@ -4,19 +4,7 @@ import { useElevation } from "./elevation.composable.js";
 import { useMargin } from "./margin.composable.js";
 import { usePadding } from "./padding.composable.js";
 import { useRounded } from "./rounded.composable.js";
-import {
-  getForeground,
-  intentBgExpr,
-  isCssColor,
-  isIntent,
-  isParsableColor,
-  isUtilityIntent,
-  parseColor,
-  rawBgExprWithState,
-  tokenForegroundForIntent,
-  tokenStylesForIntent,
-  warnLegacyColor
-} from "../../utils/index.js";
+import { getForeground, intentBgExpr, isCssColor, isIntent, isParsableColor, isUtilityIntent, parseColor, rawBgExprWithState, tokenForegroundForIntent, tokenStylesForIntent, warnLegacyColor } from "../../utils/Commons/color.util.js";
 function pickEffective(rest, isHover, isActive, hoverState, activeState, key) {
   return computed(() => {
     if (isHover.value && hoverState.value?.[key] != null) {
@@ -153,20 +141,78 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
       }
     })
   );
-  const { roundedClasses, roundedStyles } = useRounded(rounded);
+  const { roundedClasses, roundedStyles } = useRounded(
+    reactive({
+      get rounded() {
+        return rounded.value;
+      },
+      get roundedTopLeft() {
+        return props.roundedTopLeft;
+      },
+      get roundedTopRight() {
+        return props.roundedTopRight;
+      },
+      get roundedBottomLeft() {
+        return props.roundedBottomLeft;
+      },
+      get roundedBottomRight() {
+        return props.roundedBottomRight;
+      }
+    })
+  );
   const { elevationClasses, elevationStyles } = useElevation(
     elevation,
     flat
   );
   const { paddingClasses, paddingStyles } = usePadding(
-    reactive({ get padding() {
-      return padding.value;
-    } })
+    reactive({
+      get padding() {
+        return padding.value;
+      },
+      get paddingTop() {
+        return props.paddingTop;
+      },
+      get paddingRight() {
+        return props.paddingRight;
+      },
+      get paddingBottom() {
+        return props.paddingBottom;
+      },
+      get paddingLeft() {
+        return props.paddingLeft;
+      },
+      get paddingBlock() {
+        return props.paddingBlock;
+      },
+      get paddingInline() {
+        return props.paddingInline;
+      }
+    })
   );
   const { marginClasses, marginStyles } = useMargin(
-    reactive({ get margin() {
-      return margin.value;
-    } })
+    reactive({
+      get margin() {
+        return margin.value;
+      },
+      get marginTop() {
+        return props.marginTop;
+      },
+      get marginRight() {
+        return props.marginRight;
+      },
+      get marginBottom() {
+        return props.marginBottom;
+      },
+      get marginLeft() {
+        return props.marginLeft;
+      },
+      get marginBlock() {
+        return props.marginBlock;
+      },
+      get marginInline() {
+        return props.marginInline;
+      }
+    })
   );
   const gapStyles = computed(() => {
     const v = gap.value;

package/dist/src/composables/Commons/stateFlag.composable.cjs

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStateFlag = useStateFlag;
+var _vue = require("vue");
+var _vModel = require("./vModel.composable.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
+function useStateFlag(props, options) {
+  const {
+    state,
+    source = state,
+    name = (0, _getCurrentInstance.getCurrentInstanceName)()
+  } = options;
+  const vmodel = (0, _vModel.useVModel)(props, source);
+  const config = (0, _vue.computed)(() => {
+    const v = props[source];
+    return v && typeof v === "object" ? v : void 0;
+  });
+  const forced = (0, _vue.computed)(() => {
+    const v = props[source];
+    if (v === true) return true;
+    if (v && typeof v === "object") return v.enabled === true;
+    return false;
+  });
+  const internalToggle = (0, _vue.ref)(false);
+  const isOn = (0, _vue.computed)(() => {
+    if (forced.value) return true;
+    const v = vmodel.value;
+    if (typeof v === "boolean") return v;
+    return internalToggle.value;
+  });
+  const classes = (0, _vue.computed)(() => {
+    const list = [];
+    if (isOn.value) {
+      list.push(`${name}--${state}`);
+      const extraClass = state === "hover" ? props.hoverClass : props.activeClass;
+      if (extraClass) list.push(extraClass);
+    }
+    return list;
+  });
+  const set = () => {
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = true;
+    } else {
+      internalToggle.value = true;
+    }
+  };
+  const unset = () => {
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = false;
+    } else {
+      internalToggle.value = false;
+    }
+  };
+  const toggle = force => {
+    if (typeof force === "boolean") {
+      internalToggle.value = force;
+      return;
+    }
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = !isOn.value;
+    } else {
+      internalToggle.value = !internalToggle.value;
+    }
+  };
+  return {
+    isOn,
+    config,
+    classes,
+    set,
+    unset,
+    toggle
+  };
+}

package/dist/src/composables/Commons/stateFlag.composable.d.ts

@@ -0,0 +1,37 @@
+import type { IStateFlagOptions, IStateFlagReturn } from '../../interfaces/Commons/state-flag.interface';
+import type { TStateName } from '../../types/Commons/state-flag.type';
+/*********************************************************
+ * useStateFlag
+ *
+ * @description
+ * `useHover` and `useActive` were the same algorithm written twice: 33 of
+ * their 49 lines were byte-identical once the domain word was normalised,
+ * and their config types (`IHoverState` / `IActiveState`) were already both
+ * aliases of `IStateEffectConfig`. This is the merge — one implementation,
+ * driven by `options.state` (`'hover' | 'active'`).
+ *
+ * @description
+ * `props.{state}` (or `props[source]` when `source` is set) accepts three
+ * shapes. `undefined` / `false` → `isOn` is driven by `set()` / `unset()` /
+ * `toggle()` (pointer events or click, depending on what the component
+ * wires up), `config` is undefined. `true` → `isOn` is FORCED to `true`
+ * regardless of interaction, `config` is undefined. An `IStateEffectConfig`
+ * object → `isOn` is still driven by `set()`/`unset()`/`toggle()` (UNLESS
+ * `enabled: true` is set inside the object, which forces it on like the
+ * bare `true` case), `config` is the object itself — consumed by
+ * `useStateEffect` to swap effective values per axis.
+ *
+ * @description
+ * ⛔ BUG FIX carried over from this merge (was hover-only): `set()` /
+ * `unset()` / `toggle()` now all gate on whether the current value is a
+ * config object, and if so flip a local `internalToggle` ref INSTEAD of
+ * writing through the v-model. `useActive` already did this (that's where
+ * `internalToggle` came from). `useHover` did not: its old `onMouseenter`
+ * wrote `vmodel.value = true` unconditionally, which — for a controlled
+ * `v-model:hover="{ bgColor: 'success' }"` — emitted `true` back to the
+ * parent and destroyed the config object on the FIRST mouseenter (measured:
+ * `{ bgColor: 'success' }` → `true`, config lost). Unifying on
+ * `useActive`'s gate fixes this by construction; hover consumers get it for
+ * free.
+ ********************************************************/
+export declare function useStateFlag<S extends TStateName>(props: object, options: IStateFlagOptions<S>): IStateFlagReturn;

package/dist/src/composables/Commons/stateFlag.composable.js

@@ -0,0 +1,69 @@
+import { computed, ref } from "vue";
+import { useVModel } from "./vModel.composable.js";
+import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
+export function useStateFlag(props, options) {
+  const { state, source = state, name = getCurrentInstanceName() } = options;
+  const vmodel = useVModel(props, source);
+  const config = computed(() => {
+    const v = props[source];
+    return v && typeof v === "object" ? v : void 0;
+  });
+  const forced = computed(() => {
+    const v = props[source];
+    if (v === true) return true;
+    if (v && typeof v === "object") return v.enabled === true;
+    return false;
+  });
+  const internalToggle = ref(false);
+  const isOn = computed(() => {
+    if (forced.value) return true;
+    const v = vmodel.value;
+    if (typeof v === "boolean") return v;
+    return internalToggle.value;
+  });
+  const classes = computed(() => {
+    const list = [];
+    if (isOn.value) {
+      list.push(`${name}--${state}`);
+      const extraClass = state === "hover" ? props.hoverClass : props.activeClass;
+      if (extraClass) list.push(extraClass);
+    }
+    return list;
+  });
+  const set = () => {
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = true;
+    } else {
+      internalToggle.value = true;
+    }
+  };
+  const unset = () => {
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = false;
+    } else {
+      internalToggle.value = false;
+    }
+  };
+  const toggle = (force) => {
+    if (typeof force === "boolean") {
+      internalToggle.value = force;
+      return;
+    }
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = !isOn.value;
+    } else {
+      internalToggle.value = !internalToggle.value;
+    }
+  };
+  return {
+    isOn,
+    config,
+    classes,
+    set,
+    unset,
+    toggle
+  };
+}

package/dist/src/composables/Commons/status.composable.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useStatus = useStatus;
 var _enums = require("../../enums/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 var _vue = require("vue");
 const STATUS_TO_INTENT = {
   success: "success",
@@ -13,7 +13,7 @@ const STATUS_TO_INTENT = {
   warning: "warning",
   error: "danger"
 };
-function useStatus(props, name = (0, _utils.getCurrentInstanceName)()) {
+function useStatus(props, name = (0, _getCurrentInstance.getCurrentInstanceName)()) {
   const statusIcon = (0, _vue.computed)(() => {
     return `$${props.status}`;
   });

package/dist/src/composables/Commons/status.composable.d.ts

@@ -1,7 +1,22 @@
-import type { IAdjacentProps, IStatusProps } from "../../interfaces";
-import type { TColor } from "../../types";
+import type { IAdjacentProps } from '../../interfaces/Commons/adjacent.interface';
+import type { IStatusProps } from '../../interfaces/Commons/status.interface';
+import type { TColor } from '../../types/Commons/color.type';
 /*********************************************************
  * useStatus
+ *
+ * @description
+ * Traduit `props.status` (`success|info|warning|error`) en icone
+ * (`$success`, `$error`…), position (`prependIcon`/`appendIcon`/`icon`
+ * selon `statusIconPosition`), classe `{name}--{status}` et intention de
+ * couleur forcee (`statusIntent`, non surchargeable par `color`/`bgColor`
+ * — `error` mappe sur l'intent `danger`, les autres 1:1).
+ *
+ * @description
+ * Sans `statusIconPosition` explicite, la position par defaut est
+ * PREPEND, pas "partout" : l'ancienne logique traitait `undefined` comme
+ * "rendre a chaque emplacement", peignant l'icone en double (prepend ET
+ * append) dans `OrigamAlert`. Une icone `prependIcon`/`appendIcon`/`icon`
+ * deja fournie par le consommateur passe toujours avant l'icone de statut.
  ********************************************************/
 export declare function useStatus(props: IStatusProps & IAdjacentProps, name?: string): {
     icon: import("vue").ComputedRef<import("../../types").TIcon | undefined>;

package/dist/src/composables/Commons/status.composable.js

@@ -1,5 +1,5 @@
 import { STATUS_POSITION } from "../../enums/index.js";
-import { getCurrentInstanceName } from "../../utils/index.js";
+import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
 import { computed } from "vue";
 const STATUS_TO_INTENT = {
   success: "success",

package/dist/src/composables/Commons/sticky.composable.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSticky = useSticky;
-var _utils = require("../../utils/index.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
 var _vue = require("vue");
 function useSticky({
   rootEl,
@@ -20,7 +20,7 @@ function useSticky({
       bottom: "auto",
       height: void 0
     } : void 0, isStuck.value ? {
-      [side]: (0, _utils.convertToUnit)(stuckPosition.value)
+      [side]: (0, _commons.convertToUnit)(stuckPosition.value)
     } : {
       top: layoutItemStyles.value.top
     }];
@@ -48,7 +48,7 @@ function useSticky({
     const layoutTop = parseFloat(layoutItemStyles.value.top ?? 0);
     const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop);
     const bottom = rect.height + Math.max(stuckPosition.value, layoutTop) - window.scrollY - window.innerHeight;
-    const bodyScroll = parseFloat(getComputedStyle(rootEl.value).getPropertyValue("--v-body-scroll-y")) || 0;
+    const bodyScroll = parseFloat(getComputedStyle(rootEl.value).getPropertyValue("--origam-body-scroll-y")) || 0;
     if (rect.height < window.innerHeight - layoutTop) {
       isStuck.value = "top";
       stuckPosition.value = layoutTop;

package/dist/src/composables/Commons/sticky.composable.d.ts

@@ -1,7 +1,28 @@
-import type { ISticky } from "../../interfaces";
+import type { ISticky } from '../../interfaces/Commons/sticky.interface';
 import type { CSSProperties } from 'vue';
 /*********************************************************
  * useSticky
+ *
+ * @description
+ * Cale `rootEl` en `sticky` manuel (via un listener `scroll` passif,
+ * pas la propriete CSS `position: sticky`) contre le layout ambiant
+ * (`layoutItemStyles.value.top`) : `isStuck` bascule entre `false`,
+ * `true`, `'top'` ou `'bottom'` selon la direction de scroll et la
+ * hauteur de l'element vs la fenetre, et `stickyStyles` traduit cet etat
+ * en declarations `top`/`bottom` inline.
+ *
+ * @description
+ * `onScroll` compense le decalage fige par un overlay qui bloque le
+ * defilement, en lisant la custom property `--origam-body-scroll-y` que
+ * `useScroll` pose sur chaque parent defilant.
+ *
+ * @description
+ * ⛔ Cette lecture visait `--v-body-scroll-y` jusqu'a #556 — prefixe `--v-`,
+ * la grammaire d'un autre design system, vestige de portage. Ce nom n'etant
+ * declare nulle part, `bodyScroll` valait TOUJOURS `0` et la branche de
+ * compensation etait morte. Corrige le 2026-09-06 ; le test
+ * `TU/composables/position-sticky-556-557.spec.ts` verrouille l'accord entre
+ * le nom pose et le nom lu.
  ********************************************************/
 export declare function useSticky({ rootEl, isSticky, layoutItemStyles }: ISticky): {
     isStuck: import("vue").ShallowRef<boolean | "top" | "bottom", boolean | "top" | "bottom">;

package/dist/src/composables/Commons/sticky.composable.js

@@ -1,4 +1,4 @@
-import { convertToUnit } from "../../utils/index.js";
+import { convertToUnit } from "../../utils/Commons/commons.util.js";
 import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
 export function useSticky({ rootEl, isSticky, layoutItemStyles }) {
   const isStuck = shallowRef(false);
@@ -29,7 +29,7 @@ export function useSticky({ rootEl, isSticky, layoutItemStyles }) {
     const layoutTop = parseFloat(layoutItemStyles.value.top ?? 0);
     const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop);
     const bottom = rect.height + Math.max(stuckPosition.value, layoutTop) - window.scrollY - window.innerHeight;
-    const bodyScroll = parseFloat(getComputedStyle(rootEl.value).getPropertyValue("--v-body-scroll-y")) || 0;
+    const bodyScroll = parseFloat(getComputedStyle(rootEl.value).getPropertyValue("--origam-body-scroll-y")) || 0;
     if (rect.height < window.innerHeight - layoutTop) {
       isStuck.value = "top";
       stuckPosition.value = layoutTop;