diff --git a/core/api.txt b/core/api.txt
index 45d0c646459..dfbe534506e 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1190,6 +1190,7 @@ ion-item-option,prop,disabled,boolean,false,false,false
ion-item-option,prop,download,string | undefined,undefined,false,false
ion-item-option,prop,expandable,boolean,false,false,false
ion-item-option,prop,href,string | undefined,undefined,false,false
+ion-item-option,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
ion-item-option,prop,mode,"ios" | "md",undefined,false,false
ion-item-option,prop,rel,string | undefined,undefined,false,false
ion-item-option,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 194ba60f6a8..cbafd502255 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1704,6 +1704,10 @@ export namespace Components {
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
"href": string | undefined;
+ /**
+ * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for an option with muted, subtle colors. Only applies to the `ionic` theme.
+ */
+ "hue"?: 'bold' | 'subtle';
/**
* The mode determines the platform behaviors of the component.
*/
@@ -7204,6 +7208,10 @@ declare namespace LocalJSX {
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
"href"?: string | undefined;
+ /**
+ * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for an option with muted, subtle colors. Only applies to the `ionic` theme.
+ */
+ "hue"?: 'bold' | 'subtle';
/**
* The mode determines the platform behaviors of the component.
*/
diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.common.scss
similarity index 68%
rename from core/src/components/item-option/item-option.scss
rename to core/src/components/item-option/item-option.common.scss
index 6f975844afa..beaf2586557 100644
--- a/core/src/components/item-option/item-option.scss
+++ b/core/src/components/item-option/item-option.common.scss
@@ -1,6 +1,6 @@
-@import "./item-option.vars";
+@import "../../themes/mixins";
-// Item Option
+// Common Item Option
// --------------------------------------------------
:host {
@@ -8,23 +8,12 @@
* @prop --background: Background of the item option
* @prop --color: Color of the item option
*/
- --background: #{ion-color(primary, base)};
- --color: #{ion-color(primary, contrast)};
-
background: var(--background);
color: var(--color);
-
- font-family: $font-family-base;
-}
-
-:host(.ion-color) {
- background: current-color(base);
- color: current-color(contrast);
}
.button-native {
@include text-inherit();
- @include padding(0, 0.7em);
display: inline-block;
@@ -72,23 +61,6 @@
flex-shrink: 0;
}
-::slotted([slot="start"]) {
- @include margin(0, 5px, 0, 0);
-}
-
-::slotted([slot="end"]) {
- @include margin(0, 0, 0, 5px);
-}
-
-::slotted([slot="icon-only"]) {
- @include padding(0);
- @include margin(0, 10px);
-
- min-width: 0.9em;
-
- font-size: 1.8em;
-}
-
// Item Expandable Animation
// --------------------------------------------------
@@ -100,7 +72,7 @@
transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}
-// Item Disabled Styling
+// Item Option: Disabled
// --------------------------------------------------
:host(.item-option-disabled) {
@@ -109,6 +81,5 @@
:host(.item-option-disabled) .button-native {
cursor: default;
- opacity: 0.5;
pointer-events: none;
}
diff --git a/core/src/components/item-option/item-option.ionic.scss b/core/src/components/item-option/item-option.ionic.scss
index a611fc73aa8..702ed991bbf 100644
--- a/core/src/components/item-option/item-option.ionic.scss
+++ b/core/src/components/item-option/item-option.ionic.scss
@@ -1,5 +1,5 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./item-option";
+@use "./item-option.common";
// Ionic Item Option
// --------------------------------------------------
@@ -29,11 +29,11 @@
}
::slotted([slot="start"]) {
- @include margin(0, globals.$ion-space-100, 0, 0);
+ @include globals.margin(0, globals.$ion-space-100, 0, 0);
}
::slotted([slot="end"]) {
- @include margin(0, 0, 0, globals.$ion-space-100);
+ @include globals.margin(0, 0, 0, globals.$ion-space-100);
}
::slotted(ion-icon),
@@ -75,3 +75,31 @@
:host(.item-option-disabled) .button-native {
opacity: 1;
}
+
+// Subtle Item Option
+// --------------------------------------------------
+
+:host(.item-option-subtle) {
+ --background: #{globals.ion-color(primary, base, $subtle: true)};
+ --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
+ --color: #{globals.ion-color(primary, contrast, $subtle: true)};
+}
+
+:host(.item-option-subtle.ion-color) {
+ background: globals.current-color(base, $subtle: true);
+ color: globals.current-color(contrast, $subtle: true);
+}
+
+// Bold Item Option
+// --------------------------------------------------
+
+:host(.item-option-bold) {
+ --background: #{globals.ion-color(primary, base)};
+ --background-activated: #{globals.ion-color(primary, shade)};
+ --color: #{globals.ion-color(primary, contrast)};
+}
+
+:host(.item-option-bold.ion-color) {
+ background: globals.current-color(base);
+ color: globals.current-color(contrast);
+}
diff --git a/core/src/components/item-option/item-option.ios.scss b/core/src/components/item-option/item-option.ios.scss
index 2629d9b1199..60556687c7d 100644
--- a/core/src/components/item-option/item-option.ios.scss
+++ b/core/src/components/item-option/item-option.ios.scss
@@ -1,4 +1,4 @@
-@import "./item-option";
+@import "./item-option.native";
@import "./item-option.ios.vars";
// iOS Item Option
diff --git a/core/src/components/item-option/item-option.md.scss b/core/src/components/item-option/item-option.md.scss
index a327a49c8d6..278dbfe862a 100644
--- a/core/src/components/item-option/item-option.md.scss
+++ b/core/src/components/item-option/item-option.md.scss
@@ -1,4 +1,4 @@
-@import "./item-option";
+@import "./item-option.native";
@import "./item-option.md.vars";
// Material Design Item Option
diff --git a/core/src/components/item-option/item-option.native.scss b/core/src/components/item-option/item-option.native.scss
new file mode 100644
index 00000000000..daddb6f830e
--- /dev/null
+++ b/core/src/components/item-option/item-option.native.scss
@@ -0,0 +1,46 @@
+@import "../../themes/native/native.globals";
+@import "./item-option.vars";
+@import "./item-option.common";
+
+// Native Item Option
+// --------------------------------------------------
+
+:host {
+ --background: #{ion-color(primary, base)};
+ --color: #{ion-color(primary, contrast)};
+
+ font-family: $font-family-base;
+}
+
+:host(.ion-color) {
+ background: current-color(base);
+ color: current-color(contrast);
+}
+
+.button-native {
+ @include padding(0, 0.7em);
+}
+
+::slotted([slot="start"]) {
+ @include margin(0, 5px, 0, 0);
+}
+
+::slotted([slot="end"]) {
+ @include margin(0, 0, 0, 5px);
+}
+
+::slotted([slot="icon-only"]) {
+ @include padding(0);
+ @include margin(0, 10px);
+
+ min-width: 0.9em;
+
+ font-size: 1.8em;
+}
+
+// Item Option: Disabled
+// --------------------------------------------------
+
+:host(.item-option-disabled) .button-native {
+ opacity: 0.5;
+}
diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
index de6e1164ba7..e734b9cac98 100644
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@@ -62,6 +62,14 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
*/
@Prop() href: string | undefined;
+ /**
+ * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for
+ * an option with muted, subtle colors.
+ *
+ * Only applies to the `ionic` theme.
+ */
+ @Prop() hue?: 'bold' | 'subtle' = 'subtle';
+
/**
* Specifies the relationship of the target object to the link object.
* The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
@@ -113,7 +121,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
}
render() {
- const { disabled, expandable, href } = this;
+ const { disabled, expandable, href, hue } = this;
const TagType = href === undefined ? 'button' : ('a' as any);
const theme = getIonTheme(this);
const shape = this.getShape();
@@ -133,6 +141,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
class={createColorClasses(this.color, {
[theme]: true,
[`item-option-${shape}`]: shape !== undefined,
+ [`item-option-${hue}`]: hue !== undefined,
'item-option-disabled': disabled,
'item-option-expandable': expandable,
'ion-activatable': true,
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f20b603d89d..5ad6705452e 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0d947810577..35088bb6718 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7f357a8d8ab..f24dc4afcb3 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
index e9b682cfb67..d6e527f5047 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
index f89c9480d8a..02e3b3246f8 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png
index ca68baa01d2..dec9cbd4e6d 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1ab68347fdc..056829f8aad 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2130c4d147d..8c054b84e90 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png
index 53c236c1c0b..a516956714f 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 6c38ab88fce..fa536c4069f 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 0d108a468eb..d20133a461e 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png
index 73bac8181bf..29e40c8bf62 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4a6111b03c1..803b60636ae 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f297b6cc149..e7cb729b61d 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png
index 12cce0d5da3..16394447573 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 1e333aa11a6..2a374b9153a 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png
index c9d1178be44..8c09417ecf9 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png
index 7a62c7b68eb..37df4772d27 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 836d09c7283..44c75e54c42 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 857af57468e..d64c21169ad 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png
index 16baa70b7ae..bf268e989fe 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 8f0657438b2..54cb858717c 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
index ce364818725..92cfc1903be 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png
index 4b262558ab6..89a5fc54885 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/index.html b/core/src/components/item-sliding/test/hue/index.html
new file mode 100644
index 00000000000..efc289edae8
--- /dev/null
+++ b/core/src/components/item-sliding/test/hue/index.html
@@ -0,0 +1,135 @@
+
+
+
+
+ Item Sliding - Hue
+
+
+
+
+
+
+
+
+
+
+
+
+ Item Sliding - Hue
+
+
+
+
+
+
+ Default Colors
+
+
+
+ Bold
+
+
+ Default
+
+
+
+
+
+ Subtle
+
+
+ Default
+
+
+
+
+ Core Colors
+
+
+
+ Bold
+
+
+ Primary
+ Secondary
+ Tertiary
+
+
+
+
+
+ Subtle
+
+
+ Primary
+ Secondary
+ Tertiary
+
+
+
+
+ Status Colors
+
+
+
+ Bold
+
+
+ Success
+ Warning
+ Danger
+
+
+
+
+
+ Subtle
+
+
+ Success
+ Warning
+ Danger
+
+
+
+
+ Neutral Colors
+
+
+
+ Bold
+
+
+ Light
+ Medium
+ Dark
+
+
+
+
+
+ Subtle
+
+
+ Light
+ Medium
+ Dark
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts
new file mode 100644
index 00000000000..43e02a732b7
--- /dev/null
+++ b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts
@@ -0,0 +1,152 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+ test.describe(title('item-option: hue'), () => {
+ test('should render subtle item options', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+ Default Color
+
+
+
+ Default
+
+
+
+
+
+
+
+ Core Colors
+
+
+
+ Primary
+ Secondary
+ Tertiary
+
+
+
+
+
+
+
+ Status Colors
+
+
+
+ Success
+ Warning
+ Danger
+
+
+
+
+
+
+
+ Neutral Colors
+
+
+
+ Light
+ Medium
+ Dark
+
+
+
+
+ `,
+ config
+ );
+
+ await page.evaluate(() => {
+ const items = document.querySelectorAll('ion-item-sliding');
+ items.forEach((item: any) => item.open('start'));
+ });
+
+ // Wait for options to be visible
+ await page.waitForSelector('ion-item-options:visible', { state: 'visible' });
+
+ await expect(page.locator('ion-list')).toHaveScreenshot(screenshot('item-option-hue-subtle'));
+ });
+
+ test('should render bold item options', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+ Default Color
+
+
+
+ Default
+
+
+
+
+
+
+
+ Core Colors
+
+
+
+ Primary
+ Secondary
+ Tertiary
+
+
+
+
+
+
+
+ Status Colors
+
+
+
+ Success
+ Warning
+ Danger
+
+
+
+
+
+
+
+ Neutral Colors
+
+
+
+ Light
+ Medium
+ Dark
+
+
+
+
+ `,
+ config
+ );
+
+ await page.evaluate(() => {
+ const items = document.querySelectorAll('ion-item-sliding');
+ items.forEach((item: any) => item.open('start'));
+ });
+
+ // Wait for options to be visible
+ await page.waitForSelector('ion-item-options:visible', { state: 'visible' });
+
+ await expect(page.locator('ion-list')).toHaveScreenshot(screenshot('item-option-hue-bold'));
+ });
+ });
+});
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..499b1580d83
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..37da9e8a91a
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..196c05bf2e0
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..77db1eec115
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..cd84969638d
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c18f4d7e993
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 61a497482e6..86ce705c23a 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c5e57c4c284..dd6b8eeaf84 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0b4247323b7..11f30085ee7 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 90a02527c4c..2b2379feb90 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png
index bea609b4a3c..f58c2408ee6 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png
index d6e87c70396..a4552d0049a 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 69b02ecb152..6df11f2435e 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
index fefac781ebe..a6db7a6cc86 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png
index e88d91caabf..c2ec0890652 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
index ba421138751..68259c3cfcd 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 035c62979e8..8e3277b0fac 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png
index 05520d7fb52..4ab0adc832f 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png
index dcd5f69b475..19836857e47 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 916a9aad054..07452b7fd18 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5a39d653ab7..65d3eea5cd7 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png
index a4e65b14e5a..3627f5dc171 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png
index c06377b5986..5046a89c93f 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png
index 4d81df1d46a..32a7dfa86a7 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b9d7016b316..e29bc5ec2ce 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1298275fc13..43bfb4be15a 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png
index fe7753260c6..beaa1373e74 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 65bf2b7efc5..9e4a42480ae 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
index dd77d83e340..51c12846a10 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png
index 9b5ff1123ac..b03adfc4eba 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e32d6203fdf..26b7119c7c2 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2da54ef3403..b131cfc5bbf 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png
index e0cee08cc41..28a504ff326 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png
index e1afeec7361..73b35be022c 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 10dd90952c4..04f4f540716 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png
index a51032a3459..3dd6c25d57f 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 793bb8fc699..c5d243c3ae0 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5b96a215de7..f3093c84321 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 2ef1877d385..976055dceba 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e32d6203fdf..26b7119c7c2 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2da54ef3403..b131cfc5bbf 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index e0cee08cc41..28a504ff326 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 5635c748e06..4f799fdfdc2 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6c13fed7893..f6954828385 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index f67410b349d..5a3300f39a8 100644
Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d5281d38e7d..13d966a6f6d 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6ed8893c9a9..22cbd61b87d 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index 59439987fcc..9a2321fdea6 100644
Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index edfdaa7c0f1..325e8041494 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -1131,14 +1131,14 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
@ProxyCmp({
- inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type']
+ inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'hue', 'mode', 'rel', 'shape', 'target', 'theme', 'type']
})
@Component({
selector: 'ion-item-option',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type'],
+ inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'hue', 'mode', 'rel', 'shape', 'target', 'theme', 'type'],
})
export class IonItemOption {
protected el: HTMLIonItemOptionElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 18541fed6ca..b5637084455 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1106,14 +1106,14 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
@ProxyCmp({
defineCustomElementFn: defineIonItemOption,
- inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type']
+ inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'hue', 'mode', 'rel', 'shape', 'target', 'theme', 'type']
})
@Component({
selector: 'ion-item-option',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type'],
+ inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'hue', 'mode', 'rel', 'shape', 'target', 'theme', 'type'],
standalone: true
})
export class IonItemOption {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index ad2b55f7b67..0c5a6ba2d44 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -554,6 +554,7 @@ export const IonItemOption: StencilVueComponent = /*@__PURE__
'download',
'expandable',
'href',
+ 'hue',
'rel',
'target',
'type',