@automattic/jetpack-components 6.1.0 → 6.2.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [6.2.0] - 2026-11-04
+### Added
+- Add a SidebarFooter component for actions pinned to the bottom of a sidebar. [#54229]
+
+### Changed
+- Gravatar Hovercards: Update @gravatar-com/hovercards to 0.17.0, which adds defensive escaping of Gravatar profile data. [#54379]
+- StatCard: Use the design system tooltip. [#54512]
+- Update package dependencies. [#54512]
+
+### Fixed
+- JetpackFooter: Keep the footer styles in production builds. [#54512]
+
+## [6.1.1] - 2026-11-02
+### Changed
+- Update package dependencies. [#53869]
+
 ## [6.1.0] - 2026-10-28
 ### Added
 - Add a PeriodSelector component: a dropdown of period presets with optional previous and next buttons. [#54149]
@@ -259,8 +275,7 @@
 ## [1.11.3] - 2026-05-21
 ### Changed
 - Mark ContextualUpgradeTrigger as @deprecated. Use Notice from @wordpress/ui instead. The implementation is unchanged. [#48909]
-- Update package dependencies. [#48405]
-- Update package dependencies. [#49012]
+- Update package dependencies. [#48405] [#49012]
 
 ## [1.11.2] - 2026-05-19
 ### Changed
@@ -2048,6 +2063,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[6.2.0]: https://github.com/Automattic/jetpack-components/compare/6.1.1...6.2.0
+[6.1.1]: https://github.com/Automattic/jetpack-components/compare/6.1.0...6.1.1
 [6.1.0]: https://github.com/Automattic/jetpack-components/compare/6.0.0...6.1.0
 [6.0.0]: https://github.com/Automattic/jetpack-components/compare/5.0.1...6.0.0
 [5.0.1]: https://github.com/Automattic/jetpack-components/compare/5.0.0...5.0.1

package/build/components/dot-pager/style.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 @use "@automattic/jetpack-base-styles/root-variables";
 
 .dot-pager {
@@ -13,7 +13,7 @@
 	opacity: 1;
 	visibility: visible;
 
-	@include gb.reduce-motion( "transition" );
+	@include mixins.reduce-motion( "transition" );
 }
 
 .dot-pager__controls {

package/build/components/global-notices/styles.module.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 
 .global-notices {
 
@@ -10,14 +10,14 @@
 		// Modals have 100000, so this needs to be above them
 		z-index: 100001;
 
-		@include gb.break-small {
+		@include mixins.break-small {
 			width: auto;
 			inset-inline: unset; // left and right
 			inset-block-start: 4rem;
 			inset-inline-end: 1rem;
 		}
 
-		@include gb.break-medium {
+		@include mixins.break-medium {
 			inset-block-start: 3rem;
 		}
 	}

package/build/components/icons/style.module.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/colors";
 
 .star-icon {
 	fill: #000;
@@ -10,7 +10,7 @@
 }
 
 .socialIcon {
-	fill: gb.$gray-700;
+	fill: colors.$gray-700;
 
 	&.bluesky {
 		fill: var(--jetpack-social-logo-color-bluesky);

package/build/components/jetpack-footer/index.d.ts

@@ -1,2 +1,5 @@
 import './style.scss';
-export { default } from './jetpack-footer.tsx';
+import type { JetpackFooterProps } from './types.ts';
+import type { FC } from 'react';
+declare const JetpackFooter: FC<JetpackFooterProps>;
+export default JetpackFooter;

package/build/components/jetpack-footer/index.js

@@ -1,2 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import './style.scss';
-export { default } from './jetpack-footer.js';
+import UnstyledJetpackFooter from './jetpack-footer.js';
+// A pure re-export would let bundlers that honour `sideEffects` drop the style import above.
+const JetpackFooter = props => _jsx(UnstyledJetpackFooter, { ...props });
+export default JetpackFooter;

package/build/components/jetpack-footer/jetpack-footer.d.ts

@@ -9,10 +9,10 @@ declare global {
     }
 }
 /**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ * UnstyledJetpackFooter displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right, without loading its stylesheet.
  *
  * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
+ * @return {ReactNode} UnstyledJetpackFooter component.
  */
-declare const JetpackFooter: FC<JetpackFooterProps>;
-export default JetpackFooter;
+declare const UnstyledJetpackFooter: FC<JetpackFooterProps>;
+export default UnstyledJetpackFooter;

package/build/components/jetpack-footer/jetpack-footer.js

@@ -7,12 +7,12 @@ import getRedirectUrl from '../../tools/jp-redirect/index.js';
 import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
 import JetpackLogo from '../jetpack-logo/index.js';
 /**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ * UnstyledJetpackFooter displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right, without loading its stylesheet.
  *
  * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
+ * @return {ReactNode} UnstyledJetpackFooter component.
  */
-const JetpackFooter = ({ className, menu, ...otherProps }) => {
+const UnstyledJetpackFooter = ({ className, menu, ...otherProps }) => {
     let items = [];
     if (getScriptData()?.myJetpack?.isAvailable === true &&
         !isWpcomPlatformSite() &&
@@ -36,4 +36,4 @@ const JetpackFooter = ({ className, menu, ...otherProps }) => {
                     return (_jsx("li", { children: _jsx(Text, { variant: "body-md", className: "jetpack-footer__menu-item", render: !item.href ? (_jsx(Link, { render: _jsx("span", {}), tabIndex: 0, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined, role: "button" })) : (_jsx(Link, { href: item.href, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })), children: item.label }) }, item.label));
                 }) }), _jsx("a", { className: "jetpack-footer__a8c", href: getRedirectUrl('a8c-about'), rel: "noopener noreferrer", target: "_blank", children: _jsx(AutomatticBylineLogo, { height: 8 }) })] }));
 };
-export default JetpackFooter;
+export default UnstyledJetpackFooter;

package/build/components/navigator-modal/styles.scss

@@ -1,4 +1,6 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/breakpoints";
+@use "@wordpress/base-styles/colors";
+@use "@wordpress/base-styles/mixins";
 
 .components-modal__screen-overlay:has(.jp-navigator-modal) {
 	z-index: 99999; // Slightly lower than snackbar z-index (100001) so snackbars remain visible above the modal
@@ -9,7 +11,7 @@
 	container-name: navigator-modal;
 	width: 100%;
 
-	@include gb.break-medium() {
+	@include mixins.break-medium() {
 		max-height: 90%;
 	}
 
@@ -37,7 +39,7 @@
 		justify-content: space-between;
 		padding: 1.5rem;
 		height: 4.5rem;
-		border-bottom: 1px solid gb.$gray-200;
+		border-bottom: 1px solid colors.$gray-200;
 		flex-shrink: 0;
 
 		h1 {
@@ -45,7 +47,7 @@
 			font-size: 15px;
 			font-weight: 500;
 			line-height: 24px;
-			color: gb.$gray-900;
+			color: colors.$gray-900;
 		}
 	}
 
@@ -60,7 +62,7 @@
 		overflow: auto;
 		flex-direction: column;
 
-		@container navigator-modal (width >= #{gb.$break-small}) {
+		@container navigator-modal (width >= #{breakpoints.$break-small}) {
 			flex-direction: row;
 		}
 	}
@@ -71,11 +73,11 @@
 		flex-direction: column;
 		gap: 1.5rem;
 
-		@container navigator-modal (width >= #{gb.$break-small}) {
+		@container navigator-modal (width >= #{breakpoints.$break-small}) {
 			flex-basis: 30%;
 			height: 100%;
 			flex-shrink: 0;
-			border-inline-end: 1px solid gb.$gray-300;
+			border-inline-end: 1px solid colors.$gray-300;
 			overflow: auto;
 		}
 	}
@@ -85,14 +87,14 @@
 		height: 100%;
 		flex: 1;
 
-		@container navigator-modal (width >= #{gb.$break-small}) {
+		@container navigator-modal (width >= #{breakpoints.$break-small}) {
 			overflow: auto;
 		}
 	}
 
 	&__footer {
 		padding: 1rem 1.5rem;
-		border-top: 1px solid gb.$gray-300;
+		border-top: 1px solid colors.$gray-300;
 		height: 4.5rem;
 		flex-shrink: 0;
 	}

package/build/components/selectable-card/_selectable-card.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 
 // Shared by CheckboxCard and RadioCard, which differ only in their control.
 
@@ -26,7 +26,7 @@
 
 	&:has(:focus-visible) {
 
-		@include gb.outset-ring__focus();
+		@include mixins.outset-ring__focus();
 	}
 
 	@media (prefers-reduced-motion: no-preference) {

package/build/components/sidebar-footer/index.d.ts

@@ -0,0 +1,12 @@
+import type { SidebarFooterProps } from './types.ts';
+import type { JSX } from 'react';
+/**
+ * Actions pinned to the bottom of a sidebar, with the content scrolling under them.
+ *
+ * Render it last inside a flex column that fills the sidebar. Use `@wordpress/ui` buttons at
+ * their default size, which is 40px tall.
+ *
+ * @param {SidebarFooterProps} props - Component props.
+ * @return {JSX.Element} The footer.
+ */
+export default function SidebarFooter({ children, description, className, }: SidebarFooterProps): JSX.Element;

package/build/components/sidebar-footer/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './style.module.scss';
+/**
+ * Actions pinned to the bottom of a sidebar, with the content scrolling under them.
+ *
+ * Render it last inside a flex column that fills the sidebar. Use `@wordpress/ui` buttons at
+ * their default size, which is 40px tall.
+ *
+ * @param {SidebarFooterProps} props - Component props.
+ * @return {JSX.Element} The footer.
+ */
+export default function SidebarFooter({ children, description, className, }) {
+    return (_jsxs("div", { className: clsx(styles.footer, className), children: [description, _jsx("div", { className: styles.actions, children: children })] }));
+}

package/build/components/sidebar-footer/style.module.scss

@@ -0,0 +1,24 @@
+.footer {
+	position: sticky;
+	inset-block-end: 0;
+	// Above positioned content scrolling under it, such as the hidden checkbox
+	// of wp-components toggles before 33.0, which would take the footer's clicks.
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-md);
+	margin-block-start: auto;
+	// Matches the admin-ui Page title bar, lining the actions up with the content.
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+	border-block-start:
+		var(--wpds-border-width-xs) solid
+		var(--wpds-color-stroke-surface-neutral);
+	background: var(--wpds-color-background-surface-neutral);
+}
+
+.actions {
+	display: grid;
+	grid-auto-columns: minmax(0, 1fr);
+	grid-auto-flow: column;
+	gap: var(--wpds-dimension-gap-sm);
+}

package/build/components/sidebar-footer/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type SidebarFooterProps = {
+    /**
+     * The actions, usually one or two buttons. Each gets an equal-width column and fills it.
+     */
+    children: ReactNode;
+    /**
+     * Shown above the actions, such as a note on what an action is doing.
+     */
+    description?: ReactNode;
+    /**
+     * Extra class name for the footer.
+     */
+    className?: string;
+};

package/build/components/sidebar-footer/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/stat-card/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * External dependencies
  */
 import { formatNumber, formatNumberCompact } from '@automattic/number-formatters';
-import { Tooltip } from '@wordpress/components';
+import { Tooltip } from '@wordpress/ui';
 import clsx from 'clsx';
 /**
  * Internal dependencies
@@ -19,6 +19,6 @@ import styles from './style.module.scss';
 const StatCard = ({ className, hideValue, icon, label, value, variant = 'square', }) => {
     const formattedValue = formatNumber(value);
     const compactValue = formatNumberCompact(value);
-    return (_jsxs("div", { className: clsx(className, styles.wrapper, styles[variant]), children: [_jsx("div", { className: clsx(styles.icon), children: icon }), _jsxs("div", { className: clsx(styles.info), children: [_jsx(Text, { className: styles.label, children: label }), variant === 'square' ? (_jsx(Tooltip, { text: formattedValue, placement: "top", children: _jsx(Text, { variant: "headline-small", className: clsx(styles.value), children: hideValue ? '-' : compactValue }) })) : (_jsx(Text, { variant: "title-medium-semi-bold", className: clsx(styles.value), children: hideValue ? '-' : formattedValue }))] })] }));
+    return (_jsxs("div", { className: clsx(className, styles.wrapper, styles[variant]), children: [_jsx("div", { className: clsx(styles.icon), children: icon }), _jsxs("div", { className: clsx(styles.info), children: [_jsx(Text, { className: styles.label, children: label }), variant === 'square' ? (_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { render: _jsx(Text, { variant: "headline-small", className: clsx(styles.value), children: hideValue ? '-' : compactValue }) }), _jsx(Tooltip.Popup, { children: formattedValue })] })) : (_jsx(Text, { variant: "title-medium-semi-bold", className: clsx(styles.value), children: hideValue ? '-' : formattedValue }))] })] }));
 };
 export default StatCard;

package/build/components/swipeable/style.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 
 .swipeable__container {
 	width: 100%;
@@ -19,7 +19,7 @@
 	transition: all 0.5s ease-in-out;
 	transition-property: transform, height;
 
-	@include gb.reduce-motion( "transition" );
+	@include mixins.reduce-motion( "transition" );
 }
 
 .swipeable__page {

package/build/index.d.ts

@@ -52,5 +52,7 @@ export type { PeriodPreset, PeriodSelectorProps } from './components/period-sele
 export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
 export { default as DetailsViewer } from './components/details-viewer/index.tsx';
+export { default as SidebarFooter } from './components/sidebar-footer/index.tsx';
+export type { SidebarFooterProps } from './components/sidebar-footer/types.ts';
 export * from './components/global-notices/index.ts';
 export * from './components/navigator-modal/index.tsx';

package/build/index.js

@@ -61,5 +61,6 @@ export { default as PeriodSelector } from './components/period-selector/index.js
 export { default as DiffViewer } from './components/diff-viewer/index.js';
 export { default as MarkedLines } from './components/marked-lines/index.js';
 export { default as DetailsViewer } from './components/details-viewer/index.js';
+export { default as SidebarFooter } from './components/sidebar-footer/index.js';
 export * from './components/global-notices/index.js';
 export * from './components/navigator-modal/index.js';

package/components/dot-pager/style.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 @use "@automattic/jetpack-base-styles/root-variables";
 
 .dot-pager {
@@ -13,7 +13,7 @@
 	opacity: 1;
 	visibility: visible;
 
-	@include gb.reduce-motion( "transition" );
+	@include mixins.reduce-motion( "transition" );
 }
 
 .dot-pager__controls {

package/components/global-notices/styles.module.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 
 .global-notices {
 
@@ -10,14 +10,14 @@
 		// Modals have 100000, so this needs to be above them
 		z-index: 100001;
 
-		@include gb.break-small {
+		@include mixins.break-small {
 			width: auto;
 			inset-inline: unset; // left and right
 			inset-block-start: 4rem;
 			inset-inline-end: 1rem;
 		}
 
-		@include gb.break-medium {
+		@include mixins.break-medium {
 			inset-block-start: 3rem;
 		}
 	}

package/components/icons/style.module.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/colors";
 
 .star-icon {
 	fill: #000;
@@ -10,7 +10,7 @@
 }
 
 .socialIcon {
-	fill: gb.$gray-700;
+	fill: colors.$gray-700;
 
 	&.bluesky {
 		fill: var(--jetpack-social-logo-color-bluesky);

package/components/jetpack-footer/index.tsx

@@ -1,3 +1,9 @@
 import './style.scss';
+import UnstyledJetpackFooter from './jetpack-footer.tsx';
+import type { JetpackFooterProps } from './types.ts';
+import type { FC } from 'react';
 
-export { default } from './jetpack-footer.tsx';
+// A pure re-export would let bundlers that honour `sideEffects` drop the style import above.
+const JetpackFooter: FC< JetpackFooterProps > = props => <UnstyledJetpackFooter { ...props } />;
+
+export default JetpackFooter;

package/components/jetpack-footer/jetpack-footer.tsx

@@ -18,12 +18,12 @@ declare global {
 }
 
 /**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ * UnstyledJetpackFooter displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right, without loading its stylesheet.
  *
  * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
+ * @return {ReactNode} UnstyledJetpackFooter component.
  */
-const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherProps } ) => {
+const UnstyledJetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherProps } ) => {
 	let items: JetpackFooterMenuItem[] = [];
 
 	if (
@@ -110,4 +110,4 @@ const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherPro
 	);
 };
 
-export default JetpackFooter;
+export default UnstyledJetpackFooter;

package/components/navigator-modal/styles.scss

@@ -1,4 +1,6 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/breakpoints";
+@use "@wordpress/base-styles/colors";
+@use "@wordpress/base-styles/mixins";
 
 .components-modal__screen-overlay:has(.jp-navigator-modal) {
 	z-index: 99999; // Slightly lower than snackbar z-index (100001) so snackbars remain visible above the modal
@@ -9,7 +11,7 @@
 	container-name: navigator-modal;
 	width: 100%;
 
-	@include gb.break-medium() {
+	@include mixins.break-medium() {
 		max-height: 90%;
 	}
 
@@ -37,7 +39,7 @@
 		justify-content: space-between;
 		padding: 1.5rem;
 		height: 4.5rem;
-		border-bottom: 1px solid gb.$gray-200;
+		border-bottom: 1px solid colors.$gray-200;
 		flex-shrink: 0;
 
 		h1 {
@@ -45,7 +47,7 @@
 			font-size: 15px;
 			font-weight: 500;
 			line-height: 24px;
-			color: gb.$gray-900;
+			color: colors.$gray-900;
 		}
 	}
 
@@ -60,7 +62,7 @@
 		overflow: auto;
 		flex-direction: column;
 
-		@container navigator-modal (width >= #{gb.$break-small}) {
+		@container navigator-modal (width >= #{breakpoints.$break-small}) {
 			flex-direction: row;
 		}
 	}
@@ -71,11 +73,11 @@
 		flex-direction: column;
 		gap: 1.5rem;
 
-		@container navigator-modal (width >= #{gb.$break-small}) {
+		@container navigator-modal (width >= #{breakpoints.$break-small}) {
 			flex-basis: 30%;
 			height: 100%;
 			flex-shrink: 0;
-			border-inline-end: 1px solid gb.$gray-300;
+			border-inline-end: 1px solid colors.$gray-300;
 			overflow: auto;
 		}
 	}
@@ -85,14 +87,14 @@
 		height: 100%;
 		flex: 1;
 
-		@container navigator-modal (width >= #{gb.$break-small}) {
+		@container navigator-modal (width >= #{breakpoints.$break-small}) {
 			overflow: auto;
 		}
 	}
 
 	&__footer {
 		padding: 1rem 1.5rem;
-		border-top: 1px solid gb.$gray-300;
+		border-top: 1px solid colors.$gray-300;
 		height: 4.5rem;
 		flex-shrink: 0;
 	}

package/components/selectable-card/_selectable-card.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 
 // Shared by CheckboxCard and RadioCard, which differ only in their control.
 
@@ -26,7 +26,7 @@
 
 	&:has(:focus-visible) {
 
-		@include gb.outset-ring__focus();
+		@include mixins.outset-ring__focus();
 	}
 
 	@media (prefers-reduced-motion: no-preference) {

package/components/sidebar-footer/index.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import styles from './style.module.scss';
+import type { SidebarFooterProps } from './types.ts';
+import type { JSX } from 'react';
+
+/**
+ * Actions pinned to the bottom of a sidebar, with the content scrolling under them.
+ *
+ * Render it last inside a flex column that fills the sidebar. Use `@wordpress/ui` buttons at
+ * their default size, which is 40px tall.
+ *
+ * @param {SidebarFooterProps} props - Component props.
+ * @return {JSX.Element} The footer.
+ */
+export default function SidebarFooter( {
+	children,
+	description,
+	className,
+}: SidebarFooterProps ): JSX.Element {
+	return (
+		<div className={ clsx( styles.footer, className ) }>
+			{ description }
+			<div className={ styles.actions }>{ children }</div>
+		</div>
+	);
+}

package/components/sidebar-footer/style.module.scss

@@ -0,0 +1,24 @@
+.footer {
+	position: sticky;
+	inset-block-end: 0;
+	// Above positioned content scrolling under it, such as the hidden checkbox
+	// of wp-components toggles before 33.0, which would take the footer's clicks.
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-md);
+	margin-block-start: auto;
+	// Matches the admin-ui Page title bar, lining the actions up with the content.
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+	border-block-start:
+		var(--wpds-border-width-xs) solid
+		var(--wpds-color-stroke-surface-neutral);
+	background: var(--wpds-color-background-surface-neutral);
+}
+
+.actions {
+	display: grid;
+	grid-auto-columns: minmax(0, 1fr);
+	grid-auto-flow: column;
+	gap: var(--wpds-dimension-gap-sm);
+}

package/components/sidebar-footer/types.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+export type SidebarFooterProps = {
+	/**
+	 * The actions, usually one or two buttons. Each gets an equal-width column and fills it.
+	 */
+	children: ReactNode;
+	/**
+	 * Shown above the actions, such as a note on what an action is doing.
+	 */
+	description?: ReactNode;
+	/**
+	 * Extra class name for the footer.
+	 */
+	className?: string;
+};

package/components/stat-card/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { formatNumber, formatNumberCompact } from '@automattic/number-formatters';
-import { Tooltip } from '@wordpress/components';
+import { Tooltip } from '@wordpress/ui';
 import clsx from 'clsx';
 /**
  * Internal dependencies
@@ -35,11 +35,16 @@ const StatCard = ( {
 			<div className={ clsx( styles.info ) }>
 				<Text className={ styles.label }>{ label }</Text>
 				{ variant === 'square' ? (
-					<Tooltip text={ formattedValue } placement="top">
-						<Text variant="headline-small" className={ clsx( styles.value ) }>
-							{ hideValue ? '-' : compactValue }
-						</Text>
-					</Tooltip>
+					<Tooltip.Root>
+						<Tooltip.Trigger
+							render={
+								<Text variant="headline-small" className={ clsx( styles.value ) }>
+									{ hideValue ? '-' : compactValue }
+								</Text>
+							}
+						/>
+						<Tooltip.Popup>{ formattedValue }</Tooltip.Popup>
+					</Tooltip.Root>
 				) : (
 					<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
 						{ hideValue ? '-' : formattedValue }

package/components/swipeable/style.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 
 .swipeable__container {
 	width: 100%;
@@ -19,7 +19,7 @@
 	transition: all 0.5s ease-in-out;
 	transition-property: transform, height;
 
-	@include gb.reduce-motion( "transition" );
+	@include mixins.reduce-motion( "transition" );
 }
 
 .swipeable__page {

package/index.ts

@@ -72,5 +72,7 @@ export type { PeriodPreset, PeriodSelectorProps } from './components/period-sele
 export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
 export { default as DetailsViewer } from './components/details-viewer/index.tsx';
+export { default as SidebarFooter } from './components/sidebar-footer/index.tsx';
+export type { SidebarFooterProps } from './components/sidebar-footer/types.ts';
 export * from './components/global-notices/index.ts';
 export * from './components/navigator-modal/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "6.1.0",
+	"version": "6.2.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -71,6 +71,10 @@
 			"types": "./build/components/radio-card/index.d.ts",
 			"default": "./build/components/radio-card/index.js"
 		},
+		"./sidebar-footer": {
+			"types": "./build/components/sidebar-footer/index.d.ts",
+			"default": "./build/components/sidebar-footer/index.js"
+		},
 		"./tools/jp-redirect": {
 			"types": "./build/tools/jp-redirect/index.d.ts",
 			"default": "./build/tools/jp-redirect/index.js"
@@ -89,36 +93,36 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
-		"@automattic/jetpack-api": "^2.2.3",
-		"@automattic/jetpack-boost-score-api": "^1.3.0",
-		"@automattic/jetpack-script-data": "^0.6.11",
-		"@automattic/number-formatters": "^1.2.12",
+		"@automattic/jetpack-api": "^2.2.5",
+		"@automattic/jetpack-boost-score-api": "^1.3.2",
+		"@automattic/jetpack-script-data": "^0.6.12",
+		"@automattic/number-formatters": "^1.3.0",
 		"@babel/runtime": "^7",
-		"@gravatar-com/hovercards": "0.16.0",
-		"@wordpress/a11y": "4.57.0",
-		"@wordpress/admin-ui": "2.12.0",
-		"@wordpress/browserslist-config": "6.57.0",
-		"@wordpress/components": "42.0.0",
-		"@wordpress/compose": "8.10.0",
-		"@wordpress/data": "10.57.0",
-		"@wordpress/date": "5.57.0",
-		"@wordpress/dom": "4.57.0",
-		"@wordpress/element": "9.0.0",
-		"@wordpress/i18n": "6.30.0",
-		"@wordpress/icons": "18.0.0",
-		"@wordpress/notices": "5.57.0",
-		"@wordpress/theme": "2.3.0",
-		"@wordpress/ui": "0.24.0",
+		"@gravatar-com/hovercards": "0.17.0",
+		"@wordpress/a11y": "5.1.0",
+		"@wordpress/admin-ui": "3.1.0",
+		"@wordpress/browserslist-config": "7.1.0",
+		"@wordpress/components": "44.0.0",
+		"@wordpress/compose": "9.1.0",
+		"@wordpress/data": "11.1.0",
+		"@wordpress/date": "6.1.0",
+		"@wordpress/dom": "5.1.0",
+		"@wordpress/element": "10.1.0",
+		"@wordpress/i18n": "7.1.0",
+		"@wordpress/icons": "20.0.0",
+		"@wordpress/notices": "6.1.0",
+		"@wordpress/theme": "4.0.0",
+		"@wordpress/ui": "0.26.0",
 		"clsx": "2.1.1",
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
-		"social-logos": "^3.4.2",
+		"social-logos": "^3.4.3",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.20",
+		"@automattic/jetpack-base-styles": "^2.0.0",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.5.2",
 		"@storybook/addon-docs": "10.6.3",
@@ -130,6 +134,7 @@
 		"@types/react": "19.3.0",
 		"@types/react-dom": "19.3.0",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
+		"@wordpress/base-styles": "15.0.0",
 		"jest": "30.5.2",
 		"react": "19.3.0",
 		"react-dom": "19.3.0",