@rocket.chat/fuselage 0.92.0 → 0.93.0

package/dist/fuselage.development.css

@@ -5218,16 +5218,20 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
 }
 .rcx-sidebar-item:focus-visible, .focus.focus-visible.rcx-sidebar-item {
+  border-color: var(--rcx-color-stroke-highlight, #156ff5);
   border-radius: var(--rcx-border-radius-medium, 0.25rem);
   outline: 0;
-  box-shadow: inset 0 0 0 2px var(--rcx-color-stroke-highlight, #156ff5);
+  box-shadow: none;
 }
 .rcx-sidebar-item {
   display: flex;
   align-items: center;
-  border-radius: var(--rcx-border-radius-medium, 0.25rem);
+  border-radius: var(--rcx-border-radius-small, 0.125rem);
 }
 
 .rcx-sidebar-item:is(a), .rcx-sidebar-item:is(div[role=button]) {
@@ -5255,14 +5259,13 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   text-overflow: ellipsis;
   justify-content: flex-start;
   align-items: center;
-  margin-inline: 0.25rem;
-  padding: 0.25rem;
+  padding: calc(0.25rem - 1px) calc(1rem - 1px);
   white-space: nowrap;
   text-decoration: none;
   gap: 0.25rem;
 }
 .rcx-sidebar-item--level-2 {
-  padding: 0.25rem;
+  padding-block: calc(0.5rem - 1px);
 }
 .rcx-sidebar-item:active {
   color: var(--rcx-sidebar-color-font-active, var(--rcx-color-font-titles-labels, #1f2329));
@@ -5409,10 +5412,40 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
+  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__title, .rcx-sidebar-accordion-item__title {
   flex: 1 1 0;
   margin: 0;
@@ -5421,7 +5454,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   text-overflow: ellipsis;
   letter-spacing: 0rem;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 700;
   line-height: 1rem;
 }
 .rcx-sidebar-collapse-group__menu-wrapper, .rcx-sidebar-accordion-item__menu-wrapper {
@@ -5430,12 +5463,10 @@ 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 {
@@ -5452,27 +5483,6 @@ 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 {
-  min-height: 1.75rem;
-  margin-block-start: 0.25rem;
-  margin-inline: 0.25rem;
-  padding: 0.25rem;
-  color: var(--rcx-color-font-secondary-info, #6c737a);
-  border-radius: var(--rcx-border-radius-medium, 0.25rem);
-  background-color: var(--rcx-sidebar-color-surface-default, var(--rcx-color-surface-sidebar, #e4e7ea));
-}
-.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;
@@ -5489,20 +5499,19 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
 .rcx-sidebar-collapse-group__bar-button[tabindex].disabled, .rcx-sidebar-collapse-group__bar-button[tabindex]:disabled {
   cursor: not-allowed;
 }
-.rcx-sidebar-collapse-group__heading {
-  display: flex;
-  align-items: center;
-  flex: 1 1 0;
-  min-width: 0;
-}
-.rcx-sidebar-collapse-group__title {
-  flex: 0 1 auto;
+.rcx-sidebar-collapse-group__bar-button[tabindex] {
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
 }
-.rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__bar-button[tabindex]):hover, .rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__bar-button[tabindex]).hover, .rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__bar-button[tabindex]).is-hovered {
-  background-color: var(--rcx-color-surface-hover, #f2f3f5);
+.rcx-sidebar-collapse-group__bar-button[tabindex]:focus-visible, .rcx-sidebar-collapse-group__bar-button[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:has(.rcx-sidebar-collapse-group__bar-button:focus-visible) {
-  box-shadow: inset 0 0 0 2px var(--rcx-color-stroke-highlight, #156ff5);
+.rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__bar-button:hover) {
+  background-color: var(--rcx-color-surface-tint, #f7f8fa);
 }
 .rcx-sidebar-collapse-group__panel--expanded {
   padding-block: 0;
@@ -5516,38 +5525,10 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   position: sticky;
   z-index: 1;
   top: 0;
-  min-height: 1.5rem;
   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;
 }
@@ -6440,13 +6421,13 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
 }
 .rcx-tooltip--dir-left::after {
   inset-block-start: 50%;
-  inset-inline-end: -4px;
+  right: -4px;
   margin-block-start: -4px;
   transform: rotate(-135deg);
 }
 .rcx-tooltip--dir-right::after {
   inset-block-start: 50%;
-  inset-inline-start: -4px;
+  left: -4px;
   margin-block-start: -4px;
   transform: rotate(45deg);
 }
@@ -6459,15 +6440,15 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   background-color: var(--rcx-tooltip-light-background-color, var(--rcx-color-surface-neutral, #e4e7ea));
 }
 .rcx-tooltip--pos-middle::after {
-  inset-inline-start: 50%;
-  margin-inline-start: -4px;
+  left: 50%;
+  margin-left: -4px;
 }
 .rcx-tooltip--pos-start::after {
-  inset-inline-start: 8px;
+  left: 8px;
   margin: 0;
 }
 .rcx-tooltip--pos-end::after {
-  inset-inline-start: initial;
-  inset-inline-end: 8px;
+  left: initial;
+  right: 8px;
   margin: 0;
 }

package/dist/fuselage.development.js

@@ -6439,48 +6439,40 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarGroupTitle.tsx
-	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(" "),
+	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(" "),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "rcx-box rcx-sidebar-collapse-group__bar-button",
 			role,
 			...barProps,
-			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", {
+			children: [
+				expanded !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
+					size: "x20",
+					right: !expanded
+				}),
+				title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
 					className: "rcx-box rcx-box--full rcx-sidebar-collapse-group__title",
 					id: titleId,
 					children: title
-				}), expanded !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
-					size: "x20",
-					right: !expanded
-				})]
-			}), !expanded && badge && badge]
+				}),
+				!expanded && badge && badge
+			]
 		}), menu]
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarCollapseGroup.tsx
-	function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, menu, title, empty, role = "group", ...props }) {
+	function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, menu, title, ...props }) {
 		const { barProps, expanded, panelExpanded, panelId, titleId } = useCollapse({
 			expanded: propExpanded,
 			defaultExpanded,
 			tabIndex
 		});
-		const labelledBy = props["aria-label"] ? void 0 : titleId;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 			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,
@@ -6937,8 +6929,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#endregion
 	//#region src/components/Tooltip/Tooltip.tsx
 	var parsePlacement = (placement) => {
-		const [direction, position] = placement ? placement.split("-") : [false, false];
-		if (direction === "right" || direction === "left") return [direction, false];
+		const [direction, position] = placement ? placement.split("-") : [void 0, void 0];
+		if (direction === "right" || direction === "left") return [direction, void 0];
 		return [direction, position];
 	};
 	function Tooltip({ variation = "dark", placement, ...props }) {