Reserve space for target value during counting

Prevent layout shifts during counting animation by rendering a hidden
placeholder with the target value. Uses CSS grid to overlay the
current value on top of the placeholder, ensuring stable dimensions
throughout the animation.

REDMINE-21218

Author: tf

entry_types/scrolled/package/spec/contentElements/counter/Counter-spec.js

@@ -318,4 +318,51 @@ describe('Counter', () => {
       expect(descriptionDiv).toHaveClass(styles.textRight);
     });
   });
+
+  describe('space reservation', () => {
+    it('renders hidden placeholder with target value when counting up', () => {
+      const {container} = renderCounter({
+        targetValue: 1000,
+        startValue: 0,
+        countingSpeed: 'medium'
+      });
+      const placeholder = container.querySelector('[aria-hidden="true"]');
+
+      expect(placeholder).toBeInTheDocument();
+      expect(placeholder).toHaveTextContent('1,000');
+    });
+
+    it('renders placeholder when targetValue equals startValue', () => {
+      const {container} = renderCounter({
+        targetValue: 100,
+        startValue: 100,
+        countingSpeed: 'medium'
+      });
+      const placeholder = container.querySelector('[aria-hidden="true"]');
+
+      expect(placeholder).toBeInTheDocument();
+    });
+
+    it('does not render placeholder when counting down', () => {
+      const {container} = renderCounter({
+        targetValue: 0,
+        startValue: 100,
+        countingSpeed: 'medium'
+      });
+      const placeholder = container.querySelector('[aria-hidden="true"]');
+
+      expect(placeholder).not.toBeInTheDocument();
+    });
+
+    it('does not render placeholder when countingSpeed is none', () => {
+      const {container} = renderCounter({
+        targetValue: 1000,
+        startValue: 0,
+        countingSpeed: 'none'
+      });
+      const placeholder = container.querySelector('[aria-hidden="true"]');
+
+      expect(placeholder).not.toBeInTheDocument();
+    });
+  });
 });

entry_types/scrolled/package/src/contentElements/counter/Counter.js

@@ -13,6 +13,7 @@ import {
 } from 'pageflow-scrolled/frontend';
 
 import styles from './Counter.module.css';
+import {PlainNumber} from './PlainNumber';
 
 export function Counter({configuration, contentElementId, contentElementWidth, sectionProps}) {
   const updateConfiguration = useContentElementConfigurationUpdate();
@@ -91,14 +92,6 @@ export function Counter({configuration, contentElementId, contentElementWidth, s
     }
   });
 
-  function format(value) {
-    return value.toLocaleString(locale, {
-      useGrouping: !configuration.hideThousandsSeparators,
-      minimumFractionDigits: decimalPlaces,
-      maximumFractionDigits: decimalPlaces
-    });
-  }
-
   function renderUnit() {
     if (!configuration.unit) {
       return null;
@@ -156,7 +149,15 @@ export function Counter({configuration, contentElementId, contentElementWidth, s
                 inline>
             <span style={{color: paletteColor(configuration.numberColor)}}>
               {configuration.unitPlacement === 'leading' && renderUnit()}
-              {format(currentValue)}
+              <PlainNumber
+                value={currentValue}
+                targetValue={countingDuration > 0 ? targetValue : null}
+                formatOptions={{
+                  locale,
+                  decimalPlaces,
+                  useGrouping: !configuration.hideThousandsSeparators
+                }}
+              />
               {configuration.unitPlacement !== 'leading' && renderUnit()}
             </span>
           </Text>

entry_types/scrolled/package/src/contentElements/counter/PlainNumber.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import styles from './PlainNumber.module.css';
+
+export function PlainNumber({
+  value,
+  targetValue,
+  formatOptions
+}) {
+  const needsPlaceholder = targetValue != null && targetValue >= value;
+
+  function format(val) {
+    return val.toLocaleString(formatOptions.locale, {
+      useGrouping: formatOptions.useGrouping,
+      minimumFractionDigits: formatOptions.decimalPlaces,
+      maximumFractionDigits: formatOptions.decimalPlaces
+    });
+  }
+
+  if (!needsPlaceholder) {
+    return format(value);
+  }
+
+  return (
+    <span className={styles.numberGrid}>
+      <span aria-hidden="true" className={styles.numberPlaceholder}>
+        {format(targetValue)}
+      </span>
+      <span>
+        {format(value)}
+      </span>
+    </span>
+  );
+}

entry_types/scrolled/package/src/contentElements/counter/PlainNumber.module.css

@@ -0,0 +1,12 @@
+.numberGrid {
+  display: inline-grid;
+}
+
+.numberGrid > * {
+  grid-area: 1 / 1;
+  text-align: right;
+}
+
+.numberPlaceholder {
+  visibility: hidden;
+}