From 27706057cdd6c546df5dde9b6a2e84b755a96128 Mon Sep 17 00:00:00 2001
From: adrianschmidt-bot <rubenpauladrian+bot@gmail.com>
Date: Sat, 21 Mar 2026 13:01:58 +0100
Subject: [PATCH 1/7] feat: add valuePrefix and valueSuffix properties as
 replacements for deprecated prefix and suffix

This introduces new 'valuePrefix' and 'valueSuffix' properties for limel-circular-progress,
limel-info-tile, and limel-input-field components to resolve conflicts with the native HTML
'prefix' attribute (RDFa global attribute).

The new properties follow the same behavior as the existing ones while providing clearer
semantics. The old 'prefix' and 'suffix' properties remain functional but are marked as
deprecated with runtime warnings to guide consumers toward migration.

Changes:
- Add valuePrefix and valueSuffix props to all three components with reflection support
- Update InfoTileProgress interface with new properties
- Implement fallback logic (valuePrefix ?? prefix) throughout components
- Mark old properties with @deprecated JSDoc tags
- Add console.warn for deprecated property usage with migration guidance
- Update all examples and documentation to use new property names

fix: #3917
---
 .../circular-progress/circular-progress.tsx   | 44 ++++++++--
 .../examples/circular-progress-props.tsx      | 10 +--
 .../info-tile/examples/info-tile-badge.tsx    |  2 +-
 .../info-tile/examples/info-tile-loading.tsx  |  4 +-
 .../examples/info-tile-primary-slot.tsx       |  2 +-
 .../info-tile/examples/info-tile-progress.tsx |  6 +-
 .../info-tile/examples/info-tile-styling.tsx  |  8 +-
 .../info-tile/examples/info-tile.tsx          |  4 +-
 src/components/info-tile/info-tile.tsx        | 82 ++++++++++++++++---
 src/components/info-tile/info-tile.types.ts   | 13 +++
 .../examples/input-field-number-prefix.tsx    |  2 +-
 .../examples/input-field-text-suffix.tsx      |  2 +-
 src/components/input-field/input-field.tsx    | 40 ++++++++-
 13 files changed, 180 insertions(+), 39 deletions(-)

