diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Chrome-linux.png
index a65308739c7..fd387f91a0a 100644
Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Firefox-linux.png
index 82e5cb325e3..9cde6d7a50b 100644
Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Safari-linux.png
index e42423bf34c..bcb2437d5f7 100644
Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Chrome-linux.png
index d19b2b6fe3b..4891fe71419 100644
Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Firefox-linux.png
index 9c19a1628ae..3c1cc066e0a 100644
Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Safari-linux.png
index 2e19b0253ce..d9efd576b08 100644
Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Chrome-linux.png
index bd5ddb59f72..10e6d82db3a 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Firefox-linux.png
index 6e2114c76d8..c75aab0124f 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Safari-linux.png
index b151672e8a4..f71b9a57172 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-footer-anchor-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Chrome-linux.png
index 6cd68b8195c..40c84f483f4 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Firefox-linux.png
index 4d0db2464b0..9f63c2cb28f 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Safari-linux.png
index 5109b05b331..722c288012e 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-anchor-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Chrome-linux.png
index 6cd68b8195c..40c84f483f4 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Firefox-linux.png
index 4d0db2464b0..9f63c2cb28f 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Safari-linux.png
index 5109b05b331..722c288012e 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-header-el-anchor-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Chrome-linux.png
index 3d9f3a5ab39..2db2b7f5dd6 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Firefox-linux.png
index 44bdf7380e5..5c5d961c910 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Safari-linux.png
index 729919c015b..4468c8ecf7d 100644
Binary files a/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toast/test/position-anchor/toast.e2e.ts-snapshots/toast-middle-anchor-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Chrome-linux.png
index 7dfb6d2e696..5135e8fde0d 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Firefox-linux.png
index 8f3a20d601d..b4073634b44 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Safari-linux.png
index feb12dc6eec..bb730d9e630 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png
index 8a54b6a31b0..1ffa51734f3 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png
index 2621c1587da..c0cb306eb2e 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png
index 1ca5ae6d193..a286b4887fe 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Chrome-linux.png
index f4fa6d083c0..24dbaedca01 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Firefox-linux.png
index 8326c1c3dbd..6f87acf5a5c 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Safari-linux.png
index 3b512678e68..74cd49787a8 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png
index 6055f0c83f3..24087585785 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png
index 68b898f5ea7..61979d28cec 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png
index 26f608407cb..088bc9a280a 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Chrome-linux.png
index a26294f2346..4bfa902d8b5 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Firefox-linux.png
index 2ffd4bd15ca..42d7297b916 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Safari-linux.png
index b2d4fd8141a..6fef66a434d 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Chrome-linux.png
index 04583e7b74a..ce8950ce0f1 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Firefox-linux.png
index c01d60f5d1f..2df73357197 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Safari-linux.png
index db3fcfe3dc9..6ca4fe521b3 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Chrome-linux.png
index 99ed2f89817..395305fbf1c 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Firefox-linux.png
index 5f3d8e57234..bafab692143 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Safari-linux.png
index 763cd9820e6..4c663a26a63 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Chrome-linux.png
index 6273f1f0108..cf2b1c67d06 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Firefox-linux.png
index 001c97e515c..b4bd4268304 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Safari-linux.png
index 019ec495add..3c8915b4077 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Chrome-linux.png
index a02f7f1829a..07237412684 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Firefox-linux.png
index 2238d30ef6f..345c5af6279 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Safari-linux.png
index c83421db14d..ab8bdb99234 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Chrome-linux.png
index 5c052283753..6d22099b61e 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Firefox-linux.png
index 56431ccae83..3bf453d7b42 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Safari-linux.png
index 687b114174b..5ff78f735ff 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Chrome-linux.png
index de9e8af2520..d7ac864ae8b 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Firefox-linux.png
index bba2c73f564..0529f18d4bd 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Safari-linux.png
index 920a128d85b..e11359ec433 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png
index f73f68d9622..82198a407ae 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png
index f866a1b5eba..cded3819da8 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png
index c9ddbe7d166..73b7db3b8f9 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png
index bec0bafdf30..d1a958cb99d 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png
index 576b7d59a46..285a4c42d62 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png
index 8db2b6a9c01..b4c4ff0c676 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png
index a57ab716311..2450a337bf8 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png
index d7d90936a1a..c9b0f21f5db 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Chrome-linux.png
index 585d2f8901d..612b746dcb5 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Firefox-linux.png
index fdaca073fe5..7ed6567239a 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Safari-linux.png
index 905cf3727e0..efd5e1f1e25 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Chrome-linux.png
index 389fd923aad..384cfebb1de 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Firefox-linux.png
index 41585618688..d22740352d6 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Safari-linux.png
index b84b05aaeff..7e3525aa697 100644
Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Chrome-linux.png
index fcc8fedea47..72ffdae7754 100644
Binary files a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Firefox-linux.png
index 18417f8b20e..284ce3ce3ca 100644
Binary files a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Safari-linux.png
index 86bf03b98b1..dd8d16951ed 100644
Binary files a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/toolbar.ionic.scss b/core/src/components/toolbar/toolbar.ionic.scss
index e030e55ae68..478a2653d8c 100644
--- a/core/src/components/toolbar/toolbar.ionic.scss
+++ b/core/src/components/toolbar/toolbar.ionic.scss
@@ -52,17 +52,6 @@
gap: globals.$ion-space-200;
}
-// Toolbar: Title
-// --------------------------------------------------
-
-::slotted(ion-title) {
- @include globals.padding-horizontal(globals.$ion-space-200);
-}
-
-:host(.toolbar-title-large) ::slotted(ion-title) {
- @include globals.padding-horizontal(globals.$ion-space-400);
-}
-
// Ionic Toolbar Slot Placement
// --------------------------------------------------
// We're using the slots to force the main toolbar content to be
diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
index d66d00a5e1b..2be16fa56f9 100644
--- a/core/src/components/toolbar/toolbar.ios.scss
+++ b/core/src/components/toolbar/toolbar.ios.scss
@@ -77,14 +77,12 @@
// Toolbar: Large Title
// --------------------------------------------------
-:host(.toolbar-title-large) .toolbar-container {
+:host(.toolbar-title-size-large) .toolbar-container {
flex-wrap: wrap;
align-items: flex-start;
}
-:host(.toolbar-title-large) .toolbar-content ion-title {
- flex: 1;
- order: map-get($toolbar-order-ios, title-large);
-
+// The large title fills a row of its own, so the wrap moves it below the buttons
+:host(.toolbar-title-size-large) ::slotted(ion-title) {
min-width: 100%;
}
diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss
index 6861be552bd..9440f8caa9d 100644
--- a/core/src/components/toolbar/toolbar.ios.vars.scss
+++ b/core/src/components/toolbar/toolbar.ios.vars.scss
@@ -13,7 +13,6 @@ $toolbar-order-ios: (
slot-primary: 5,
slot-end: 6,
menu-toggle-end: 7,
- title-large: 8,
);
/// @prop - Minimum height of the toolbar
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index a150554be8e..5c3c0fccbf6 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -45,6 +45,11 @@ export const defaultTheme: DefaultTheme = {
IonText: {
hue: 'bold',
},
+
+ IonTitle: {
+ hue: 'bold',
+ size: 'medium',
+ },
},
},
@@ -1007,5 +1012,103 @@ export const defaultTheme: DefaultTheme = {
radius: 'var(--ion-radii-xxxxs)',
},
},
+
+ IonTitle: {
+ font: {
+ family: 'var(--ion-font-family)',
+ },
+
+ hue: {
+ bold: {
+ semantic: {
+ default: {
+ color: currentColor('base'),
+ },
+ },
+ },
+
+ subtle: {
+ semantic: {
+ default: {
+ color: currentColor('foreground', { subtle: true }),
+ },
+ },
+ },
+ },
+
+ letter: {
+ spacing: '0',
+ },
+
+ size: {
+ small: {
+ font: {
+ size: dynamicFont(global.root, 18),
+ weight: 'var(--ion-font-weight-medium)',
+ },
+
+ line: {
+ height: dynamicFont(global.root, 28),
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-0)',
+ end: 'var(--ion-spacing-sm)',
+ bottom: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-sm)',
+ },
+ },
+
+ medium: {
+ font: {
+ size: dynamicFont(global.root, 18),
+ weight: 'var(--ion-font-weight-medium)',
+ },
+
+ line: {
+ height: dynamicFont(global.root, 28),
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-0)',
+ end: 'var(--ion-spacing-sm)',
+ bottom: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-sm)',
+ },
+ },
+
+ large: {
+ align: {
+ items: 'center',
+ },
+
+ font: {
+ size: dynamicFont(global.root, 28),
+ weight: 'var(--ion-font-weight-medium)',
+ },
+
+ inner: {
+ width: '100%',
+ },
+
+ line: {
+ height: dynamicFont(global.root, 36),
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-0)',
+ end: 'var(--ion-spacing-lg)',
+ bottom: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-lg)',
+ },
+
+ transform: {
+ origin: {
+ x: '50%',
+ },
+ },
+ },
+ },
+ },
},
};
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index 6a0a32a35dc..8dec55c4365 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -1,4 +1,13 @@
-import { rgba, currentColor, clamp, mix, dynamicFont, dynamicFontMin, ionColor } from '../../utils/theme';
+import {
+ rgba,
+ currentColor,
+ clamp,
+ mix,
+ dynamicFont,
+ dynamicFontMax,
+ dynamicFontMin,
+ ionColor,
+} from '../../utils/theme';
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
import { colors as baseColors } from '../base/shared.tokens';
import type { DefaultTheme } from '../themes.interfaces';
@@ -47,6 +56,11 @@ export const defaultTheme: DefaultTheme = {
IonText: {
hue: 'bold',
},
+
+ IonTitle: {
+ hue: 'bold',
+ size: 'medium',
+ },
},
},
@@ -1032,5 +1046,118 @@ export const defaultTheme: DefaultTheme = {
radius: 'var(--ion-radii-xxxxs)',
},
},
+
+ IonTitle: {
+ hue: {
+ bold: {
+ semantic: {
+ default: {
+ color: currentColor('base'),
+ },
+ },
+ },
+
+ subtle: {
+ semantic: {
+ default: {
+ color: currentColor('foreground', { subtle: true }),
+ },
+ },
+ },
+ },
+
+ // TODO(FW-6864): remove when ion-toolbar titlePlacement works in every theme (ios center, md start)
+ position: {
+ top: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-0)',
+ },
+
+ size: {
+ small: {
+ // TODO(FW-6864): remove when ion-toolbar titlePlacement works in every theme (ios center, md start)
+ position: 'relative',
+
+ font: {
+ size: dynamicFontMax(global.root, 1.8, 13),
+ weight: 'var(--ion-font-weight-normal)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-xs)',
+ end: 'var(--ion-spacing-lg)',
+ bottom: 'var(--ion-spacing-lg)',
+ start: 'var(--ion-spacing-lg)',
+ },
+
+ text: {
+ align: 'center',
+ },
+ },
+
+ medium: {
+ // TODO(FW-6864): remove when ion-toolbar titlePlacement works in every theme (ios center, md start)
+ position: 'absolute',
+
+ font: {
+ size: dynamicFontMax(global.root, 1.2, 17),
+ weight: 'var(--ion-font-weight-semi-bold)',
+ },
+
+ // TODO(FW-6864): ios side padding changes when ion-toolbar titlePlacement works in every theme
+ padding: {
+ top: 'var(--padding-top)',
+ end: '90px',
+ bottom: 'var(--padding-bottom)',
+ start: '90px',
+ },
+
+ text: {
+ align: 'center',
+ },
+ },
+
+ large: {
+ align: {
+ items: 'flex-end',
+ },
+
+ position: 'static',
+
+ font: {
+ size: dynamicFontMax(global.root, 1.8, 34),
+ weight: 'var(--ion-font-weight-bold)',
+ },
+
+ inner: {
+ /**
+ * During a page transition
+ * if the large title and the back button
+ * texts match up, the back button should be
+ * scaled to roughly match the dimensions of
+ * the large title text. The following line
+ * ensures that the scale values are accurate.
+ */
+ width: 'auto',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-xxxs)',
+ end: 'var(--ion-spacing-md)',
+ bottom: 'var(--ion-spacing-xxs)',
+ start: 'var(--ion-spacing-md)',
+ },
+
+ text: {
+ align: 'start',
+ },
+
+ transform: {
+ origin: {
+ x: '0%',
+ },
+ },
+ },
+ },
+ },
},
};
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index 9e7626e67cb..a5a8167f50e 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -50,6 +50,11 @@ export const defaultTheme: DefaultTheme = {
IonText: {
hue: 'bold',
},
+
+ IonTitle: {
+ hue: 'bold',
+ size: 'medium',
+ },
},
},
@@ -1157,5 +1162,87 @@ export const defaultTheme: DefaultTheme = {
radius: 'var(--ion-radii-xxxxs)',
},
},
+
+ IonTitle: {
+ hue: {
+ bold: {
+ semantic: {
+ default: {
+ color: currentColor('base'),
+ },
+ },
+ },
+
+ subtle: {
+ semantic: {
+ default: {
+ color: currentColor('foreground', { subtle: true }),
+ },
+ },
+ },
+ },
+
+ letter: {
+ spacing: '0.0075em',
+ },
+
+ size: {
+ small: {
+ font: {
+ size: dynamicFont(global.root, 15),
+ weight: 'var(--ion-font-weight-normal)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-0)',
+ end: 'var(--ion-spacing-xl)',
+ bottom: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-xl)',
+ },
+ },
+
+ medium: {
+ font: {
+ size: dynamicFont(global.root, 20),
+ weight: 'var(--ion-font-weight-medium)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-0)',
+ end: 'var(--ion-spacing-xl)',
+ bottom: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-xl)',
+ },
+ },
+
+ large: {
+ align: {
+ items: 'center',
+ },
+
+ font: {
+ size: dynamicFont(global.root, 28),
+ weight: 'var(--ion-font-weight-normal)',
+ },
+
+ inner: {
+ width: '100%',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-0)',
+ end: 'var(--ion-spacing-xl)',
+ bottom: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-xl)',
+ },
+
+ transform: {
+ origin: {
+ x: '50%',
+ },
+ },
+ },
+ },
+ },
},
};
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
index 2dd54367014..89a2fe7d985 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -11,6 +11,7 @@ import type { IonSkeletonTextRecipe } from '../components/skeleton-text/skeleton
import type { IonSpinnerConfig, IonSpinnerRecipe } from '../components/spinner/spinner.interfaces';
import type { IonTextConfig, IonTextRecipe } from '../components/text/text.interfaces';
import type { IonThumbnailRecipe } from '../components/thumbnail/thumbnail.interfaces';
+import type { IonTitleConfig, IonTitleRecipe } from '../components/title/title.interface';
import type { IonicConfig as IonicGlobalConfig } from '../utils/config';
// Platform-specific theme
@@ -257,6 +258,7 @@ export type IonicConfig = IonicGlobalConfig & {
IonProgressBar?: IonProgressBarConfig;
IonSpinner?: IonSpinnerConfig;
IonText?: IonTextConfig;
+ IonTitle?: IonTitleConfig;
};
};
@@ -307,6 +309,7 @@ type Components = {
IonSpinner?: IonSpinnerRecipe;
IonText?: IonTextRecipe;
IonThumbnail?: IonThumbnailRecipe;
+ IonTitle?: IonTitleRecipe;
IonCard?: any;
IonItem?: any;
diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts
index a9df8660f0b..425996c1d8c 100644
--- a/core/src/utils/theme.ts
+++ b/core/src/utils/theme.ts
@@ -751,6 +751,16 @@ export const dynamicFont = (
return `${size / baselinePixelSize}${unit}`;
};
+/**
+ * Rounds away floating point noise in a scaled pixel size,
+ * so `13 * 1.8` becomes `23.4` instead of `23.400000000000002`.
+ *
+ * @internal
+ * @param size - The scaled pixel value.
+ * @returns The value rounded to four decimal places.
+ */
+const roundScaledSize = (size: number): number => Number(size.toFixed(4));
+
/**
* Converts a pixel value to a dynamic unit (defaulting to rem)
* but imposes a minimum font size using CSS max().
@@ -773,7 +783,34 @@ export const dynamicFontMin = (
unit: string | undefined = baselineUnit
): string => {
const baseScale = dynamicFont(configRootFontSize, size, unit);
- const minSize = size * minScale;
+ const minSize = roundScaledSize(size * minScale);
return `max(${minSize}px, ${baseScale})`;
};
+
+/**
+ * Converts a pixel value to a dynamic unit (defaulting to rem)
+ * but imposes a maximum font size using CSS min().
+ *
+ * Examples based on a root font size of 16px:
+ * - `dynamicFontMax('16px', 1.2, 17)` returns `'min(1.0625rem, 20.4px)'`
+ * - The rem value scales with root font size, up to 120% of 17px = 20.4px
+ *
+ * @internal
+ * @param configRootFontSize - The root font size from the theme config.
+ * @param maxScale - The maximum scale of the font (e.g. 1.2 for 120%).
+ * @param size - The numeric pixel value.
+ * @param unit - The CSS unit string.
+ * @returns A string containing the CSS min() function with the dynamic font value and the maximum pixel value (e.g., 'min(1.0625rem, 20.4px)').
+ */
+export const dynamicFontMax = (
+ configRootFontSize: string | number,
+ maxScale: number,
+ size: number,
+ unit: string | undefined = baselineUnit
+): string => {
+ const baseScale = dynamicFont(configRootFontSize, size, unit);
+ const maxSize = roundScaledSize(size * maxScale);
+
+ return `min(${baseScale}, ${maxSize}px)`;
+};
diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts
index 5c446b39c1d..4e694fe7ebd 100644
--- a/core/src/utils/transition/ios.transition.ts
+++ b/core/src/utils/transition/ios.transition.ts
@@ -17,7 +17,7 @@ export const shadow = (el: T): ShadowRoot | T => {
const getLargeTitle = (refEl: any) => {
const tabs = refEl.tagName === 'ION-TABS' ? refEl : refEl.querySelector('ion-tabs');
- const query = 'ion-content ion-header:not(.header-collapse-condense-inactive) ion-title.title-large';
+ const query = 'ion-content ion-header:not(.header-collapse-condense-inactive) ion-title.title-size-large';
if (tabs != null) {
const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
diff --git a/packages/angular/src/lazy/directives/proxies.ts b/packages/angular/src/lazy/directives/proxies.ts
index f3c4bee2c74..c913c6af065 100644
--- a/packages/angular/src/lazy/directives/proxies.ts
+++ b/packages/angular/src/lazy/directives/proxies.ts
@@ -2717,14 +2717,14 @@ export declare interface IonThumbnail extends Components.IonThumbnail {}
@ProxyCmp({
- inputs: ['color', 'mode', 'size', 'theme']
+ inputs: ['color', 'hue', 'mode', 'size']
})
@Component({
selector: 'ion-title',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['color', 'mode', 'size', 'theme'],
+ inputs: ['color', 'hue', 'mode', 'size'],
standalone: false
})
export class IonTitle {
diff --git a/packages/angular/src/standalone/directives/ion-title.ts b/packages/angular/src/standalone/directives/ion-title.ts
index 3892bbac918..d7627ff69f5 100644
--- a/packages/angular/src/standalone/directives/ion-title.ts
+++ b/packages/angular/src/standalone/directives/ion-title.ts
@@ -10,14 +10,14 @@ import { defineCustomElement as defineIonTitle } from '@ionic/core/components/io
@ProxyCmp({
defineCustomElementFn: defineIonTitle,
- inputs: ['color', 'mode', 'size', 'theme']
+ inputs: ['color', 'hue', 'mode', 'size']
})
@Component({
selector: 'ion-title',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['color', 'mode', 'size', 'theme'],
+ inputs: ['color', 'hue', 'mode', 'size'],
})
export class IonTitle {
protected el: HTMLIonTitleElement;
diff --git a/packages/react-router/test/base/src/theme/variables.css b/packages/react-router/test/base/src/theme/variables.css
index 398a78fc76e..86b6910c77b 100644
--- a/packages/react-router/test/base/src/theme/variables.css
+++ b/packages/react-router/test/base/src/theme/variables.css
@@ -265,7 +265,7 @@ http://ionicframework.com/docs/theming/ */
--ion-tab-bar-background: #1f1f1f;
}
- ion-title.title-large {
- --color: white;
+ ion-title.title-size-large {
+ --ion-title-color: white;
}
}
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 8b7ed5a3297..03ba586da07 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -1114,6 +1114,7 @@ export const IonThumbnail: StencilVueComponent = /*@__PURE__*/
export const IonTitle: StencilVueComponent = /*@__PURE__*/ defineContainer('ion-title', defineIonTitle, [
'color',
+ 'hue',
'size',
'ionStyle'
], [