newspack-components 4.7.0 → 4.8.0

package/dist/cjs/web-preview/style.scss

@@ -3,20 +3,20 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 .newspack-web-preview {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-600};
-	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
-	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
-	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
-
-	background: color-mix(in srgb, colors.$neutral-1000, transparent 65%);
+	--wp-admin-theme-color: #{np-colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{np-colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{np-colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{np-colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{np-colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{np-colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{np-colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{np-colors.$primary-000--rgb};
+
+	background: color-mix(in srgb, np-colors.$neutral-1000, transparent 65%);
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;

package/dist/cjs/with-wizard/style.scss

@@ -3,19 +3,19 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 // Styling for full-page-react Wizards (ignoring admin-header-only wizards).
 body.newspack-wizard-page:not(.newspack-admin-header) {
-	--wp-admin-theme-color: #{colors.$primary-600};
-	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
-	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
-	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
-	--wp-components-color-accent: #{colors.$primary-600};
+	--wp-admin-theme-color: #{np-colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{np-colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{np-colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{np-colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{np-colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{np-colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{np-colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{np-colors.$primary-000--rgb};
+	--wp-components-color-accent: #{np-colors.$primary-600};
 
 	background: #{wp-colors.$white};
 

package/dist/cjs/with-wizard-screen/style.scss

@@ -3,18 +3,18 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 .newspack-wizard {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-600};
-	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
-	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
-	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
+	--wp-admin-theme-color: #{np-colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{np-colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{np-colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{np-colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{np-colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{np-colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{np-colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{np-colors.$primary-000--rgb};
 
 	color: wp-colors.$gray-900;
 

package/dist/cjs/wizard/index.js

@@ -205,6 +205,7 @@ var Wizard = function Wizard(_ref2, ref) {
     sectionDescription = headerData.sectionDescription,
     sectionMenu = headerData.sectionMenu,
     sectionName = headerData.sectionName,
+    sectionSize = headerData.sectionSize,
     sectionTitle = headerData.sectionTitle,
     sectionPrimaryAction = headerData.sectionPrimaryAction,
     sectionSecondaryAction = headerData.sectionSecondaryAction;
@@ -227,6 +228,14 @@ var Wizard = function Wizard(_ref2, ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     pluginRequirementsSatisfied = _useState2[0],
     setPluginRequirementsSatisfied = _useState2[1];
+  // Whether the requirements check has reported back. Until it has, the check
+  // shows the same fetching treatment as the rest of the wizard rather than
+  // the installer's own spinner and the swapped header; the installer only
+  // surfaces once a plugin is actually found missing.
+  var _useState3 = (0, _element.useState)(requiredPlugins.length === 0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    pluginRequirementsKnown = _useState4[0],
+    setPluginRequirementsKnown = _useState4[1];
 
   // The data fetch above runs once per mount, while the required plugins are
   // still missing — endpoints that need them answer empty or error outright,
@@ -241,6 +250,7 @@ var Wizard = function Wizard(_ref2, ref) {
     // Leave the installer first: whatever happens to the refetch, the user
     // should not be stranded on a required-plugins screen for a plugin they
     // just installed.
+    setPluginRequirementsKnown(true);
     setPluginRequirementsSatisfied(complete);
     if (!complete) {
       requirementsWereUnmet.current = true;
@@ -252,13 +262,31 @@ var Wizard = function Wizard(_ref2, ref) {
     }
   };
   if (!pluginRequirementsSatisfied) {
-    headerText = requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin');
+    if (pluginRequirementsKnown) {
+      headerText = requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin');
+    }
     displayedSections = [{
       path: '/',
       render: function render() {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
-          plugins: requiredPlugins,
-          onStatus: onPluginStatus
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [!pluginRequirementsKnown && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-wizard__loader",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+              alignment: "center",
+              spacing: 2,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+                noMargin: true
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+                children: (0, _i18n.__)('Fetching…', 'newspack-plugin')
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            hidden: !pluginRequirementsKnown,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
+              plugins: requiredPlugins,
+              onStatus: onPluginStatus
+            })
+          })]
         });
       }
     }];
@@ -322,6 +350,7 @@ var Wizard = function Wizard(_ref2, ref) {
                   primaryAction: sectionPrimaryAction || section.primaryAction,
                   secondaryAction: sectionSecondaryAction || section.secondaryAction,
                   heading: 2,
+                  size: sectionSize || section.size,
                   noMargin: true
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionComponent, _objectSpread(_objectSpread(_objectSpread({}, routerProps), sectionProps), sharedProps))]
               });

