From 3f35ec0b7ef4f2b67a11b41f786b796d89180efa Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@siemens.com>
Date: Wed, 4 Feb 2026 12:29:55 +0100
Subject: [PATCH] feat(buttons): update selection buttons to support tooltips

---
 .../selection-buttons.spec.ts                 | 33 ++++++++++
 ...s-element-examples-chromium-dark-linux.png |  3 +
 ...-element-examples-chromium-light-linux.png |  3 +
 ...--selection-button-icon-tooltip-focus.yaml | 50 +++++++++++++++
 ...r-element-examples-chromium-dark-linux.png |  3 +
 ...-element-examples-chromium-light-linux.png |  3 +
 ...--selection-button-icon-tooltip-hover.yaml | 50 +++++++++++++++
 ...e-element-examples-chromium-dark-linux.png |  4 +-
 ...-element-examples-chromium-light-linux.png |  4 +-
 ...p-element-examples-chromium-dark-linux.png |  4 +-
 ...-element-examples-chromium-light-linux.png |  4 +-
 ...-si-side-panel--over-mode-no-backdrop.yaml |  6 +-
 ...-side-panel--si-side-panel--over-mode.yaml |  6 +-
 ...e-element-examples-chromium-dark-linux.png |  4 +-
 ...-element-examples-chromium-light-linux.png |  4 +-
 ...ide-panel--si-side-panel--scroll-mode.yaml |  6 +-
 .../buttons--selection-buttons.yaml           |  6 +-
 .../src/styles/bootstrap/_button-group.scss   | 18 ++++--
 .../styles/bootstrap/forms/_form-check.scss   | 13 ++++
 .../examples/buttons/selection-buttons.html   | 37 ++++++++---
 src/app/examples/buttons/selection-buttons.ts |  3 +
 .../examples/si-side-panel/si-side-panel.html | 64 +++++++++----------
 .../examples/si-side-panel/si-side-panel.ts   | 32 ++++------
 23 files changed, 270 insertions(+), 90 deletions(-)
 create mode 100644 playwright/e2e/element-examples/selection-buttons.spec.ts
 create mode 100644 playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus-element-examples-chromium-dark-linux.png
 create mode 100644 playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus-element-examples-chromium-light-linux.png
 create mode 100644 playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus.yaml
 create mode 100644 playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover-element-examples-chromium-dark-linux.png
 create mode 100644 playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover-element-examples-chromium-light-linux.png
 create mode 100644 playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover.yaml

