refactor: disable iOS tap highlight color in item base styles (#10491)

jouni · web-flow · commit e42f30e06a3c · 2025-11-13T15:15:14.000+02:00
diff --git a/packages/aura/src/components/item-overlay.css b/packages/aura/src/components/item-overlay.css
@@ -56,6 +56,10 @@
     }
   }
 
+  &:active {
+    background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
+  }
+
   &[aria-expanded='true']:not(:hover) {
     background: var(--vaadin-background-container-strong);
   }
diff --git a/packages/item/src/styles/vaadin-item-base-styles.js b/packages/item/src/styles/vaadin-item-base-styles.js
@@ -16,6 +16,7 @@ export const itemStyles = css`
     gap: var(--vaadin-item-gap, 0 var(--vaadin-gap-s));
     height: var(--vaadin-item-height, auto);
     padding: var(--vaadin-item-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container));
+    -webkit-tap-highlight-color: transparent;
   }
 
   :host([focused]) {

Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,10 @@`
`56`	`56`	`}`
`57`	`57`	`}`
`58`	`58`
	`59`	`+ &:active {`
	`60`	`+ background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);`
	`61`	`+ }`
	`62`	`+`
`59`	`63`	`&[aria-expanded='true']:not(:hover) {`
`60`	`64`	`background: var(--vaadin-background-container-strong);`
`61`	`65`	`}`
Original file line number	Diff line number	Diff line change
@@ -16,6 +16,7 @@ export const itemStyles = css`
`16`	`16`	`gap: var(--vaadin-item-gap, 0 var(--vaadin-gap-s));`
`17`	`17`	`height: var(--vaadin-item-height, auto);`
`18`	`18`	`padding: var(--vaadin-item-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container));`
	`19`	`+ -webkit-tap-highlight-color: transparent;`
`19`	`20`	`}`
`20`	`21`
`21`	`22`	`:host([focused]) {`