package/dist/cjs/wizard/store/index.js

@@ -261,6 +261,28 @@ var store = (0, _data.createReduxStore)(WIZARD_STORE_NAMESPACE, {
     })
   }
 });
+
+/**
+ * Register the wizard store, unless it already exists.
+ *
+ * This package is bundled separately into each consuming plugin, so more than one
+ * bundle can call this on the same page (e.g. the block editor loads assets from
+ * both newspack-blocks and newspack-manager). @wordpress/data keeps a single
+ * registry on `wp.data`, so the second call is a no-op that logs
+ * `Store "newspack/wizards" is already registered.` — guard it instead.
+ *
+ * The first bundle to register wins, and it is not necessarily the newest one:
+ * consumers rebuild on their own schedules, so an older copy of this package can
+ * get there first and leave newer selectors missing. That is worth knowing about
+ * while developing, so keep the breadcrumb outside production builds.
+ */
 var _default = exports["default"] = function _default() {
-  return (0, _data.register)(store);
+  if ((0, _data.select)(WIZARD_STORE_NAMESPACE)) {
+    if ('production' !== process.env.NODE_ENV) {
+      // eslint-disable-next-line no-console
+      console.warn("Wizard store: \"".concat(WIZARD_STORE_NAMESPACE, "\" is already registered, so this copy of newspack-components was ignored. Two bundles of the package are on this page and the first one to load wins."));
+    }
+    return;
+  }
+  (0, _data.register)(store);
 };

package/dist/esm/_mixins.scss

