diff --git a/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--normal-expanded-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--normal-expanded-element-examples-chromium-dark-linux.png
index cdc0ca066..8e8774d5c 100644
--- a/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--normal-expanded-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--normal-expanded-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:882f4f7b683213539b2ac10d5e1cc6b7bbe4344fdb1a0eb36a9c0c07d1b1a520
-size 28973
+oid sha256:ee19515b4e0c73ffc0cbe75734db556a810b55f58bbc1d3c53484507ae470a3c
+size 28855
diff --git a/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--normal-expanded-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--normal-expanded-element-examples-chromium-light-linux.png
index 5fee5684f..1fc17aa0e 100644
--- a/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--normal-expanded-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--normal-expanded-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:90d2bf9304e121bb4a95981c66c8da068031b41ff7e4d0521d8e65cdd61d0306
-size 28356
+oid sha256:830cc18b4bc8f297b3dee8fde70ac7b16c94e1d07c46cafccfde6228a8198091
+size 28118
diff --git a/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--small-expanded-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--small-expanded-element-examples-chromium-dark-linux.png
index 371d7cc73..0d945cad4 100644
--- a/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--small-expanded-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--small-expanded-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:d8583b950c90c3d15ba2e6171d2435594126f267c4bf0a4a07776f9b8cd421c9
-size 12757
+oid sha256:e9b186adc956c4fa93e0cf9fdb7c075f4c444d147977992a7e6c265ca26ced1e
+size 12758
diff --git a/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--small-expanded-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--small-expanded-element-examples-chromium-light-linux.png
index 1c70f9991..12656b13f 100644
--- a/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--small-expanded-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/navbar-primary.spec.ts-snapshots/si-navbar--si-navbar-primary-end--small-expanded-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:6bd76bd80006185afd288b1bab5dd1e075d8e5d9516f0df74528b09e13ea0c79
-size 12102
+oid sha256:18847d24874dfa0de2af0cc5ff9b95142831668684938e462b8741d84b2b9888
+size 11994
diff --git a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--account-expanded-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--account-expanded-element-examples-chromium-dark-linux.png
index 833c8de90..a856df407 100644
--- a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--account-expanded-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--account-expanded-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:258c287acf593da3404e5af9e2b659e054cb41e5f6a10d89249e4db577e0fd8f
-size 26172
+oid sha256:bfb37addfc188d9f8978996d6abe923854d602f64dd2fe5d31e36f39f1ed723c
+size 26128
diff --git a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--account-expanded-element-examples-chromium-light-linux.png b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--account-expanded-element-examples-chromium-light-linux.png
index f0cace388..f1fb7ee5c 100644
--- a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--account-expanded-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--account-expanded-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:1554466bde541bccb87e33ac4bff586bf8b032fbd14780f20c382d4407885e3d
-size 25758
+oid sha256:a0796278a0eb8b49a5268a2f7c03636f3f8a1c9c9fe8e6572c18bbd9b9dbe9ce
+size 25627
diff --git a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--mobile-collapsible-actions-expanded-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--mobile-collapsible-actions-expanded-element-examples-chromium-dark-linux.png
index cf021346e..c327baed8 100644
--- a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--mobile-collapsible-actions-expanded-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--mobile-collapsible-actions-expanded-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:744682d101184075cc6954c31d23a8603a25815da05d19c4631c4127ee1555e2
-size 13291
+oid sha256:90f33afd30aea24d832eb3f4d3e2866f8bf41b0e4df0f32f8aa58bc3a01110dd
+size 13306
diff --git a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--mobile-collapsible-actions-expanded-element-examples-chromium-light-linux.png b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--mobile-collapsible-actions-expanded-element-examples-chromium-light-linux.png
index b0502a8c8..ffead38ea 100644
--- a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--mobile-collapsible-actions-expanded-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--mobile-collapsible-actions-expanded-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3647528a48190077a0d3079e251795f1c06645483c2063c49d9e55b2bbbf4802
-size 12731
+oid sha256:dcb0076bbbde0e345cced58a67852f0fbbd2487ddd34466f7be603937be90600
+size 12640
diff --git a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--navigation-expanded-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--navigation-expanded-element-examples-chromium-dark-linux.png
index ae9945a76..d058f61ad 100644
--- a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--navigation-expanded-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--navigation-expanded-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:f899f758ce25925d70c610b941edf3e55919dd2a15cb69ef8320a1531fff35c4
-size 17799
+oid sha256:f063eb2947b7a5c146666b94910cd366c706af046c0705ab3c0b3fcbd8883392
+size 17728
diff --git a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--navigation-expanded-element-examples-chromium-light-linux.png b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--navigation-expanded-element-examples-chromium-light-linux.png
index b9558ff11..f94f1cfcb 100644
--- a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--navigation-expanded-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--navigation-expanded-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:6d0c2e8bf5419995a65b32c1f6a033328448f707e601ee75408c9e28fab0d6a2
-size 17494
+oid sha256:3803973cb4df468291f8ab6882be2a23e1ab0f2e97f3465c05a3655b9f36fe86
+size 17384
diff --git a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--notifications-expanded-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--notifications-expanded-element-examples-chromium-dark-linux.png
index d73a00afc..6aae2e268 100644
--- a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--notifications-expanded-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--notifications-expanded-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:82824817dd6972434eb5e5801775f33d34fe24bd1f6c64224a3c647149f77373
-size 17860
+oid sha256:71113731890e2b221c77c82d2c98c93cd49153a782024c91cc20cb4e048cc640
+size 17767
diff --git a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--notifications-expanded-element-examples-chromium-light-linux.png b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--notifications-expanded-element-examples-chromium-light-linux.png
index 340f17592..8fde96078 100644
--- a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--notifications-expanded-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header--notifications-expanded-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:d486d8edf3402b68417d5b15e7dd6c6cb13a3e6dff909669211b002a44cc343f
-size 17573
+oid sha256:6521492458217e68560b36fe09d0c65d87737f51d7421eedc18f4745763559c0
+size 17424
diff --git a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header-element-examples-chromium-dark-linux.png
index d8376216a..64e82a993 100644
--- a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:8ce089e100b28cb6c0b9939c123b931b035987aca13318d82ed2d7fb0d27c2dc
-size 14575
+oid sha256:63d47bbe87b5f9c0bdde9f6c84e323413c811e19fe9d54878bf4cf87e76c7165
+size 14608
diff --git a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header-element-examples-chromium-light-linux.png b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header-element-examples-chromium-light-linux.png
index 1359f274f..6fdccd797 100644
--- a/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-application-header.spec.ts-snapshots/si-application-header--si-application-header-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:915b87551718322f8e46fb855ef3b8b7a749394f701b165df1ea204484609acf
-size 14120
+oid sha256:fe0d0b9004fd6d7d9f4a7b972675e5d48d4bf3a789ad7f5354c41310087aa0e8
+size 14031
diff --git a/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-popover--popover-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-popover--popover-element-examples-chromium-dark-linux.png
index b5a35f4fb..bcf46f227 100644
--- a/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-popover--popover-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-popover--popover-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:5c36fa18beef8589b2d4d4b6c7553ffc4f2ddbd5491d2fe70c8c60022b393b43
-size 48610
+oid sha256:3a8526a07dcb1577f4bbc969a1b32799656f7f5d8b9dcb57da81a4a5de99d803
+size 48491
diff --git a/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-popover--popover-element-examples-chromium-light-linux.png b/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-popover--popover-element-examples-chromium-light-linux.png
index fc7ba5747..5d8e4deaf 100644
--- a/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-popover--popover-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-popover--popover-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:fd5ff9318c758e2428419225e65b0d1fefcc75142f8866d71388ef6eb867c24b
-size 47990
+oid sha256:0414a1205cdf61b894755e0fc4c4c24a1ddfdeecc47921a0acf52916d77dfff2
+size 48035
diff --git a/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover-element-examples-chromium-dark-linux.png
index 13f66eb1d..91d7aceb0 100644
--- a/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:9203afb22d90014a2879a694bf3af3229baa88debf70ad9017a643408ee5866e
-size 54103
+oid sha256:a6c77d0582404a5a09440d3b30179ef5216ae94e0240bef253ada473feb6a6ee
+size 54090
diff --git a/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover-element-examples-chromium-light-linux.png b/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover-element-examples-chromium-light-linux.png
index 0a8025fa4..c1afca4a8 100644
--- a/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:b33418dcf54269bbbf1b6101e3bd52587d6fa4b7f02cd4af0b1d912bf4673e6d
-size 51433
+oid sha256:5c0a2f160281f9fe225da1b48941dfe5d868c3a0b7dc860cec7d30db44ed45c2
+size 51236
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed-element-examples-chromium-dark-linux.png
index 7c190265d..97cc72dd7 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:0a90207cd6cee52ba63bbdce3cee2ec6c210ed1b08c20e38831b0bec519bf038
-size 48958
+oid sha256:faeb4171f9e67c5e1d06c8c247079f60c08b1a4e0a847e646e7da9d6ccb8379a
+size 49350
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed-element-examples-chromium-light-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed-element-examples-chromium-light-linux.png
index a4b0e5086..cf6627f50 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:9699c199cc297c19f062536766ae0a5d66d26c0df221970e29afd43750f06186
-size 50638
+oid sha256:b46e9095291a260fdd173feb1a647c43e2ff4116a5c62af0336117792c9dc4ec
+size 51058
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open-element-examples-chromium-dark-linux.png
index f7062a890..8a44774f9 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:280fb942b596d72936c4de3554947f4982dbd6db41509a5dd9f18f0532813e09
-size 56564
+oid sha256:acc0aad0860ce80bb77ca330c5dae5b3124684869a4cb4834c8dbca839f73798
+size 57479
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open-element-examples-chromium-light-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open-element-examples-chromium-light-linux.png
index 2635ab1d0..36211a386 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:147a9608e8561e83927790d2a6c19b4bb77f87049adc7face270d9300edf9ad6
-size 57545
+oid sha256:d2044e409518916cb414d4c94cbf68ac52d8789928ca66cae27fb2e3e9074825
+size 58397
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml
index 9d371f41c..ff73f1db9 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml
@@ -13,7 +13,9 @@
- button "Properties 5" [expanded]
- region "Properties 5": And here we have some content
- button "Documents"
-- button "Graphics"
+- region "Documents"
+- button /Graphics \+\d+/
+- region /Graphics \+\d+/
- banner:
- link "Siemens logo":
- /url: "#/"
diff --git a/playwright/snapshots/si-tabs-legacy.spec.ts-snapshots/si-tabs--si-tabs-legacy-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tabs-legacy.spec.ts-snapshots/si-tabs--si-tabs-legacy-element-examples-chromium-dark-linux.png
index e5f0392ba..1073ff91f 100644
--- a/playwright/snapshots/si-tabs-legacy.spec.ts-snapshots/si-tabs--si-tabs-legacy-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-tabs-legacy.spec.ts-snapshots/si-tabs--si-tabs-legacy-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:ba9cb8f85ab19e1d9dd64d75f17e393ad27dea31ec546973373509ca0a662c42
-size 14369
+oid sha256:db650571c6b40f0643ce232114d0458667382c71e8c7a511d83599cdd8304c01
+size 14354
diff --git a/playwright/snapshots/si-tabs-legacy.spec.ts-snapshots/si-tabs--si-tabs-legacy-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tabs-legacy.spec.ts-snapshots/si-tabs--si-tabs-legacy-element-examples-chromium-light-linux.png
index 5629f09d2..b2cca52cd 100644
--- a/playwright/snapshots/si-tabs-legacy.spec.ts-snapshots/si-tabs--si-tabs-legacy-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-tabs-legacy.spec.ts-snapshots/si-tabs--si-tabs-legacy-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:57ee0eaf7bdff7568eab6aca74d34ceac1ad61d6f79f5b44d719f113d5d94bce
-size 14454
+oid sha256:5507c401261b2975c585a872f35223416d0d1f5b822eef6fd3a1f3c33dca9350
+size 14457
diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--base-tabs-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--base-tabs-element-examples-chromium-dark-linux.png
index 9afa8e0b2..f2a3e52d1 100644
--- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--base-tabs-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--base-tabs-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:47ca9393835c9d09826e737770efd730da5d04b965e83bdc936783f9c3e2a11c
+oid sha256:beeb48d0a40b45996bea210f4c5489fcfd0d504eb64e80def7614b914e211b16
size 13229
diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--base-tabs-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--base-tabs-element-examples-chromium-light-linux.png
index 5ee1590ff..d9e394c3d 100644
--- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--base-tabs-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--base-tabs-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:dfa371b5a1325e70c8c889e9663eae7d0b212fecceb26c7b41d50f5be876be04
-size 13487
+oid sha256:5e1584777317ae87422b6708fee532d25ff0c4ef9a1f6aa7a9f86f05bd02bb12
+size 13524
diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-menu-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-menu-element-examples-chromium-dark-linux.png
index 26ddb6394..1a2abecc3 100644
--- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-menu-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-menu-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3d5e46344003c3eb9398bdb4e219071a6999c33933336e4b586105ba692f5219
-size 17071
+oid sha256:5545ef1aeddae03fa0fc41449bb6f7004e97a704a377ca1b1b9eb2699d98c2f1
+size 16955
diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-menu-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-menu-element-examples-chromium-light-linux.png
index 55de3dece..08bdf856f 100644
--- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-menu-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-menu-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:e178c8928b55c8ed660f7e06d4157a48a4fc740e679b873ae6fe72dd66e71fd5
-size 17289
+oid sha256:91b01fbe634b5ed3017add8910a6e4152175cff60ba8ad31361684da3194feb5
+size 17258
diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-mobile-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-mobile-element-examples-chromium-dark-linux.png
index 731ae8086..3fce10538 100644
--- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-mobile-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-mobile-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:91e4adefee03ab83d35bd475ee0767a48de505c8fd212abb559fe6139db6f882
-size 8706
+oid sha256:b9ae5d62e6b74ec98dcd11fde54c497489c37a4d513a32469ca121354b974c81
+size 8688
diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-mobile-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-mobile-element-examples-chromium-light-linux.png
index 6d5bf0a25..a0a8b3829 100644
--- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-mobile-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs--tabs-mobile-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:6f0716a9910b2d5ef6ddd45fb1bd1d74c321e31368fb878af473d9db99a21f72
-size 8929
+oid sha256:cff4e5a1aa31124137615f6b3c174eb5ee0f77d8d2d4006e1fe6e4e5f929609b
+size 8935
diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-dark-linux.png
index 8f2992b8a..1a6863b68 100644
--- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:82d6fef3a59c150821b7c7ea8960b253a085d28e1e2759f14e74404290dfd573
-size 9236
+oid sha256:c7e3fac25e654806bc049d7a1957ac35a72213f4a9814081221e02adce39faec
+size 9201
diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-light-linux.png
index 7df4f376c..e65a3aefe 100644
--- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:1b26f3bbd0d46fecb99522881bc5337df99fcb03b21c0fa1f4e7d6c0e4bdd811
-size 9291
+oid sha256:fdcf4a6efb4fc2be0ad50e4480e9b759149a253bd7947d78453ed140fd376db8
+size 9310
diff --git a/projects/element-ng/accordion/si-collapsible-panel.component.html b/projects/element-ng/accordion/si-collapsible-panel.component.html
index 72a13745d..75a6a0578 100644
--- a/projects/element-ng/accordion/si-collapsible-panel.component.html
+++ b/projects/element-ng/accordion/si-collapsible-panel.component.html
@@ -15,22 +15,29 @@
(click)="doToggle($event)"
>
@let headerIcon = icon();
- @if (headerIcon) {
-
- }
- @if (icon() && badge() !== undefined && badge() !== '') {
-
- {{ badge() }}
-
- }
+
+ @if (headerIcon) {
+
+
+ @if (formattedBadge()) {
+
+ {{ formattedBadge() }}
+
+ }
+ }
+
{{ heading() | translate }}
- @if (badge() !== undefined && badge() !== '') {
+ @if (formattedBadge()) {
- {{ badge() }}
+ {{ formattedBadge() }}
}
diff --git a/projects/element-ng/accordion/si-collapsible-panel.component.scss b/projects/element-ng/accordion/si-collapsible-panel.component.scss
index 020eda03a..cdcd9d4dc 100644
--- a/projects/element-ng/accordion/si-collapsible-panel.component.scss
+++ b/projects/element-ng/accordion/si-collapsible-panel.component.scss
@@ -16,6 +16,14 @@
}
}
+ .badge-text {
+ position: absolute;
+ inset-inline-end: -2px;
+ inset-inline-start: unset;
+ inset-block-start: -5px;
+ margin-inline-end: unset;
+ }
+
&.hcollapsed {
background: variables.$element-base-1;
diff --git a/projects/element-ng/accordion/si-collapsible-panel.component.ts b/projects/element-ng/accordion/si-collapsible-panel.component.ts
index 1a9f0a6a2..3b9ecd656 100644
--- a/projects/element-ng/accordion/si-collapsible-panel.component.ts
+++ b/projects/element-ng/accordion/si-collapsible-panel.component.ts
@@ -103,6 +103,20 @@ export class SiCollapsiblePanelComponent {
*/
readonly panelToggle = output();
+ /**
+ * Formats badge value to limit display to "+99" for numbers greater than 99
+ */
+ protected readonly formattedBadge = computed(() => {
+ const badge = this.badge();
+ if (!badge && badge !== 0) {
+ return '';
+ }
+ if (typeof badge === 'number') {
+ return badge > 99 ? '+99' : badge.toString();
+ }
+ return badge.toString();
+ });
+
protected readonly hcollapsed = computed(
() => this.accordionHCollapseService?.hcollapsed() ?? false
);
diff --git a/projects/element-theme/src/styles/bootstrap/_badges.scss b/projects/element-theme/src/styles/bootstrap/_badges.scss
index eb42e8dd1..9ccc7fec1 100644
--- a/projects/element-theme/src/styles/bootstrap/_badges.scss
+++ b/projects/element-theme/src/styles/bootstrap/_badges.scss
@@ -155,7 +155,7 @@
background-color: semantic-tokens.$element-action-danger;
color: semantic-tokens.$element-action-danger-text;
font-size: typography.$si-font-size-caption;
- line-height: 13px;
+ line-height: 1.2;
padding-block: 0;
padding-inline: map.get(spacers.$spacers, 2);
font-family: variables.$font-family-sans-serif;
diff --git a/src/app/examples/si-side-panel/si-side-panel-collapsible.html b/src/app/examples/si-side-panel/si-side-panel-collapsible.html
index f3a688d0d..db368e85f 100644
--- a/src/app/examples/si-side-panel/si-side-panel-collapsible.html
+++ b/src/app/examples/si-side-panel/si-side-panel-collapsible.html
@@ -154,17 +154,23 @@ Collapsible side panel
And here we have some content
And this is the content
-
+
Nothing to see here