diff --git a/playwright/e2e/element-examples/selection-buttons.spec.ts b/playwright/e2e/element-examples/selection-buttons.spec.ts
new file mode 100644
index 000000000..6aa45dd19
--- /dev/null
+++ b/playwright/e2e/element-examples/selection-buttons.spec.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { expect, test } from '../../support/test-helpers';
+
+test.describe('selection-buttons tooltip', () => {
+  const example = 'buttons/selection-buttons';
+
+  test('icon-only with tooltip on focus', async ({ page, si }) => {
+    await si.visitExample(example);
+
+    const fullScreenButton = page.getByRole('radio', { name: 'Full-screen' });
+    await fullScreenButton.focus();
+
+    await expect(page.locator('si-tooltip')).toBeVisible();
+    await expect(page.locator('si-tooltip')).toContainText('Full-screen');
+
+    await si.runVisualAndA11yTests('selection-button-icon-tooltip-focus');
+  });
+
+  test('icon-only with tooltip on hover', async ({ page, si }) => {
+    await si.visitExample(example);
+
+    const sidebarButton = page.getByRole('radio', { name: 'Sidebar' });
+    await sidebarButton.hover();
+
+    await expect(page.locator('si-tooltip')).toBeVisible();
+    await expect(page.locator('si-tooltip')).toContainText('Sidebar');
+
+    await si.runVisualAndA11yTests('selection-button-icon-tooltip-hover');
+  });
+});
diff --git a/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus-element-examples-chromium-dark-linux.png b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus-element-examples-chromium-dark-linux.png
new file mode 100644
index 000000000..300c620c2
--- /dev/null
+++ b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:125d6662222104e4049750e6b1cf6abad28734838260f111ace044f7a8a27fdb
+size 23506
diff --git a/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus-element-examples-chromium-light-linux.png b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus-element-examples-chromium-light-linux.png
new file mode 100644
index 000000000..8e25c1ef2
--- /dev/null
+++ b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ec9bdb8910ba2eab2ab7f1b6668fe2f3c2e0343547e44ca20304cdb5131dd938
+size 24350
diff --git a/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus.yaml b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus.yaml
new file mode 100644
index 000000000..46fa1048b
--- /dev/null
+++ b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus.yaml
@@ -0,0 +1,50 @@
+- heading "Single-select" [level=4]
+- group "Basic radio toggle button group":
+  - radio "Day" [checked]
+  - text: ""
+  - radio "Week"
+  - text: ""
+  - radio "Month"
+  - text: ""
+- group "Radio toggle button group with icon":
+  - radio "Comfort" [checked]
+  - text: ""
+  - radio "Pre-comfort"
+  - text: ""
+  - radio "Economy"
+  - text: ""
+- group "Layout selection toggle":
+  - radio "Full-screen" [checked]
+  - radio "Sidebar"
+  - radio "Footer"
+- heading "Sizing" [level=4]
+- group "Basic radio toggle button group":
+  - radio "Large" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Default" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Small" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- heading "Multi-select" [level=4]
+- group "Basic checkbox toggle button group":
+  - checkbox "€"
+  - text: ""
+  - checkbox "€€"
+  - text: ""
+  - checkbox "€€€"
+  - text: ""
+- tooltip "Full-screen"
\ No newline at end of file
diff --git a/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover-element-examples-chromium-dark-linux.png b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover-element-examples-chromium-dark-linux.png
new file mode 100644
index 000000000..d85a625ce
--- /dev/null
+++ b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8cbf1486e4eb302b760e21b92fa7839e38ab13ef80f9979f495dab110696606f
+size 23597
diff --git a/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover-element-examples-chromium-light-linux.png b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover-element-examples-chromium-light-linux.png
new file mode 100644
index 000000000..3e8818e1f
--- /dev/null
+++ b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1571cbc242b393d6fa4e535facf96f6710b7e64da564ddd67db74cee6a7e1eae
+size 24546
diff --git a/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover.yaml b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover.yaml
new file mode 100644
index 000000000..9d2c0410e
--- /dev/null
+++ b/playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover.yaml
@@ -0,0 +1,50 @@
+- heading "Single-select" [level=4]
+- group "Basic radio toggle button group":
+  - radio "Day" [checked]
+  - text: ""
+  - radio "Week"
+  - text: ""
+  - radio "Month"
+  - text: ""
+- group "Radio toggle button group with icon":
+  - radio "Comfort" [checked]
+  - text: ""
+  - radio "Pre-comfort"
+  - text: ""
+  - radio "Economy"
+  - text: ""
+- group "Layout selection toggle":
+  - radio "Full-screen" [checked]
+  - radio "Sidebar"
+  - radio "Footer"
+- heading "Sizing" [level=4]
+- group "Basic radio toggle button group":
+  - radio "Large" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Default" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Small" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- heading "Multi-select" [level=4]
+- group "Basic checkbox toggle button group":
+  - checkbox "€"
+  - text: ""
+  - checkbox "€€"
+  - text: ""
+  - checkbox "€€€"
+  - text: ""
+- tooltip "Sidebar"
\ No newline at end of file
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-element-examples-chromium-dark-linux.png
index 11a8cf472..625643551 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d9743aec423daabc616b9482098b486e76e2645d1874dfff5c5e01035d689d18
-size 71077
+oid sha256:c9690507fe2eb9d2569f8c2f512209fdfc7f20abd09b1d97c111697de377cbd0
+size 70651
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-element-examples-chromium-light-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-element-examples-chromium-light-linux.png
index f428284a3..7d55177ef 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:88a2aafb01f9f658e807ca1e34d6e875222f7dc0455b78d122929b59dc79e578
-size 74298
+oid sha256:f4dd504eeac2063283bfbb593c7228ab201f708f3827ab96c805958fd544c8d1
+size 73833
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop-element-examples-chromium-dark-linux.png
index 690ef4d9f..4e058538e 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9374ff255e62157c52d537d72094ae4dbce683597c2f9d62ea8bbff8b8fc37ad
-size 71589
+oid sha256:2f223caf5888e6c671d7c67783bc9ddfb0618f1afc4e994e0474d4c689a4598f
+size 70970
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop-element-examples-chromium-light-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop-element-examples-chromium-light-linux.png
index 51efafa14..9a945df79 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d779fa489201fbe8223363633a3e1f38537b792512c18d31c3997b0167cb5d75
-size 72714
+oid sha256:9e649d7afaa4496c4f36e4b7b23c90b172f63e6e03394648b2e9204c6103fcc9
+size 72179
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml
index cecc77b7f..c276b792b 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml
@@ -4,7 +4,9 @@
 - button "Hey there" [expanded]
 - region "Hey there": And here we have some content
 - button "Another one"
