@rocket.chat/fuselage 0.93.0 → 0.95.0

package/dist/fuselage.development.css

@@ -1436,11 +1436,10 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   justify-content: center;
   align-items: center;
   height: 1.75rem;
-  padding-inline: 0.75rem;
-  padding-inline-end: 1rem;
+  padding-inline: 0.5rem;
   border-radius: var(--rcx-border-radius-extra-large, 1.25rem);
-  -moz-column-gap: 0.5rem;
-       column-gap: 0.5rem;
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1450,8 +1449,8 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rcx-bubble:not(.rcx-bubble__group) .rcx-bubble__item {
-  padding-inline: 0.5rem;
+.rcx-bubble:not(.rcx-bubble__group) .rcx-bubble__button:has(> .rcx-icon), .rcx-bubble:not(.rcx-bubble__group) .rcx-bubble__item:has(> .rcx-icon) {
+  padding-inline-end: 0.75rem;
 }
 .rcx-bubble--small .rcx-bubble__button, .rcx-bubble--small .rcx-bubble__item {
   letter-spacing: 0rem;
@@ -2343,65 +2342,6 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
 .rcx-button-group--align-end {
   justify-content: flex-end;
 }
-.rcx-button-group--joined {
-  overflow: hidden;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
-}
-.rcx-button-group--joined.rcx-button-group--stretch {
-  width: auto;
-}
-.rcx-button-group--joined.rcx-button-group--align-center {
-  margin-inline: auto;
-}
-.rcx-button-group--joined.rcx-button-group--align-end {
-  margin-inline-start: auto;
-}
-.rcx-button-group--joined.rcx-button-group--vertical {
-  align-items: stretch;
-}
-.rcx-button-group--joined {
-  background-color: var(--rcx-button-group-joined-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-default, #e4e7ea) 60%, transparent));
-  gap: 0;
-}
-.rcx-button-group--joined .rcx-button {
-  border-radius: 0;
-}
-.rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child {
-  color: var(--rcx-color-button-font-on-secondary, #1f2329);
-  border-color: transparent;
-  background-color: transparent;
-}
-.rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child:focus-visible, .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child.focus.focus-visible {
-  border-color: transparent;
-  background-color: var(--rcx-button-ghost-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-focus, #e4e7ea) 60%, transparent));
-}
-.rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child:hover, .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child.hover, .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child.is-hovered {
-  border-color: transparent;
-  background-color: var(--rcx-button-ghost-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-hover, #cbced1) 60%, transparent));
-}
-.rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child:active, .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child.active, .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child.is-active {
-  border-color: transparent;
-  background-color: var(--rcx-button-ghost-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-press, #9ea2a8) 60%, transparent));
-}
-.rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child {
-  color: var(--rcx-color-button-font-on-secondary, #1f2329);
-  border-color: transparent;
-  background-color: transparent;
-}
-.rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child:focus-visible, .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child.focus.focus-visible {
-  border-color: transparent;
-  background-color: var(--rcx-button-ghost-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-focus, #e4e7ea) 60%, transparent));
-}
-.rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child:hover, .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child.hover, .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child.is-hovered {
-  border-color: transparent;
-  background-color: var(--rcx-button-ghost-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-hover, #cbced1) 60%, transparent));
-}
-.rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child:active, .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child.active, .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child.is-active {
-  border-color: transparent;
-  background-color: var(--rcx-button-ghost-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-press, #9ea2a8) 60%, transparent));
-}
 
 .rcx-callout {
   display: flex;
@@ -5415,46 +5355,27 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   min-height: 1.5rem;
   padding: calc(0.5rem - 1px) calc(1rem - 1px);
   text-align: start;
-  color: var(--rcx-color-font-default, #2f343d);
   background-color: var(--rcx-sidebar-color-surface-default, var(--rcx-color-surface-sidebar, #e4e7ea));
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
 }
-.rcx-sidebar-collapse-group__bar[tabindex], .rcx-sidebar-accordion-item__bar[tabindex] {
-  cursor: pointer;
-  outline: 0;
-}
-.rcx-sidebar-collapse-group__bar[tabindex].disabled, .rcx-sidebar-collapse-group__bar[tabindex]:disabled, .rcx-sidebar-accordion-item__bar[tabindex].disabled, .rcx-sidebar-accordion-item__bar[tabindex]:disabled {
-  cursor: not-allowed;
-}
-.rcx-sidebar-collapse-group__bar[tabindex], .rcx-sidebar-accordion-item__bar[tabindex] {
-  border-width: 1px;
-  border-style: solid;
-  border-color: transparent;
-}
-.rcx-sidebar-collapse-group__bar[tabindex]:focus-visible, .rcx-sidebar-collapse-group__bar[tabindex].focus.focus-visible, .rcx-sidebar-accordion-item__bar[tabindex]:focus-visible, .rcx-sidebar-accordion-item__bar[tabindex].focus.focus-visible {
-  border-color: var(--rcx-color-stroke-highlight, #156ff5);
-  border-radius: var(--rcx-border-radius-medium, 0.25rem);
-  outline: 0;
-  box-shadow: none;
-}
-.rcx-sidebar-collapse-group__bar[tabindex].hover, .rcx-sidebar-collapse-group__bar[tabindex]:hover, .rcx-sidebar-accordion-item__bar[tabindex].hover, .rcx-sidebar-accordion-item__bar[tabindex]:hover {
-  background-color: var(--rcx-color-surface-tint, #f7f8fa);
-}
-.rcx-sidebar-collapse-group__bar--disabled, .rcx-sidebar-accordion-item__bar--disabled {
-  cursor: not-allowed;
-  color: var(--rcx-color-font-disabled, #cbced1);
-  background-color: var(--rcx-color-surface-disabled, #f7f8fa);
+.rcx-sidebar-collapse-group__heading, .rcx-sidebar-accordion-item__heading {
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+  min-width: 0;
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
 }
 .rcx-sidebar-collapse-group__title, .rcx-sidebar-accordion-item__title {
-  flex: 1 1 0;
+  flex: 0 1 auto;
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   letter-spacing: 0rem;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 400;
   line-height: 1rem;
 }
 .rcx-sidebar-collapse-group__menu-wrapper, .rcx-sidebar-accordion-item__menu-wrapper {
@@ -5463,10 +5384,12 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   flex-shrink: 0;
   width: 0;
   height: 1.25rem;
+  margin-inline-end: -0.25rem;
   opacity: 0;
 }
 .rcx-sidebar-collapse-group__bar:hover .rcx-sidebar-collapse-group__menu-wrapper, .rcx-sidebar-collapse-group__bar:focus-within .rcx-sidebar-collapse-group__menu-wrapper, .rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__menu-wrapper [aria-expanded=true], .rcx-sidebar-accordion-item__menu-wrapper [aria-expanded=true]) .rcx-sidebar-collapse-group__menu-wrapper, .rcx-sidebar-collapse-group__bar:hover .rcx-sidebar-accordion-item__menu-wrapper, .rcx-sidebar-collapse-group__bar:focus-within .rcx-sidebar-accordion-item__menu-wrapper, .rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__menu-wrapper [aria-expanded=true], .rcx-sidebar-accordion-item__menu-wrapper [aria-expanded=true]) .rcx-sidebar-accordion-item__menu-wrapper, .rcx-sidebar-accordion-item__bar:hover .rcx-sidebar-collapse-group__menu-wrapper, .rcx-sidebar-accordion-item__bar:focus-within .rcx-sidebar-collapse-group__menu-wrapper, .rcx-sidebar-accordion-item__bar:has(.rcx-sidebar-collapse-group__menu-wrapper [aria-expanded=true], .rcx-sidebar-accordion-item__menu-wrapper [aria-expanded=true]) .rcx-sidebar-collapse-group__menu-wrapper, .rcx-sidebar-accordion-item__bar:hover .rcx-sidebar-accordion-item__menu-wrapper, .rcx-sidebar-accordion-item__bar:focus-within .rcx-sidebar-accordion-item__menu-wrapper, .rcx-sidebar-accordion-item__bar:has(.rcx-sidebar-collapse-group__menu-wrapper [aria-expanded=true], .rcx-sidebar-accordion-item__menu-wrapper [aria-expanded=true]) .rcx-sidebar-accordion-item__menu-wrapper {
   width: 1.25rem;
+  margin-inline-end: 0;
   opacity: 1;
 }
 .rcx-sidebar-collapse-group__panel, .rcx-sidebar-accordion-item__panel {
@@ -5483,6 +5406,21 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   height: 100%;
   padding-block: 0.25rem 0.5rem;
 }
+.rcx-sidebar-collapse-group__bar {
+  color: var(--rcx-color-font-secondary-info, #6c737a);
+}
+.rcx-sidebar-collapse-group__bar--empty {
+  color: var(--rcx-color-font-disabled, #cbced1);
+}
+.rcx-sidebar-collapse-group__bar--unread {
+  color: var(--rcx-sidebar-item-color-highlighted, var(--rcx-color-font-titles-labels, #1f2329));
+}
+.rcx-sidebar-collapse-group__bar--unread .rcx-sidebar-collapse-group__title {
+  letter-spacing: 0rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1rem;
+}
 .rcx-sidebar-collapse-group__bar-button {
   display: flex;
   align-items: center;
@@ -5511,7 +5449,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   box-shadow: none;
 }
 .rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__bar-button:hover) {
-  background-color: var(--rcx-color-surface-tint, #f7f8fa);
+  background-color: var(--rcx-sidebar-color-surface-hover, var(--rcx-color-surface-hover, #f2f3f5));
 }
 .rcx-sidebar-collapse-group__panel--expanded {
   padding-block: 0;
@@ -5526,9 +5464,36 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   z-index: 1;
   top: 0;
   padding: 0.75rem 1rem 0.75rem 0;
+  color: var(--rcx-color-font-default, #2f343d);
   border-radius: var(--rcx-border-radius-small, 0.125rem);
   background-color: var(--rcx-color-surface-sidebar, #e4e7ea);
 }
+.rcx-sidebar-accordion-item__bar[tabindex] {
+  cursor: pointer;
+  outline: 0;
+}
+.rcx-sidebar-accordion-item__bar[tabindex].disabled, .rcx-sidebar-accordion-item__bar[tabindex]:disabled {
+  cursor: not-allowed;
+}
+.rcx-sidebar-accordion-item__bar[tabindex] {
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+}
+.rcx-sidebar-accordion-item__bar[tabindex]:focus-visible, .rcx-sidebar-accordion-item__bar[tabindex].focus.focus-visible {
+  border-color: var(--rcx-color-stroke-highlight, #156ff5);
+  border-radius: var(--rcx-border-radius-medium, 0.25rem);
+  outline: 0;
+  box-shadow: none;
+}
+.rcx-sidebar-accordion-item__bar[tabindex].hover, .rcx-sidebar-accordion-item__bar[tabindex]:hover {
+  background-color: var(--rcx-color-surface-tint, #f7f8fa);
+}
+.rcx-sidebar-accordion-item__bar--disabled {
+  cursor: not-allowed;
+  color: var(--rcx-color-font-disabled, #cbced1);
+  background-color: var(--rcx-color-surface-disabled, #f7f8fa);
+}
 .rcx-sidebar-accordion-item__bar .rcx-sidebar-accordion-item__chevron {
   visibility: hidden;
 }
@@ -5691,6 +5656,126 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
     background-position: 100vw 0;
   }
 }
+.rcx-split-button {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  border-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
+  background-color: var(--rcx-split-button-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-default, #e4e7ea) 70%, transparent));
+}
+.rcx-split-button > .rcx-button {
+  border-radius: 0;
+}
+.rcx-split-button > .rcx-button:first-child {
+  border-end-start-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
+  border-start-start-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
+}
+.rcx-split-button > .rcx-button:last-child {
+  border-end-end-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
+  border-start-end-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
+}
+.rcx-split-button > .rcx-button:focus-visible, .rcx-split-button > .rcx-button.focus.focus-visible {
+  position: relative;
+  z-index: 1;
+}
+.rcx-split-button > .rcx-button.rcx-split-button__trigger {
+  color: var(--rcx-color-button-font-on-secondary, #1f2329);
+  border-color: transparent;
+  background-color: transparent;
+}
+.rcx-split-button > .rcx-button.rcx-split-button__trigger:focus-visible, .rcx-split-button > .rcx-button.rcx-split-button__trigger.focus.focus-visible {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-focus, #e4e7ea) 70%, transparent));
+}
+.rcx-split-button > .rcx-button.rcx-split-button__trigger:hover, .rcx-split-button > .rcx-button.rcx-split-button__trigger.hover, .rcx-split-button > .rcx-button.rcx-split-button__trigger.is-hovered {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-hover, #cbced1) 70%, transparent));
+}
+.rcx-split-button > .rcx-button.rcx-split-button__trigger:active, .rcx-split-button > .rcx-button.rcx-split-button__trigger.active, .rcx-split-button > .rcx-button.rcx-split-button__trigger.is-active {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-press, #9ea2a8) 70%, transparent));
+}
+.rcx-split-button--danger {
+  background-color: var(--rcx-split-button-danger-background-color, color-mix(in srgb, var(--rcx-color-button-background-danger-default, #ec0d2a) 70%, transparent));
+}
+.rcx-split-button--danger > .rcx-button.rcx-split-button__trigger {
+  color: var(--rcx-split-button-danger-color, var(--rcx-color-button-font-on-danger, #ffffff));
+  border-color: transparent;
+  background-color: transparent;
+}
+.rcx-split-button--danger > .rcx-button.rcx-split-button__trigger:focus-visible, .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger.focus.focus-visible {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-danger-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-danger-focus, #ec0d2a) 70%, transparent));
+}
+.rcx-split-button--danger > .rcx-button.rcx-split-button__trigger:hover, .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger.hover, .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger.is-hovered {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-danger-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-danger-hover, #d40c26) 70%, transparent));
+}
+.rcx-split-button--danger > .rcx-button.rcx-split-button__trigger:active, .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger.active, .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger.is-active {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-danger-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-danger-press, #bb0b21) 70%, transparent));
+}
+.rcx-split-button--warning {
+  background-color: var(--rcx-split-button-warning-background-color, color-mix(in srgb, var(--rcx-color-button-background-warning-default, #ffd95a) 70%, transparent));
+}
+.rcx-split-button--warning > .rcx-button.rcx-split-button__trigger {
+  color: var(--rcx-split-button-warning-color, var(--rcx-color-button-font-on-warning, #1f2329));
+  border-color: transparent;
+  background-color: transparent;
+}
+.rcx-split-button--warning > .rcx-button.rcx-split-button__trigger:focus-visible, .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger.focus.focus-visible {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-warning-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-warning-focus, #ffd95a) 70%, transparent));
+}
+.rcx-split-button--warning > .rcx-button.rcx-split-button__trigger:hover, .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger.hover, .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger.is-hovered {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-warning-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-warning-hover, #ffd031) 70%, transparent));
+}
+.rcx-split-button--warning > .rcx-button.rcx-split-button__trigger:active, .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger.active, .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger.is-active {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-warning-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-warning-press, #f3be08) 70%, transparent));
+}
+.rcx-split-button--success {
+  background-color: var(--rcx-split-button-success-background-color, color-mix(in srgb, var(--rcx-color-button-background-success-default, #148660) 70%, transparent));
+}
+.rcx-split-button--success > .rcx-button.rcx-split-button__trigger {
+  color: var(--rcx-split-button-success-color, var(--rcx-color-button-font-on-success, #ffffff));
+  border-color: transparent;
+  background-color: transparent;
+}
+.rcx-split-button--success > .rcx-button.rcx-split-button__trigger:focus-visible, .rcx-split-button--success > .rcx-button.rcx-split-button__trigger.focus.focus-visible {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-success-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-success-focus, #148660) 70%, transparent));
+}
+.rcx-split-button--success > .rcx-button.rcx-split-button__trigger:hover, .rcx-split-button--success > .rcx-button.rcx-split-button__trigger.hover, .rcx-split-button--success > .rcx-button.rcx-split-button__trigger.is-hovered {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-success-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-success-hover, #106d4f) 70%, transparent));
+}
+.rcx-split-button--success > .rcx-button.rcx-split-button__trigger:active, .rcx-split-button--success > .rcx-button.rcx-split-button__trigger.active, .rcx-split-button--success > .rcx-button.rcx-split-button__trigger.is-active {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-success-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-success-press, #0d5940) 70%, transparent));
+}
+.rcx-split-button--primary {
+  background-color: var(--rcx-split-button-primary-background-color, color-mix(in srgb, var(--rcx-color-button-background-primary-default, #156ff5) 70%, transparent));
+}
+.rcx-split-button--primary > .rcx-button.rcx-split-button__trigger {
+  color: var(--rcx-split-button-primary-color, var(--rcx-color-button-font-on-primary, #ffffff));
+  border-color: transparent;
+  background-color: transparent;
+}
+.rcx-split-button--primary > .rcx-button.rcx-split-button__trigger:focus-visible, .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger.focus.focus-visible {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-primary-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-primary-focus, #156ff5) 70%, transparent));
+}
+.rcx-split-button--primary > .rcx-button.rcx-split-button__trigger:hover, .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger.hover, .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger.is-hovered {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-primary-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-primary-hover, #095ad2) 70%, transparent));
+}
+.rcx-split-button--primary > .rcx-button.rcx-split-button__trigger:active, .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger.active, .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger.is-active {
+  border-color: transparent;
+  background-color: var(--rcx-button-ghost-primary-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-primary-press, #10529e) 70%, transparent));
+}
+
 .rcx-states {
   display: flex;
   flex-direction: column;

package/dist/fuselage.development.js

@@ -2520,18 +2520,16 @@ if (process.env.NODE_ENV !== "production") (function() {
 	/**
 	* A container for grouping buttons that semantically share a common action context.
 	*/
-	function ButtonGroup({ align = "start", children, stretch, vertical, wrap, small, large, joined, ghostPosition, className, ...props }) {
+	function ButtonGroup({ align = "start", children, stretch, vertical, wrap, small, large, className, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: [
 				"rcx-button-group",
 				stretch && "rcx-button-group--stretch",
 				vertical && "rcx-button-group--vertical",
 				align && `rcx-button-group--align-${align}`,
-				!joined && small && "rcx-button-group--small",
-				!joined && large && "rcx-button-group--large",
+				small && "rcx-button-group--small",
+				large && "rcx-button-group--large",
 				wrap && "rcx-button-group--wrap",
-				joined && "rcx-button-group--joined",
-				joined && ghostPosition && `rcx-button-group--ghost-${ghostPosition}`,
 				className
 			].filter(Boolean).join(" "),
 			role: "group",
@@ -6439,40 +6437,48 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarGroupTitle.tsx
-	var SidebarGroupTitle = ({ title, titleId, badge, menu, barProps, expanded, role, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: ["rcx-box rcx-box--full", "rcx-sidebar-collapse-group__bar rcx-box--animated"].filter(Boolean).join(" "),
+	var SidebarGroupTitle = ({ title, titleId, badge, menu, barProps, expanded, empty, role, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: [
+			"rcx-box rcx-box--full",
+			"rcx-sidebar-collapse-group__bar",
+			!expanded && empty && "rcx-sidebar-collapse-group__bar--empty",
+			!expanded && badge && "rcx-sidebar-collapse-group__bar--unread"
+		].filter(Boolean).join(" "),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "rcx-box rcx-sidebar-collapse-group__bar-button",
 			role,
 			...barProps,
-			children: [
-				expanded !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
-					size: "x20",
-					right: !expanded
-				}),
-				title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "rcx-box rcx-sidebar-collapse-group__heading",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
 					className: "rcx-box rcx-box--full rcx-sidebar-collapse-group__title",
 					id: titleId,
 					children: title
-				}),
-				!expanded && badge && badge
-			]
+				}), expanded !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
+					size: "x20",
+					right: !expanded
+				})]
+			}), !expanded && badge && badge]
 		}), menu]
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarCollapseGroup.tsx
-	function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, menu, title, ...props }) {
+	function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, menu, title, empty, role = "group", ...props }) {
 		const { barProps, expanded, panelExpanded, panelId, titleId } = useCollapse({
 			expanded: propExpanded,
 			defaultExpanded,
 			tabIndex
 		});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		const labelledBy = props["aria-label"] ? void 0 : titleId;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "rcx-box rcx-box--full rcx-sidebar-collapse-group",
+			role,
+			"aria-labelledby": labelledBy,
 			...props,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarGroupTitle, {
 				expanded,
+				empty,
 				title,
 				titleId,
 				badge,
@@ -6645,6 +6651,39 @@ if (process.env.NODE_ENV !== "production") (function() {
 		});
 	}
 	//#endregion
+	//#region src/components/SplitButton/SplitButton.tsx
+	/**
+	* Fuses a menu trigger and its primary action into a single control, e.g. an
+	* audio device menu next to a microphone toggle. The menu trigger is a
+	* `SplitButtonTrigger`, rendered as a ghost segment wherever it sits.
+	*/
+	function SplitButton({ className, danger, warning, success, primary, ...props }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "group",
+			className: [
+				"rcx-split-button",
+				danger && "rcx-split-button--danger",
+				warning && "rcx-split-button--warning",
+				success && "rcx-split-button--success",
+				primary && "rcx-split-button--primary",
+				className
+			].filter(Boolean).join(" "),
+			...props
+		});
+	}
+	//#endregion
+	//#region src/components/SplitButton/SplitButtonTrigger.tsx
+	/**
+	* The ghost segment of a `SplitButton`: the menu trigger fused next to the
+	* primary action. Pass it as a `Menu`'s `button`.
+	*/
+	function SplitButtonTrigger(props) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+			"rcx-split-button__trigger": true,
+			...props
+		});
+	}
+	//#endregion
 	//#region src/components/Table/Table.tsx
 	var Table = ({ striped, sticky, fixed = false, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 		"rcx-table__wrapper": true,
@@ -7178,6 +7217,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 	exports.SidepanelSectionAction = SidepanelSectionAction;
 	exports.Skeleton = Skeleton;
 	exports.Slider = Slider;
+	exports.SplitButton = SplitButton;
+	exports.SplitButtonTrigger = SplitButtonTrigger;
 	exports.States = States;
 	exports.StatesAction = StatesAction;
 	exports.StatesActions = StatesActions;