newspack-components 4.5.0 → 4.6.0

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+# newspack-components [4.6.0](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.5.0...newspack-components@4.6.0) (2026-08-03)
+
+
+### Bug Fixes
+
+* **audience:** unblock the ESP connect flow in Integrations ([#258](https://github.com/Automattic/newspack-workspace/issues/258)) ([93f3a67](https://github.com/Automattic/newspack-workspace/commit/93f3a67a825b95e0e0f43ac09dad536ee5ccf6f2))
+* **components:** balance section-header description text-wrap ([#624](https://github.com/Automattic/newspack-workspace/issues/624)) ([e6b7076](https://github.com/Automattic/newspack-workspace/commit/e6b70764f63ad98c781ae648728e92819308ace5))
+* **components:** render routed content when no tab owns the route ([#672](https://github.com/Automattic/newspack-workspace/issues/672)) ([ff2ba8d](https://github.com/Automattic/newspack-workspace/commit/ff2ba8d3182e6be0e8e1ebdb7a7af666786ba93e))
+
+
+### Features
+
+* explicit breadcrumb API for Newspack admin headers ([#472](https://github.com/Automattic/newspack-workspace/issues/472)) ([7c43233](https://github.com/Automattic/newspack-workspace/commit/7c4323301f5323822937e93274c4fda4279a787f))
+
+
+### Dependencies
+
+* **newspack-icons:** upgraded to 1.1.0
+* **newspack-scripts:** upgraded to 5.10.0
+
+# newspack-components [4.6.0-alpha.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.5.0...newspack-components@4.6.0-alpha.1) (2026-07-23)
+
+
+### Bug Fixes
+
+* **audience:** unblock the ESP connect flow in Integrations ([#258](https://github.com/Automattic/newspack-workspace/issues/258)) ([93f3a67](https://github.com/Automattic/newspack-workspace/commit/93f3a67a825b95e0e0f43ac09dad536ee5ccf6f2))
+* **components:** balance section-header description text-wrap ([#624](https://github.com/Automattic/newspack-workspace/issues/624)) ([e6b7076](https://github.com/Automattic/newspack-workspace/commit/e6b70764f63ad98c781ae648728e92819308ace5))
+* **components:** render routed content when no tab owns the route ([#672](https://github.com/Automattic/newspack-workspace/issues/672)) ([ff2ba8d](https://github.com/Automattic/newspack-workspace/commit/ff2ba8d3182e6be0e8e1ebdb7a7af666786ba93e))
+
+
+### Features
+
+* explicit breadcrumb API for Newspack admin headers ([#472](https://github.com/Automattic/newspack-workspace/issues/472)) ([7c43233](https://github.com/Automattic/newspack-workspace/commit/7c4323301f5323822937e93274c4fda4279a787f))
+
+
+### Dependencies
+
+* **newspack-icons:** upgraded to 1.1.0-alpha.1
+* **newspack-scripts:** upgraded to 5.10.0-alpha.1
+
 # newspack-components [4.5.0](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.4.0...newspack-components@4.5.0) (2026-07-20)
 
 

package/DEVELOPMENT.md

@@ -100,7 +100,7 @@ When building a screen, use the **spacing scale** (8px unit: 16, 24, 32, 48, 64)
 - **`Notice`** – Use for outcome feedback (success/error/warning) or short contextual messages. Vertical margin is 32px so notices don’t collide with cards; keep one primary message per area when possible.
 - **`Waiting`** – Loading state indicator.
 - **`ProgressBar`** – Progress indicator.
-- **`Accordion`** – Collapsible content sections.
+- **`Accordion`** / **`AccordionPanel`** – Container for one or more collapsible panels.
 - **`StepsList`** / **`StepsListItem`** – Step-by-step list components.
 - **`StyleCard`** – Style preview card.
 

package/dist/cjs/accordion/index.js

@@ -4,16 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports["default"] = exports.AccordionPanel = void 0;
+var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
-var _icons = require("@wordpress/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _divider = _interopRequireDefault(require("../divider"));
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
 
 /**
  * External dependencies
@@ -23,33 +24,49 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-var Accordion = function Accordion(_ref) {
+var AccordionPanel = exports.AccordionPanel = function AccordionPanel(_ref) {
   var children = _ref.children,
+    className = _ref.className,
     title = _ref.title,
     _ref$defaultOpen = _ref.defaultOpen,
     defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen;
-  var _useState = (0, _element.useState)(defaultOpen),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
-    className: (0, _classnames["default"])('newspack-accordion', {
-      'newspack-accordion--is-open': isOpen
-    }),
-    open: isOpen,
-    onToggle: function onToggle(e) {
-      return setIsOpen(e.currentTarget.open);
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("summary", {
-      children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-        className: "newspack-accordion__icon",
-        icon: _icons.chevronRight,
-        size: 24
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "newspack-accordion__content",
-      children: children
-    })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
+    className: className,
+    title: title,
+    initialOpen: defaultOpen,
+    children: children
+  });
+};
+var Accordion = function Accordion(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    _ref2$hideSingleTitle = _ref2.hideSingleTitle,
+    hideSingleTitle = _ref2$hideSingleTitle === void 0 ? false : _ref2$hideSingleTitle,
+    _ref2$spacing = _ref2.spacing,
+    spacing = _ref2$spacing === void 0 ? 6 : _ref2$spacing;
+  var panels = _element.Children.toArray(children);
+  // With nothing to collapse against, a lone panel can render open and untitled.
+  if (hideSingleTitle && panels.length === 1) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('newspack-accordion', className),
+      children: (0, _element.cloneElement)(panels[0], {
+        defaultOpen: true,
+        title: undefined
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+    className: (0, _classnames["default"])('newspack-accordion', className),
+    spacing: spacing,
+    children: panels.map(function (panel, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [panel, index < panels.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+          variant: "secondary",
+          marginBottom: 0,
+          marginTop: 0
+        })]
+      }, panel.key);
+    })
   });
 };
 var _default = exports["default"] = Accordion;

package/dist/cjs/accordion/index.test.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@testing-library/react");
+var _index = _interopRequireWildcard(require("./index"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * External dependencies
+ */ /**
+ * Internal dependencies
+ */
+var renderPanels = function renderPanels(count) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread(_objectSpread({}, props), {}, {
+    children: Array.from({
+      length: count
+    }, function (_, i) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AccordionPanel, {
+        title: "Panel ".concat(i),
+        children: "content"
+      }, i);
+    })
+  })));
+};
+var dividers = function dividers(container) {
+  return container.querySelectorAll('.newspack-divider');
+};
+describe('Accordion dividers', function () {
+  it('renders no divider for a single panel', function () {
+    var _renderPanels = renderPanels(1),
+      container = _renderPanels.container;
+    expect(container.querySelectorAll('.components-panel__body')).toHaveLength(1);
+    expect(dividers(container)).toHaveLength(0);
+  });
+  it('renders a divider between panels but not after the last', function () {
+    var _renderPanels2 = renderPanels(3),
+      container = _renderPanels2.container;
+    expect(container.querySelectorAll('.components-panel__body')).toHaveLength(3);
+    expect(dividers(container)).toHaveLength(2);
+    expect(container.querySelector('.newspack-accordion').lastElementChild).not.toHaveClass('newspack-divider');
+  });
+  it('renders secondary dividers', function () {
+    var _renderPanels3 = renderPanels(2),
+      container = _renderPanels3.container;
+    expect(dividers(container)[0]).toHaveClass('newspack-divider--variant-secondary');
+  });
+});
+describe('Accordion hideSingleTitle', function () {
+  it('keeps the title on a lone panel by default', function () {
+    renderPanels(1);
+    expect(_react.screen.getByRole('button', {
+      name: 'Panel 0'
+    })).toBeInTheDocument();
+  });
+  it('drops the title and opens a lone panel when set', function () {
+    var _renderPanels4 = renderPanels(1, {
+        hideSingleTitle: true
+      }),
+      container = _renderPanels4.container;
+    expect(_react.screen.queryByRole('button', {
+      name: 'Panel 0'
+    })).not.toBeInTheDocument();
+    expect(container.querySelector('.components-panel__body')).toHaveClass('is-opened');
+    expect(_react.screen.getByText('content')).toBeInTheDocument();
+  });
+  it('leaves titles alone when there is more than one panel', function () {
+    renderPanels(2, {
+      hideSingleTitle: true
+    });
+    expect(_react.screen.getByRole('button', {
+      name: 'Panel 0'
+    })).toBeInTheDocument();
+    expect(_react.screen.getByRole('button', {
+      name: 'Panel 1'
+    })).toBeInTheDocument();
+  });
+});

package/dist/cjs/accordion/style.scss

@@ -1,31 +1,35 @@
-@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
+// Sit flush with the surrounding column: core insets panels horizontally, which
+// would misalign them against the section they belong to.
 .newspack-accordion {
-	border: 1px solid wp-colors.$gray-300;
+	.components-panel__body {
+		border: 0;
 
-	&__icon {
-		transition: transform 200ms ease-out;
-		transform: rotate(90deg);
+		> .components-panel__body-title:hover {
+			background: none;
+		}
 	}
 
-	&--is-open {
-		.newspack-accordion {
-			&__icon {
-				transform: rotate(-90deg);
-			}
+	.components-panel__body.is-opened {
+		padding: 0;
+
+		> .components-panel__body-title {
+			margin: 0 0 wp-vars.$grid-unit-30;
 		}
 	}
-	summary {
-		padding: 16px 32px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
-		font-size: 14px;
-		font-weight: bold;
-	}
 
-	&__content {
-		padding: 16px 32px;
+	.components-panel__body-toggle.components-button {
+		@include wp-mixins.heading-large();
+		padding: 0;
+
+		.components-panel__arrow {
+			right: 0;
+		}
+
+		&:focus:not(:focus-visible) {
+			box-shadow: none;
+		}
 	}
 }

package/dist/cjs/action-card/style.scss

@@ -77,28 +77,6 @@
 			padding: 0 4px;
 		}
 
-		&.mv0 {
-			border-left-color: wp-colors.$gray-300;
-			border-radius: 0;
-			border-right-color: wp-colors.$gray-300;
-
-			&:first-of-type {
-				border-top-color: wp-colors.$gray-300;
-				border-top-left-radius: 3px;
-				border-top-right-radius: 3px;
-			}
-
-			&:last-of-type {
-				border-bottom-color: wp-colors.$gray-300;
-				border-bottom-left-radius: 3px;
-				border-bottom-right-radius: 3px;
-			}
-
-			& + & {
-				margin-top: -1px;
-			}
-		}
-
 		&.newspack-card__is-disabled,
 		&.newspack-card__is-primary,
 		&.newspack-card__is-secondary,

package/dist/cjs/breadcrumbs/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _i18n = require("@wordpress/i18n");
+var _ui = require("@wordpress/ui");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * Newspack breadcrumb trail.
+ *
+ * Data-driven: the last item is the current page (the single h1, never a link);
+ * every other item renders as a link when it has a `url`, otherwise plain text.
+ * A plain `<a href>` drives both full admin URLs and hash routes, so the
+ * component needs no router context.
+ *
+ * @param {Object} props
+ * @param {Array}  props.items Trail items: `{ label, url? }`.
+ * @return {JSX.Element|null} Breadcrumbs component.
+ */var Breadcrumbs = function Breadcrumbs(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items;
+  if (!items.length) {
+    return null;
+  }
+  var preceding = items.slice(0, -1);
+  var last = items[items.length - 1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+    "aria-label": (0, _i18n.__)('Breadcrumbs', 'newspack-plugin'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+      render: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {}),
+      direction: "row",
+      align: "center",
+      className: "newspack-breadcrumbs__list",
+      children: [preceding.map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          children: [item.url ?
+          /*#__PURE__*/
+          // eslint-disable-next-line jsx-a11y/anchor-has-content -- content is supplied via the Text children through @wordpress/ui's render prop.
+          (0, _jsxRuntime.jsx)(_ui.Text, {
+            variant: "body-lg",
+            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Link, {
+              tone: "neutral",
+              render: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                href: item.url
+              })
+            }),
+            children: item.label
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Text, {
+            variant: "body-lg",
+            children: item.label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Text, {
+            variant: "body-lg",
+            "aria-hidden": "true",
+            className: "newspack-breadcrumbs__separator",
+            children: "/"
+          })]
+        }, item.url || index);
+      }), last && last.label && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Text, {
+          variant: "heading-lg",
+          render: /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {}),
+          className: "newspack-breadcrumbs__current",
+          children: last.label
+        })
+      })]
+    })
+  });
+};
+var _default = exports["default"] = Breadcrumbs;

package/dist/cjs/breadcrumbs/index.test.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require("./"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+describe('Breadcrumbs', function () {
+  it('renders the last item as the only h1 and never a link', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      items: [{
+        label: 'Newsletters'
+      }, {
+        label: 'Settings',
+        url: '#/x'
+      }]
+    }));
+    var h1s = _react.screen.getAllByRole('heading', {
+      level: 1
+    });
+    expect(h1s).toHaveLength(1);
+    expect(h1s[0]).toHaveTextContent('Settings');
+    expect(_react.screen.queryByRole('link', {
+      name: 'Settings'
+    })).not.toBeInTheDocument();
+  });
+  it('renders a non-last item with a url as a link, without a url as text', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      items: [{
+        label: 'Advertising'
+      }, {
+        label: 'Sponsors',
+        url: '/wp-admin/x'
+      }, {
+        label: 'All sponsors'
+      }]
+    }));
+    var links = _react.screen.getAllByRole('link');
+    expect(links).toHaveLength(1);
+    expect(links[0]).toHaveTextContent('Sponsors');
+    expect(links[0].getAttribute('href')).toBe('/wp-admin/x');
+    expect(_react.screen.getByText('Advertising')).toBeInTheDocument();
+  });
+  it('does not special-case the first item: it links when it has a url', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      items: [{
+        label: 'Audience',
+        url: '#/'
+      }, {
+        label: 'Donations'
+      }]
+    }));
+    var link = _react.screen.getByRole('link', {
+      name: 'Audience'
+    });
+    expect(link.getAttribute('href')).toBe('#/');
+  });
+  it('renders a single-item trail as just the h1 with no separator', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          label: 'Dashboard'
+        }]
+      })),
+      container = _render.container;
+    expect(_react.screen.getByRole('heading', {
+      level: 1
+    })).toHaveTextContent('Dashboard');
+    expect(container.querySelector('.newspack-breadcrumbs__separator')).toBeNull();
+    expect(_react.screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+  it('renders a "/" separator after each preceding item', function () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          label: 'Audience'
+        }, {
+          label: 'Access control'
+        }]
+      })),
+      container = _render2.container;
+    var separators = container.querySelectorAll('.newspack-breadcrumbs__separator');
+    expect(separators).toHaveLength(1);
+    expect(separators[0]).toHaveTextContent('/');
+    expect(separators[0]).toHaveAttribute('aria-hidden', 'true');
+  });
+  it('renders no heading when the last item has no label', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      items: [{
+        label: undefined
+      }]
+    }));
+    expect(_react.screen.queryByRole('heading', {
+      level: 1
+    })).not.toBeInTheDocument();
+  });
+  it('renders nothing when there are no items', function () {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: []
+      })),
+      container = _render3.container;
+    expect(container.querySelector('nav')).not.toBeInTheDocument();
+  });
+});