@@ -0,0 +1,13 @@
+@use "../../colors/colors.module" as colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+@mixin text-muted {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	color: var( --wpds-color-foreground-content-neutral-weak, #{wp-colors.$gray-700} );
+}
+
+@mixin wpds-focus-ring {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	outline: var( --wpds-border-width-focus, var( --wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) ) solid var( --wpds-color-stroke-focus, var( --wp-admin-theme-color, #{colors.$primary-600} ) );
+}

package/dist/esm/_variables.scss

@@ -0,0 +1,12 @@
+/**
+ * SCSS Variables.
+ *
+ * The steps this package needs above the @wordpress/base-styles scale. Please
+ * reach for a base-styles variable first, and only add here when there is no
+ * counterpart and you're pretty sure the value will be reused in many places.
+ * It's purely for UI. Don't add component-specific values, which belong in that
+ * component's own stylesheet.
+ */
+
+$font-size-3x-large: 48px;
+$font-line-height-3x-large: 1.125;

package/dist/esm/action-card/index.js

@@ -13,6 +13,7 @@ import { Draggable, ExternalLink, ToggleControl } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, check, chevronDown, chevronUp, dragHandle } from '@wordpress/icons';
+import { Badge } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -32,8 +33,7 @@ import classnames from 'classnames';
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var ActionCard = function ActionCard(_ref) {
-  var badge = _ref.badge,
-    badgeLevel = _ref.badgeLevel,
+  var badges = _ref.badges,
     className = _ref.className,
     checkbox = _ref.checkbox,
     children = _ref.children,
@@ -86,6 +86,13 @@ var ActionCard = function ActionCard(_ref) {
     dragIndex = _ref.dragIndex,
     dragWrapperRef = _ref.dragWrapperRef,
     onDragCallback = _ref.onDragCallback;
+  // A badge with no label paints an empty pill, since the library Badge styles its
+  // wrapper rather than its text. Callers derive labels from data that can be absent
+  // (a gateway with no connection status, an unmapped placement), so drop those here
+  // rather than asking every caller to guard its own array.
+  var visibleBadges = (badges || []).filter(function (badge) {
+    return badge === null || badge === void 0 ? void 0 : badge.label;
+  });
   var _useState = useState(Boolean(isExpanded)),
     _useState2 = _slicedToArray(_useState, 2),
     expanded = _useState2[0],
@@ -133,7 +140,6 @@ var ActionCard = function ActionCard(_ref) {
   var togglePositionClass = togglePosition === 'trailing' ? 'is-toggle-trailing' : 'is-toggle-leading';
   var hasInternalLink = href && href.indexOf('http') !== 0;
   var isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
-  var badges = !Array.isArray(badge) && badge ? [badge] : badge;
   var HeadingTag = "h".concat(heading);
   var cardContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
@@ -180,10 +186,12 @@ var ActionCard = function ActionCard(_ref) {
                 },
                 children: title
               }), !titleLink && !expandable && title]
-            })), (badges === null || badges === void 0 ? void 0 : badges.length) && badges.map(function (badgeText, i) {
-              return /*#__PURE__*/_jsx("span", {
-                className: "newspack-action-card__badge newspack-action-card__badge-level-".concat(badgeLevel),
-                children: badgeText
+            })), visibleBadges.map(function (_ref2, i) {
+              var label = _ref2.label,
+                intent = _ref2.intent;
+              return /*#__PURE__*/_jsx(Badge, {
+                intent: intent !== null && intent !== void 0 ? intent : 'none',
+                children: label
               }, "badge-".concat(i));
             })]
           }), description && /*#__PURE__*/_jsxs("p", {
@@ -316,9 +324,9 @@ var ActionCard = function ActionCard(_ref) {
         onDragStart: handleDragStart,
         onDragEnd: handleDragEnd,
         onDragOver: handleDragOver,
-        children: function children(_ref2) {
-          var onDraggableStart = _ref2.onDraggableStart,
-            onDraggableEnd = _ref2.onDraggableEnd;
+        children: function children(_ref3) {
+          var onDraggableStart = _ref3.onDraggableStart,
+            onDraggableEnd = _ref3.onDraggableEnd;
           return /*#__PURE__*/_jsxs(Card, {
             className: classes,
             onClick: simple && onClick,

package/dist/esm/action-card/index.test.js

@@ -0,0 +1,89 @@
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import ActionCard from './index';
+
+/**
+ * The library Badge styles its wrapper rather than its text, so a badge with no label
+ * paints a bare coloured pill. Callers build the `badges` array from data that can be
+ * absent — a payment gateway reports no connection status until it is enabled, a prompt
+ * can sit on a placement with no entry in the placement map — and an array literal is
+ * always non-empty, so the component has to drop those itself.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('ActionCard badges', function () {
+  var badgeText = function badgeText() {
+    return screen.queryAllByText(function (_, node) {
+      return /__badge/.test((node === null || node === void 0 ? void 0 : node.className) || '');
+    });
+  };
+  it('renders a badge that has a label', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Stripe",
+      badges: [{
+        label: 'Connected',
+        intent: 'stable'
+      }]
+    }));
+    expect(screen.getByText('Connected')).toBeInTheDocument();
+  });
+  it('renders no badge when the label is null', function () {
+    var _render = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Stripe",
+        badges: [{
+          label: null,
+          intent: 'informational'
+        }]
+      })),
+      container = _render.container;
+    expect(container.querySelectorAll('[class*="__badge"]')).toHaveLength(0);
+  });
+  it('renders no badge when the label is undefined or empty', function () {
+    var _render2 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Stripe",
+        badges: [{
+          label: undefined
+        }, {
+          label: ''
+        }]
+      })),
+      container = _render2.container;
+    expect(container.querySelectorAll('[class*="__badge"]')).toHaveLength(0);
+  });
+  it('keeps the labelled badges and drops only the empty ones', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Plans",
+      badges: [{
+        label: 'Premium'
+      }, {
+        label: null
+      }, {
+        label: 'Archived',
+        intent: 'draft'
+      }]
+    }));
+    expect(screen.getByText('Premium')).toBeInTheDocument();
+    expect(screen.getByText('Archived')).toBeInTheDocument();
+    expect(badgeText()).toHaveLength(2);
+  });
+  it('renders nothing for an absent or empty badges prop', function () {
+    var _render3 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Stripe"
+      })),
+      withoutProp = _render3.container;
+    expect(withoutProp.querySelectorAll('[class*="__badge"]')).toHaveLength(0);
+    var _render4 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Stripe",
+        badges: []
+      })),
+      withEmptyArray = _render4.container;
+    expect(withEmptyArray.querySelectorAll('[class*="__badge"]')).toHaveLength(0);
+    // An empty array used to fall through as a literal `0` in the heading.
+    expect(withEmptyArray.textContent).not.toContain('0');
+  });
+});

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

@@ -4,6 +4,7 @@
 
 @use "sass:color";
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-card.newspack-action-card {
 	padding: 0;
@@ -196,11 +197,7 @@
 		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
-		margin-right: -8px;
-
-		.newspack-action-card__title {
-			margin-right: 8px;
-		}
+		gap: wp-vars.$grid-unit-10;
 
 		a {
 			color: inherit;
@@ -372,41 +369,6 @@
 		margin: 0;
 	}
 
-	/* Badge */
-	.newspack-action-card__badge {
-		background: wp-colors.$gray-100;
-		border-radius: 2px;
-		color: wp-colors.$gray-900;
-		display: block;
-		flex: 0 0 auto;
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 1.333;
-		margin: 0 8px 0 0;
-		padding: 2px 4px;
-
-		&.newspack-action-card__badge-level-warning {
-			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-yellow);
-			color: color-mix(in srgb, #000 50%, wp-colors.$alert-yellow);
-		}
-		&.newspack-action-card__badge-level-error {
-			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-red);
-			color: color-mix(in srgb, #000 50%, wp-colors.$alert-red);
-		}
-		&.newspack-action-card__badge-level-success {
-			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-green);
-			color: color-mix(in srgb, #000 50%, wp-colors.$alert-green);
-		}
-		&.newspack-action-card__badge-level-brand {
-			background-color: color-mix(in srgb, #fff 90%, var(--wp-admin-theme-color));
-			color: color-mix(in srgb, #000 50%, var(--wp-admin-theme-color));
-		}
-
-		+ .newspack-action-card__badge {
-			margin-left: -4px;
-		}
-	}
-
 	/* Description Card */
 	&.newspack-description-card {
 		font-style: italic;

package/dist/esm/button/index.js

@@ -15,7 +15,7 @@ function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try {
  * WordPress dependencies.
  */
 import { Button as BaseComponent } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { forwardRef, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,7 +29,7 @@ var useHistory = Router.useHistory;
 var isJavascriptHref = function isJavascriptHref(href) {
   return 'string' === typeof href && href.replace(/[\u0000-\u0020]/g, '').toLowerCase().startsWith('javascript:');
 };
-var Button = function Button(_ref) {
+var Button = forwardRef(function (_ref, ref) {
   var href = _ref.href,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? undefined : _ref$loading,
@@ -84,9 +84,14 @@ var Button = function Button(_ref) {
   if (isAwaitingOnClick) {
     otherProps.disabled = true;
   }
+  // `loading` is this component's own prop name; @wordpress/components' Button
+  // expresses the same state as `isBusy`. Forwarding `loading` verbatim would
+  // land it on the DOM node, which React rejects as a non-boolean attribute.
   // @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
   return /*#__PURE__*/_jsx(BaseComponent, _objectSpread({
-    loading: loading ? true : undefined
+    ref: ref,
+    isBusy: loading ? true : undefined
   }, otherProps));
-};
+});
+Button.displayName = 'Button';
 export default Button;

package/dist/esm/button/index.test.js

@@ -7,6 +7,11 @@ function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try {
 import { act, render, screen } from '@testing-library/react';
 import { MemoryRouter, useHistory } from 'react-router-dom';
 
+/**
+ * WordPress dependencies.
+ */
+import { createRef } from '@wordpress/element';
+
 /**
  * Internal dependencies.
  */
@@ -44,6 +49,18 @@ var clickButton = /*#__PURE__*/function () {
     return _ref2.apply(this, arguments);
   };
 }();
+
+// React formats its warnings with `%s` placeholders and passes the values as
+// further arguments, so assert against the whole call rather than one argument.
+var messagesFrom = function messagesFrom(spy) {
+  return spy.mock.calls.flat().join(' ');
+};
+
+// A failing assertion skips any `mockRestore()` left after it, which would leave
+// the console swallowed for every later test in the file.
+afterEach(function () {
+  jest.restoreAllMocks();
+});
 describe('Button href with onClick', function () {
   it('awaits the onClick, then pushes the route', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
     var historyRef, onClick;
@@ -234,7 +251,6 @@ describe('Button href with onClick outside a router', function () {
           })));
         case 1:
           expect(warn).toHaveBeenCalledWith(expect.stringContaining('javascript:'));
-          warn.mockRestore();
         case 2:
           return _context10.a(2);
       }
@@ -246,22 +262,21 @@ describe('Button with a javascript: href alone', function () {
     return screen.getByText('Save').closest('a');
   };
   it('renders no link', function () {
-    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    // Silenced only; the assertion below is about the markup, not the warning.
+    jest.spyOn(console, 'warn').mockImplementation(function () {});
     render(/*#__PURE__*/_jsx(Button, {
       href: "JavaScript:alert(1)",
       children: "Save"
     }));
     expect(link()).toBeNull();
-    warn.mockRestore();
   });
   it('sees through interleaved control characters', function () {
-    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    jest.spyOn(console, 'warn').mockImplementation(function () {});
     render(/*#__PURE__*/_jsx(Button, {
       href: 'java\nscript:alert(1)',
       children: "Save"
     }));
     expect(link()).toBeNull();
-    warn.mockRestore();
   });
   it('leaves an ordinary href alone', function () {
     render(/*#__PURE__*/_jsx(Button, {
@@ -270,4 +285,47 @@ describe('Button with a javascript: href alone', function () {
     }));
     expect(link()).toHaveAttribute('href', '/wp-admin/admin.php?page=next');
   });
+});
+describe('Button loading prop', function () {
+  var button = function button() {
+    return screen.getByRole('button', {
+      name: 'Save'
+    });
+  };
+  it('renders the core busy state without putting `loading` on the DOM node', function () {
+    var error = jest.spyOn(console, 'error').mockImplementation(function () {});
+    var _render = render(/*#__PURE__*/_jsx(Button, {
+        children: "Save"
+      })),
+      rerender = _render.rerender;
+    expect(button()).not.toHaveClass('is-busy');
+    rerender(/*#__PURE__*/_jsx(Button, {
+      loading: true,
+      children: "Save"
+    }));
+    expect(button()).toHaveClass('is-busy');
+    // React drops an unknown boolean-valued attribute instead of writing it, so
+    // the warning rather than the absent attribute is what a revert trips. It is
+    // also deduped per property name for the life of the module registry, which
+    // is why this names the message instead of asserting no errors at all.
+    expect(messagesFrom(error)).not.toContain('non-boolean attribute');
+  });
+});
+
+// core's Button wraps itself in a Tooltip when it is given a `label`, and the
+// Tooltip needs a ref on its child. Two call sites do that with this Button:
+// the experimental-tools back button and the audience segment-group heading.
+describe('Button ref', function () {
+  it('forwards the ref to the rendered button', function () {
+    var error = jest.spyOn(console, 'error').mockImplementation(function () {});
+    var ref = createRef();
+    render(/*#__PURE__*/_jsx(Button, {
+      ref: ref,
+      children: "Save"
+    }));
+    expect(ref.current).toBe(screen.getByRole('button', {
+      name: 'Save'
+    }));
+    expect(messagesFrom(error)).not.toContain('Function components cannot be given refs');
+  });
 });

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

@@ -137,7 +137,6 @@ var CoreCard = function CoreCard(_ref) {
       }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && actionType === 'toggle' && /*#__PURE__*/_jsx(ToggleControl, {
         className: "newspack-card--core__action",
         label: otherProps.title,
-        hideLabelFromVision: true,
         checked: isActive,
         onChange: onToggle
       }), header && /*#__PURE__*/_jsx("div", {
@@ -151,7 +150,6 @@ var CoreCard = function CoreCard(_ref) {
       }), !(actions !== null && actions !== void 0 && actions.length) > 0 && actionType === 'toggle' && /*#__PURE__*/_jsx(ToggleControl, {
         className: "newspack-card--core__action",
         label: otherProps.title,
-        hideLabelFromVision: true,
         checked: isActive,
         onChange: onToggle
       }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/_jsx(DropdownMenu, {

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

@@ -4,7 +4,6 @@
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
-@use "../../../colors/colors.module" as colors;
 
 .newspack-card--core,
 .newspack-wizard .newspack-card--core {
@@ -45,7 +44,13 @@
 		}
 		.newspack-card--core {
 			&__header-content {
-				* {
+				h1,
+				h2,
+				h3,
+				h4,
+				h5,
+				h6,
+				p {
 					line-height: wp-vars.$font-line-height-small;
 				}
 			}
@@ -210,9 +215,6 @@
 					text-decoration: underline;
 				}
 			}
-			.newspack-badge {
-				font-weight: 400;
-			}
 		}
 	}
 	&__is-selectable {