+- region "Another one"
 - button "Number three"
+- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -52,5 +54,5 @@
   - text: Displays a semi-transparent overlay that blocks interactions with the main content while keeping it visible for context. Only active in over-mode (or when scroll mode is forced to over-mode on smaller screens). The backdrop can be clicked to close the side panel and can be disabled with the
   - code: disableBackdrop
   - text: input.
-- switch "disableBackdrop" [checked]
-- code: disableBackdrop
\ No newline at end of file
+- checkbox "disableBackdrop" [checked]
+- text: disableBackdrop
\ No newline at end of file
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml
index e16023459..8227d19b6 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml
@@ -4,7 +4,9 @@
 - button "Hey there" [expanded]
 - region "Hey there": And here we have some content
 - button "Another one"
+- region "Another one"
 - button "Number three"
+- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -52,5 +54,5 @@
   - text: Displays a semi-transparent overlay that blocks interactions with the main content while keeping it visible for context. Only active in over-mode (or when scroll mode is forced to over-mode on smaller screens). The backdrop can be clicked to close the side panel and can be disabled with the
   - code: disableBackdrop
   - text: input.
-- switch "disableBackdrop"
-- code: disableBackdrop
\ No newline at end of file
+- checkbox "disableBackdrop"
+- text: disableBackdrop
\ No newline at end of file
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-dark-linux.png
index c41d59780..59369c523 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6e0a8378fadab7a57f9765ff15d3f927f8eb0be2b15bbfd12e850252d57f5830
-size 88347
+oid sha256:e7792cc04834becad0a7e15b2840907340d5290c0086ac689d4e3ea6ce9ef93d
+size 87610
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-light-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-light-linux.png
index 71e206666..b2394bce7 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c9599dceb8d83694fd0932ab9501fb1d887b0a3d198c4fe981f8e7ccb5bde479
-size 89237
+oid sha256:25f865e19733dae17ad598452f8239e95758ad5ee57a3964567f1d36f173b895
+size 88654
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml
index 1a8eedbbf..41861d765 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml
@@ -4,7 +4,9 @@
 - button "Hey there" [expanded]
 - region "Hey there": And here we have some content
 - button "Another one"
+- region "Another one"
 - button "Number three"
+- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -52,5 +54,5 @@
   - text: Displays a semi-transparent overlay that blocks interactions with the main content while keeping it visible for context. Only active in over-mode (or when scroll mode is forced to over-mode on smaller screens). The backdrop can be clicked to close the side panel and can be disabled with the
   - code: disableBackdrop
   - text: input.
-- switch "disableBackdrop"
-- code: disableBackdrop
\ No newline at end of file
+- checkbox "disableBackdrop"
+- text: disableBackdrop
\ No newline at end of file
diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons.yaml b/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons.yaml
index 6eb0c0992..49d13821f 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons.yaml
@@ -14,9 +14,9 @@
   - radio "Economy"
   - text: ""
 - group "Layout selection toggle":
-  - radio "One pane" [checked]
-  - radio "Two panes"
-  - radio "Three panes"
+  - radio "Full-screen" [checked]
+  - radio "Sidebar"
+  - radio "Footer"
 - heading "Sizing" [level=4]
 - group "Basic radio toggle button group":
   - radio "Large" [checked]
diff --git a/projects/element-theme/src/styles/bootstrap/_button-group.scss b/projects/element-theme/src/styles/bootstrap/_button-group.scss
index 41b267ed8..d9d58e696 100644
--- a/projects/element-theme/src/styles/bootstrap/_button-group.scss
+++ b/projects/element-theme/src/styles/bootstrap/_button-group.scss
@@ -95,10 +95,11 @@ $btn-size-sm: 24px !default;
   &[inert] {
     opacity: semantic-tokens.$element-action-disabled-opacity;
   }
