@redis-ui/components 47.1.0 → 47.3.0

package/dist/ButtonGroup/ButtonGroup.style.cjs

@@ -9,12 +9,13 @@ var ButtonGroupWrapper = styled_components.default.div.withConfig({
 })([
 	"display:flex;align-items:stretch;border-radius:",
 	";border:",
+	";background-color:",
 	";overflow:hidden;width:fit-content;font-size:",
 	";font-style:",
 	";font-weight:",
 	";padding:",
 	";gap:",
 	";"
-], () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.borderRadius, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.border, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontSize, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontStyle, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontWeight, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.padding, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.gap);
+], () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.borderRadius, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.border, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.bgColor, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontSize, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontStyle, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontWeight, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.padding, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.gap);
 //#endregion
 exports.ButtonGroupWrapper = ButtonGroupWrapper;

package/dist/ButtonGroup/ButtonGroup.style.js

@@ -7,12 +7,13 @@ var ButtonGroupWrapper = _styled.div.withConfig({
 })([
 	"display:flex;align-items:stretch;border-radius:",
 	";border:",
+	";background-color:",
 	";overflow:hidden;width:fit-content;font-size:",
 	";font-style:",
 	";font-weight:",
 	";padding:",
 	";gap:",
 	";"
-], () => useTheme().components.buttonGroup.borderRadius, () => useTheme().components.buttonGroup.border, () => useTheme().components.buttonGroup.fontSize, () => useTheme().components.buttonGroup.fontStyle, () => useTheme().components.buttonGroup.fontWeight, () => useTheme().components.buttonGroup.padding, () => useTheme().components.buttonGroup.gap);
+], () => useTheme().components.buttonGroup.borderRadius, () => useTheme().components.buttonGroup.border, () => useTheme().components.buttonGroup.bgColor, () => useTheme().components.buttonGroup.fontSize, () => useTheme().components.buttonGroup.fontStyle, () => useTheme().components.buttonGroup.fontWeight, () => useTheme().components.buttonGroup.padding, () => useTheme().components.buttonGroup.gap);
 //#endregion
 export { ButtonGroupWrapper };

package/dist/ButtonGroup/components/Button/Button.style.cjs

@@ -9,14 +9,18 @@ var Button = styled_components.default.button.withConfig({
 	displayName: "Buttonstyle__Button",
 	componentId: "RedisUI__sc-m6kucg-0"
 })([
-	"cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:",
+	"cursor:pointer;border-style:solid;border-width:",
+	";font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:",
 	";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;@media (prefers-reduced-motion:reduce){transition:none;}user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:",
 	";padding:",
 	";justify-content:center;align-items:center;gap:",
-	";&:not(:last-child){border-inline-end:",
-	";}&:disabled{cursor:not-allowed;}",
+	";&:disabled{cursor:not-allowed;}",
 	" ",
 	";"
-], () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.minWidth, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.borderRadius, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.padding, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.gap, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.border, ({ isSelected }) => require_Button_style_utils.getButtonStatesStyle((0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [require_css_utils.tokenMaps.bgColor, require_css_utils.tokenMaps.textColor]), (0, _redislabsdev_redis_ui_styles.getFocusStyle)("-2px"));
+], () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.borderWidth ?? "0", () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.minWidth, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.borderRadius, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.padding, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.gap, ({ isSelected }) => require_Button_style_utils.getButtonStatesStyle((0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [
+	require_css_utils.tokenMaps.bgColor,
+	require_css_utils.tokenMaps.textColor,
+	require_css_utils.tokenMaps.borderColor
+]), (0, _redislabsdev_redis_ui_styles.getFocusStyle)("-2px"));
 //#endregion
 exports.Button = Button;

package/dist/ButtonGroup/components/Button/Button.style.js

