From 184a1267cc9aa7b452ed36f14a9f750c3327bd1f Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Fri, 17 Apr 2026 11:22:41 -0700
Subject: [PATCH 1/6] feat(progress-bar): add recipe and tokens

---
 .../progress-bar/{progress-bar.common.scss => progress-bar.scss}  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename core/src/components/progress-bar/{progress-bar.common.scss => progress-bar.scss} (100%)

diff --git a/core/src/components/progress-bar/progress-bar.common.scss b/core/src/components/progress-bar/progress-bar.scss
similarity index 100%
rename from core/src/components/progress-bar/progress-bar.common.scss
rename to core/src/components/progress-bar/progress-bar.scss

From cf033e11c803a9cd1c27311977aafe8b776f04cc Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Fri, 17 Apr 2026 11:24:39 -0700
Subject: [PATCH 2/6] feat(progress-bar): add recipe and tokens pt2

---
 core/src/components.d.ts                      |  26 +---
 .../progress-bar/progress-bar.interfaces.ts   | 108 +++++++++++++++++
 .../progress-bar/progress-bar.ionic.scss      |   6 +-
 .../progress-bar/progress-bar.native.scss     |   6 +-
 .../components/progress-bar/progress-bar.scss | 111 ++++++++++++++++--
 .../components/progress-bar/progress-bar.tsx  |  40 ++-----
 .../progress-bar/test/basic/index.html        |   4 +-
 core/src/themes/ionic/default.tokens.ts       |  82 +++++++++++++
 core/src/themes/ios/default.tokens.ts         | 106 +++++++++++++++++
 core/src/themes/md/default.tokens.ts          |  96 +++++++++++++++
 core/src/themes/themes.interfaces.ts          |   3 +
 packages/angular/src/directives/proxies.ts    |   4 +-
 .../standalone/src/directives/proxies.ts      |   4 +-
 13 files changed, 525 insertions(+), 71 deletions(-)
 create mode 100644 core/src/components/progress-bar/progress-bar.interfaces.ts

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 5d1eff6638c..f7ac316bc1f 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -28,6 +28,7 @@ import { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
 import { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
 import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
+import { IonProgressBarShape } from "./components/progress-bar/progress-bar.interfaces";
 import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 import { RefresherEventDetail } from "./components/refresher/refresher-interface";
@@ -68,6 +69,7 @@ export { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
 export { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
 export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
+export { IonProgressBarShape } from "./components/progress-bar/progress-bar.interfaces";
 export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 export { RefresherEventDetail } from "./components/refresher/refresher-interface";
@@ -2987,23 +2989,15 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * The mode determines the platform behaviors of the component.
-         */
-        "mode"?: "ios" | "md";
         /**
           * If true, reverse the progress bar direction.
           * @default false
          */
         "reversed": boolean;
         /**
-          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` if both the shape property and theme config are unset.
          */
-        "shape"?: 'round' | 'rectangular';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "shape"?: IonProgressBarShape;
         /**
           * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
           * @default 'determinate'
@@ -8911,23 +8905,15 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * The mode determines the platform behaviors of the component.
-         */
-        "mode"?: "ios" | "md";
         /**
           * If true, reverse the progress bar direction.
           * @default false
          */
         "reversed"?: boolean;
         /**
-          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` if both the shape property and theme config are unset.
          */
-        "shape"?: 'round' | 'rectangular';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "shape"?: IonProgressBarShape;
         /**
           * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
           * @default 'determinate'
diff --git a/core/src/components/progress-bar/progress-bar.interfaces.ts b/core/src/components/progress-bar/progress-bar.interfaces.ts
new file mode 100644
index 00000000000..ecea5560d6f
--- /dev/null
+++ b/core/src/components/progress-bar/progress-bar.interfaces.ts
@@ -0,0 +1,108 @@
+export type IonProgressBarRecipe = {
+  height?: string | number;
+
+  // Indeterminate type (animated, no specific value)
+  indeterminate?: {
+    progress?: {
+      default?: {
+        background?: string;
+      };
+      semantic?: {
+        // Default state of the semantic color (not hover, focus, activated, etc.)
+        default?: {
+          background?: string;
+        };
+      };
+    };
+    buffer?: {
+      bar?: {
+        default?: {
+          background?: string;
+        };
+        semantic?: {
+          default?: {
+            background?: string;
+          };
+        };
+        solid?: {
+          default?: {
+            background?: string;
+          };
+        };
+      };
+    };
+  };
+
+  // Determinate type (has a specific value, optional buffer)
+  // it has three parts:
+  // - progress: the progress bar which represents the current value
+  // - buffer-bar: the buffer bar which represents the buffer value
+  // - buffer-circles: the buffer circles which are displayed when there is a buffer value but no progress value (value = 0, buffer > 0), this is optional
+  determinate?: {
+    progress?: {
+      default?: {
+        background?: string;
+      };
+      semantic?: {
+        // Default state of the semantic color (not hover, focus, activated, etc.)
+        default?: {
+          background?: string;
+        };
+      };
+    };
+    buffer?: {
+      bar?: {
+        default?: {
+          background?: string;
+        };
+        semantic?: {
+          default?: {
+            background?: string;
+          };
+        };
+        // When progress bar is solid (buffer = 1)
+        solid?: {
+          default?: {
+            background?: string;
+          };
+        };
+      };
+      circles?: {
+        default?: {
+          background?: string;
+        };
+        semantic?: {
+          default?: {
+            background?: string;
+          };
+        };
+        // When progress bar is solid (buffer = 1)
+        solid?: {
+          default?: {
+            background?: string;
+          };
+        };
+      };
+    };
+  };
+
+  // Shape variants
+  shape?: {
+    round?: {
+      border?: {
+        radius?: string | number;
+      };
+    };
+    rectangular?: {
+      border?: {
+        radius?: string | number;
+      };
+    };
+  };
+};
+
+export type IonProgressBarConfig = {
+  shape?: IonProgressBarShape;
+};
+
+export type IonProgressBarShape = 'round' | 'rectangular';
diff --git a/core/src/components/progress-bar/progress-bar.ionic.scss b/core/src/components/progress-bar/progress-bar.ionic.scss
index 3fad235b07f..877322916a2 100644
--- a/core/src/components/progress-bar/progress-bar.ionic.scss
+++ b/core/src/components/progress-bar/progress-bar.ionic.scss
@@ -1,12 +1,12 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@use "./progress-bar.common.scss";
+@use "./progress-bar.scss";
 
 // Ionic Progress bar
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ion-bg-neutral-subtle-default};
-  --progress-background: #{globals.ion-color(primary, base)};
+  --background: #{globals.$ion-bg-neutral-subtle-default}; // for determinate - buffer bar and circles
+  --progress-background: #{globals.ion-color(primary, base)}; // both determinate and indeterminate
 
   height: globals.$ion-scale-100;
 }
diff --git a/core/src/components/progress-bar/progress-bar.native.scss b/core/src/components/progress-bar/progress-bar.native.scss
index 5bc8e728b77..0bbb0d9d9e6 100644
--- a/core/src/components/progress-bar/progress-bar.native.scss
+++ b/core/src/components/progress-bar/progress-bar.native.scss
@@ -1,5 +1,5 @@
 @import "../../themes/native/native.globals";
-@import "./progress-bar.common.scss";
+@import "./progress-bar.scss";
 
 // Host has no background by default - this will be added to the progress-buffer-bar
 :host {
@@ -7,8 +7,8 @@
      * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set
      * @prop --progress-background: Background of the progress bar representing the current value
      */
-  --background: #{ion-color(primary, base, 0.3)};
-  --progress-background: #{ion-color(primary, base)};
+  --background: #{ion-color(primary, base, 0.3)}; // for determinate - buffer bar and circles
+  --progress-background: #{ion-color(primary, base)}; // both determinate and indeterminate
 }
 
 // Progress Bar: Color
diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 95541ae1449..6534f08eedc 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -1,15 +1,20 @@
-@import "../../themes/mixins";
+@use "../../themes/mixins" as mixins;
 
-// Progress bar
+// Progress Bar
 // ------------------------------------------------------------------------
 
-// Host has no background by default - this will be added to the progress-buffer-bar
 :host {
+  /**
+   * @prop --ion-progress-bar-determinate-buffer-bar-default-background: Background of the progress track, or the buffer bar if `buffer` is set
+   * @prop --ion-progress-bar-determinate-progress-default-background: Background of the progress bar representing the current value
+   */
+
   display: block;
 
   position: relative;
 
   width: 100%;
+  height: var(--ion-progress-bar-height);
 
   contain: strict;
 
@@ -22,7 +27,7 @@
 .indeterminate-bar-primary,
 .indeterminate-bar-secondary,
 .progress-buffer-bar {
-  @include position(0, 0, 0, 0);
+  @include mixins.position(0, 0, 0, 0);
   position: absolute;
 
   width: 100%;
@@ -31,7 +36,7 @@
 
 .buffer-circles-container,
 .buffer-circles {
-  @include position(0, 0, 0, 0);
+  @include mixins.position(0, 0, 0, 0);
   position: absolute;
 }
 
@@ -60,22 +65,34 @@
 
 .progress,
 .progress-indeterminate {
-  background: var(--progress-background);
-
   z-index: 2;
 }
 
-.progress-buffer-bar {
-  background: var(--background);
+.progress {
+  background: var(--ion-progress-bar-determinate-progress-default-background);
+}
 
+.progress-indeterminate {
+  background: var(--ion-progress-bar-indeterminate-progress-default-background);
+}
+
+.progress-buffer-bar {
   z-index: 1;
 }
 
+:host(.progress-bar-determinate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-determinate-buffer-bar-default-background);
+}
+
+:host(.progress-bar-indeterminate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
+}
+
 .buffer-circles-container {
   overflow: hidden;
 }
 
-// MD based animation on indeterminate type
+// Indeterminate Animation
 // --------------------------------------------------
 
 .indeterminate-bar-primary {
@@ -114,7 +131,12 @@
 // ------------------------------------------------------------------------
 
 .buffer-circles {
-  background-image: radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, transparent 30%);
+  background-image: radial-gradient(
+    ellipse at center,
+    var(--ion-progress-bar-determinate-buffer-circles-default-background) 0%,
+    var(--ion-progress-bar-determinate-buffer-circles-default-background) 30%,
+    transparent 30%
+  );
 
   /* stylelint-disable property-disallowed-list */
   background-repeat: repeat-x;
@@ -126,6 +148,73 @@
   animation: buffering 450ms infinite linear;
 }
 
+// Progress Bar: Shape Variants
+// -------------------------------------------------------------------------------
+
+:host(.progress-bar-shape-round) {
+  @include mixins.border-radius(var(--ion-progress-bar-shape-round-border-radius));
+}
+
+:host(.progress-bar-shape-rectangular) {
+  @include mixins.border-radius(var(--ion-progress-bar-shape-rectangular-border-radius));
+}
+
+// Progress Bar: Solid (buffer = 1)
+// -------------------------------------------------------------------------------
+
+:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
+  background: var(
+    --ion-progress-bar-determinate-buffer-bar-solid-default-background,
+    var(--ion-progress-bar-determinate-buffer-bar-default-background)
+  );
+}
+
+:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
+  background: var(
+    --ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
+    var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
+  );
+}
+
+:host(.progress-bar-solid) .buffer-circles {
+  background-image: radial-gradient(
+    ellipse at center,
+    var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 0%,
+    var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 30%,
+    transparent 30%
+  );
+}
+
+// Progress Bar: Color
+// ------------------------------------------------------------------------
+
+// Indeterminate
+:host(.ion-color) .progress-indeterminate {
+  background: var(--ion-progress-bar-indeterminate-progress-semantic-default-background);
+}
+
+// Determinate
+:host(.ion-color) .progress {
+  background: var(--ion-progress-bar-determinate-progress-semantic-default-background);
+}
+
+:host(.ion-color.progress-bar-determinate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-determinate-buffer-bar-semantic-default-background);
+}
+
+:host(.ion-color.progress-bar-indeterminate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background);
+}
+
+:host(.ion-color) .buffer-circles {
+  background-image: radial-gradient(
+    ellipse at center,
+    var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 0%,
+    var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 30%,
+    transparent 30%
+  );
+}
+
 // Progress Bar: Reversed
 // ------------------------------------------------------------------------
 // If reversed is set to true, the animation will be reversed
diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index 729448aff1e..5534e0a32a6 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -4,13 +4,11 @@ import { clamp } from '@utils/helpers';
 import { createColorClasses } from '@utils/theme';
 
 import { config } from '../../global/config';
-import { getIonTheme } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 
+import type { IonProgressBarShape } from './progress-bar.interfaces';
+
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @part progress - The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
  * @part stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.
  * @part track - The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the
@@ -18,11 +16,7 @@ import type { Color } from '../../interface';
  */
 @Component({
   tag: 'ion-progress-bar',
-  styleUrls: {
-    ios: 'progress-bar.ios.scss',
-    md: 'progress-bar.md.scss',
-    ionic: 'progress-bar.ionic.scss',
-  },
+  styleUrl: 'progress-bar.scss',
   shadow: true,
 })
 export class ProgressBar implements ComponentInterface {
@@ -61,31 +55,22 @@ export class ProgressBar implements ComponentInterface {
    * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"`
    * for a progress bar without rounded corners.
    *
-   * Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+   * Defaults to `"round"` if both the shape property and theme config are unset.
    */
-  @Prop() shape?: 'round' | 'rectangular';
-
-  private getShape(): string | undefined {
-    const theme = getIonTheme(this);
-    const { shape } = this;
-
-    // TODO(ROU-11638): Remove theme check when shapes are defined for all themes.
-    if (theme !== 'ionic') {
-      return undefined;
-    }
+  @Prop() shape?: IonProgressBarShape;
 
-    if (shape === undefined) {
-      return 'round';
-    }
-
-    return shape;
+  /**
+   * Gets the progress bar shape. Uses the `shape` property if set, otherwise
+   * checks the theme config. Returns undefined if neither is set.
+   */
+  get shapeValue(): IonProgressBarShape | undefined {
+    return this.shape ?? (config.getObjectValue('IonProgressBar.shape') as IonProgressBarShape | undefined);
   }
 
   render() {
     const { color, type, reversed, value, buffer } = this;
     const paused = config.getBoolean('_testing');
-    const theme = getIonTheme(this);
-    const shape = this.getShape();
+    const shape = this.shapeValue;
     // If the progress is displayed as a solid bar.
     const progressSolid = buffer === 1;
     return (
@@ -95,7 +80,6 @@ export class ProgressBar implements ComponentInterface {
         aria-valuemin="0"
         aria-valuemax="1"
         class={createColorClasses(color, {
-          [theme]: true,
           [`progress-bar-${type}`]: true,
           'progress-paused': paused,
           'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
diff --git a/core/src/components/progress-bar/test/basic/index.html b/core/src/components/progress-bar/test/basic/index.html
index 31ab53d9137..da38c6a7faa 100644
--- a/core/src/components/progress-bar/test/basic/index.html
+++ b/core/src/components/progress-bar/test/basic/index.html
@@ -15,11 +15,11 @@
 
     <style>
       .custom-bar-background {
-        --background: red;
+        --ion-progress-bar-determinate-buffer-bar-solid-default-background: red;
       }
 
       .no-bar-background {
-        --background: none;
+        --ion-progress-bar-determinate-buffer-bar-solid-default-background: none;
       }
 
       ion-content ion-progress-bar {
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index e4d4407e2b6..de4333d3210 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -28,6 +28,10 @@ export const defaultTheme: DefaultTheme = {
         size: 'large',
       },
 
+      IonProgressBar: {
+        shape: 'round',
+      },
+
       IonSpinner: {
         size: 'xsmall',
       },
@@ -463,6 +467,84 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonProgressBar: {
+      height: 'var(--token-scale-100, var(--ion-scaling-100))',
+
+      indeterminate: {
+        progress: {
+          default: {
+            // TODO: Replace with ionColor() once that utility is merged
+            // ion-color(primary, base) -> ionColor('primary', 'base')
+            background: 'var(--ion-color-primary-bold)',
+          },
+
+          semantic: {
+            default: {
+              background: currentColor('base'),
+            },
+          },
+        },
+
+        buffer: {
+          bar: {
+            default: {
+              background: 'var(--token-bg-neutral-subtle-default, #eae9e9)',
+            },
+          },
+        },
+      },
+
+      determinate: {
+        progress: {
+          default: {
+            // TODO: Replace with ionColor() once that utility is merged
+            // ion-color(primary, base) -> ionColor('primary', 'base')
+            background: 'var(--ion-color-primary-bold)',
+          },
+
+          semantic: {
+            default: {
+              background: currentColor('base'),
+            },
+          },
+        },
+
+        buffer: {
+          bar: {
+            default: {
+              background: 'var(--token-bg-neutral-subtle-default, #eae9e9)',
+            },
+          },
+
+          circles: {
+            default: {
+              background: 'var(--token-bg-neutral-subtle-default, #eae9e9)',
+            },
+
+            semantic: {
+              default: {
+                background: currentColor('base', 0.3),
+              },
+            },
+          },
+        },
+      },
+
+      shape: {
+        round: {
+          border: {
+            radius: 'var(--token-round-xs, var(--ion-radii-xxxxl))',
+          },
+        },
+
+        rectangular: {
+          border: {
+            radius: 'var(--token-rectangular-xs, var(--ion-radii-xxxxs))',
+          },
+        },
+      },
+    },
+
     IonSpinner: {
       color: '#626262',
 
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index f79dd62558b..2e9ed62348a 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -30,6 +30,10 @@ export const defaultTheme: DefaultTheme = {
         size: 'large',
       },
 
+      IonProgressBar: {
+        shape: 'round',
+      },
+
       IonSpinner: {
         size: 'medium',
       },
@@ -475,6 +479,108 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonProgressBar: {
+      height: 'var(--ion-scaling-100)',
+
+      indeterminate: {
+        progress: {
+          default: {
+            // TODO: Replace with ionColor() once that utility is merged
+            // ion-color(primary, base) -> ionColor('primary', 'base')
+            background: 'var(--ion-color-primary-bold)',
+          },
+
+          semantic: {
+            default: {
+              background: currentColor('base'),
+            },
+          },
+        },
+
+        buffer: {
+          bar: {
+            default: {
+              // TODO: Replace rgba() with ionColor() once that utility is merged
+              // ion-color(primary, base, 0.3) -> ionColor('primary', 'base', { alpha: 0.3 }),
+              background: rgba('var(--ion-color-primary-bold-rgb)', 0.3),
+            },
+
+            solid: {
+              default: {
+                background: `var(--ion-background-color-step-100, ${mix(baseColors.black, baseColors.white, '90%')})`,
+              },
+            },
+          },
+        },
+      },
+
+      determinate: {
+        progress: {
+          default: {
+            // TODO: Replace with ionColor() once that utility is merged
+            // ion-color(primary, base) -> ionColor('primary', 'base')
+            background: 'var(--ion-color-primary-bold)',
+          },
+
+          semantic: {
+            default: {
+              background: currentColor('base'),
+            },
+          },
+        },
+
+        buffer: {
+          bar: {
+            default: {
+              // TODO: Replace rgba() with ionColor() once that utility is merged
+              // ion-color(primary, base, 0.3) -> ionColor('primary', 'base', { alpha: 0.3 }),
+              background: rgba('var(--ion-color-primary-bold-rgb)', 0.3),
+            },
+
+            solid: {
+              default: {
+                background: `var(--ion-background-color-step-100, ${mix(baseColors.black, baseColors.white, '90%')})`,
+              },
+            },
+          },
+
+          circles: {
+            default: {
+              // TODO: Replace rgba() with ionColor() once that utility is merged
+              // ion-color(primary, base, 0.3) -> ionColor('primary', 'base', { alpha: 0.3 })
+              background: rgba('var(--ion-color-primary-bold-rgb)', 0.3),
+            },
+
+            semantic: {
+              default: {
+                background: currentColor('base', 0.3),
+              },
+            },
+
+            solid: {
+              default: {
+                background: `var(--ion-background-color-step-100, ${mix(baseColors.black, baseColors.white, '90%')})`,
+              },
+            },
+          },
+        },
+      },
+
+      shape: {
+        round: {
+          border: {
+            radius: 'var(--ion-radii-xxxxl)',
+          },
+        },
+
+        rectangular: {
+          border: {
+            radius: 'var(--ion-radii-xxxxs)',
+          },
+        },
+      },
+    },
+
     IonSpinner: {
       color: 'var(--ion-text-color, #000)',
 
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index b978c59ef9b..2ff79bc430d 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -594,6 +594,102 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonProgressBar: {
+      height: 'var(--ion-scaling-100)',
+
+      indeterminate: {
+        progress: {
+          default: {
+            // TODO: Replace with ionColor() once that utility is merged
+            // ion-color(primary, base) -> ionColor('primary', 'base')
+            background: 'var(--ion-color-primary-bold)',
+          },
+
+          semantic: {
+            default: {
+              background: currentColor('base'),
+            },
+          },
+        },
+
+        buffer: {
+          bar: {
+            default: {
+              // TODO: Replace rgba() with ionColor() once that utility is merged
+              // ion-color(primary, base, 0.3) -> ionColor('primary', 'base', { alpha: 0.3 }),
+              background: rgba('var(--ion-color-primary-bold-rgb)', 0.3),
+            },
+
+            semantic: {
+              default: {
+                background: currentColor('base', 0.3),
+              },
+            },
+          },
+        },
+      },
+
+      determinate: {
+        progress: {
+          default: {
+            // TODO: Replace with ionColor() once that utility is merged
+            // ion-color(primary, base) -> ionColor('primary', 'base')
+            background: 'var(--ion-color-primary-bold)',
+          },
+
+          semantic: {
+            default: {
+              background: currentColor('base'),
+            },
+          },
+        },
+
+        buffer: {
+          bar: {
+            default: {
+              // TODO: Replace rgba() with ionColor() once that utility is merged
+              // ion-color(primary, base, 0.3) -> ionColor('primary', 'base', { alpha: 0.3 }),
+              background: rgba('var(--ion-color-primary-bold-rgb)', 0.3),
+            },
+
+            semantic: {
+              default: {
+                background: currentColor('base', 0.3),
+              },
+            },
+          },
+
+          circles: {
+            default: {
+              // TODO: Replace rgba() with ionColor() once that utility is merged
+              // ion-color(primary, base, 0.3) -> ionColor('primary', 'base', { alpha: 0.3 })
+              background: rgba('var(--ion-color-primary-bold-rgb)', 0.3),
+            },
+
+            semantic: {
+              default: {
+                background: currentColor('base', 0.3),
+              },
+            },
+          },
+        },
+      },
+
+      shape: {
+        round: {
+          border: {
+            radius: 'var(--ion-radii-xxxxl)',
+          },
+        },
+
+        rectangular: {
+          border: {
+            radius: 'var(--ion-radii-xxxxs)',
+          },
+        },
+      },
+    },
+
     IonSpinner: {
       color: 'var(--ion-text-color, #000)',
 
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
index e7e8685cff9..9a2476680f7 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -1,5 +1,6 @@
 import type { IonChipConfig, IonChipRecipe } from '../components/chip/chip.interfaces';
 import type { IonItemDividerRecipe } from '../components/item-divider/item-divider.interfaces';
+import type { IonProgressBarConfig, IonProgressBarRecipe } from '../components/progress-bar/progress-bar.interfaces';
 import type { IonSpinnerConfig, IonSpinnerRecipe } from '../components/spinner/spinner.interfaces';
 import type { IonicConfig as IonicGlobalConfig } from '../utils/config';
 
@@ -243,6 +244,7 @@ export type BaseTheme = {
 export type IonicConfig = IonicGlobalConfig & {
   components?: {
     IonChip?: IonChipConfig;
+    IonProgressBar?: IonProgressBarConfig;
     IonSpinner?: IonSpinnerConfig;
   };
 };
@@ -282,6 +284,7 @@ export type DefaultTheme = BaseTheme & {
 type Components = {
   IonChip?: IonChipRecipe;
   IonItemDivider?: IonItemDividerRecipe;
+  IonProgressBar?: IonProgressBarRecipe;
   IonSpinner?: IonSpinnerRecipe;
 
   IonCard?: any;
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index b1073a2cfbf..b14fab4caf0 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -1674,14 +1674,14 @@ Shorthand for ionPickerDidDismiss.
 
 
 @ProxyCmp({
-  inputs: ['buffer', 'color', 'mode', 'reversed', 'shape', 'theme', 'type', 'value']
+  inputs: ['buffer', 'color', 'reversed', 'shape', 'type', 'value']
 })
 @Component({
   selector: 'ion-progress-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['buffer', 'color', 'mode', 'reversed', 'shape', 'theme', 'type', 'value'],
+  inputs: ['buffer', 'color', 'reversed', 'shape', 'type', 'value'],
 })
 export class IonProgressBar {
   protected el: HTMLIonProgressBarElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 62d708102b3..a4dc1b8342a 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1618,14 +1618,14 @@ Shorthand for ionPickerDidDismiss.
 
 @ProxyCmp({
   defineCustomElementFn: defineIonProgressBar,
-  inputs: ['buffer', 'color', 'mode', 'reversed', 'shape', 'theme', 'type', 'value']
+  inputs: ['buffer', 'color', 'reversed', 'shape', 'type', 'value']
 })
 @Component({
   selector: 'ion-progress-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['buffer', 'color', 'mode', 'reversed', 'shape', 'theme', 'type', 'value'],
+  inputs: ['buffer', 'color', 'reversed', 'shape', 'type', 'value'],
   standalone: true
 })
 export class IonProgressBar {

From 87d6c29dc7b96b0bf3fff7bc42ce4da2014a4970 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Fri, 17 Apr 2026 14:24:50 -0700
Subject: [PATCH 3/6] feat(progress-bar): more buffer bar styles

---
 .../components/progress-bar/progress-bar.scss | 144 +++++++++---------
 1 file changed, 73 insertions(+), 71 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 6534f08eedc..4edbe87864e 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -1,7 +1,7 @@
 @use "../../themes/mixins" as mixins;
 
 // Progress Bar
-// ------------------------------------------------------------------------
+// ---------------------------------------------
 
 :host {
   /**
@@ -49,7 +49,7 @@
 }
 
 // Determinate progress bar
-// --------------------------------------------------
+// ---------------------------------------------
 
 .progress,
 .progress-buffer-bar,
@@ -60,75 +60,42 @@
   transition: transform 150ms linear;
 }
 
-// Progress and background bar
-// --------------------------------------------------
+// Progress Bar: progress, buffer bar, and circles
+// ---------------------------------------------
 
 .progress,
 .progress-indeterminate {
   z-index: 2;
 }
 
-.progress {
-  background: var(--ion-progress-bar-determinate-progress-default-background);
-}
-
-.progress-indeterminate {
-  background: var(--ion-progress-bar-indeterminate-progress-default-background);
-}
-
 .progress-buffer-bar {
   z-index: 1;
 }
 
-:host(.progress-bar-determinate) .progress-buffer-bar {
-  background: var(--ion-progress-bar-determinate-buffer-bar-default-background);
-}
-
-:host(.progress-bar-indeterminate) .progress-buffer-bar {
-  background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
-}
-
 .buffer-circles-container {
   overflow: hidden;
 }
 
-// Indeterminate Animation
-// --------------------------------------------------
-
-.indeterminate-bar-primary {
-  /* stylelint-disable property-disallowed-list */
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: -145.166611%;
-  /* stylelint-enable property-disallowed-list */
-
-  animation: primary-indeterminate-translate 2s infinite linear;
-
-  .progress-indeterminate {
-    animation: primary-indeterminate-scale 2s infinite linear;
-    animation-play-state: inherit;
-  }
+// Determinate
+.progress {
+  background: var(--ion-progress-bar-determinate-progress-default-background);
 }
 
-.indeterminate-bar-secondary {
-  /* stylelint-disable property-disallowed-list */
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: -54.888891%;
-  /* stylelint-enable property-disallowed-list */
+:host(.progress-bar-determinate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-determinate-buffer-bar-default-background);
+}
 
-  animation: secondary-indeterminate-translate 2s infinite linear;
+// Indeterminate
+.progress-indeterminate {
+  background: var(--ion-progress-bar-indeterminate-progress-default-background);
+}
 
-  .progress-indeterminate {
-    animation: secondary-indeterminate-scale 2s infinite linear;
-    animation-play-state: inherit;
-  }
+:host(.progress-bar-indeterminate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
 }
 
 // Progress Bar: Buffer Circles
-// ------------------------------------------------------------------------
+// ---------------------------------------------
 
 .buffer-circles {
   background-image: radial-gradient(
@@ -149,7 +116,7 @@
 }
 
 // Progress Bar: Shape Variants
-// -------------------------------------------------------------------------------
+// ---------------------------------------------
 
 :host(.progress-bar-shape-round) {
   @include mixins.border-radius(var(--ion-progress-bar-shape-round-border-radius));
@@ -160,19 +127,21 @@
 }
 
 // Progress Bar: Solid (buffer = 1)
-// -------------------------------------------------------------------------------
+// ---------------------------------------------
 
-:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
+// Indeterminate
+:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
   background: var(
-    --ion-progress-bar-determinate-buffer-bar-solid-default-background,
-    var(--ion-progress-bar-determinate-buffer-bar-default-background)
+    --ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
+    var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
   );
 }
 
-:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
+// Determinate
+:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
   background: var(
-    --ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
-    var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
+    --ion-progress-bar-determinate-buffer-bar-solid-default-background,
+    var(--ion-progress-bar-determinate-buffer-bar-default-background)
   );
 }
 
@@ -186,13 +155,17 @@
 }
 
 // Progress Bar: Color
-// ------------------------------------------------------------------------
+// ---------------------------------------------
 
 // Indeterminate
 :host(.ion-color) .progress-indeterminate {
   background: var(--ion-progress-bar-indeterminate-progress-semantic-default-background);
 }
 
+:host(.ion-color.progress-bar-indeterminate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background);
+}
+
 // Determinate
 :host(.ion-color) .progress {
   background: var(--ion-progress-bar-determinate-progress-semantic-default-background);
@@ -202,10 +175,6 @@
   background: var(--ion-progress-bar-determinate-buffer-bar-semantic-default-background);
 }
 
-:host(.ion-color.progress-bar-indeterminate) .progress-buffer-bar {
-  background: var(--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background);
-}
-
 :host(.ion-color) .buffer-circles {
   background-image: radial-gradient(
     ellipse at center,
@@ -215,18 +184,16 @@
   );
 }
 
-// Progress Bar: Reversed
-// ------------------------------------------------------------------------
-// If reversed is set to true, the animation will be reversed
-// and the bar will start at the top right
+// Progress Bar: States
+// ---------------------------------------------
 
+// Reversed: if set to true, the animation will be reversed
+// and the bar will start at the top right
 :host(.progress-bar-reversed) {
   transform: scaleX(-1);
 }
 
-// Progress Bar: Paused
-// ------------------------------------------------------------------------
-
+// Paused
 :host(.progress-paused) {
   .indeterminate-bar-secondary,
   .indeterminate-bar-primary,
@@ -235,8 +202,43 @@
   }
 }
 
+// Indeterminate Animation
+// ---------------------------------------------
+
+.indeterminate-bar-primary {
+  /* stylelint-disable property-disallowed-list */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -145.166611%;
+  /* stylelint-enable property-disallowed-list */
+
+  animation: primary-indeterminate-translate 2s infinite linear;
+
+  .progress-indeterminate {
+    animation: primary-indeterminate-scale 2s infinite linear;
+    animation-play-state: inherit;
+  }
+}
+
+.indeterminate-bar-secondary {
+  /* stylelint-disable property-disallowed-list */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -54.888891%;
+  /* stylelint-enable property-disallowed-list */
+
+  animation: secondary-indeterminate-translate 2s infinite linear;
+
+  .progress-indeterminate {
+    animation: secondary-indeterminate-scale 2s infinite linear;
+    animation-play-state: inherit;
+  }
+}
+
 // Progress Bar: Animation Keyframes
-// ------------------------------------------------------------------------
+// ---------------------------------------------
 // Source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_keyframes.scss
 
 @keyframes primary-indeterminate-translate {

From 9367f0677ae7015219e7114f9ec0111abe7d3b47 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Fri, 17 Apr 2026 14:29:05 -0700
Subject: [PATCH 4/6] test(progress-bar): update determinate test page

---
 core/src/components/progress-bar/test/determinate/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/progress-bar/test/determinate/index.html b/core/src/components/progress-bar/test/determinate/index.html
index 0433f7090a3..f54ac9543d8 100644
--- a/core/src/components/progress-bar/test/determinate/index.html
+++ b/core/src/components/progress-bar/test/determinate/index.html
@@ -15,11 +15,11 @@
 
     <style>
       .custom-bar-background {
-        --background: red;
+        --ion-progress-bar-determinate-buffer-bar-solid-default-background: red;
       }
 
       .no-bar-background {
-        --background: none;
+        --ion-progress-bar-determinate-buffer-bar-solid-default-background: none;
       }
 
       ion-content ion-progress-bar {

From 98e77da539c0bb22133100cdcee5c076c238350c Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Fri, 17 Apr 2026 16:07:06 -0700
Subject: [PATCH 5/6] refactor(progress-bar): cleanup styles

---
 .../components/progress-bar/progress-bar.scss | 163 +++++++++---------
 1 file changed, 84 insertions(+), 79 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 4edbe87864e..2e358a94367 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -1,7 +1,7 @@
 @use "../../themes/mixins" as mixins;
 
-// Progress Bar
-// ---------------------------------------------
+// Progress Bar: Common Styles
+// --------------------------------------------------
 
 :host {
   /**
@@ -34,12 +34,25 @@
   height: 100%;
 }
 
+.progress,
+.progress-indeterminate {
+  z-index: 2;
+}
+
+.progress-buffer-bar {
+  z-index: 1;
+}
+
 .buffer-circles-container,
 .buffer-circles {
   @include mixins.position(0, 0, 0, 0);
   position: absolute;
 }
 
+.buffer-circles-container {
+  overflow: hidden;
+}
+
 // Extend a bit to overflow. The size of animated distance.
 .buffer-circles {
   /* stylelint-disable property-disallowed-list */
@@ -48,9 +61,10 @@
   /* stylelint-enable property-disallowed-list */
 }
 
-// Determinate progress bar
-// ---------------------------------------------
+// Progress Bar Types
+// --------------------------------------------------
 
+// Determinate
 .progress,
 .progress-buffer-bar,
 .buffer-circles-container {
@@ -60,23 +74,6 @@
   transition: transform 150ms linear;
 }
 
-// Progress Bar: progress, buffer bar, and circles
-// ---------------------------------------------
-
-.progress,
-.progress-indeterminate {
-  z-index: 2;
-}
-
-.progress-buffer-bar {
-  z-index: 1;
-}
-
-.buffer-circles-container {
-  overflow: hidden;
-}
-
-// Determinate
 .progress {
   background: var(--ion-progress-bar-determinate-progress-default-background);
 }
@@ -85,18 +82,6 @@
   background: var(--ion-progress-bar-determinate-buffer-bar-default-background);
 }
 
-// Indeterminate
-.progress-indeterminate {
-  background: var(--ion-progress-bar-indeterminate-progress-default-background);
-}
-
-:host(.progress-bar-indeterminate) .progress-buffer-bar {
-  background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
-}
-
-// Progress Bar: Buffer Circles
-// ---------------------------------------------
-
 .buffer-circles {
   background-image: radial-gradient(
     ellipse at center,
@@ -115,8 +100,17 @@
   animation: buffering 450ms infinite linear;
 }
 
-// Progress Bar: Shape Variants
-// ---------------------------------------------
+// Indeterminate
+.progress-indeterminate {
+  background: var(--ion-progress-bar-indeterminate-progress-default-background);
+}
+
+:host(.progress-bar-indeterminate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
+}
+
+// Progress Bar Shapes
+// --------------------------------------------------
 
 :host(.progress-bar-shape-round) {
   @include mixins.border-radius(var(--ion-progress-bar-shape-round-border-radius));
@@ -126,68 +120,47 @@
   @include mixins.border-radius(var(--ion-progress-bar-shape-rectangular-border-radius));
 }
 
-// Progress Bar: Solid (buffer = 1)
-// ---------------------------------------------
+// Progress Bar Semantic Colors
+// --------------------------------------------------
 
-// Indeterminate
-:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
-  background: var(
-    --ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
-    var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
-  );
+// Determinate
+:host(.ion-color) .progress {
+  background: var(--ion-progress-bar-determinate-progress-semantic-default-background);
 }
 
-// Determinate
-:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
+:host(.ion-color.progress-bar-determinate:not(.progress-bar-solid)) .progress-buffer-bar {
   background: var(
-    --ion-progress-bar-determinate-buffer-bar-solid-default-background,
+    --ion-progress-bar-determinate-buffer-bar-semantic-default-background,
     var(--ion-progress-bar-determinate-buffer-bar-default-background)
   );
 }
 
-:host(.progress-bar-solid) .buffer-circles {
+:host(.ion-color) .buffer-circles {
   background-image: radial-gradient(
     ellipse at center,
-    var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 0%,
-    var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 30%,
+    var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 0%,
+    var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 30%,
     transparent 30%
   );
 }
 
-// Progress Bar: Color
-// ---------------------------------------------
-
 // Indeterminate
 :host(.ion-color) .progress-indeterminate {
   background: var(--ion-progress-bar-indeterminate-progress-semantic-default-background);
 }
 
-:host(.ion-color.progress-bar-indeterminate) .progress-buffer-bar {
-  background: var(--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background);
-}
-
-// Determinate
-:host(.ion-color) .progress {
-  background: var(--ion-progress-bar-determinate-progress-semantic-default-background);
-}
-
-:host(.ion-color.progress-bar-determinate) .progress-buffer-bar {
-  background: var(--ion-progress-bar-determinate-buffer-bar-semantic-default-background);
-}
-
-:host(.ion-color) .buffer-circles {
-  background-image: radial-gradient(
-    ellipse at center,
-    var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 0%,
-    var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 30%,
-    transparent 30%
+:host(.ion-color.progress-bar-indeterminate:not(.progress-bar-solid)) .progress-buffer-bar {
+  background: var(
+    --ion-progress-bar-indeterminate-buffer-bar-semantic-default-background,
+    var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
   );
 }
 
-// Progress Bar: States
-// ---------------------------------------------
+// Progress Bar States
+// --------------------------------------------------
 
-// Reversed: if set to true, the animation will be reversed
+// Reversed
+// If set to true, the animation will be reversed
 // and the bar will start at the top right
 :host(.progress-bar-reversed) {
   transform: scaleX(-1);
@@ -202,9 +175,38 @@
   }
 }
 
-// Indeterminate Animation
-// ---------------------------------------------
+// Progress Bar Solid State (buffer = 1)
+// --------------------------------------------------
 
+// Determinate
+:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
+  background: var(
+    --ion-progress-bar-determinate-buffer-bar-solid-default-background,
+    var(--ion-progress-bar-determinate-buffer-bar-default-background)
+  );
+}
+
+:host(.progress-bar-solid) .buffer-circles {
+  background-image: radial-gradient(
+    ellipse at center,
+    var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 0%,
+    var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 30%,
+    transparent 30%
+  );
+}
+
+// Indeterminate
+:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
+  background: var(
+    --ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
+    var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
+  );
+}
+
+// Progress Bar Animation
+// --------------------------------------------------
+
+// Indeterminate
 .indeterminate-bar-primary {
   /* stylelint-disable property-disallowed-list */
   top: 0;
@@ -237,10 +239,10 @@
   }
 }
 
-// Progress Bar: Animation Keyframes
-// ---------------------------------------------
-// Source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_keyframes.scss
+// Progress Bar Animation Keyframes
+// --------------------------------------------------
 
+// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L323-L357
 @keyframes primary-indeterminate-translate {
   0% {
     transform: translateX(0);
@@ -263,6 +265,7 @@
   }
 }
 
+// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L359-L379
 @keyframes primary-indeterminate-scale {
   0% {
     transform: scaleX(0.08);
@@ -285,6 +288,7 @@
   }
 }
 
+// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L381-L414
 @keyframes secondary-indeterminate-translate {
   0% {
     animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
@@ -309,6 +313,7 @@
   }
 }
 
+// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L416-L452
 @keyframes secondary-indeterminate-scale {
   0% {
     animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);

From 10f28dfd7b702053d63e99533ba740e0ffc4d916 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Fri, 17 Apr 2026 16:09:50 -0700
Subject: [PATCH 6/6] chore(progress-bar): run build

---
 core/api.txt | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index a8217994eef..071a102000a 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1931,16 +1931,12 @@ ion-popover,part,content
 ion-progress-bar,shadow
 ion-progress-bar,prop,buffer,number,1,false,false
 ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-progress-bar,prop,reversed,boolean,false,false,false
 ion-progress-bar,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
-ion-progress-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
 ion-progress-bar,prop,value,number,0,false,false
-ion-progress-bar,css-prop,--background,ios
-ion-progress-bar,css-prop,--background,md
-ion-progress-bar,css-prop,--progress-background,ios
-ion-progress-bar,css-prop,--progress-background,md
+ion-progress-bar,css-prop,--ion-progress-bar-determinate-buffer-bar-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-determinate-progress-default-background
 ion-progress-bar,part,progress
 ion-progress-bar,part,stream
 ion-progress-bar,part,track