-}
 
-.btn-group .btn-check {
-  + .btn {
+  // Selection buttons
+  .btn-check + .btn,
+  label.btn:has(.btn-check) {
+    cursor: pointer;
     background: transparent;
     color: semantic-tokens.$element-text-primary;
     padding-block: calc(variables.$btn-padding-y - 1px);
@@ -123,12 +124,14 @@ $btn-size-sm: 24px !default;
     }
   }
 
-  &:checked + .btn,
-  + .btn:hover {
+  .btn-check:is(:hover, :checked) + .btn,
+  .btn-check + .btn:hover,
+  label.btn:has(.btn-check:is(:hover, :checked)) {
     color: semantic-tokens.$element-ui-0-hover;
   }
 
-  &:checked + .btn {
+  .btn-check:checked + .btn,
+  label.btn:has(.btn-check:checked) {
     background: semantic-tokens.$element-action-secondary-active;
     border-color: semantic-tokens.$element-action-secondary-border-hover;
     z-index: 2;
@@ -138,7 +141,8 @@ $btn-size-sm: 24px !default;
     }
   }
 
-  &:focus-visible + .btn {
+  .btn-check:focus-visible + .btn,
+  label.btn:has(.btn-check:focus-visible) {
     @include focus.make-outline-focus();
     z-index: 3;
   }
diff --git a/projects/element-theme/src/styles/bootstrap/forms/_form-check.scss b/projects/element-theme/src/styles/bootstrap/forms/_form-check.scss
index b066a72ee..b7e7491e5 100644
--- a/projects/element-theme/src/styles/bootstrap/forms/_form-check.scss
+++ b/projects/element-theme/src/styles/bootstrap/forms/_form-check.scss
@@ -215,6 +215,19 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
 }
 
 // button group
+.btn-group label:has(.btn-check) {
+  position: relative;
+
+  .btn-check {
+    inset: 0;
+    z-index: 3;
+    cursor: pointer;
+    opacity: 0;
+    clip: auto;
+    pointer-events: all;
+  }
+}
+
 .btn-check {
   position: absolute;
   clip: rect(0, 0, 0, 0);
diff --git a/src/app/examples/buttons/selection-buttons.html b/src/app/examples/buttons/selection-buttons.html
index 1d242cac5..6c72153c7 100644
--- a/src/app/examples/buttons/selection-buttons.html
+++ b/src/app/examples/buttons/selection-buttons.html
@@ -33,19 +33,38 @@ <h4>Single-select</h4>
 <br /><br />
 
 <div class="btn-group" role="group" aria-label="Layout selection toggle">
-  <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-1" checked />
-  <label class="btn btn-icon" for="btnradio3-1" aria-label="One pane">
-    <i class="icon element-layout-pane-1" aria-hidden="true"></i>
+  <label class="btn btn-icon">
+    <input
+      type="radio"
+      class="btn-check"
+      name="layoutRadio"
+      siTooltip="Full-screen"
+      aria-label="Full-screen"
+      checked
+    />
+    <si-icon icon="element-layout-pane-1" />
   </label>
 
-  <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-2" />
-  <label class="btn btn-icon" for="btnradio3-2" aria-label="Two panes">
-    <i class="icon element-layout-pane-2" aria-hidden="true"></i>
+  <label class="btn btn-icon">
+    <input
+      type="radio"
+      class="btn-check"
+      name="layoutRadio"
+      siTooltip="Sidebar"
+      aria-label="Sidebar"
+    />
+    <si-icon icon="element-layout-pane-2" />
   </label>
 
-  <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-3" />
-  <label class="btn btn-icon" for="btnradio3-3" aria-label="Three panes">
-    <i class="icon element-layout-pane-3" aria-hidden="true"></i>
+  <label class="btn btn-icon">
+    <input
+      type="radio"
+      class="btn-check"
+      name="layoutRadio"
+      siTooltip="Footer"
+      aria-label="Footer"
+    />
+    <si-icon icon="element-layout-pane-3" />
   </label>
 </div>
 <br /><br />
diff --git a/src/app/examples/buttons/selection-buttons.ts b/src/app/examples/buttons/selection-buttons.ts
index d21479e79..8d91756c3 100644
--- a/src/app/examples/buttons/selection-buttons.ts
+++ b/src/app/examples/buttons/selection-buttons.ts
@@ -3,9 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SiIconComponent } from '@siemens/element-ng/icon';
+import { SiTooltipDirective } from '@siemens/element-ng/tooltip';
 
 @Component({
   selector: 'app-sample',
+  imports: [SiIconComponent, SiTooltipDirective],
   templateUrl: './selection-buttons.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'p-5' }
diff --git a/src/app/examples/si-side-panel/si-side-panel.html b/src/app/examples/si-side-panel/si-side-panel.html
index fe77e8a7c..5b37366e2 100644
--- a/src/app/examples/si-side-panel/si-side-panel.html
+++ b/src/app/examples/si-side-panel/si-side-panel.html
@@ -1,11 +1,11 @@
 <si-side-panel
   #sidePanel
-  [collapsed]="collapsed"
-  [mode]="mode"
-  [size]="size"
-  [disableBackdrop]="disableBackdrop"
+  [collapsed]="collapsed()"
+  [mode]="mode()"
+  [size]="size()"
+  [disableBackdrop]="disableBackdrop()"
   (contentResize)="contentResize($event)"
-  (closed)="collapsed = true"
+  (closed)="collapsed.set(true)"
 >
   <div class="has-navbar-fixed-top px-6">
     <si-application-header>
@@ -33,9 +33,10 @@ <h1 class="application-name">Side panel</h1>
         class="btn-check"
         name="size"
         id="size-regular"
-        [checked]="size === 'regular'"
+        value="regular"
+        [(ngModel)]="size"
       />
-      <label class="btn" for="size-regular" (click)="size = 'regular'">
+      <label class="btn" for="size-regular">
         <i class="icon element-layout-pane-2-right" aria-hidden="true"></i>
         Regular
       </label>
@@ -44,9 +45,10 @@ <h1 class="application-name">Side panel</h1>
         class="btn-check"
         name="size"
         id="size-wide"
-        [checked]="size === 'wide'"
+        value="wide"
+        [(ngModel)]="size"
       />
-      <label class="btn" for="size-wide" (click)="size = 'wide'">
+      <label class="btn" for="size-wide">
         <i class="icon element-layout-pane-2" aria-hidden="true"></i>
         Wide
       </label>
@@ -55,9 +57,10 @@ <h1 class="application-name">Side panel</h1>
         class="btn-check"
         name="size"
         id="size-extended"
-        [checked]="size === 'extended'"
+        value="extended"
+        [(ngModel)]="size"
       />
-      <label class="btn" for="size-extended" (click)="size = 'extended'">
+      <label class="btn" for="size-extended">
         <i class="icon element-layout-pane-1" aria-hidden="true"></i>
         Extended
       </label>
@@ -69,9 +72,10 @@ <h1 class="application-name">Side panel</h1>
         class="btn-check"
         name="displayMode"
         id="display-overlay"
-        [checked]="displayMode === 'overlay'"
+        value="overlay"
+        [(ngModel)]="displayMode"
       />
-      <label class="btn" for="display-overlay" (click)="displayMode = 'overlay'">
+      <label class="btn" for="display-overlay">
         <i class="icon element-zoom" aria-hidden="true"></i>
         Overlay
       </label>
@@ -80,9 +84,10 @@ <h1 class="application-name">Side panel</h1>
         class="btn-check"
         name="displayMode"
         id="display-navigate"
-        [checked]="displayMode === 'navigate'"
+        value="navigate"
+        [(ngModel)]="displayMode"
       />
-      <label class="btn" for="display-navigate" (click)="displayMode = 'navigate'">
+      <label class="btn" for="display-navigate">
         <i class="icon element-export" aria-hidden="true"></i>
         Navigate
       </label>
@@ -93,9 +98,10 @@ <h1 class="application-name">Side panel</h1>
         class="btn-check"
         name="mode"
         id="mode-over"
-        [checked]="mode === 'over'"
+        value="over"
+        [(ngModel)]="mode"
       />
-      <label class="btn" for="mode-over" (click)="mode = 'over'">
+      <label class="btn" for="mode-over">
         <i class="icon element-menu" aria-hidden="true"></i>
         Over
       </label>
@@ -104,9 +110,10 @@ <h1 class="application-name">Side panel</h1>
         class="btn-check"
         name="mode"
         id="mode-scroll"
-        [checked]="mode === 'scroll'"
+        value="scroll"
+        [(ngModel)]="mode"
       />
-      <label class="btn" for="mode-scroll" (click)="mode = 'scroll'">
+      <label class="btn" for="mode-scroll">
         <i class="icon element-jump-to-list-item" aria-hidden="true"></i>
         Scroll
       </label>
@@ -141,27 +148,20 @@ <h2>Modes and sizes</h2>
         be clicked to close the side panel and can be disabled with the
         <code class="text-primary">disableBackdrop</code> input.
       </p>
-      <div class="form-check form-switch mt-8">
+      <si-form-item class="form-switch mt-8" label="disableBackdrop">
         <input
-          type="checkbox"
-          class="form-check-input"
-          role="switch"
           id="backdrop-switch"
-          [checked]="disableBackdrop"
-          (change)="disableBackdrop = !disableBackdrop"
+          class="form-check-input"
+          type="checkbox"
+          [(ngModel)]="disableBackdrop"
         />
-        <span class="bg-base-1 py-2 px-4 rounded-2">
-          <label for="backdrop-switch" class="form-check-label"
-            ><code class="text-body">disableBackdrop</code></label
-          >
-        </span>
-      </div>
+      </si-form-item>
     </div>
   </div>
 
   <si-side-panel-content
     heading="Title"
-    [displayMode]="displayMode"
+    [displayMode]="displayMode()"
     [navigateConfig]="navigateConfig"
   >
     <si-accordion>
diff --git a/src/app/examples/si-side-panel/si-side-panel.ts b/src/app/examples/si-side-panel/si-side-panel.ts
index f6da6e914..307dd1129 100644
--- a/src/app/examples/si-side-panel/si-side-panel.ts
+++ b/src/app/examples/si-side-panel/si-side-panel.ts
@@ -2,7 +2,8 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { SiAccordionComponent, SiCollapsiblePanelComponent } from '@siemens/element-ng/accordion';
 import {
@@ -12,6 +13,7 @@ import {
   SiHeaderActionsDirective,
   SiHeaderActionItemComponent
 } from '@siemens/element-ng/application-header';
+import { SiFormItemComponent } from '@siemens/element-ng/form';
 import { ElementDimensions } from '@siemens/element-ng/resize-observer';
 import {
   SidePanelMode,
@@ -34,6 +36,8 @@ import { LOG_EVENT } from '@siemens/live-preview';
     SiCollapsiblePanelComponent,
     SiApplicationHeaderComponent,
     SiHeaderLogoDirective,
+    SiFormItemComponent,
+    FormsModule,
     SiHeaderActionsDirective,
     SiHeaderActionItemComponent
   ],
@@ -41,11 +45,11 @@ import { LOG_EVENT } from '@siemens/live-preview';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SampleComponent {
-  collapsed = true;
-  mode: SidePanelMode = 'over';
-  size: SidePanelSize = 'regular';
-  displayMode: SidePanelDisplayMode = 'overlay';
-  disableBackdrop = false;
+  readonly collapsed = signal(true);
+  readonly mode = signal<SidePanelMode>('over');
+  readonly size = signal<SidePanelSize>('regular');
+  readonly displayMode = signal<SidePanelDisplayMode>('overlay');
+  readonly disableBackdrop = signal(false);
 
   navigateConfig: SidePanelNavigateConfig = {
     type: 'link',
@@ -57,21 +61,7 @@ export class SampleComponent {
   logEvent = inject(LOG_EVENT);
 
   toggle(): void {
-    this.collapsed = !this.collapsed;
-  }
-
-  toggleMode(): void {
-    this.mode = this.mode === 'over' ? 'scroll' : 'over';
-  }
-
-  changeSize(): void {
-    if (this.size === 'regular') {
-      this.size = 'wide';
-    } else if (this.size === 'wide') {
-      this.size = 'extended';
-    } else {
-      this.size = 'regular';
-    }
+    this.collapsed.update(value => !value);
   }
 
   contentResize(dim: ElementDimensions): void {