@@ -7,14 +7,18 @@ var Button = _styled.button.withConfig({
 	displayName: "Buttonstyle__Button",
 	componentId: "RedisUI__sc-m6kucg-0"
 })([
-	"cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:",
+	"cursor:pointer;border-style:solid;border-width:",
+	";font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:",
 	";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;@media (prefers-reduced-motion:reduce){transition:none;}user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:",
 	";padding:",
 	";justify-content:center;align-items:center;gap:",
-	";&:not(:last-child){border-inline-end:",
-	";}&:disabled{cursor:not-allowed;}",
+	";&:disabled{cursor:not-allowed;}",
 	" ",
 	";"
-], () => useTheme().components.buttonGroup.button.minWidth, () => useTheme().components.buttonGroup.button.borderRadius, () => useTheme().components.buttonGroup.button.padding, () => useTheme().components.buttonGroup.button.gap, () => useTheme().components.buttonGroup.button.border, ({ isSelected }) => getButtonStatesStyle(useTheme().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [tokenMaps.bgColor, tokenMaps.textColor]), getFocusStyle("-2px"));
+], () => useTheme().components.buttonGroup.button.borderWidth ?? "0", () => useTheme().components.buttonGroup.button.minWidth, () => useTheme().components.buttonGroup.button.borderRadius, () => useTheme().components.buttonGroup.button.padding, () => useTheme().components.buttonGroup.button.gap, ({ isSelected }) => getButtonStatesStyle(useTheme().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [
+	tokenMaps.bgColor,
+	tokenMaps.textColor,
+	tokenMaps.borderColor
+]), getFocusStyle("-2px"));
 //#endregion
 export { Button };

package/dist/SideBar/components/Group/components/Title/Title.cjs

