From 7b877e337e0bbe16bd9b638db532426b5a77f661 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Thu, 8 Oct 2026 22:38:58 -0300
Subject: [PATCH 1/5] refactor(ui-conference): Fuse device toggles with
 fuselage SplitButton

The microphone and camera controls fused each device menu with its toggle through local CSS that zeroed the button radii and faded the menu trigger. They now use SplitButton, with the device menu as its ghost trigger and the group turning danger while the device is off.
---
 .../src/call/AudioDevicePicker.tsx            |    1 +
 .../ui-conference/src/call/CallControls.tsx   |   80 +-
 .../ui-conference/src/call/CameraPicker.tsx   |   11 +-
 .../__snapshots__/callStories.spec.tsx.snap   | 1106 ++++++++---------
 4 files changed, 550 insertions(+), 648 deletions(-)

diff --git a/packages/ui-conference/src/call/AudioDevicePicker.tsx b/packages/ui-conference/src/call/AudioDevicePicker.tsx
index cb450bcf2038f..ded4709d128fb 100644
--- a/packages/ui-conference/src/call/AudioDevicePicker.tsx
+++ b/packages/ui-conference/src/call/AudioDevicePicker.tsx
@@ -23,6 +23,7 @@ const AudioDevicePicker = () => {
 			beforeOpen={() => revealDeviceLabels(['audioinput', 'audiooutput'], devices)}
 			button={
 				<DeviceMenuButton
+					rcx-split-button__trigger
 					secondary
 					large
 					menuIcon={self.muted ? 'chevron-up' : <VoiceActivity level={micLevel} size={24} />}
diff --git a/packages/ui-conference/src/call/CallControls.tsx b/packages/ui-conference/src/call/CallControls.tsx
index 13b05244cac80..bdd93b6f353bf 100644
--- a/packages/ui-conference/src/call/CallControls.tsx
+++ b/packages/ui-conference/src/call/CallControls.tsx
@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, ButtonGroup, Palette, RadioButton, borderRadius } from '@rocket.chat/fuselage';
+import { Box, ButtonGroup, Palette, RadioButton, SplitButton, borderRadius } from '@rocket.chat/fuselage';
 import type { Keys } from '@rocket.chat/icons';
 import { GenericMenu } from '@rocket.chat/ui-client';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
@@ -125,22 +125,6 @@ const controlNoticesStyles = css`
 	}
 `;
 
-// A device toggle and its selector fused into one control, the selector first and a shade quieter.
-const deviceControlStyles = css`
-	display: inline-flex;
-	align-items: stretch;
-	overflow: hidden;
-	border-radius: ${borderRadius('medium')};
-
-	& button {
-		border-radius: 0;
-	}
-
-	& > *:first-child button {
-		opacity: 0.7;
-	}
-`;
-
 export type CallControlsProps = {
 	layout: StageLayout;
 	onLayoutChange: (layout: StageLayout) => void;
@@ -197,41 +181,33 @@ const CallControls = ({ layout, onLayoutChange, onOpenDiagnostics }: CallControl
 
 	return (
 		<ButtonGroup style={{ position: 'relative' }}>
-			<Box className={deviceControlStyles}>
-				<Box>
-					<AudioDevicePicker />
-				</Box>
-				<Box>
-					<ToggleButton
-						label={t('Mute')}
-						icons={['mic', 'mic-off']}
-						titles={self.speakingWhileMuted ? [t('You_are_muted'), t('You_are_muted')] : [t('Mute'), t('Unmute')]}
-						pressed={self.muted}
-						aria-pressed={self.muted}
-						dangerWhenPressed
-						large
-						onToggle={toggleMic}
-					/>
-				</Box>
-			</Box>
-			<Box className={deviceControlStyles}>
-				<Box>
-					<CameraPicker />
-				</Box>
-				<Box>
-					<ToggleButton
-						label={t('Camera')}
-						icons={['video', 'video-off']}
-						titles={[t('Stop_camera'), t('Start_camera')]}
-						pressed={!self.cameraOn}
-						// Pressed as its label reads: "Camera" is pressed while the camera is on, whichever way it is drawn.
-						aria-pressed={self.cameraOn}
-						dangerWhenPressed
-						large
-						onToggle={toggleCamera}
-					/>
-				</Box>
-			</Box>
+			<SplitButton danger={self.muted} aria-label={t('Microphone')}>
+				<AudioDevicePicker />
+				<ToggleButton
+					label={t('Mute')}
+					icons={['mic', 'mic-off']}
+					titles={self.speakingWhileMuted ? [t('You_are_muted'), t('You_are_muted')] : [t('Mute'), t('Unmute')]}
+					pressed={self.muted}
+					aria-pressed={self.muted}
+					dangerWhenPressed
+					large
+					onToggle={toggleMic}
+				/>
+			</SplitButton>
+			<SplitButton danger={!self.cameraOn} aria-label={t('Camera')}>
+				<CameraPicker />
+				<ToggleButton
+					label={t('Camera')}
+					icons={['video', 'video-off']}
+					titles={[t('Stop_camera'), t('Start_camera')]}
+					pressed={!self.cameraOn}
+					// Pressed as its label reads: "Camera" is pressed while the camera is on, whichever way it is drawn.
+					aria-pressed={self.cameraOn}
+					dangerWhenPressed
+					large
+					onToggle={toggleCamera}
+				/>
+			</SplitButton>
 			<ToggleButton
 				label={t('Share_screen')}
 				icons={['desktop-arrow-up', 'desktop-cross']}
diff --git a/packages/ui-conference/src/call/CameraPicker.tsx b/packages/ui-conference/src/call/CameraPicker.tsx
index 97eb9ff5e81a8..aa856f86562ae 100644
--- a/packages/ui-conference/src/call/CameraPicker.tsx
+++ b/packages/ui-conference/src/call/CameraPicker.tsx
@@ -20,7 +20,16 @@ const CameraPicker = () => {
 			choices={[videoQuality]}
 			// A call joined with the camera off may not have the permission that names the cameras yet.
 			beforeOpen={() => revealDeviceLabels(['videoinput'], devices)}
-			button={<DeviceMenuButton secondary large menuIcon='chevron-up' label={t('Camera_options')} danger={!self.cameraOn} />}
+			button={
+				<DeviceMenuButton
+					rcx-split-button__trigger
+					secondary
+					large
+					menuIcon='chevron-up'
+					label={t('Camera_options')}
+					danger={!self.cameraOn}
+				/>
+			}
 		/>
 	);
 };
diff --git a/packages/ui-conference/src/call/__snapshots__/callStories.spec.tsx.snap b/packages/ui-conference/src/call/__snapshots__/callStories.spec.tsx.snap
index 1ae533f92f582..85e2355af1b1a 100644
--- a/packages/ui-conference/src/call/__snapshots__/callStories.spec.tsx.snap
+++ b/packages/ui-conference/src/call/__snapshots__/callStories.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`call stories renders AudioDevicePicker MicrophoneOn without crashing 1`
           aria-expanded="false"
           aria-haspopup="true"
           aria-label="Device options"
-          class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+          class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
           id="react-aria-_r_0_"
           label="Device options"
           title="Device settings"
@@ -60,7 +60,7 @@ exports[`call stories renders AudioDevicePicker Muted without crashing 1`] = `
           aria-expanded="false"
           aria-haspopup="true"
           aria-label="Device options"
-          class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+          class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
           id="react-aria-_r_2_"
           label="Device options"
           title="Device settings"
@@ -98,107 +98,95 @@ exports[`call stories renders CallBar Default without crashing 1`] = `
             style="position: relative;"
           >
             <div
-              class="rcx-box rcx-box--full rcx-css-yaiuut"
+              aria-label="Microphone"
+              class="rcx-split-button"
+              role="group"
             >
-              <div
-                class="rcx-box rcx-box--full"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Device options"
+                class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+                id="react-aria-_r_4_"
+                label="Device options"
+                title="Device settings"
+                type="button"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-label="Device options"
-                  class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                  id="react-aria-_r_4_"
-                  label="Device options"
-                  title="Device settings"
-                  type="button"
+                <div
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-css-fmd200"
+                  style="height: 24px;"
                 >
                   <div
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-css-fmd200"
-                    style="height: 24px;"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-llqk8q"
-                      data-testid="voice-activity-bar"
-                      style="height: 3px;"
-                    />
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-llqk8q"
-                      data-testid="voice-activity-bar"
-                      style="height: 3px;"
-                    />
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-llqk8q"
-                      data-testid="voice-activity-bar"
-                      style="height: 3px;"
-                    />
-                  </div>
-                </button>
-              </div>
-              <div
-                class="rcx-box rcx-box--full"
+                    class="rcx-box rcx-box--full rcx-css-llqk8q"
+                    data-testid="voice-activity-bar"
+                    style="height: 3px;"
+                  />
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-llqk8q"
+                    data-testid="voice-activity-bar"
+                    style="height: 3px;"
+                  />
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-llqk8q"
+                    data-testid="voice-activity-bar"
+                    style="height: 3px;"
+                  />
+                </div>
+              </button>
+              <button
+                aria-label="Mute"
+                aria-pressed="false"
+                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
+                label="Mute"
+                title="Mute"
+                type="button"
               >
-                <button
-                  aria-label="Mute"
-                  aria-pressed="false"
-                  class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
-                  label="Mute"
-                  title="Mute"
-                  type="button"
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-1bepdyv"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </button>
-              </div>
+                  
+                </i>
+              </button>
             </div>
             <div
-              class="rcx-box rcx-box--full rcx-css-yaiuut"
+              aria-label="Camera"
+              class="rcx-split-button rcx-split-button--danger"
+              role="group"
             >
-              <div
-                class="rcx-box rcx-box--full"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Camera options"
+                class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+                id="react-aria-_r_6_"
+                label="Camera options"
+                title="Camera"
+                type="button"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-label="Camera options"
-                  class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                  id="react-aria-_r_6_"
-                  label="Camera options"
-                  title="Camera"
-                  type="button"
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
-                  >
-                    
-                  </i>
-                </button>
-              </div>
-              <div
-                class="rcx-box rcx-box--full"
+                  
+                </i>
+              </button>
+              <button
+                aria-label="Camera"
+                aria-pressed="false"
+                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
+                label="Camera"
+                title="Start camera"
+                type="button"
               >
-                <button
-                  aria-label="Camera"
-                  aria-pressed="false"
-                  class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
-                  label="Camera"
-                  title="Start camera"
-                  type="button"
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
-                  >
-                    ❴
-                  </i>
-                </button>
-              </div>
+                  ❴
+                </i>
+              </button>
             </div>
             <button
               aria-label="Share screen"
@@ -303,107 +291,95 @@ exports[`call stories renders CallControls CameraOnAndSharing without crashing 1
           style="position: relative;"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Microphone"
+            class="rcx-split-button"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Device options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_a_"
+              label="Device options"
+              title="Device settings"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Device options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_a_"
-                label="Device options"
-                title="Device settings"
-                type="button"
+              <div
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-css-fmd200"
+                style="height: 24px;"
               >
                 <div
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-css-fmd200"
-                  style="height: 24px;"
-                >
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                </div>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+                <div
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+                <div
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+              </div>
+            </button>
+            <button
+              aria-label="Mute"
+              aria-pressed="false"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
+              label="Mute"
+              title="Mute"
+              type="button"
             >
-              <button
-                aria-label="Mute"
-                aria-pressed="false"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
-                label="Mute"
-                title="Mute"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
+                
+              </i>
+            </button>
           </div>
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Camera"
+            class="rcx-split-button"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Camera options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_c_"
+              label="Camera options"
+              title="Camera"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Camera options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_c_"
-                label="Camera options"
-                title="Camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                
+              </i>
+            </button>
+            <button
+              aria-label="Camera"
+              aria-pressed="true"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
+              label="Camera"
+              title="Stop camera"
+              type="button"
             >
-              <button
-                aria-label="Camera"
-                aria-pressed="true"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
-                label="Camera"
-                title="Stop camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-video rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-video rcx-icon rcx-css-1bepdyv"
-                >
-                  ❲
-                </i>
-              </button>
-            </div>
+                ❲
+              </i>
+            </button>
           </div>
           <button
             aria-label="Share screen"
@@ -507,107 +483,95 @@ exports[`call stories renders CallControls Default without crashing 1`] = `
           style="position: relative;"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Microphone"
+            class="rcx-split-button"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Device options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_g_"
+              label="Device options"
+              title="Device settings"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Device options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_g_"
-                label="Device options"
-                title="Device settings"
-                type="button"
+              <div
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-css-fmd200"
+                style="height: 24px;"
               >
                 <div
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-css-fmd200"
-                  style="height: 24px;"
-                >
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                </div>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
-            >
-              <button
-                aria-label="Mute"
-                aria-pressed="false"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
-                label="Mute"
-                title="Mute"
-                type="button"
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+                <div
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+                <div
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+              </div>
+            </button>
+            <button
+              aria-label="Mute"
+              aria-pressed="false"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
+              label="Mute"
+              title="Mute"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
+                
+              </i>
+            </button>
           </div>
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Camera"
+            class="rcx-split-button rcx-split-button--danger"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Camera options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_i_"
+              label="Camera options"
+              title="Camera"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Camera options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_i_"
-                label="Camera options"
-                title="Camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                
+              </i>
+            </button>
+            <button
+              aria-label="Camera"
+              aria-pressed="false"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
+              label="Camera"
+              title="Start camera"
+              type="button"
             >
-              <button
-                aria-label="Camera"
-                aria-pressed="false"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
-                label="Camera"
-                title="Start camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
-                >
-                  ❴
-                </i>
-              </button>
-            </div>
+                ❴
+              </i>
+            </button>
           </div>
           <button
             aria-label="Share screen"
@@ -711,107 +675,95 @@ exports[`call stories renders CallControls HandRaised without crashing 1`] = `
           style="position: relative;"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Microphone"
+            class="rcx-split-button"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Device options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_m_"
+              label="Device options"
+              title="Device settings"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Device options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_m_"
-                label="Device options"
-                title="Device settings"
-                type="button"
+              <div
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-css-fmd200"
+                style="height: 24px;"
               >
                 <div
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-css-fmd200"
-                  style="height: 24px;"
-                >
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                </div>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+                <div
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+                <div
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+              </div>
+            </button>
+            <button
+              aria-label="Mute"
+              aria-pressed="false"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
+              label="Mute"
+              title="Mute"
+              type="button"
             >
-              <button
-                aria-label="Mute"
-                aria-pressed="false"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
-                label="Mute"
-                title="Mute"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
+                
+              </i>
+            </button>
           </div>
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Camera"
+            class="rcx-split-button rcx-split-button--danger"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Camera options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_o_"
+              label="Camera options"
+              title="Camera"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Camera options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_o_"
-                label="Camera options"
-                title="Camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                
+              </i>
+            </button>
+            <button
+              aria-label="Camera"
+              aria-pressed="false"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
+              label="Camera"
+              title="Start camera"
+              type="button"
             >
-              <button
-                aria-label="Camera"
-                aria-pressed="false"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
-                label="Camera"
-                title="Start camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
-                >
-                  ❴
-                </i>
-              </button>
-            </div>
+                ❴
+              </i>
+            </button>
           </div>
           <button
             aria-label="Share screen"
@@ -915,92 +867,80 @@ exports[`call stories renders CallControls Muted without crashing 1`] = `
           style="position: relative;"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Microphone"
+            class="rcx-split-button rcx-split-button--danger"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Device options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_s_"
+              label="Device options"
+              title="Device settings"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Device options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_s_"
-                label="Device options"
-                title="Device settings"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                
+              </i>
+            </button>
+            <button
+              aria-label="Mute"
+              aria-pressed="true"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
+              label="Mute"
+              title="Unmute"
+              type="button"
             >
-              <button
-                aria-label="Mute"
-                aria-pressed="true"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
-                label="Mute"
-                title="Unmute"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-mic-off rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-mic-off rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
+                
+              </i>
+            </button>
           </div>
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Camera"
+            class="rcx-split-button rcx-split-button--danger"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Camera options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_u_"
+              label="Camera options"
+              title="Camera"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Camera options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_u_"
-                label="Camera options"
-                title="Camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                
+              </i>
+            </button>
+            <button
+              aria-label="Camera"
+              aria-pressed="false"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
+              label="Camera"
+              title="Start camera"
+              type="button"
             >
-              <button
-                aria-label="Camera"
-                aria-pressed="false"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
-                label="Camera"
-                title="Start camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
-                >
-                  ❴
-                </i>
-              </button>
-            </div>
+                ❴
+              </i>
+            </button>
           </div>
           <button
             aria-label="Share screen"
@@ -1104,107 +1044,95 @@ exports[`call stories renders CallControls OneOnOne without crashing 1`] = `
           style="position: relative;"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Microphone"
+            class="rcx-split-button"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Device options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_12_"
+              label="Device options"
+              title="Device settings"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Device options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_12_"
-                label="Device options"
-                title="Device settings"
-                type="button"
+              <div
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-css-fmd200"
+                style="height: 24px;"
               >
                 <div
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-css-fmd200"
-                  style="height: 24px;"
-                >
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-llqk8q"
-                    data-testid="voice-activity-bar"
-                    style="height: 3px;"
-                  />
-                </div>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+                <div
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+                <div
+                  class="rcx-box rcx-box--full rcx-css-llqk8q"
+                  data-testid="voice-activity-bar"
+                  style="height: 3px;"
+                />
+              </div>
+            </button>
+            <button
+              aria-label="Mute"
+              aria-pressed="false"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
+              label="Mute"
+              title="Mute"
+              type="button"
             >
-              <button
-                aria-label="Mute"
-                aria-pressed="false"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
-                label="Mute"
-                title="Mute"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
+                
+              </i>
+            </button>
           </div>
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Camera"
+            class="rcx-split-button rcx-split-button--danger"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Camera options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_14_"
+              label="Camera options"
+              title="Camera"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Camera options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_14_"
-                label="Camera options"
-                title="Camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                
+              </i>
+            </button>
+            <button
+              aria-label="Camera"
+              aria-pressed="false"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
+              label="Camera"
+              title="Start camera"
+              type="button"
             >
-              <button
-                aria-label="Camera"
-                aria-pressed="false"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
-                label="Camera"
-                title="Start camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
-                >
-                  ❴
-                </i>
-              </button>
-            </div>
+                ❴
+              </i>
+            </button>
           </div>
           <button
             aria-label="Share screen"
@@ -1308,92 +1236,80 @@ exports[`call stories renders CallControls SpeakingWhileMuted without crashing 1
           style="position: relative;"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Microphone"
+            class="rcx-split-button rcx-split-button--danger"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Device options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_18_"
+              label="Device options"
+              title="Device settings"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Device options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_18_"
-                label="Device options"
-                title="Device settings"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                
+              </i>
+            </button>
+            <button
+              aria-label="Mute"
+              aria-pressed="true"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
+              label="Mute"
+              title="You are muted — click to unmute"
+              type="button"
             >
-              <button
-                aria-label="Mute"
-                aria-pressed="true"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
-                label="Mute"
-                title="You are muted — click to unmute"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-mic-off rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-mic-off rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
+                
+              </i>
+            </button>
           </div>
           <div
-            class="rcx-box rcx-box--full rcx-css-yaiuut"
+            aria-label="Camera"
+            class="rcx-split-button rcx-split-button--danger"
+            role="group"
           >
-            <div
-              class="rcx-box rcx-box--full"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Camera options"
+              class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+              id="react-aria-_r_1a_"
+              label="Camera options"
+              title="Camera"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Camera options"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
-                id="react-aria-_r_1a_"
-                label="Camera options"
-                title="Camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-chevron-up rcx-icon rcx-css-1bepdyv"
-                >
-                  
-                </i>
-              </button>
-            </div>
-            <div
-              class="rcx-box rcx-box--full"
+                
+              </i>
+            </button>
+            <button
+              aria-label="Camera"
+              aria-pressed="false"
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
+              label="Camera"
+              title="Start camera"
+              type="button"
             >
-              <button
-                aria-label="Camera"
-                aria-pressed="false"
-                class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button"
-                label="Camera"
-                title="Start camera"
-                type="button"
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
               >
-                <i
-                  aria-hidden="true"
-                  class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-1bepdyv"
-                >
-                  ❴
-                </i>
-              </button>
-            </div>
+                ❴
+              </i>
+            </button>
           </div>
           <button
             aria-label="Share screen"
@@ -3824,7 +3740,7 @@ exports[`call stories renders CameraPicker CameraOff without crashing 1`] = `
           aria-expanded="false"
           aria-haspopup="true"
           aria-label="Camera options"
-          class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+          class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
           id="react-aria-_r_23_"
           label="Camera options"
           title="Camera"
@@ -3856,7 +3772,7 @@ exports[`call stories renders CameraPicker CameraOn without crashing 1`] = `
           aria-expanded="false"
           aria-haspopup="true"
           aria-label="Camera options"
-          class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+          class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
           id="react-aria-_r_25_"
           label="Camera options"
           title="Camera"
@@ -3886,7 +3802,7 @@ exports[`call stories renders CameraPicker NoCamera without crashing 1`] = `
       >
         <button
           aria-label="Camera options"
-          class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+          class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--large-square rcx-button--icon-secondary-danger rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
           disabled=""
           label="Camera options"
           title="Device settings (not supported by the browser)"
@@ -3921,7 +3837,7 @@ exports[`call stories renders CameraPicker Open without crashing 1`] = `
           aria-expanded="true"
           aria-haspopup="true"
           aria-label="Camera options"
-          class="rcx-box rcx-box--full rcx-button--icon-pressed rcx-button--large-square rcx-button--icon-secondary-pressed rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
+          class="rcx-box rcx-box--full rcx-split-button__trigger rcx-button--icon-pressed rcx-button--large-square rcx-button--icon-secondary-pressed rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
           id="react-aria-_r_27_"
           label="Camera options"
           title="Camera"

From 16d30efe5f2befe43d2ed7aef793f958bcdcc7c0 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Fri, 9 Oct 2026 17:53:56 -0300
Subject: [PATCH 2/5] chore: bump fuselage to 0.95.0

---
 apps/meteor/package.json                  |  2 +-
 apps/uikit-playground/package.json        |  2 +-
 packages/fuselage-forms/package.json      |  2 +-
 packages/fuselage-toastbar/package.json   |  2 +-
 packages/fuselage-ui-kit/package.json     |  2 +-
 packages/gazzodown/package.json           |  2 +-
 packages/layout/package.json              |  2 +-
 packages/onboarding-ui/package.json       |  2 +-
 packages/storybook-config/package.json    |  2 +-
 packages/ui-account/package.json          |  2 +-
 packages/ui-avatar/package.json           |  2 +-
 packages/ui-client/package.json           |  2 +-
 packages/ui-composer/package.json         |  2 +-
 packages/ui-conference/package.json       |  2 +-
 packages/ui-contexts/package.json         |  2 +-
 packages/ui-media/package.json            |  2 +-
 packages/ui-video-conf/package.json       |  2 +-
 packages/ui-voip/package.json             |  2 +-
 packages/web-ui-registration/package.json |  2 +-
 yarn.lock                                 | 48 +++++++++++------------
 20 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index f19a40cf2007c..5270a85bd8226 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -114,7 +114,7 @@
 		"@rocket.chat/favicon": "workspace:^",
 		"@rocket.chat/federation-matrix": "workspace:^",
 		"@rocket.chat/federation-sdk": "0.8.1",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-forms": "workspace:^",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-toastbar": "workspace:^",
diff --git a/apps/uikit-playground/package.json b/apps/uikit-playground/package.json
index 894ddc69fc542..572f727e1a98a 100644
--- a/apps/uikit-playground/package.json
+++ b/apps/uikit-playground/package.json
@@ -18,7 +18,7 @@
 		"@lezer/highlight": "^1.2.5",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-toastbar": "workspace:^",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
diff --git a/packages/fuselage-forms/package.json b/packages/fuselage-forms/package.json
index ecf60fd328d5c..9f57af35e0fb3 100644
--- a/packages/fuselage-forms/package.json
+++ b/packages/fuselage-forms/package.json
@@ -44,7 +44,7 @@
 		"react-aria": "~3.37.0"
 	},
 	"devDependencies": {
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/storybook-config": "workspace:~",
diff --git a/packages/fuselage-toastbar/package.json b/packages/fuselage-toastbar/package.json
index 0f0f6763f003d..7729a638be600 100644
--- a/packages/fuselage-toastbar/package.json
+++ b/packages/fuselage-toastbar/package.json
@@ -43,7 +43,7 @@
 		"react-timing-hooks": "~5.2.0"
 	},
 	"devDependencies": {
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/storybook-config": "workspace:~",
diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
index 502d77bdef04b..60fbb23a23e07 100644
--- a/packages/fuselage-ui-kit/package.json
+++ b/packages/fuselage-ui-kit/package.json
@@ -44,7 +44,7 @@
 		"@rocket.chat/apps-engine": "workspace:^",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/emitter": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
 		"@rocket.chat/icons": "workspace:~",
diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json
index 8370f937c97c6..d1c87cffcd37e 100644
--- a/packages/gazzodown/package.json
+++ b/packages/gazzodown/package.json
@@ -30,7 +30,7 @@
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "workspace:~",
 		"@rocket.chat/emitter": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
 		"@rocket.chat/icons": "workspace:~",
diff --git a/packages/layout/package.json b/packages/layout/package.json
index 29f48de9b21ef..593f14ac50698 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -39,7 +39,7 @@
 		"@rocket.chat/styled": "~0.34.1"
 	},
 	"devDependencies": {
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/storybook-config": "workspace:~",
 		"@rocket.chat/storybook-dark-mode": "workspace:~",
diff --git a/packages/onboarding-ui/package.json b/packages/onboarding-ui/package.json
index 55e95077f73d3..c1d7a16aa7248 100644
--- a/packages/onboarding-ui/package.json
+++ b/packages/onboarding-ui/package.json
@@ -40,7 +40,7 @@
     "react-hook-form": "~7.54.2"
   },
   "devDependencies": {
-    "@rocket.chat/fuselage": "^0.94.0",
+    "@rocket.chat/fuselage": "^0.95.0",
     "@rocket.chat/fuselage-hooks": "^0.43.1",
     "@rocket.chat/fuselage-tokens": "^0.35.0",
     "@rocket.chat/icons": "workspace:~",
diff --git a/packages/storybook-config/package.json b/packages/storybook-config/package.json
index e92f8ffedcd40..3673edd7446d7 100644
--- a/packages/storybook-config/package.json
+++ b/packages/storybook-config/package.json
@@ -34,7 +34,7 @@
 		"webpack": "~5.104.1"
 	},
 	"devDependencies": {
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/icons": "workspace:~",
 		"@rocket.chat/tsconfig": "workspace:*",
 		"@storybook/react": "^9.1.20",
diff --git a/packages/ui-account/package.json b/packages/ui-account/package.json
index 553e66cd8ab55..f99bbfe6a4342 100644
--- a/packages/ui-account/package.json
+++ b/packages/ui-account/package.json
@@ -27,7 +27,7 @@
 	"devDependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-forms": "~1.5.1",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/icons": "workspace:~",
diff --git a/packages/ui-avatar/package.json b/packages/ui-avatar/package.json
index 7fb31a2a71adc..a956dd3ee425f 100644
--- a/packages/ui-avatar/package.json
+++ b/packages/ui-avatar/package.json
@@ -18,7 +18,7 @@
 		"@rocket.chat/core-typings": "workspace:~",
 		"@rocket.chat/css-in-js": "workspace:~",
 		"@rocket.chat/emitter": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
 		"@rocket.chat/icons": "workspace:~",
diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json
index ffe12afe4ca8b..2ab9d310acd61 100644
--- a/packages/ui-client/package.json
+++ b/packages/ui-client/package.json
@@ -29,7 +29,7 @@
 		"@rocket.chat/core-typings": "workspace:~",
 		"@rocket.chat/css-in-js": "workspace:~",
 		"@rocket.chat/emitter": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
 		"@rocket.chat/icons": "workspace:~",
diff --git a/packages/ui-composer/package.json b/packages/ui-composer/package.json
index 31f306cb48f50..2f9c0108b2e73 100644
--- a/packages/ui-composer/package.json
+++ b/packages/ui-composer/package.json
@@ -23,7 +23,7 @@
 		"@react-aria/toolbar": "^3.0.0-nightly.5042",
 		"@rocket.chat/css-in-js": "workspace:~",
 		"@rocket.chat/emitter": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
 		"@rocket.chat/icons": "workspace:~",
diff --git a/packages/ui-conference/package.json b/packages/ui-conference/package.json
index 2f8740b98047a..d1d55d23fbadf 100644
--- a/packages/ui-conference/package.json
+++ b/packages/ui-conference/package.json
@@ -22,7 +22,7 @@
 		"@react-aria/visually-hidden": "^3.8.27",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "workspace:^",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-forms": "workspace:^",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
diff --git a/packages/ui-contexts/package.json b/packages/ui-contexts/package.json
index 4f35b145fea7e..e3cc27d3f30ff 100644
--- a/packages/ui-contexts/package.json
+++ b/packages/ui-contexts/package.json
@@ -23,7 +23,7 @@
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/ddp-client": "workspace:~",
 		"@rocket.chat/emitter": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
 		"@rocket.chat/i18n": "workspace:~",
diff --git a/packages/ui-media/package.json b/packages/ui-media/package.json
index 85386828ea0b3..9c80d744ebfed 100644
--- a/packages/ui-media/package.json
+++ b/packages/ui-media/package.json
@@ -19,7 +19,7 @@
 	},
 	"devDependencies": {
 		"@rocket.chat/css-in-js": "workspace:^",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/icons": "workspace:~",
 		"@rocket.chat/jest-presets": "workspace:~",
diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json
index 452f8650339ac..5fb8cf048393d 100644
--- a/packages/ui-video-conf/package.json
+++ b/packages/ui-video-conf/package.json
@@ -23,7 +23,7 @@
 	"devDependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
 		"@rocket.chat/icons": "workspace:~",
diff --git a/packages/ui-voip/package.json b/packages/ui-voip/package.json
index bba4f3426ee5d..4eb2f28845c62 100644
--- a/packages/ui-voip/package.json
+++ b/packages/ui-voip/package.json
@@ -30,7 +30,7 @@
 		"@playwright/test": "~1.52.0",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
 		"@rocket.chat/fuselage-ui-kit": "workspace:^",
diff --git a/packages/web-ui-registration/package.json b/packages/web-ui-registration/package.json
index ec41f7eec2724..b5d99436d3ddb 100644
--- a/packages/web-ui-registration/package.json
+++ b/packages/web-ui-registration/package.json
@@ -23,7 +23,7 @@
 		"@rocket.chat/core-typings": "workspace:~",
 		"@rocket.chat/css-in-js": "workspace:~",
 		"@rocket.chat/emitter": "workspace:~",
-		"@rocket.chat/fuselage": "^0.94.0",
+		"@rocket.chat/fuselage": "^0.95.0",
 		"@rocket.chat/fuselage-hooks": "^0.43.1",
 		"@rocket.chat/fuselage-tokens": "^0.35.0",
 		"@rocket.chat/i18n": "workspace:~",
diff --git a/yarn.lock b/yarn.lock
index 7f41107b79085..296a8129e35f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9922,12 +9922,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-forms@workspace:^, @rocket.chat/fuselage-forms@workspace:packages/fuselage-forms":
+"@rocket.chat/fuselage-forms@npm:~1.5.1, @rocket.chat/fuselage-forms@workspace:^, @rocket.chat/fuselage-forms@workspace:packages/fuselage-forms":
   version: 0.0.0-use.local
   resolution: "@rocket.chat/fuselage-forms@workspace:packages/fuselage-forms"
   dependencies:
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/jest-presets": "workspace:~"
     "@rocket.chat/storybook-config": "workspace:~"
@@ -9969,7 +9969,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@rocket.chat/fuselage-toastbar@workspace:packages/fuselage-toastbar"
   dependencies:
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/jest-presets": "workspace:~"
     "@rocket.chat/storybook-config": "workspace:~"
@@ -10009,7 +10009,7 @@ __metadata:
     "@rocket.chat/apps-engine": "workspace:^"
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/gazzodown": "workspace:^"
@@ -10061,9 +10061,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/fuselage@npm:^0.94.0":
-  version: 0.94.0
-  resolution: "@rocket.chat/fuselage@npm:0.94.0"
+"@rocket.chat/fuselage@npm:^0.95.0":
+  version: 0.95.0
+  resolution: "@rocket.chat/fuselage@npm:0.95.0"
   dependencies:
     "@rocket.chat/css-in-js": "npm:~0.33.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
@@ -10079,7 +10079,7 @@ __metadata:
     react: "*"
     react-dom: "*"
     react-virtuoso: "*"
-  checksum: 10/f7f339855113f7dedb0fcdd7a60f5d26ffe9fa352d5367c136ee98af72a3bf21d202fd4d9a0d077b66fd918105f296150fd54a2d7dcebc348c43b19488a00456
+  checksum: 10/2e34e994fc85159d216fe86337f8005fff3e9a1ce3343599dc77387204e861fe65b4a3194e3dc49090d6c0a490712e5907610e672988363c52f7de0bf045873e
   languageName: node
   linkType: hard
 
@@ -10112,7 +10112,7 @@ __metadata:
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/css-in-js": "workspace:~"
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/icons": "workspace:~"
@@ -10270,7 +10270,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@rocket.chat/layout@workspace:packages/layout"
   dependencies:
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/jest-presets": "workspace:~"
@@ -10582,7 +10582,7 @@ __metadata:
     "@rocket.chat/favicon": "workspace:^"
     "@rocket.chat/federation-matrix": "workspace:^"
     "@rocket.chat/federation-sdk": "npm:0.8.1"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-forms": "workspace:^"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-toastbar": "workspace:^"
@@ -11178,7 +11178,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@rocket.chat/onboarding-ui@workspace:packages/onboarding-ui"
   dependencies:
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/icons": "workspace:~"
@@ -11508,7 +11508,7 @@ __metadata:
   resolution: "@rocket.chat/storybook-config@workspace:packages/storybook-config"
   dependencies:
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/icons": "workspace:~"
@@ -11644,7 +11644,7 @@ __metadata:
     "@react-aria/visually-hidden": "npm:^3.8.27"
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/css-in-js": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-forms": "npm:~1.5.1"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/icons": "workspace:~"
@@ -11694,7 +11694,7 @@ __metadata:
     "@rocket.chat/core-typings": "workspace:~"
     "@rocket.chat/css-in-js": "workspace:~"
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/icons": "workspace:~"
@@ -11722,7 +11722,7 @@ __metadata:
     "@rocket.chat/core-typings": "workspace:~"
     "@rocket.chat/css-in-js": "workspace:~"
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/icons": "workspace:~"
@@ -11781,7 +11781,7 @@ __metadata:
     "@react-aria/toolbar": "npm:^3.0.0-nightly.5042"
     "@rocket.chat/css-in-js": "workspace:~"
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/icons": "workspace:~"
@@ -11822,7 +11822,7 @@ __metadata:
     "@react-aria/visually-hidden": "npm:^3.8.27"
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/css-in-js": "workspace:^"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-forms": "workspace:^"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
@@ -11884,7 +11884,7 @@ __metadata:
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/ddp-client": "workspace:~"
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/i18n": "workspace:~"
@@ -11977,7 +11977,7 @@ __metadata:
   resolution: "@rocket.chat/ui-media@workspace:packages/ui-media"
   dependencies:
     "@rocket.chat/css-in-js": "workspace:^"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/icons": "workspace:~"
     "@rocket.chat/jest-presets": "workspace:~"
@@ -12023,7 +12023,7 @@ __metadata:
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/css-in-js": "workspace:~"
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/icons": "workspace:~"
@@ -12070,7 +12070,7 @@ __metadata:
     "@rocket.chat/css-in-js": "workspace:~"
     "@rocket.chat/desktop-api": "workspace:^"
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/fuselage-ui-kit": "workspace:^"
@@ -12137,7 +12137,7 @@ __metadata:
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/css-in-js": "workspace:~"
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-toastbar": "workspace:^"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
@@ -12175,7 +12175,7 @@ __metadata:
     "@rocket.chat/core-typings": "workspace:~"
     "@rocket.chat/css-in-js": "workspace:~"
     "@rocket.chat/emitter": "workspace:~"
-    "@rocket.chat/fuselage": "npm:^0.94.0"
+    "@rocket.chat/fuselage": "npm:^0.95.0"
     "@rocket.chat/fuselage-hooks": "npm:^0.43.1"
     "@rocket.chat/fuselage-tokens": "npm:^0.35.0"
     "@rocket.chat/i18n": "workspace:~"

From 1a34c71a5a26807ae5dae2ac74fd215e42d76164 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Fri, 9 Oct 2026 17:58:46 -0300
Subject: [PATCH 3/5] refactor(ui-media): Render device menu triggers through
 fuselage SplitButtonTrigger

The pickers no longer set fuselage's internal `rcx-split-button__trigger`
class; ActionButton takes `splitButtonTrigger` and renders the public
component instead.
---
 packages/ui-conference/src/call/AudioDevicePicker.tsx |  2 +-
 packages/ui-conference/src/call/CameraPicker.tsx      |  9 +--------
 packages/ui-media/src/components/ActionButton.tsx     | 10 +++++++---
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/ui-conference/src/call/AudioDevicePicker.tsx b/packages/ui-conference/src/call/AudioDevicePicker.tsx
index ded4709d128fb..5b21a9e9d328c 100644
--- a/packages/ui-conference/src/call/AudioDevicePicker.tsx
+++ b/packages/ui-conference/src/call/AudioDevicePicker.tsx
@@ -23,7 +23,7 @@ const AudioDevicePicker = () => {
 			beforeOpen={() => revealDeviceLabels(['audioinput', 'audiooutput'], devices)}
 			button={
 				<DeviceMenuButton
-					rcx-split-button__trigger
+					splitButtonTrigger
 					secondary
 					large
 					menuIcon={self.muted ? 'chevron-up' : <VoiceActivity level={micLevel} size={24} />}
diff --git a/packages/ui-conference/src/call/CameraPicker.tsx b/packages/ui-conference/src/call/CameraPicker.tsx
index aa856f86562ae..b5b7c5157862e 100644
--- a/packages/ui-conference/src/call/CameraPicker.tsx
+++ b/packages/ui-conference/src/call/CameraPicker.tsx
@@ -21,14 +21,7 @@ const CameraPicker = () => {
 			// A call joined with the camera off may not have the permission that names the cameras yet.
 			beforeOpen={() => revealDeviceLabels(['videoinput'], devices)}
 			button={
-				<DeviceMenuButton
-					rcx-split-button__trigger
-					secondary
-					large
-					menuIcon='chevron-up'
-					label={t('Camera_options')}
-					danger={!self.cameraOn}
-				/>
+				<DeviceMenuButton splitButtonTrigger secondary large menuIcon='chevron-up' label={t('Camera_options')} danger={!self.cameraOn} />
 			}
 		/>
 	);
diff --git a/packages/ui-media/src/components/ActionButton.tsx b/packages/ui-media/src/components/ActionButton.tsx
index 56e766bd3da6f..67d59b8a48a4b 100644
--- a/packages/ui-media/src/components/ActionButton.tsx
+++ b/packages/ui-media/src/components/ActionButton.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconButton } from '@rocket.chat/fuselage';
+import { Icon, IconButton, SplitButtonTrigger } from '@rocket.chat/fuselage';
 import type { Keys } from '@rocket.chat/icons';
 import type { ComponentProps, ReactElement } from 'react';
 import { forwardRef } from 'react';
@@ -9,16 +9,20 @@ export type ActionButtonProps = {
 	icon: Keys | ReactElement;
 	/** Renders the larger variant used by the conference UI. The widget keeps its original size by default. */
 	large?: boolean;
+	/** Renders it as the menu segment of a fuselage `SplitButton`. */
+	splitButtonTrigger?: boolean;
 	disabled?: boolean;
 	onClick?: () => void;
 } & Omit<ComponentProps<typeof IconButton>, 'icon' | 'aria-label' | 'disabled' | 'onClick'>;
 
 const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(function ActionButton(
-	{ disabled, label, icon, onClick, title, secondary = true, large = false, ...props },
+	{ disabled, label, icon, onClick, title, secondary = true, large = false, splitButtonTrigger = false, ...props },
 	ref,
 ) {
+	const Button = splitButtonTrigger ? SplitButtonTrigger : IconButton;
+
 	return (
-		<IconButton
+		<Button
 			label={label}
 			{...(large ? { large: true } : { medium: true })}
 			secondary={secondary}

From 301ac635eb5565a0a001490f0c08bc09ad8cc614 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Fri, 9 Oct 2026 18:03:31 -0300
Subject: [PATCH 4/5] Update packages/ui-conference/src/call/CallControls.tsx

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
---
 packages/ui-conference/src/call/CallControls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-conference/src/call/CallControls.tsx b/packages/ui-conference/src/call/CallControls.tsx
index bdd93b6f353bf..a87c9453b03b6 100644
--- a/packages/ui-conference/src/call/CallControls.tsx
+++ b/packages/ui-conference/src/call/CallControls.tsx
@@ -194,7 +194,7 @@ const CallControls = ({ layout, onLayoutChange, onOpenDiagnostics }: CallControl
 					onToggle={toggleMic}
 				/>
 			</SplitButton>
-			<SplitButton danger={!self.cameraOn} aria-label={t('Camera')}>
+			<SplitButton danger={!self.cameraOn}>
 				<CameraPicker />
 				<ToggleButton
 					label={t('Camera')}

From c68c263c9c10d62e959d593f6a3b03b5fb34166f Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Fri, 9 Oct 2026 22:18:58 -0300
Subject: [PATCH 5/5] fix(ui-conference): Name the camera SplitButton apart
 from its toggle

SplitButton requires a group name, and "Camera" repeated the toggle's
own label.
---
 packages/i18n/src/locales/en.i18n.json             |  1 +
 packages/ui-conference/src/call/CallControls.tsx   |  2 +-
 .../call/__snapshots__/callStories.spec.tsx.snap   | 14 +++++++-------
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
index 4333e53021258..5bf61d995d67e 100644
--- a/packages/i18n/src/locales/en.i18n.json
+++ b/packages/i18n/src/locales/en.i18n.json
@@ -1264,6 +1264,7 @@
   "Cam_on": "Cam on",
   "Camera": "Camera",
   "Camera_access_not_allowed": "Video message - camera access was not allowed, please check your browser settings.",
+  "Camera_controls": "Camera controls",
   "Camera_options": "Camera options",
   "can-audit": "Can audit",
   "can-audit_description": "Permission to access audit",
diff --git a/packages/ui-conference/src/call/CallControls.tsx b/packages/ui-conference/src/call/CallControls.tsx
index a87c9453b03b6..8998fd195db74 100644
--- a/packages/ui-conference/src/call/CallControls.tsx
+++ b/packages/ui-conference/src/call/CallControls.tsx
@@ -194,7 +194,7 @@ const CallControls = ({ layout, onLayoutChange, onOpenDiagnostics }: CallControl
 					onToggle={toggleMic}
 				/>
 			</SplitButton>
-			<SplitButton danger={!self.cameraOn}>
+			<SplitButton danger={!self.cameraOn} aria-label={t('Camera_controls')}>
 				<CameraPicker />
 				<ToggleButton
 					label={t('Camera')}
diff --git a/packages/ui-conference/src/call/__snapshots__/callStories.spec.tsx.snap b/packages/ui-conference/src/call/__snapshots__/callStories.spec.tsx.snap
index 85e2355af1b1a..591c98c5c5495 100644
--- a/packages/ui-conference/src/call/__snapshots__/callStories.spec.tsx.snap
+++ b/packages/ui-conference/src/call/__snapshots__/callStories.spec.tsx.snap
@@ -151,7 +151,7 @@ exports[`call stories renders CallBar Default without crashing 1`] = `
               </button>
             </div>
             <div
-              aria-label="Camera"
+              aria-label="Camera controls"
               class="rcx-split-button rcx-split-button--danger"
               role="group"
             >
@@ -344,7 +344,7 @@ exports[`call stories renders CallControls CameraOnAndSharing without crashing 1
             </button>
           </div>
           <div
-            aria-label="Camera"
+            aria-label="Camera controls"
             class="rcx-split-button"
             role="group"
           >
@@ -536,7 +536,7 @@ exports[`call stories renders CallControls Default without crashing 1`] = `
             </button>
           </div>
           <div
-            aria-label="Camera"
+            aria-label="Camera controls"
             class="rcx-split-button rcx-split-button--danger"
             role="group"
           >
@@ -728,7 +728,7 @@ exports[`call stories renders CallControls HandRaised without crashing 1`] = `
             </button>
           </div>
           <div
-            aria-label="Camera"
+            aria-label="Camera controls"
             class="rcx-split-button rcx-split-button--danger"
             role="group"
           >
@@ -905,7 +905,7 @@ exports[`call stories renders CallControls Muted without crashing 1`] = `
             </button>
           </div>
           <div
-            aria-label="Camera"
+            aria-label="Camera controls"
             class="rcx-split-button rcx-split-button--danger"
             role="group"
           >
@@ -1097,7 +1097,7 @@ exports[`call stories renders CallControls OneOnOne without crashing 1`] = `
             </button>
           </div>
           <div
-            aria-label="Camera"
+            aria-label="Camera controls"
             class="rcx-split-button rcx-split-button--danger"
             role="group"
           >
@@ -1274,7 +1274,7 @@ exports[`call stories renders CallControls SpeakingWhileMuted without crashing 1
             </button>
           </div>
           <div
-            aria-label="Camera"
+            aria-label="Camera controls"
             class="rcx-split-button rcx-split-button--danger"
             role="group"
           >