newspack-components 4.9.2 → 4.10.0-alpha.1

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# newspack-components [4.10.0-alpha.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.9.2...newspack-components@4.10.0-alpha.1) (2026-10-02)
+
+
+### Bug Fixes
+
+* **components:** reduce admin vertical spacing from 64px to 48px ([#1148](https://github.com/Automattic/newspack-workspace/issues/1148)) ([cc58352](https://github.com/Automattic/newspack-workspace/commit/cc5835298f73cbdea5f94891530b8a4298118679))
+* **components:** reduce the Divider's default margin to 48px ([#1147](https://github.com/Automattic/newspack-workspace/issues/1147)) ([6dda86f](https://github.com/Automattic/newspack-workspace/commit/6dda86fe3866761c00491bdda50e4b4475eaebd2))
+* **content-gate:** tidy the gate card and name its actions menu ([#1161](https://github.com/Automattic/newspack-workspace/issues/1161)) ([d76a562](https://github.com/Automattic/newspack-workspace/commit/d76a562c8bf8063e0fd609c75d3b9f68625c9c76))
+
+
+### Features
+
+* **audience:** refresh the Integrations brand marks ([#1155](https://github.com/Automattic/newspack-workspace/issues/1155)) ([d46ef08](https://github.com/Automattic/newspack-workspace/commit/d46ef0853a766967a2a121b34719f2e5822006f9))
+* **audience:** refresh the Integrations screen icons, order and copy ([#1151](https://github.com/Automattic/newspack-workspace/issues/1151)) ([99912ba](https://github.com/Automattic/newspack-workspace/commit/99912ba739a4f05c86964b88abea263f456a411f))
+* **components:** update @wordpress/ui and match its card borders ([#1195](https://github.com/Automattic/newspack-workspace/issues/1195)) ([9b62fe7](https://github.com/Automattic/newspack-workspace/commit/9b62fe7b69d824616ca931069c3a32738517d365))
+* **dashboard:** remove the brand header ([#1142](https://github.com/Automattic/newspack-workspace/issues/1142)) ([c9f3d16](https://github.com/Automattic/newspack-workspace/commit/c9f3d16b6ee723b5fecf7863370ab6a711511485))
+* **reader-activation:** split Gravity Forms into its own integration ([#1170](https://github.com/Automattic/newspack-workspace/issues/1170)) ([c74c13d](https://github.com/Automattic/newspack-workspace/commit/c74c13d2fc36813ff31ec8d842063e139b1bce19))
+* **settings:** add an empty state to the Print tab ([#1123](https://github.com/Automattic/newspack-workspace/issues/1123)) ([04bbd0b](https://github.com/Automattic/newspack-workspace/commit/04bbd0b99f2e62174273642b64d01116988139a5))
+* **settings:** rework the Experimental Tools configure screens ([#1140](https://github.com/Automattic/newspack-workspace/issues/1140)) ([8aad58b](https://github.com/Automattic/newspack-workspace/commit/8aad58bf4f56a99cbeee92c96b9b41f0a5529058))
+* **settings:** rework the Theme and Brand tab layout ([#1136](https://github.com/Automattic/newspack-workspace/issues/1136)) ([0f54f67](https://github.com/Automattic/newspack-workspace/commit/0f54f671b97aa758b0cfe1d0a6d1a3918c90a4c2))
+* **sync:** read the push log in a sync activity tab ([#1114](https://github.com/Automattic/newspack-workspace/issues/1114)) ([9390fdc](https://github.com/Automattic/newspack-workspace/commit/9390fdc884a9f31d31d1dbd1fbc1f61944dbc3cd))
+
+
+### Dependencies
+
+* **newspack-icons:** upgraded to 1.2.0-alpha.1
+* **newspack-scripts:** upgraded to 5.12.0-alpha.1
+
 ## newspack-components [4.9.2](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.9.1...newspack-components@4.9.2) (2026-09-28)
 
 

package/DEVELOPMENT.md

@@ -68,18 +68,17 @@ Follow this step-by-step process when selecting a component:
 
 ## Design & layout at a glance
 
-When building a screen, use the **spacing scale** (8px unit: 16, 24, 32, 48, 64) and prefer **VStack** for vertical stacks and **HStack** for related items in a row; use **Grid** for real multi-column layouts. Structure content as **SectionHeader → Card → ActionCard → controls**, with **Divider** between sections and primary actions in **`.newspack-buttons-card`**. Use the same **breakpoints** (e.g. 744px, 1128px) as existing components. Full detail: [Spacing scale](#spacing-scale-design-system), [Layout (HStack / VStack / Grid)](#layout-when-to-use-hstack-vstack-grid), [Responsive breakpoints](#responsive-breakpoints), [Visual hierarchy patterns](#visual-hierarchy-patterns), [Component states](#component-states). For code examples by context and wizard patterns, see [Usage](#usage).
+When building a screen, use the **spacing scale** (8px unit: 16, 24, 32, 48, 64) and prefer **VStack** for vertical stacks and **HStack** for related items in a row; use **Grid** for real multi-column layouts. Structure content as **SectionHeader → Card → ActionCard → controls**, with **Divider** between sections and primary actions in **`.newspack-buttons-card`**. Use the same **breakpoints** (e.g. 744px, 1054px) as existing components. Full detail: [Spacing scale](#spacing-scale-design-system), [Layout (HStack / VStack / Grid)](#layout-when-to-use-hstack-vstack-grid), [Responsive breakpoints](#responsive-breakpoints), [Visual hierarchy patterns](#visual-hierarchy-patterns), [Component states](#component-states). For code examples by context and wizard patterns, see [Usage](#usage).
 
 ## Available Components
 
 ### Layout Components
 
-- **`BoxContrast`** – High-contrast content box for emphasis.
 - **`Card`** – Container for a logical block of content; use for grouping related settings. Default vertical margin is 32px so cards stack with consistent rhythm. Use `noBorder` when cards sit inside another card (e.g. ActionCard children).
-- **`Divider`** – Use between logical sections (e.g. between ActionCards) to separate content without another card. Margins are 32px (64px at larger breakpoints) so spacing stays consistent with the rest of the layout.
+- **`Divider`** – Use between logical sections (e.g. between ActionCards) to separate content without another card. Margins are 32px (48px at larger breakpoints) so spacing stays consistent with the rest of the layout.
 - **`EmptyState`** – Use when a list has nothing in it yet, or an onboarding view stands in for a feature that is not set up. Compound: `EmptyState.Root` wraps `EmptyState.Header` and `EmptyState.Actions`. Render it only when the *unfiltered* collection is empty, so a search matching nothing keeps the DataViews "no results" treatment. See [src/empty-state/README.md](src/empty-state/README.md).
-- **`Grid`** – Use for laying out several items in columns (e.g. multiple controls or cards). Default gap is 32px; use `columns` and `gutter` modifiers (8, 16, 24, 32) when you need tighter or looser spacing. For a single row or a simple vertical stack, prefer **VStack** (or HStack) in new code; Grid is still used that way in many places and is fine to leave as-is until we refactor.
-- **`SectionHeader`** – Use to start a new section; pair with a short description so the section’s goal is clear. Top margin (64px) and bottom (32px) create clear separation from previous content and the section body.
+- **`Grid`** – Use for laying out several items in columns (e.g. multiple controls or cards). Default gap is 32px; use `columns` and `gutter` modifiers (8, 16, 24, 32, 48) when you need tighter or looser spacing. For a single row or a simple vertical stack, prefer **VStack** (or HStack) in new code; Grid is still used that way in many places and is fine to leave as-is until we refactor.
+- **`SectionHeader`** – Use to start a new section; pair with a short description so the section’s goal is clear. Top margin (48px) and bottom (32px) create clear separation from previous content and the section body.
 - **`StatCard`** – Use for a single headline figure with a label above it and a description below. Compound: `StatCard.Root` wraps `Label`, `Body` (holding `Value` and an optional `Secondary`) and `Footer`, with `Delta` riding in the `Value`'s `suffix` for a change beside the figure. Format the figure yourself and pass a string; a `null`, `undefined` or blank `value` gets the shared null glyph rather than a misleading zero. The figure is sized by a container query, so give the cards a definite width (a Grid track, a `flex: 1` item) and equal widths across a row to keep one type scale. See [src/stat-card/README.md](src/stat-card/README.md).
 
 ### Form Components
@@ -387,7 +386,6 @@ function Dashboard() {
 				sections={ sections }
 				renderAboveSections={ () => (
 					<>
-						<BrandHeader />
 						<SiteStatuses />
 					</>
 				) }
@@ -624,8 +622,8 @@ Spacing is based on an **8px unit**. Use these values so new styles match existi
 | **16px** | Gaps between related controls, buttons card gap, margins inside ActionCard region-children for Card/Grid/TextControl | Related items, form rows |
 | **24px** | Default ActionCard region padding, toggle/region gaps, expandable content padding and sibling spacing | Default internal padding and gaps within a card |
 | **32px** | Card vertical margin, Grid default gap and margin, SectionHeader first-child top, Newspack Notice margin, Divider margin | Section rhythm, between blocks |
-| **48px** | SectionHeader container margin-top, Card horizontal padding (small screens) | Section separation |
-| **64px** | SectionHeader top margin, Divider margins (large breakpoint), buttons card margin, Card horizontal padding (large screens) | Major section separation |
+| **48px** | SectionHeader top margin, buttons card top margin, Divider margins (large breakpoint), Card horizontal padding (small screens) | Major section separation |
+| **64px** | Card horizontal padding (large screens) | Large-screen card padding |
 
 **In code:** Card uses `margin: 32px 0` and `padding: 16px 48px` (32px 64px at 744px+). ActionCard uses 24px for region padding and 24px between regions; region-children use `padding: 0 24px 24px` (0 32px 32px for is-medium). Grid uses `grid-gap: 32px` and `margin: 32px 0` by default, with optional gutter classes (`__gutter-8`, `__gutter-16`, etc.). When adding new components or overrides, prefer these values (or 8px multiples) instead of ad-hoc spacing.
 
@@ -645,10 +643,11 @@ Components use consistent breakpoints so layouts behave predictably across viewp
 |------------|-------------|
 | **600px** | Narrow viewport overrides (e.g. wizard layout) |
 | **744px** | Card padding, ActionCard region layout (title + toggle side-by-side), Grid columns (2–3), modal, withWizardScreen layout |
-| **783px** | Wizard content width, Divider full margin |
+| **782px** | Divider full margin (`wp-mixins.break-medium`) |
+| **783px** | Wizard content width |
 | **960px** | Modal width, wizard layout |
 | **961px** | Wizard layout |
-| **1128px** | Grid 3–4 columns |
+| **1054px** | Grid 3–4 columns |
 | **1224px** | Large wizard layout |
 
 Prefer these values over new breakpoints so behaviour stays consistent with Card, Grid, and wizard shells.
@@ -661,14 +660,14 @@ Common composition patterns keep screens predictable. Use these as a reference w
 ```
 Wizard
   GlobalNotices
-  SectionHeader          ← 64px top margin
+  SectionHeader          ← 48px top margin
   Card                   ← 32px margin
     ActionCard            ← 24px padding, optional toggle
       Grid or VStack      ← 32px gap
         TextControl / SelectControl / etc.
-    Divider              ← 32px / 64px margin
+    Divider              ← 32px / 48px margin
     ActionCard
-  .newspack-buttons-card  ← 64px margin, 16px gap
+  .newspack-buttons-card  ← 48px top / 32px bottom margin, 16px gap
     Button (primary)
 ```
 
@@ -804,7 +803,7 @@ import './style.scss';
  */
 import classNames from 'classnames';
 
-const Divider = ( { alignment = 'none', className = undefined, marginBottom = 64, marginTop = 64, variant = 'default', ...otherProps } ) => {
+const Divider = ( { alignment = 'none', className = undefined, marginBottom = 48, marginTop = 48, variant = 'default', ...otherProps } ) => {
 	const classes = classNames(
 		'newspack-divider',
 		className,

package/dist/cjs/_mixins.scss

@@ -3,11 +3,9 @@
 @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/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", "iconElement", "iconBackgroundColor", "isActive", "isDraggable", "isFirstTarget", "isLastTarget", "isNarrow", "isSelectable", "isSmall", "isVertical", "size", "dragIndex", "onDragCallback", "onToggle", "onHeaderClick", "noBorder", "noMargin", "children", "hasGreyHeader", "hasHeaderBorder"];
+var _excluded = ["actions", "actionsLabel", "actionType", "as", "buttonsCard", "className", "footer", "header", "headerAction", "headerStyle", "childrenStyle", "footerStyle", "disabled", "icon", "iconElement", "iconBackgroundColor", "isActive", "isDraggable", "isFirstTarget", "isLastTarget", "isNarrow", "isSelectable", "isSmall", "isVertical", "size", "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
@@ -31,6 +31,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 var CoreCard = function CoreCard(_ref) {
   var actions = _ref.actions,
+    actionsLabel = _ref.actionsLabel,
     actionType = _ref.actionType,
     as = _ref.as,
     buttonsCard = _ref.buttonsCard,
@@ -69,7 +70,7 @@ var CoreCard = function CoreCard(_ref) {
     hasHeaderBorder = _ref$hasHeaderBorder === void 0 ? true : _ref$hasHeaderBorder,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var bodySize = isSmall ? undefined : size;
-  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', isSelectable && 'newspack-card--core__is-selectable', bodySize === 'large' && 'newspack-card--core__is-large', isVertical && 'newspack-card--core__is-vertical', (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 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', isSelectable && 'newspack-card--core__is-selectable', bodySize === 'large' && 'newspack-card--core__is-large', isVertical && 'newspack-card--core__is-vertical', (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', (noBorder || otherProps.isBorderless) && 'newspack-card--core__no-border', hasGreyHeader && 'newspack-card--core__has-grey-header');
   var sizeProps = isSmall ? 'small' : size;
   if (buttonsCard || as === 'a') {
     if (!isSmall) {
@@ -158,7 +159,7 @@ var CoreCard = function CoreCard(_ref) {
         onChange: onToggle
       }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
         icon: _icons.moreVertical,
-        label: (0, _i18n.__)('More', 'newspack-plugin'),
+        label: actionsLabel || (0, _i18n.__)('More actions', 'newspack-plugin'),
         children: function children() {
           return actions.map(function (action, index) {
             // Actions can be an array of sub-actions, which are rendered within a MenuGroup.
@@ -169,6 +170,7 @@ var CoreCard = function CoreCard(_ref) {
                     icon: subAction.icon,
                     onClick: subAction.action,
                     href: subAction.href,
+                    "aria-label": subAction.ariaLabel,
                     disabled: subAction.disabled || false,
                     isDestructive: subAction.destructive || false,
                     children: subAction.label
@@ -180,6 +182,7 @@ var CoreCard = function CoreCard(_ref) {
               icon: action.icon,
               onClick: action.action,
               href: action.href,
+              "aria-label": action.ariaLabel,
               disabled: action.disabled || false,
               isDestructive: action.destructive || false,
               children: action.label

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

@@ -1,17 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("@testing-library/react");
 var _coreCard = _interopRequireDefault(require("./core-card"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); } /**
  * External dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies.
  */
-
 var getHeader = function getHeader(container) {
   return container.querySelector('.newspack-card--core__header');
 };
@@ -57,6 +56,59 @@ describe('CoreCard', function () {
       container = _render4.container;
     expect(getHeader(container).tagName).not.toBe('BUTTON');
   });
+  it('names the actions menu "More actions" by default', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+      header: "Settings",
+      actions: [{
+        label: 'Delete',
+        action: function action() {}
+      }]
+    }));
+    expect(_react.screen.getByRole('button', {
+      name: 'More actions'
+    })).toBeInTheDocument();
+  });
+  it('names the actions menu with actionsLabel when supplied', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+      header: "Settings",
+      actions: [{
+        label: 'Delete',
+        action: function action() {}
+      }],
+      actionsLabel: "Settings actions"
+    }));
+    expect(_react.screen.getByRole('button', {
+      name: 'Settings actions'
+    })).toBeInTheDocument();
+  });
+  it('gives a menu item its ariaLabel as the accessible name', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+            header: "Settings",
+            actions: [{
+              label: 'Delete',
+              ariaLabel: 'Delete: Settings',
+              action: function action() {}
+            }]
+          }));
+          _react.fireEvent.click(_react.screen.getByRole('button', {
+            name: 'More actions'
+          }));
+          _t = expect;
+          _context.n = 1;
+          return _react.screen.findByRole('menuitem', {
+            name: 'Delete: Settings'
+          });
+        case 1:
+          _t(_context.v).toBeInTheDocument();
+        case 2:
+          return _context.a(2);
+      }
+    }, _callee);
+  })));
   it('renders the header as a non-button when it is also draggable', function () {
     var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
         header: "Settings",
@@ -95,4 +147,23 @@ describe('CoreCard', function () {
       vertical = _render9.container;
     expect(vertical.querySelector('.newspack-card--core__is-vertical')).not.toBeNull();
   });
+  it('marks the card borderless only when noBorder or isBorderless is passed', function () {
+    var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+        header: "Settings"
+      })),
+      plain = _render0.container;
+    expect(plain.querySelector('.newspack-card--core__no-border')).toBeNull();
+    var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+        header: "Settings",
+        noBorder: true
+      })),
+      borderless = _render1.container;
+    expect(borderless.querySelector('.newspack-card--core__no-border')).not.toBeNull();
+    var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+        header: "Settings",
+        isBorderless: true
+      })),
+      coreBorderless = _render10.container;
+    expect(coreBorderless.querySelector('.newspack-card--core__no-border')).not.toBeNull();
+  });
 });

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

@@ -5,6 +5,15 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
 
+.newspack-card--core.components-card:where(:not(.newspack-card--core__no-border)) {
+	box-shadow: 0 0 0 1px var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
+}
+
+.newspack-card--core .newspack-card--core__header.components-card__header,
+.newspack-card--core .components-card__footer {
+	border-color: var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
+}
+
 .newspack-card--core,
 .newspack-wizard .newspack-card--core {
 	background: wp-colors.$white;
@@ -107,10 +116,10 @@
 		}
 		> .components-dropdown-menu {
 			aspect-ratio: 1;
-			border-left: 1px solid wp-colors.$gray-200;
+			border-left: 1px solid var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
 			display: grid;
 			height: 100%;
-			max-width: 50px;
+			max-width: 70px;
 			padding: 4px;
 			place-items: center;
 			position: absolute;
@@ -127,7 +136,7 @@
 		padding-left: 80px !important;
 		.newspack-card--core__header__draggable-controls {
 			align-items: center;
-			border-right: 1px solid wp-colors.$gray-200;
+			border-right: 1px solid var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
 			display: flex;
 			height: 100%;
 			justify-content: space-between;

package/dist/cjs/card/style.scss

@@ -3,10 +3,11 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-card {
 	border-radius: 2px;
-	border: 1px solid wp-colors.$gray-300;
+	border: 1px solid var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
 	color: wp-colors.$gray-900;
 	margin: 32px 0;
 	padding: 16px 48px;
@@ -101,10 +102,6 @@
 
 	// Margin
 
-	&.mt64 {
-		margin-top: 64px;
-	}
-
 	&.mt16 {
 		margin-top: 16px;
 	}
@@ -128,10 +125,10 @@
 		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
-		margin: 32px 0;
+		margin: wp-vars.$grid-unit-40 0;
 
 		@media screen and ( min-width: 744px ) {
-			margin: 64px 0;
+			margin: wp-vars.$grid-unit-60 0;
 		}
 	}
 

package/dist/cjs/card-feature/index.js

@@ -59,7 +59,8 @@ var _CardFeature = function CardFeature(_ref) {
   var describedById = requirements ? badgeId : undefined;
   var isMuted = !!requirements;
   var classes = (0, _classnames["default"])('newspack-card-feature', className, {
-    'newspack-card-feature--muted': isMuted
+    'newspack-card-feature--muted': isMuted,
+    'newspack-card-feature--not-enabled': !enabled
   });
   var badge;
   if (requirements) {

package/dist/cjs/card-feature/index.test.js

@@ -486,4 +486,17 @@ describe('CardFeature', function () {
     }));
     expect(container.querySelector('.newspack-card-feature--muted')).toBeInTheDocument();
   });
+  it('marks the card as not enabled only when enabled is false', function () {
+    var _render13 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting"
+      })),
+      container = _render13.container,
+      rerender = _render13.rerender;
+    expect(container.querySelector('.newspack-card-feature--not-enabled')).toBeInTheDocument();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      title: "Content gifting",
+      enabled: true
+    }));
+    expect(container.querySelector('.newspack-card-feature--not-enabled')).toBeNull();
+  });
 });

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

@@ -2,6 +2,7 @@
  * CardFeature
  */
 
+@use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/mixins" as wp-mixins;
 @use "~@wordpress/base-styles/variables" as wp-vars;
 @use "../mixins" as np-mixins;
@@ -9,6 +10,10 @@
 .newspack-card-feature {
 	height: 100%;
 
+	&.newspack-card-feature--not-enabled {
+		border-color: var( --wpds-color-stroke-surface-neutral-weak, #{wp-colors.$gray-100} );
+	}
+
 	&__actions {
 		margin-top: auto;
 

package/dist/cjs/color-picker/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
@@ -16,18 +17,14 @@ var _hooks = _interopRequireDefault(require("../hooks"));
 var _utils = _interopRequireDefault(require("../utils"));
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+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; } /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * External dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies.
  */
-
 (0, _colord.extend)([_a11y["default"]]);
 var InteractiveDiv = _utils["default"].InteractiveDiv;
 
@@ -40,6 +37,7 @@ var InteractiveDiv = _utils["default"].InteractiveDiv;
  * @param {string}             [props.color]     - Default color.
  * @param {Function}           props.onChange    - Function to call when the color changes.
  * @param {string}             [props.className] - Additional class name.
+ * @param {boolean}            [props.disabled]  - Whether the color is shown but cannot be changed.
  * @return {JSX.Element} ColorPicker component.
  */
 var _ColorPicker = function ColorPicker(_ref) {
@@ -48,21 +46,30 @@ var _ColorPicker = function ColorPicker(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? '#ffffff' : _ref$color,
     onChange = _ref.onChange,
-    className = _ref.className;
+    className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _useState = (0, _element.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isExpanded = _useState2[0],
     setIsExpanded = _useState2[1];
-  var ref = (0, _element.useRef)();
+  var ref = (0, _element.useRef)(undefined);
   var id = (0, _compose.useInstanceId)(_ColorPicker, 'newspack-color-picker');
   var labelId = "".concat(id, "-label");
   var colordColor = (0, _colord.colord)(color);
   _hooks["default"].useOnClickOutside(ref, function () {
     return setIsExpanded(false);
   });
+  (0, _element.useEffect)(function () {
+    if (disabled) {
+      setIsExpanded(false);
+    }
+  }, [disabled]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.BaseControl, {
     id: id,
-    className: (0, _classnames["default"])('newspack-color-picker', className),
+    className: (0, _classnames["default"])('newspack-color-picker', {
+      'is-disabled': disabled
+    }, className),
     help: help,
     __nextHasNoMarginBottom: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
@@ -73,19 +80,23 @@ var _ColorPicker = function ColorPicker(_ref) {
       "aria-labelledby": labelId,
       "aria-describedby": help ? "".concat(id, "__help") : undefined,
       "aria-expanded": isExpanded,
+      "aria-disabled": disabled || undefined,
+      tabIndex: disabled ? -1 : 0,
       className: 'newspack-color-picker__expander',
       onClick: function onClick() {
-        return setIsExpanded(!isExpanded);
+        return !disabled && setIsExpanded(!isExpanded);
       },
-      style: {
+      style: _objectSpread(_objectSpread({}, disabled && {
+        cursor: 'default'
+      }), {}, {
         backgroundColor: color,
         color: colordColor.contrast() > colordColor.contrast('#000000') ? '#ffffff' : '#000000'
-      },
+      }),
       children: color
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-color-picker__main",
       ref: ref,
-      children: isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorPicker, {
+      children: isExpanded && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorPicker, {
         color: color,
         onChange: onChange,
         enableAlpha: false

package/dist/cjs/color-picker/index.test.js

@@ -79,4 +79,51 @@ describe('ColorPicker', function () {
       getByRole = _render7.getByRole;
     expect(getByRole('button')).not.toHaveAttribute('aria-describedby');
   });
+  describe('when disabled', function () {
+    it('should not open on click', function () {
+      var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+          label: "Background color",
+          disabled: true,
+          onChange: function onChange() {}
+        })),
+        getByRole = _render8.getByRole;
+      var expander = getByRole('button');
+      _react.fireEvent.click(expander);
+      expect(expander).toHaveAttribute('aria-expanded', 'false');
+      expect(expander).toHaveAttribute('aria-disabled', 'true');
+    });
+    it('should not open on Enter', function () {
+      var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+          label: "Background color",
+          disabled: true,
+          onChange: function onChange() {}
+        })),
+        getByRole = _render9.getByRole;
+      var expander = getByRole('button');
+      _react.fireEvent.keyDown(expander, {
+        key: 'Enter',
+        keyCode: 13
+      });
+      expect(expander).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('should stay closed once re-enabled if it was open when disabled', function () {
+      var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+          label: "Background color",
+          onChange: function onChange() {}
+        })),
+        getByRole = _render0.getByRole,
+        rerender = _render0.rerender;
+      _react.fireEvent.click(getByRole('button'));
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Background color",
+        disabled: true,
+        onChange: function onChange() {}
+      }));
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Background color",
+        onChange: function onChange() {}
+      }));
+      expect(getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
 });

package/dist/cjs/color-picker/style.scss

@@ -8,25 +8,28 @@
 .newspack-color-picker {
 	position: relative;
 	&__expander {
-		box-shadow: inset 0 0 0 1px rgba(wp-colors.$black, 0.54);
-		border-radius: wp-vars.$radius-small;
-		height: wp-vars.$grid-unit-80;
-		padding: wp-vars.$grid-unit-10;
-		text-align: right;
+		box-shadow: inset 0 0 0 var(--wpds-border-width-xs, #{wp-vars.$border-width}) rgba(wp-colors.$black, 0.54);
+		border-radius: var(--wpds-border-radius-sm, #{wp-vars.$radius-small});
+		height: var(--wpds-dimension-size-lg, #{wp-vars.$grid-unit-50});
+		line-height: calc(var(--wpds-dimension-size-lg, #{wp-vars.$grid-unit-50}) - var(--wpds-dimension-padding-md, #{wp-vars.$grid-unit-15}));
+		padding: calc(var(--wpds-dimension-padding-md, #{wp-vars.$grid-unit-15}) / 2) var(--wpds-dimension-padding-md, #{wp-vars.$grid-unit-15});
 		text-transform: uppercase;
 
 		&:focus-visible {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-color: wp-colors.$white;
+			box-shadow: 0 0 0 var(--wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback}) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color));
 		}
 	}
 
+	&.is-disabled &__expander {
+		opacity: 0.5;
+	}
+
 	&__main {
-		background: wp-colors.$white;
+		background: var(--wpds-color-background-surface-neutral-strong, #{wp-colors.$white});
 		box-shadow: wp-vars.$elevation-small;
-		margin: wp-vars.$grid-unit-10 0 0;
+		margin: var(--wpds-dimension-gap-sm, #{wp-vars.$grid-unit-10}) 0 0;
 		position: absolute;
-		z-index: 2;
+		z-index: 3;
 
 		&:empty {
 			display: none;

package/dist/cjs/debug-badge/style.scss

@@ -10,7 +10,7 @@
 	background: np-colors.$primary-600;
 	border-radius: wp-vars.$radius-round;
 	bottom: 0;
-	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	box-shadow: wp-vars.$elevation-small;
 	display: grid;
 	height: wp-vars.$button-size;
 	margin: 0 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;

package/dist/cjs/divider/index.js

@@ -41,9 +41,9 @@ var Divider = function Divider(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className,
     _ref$marginBottom = _ref.marginBottom,
-    marginBottom = _ref$marginBottom === void 0 ? 64 : _ref$marginBottom,
+    marginBottom = _ref$marginBottom === void 0 ? 48 : _ref$marginBottom,
     _ref$marginTop = _ref.marginTop,
-    marginTop = _ref$marginTop === void 0 ? 64 : _ref$marginTop,
+    marginTop = _ref$marginTop === void 0 ? 48 : _ref$marginTop,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);