diff --git a/BREAKING.md b/BREAKING.md
index c47e098e609..d42c50855b1 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -21,6 +21,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Chip](#version-9x-chip)
- [Datetime](#version-9x-datetime)
- [Grid](#version-9x-grid)
+ - [Image](#version-9x-image)
- [Input Otp](#version-9x-input-otp)
- [Item Divider](#version-9x-item-divider)
- [Radio Group](#version-9x-radio-group)
@@ -202,6 +203,16 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
```
+
Image
+
+The following breaking changes apply to `ion-img`:
+
+1. Theme classes (`ion-img.md`, `ion-img.ios`) are no longer supported.
+
+Theme classes
+
+Remove any instances that target the theme classes: `ion-img.md`, `ion-img.ios`.
+
Converted `ion-input-otp` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
diff --git a/core/api.txt b/core/api.txt
index bc8bb22dba9..8cedc81309c 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1060,7 +1060,6 @@ ion-img,shadow
ion-img,prop,alt,string | undefined,undefined,false,false
ion-img,prop,mode,"ios" | "md",undefined,false,false
ion-img,prop,src,string | undefined,undefined,false,false
-ion-img,prop,theme,"ios" | "md" | "ionic",undefined,false,false
ion-img,event,ionError,void,true
ion-img,event,ionImgDidLoad,void,true
ion-img,event,ionImgWillLoad,void,true
diff --git a/core/scripts/vercel-build.sh b/core/scripts/vercel-build.sh
index 99c83b22adc..a456d847e2e 100755
--- a/core/scripts/vercel-build.sh
+++ b/core/scripts/vercel-build.sh
@@ -48,6 +48,7 @@ echo "Copying core output..."
cp -r "${CORE_DIR}/src" "${OUTPUT_DIR}/src"
cp -r "${CORE_DIR}/dist" "${OUTPUT_DIR}/dist"
cp -r "${CORE_DIR}/css" "${OUTPUT_DIR}/css"
+cp -r "${CORE_DIR}/themes" "${OUTPUT_DIR}/themes"
mkdir -p "${OUTPUT_DIR}/scripts"
cp -r "${CORE_DIR}/scripts/testing" "${OUTPUT_DIR}/scripts/testing"
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index a9299aaee9a..510ea220d47 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1525,10 +1525,6 @@ export namespace Components {
* The image URL. This attribute is mandatory for the `
` element.
*/
"src"?: string;
- /**
- * The theme determines the visual appearance of the component.
- */
- "theme"?: "ios" | "md" | "ionic";
}
interface IonInfiniteScroll {
/**
@@ -7525,10 +7521,6 @@ declare namespace LocalJSX {
* The image URL. This attribute is mandatory for the `
` element.
*/
"src"?: string;
- /**
- * The theme determines the visual appearance of the component.
- */
- "theme"?: "ios" | "md" | "ionic";
}
interface IonInfiniteScroll {
/**
diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx
index 87c9668e58e..e4d1dfd33ba 100644
--- a/core/src/components/img/img.tsx
+++ b/core/src/components/img/img.tsx
@@ -3,11 +3,8 @@ import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil
import type { Attributes } from '@utils/helpers';
import { inheritAttributes } from '@utils/helpers';
-import { getIonTheme } from '../../global/ionic-global';
-
/**
* @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 image - The inner `img` element.
*/
@@ -124,13 +121,8 @@ export class Img implements ComponentInterface {
render() {
const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
const { draggable } = inheritedAttributes;
- const theme = getIonTheme(this);
return (
-
+
',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['alt', 'mode', 'src', 'theme'],
+ inputs: ['alt', 'mode', 'src'],
})
export class IonImg {
protected el: HTMLIonImgElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index bf79b098440..fafa32a5d09 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -914,14 +914,14 @@ export declare interface IonHeader extends Components.IonHeader {}
@ProxyCmp({
defineCustomElementFn: defineIonImg,
- inputs: ['alt', 'mode', 'src', 'theme']
+ inputs: ['alt', 'mode', 'src']
})
@Component({
selector: 'ion-img',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['alt', 'mode', 'src', 'theme'],
+ inputs: ['alt', 'mode', 'src'],
standalone: true
})
export class IonImg {