package/dist/cjs/breadcrumbs/style.scss

@@ -0,0 +1,41 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-breadcrumbs__list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	> li {
+		flex-shrink: 0;
+		margin: 0;
+
+		a {
+			color: wp-colors.$gray-900;
+
+			&:hover,
+			&:focus,
+			&:active {
+				color: wp-colors.$gray-900;
+			}
+		}
+	}
+
+	> li:last-child {
+		flex-shrink: 1;
+		min-width: 0;
+	}
+}
+
+.newspack-breadcrumbs__separator {
+	color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
+	margin: 0 var(--wpds-dimension-gap-sm, 8px);
+	user-select: none;
+}
+
+.newspack-breadcrumbs__list h1.newspack-breadcrumbs__current {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	padding: 0;
+	line-height: normal;
+}

package/dist/cjs/card/core-card.js

@@ -13,7 +13,7 @@ var _icons = require("@wordpress/icons");
 require("./style-core.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["actions", "actionType", "as", "buttonsCard", "className", "footer", "header", "headerAction", "headerStyle", "childrenStyle", "footerStyle", "disabled", "icon", "iconBackgroundColor", "isActive", "isDraggable", "isFirstTarget", "isLastTarget", "isNarrow", "isSmall", "dragIndex", "onDragCallback", "onToggle", "onHeaderClick", "noBorder", "noMargin", "children", "hasGreyHeader", "hasHeaderBorder"];
+var _excluded = ["actions", "actionType", "as", "buttonsCard", "className", "footer", "header", "headerAction", "headerStyle", "childrenStyle", "footerStyle", "disabled", "icon", "iconElement", "iconBackgroundColor", "isActive", "isDraggable", "isFirstTarget", "isLastTarget", "isNarrow", "isSmall", "dragIndex", "onDragCallback", "onToggle", "onHeaderClick", "noBorder", "noMargin", "children", "hasGreyHeader", "hasHeaderBorder"];
 /**
  * Card using WP Core's Card component.
  * https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
@@ -43,6 +43,7 @@ var CoreCard = function CoreCard(_ref) {
     footerStyle = _ref.footerStyle,
     disabled = _ref.disabled,
     icon = _ref.icon,
+    iconElement = _ref.iconElement,
     iconBackgroundColor = _ref.iconBackgroundColor,
     isActive = _ref.isActive,
     isDraggable = _ref.isDraggable,
@@ -64,7 +65,7 @@ var CoreCard = function CoreCard(_ref) {
     _ref$hasHeaderBorder = _ref.hasHeaderBorder,
     hasHeaderBorder = _ref$hasHeaderBorder === void 0 ? true : _ref$hasHeaderBorder,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = (0, _classnames["default"])('newspack-card--core', className, (buttonsCard || as === 'a') && 'newspack-card--core__buttons-card', (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && 'newspack-card--core__header--has-actions', isDraggable && 'newspack-card--core__is-draggable', isNarrow && 'newspack-card--core__is-narrow', isSmall && 'newspack-card--core__is-small', icon && 'newspack-card--core__has-icon', iconBackgroundColor && 'newspack-card--core__has-icon-background-color', isActive && 'newspack-card--core__is-active', disabled && 'newspack-card--core__is-disabled', children && 'newspack-card--core__has-children', noMargin && 'newspack-card--core__no-margin', hasGreyHeader && 'newspack-card--core__has-grey-header');
+  var classes = (0, _classnames["default"])('newspack-card--core', className, (buttonsCard || as === 'a') && 'newspack-card--core__buttons-card', (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && 'newspack-card--core__header--has-actions', isDraggable && 'newspack-card--core__is-draggable', isNarrow && 'newspack-card--core__is-narrow', isSmall && 'newspack-card--core__is-small', (icon || iconElement) && 'newspack-card--core__has-icon', iconBackgroundColor && 'newspack-card--core__has-icon-background-color', isActive && 'newspack-card--core__is-active', disabled && 'newspack-card--core__is-disabled', children && 'newspack-card--core__has-children', noMargin && 'newspack-card--core__no-margin', hasGreyHeader && 'newspack-card--core__has-grey-header');
   var sizeProps = isSmall ? 'small' : otherProps.size;
   if (buttonsCard || as === 'a') {
     if (!isSmall) {
@@ -86,7 +87,7 @@ var CoreCard = function CoreCard(_ref) {
     as: as,
     className: classes
   }, otherProps), {}, {
-    children: [(header || icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardHeader, {
+    children: [(header || icon || iconElement) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardHeader, {
       as: headerIsButton ? 'button' : undefined,
       className: (0, _classnames["default"])('newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable', !hasHeaderBorder && 'newspack-card--core__header--no-border'),
       style: headerStyle,
@@ -122,7 +123,10 @@ var CoreCard = function CoreCard(_ref) {
             size: "small"
           })]
         })]
-      }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), iconElement ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-card--core__icon-slot",
+        children: iconElement
+      }) : icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-card--core__icon",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
           icon: icon,

package/dist/cjs/card/index.js

@@ -81,7 +81,7 @@ var Card = /*#__PURE__*/function (_Component) {
         }, otherProps), __experimentalCoreProps);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], _objectSpread({}, props));
       }