@@ -9,8 +9,6 @@ var Title = ({ children, ...rest }) => {
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Title_style.Label, {
 			size: "M",
-			variant: "semiBold",
-			color: "secondary",
 			component: "span",
 			$isExpanded: isExpanded,
 			$transitionEnd: transitionEnd,

package/dist/SideBar/components/Group/components/Title/Title.js

@@ -8,8 +8,6 @@ var Title = ({ children, ...rest }) => {
 		...rest,
 		children: /* @__PURE__ */ jsx(Label, {
 			size: "M",
-			variant: "semiBold",
-			color: "secondary",
 			component: "span",
 			$isExpanded: isExpanded,
 			$transitionEnd: transitionEnd,

package/dist/SideBar/components/Group/components/Title/Title.style.cjs

@@ -13,7 +13,13 @@ var Container = styled_components.default.div.withConfig({
 var Label = (0, styled_components.default)(require_Typography.default.Body).withConfig({
 	displayName: "Titlestyle__Label",
 	componentId: "RedisUI__sc-1qd2bt1-1"
-})(["display:block;white-space:nowrap;transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:", ";"], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0");
+})([
+	"display:block;white-space:nowrap;transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:",
+	";",
+	""
+], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0", () => require_SideBar_utils.useStateStyle((theme) => styled_components.css`
+        color: ${theme.groupTitle.textColor};
+      `));
 //#endregion
 exports.Container = Container;
 exports.Label = Label;

package/dist/SideBar/components/Group/components/Title/Title.style.js

@@ -11,6 +11,12 @@ var Container = _styled.div.withConfig({
 var Label = _styled(Typography.Body).withConfig({
 	displayName: "Titlestyle__Label",
 	componentId: "RedisUI__sc-1qd2bt1-1"
-})(["display:block;white-space:nowrap;transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:", ";"], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0");
+})([
+	"display:block;white-space:nowrap;transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:",
+	";",
+	""
+], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0", () => useStateStyle((theme) => css`
+        color: ${theme.groupTitle.textColor};
+      `));
 //#endregion
 export { Container, Label };

package/dist/SideBar/components/Item/Item.style.cjs

@@ -53,6 +53,17 @@ var SideBarItem = styled_components.default.li.withConfig({
 			fallbackTokens: states.normal
 		})}
         }
+
+        &[data-state='active']::before {
+          content: '';
+          position: absolute;
+          left: ${theme.activeIndicator.left};
+          top: ${theme.activeIndicator.top};
+          bottom: ${theme.activeIndicator.bottom};
+          width: ${theme.activeIndicator.width};
+          background-color: ${theme.activeIndicator.bgColor};
+          border-radius: ${theme.activeIndicator.borderRadius};
+        }
       `;
 	});
 });

package/dist/SideBar/components/Item/Item.style.js

@@ -51,6 +51,17 @@ var SideBarItem = _styled.li.withConfig({
 			fallbackTokens: states.normal
 		})}
         }
+
+        &[data-state='active']::before {
+          content: '';
+          position: absolute;
+          left: ${theme.activeIndicator.left};
+          top: ${theme.activeIndicator.top};
+          bottom: ${theme.activeIndicator.bottom};
+          width: ${theme.activeIndicator.width};
+          background-color: ${theme.activeIndicator.bgColor};
+          border-radius: ${theme.activeIndicator.borderRadius};
+        }
       `;
 	});
 });

package/dist/SideBar/components/ScrollContainer/ScrollContainer.style.cjs

@@ -6,6 +6,6 @@ styled_components = require_runtime.__toESM(styled_components, 1);
 var ScrollContainer = (0, styled_components.default)(require_FlexGroup.FlexGroup).withConfig({
 	displayName: "ScrollContainerstyle__ScrollContainer",
 	componentId: "RedisUI__sc-15iez38-0"
-})(["overflow-y:auto;overflow-x:hidden;"]);
+})(["overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;"]);
 //#endregion
 exports.ScrollContainer = ScrollContainer;

package/dist/SideBar/components/ScrollContainer/ScrollContainer.style.js

@@ -4,6 +4,6 @@ import _styled from "styled-components";
 var ScrollContainer = _styled(FlexGroup).withConfig({
 	displayName: "ScrollContainerstyle__ScrollContainer",
 	componentId: "RedisUI__sc-15iez38-0"
-})(["overflow-y:auto;overflow-x:hidden;"]);
+})(["overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;"]);
 //#endregion
 export { ScrollContainer };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "47.1.0",
+  "version": "47.3.0",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@redis-ui/icons": "^8.0.0",
-    "@redis-ui/styles": "^16.2.0",
+    "@redis-ui/styles": "^16.4.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "styled-components": "^5.0.0"

package/skills/redis-ui-components/references/ButtonGroup.md

@@ -53,7 +53,8 @@ import { InfoIcon, ShardIcon, StarsIcon } from '@redis-ui/icons';
 const items = [
   { value: 'item1', label: 'Button 1', icon: ShardIcon, disabled: true },
   { value: 'item2', label: 'Button 2', icon: StarsIcon },
-  { value: 'item3', label: 'Button 3' }
+  { value: 'item3', label: 'Button 3' },
+  { value: 'item4', label: 'Button 4' }
 ];
 
 const [selected, setSelected] = useState<string>(items[0].value);

package/skills/redis-ui-components/references/SideBar.md

@@ -13,7 +13,7 @@ import { SideBar } from '@redis-ui/components';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | isExpanded | `boolean` | *required* | Controls whether the sidebar is expanded or collapsed |
-| expandedWidth | `string` | theme value | Overrides the sidebar width when expanded (falls back to the theme's `sideBar.expanded.width`, e.g. `20rem` in the light theme) |
+| expandedWidth | `string` | design-system default | Overrides the sidebar width when expanded |
 
 The component also accepts all `FlexGroupProps` except `direction`, which is fixed to a vertical sidebar layout.
 
@@ -29,10 +29,10 @@ The component also accepts all `FlexGroupProps` except `direction`, which is fix
 - `SideBar.Item` - Navigation item with tooltip support when collapsed.
 - `SideBar.Item.Icon` - Icon slot for a sidebar item.
 - `SideBar.Item.Text` - Text slot for a sidebar item.
-- `SideBar.Item.Button` - Compact action button that stays mounted in the DOM and is visually hidden (fades out and becomes non-interactive) when the sidebar is collapsed.
-- `SideBar.Item.Badge` - Badge slot rendered to the right of `Item.Text` (e.g. `NEW`, `BETA`). Stays mounted in the DOM and fades out when the sidebar is collapsed.
+- `SideBar.Item.Button` - Compact action button rendered inside a sidebar item.
+- `SideBar.Item.Badge` - Badge slot rendered to the right of `Item.Text` (e.g. `NEW`, `BETA`).
 - `SideBar.Group` - Wrapper around a section's `Group.Title` and items. Use one `SideBar.Group` per logical section.
-- `SideBar.Group.Title` - Section label rendered above a group of items. Visible when the sidebar is expanded; the row stays mounted (text fades out) when collapsed so items don't jump around during the transition.
+- `SideBar.Group.Title` - Section label rendered above a group of items.
 - `SideBar.Footer` - Footer wrapper for metadata, links, and text.
 - `SideBar.Footer.MetaData` - Footer metadata container.
 - `SideBar.Footer.Link` - Footer link rendered as body text.
@@ -56,11 +56,11 @@ The logo also accepts standard `HTMLAttributes<HTMLSpanElement>` except `childre
 
 ### SideBar.ItemsContainer Props
 
-This component inherits `FlexGroupProps` except `direction`. It renders a column list container with `gap="0"`, `flex="none"`, and `selfAlign="stretch"`.
+This component inherits `FlexGroupProps` except `direction`. Use it to render a vertical list of sidebar items.
 
 ### SideBar.ScrollContainer Props
 
-This component inherits `FlexGroupProps` except `direction`. It renders a flexible column container with `gap="0"`, `flex="1"`, and `selfAlign="stretch"`.
+This component inherits `FlexGroupProps` except `direction`. Use it for sidebar content that should scroll when vertical space is constrained.
 
 ### SideBar.Divider Props
 
@@ -77,7 +77,7 @@ The divider also accepts standard `HTMLAttributes<HTMLDivElement>` except `child
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | tooltipProps | `SideBarTooltipProps` | *required* | Tooltip configuration used when the sidebar is collapsed |
-| isActive | `boolean` | `false` | Marks the item as the active route/item |
+| isActive | `boolean` | `false` | Marks the item as the active route/item and applies the design-system active visual treatment |
 
 The item also accepts standard `HTMLAttributes<HTMLLIElement>`.
 The tooltip text is used as the collapsed label and tooltip placement defaults to `right`.
@@ -90,15 +90,15 @@ The tooltip text is used as the collapsed label and tooltip placement defaults t
 
 ### SideBar.Item.Text Props
 
-This slot inherits `TypographyBodyProps`. It renders a `Typography.Body` element with `component="span"`, `ellipsis`, and `tooltipOnEllipsis` enabled.
+This slot inherits `TypographyBodyProps`. Use it for the sidebar item text label.
 
 ### SideBar.Item.Button Props
 
-This slot inherits all `ActionIconButtonProps` and defaults `size` to `M`. It stays mounted in the DOM in both states. When the sidebar is collapsed (or while the expand/collapse transition is running) it fades to `opacity: 0`, gets `pointer-events: none`, and is forced to `tabIndex={-1}` and `aria-hidden={true}` so it is removed from the normal tab order and hidden from assistive tech while hidden. Consumer-provided `tabIndex` and `aria-hidden` are intentionally overridden in this state.
+This slot inherits all `ActionIconButtonProps` and defaults `size` to `M`. It is available when the sidebar is expanded and hidden while collapsed.
 
 ### SideBar.Item.Badge Props
 
-This slot inherits all `BadgeProps` from the base `Badge` component. The badge stays in the DOM in both states; when the sidebar is collapsed (or while the expand/collapse transition is running) it fades to `opacity: 0`, so consumers don't need to gate it themselves.
+This slot inherits all `BadgeProps` from the base `Badge` component. It is shown next to item text when the sidebar is expanded and hidden while collapsed.
 
 ### SideBar.Group Props
 
@@ -110,8 +110,7 @@ This wrapper accepts standard `HTMLAttributes<HTMLDivElement>`. Place a `SideBar
 |------|------|---------|-------------|
 | children | `React.ReactNode` | *required* | Title text shown above the group of items |
 
-The group title also accepts standard `HTMLAttributes<HTMLDivElement>` except `children`.
-The label is rendered as a `Typography.Body` (size `M`, `semiBold`, `secondary` color, `span` element). When the sidebar is collapsed, the row stays in the DOM with its theme-driven padding so the items below don't jump, and the label fades to `opacity: 0` once the expand/collapse transition completes (mirroring the `SideBar.Item.Text` pattern).
+The group title also accepts standard `HTMLAttributes<HTMLDivElement>` except `children`. It is shown when the sidebar is expanded and hidden while collapsed.
 
 ### SideBar.Button Props
 
@@ -150,7 +149,7 @@ The link also accepts standard `AnchorHTMLAttributes<HTMLAnchorElement>` except
 |------|------|---------|-------------|
 | children | `React.ReactNode` | *required* | Footer text content |
 
-This slot inherits `TypographyBodyProps` except `children` and renders a small body-text footer line.
+This slot inherits `TypographyBodyProps` except `children` and renders footer text.
 
 ## Examples
 
@@ -272,9 +271,7 @@ const [activeLink, setActiveLink] = useState(items.top[0].content);
 
 ### Groups
 
-> Sidebar items split into groups, each with a title label. When the sidebar is expanded, the group title is shown above its items; when collapsed, the title row stays mounted but the label fades out so the items below don't jump during the expand/collapse transition.
->
-> A group with no title omits the `SideBar.Group.Title` element entirely, as shown by the first group below. Items inside a group may also render an optional `SideBar.Item.Badge` (e.g. `NEW`, `BETA`) to the right of the text — it stays mounted and fades out when the sidebar is collapsed.
+> Sidebar items can be split into groups, each with an optional title label. Items inside a group may also render an optional `SideBar.Item.Badge` (e.g. `NEW`, `BETA`) to the right of the text.
 
 ```tsx
 import { SideBar } from '@redis-ui/components';
@@ -541,14 +538,15 @@ const [expanded, setExpanded] = useState(true);
 ## Notes
 
 - `SideBar` is a collapsible navigation shell with a fixed header/footer layout and grouped content in the middle.
-- The expanded and collapsed widths default to the theme (`sideBar.expanded.width` / `sideBar.collapsed.width`). Hosts can override the expanded width by passing the `expandedWidth` prop; the collapsed state always uses the theme value.
+- Hosts can override the expanded width by passing the `expandedWidth` prop.
 - `SideBar.Header` needs an `onToggle` handler and should usually render `SideBar.SideBarLogo` inside it.
 - `SideBar.Footer` is typically used with `Footer.MetaData`; that metadata area is hidden when the sidebar is collapsed.
 - `SideBar.ScrollContainer` is intended for the middle content when vertical space is constrained, and the docs recommend using only one per sidebar.
 - `SideBar.Split` can be used either directly under `SideBar` or under `SideBar.ScrollContainer`, but the two patterns should not be mixed.
 - `SideBar.Divider` supports `noMargin`, `fullWidth`, and `fullWidthWhenExpanded` for layout tuning.
 - `SideBar.Item` wraps collapsed items in a tooltip and exposes `Item.Icon`, `Item.Text`, `Item.Button`, and `Item.Badge` for composition.
-- `SideBar.Item.Button` stays mounted in the DOM in both states and defaults its size to `M`; when collapsed (or mid-transition) it is visually hidden via opacity, gets `pointer-events: none`, and is forced to `tabIndex={-1}` + `aria-hidden={true}` so it is removed from the tab order and hidden from assistive tech (consumer `tabIndex`/`aria-hidden` are intentionally overridden in the hidden state).
+- `SideBar.Item` supports the `isActive` prop for marking the current route or selected item.
+- `SideBar.Item.Button` defaults its size to `M`.
 - `SideBar.Button` is the root collapsible action button, and it defaults to `PlusIcon` when no collapsed icon is provided.
 - `SideBar.Group` wraps a section's `Group.Title` (optional) and items so the title and the items stay together as one logical unit.
-- `SideBar.Group.Title` labels a group of items with a semibold, secondary-color body label. Its row keeps its theme-driven padding in both states so the items below never jump; the label itself fades out via opacity when the sidebar is collapsed (matching `SideBar.Item.Text`). Pair it with `SideBar.Item.Badge` next to `Item.Text` if you need to mark individual items as `NEW`, `BETA`, etc.
+- `SideBar.Group.Title` labels a group of items. Pair `SideBar.Item.Badge` with `Item.Text` if you need to mark individual items as `NEW`, `BETA`, etc.