diff --git a/BREAKING.md b/BREAKING.md
index c47e098e609..a90892ff430 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -26,6 +26,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Radio Group](#version-9x-radio-group)
- [Spinner](#version-9x-spinner)
- [Textarea](#version-9x-textarea)
+ - [Thumbnail](#version-9x-thumbnail)
Global Styles
@@ -245,3 +246,28 @@ Additionally, the `radio-group-wrapper` div element has been removed, causing sl
Converted `ion-textarea` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
If you were targeting the internals of `ion-textarea` in your CSS, you will need to target the `wrapper`, `container`, `label`, `native`, `supporting-text`, `helper-text`, `error-text`, `counter`, or `bottom` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.
+
+Thumbnail
+
+The following breaking changes apply to `ion-thumbnail`:
+
+1. `--size` has been split into separate `--ion-thumbnail-width` and `--ion-thumbnail-height` CSS variables.
+2. `--border-radius` has been replaced.
+3. Theme classes (`ion-thumbnail.md`, `ion-thumbnail.ios`) are no longer supported.
+
+Removed CSS variables
+
+`--size` and `--border-radius` have been removed. Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides:
+
+| Old (8.x) | New token (global) | New CSS variable (component-specific) |
+|---|---|---|
+| `--size` | `IonThumbnail.width` | `--ion-thumbnail-width` |
+| `--size` | `IonThumbnail.height` | `--ion-thumbnail-height` |
+| `--border-radius` | `IonThumbnail.border.radius` | `--ion-thumbnail-border-radius` |
+
+> [!NOTE]
+> Code that previously set `--size: 48px` on `ion-thumbnail` must now set both `--ion-thumbnail-width: 48px` and `--ion-thumbnail-height: 48px`.
+
+Theme classes
+
+Remove any instances that target the theme classes: `ion-thumbnail.md`, `ion-thumbnail.ios`.
diff --git a/core/api.txt b/core/api.txt
index bc8bb22dba9..49dd1f3b6d8 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -2806,9 +2806,9 @@ ion-textarea,part,wrapper
ion-thumbnail,shadow
ion-thumbnail,prop,mode,"ios" | "md",undefined,false,false
-ion-thumbnail,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-thumbnail,css-prop,--border-radius
-ion-thumbnail,css-prop,--size
+ion-thumbnail,css-prop,--ion-thumbnail-border-radius
+ion-thumbnail,css-prop,--ion-thumbnail-height
+ion-thumbnail,css-prop,--ion-thumbnail-width
ion-title,shadow
ion-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,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..bda9768f20b 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -4239,10 +4239,6 @@ export namespace Components {
* The mode determines the platform behaviors of the component.
*/
"mode"?: "ios" | "md";
- /**
- * The theme determines the visual appearance of the component.
- */
- "theme"?: "ios" | "md" | "ionic";
}
interface IonTitle {
/**
@@ -10335,10 +10331,6 @@ declare namespace LocalJSX {
* The mode determines the platform behaviors of the component.
*/
"mode"?: "ios" | "md";
- /**
- * The theme determines the visual appearance of the component.
- */
- "theme"?: "ios" | "md" | "ionic";
}
interface IonTitle {
/**
diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss
index 024e59a4f06..086f3d4335f 100644
--- a/core/src/components/item-divider/item-divider.scss
+++ b/core/src/components/item-divider/item-divider.scss
@@ -308,15 +308,15 @@
// Thumbnail
::slotted(ion-thumbnail) {
- // TODO(FW-6862): separate width and height tokens for thumbnails
- --size: var(--ion-item-divider-thumbnail-width);
-
@include mixins.margin(
var(--ion-item-divider-thumbnail-margin-top),
var(--ion-item-divider-thumbnail-margin-end),
var(--ion-item-divider-thumbnail-margin-bottom),
var(--ion-item-divider-thumbnail-margin-start)
);
+
+ width: var(--ion-item-divider-thumbnail-width, revert-layer);
+ height: var(--ion-item-divider-thumbnail-height, revert-layer);
}
::slotted(ion-thumbnail[slot="start"]) {
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
index b6d2b0447d0..7f34002a0e1 100644
--- a/core/src/components/item/item.ios.scss
+++ b/core/src/components/item/item.ios.scss
@@ -161,7 +161,9 @@
// --------------------------------------------------
::slotted(ion-thumbnail) {
- --size: #{$item-ios-thumbnail-size};
+ // TODO(FW-6847): replace $item-md-thumbnail-* to revert-layer pattern used in item-divider.scss. Assuming the --ion-item-thumbnail-width/height tokens will be used in the migration, else update them.
+ width: var(--ion-item-thumbnail-width, $item-ios-thumbnail-width);
+ height: var(--ion-item-thumbnail-height, $item-ios-thumbnail-height);
}
// iOS Item Avatar/Thumbnail
diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss
index 223b08125f3..39dc56f1929 100644
--- a/core/src/components/item/item.ios.vars.scss
+++ b/core/src/components/item/item.ios.vars.scss
@@ -33,8 +33,11 @@ $item-ios-avatar-width: 36px;
/// @prop - Height of the avatar in the item
$item-ios-avatar-height: $item-ios-avatar-width;
-/// @prop - Size of the thumbnail in the item
-$item-ios-thumbnail-size: 56px;
+/// @prop - Width of the thumbnail in the item
+$item-ios-thumbnail-width: 56px;
+
+/// @prop - Height of the thumbnail in the item
+$item-ios-thumbnail-height: $item-ios-thumbnail-width;
/// @prop - Padding top for the item content
$item-ios-padding-top: 10px;
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 7ecb4dd009e..2651fffe9f9 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -172,7 +172,9 @@
// --------------------------------------------------
::slotted(ion-thumbnail) {
- --size: #{$item-md-thumbnail-size};
+ // TODO(FW-6847): replace $item-md-thumbnail-* to revert-layer pattern used in item-divider.scss. Assuming the --ion-item-thumbnail-width/height tokens will be used in the migration, else update them.
+ width: var(--ion-item-thumbnail-width, $item-md-thumbnail-width);
+ height: var(--ion-item-thumbnail-height, $item-md-thumbnail-height);
}
// Material Design Item Avatar/Thumbnail
diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss
index 4e38c76ec26..3aad826bf17 100644
--- a/core/src/components/item/item.md.vars.scss
+++ b/core/src/components/item/item.md.vars.scss
@@ -18,8 +18,11 @@ $item-md-avatar-width: 40px;
/// @prop - Height of the avatar in the item
$item-md-avatar-height: $item-md-avatar-width;
-/// @prop - Size of the thumbnail in the item
-$item-md-thumbnail-size: 56px;
+/// @prop - Width of the thumbnail in the item
+$item-md-thumbnail-width: 56px;
+
+/// @prop - Height of the thumbnail in the item
+$item-md-thumbnail-height: $item-md-thumbnail-width;
/// @prop - Padding top for the item content
$item-md-padding-top: 10px;
diff --git a/core/src/components/thumbnail/test/basic/index.html b/core/src/components/thumbnail/test/basic/index.html
index 7d412f65c28..5bd8694408e 100644
--- a/core/src/components/thumbnail/test/basic/index.html
+++ b/core/src/components/thumbnail/test/basic/index.html
@@ -33,6 +33,13 @@
Item Thumbnail
+
+
+
+
+
+ Item Divider Thumbnail
+