-      var classes = (0, _classnames["default"])('newspack-card', className, buttonsCard && 'newspack-card__buttons-card', headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isNarrow && 'newspack-card__is-narrow', isSmall && 'newspack-card__is-small', isWhite && 'newspack-card__is-white', noBorder && 'newspack-card__no-border');
+      var classes = (0, _classnames["default"])('newspack-card', className, headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isNarrow && 'newspack-card__is-narrow', isSmall && 'newspack-card__is-small', isWhite && 'newspack-card__is-white', noBorder && 'newspack-card__no-border');
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
         className: classes
       }, otherProps));

package/dist/cjs/card/style-core.scss

@@ -14,6 +14,11 @@
 	svg {
 		transition: fill 125ms ease-in-out;
 	}
+	// Slot for a pre-rendered icon element that owns its own badge.
+	&__icon-slot {
+		align-items: center;
+		display: flex;
+	}
 	&__icon {
 		border-radius: wp-vars.$radius-round;
 		display: grid;
@@ -149,6 +154,15 @@
 		border: none;
 		cursor: pointer;
 		text-align: left;
+
+		// The header becomes a real button (headerIsButton) with no border, so
+		// give keyboard focus an explicit on-brand ring. Inset so it isn't clipped
+		// by the card; the transparent outline keeps it visible under Windows High
+		// Contrast / forced-colors mode.
+		&:focus-visible {
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+			outline: 2px solid transparent;
+		}
 	}
 	&__header-content {
 		display: grid;

package/dist/cjs/card/style.scss

@@ -15,15 +15,6 @@
 		padding: 32px 64px;
 	}
 
-	// Buttons Card
-
-	&__buttons-card {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 16px;
-		margin: 32px 0;
-	}
-
 	// Header Actions Card
 
 	&__header-actions {