diff --git a/src/components/circular-progress/circular-progress.tsx b/src/components/circular-progress/circular-progress.tsx
index dc67e90ccb..0b5d493ce6 100644
--- a/src/components/circular-progress/circular-progress.tsx
+++ b/src/components/circular-progress/circular-progress.tsx
@@ -48,16 +48,30 @@ export class CircularProgress {
 
     /**
      * The prefix which is displayed before the `value`, must be a few characters characters long.
+     * @deprecated Use `valuePrefix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public prefix?: string = null;
 
     /**
      * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
+     * @deprecated Use `valueSuffix` instead. Will be removed in a future version.
      */
     @Prop()
     public suffix: string = '%';
 
+    /**
+     * The prefix which is displayed before the `value`, must be a few characters characters long.
+     */
+    @Prop({ reflect: true })
+    public valuePrefix?: string = null;
+
+    /**
+     * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
+     */
+    @Prop({ reflect: true })
+    public valueSuffix?: string;
+
     /**
      * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
      */
@@ -79,6 +93,26 @@ export class CircularProgress {
         const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
         const value = Math.round(this.value * 10) / 10;
 
+        // Warn about deprecated props
+        if (this.prefix !== null && this.prefix !== undefined) {
+            console.warn(
+                'The `prefix` property is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
+            );
+        }
+        if (
+            this.suffix !== '%' &&
+            this.suffix !== null &&
+            this.suffix !== undefined &&
+            this.valueSuffix === undefined
+        ) {
+            console.warn(
+                'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
+            );
+        }
+
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix ?? '%';
+
         return (
             <div
                 role="progressbar"
@@ -89,17 +123,17 @@ export class CircularProgress {
                 aria-valuenow={this.value}
                 style={{ '--percentage': currentPercentage }}
             >
-                {this.renderPrefix()}
+                {this.renderPrefix(effectivePrefix)}
                 <span class="value">
                     {abbreviate(value)}
-                    <span class="suffix">{this.suffix}</span>
+                    <span class="suffix">{effectiveSuffix}</span>
                 </span>
             </div>
         );
     }
-    private renderPrefix = () => {
-        if (this.prefix) {
-            return <span class="prefix">{this.prefix}</span>;
+    private renderPrefix = (prefix?: string) => {
+        if (prefix) {
+            return <span class="prefix">{prefix}</span>;
         }
     };
 }
diff --git a/src/components/circular-progress/examples/circular-progress-props.tsx b/src/components/circular-progress/examples/circular-progress-props.tsx
index f17098337b..e8ade4384c 100644
--- a/src/components/circular-progress/examples/circular-progress-props.tsx
+++ b/src/components/circular-progress/examples/circular-progress-props.tsx
@@ -37,26 +37,26 @@ export class CircularProgressPropsExample {
                 size="x-large"
                 value={this.degree}
                 maxValue={this.maxDegrees}
-                suffix={this.degrees}
+                valueSuffix={this.degrees}
             />,
             <limel-circular-progress
                 size="x-large"
                 value={this.second}
                 maxValue={this.maxSeconds}
-                suffix={this.seconds}
+                valueSuffix={this.seconds}
             />,
             <limel-circular-progress
                 size="x-large"
                 value={this.star}
                 maxValue={this.maxStars}
-                suffix={this.stars}
+                valueSuffix={this.stars}
             />,
             <limel-circular-progress
                 size="x-large"
                 value={this.budget}
                 maxValue={this.maxBudget}
-                suffix={this.currency}
-                prefix={this.increase}
+                valueSuffix={this.currency}
+                valuePrefix={this.increase}
             />,
         ];
     }
diff --git a/src/components/info-tile/examples/info-tile-badge.tsx b/src/components/info-tile/examples/info-tile-badge.tsx
index f4a1f48d76..b20fb5cc58 100644
--- a/src/components/info-tile/examples/info-tile-badge.tsx
+++ b/src/components/info-tile/examples/info-tile-badge.tsx
@@ -32,7 +32,7 @@ export class InfoTileBadgeExample {
                 icon="water"
                 label="Average weekly usage"
                 value={this.StringValue}
-                suffix="L"
+                valueSuffix="L"
                 badge={this.StringBadge}
                 link={{ href: '#' }}
             />,
diff --git a/src/components/info-tile/examples/info-tile-loading.tsx b/src/components/info-tile/examples/info-tile-loading.tsx
index 4eb188ccba..bce4e1fbd5 100644
--- a/src/components/info-tile/examples/info-tile-loading.tsx
+++ b/src/components/info-tile/examples/info-tile-loading.tsx
@@ -37,9 +37,9 @@ export class InfoTileLoadingExample {
             <limel-info-tile
                 icon="partly_cloudy_rain"
                 label="Partly cloudy with a risk of rain"
-                prefix="temp"
+                valuePrefix="temp"
                 value="23"
-                suffix="°C"
+                valueSuffix="°C"
                 link={link}
                 loading={this.loading}
             />,
diff --git a/src/components/info-tile/examples/info-tile-primary-slot.tsx b/src/components/info-tile/examples/info-tile-primary-slot.tsx
index 3d3f60d89c..3203deb944 100644
--- a/src/components/info-tile/examples/info-tile-primary-slot.tsx
+++ b/src/components/info-tile/examples/info-tile-primary-slot.tsx
@@ -37,7 +37,7 @@ export class InfoTilePrimarySlotExample {
                     icon="cloud_storage"
                     label="Cloud storage usage"
                     value="215"
-                    suffix="GB"
+                    valueSuffix="GB"
                     link={link}
                     progress={progress} // won't be rendered
                 >
diff --git a/src/components/info-tile/examples/info-tile-progress.tsx b/src/components/info-tile/examples/info-tile-progress.tsx
index 2f00e13570..e73e9c80e6 100644
--- a/src/components/info-tile/examples/info-tile-progress.tsx
+++ b/src/components/info-tile/examples/info-tile-progress.tsx
@@ -30,7 +30,7 @@ export class InfoTileProgressExample {
     @State()
     private progress: InfoTileProgress = {
         value: 76,
-        prefix: '↑',
+        valuePrefix: '↑',
         displayPercentageColors: true,
     };
 
@@ -39,9 +39,9 @@ export class InfoTileProgressExample {
             <limel-info-tile
                 label="Won deals this month"
                 icon="money"
-                prefix="Total value"
+                valuePrefix="Total value"
                 value="70,659"
-                suffix="EUR"
+                valueSuffix="EUR"
                 link={{ href: '#' }}
                 progress={this.progress}
             />,
diff --git a/src/components/info-tile/examples/info-tile-styling.tsx b/src/components/info-tile/examples/info-tile-styling.tsx
index 4ce63a3f71..e061556f12 100644
--- a/src/components/info-tile/examples/info-tile-styling.tsx
+++ b/src/components/info-tile/examples/info-tile-styling.tsx
@@ -21,7 +21,7 @@ export class InfoTileStylingExample {
     private progress: InfoTileProgress = {
         value: 12,
         maxValue: 100,
-        suffix: '%',
+        valueSuffix: '%',
         displayPercentageColors: false,
     };
 
@@ -31,16 +31,16 @@ export class InfoTileStylingExample {
                 icon="electricity"
                 label="Average weekly usage"
                 value={this.value}
-                suffix="kWh"
+                valueSuffix="kWh"
                 badge={this.badge}
             />,
             <limel-info-tile
                 label="Average weekly usage"
                 icon="electricity"
                 value={this.value}
-                suffix="kWh"
+                valueSuffix="kWh"
                 progress={this.progress}
-                prefix="↑"
+                valuePrefix="↑"
             />,
         ];
     }
diff --git a/src/components/info-tile/examples/info-tile.tsx b/src/components/info-tile/examples/info-tile.tsx
index 516fcb9c1d..7ac8938e15 100644
--- a/src/components/info-tile/examples/info-tile.tsx
+++ b/src/components/info-tile/examples/info-tile.tsx
@@ -41,9 +41,9 @@ export class InfoTileExample {
                 <limel-info-tile
                     icon="partly_cloudy_rain"
                     label="Partly cloudy with a risk of rain"
-                    prefix="temp"
+                    valuePrefix="temp"
                     value="23"
-                    suffix="°C"
+                    valueSuffix="°C"
                     link={link}
                 />
             </div>
diff --git a/src/components/info-tile/info-tile.tsx b/src/components/info-tile/info-tile.tsx
index 4e9045617e..ada1fc4954 100644
--- a/src/components/info-tile/info-tile.tsx
+++ b/src/components/info-tile/info-tile.tsx
@@ -47,16 +47,30 @@ export class InfoTile {
 
     /**
      * A string of text that is visually placed before the value.
+     * @deprecated Use `valuePrefix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public prefix?: string;
 
     /**
      * A string of text that is visually placed after the value.
+     * @deprecated Use `valueSuffix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public suffix?: string;
 
+    /**
+     * A string of text that is visually placed before the value.
+     */
+    @Prop({ reflect: true })
+    public valuePrefix?: string;
+
+    /**
+     * A string of text that is visually placed after the value.
+     */
+    @Prop({ reflect: true })
+    public valueSuffix?: string;
+
     /**
      * Set to `true` if info tile is disabled.
      */
@@ -126,16 +140,35 @@ export class InfoTile {
     }
 
     public render() {
+        // Warn about deprecated props
+        if (this.prefix !== null && this.prefix !== undefined) {
+            console.warn(
+                'The `prefix` property is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
+            );
+        }
+        if (this.suffix !== null && this.suffix !== undefined) {
+            console.warn(
+                'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
+            );
+        }
+
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
+
         const extendedAriaLabel =
-            this.checkProps(this?.prefix) +
+            this.checkProps(effectivePrefix) +
             this.value +
             ' ' +
-            this.checkProps(this?.suffix) +
+            this.checkProps(effectiveSuffix) +
             this.checkProps(this?.label) +
             '. ' +
-            this.checkProps(this?.progress?.prefix) +
+            this.checkProps(
+                this?.progress?.valuePrefix ?? this?.progress?.prefix
+            ) +
             this.checkProps(this?.progress?.value) +
-            this.checkProps(this?.progress?.suffix) +
+            this.checkProps(
+                this?.progress?.valueSuffix ?? this?.progress?.suffix
+            ) +
             this.checkProps(this?.link?.title);
 
         const link = this.disabled ? '#' : this.link?.href;
@@ -188,8 +221,9 @@ export class InfoTile {
     }
 
     private renderPrefix = () => {
-        if (this.prefix) {
-            return <span class="prefix">{this.prefix}</span>;
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        if (effectivePrefix) {
+            return <span class="prefix">{effectivePrefix}</span>;
         }
     };
 
@@ -215,8 +249,9 @@ export class InfoTile {
     };
 
     private renderSuffix = () => {
-        if (this.suffix) {
-            return <span class="suffix">{this.suffix}</span>;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
+        if (effectiveSuffix) {
+            return <span class="suffix">{effectiveSuffix}</span>;
         }
     };
 
@@ -242,12 +277,39 @@ export class InfoTile {
             return;
         }
 
+        // Warn about deprecated progress props
+        if (
+            this.progress.prefix !== null &&
+            this.progress.prefix !== undefined
+        ) {
+            console.warn(
+                'The `prefix` property in InfoTileProgress is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
+            );
+        }
+        if (
+            this.progress.suffix !== null &&
+            this.progress.suffix !== undefined &&
+            this.progress.valueSuffix === undefined
+        ) {
+            console.warn(
+                'The `suffix` property in InfoTileProgress is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
+            );
+        }
+
+        const effectiveProgressPrefix =
+            this.progress.valuePrefix ?? this.progress.prefix;
+        const effectiveProgressSuffix =
+            this.progress.valueSuffix ?? this.progress.suffix;
+
         return (
             <limel-circular-progress
                 class="progress"
-                prefix={this.progress.prefix}
+                valuePrefix={effectiveProgressPrefix}
+                valueSuffix={effectiveProgressSuffix}
+                // Keep old props for backward compatibility until circular-progress only uses new props
+                prefix={effectiveProgressPrefix}
+                suffix={effectiveProgressSuffix}
                 value={this.progress.value}
-                suffix={this.progress.suffix}
                 maxValue={this.progress.maxValue}
                 displayPercentageColors={this.progress.displayPercentageColors}
             />
diff --git a/src/components/info-tile/info-tile.types.ts b/src/components/info-tile/info-tile.types.ts
index 1093f7689d..935eb35e2b 100644
--- a/src/components/info-tile/info-tile.types.ts
+++ b/src/components/info-tile/info-tile.types.ts
@@ -15,14 +15,27 @@ export interface InfoTileProgress {
     /**
      * The prefix which is displayed before the `progressValue`.
      * Keep to a few characters at most.
+     * @deprecated Use `valuePrefix` instead. Will be removed in a future version.
      */
     prefix?: string;
 
     /**
      * The suffix which is displayed after the `value`, must be one or two characters long.
+     * @deprecated Use `valueSuffix` instead. Will be removed in a future version.
      */
     suffix?: string;
 
+    /**
+     * The prefix which is displayed before the `progressValue`.
+     * Keep to a few characters at most.
+     */
+    valuePrefix?: string;
+
+    /**
+     * The suffix which is displayed after the `value`, must be one or two characters long.
+     */
+    valueSuffix?: string;
+
     /**
      * When set to `true`, the progress bar changes color depending on its current value.
      */
diff --git a/src/components/input-field/examples/input-field-number-prefix.tsx b/src/components/input-field/examples/input-field-number-prefix.tsx
index 028f79221d..e553f28429 100644
--- a/src/components/input-field/examples/input-field-number-prefix.tsx
+++ b/src/components/input-field/examples/input-field-number-prefix.tsx
@@ -16,7 +16,7 @@ export class InputFieldPrefixExample {
         return (
             <limel-input-field
                 label="Price per unit"
-                prefix="$"
+                valuePrefix="$"
                 value={this.value}
                 type="number"
                 onChange={this.handleChange}
diff --git a/src/components/input-field/examples/input-field-text-suffix.tsx b/src/components/input-field/examples/input-field-text-suffix.tsx
index d2ddb148dc..352ec223c3 100644
--- a/src/components/input-field/examples/input-field-text-suffix.tsx
+++ b/src/components/input-field/examples/input-field-text-suffix.tsx
@@ -16,7 +16,7 @@ export class InputFieldSuffixExample {
         return (
             <limel-input-field
                 label="Quantity"
-                suffix="pcs"
+                valueSuffix="pcs"
                 value={this.value}
                 type="number"
                 onChange={this.handleChange}
diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
index 78d4e5a1b2..020adec5f9 100644
--- a/src/components/input-field/input-field.tsx
+++ b/src/components/input-field/input-field.tsx
@@ -107,6 +107,7 @@ export class InputField {
     /**
      * A short piece of text to display before the value inside the input field.
      * Displayed for all types except `textarea`.
+     * @deprecated Use `valuePrefix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public prefix: string;
@@ -114,10 +115,25 @@ export class InputField {
     /**
      * A short piece of text to display after the value inside the input field.
      * Displayed for all types except `textarea`.
+     * @deprecated Use `valueSuffix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public suffix: string;
 
+    /**
+     * A short piece of text to display before the value inside the input field.
+     * Displayed for all types except `textarea`.
+     */
+    @Prop({ reflect: true })
+    public valuePrefix: string;
+
+    /**
+     * A short piece of text to display after the value inside the input field.
+     * Displayed for all types except `textarea`.
+     */
+    @Prop({ reflect: true })
+    public valueSuffix: string;
+
     /**
      * Set to `true` to indicate that the field is required.
      */
@@ -344,6 +360,18 @@ export class InputField {
     }
 
     public render() {
+        // Warn about deprecated props
+        if (this.prefix !== null && this.prefix !== undefined) {
+            console.warn(
+                'The `prefix` property is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
+            );
+        }
+        if (this.suffix !== null && this.suffix !== undefined) {
+            console.warn(
+                'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
+            );
+        }
+
         const properties = this.getAdditionalProps();
         properties['aria-labelledby'] = this.labelId;
         properties.class = 'mdc-text-field__input';
@@ -640,11 +668,13 @@ export class InputField {
             'mdc-text-field__affix--suffix': true,
         };
 
-        return <span class={classList}>{this.suffix}</span>;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
+        return <span class={classList}>{effectiveSuffix}</span>;
     };
 
     private hasSuffix = () => {
-        return this.suffix !== null && this.suffix !== undefined;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
+        return effectiveSuffix !== null && effectiveSuffix !== undefined;
     };
 
     private renderPrefix = () => {
@@ -657,11 +687,13 @@ export class InputField {
             'mdc-text-field__affix--prefix': true,
         };
 
-        return <span class={classList}>{this.prefix}</span>;
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        return <span class={classList}>{effectivePrefix}</span>;
     };
 
     private hasPrefix = () => {
-        return this.prefix !== null && this.prefix !== undefined;
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        return effectivePrefix !== null && effectivePrefix !== undefined;
     };
 
     private isInvalid = () => {

From 32ceb093b077d419f26d381dadf9d4159a25fbdd Mon Sep 17 00:00:00 2001
From: adrianschmidt-bot <rubenpauladrian+bot@gmail.com>
Date: Sat, 21 Mar 2026 13:25:59 +0100
Subject: [PATCH 2/7] fixup! feat: add valuePrefix and valueSuffix properties
 as replacements for deprecated prefix and suffix

address CodeRabbit review: move deprecation warnings to lifecycle hooks, fix aria-label, update JSDoc, fix nested deprecation
---
 .../circular-progress/circular-progress.tsx   | 41 ++++++++----
 src/components/info-tile/info-tile.tsx        | 65 +++++++++++--------
 src/components/input-field/input-field.tsx    | 12 +++-
 3 files changed, 79 insertions(+), 39 deletions(-)

diff --git a/src/components/circular-progress/circular-progress.tsx b/src/components/circular-progress/circular-progress.tsx
index 0b5d493ce6..30af551985 100644
--- a/src/components/circular-progress/circular-progress.tsx
+++ b/src/components/circular-progress/circular-progress.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h, Prop, Watch } from '@stencil/core';
 import { CircularProgressSize } from '../circular-progress/circular-progress.types';
 import { abbreviate } from '../badge/format';
 
@@ -84,21 +84,22 @@ export class CircularProgress {
     @Prop({ reflect: true })
     public size: CircularProgressSize;
 
-    public render() {
-        const classList = {
-            'lime-circular-progress': true,
-            'displays-percentage-colors': this.displayPercentageColors,
-        };
-
-        const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
-        const value = Math.round(this.value * 10) / 10;
+    public componentWillLoad() {
+        this.warnIfDeprecatedPrefix();
+        this.warnIfDeprecatedSuffix();
+    }
 
-        // Warn about deprecated props
+    @Watch('prefix')
+    private warnIfDeprecatedPrefix() {
         if (this.prefix !== null && this.prefix !== undefined) {
             console.warn(
                 'The `prefix` property is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
             );
         }
+    }
+
+    @Watch('suffix')
+    private warnIfDeprecatedSuffix() {
         if (
             this.suffix !== '%' &&
             this.suffix !== null &&
@@ -109,15 +110,33 @@ export class CircularProgress {
                 'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
             );
         }
+    }
+
+    public render() {
+        const classList = {
+            'lime-circular-progress': true,
+            'displays-percentage-colors': this.displayPercentageColors,
+        };
+
+        const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
+        const value = Math.round(this.value * 10) / 10;
 
         const effectivePrefix = this.valuePrefix ?? this.prefix;
         const effectiveSuffix = this.valueSuffix ?? this.suffix ?? '%';
 
+        const ariaValueText = [
+            effectivePrefix,
+            abbreviate(value),
+            effectiveSuffix,
+        ]
+            .filter(Boolean)
+            .join('');
+
         return (
             <div
                 role="progressbar"
                 class={classList}
-                aria-label="%"
+                aria-valuetext={ariaValueText}
                 aria-valuemin="0"
                 aria-valuemax={this.maxValue}
                 aria-valuenow={this.value}
diff --git a/src/components/info-tile/info-tile.tsx b/src/components/info-tile/info-tile.tsx
index ada1fc4954..b5cac8514c 100644
--- a/src/components/info-tile/info-tile.tsx
+++ b/src/components/info-tile/info-tile.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, h, Element, Host, State } from '@stencil/core';
+import { Component, Prop, h, Element, Host, State, Watch } from '@stencil/core';
 import { InfoTileProgress } from '../info-tile/info-tile.types';
 import { Link } from '../../global/shared-types/link.types';
 import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
@@ -110,7 +110,7 @@ export class InfoTile {
      *
      * Defaults:
      * - `maxValue`: 100
-     * - `suffix`: %
+     * - `valueSuffix`: %
      * - `displayPercentageColors`: false
      *
      * Colors change with intervals of 10 %.
@@ -137,21 +137,56 @@ export class InfoTile {
         this.handleMouseEnter = handleMouseEnter;
         this.handleMouseLeave = handleMouseLeave;
         this.updateHasPrimarySlotContent();
+        this.warnIfDeprecatedPrefix();
+        this.warnIfDeprecatedSuffix();
+        this.warnIfDeprecatedProgressPrefix();
+        this.warnIfDeprecatedProgressSuffix();
     }
 
-    public render() {
-        // Warn about deprecated props
+    @Watch('prefix')
+    private warnIfDeprecatedPrefix() {
         if (this.prefix !== null && this.prefix !== undefined) {
             console.warn(
                 'The `prefix` property is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
             );
         }
+    }
+
+    @Watch('suffix')
+    private warnIfDeprecatedSuffix() {
         if (this.suffix !== null && this.suffix !== undefined) {
             console.warn(
                 'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
             );
         }
+    }
+
+    @Watch('progress')
+    private warnIfDeprecatedProgressPrefix() {
+        if (
+            this.progress?.prefix !== null &&
+            this.progress?.prefix !== undefined
+        ) {
+            console.warn(
+                'The `prefix` property in InfoTileProgress is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
+            );
+        }
+    }
+
+    @Watch('progress')
+    private warnIfDeprecatedProgressSuffix() {
+        if (
+            this.progress?.suffix !== null &&
+            this.progress?.suffix !== undefined &&
+            this.progress?.valueSuffix === undefined
+        ) {
+            console.warn(
+                'The `suffix` property in InfoTileProgress is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
+            );
+        }
+    }
 
+    public render() {
         const effectivePrefix = this.valuePrefix ?? this.prefix;
         const effectiveSuffix = this.valueSuffix ?? this.suffix;
 
@@ -277,25 +312,6 @@ export class InfoTile {
             return;
         }
 
-        // Warn about deprecated progress props
-        if (
-            this.progress.prefix !== null &&
-            this.progress.prefix !== undefined
-        ) {
-            console.warn(
-                'The `prefix` property in InfoTileProgress is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
-            );
-        }
-        if (
-            this.progress.suffix !== null &&
-            this.progress.suffix !== undefined &&
-            this.progress.valueSuffix === undefined
-        ) {
-            console.warn(
-                'The `suffix` property in InfoTileProgress is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
-            );
-        }
-
         const effectiveProgressPrefix =
             this.progress.valuePrefix ?? this.progress.prefix;
         const effectiveProgressSuffix =
@@ -306,9 +322,6 @@ export class InfoTile {
                 class="progress"
                 valuePrefix={effectiveProgressPrefix}
                 valueSuffix={effectiveProgressSuffix}
-                // Keep old props for backward compatibility until circular-progress only uses new props
-                prefix={effectiveProgressPrefix}
-                suffix={effectiveProgressSuffix}
                 value={this.progress.value}
                 maxValue={this.progress.maxValue}
                 displayPercentageColors={this.progress.displayPercentageColors}
diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
index 020adec5f9..2802b24280 100644
--- a/src/components/input-field/input-field.tsx
+++ b/src/components/input-field/input-field.tsx
@@ -359,19 +359,25 @@ export class InputField {
         }
     }
 
-    public render() {
-        // Warn about deprecated props
+    @Watch('prefix')
+    private warnIfDeprecatedPrefix() {
         if (this.prefix !== null && this.prefix !== undefined) {
             console.warn(
                 'The `prefix` property is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
             );
         }
+    }
+
+    @Watch('suffix')
+    private warnIfDeprecatedSuffix() {
         if (this.suffix !== null && this.suffix !== undefined) {
             console.warn(
                 'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
             );
         }
+    }
 
+    public render() {
         const properties = this.getAdditionalProps();
         properties['aria-labelledby'] = this.labelId;
         properties.class = 'mdc-text-field__input';
@@ -480,6 +486,8 @@ export class InputField {
         }
 
         this.mapCompletions();
+        this.warnIfDeprecatedPrefix();
+        this.warnIfDeprecatedSuffix();
 
         window.addEventListener('resize', this.layout, { passive: true });
         this.limelInputField.addEventListener('focus', this.setFocus);

From 043a688cf1cf798ec1052cccc357cb1ec75098aa Mon Sep 17 00:00:00 2001
From: adrianschmidt-bot <rubenpauladrian+bot@gmail.com>
Date: Sat, 21 Mar 2026 13:49:44 +0100
Subject: [PATCH 3/7] fixup! feat: add valuePrefix and valueSuffix properties
 as replacements for deprecated prefix and suffix

fixup! feat: add valuePrefix and valueSuffix properties as replacements for deprecated prefix and suffix

Make valuePrefix default consistent with valueSuffix (both undefined)
---
 src/components/circular-progress/circular-progress.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/circular-progress/circular-progress.tsx b/src/components/circular-progress/circular-progress.tsx
index 30af551985..c589727076 100644
--- a/src/components/circular-progress/circular-progress.tsx
+++ b/src/components/circular-progress/circular-progress.tsx
@@ -64,7 +64,7 @@ export class CircularProgress {
      * The prefix which is displayed before the `value`, must be a few characters characters long.
      */
     @Prop({ reflect: true })
-    public valuePrefix?: string = null;
+    public valuePrefix?: string;
 
     /**
      * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`

From 3742fb80d2bc2fa489ed78ed0436eca5e91d4179 Mon Sep 17 00:00:00 2001
From: adrianschmidt-bot <rubenpauladrian+bot@gmail.com>
Date: Sat, 21 Mar 2026 14:21:49 +0100
Subject: [PATCH 4/7] fixup! feat: add valuePrefix and valueSuffix properties
 as replacements for deprecated prefix and suffix

fixup! feat: add valuePrefix and valueSuffix properties as replacements for deprecated prefix and suffix

- Update circular-progress CSS variables example to use valuePrefix
- Add value-prefix/value-suffix to markdown whitelist for both
  circular-progress and info-tile
- Remove valueSuffix===undefined guard from suffix deprecation warning
  so warning fires when both suffix and valueSuffix are set
---
 .../circular-progress/circular-progress.tsx         |  3 +--
 .../examples/circular-progress-css-variables.tsx    |  2 +-
 src/components/markdown/default-whitelist.ts        | 13 ++++++++++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/circular-progress/circular-progress.tsx b/src/components/circular-progress/circular-progress.tsx
index c589727076..ef2ed5a37b 100644
--- a/src/components/circular-progress/circular-progress.tsx
+++ b/src/components/circular-progress/circular-progress.tsx
@@ -103,8 +103,7 @@ export class CircularProgress {
         if (
             this.suffix !== '%' &&
             this.suffix !== null &&
-            this.suffix !== undefined &&
-            this.valueSuffix === undefined
+            this.suffix !== undefined
         ) {
             console.warn(
                 'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
diff --git a/src/components/circular-progress/examples/circular-progress-css-variables.tsx b/src/components/circular-progress/examples/circular-progress-css-variables.tsx
index 3610570d0c..2c680f1ceb 100644
--- a/src/components/circular-progress/examples/circular-progress-css-variables.tsx
+++ b/src/components/circular-progress/examples/circular-progress-css-variables.tsx
@@ -24,6 +24,6 @@ export class CircularProgressCssVariablesExample {
     private value = 90;
 
     public render() {
-        return <limel-circular-progress prefix="↗" value={this.value} />;
+        return <limel-circular-progress valuePrefix="↗" value={this.value} />;
     }
 }
diff --git a/src/components/markdown/default-whitelist.ts b/src/components/markdown/default-whitelist.ts
index a7fec78fbc..520f7b4fb1 100644
--- a/src/components/markdown/default-whitelist.ts
+++ b/src/components/markdown/default-whitelist.ts
@@ -51,6 +51,8 @@ export const DEFAULT_MARKDOWN_WHITELIST: CustomElementDefinition[] = [
             'max-value',
             'prefix',
             'suffix',
+            'value-prefix',
+            'value-suffix',
             'size',
             'display-percentage-colors',
         ],
@@ -61,6 +63,15 @@ export const DEFAULT_MARKDOWN_WHITELIST: CustomElementDefinition[] = [
     },
     {
         tagName: 'limel-info-tile',
-        attributes: ['value', 'icon', 'label', 'prefix', 'suffix', 'badge'],
+        attributes: [
+            'value',
+            'icon',
+            'label',
+            'prefix',
+            'suffix',
+            'value-prefix',
+            'value-suffix',
+            'badge',
+        ],
     },
 ];

From 939923a7a07fa7fd015d4f164f5c9c17534ae5d7 Mon Sep 17 00:00:00 2001
From: adrianschmidt-bot <rubenpauladrian+bot@gmail.com>
Date: Mon, 23 Mar 2026 11:16:42 +0100
Subject: [PATCH 5/7] fixup! feat: add valuePrefix and valueSuffix properties
 as replacements for deprecated prefix and suffix

fixup! feat: add valuePrefix and valueSuffix properties as replacements for deprecated prefix and suffix

Initialize valuePrefix to null and valueSuffix to '%' in circular-progress
to match the defaults of the deprecated prefix/suffix properties. Update
fallback logic so the deprecated suffix prop still takes precedence when
explicitly set by consumers.
---
 src/components/circular-progress/circular-progress.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/circular-progress/circular-progress.tsx b/src/components/circular-progress/circular-progress.tsx
index ef2ed5a37b..84feb56f35 100644
--- a/src/components/circular-progress/circular-progress.tsx
+++ b/src/components/circular-progress/circular-progress.tsx
@@ -64,13 +64,13 @@ export class CircularProgress {
      * The prefix which is displayed before the `value`, must be a few characters characters long.
      */
     @Prop({ reflect: true })
-    public valuePrefix?: string;
+    public valuePrefix?: string = null;
 
     /**
      * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
      */
     @Prop({ reflect: true })
-    public valueSuffix?: string;
+    public valueSuffix?: string = '%';
 
     /**
      * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
@@ -121,7 +121,10 @@ export class CircularProgress {
         const value = Math.round(this.value * 10) / 10;
 
         const effectivePrefix = this.valuePrefix ?? this.prefix;
-        const effectiveSuffix = this.valueSuffix ?? this.suffix ?? '%';
+        const effectiveSuffix =
+            this.suffix !== '%' && this.suffix != null
+                ? this.suffix
+                : this.valueSuffix;
 
         const ariaValueText = [
             effectivePrefix,

From 5f0837e1b0a81756b08826a1cc5ea014a680f25c Mon Sep 17 00:00:00 2001
From: adrianschmidt-bot <rubenpauladrian+bot@gmail.com>
Date: Mon, 23 Mar 2026 11:22:52 +0100
Subject: [PATCH 6/7] fixup! feat: add valuePrefix and valueSuffix properties
 as replacements for deprecated prefix and suffix

fix JSDoc typo: duplicated word 'characters'
---
 src/components/circular-progress/circular-progress.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/circular-progress/circular-progress.tsx b/src/components/circular-progress/circular-progress.tsx
index 84feb56f35..304dfa8512 100644
--- a/src/components/circular-progress/circular-progress.tsx
+++ b/src/components/circular-progress/circular-progress.tsx
@@ -47,7 +47,7 @@ export class CircularProgress {
     public maxValue: number = PERCENT;
 
     /**
-     * The prefix which is displayed before the `value`, must be a few characters characters long.
+     * The prefix which is displayed before the `value`, must be a few characters long.
      * @deprecated Use `valuePrefix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
@@ -61,7 +61,7 @@ export class CircularProgress {
     public suffix: string = '%';
 
     /**
-     * The prefix which is displayed before the `value`, must be a few characters characters long.
+     * The prefix which is displayed before the `value`, must be a few characters long.
      */
     @Prop({ reflect: true })
     public valuePrefix?: string = null;

From 763f321f817d115e0eb5d42622f6a702926da5d5 Mon Sep 17 00:00:00 2001
From: adrianschmidt-bot <rubenpauladrian+bot@gmail.com>
Date: Mon, 23 Mar 2026 11:46:47 +0100
Subject: [PATCH 7/7] fixup! feat: add valuePrefix and valueSuffix properties
 as replacements for deprecated prefix and suffix

---
 src/components/circular-progress/circular-progress.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/circular-progress/circular-progress.tsx b/src/components/circular-progress/circular-progress.tsx
index 304dfa8512..48143e87dd 100644
--- a/src/components/circular-progress/circular-progress.tsx
+++ b/src/components/circular-progress/circular-progress.tsx
@@ -68,9 +68,11 @@ export class CircularProgress {
 
     /**
      * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
+     *
+     * @todo Change default value to `'%'` once the deprecated `suffix` property is removed.
      */
     @Prop({ reflect: true })
-    public valueSuffix?: string = '%';
+    public valueSuffix?: string = null;
 
     /**
      * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
@@ -121,10 +123,7 @@ export class CircularProgress {
         const value = Math.round(this.value * 10) / 10;
 
         const effectivePrefix = this.valuePrefix ?? this.prefix;
-        const effectiveSuffix =
-            this.suffix !== '%' && this.suffix != null
-                ? this.suffix
-                : this.valueSuffix;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
 
         const ariaValueText = [
             effectivePrefix,