newspack-components 4.9.2 → 4.10.0-alpha.1

package/dist/cjs/divider/style.scss

@@ -3,21 +3,23 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-divider {
 	background: transparent;
 	border: 0;
 	display: block;
 	height: 1px;
-	margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
+	margin-bottom: min(#{wp-vars.$grid-unit-40}, var(--divider-margin-bottom, #{wp-vars.$grid-unit-60}));
 	margin-left: 0;
 	margin-right: 0;
-	margin-top: min(32px, var(--divider-margin-top, 64px));
+	margin-top: min(#{wp-vars.$grid-unit-40}, var(--divider-margin-top, #{wp-vars.$grid-unit-60}));
 	padding: 0;
 
-	@media screen and (min-width: 783px) {
-		margin-bottom: var(--divider-margin-bottom, 64px);
-		margin-top: var(--divider-margin-top, 64px);
+	@include wp-mixins.break-medium {
+		margin-bottom: var(--divider-margin-bottom, #{wp-vars.$grid-unit-60});
+		margin-top: var(--divider-margin-top, #{wp-vars.$grid-unit-60});
 	}
 
 	// Alignment

package/dist/cjs/grid/style.scss

@@ -3,6 +3,7 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-grid {
 	display: grid;
@@ -41,9 +42,9 @@
 		grid-gap: 32px;
 	}
 
-	// Gutter 64
-	&__gutter-64 {
-		grid-gap: 64px;
+	// Gutter 48
+	&__gutter-48 {
+		grid-gap: wp-vars.$grid-unit-60;
 	}
 
 	// Row Gap 0
@@ -143,16 +144,6 @@
 		&__columns-12 {
 			grid-template-columns: repeat(12, 1fr);
 		}
-
-		// Gutter 48
-		&__gutter-48 {
-			grid-gap: 48px;
-		}
-
-		// Gutter 64
-		&__gutter-64 {
-			grid-gap: 64px;
-		}
 	}
 
 	// Children
@@ -194,9 +185,6 @@
 		&.newspack-grid__gutter-32 > * {
 			padding: 32px;
 		}
-		&.newspack-grid__gutter-64 > * {
-			padding: 64px;
-		}
 	}
 
 	.components-base-control {

package/dist/cjs/image-upload/index.js

@@ -78,11 +78,14 @@ var ImageUpload = /*#__PURE__*/function (_Component) {
         disabled = _this$props.disabled,
         help = _this$props.help,
         image = _this$props.image,
+        imageStyle = _this$props.imageStyle,
         isCovering = _this$props.isCovering,
         label = _this$props.label,
         onChange = _this$props.onChange,
         _this$props$style = _this$props.style,
-        style = _this$props$style === void 0 ? {} : _this$props$style;
+        style = _this$props$style === void 0 ? {} : _this$props$style,
+        _this$props$withMargi = _this$props.withMargin,
+        withMargin = _this$props$withMargi === void 0 ? true : _this$props$withMargi;
       var classes = (0, _classnames["default"])('newspack-image-upload__image', {
         'newspack-image-upload__image--has-image': image
       }, {
@@ -90,7 +93,9 @@ var ImageUpload = /*#__PURE__*/function (_Component) {
       });
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.BaseControl, {
         __nextHasNoMarginBottom: true,
-        className: (0, _classnames["default"])('newspack-image-upload', className),
+        className: (0, _classnames["default"])('newspack-image-upload', {
+          'newspack-image-upload--no-margin': !withMargin
+        }, className),
         help: help,
         children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
           children: label
@@ -101,7 +106,8 @@ var ImageUpload = /*#__PURE__*/function (_Component) {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
               "data-testid": "image-upload",
               src: image.url,
-              alt: (0, _i18n.__)('Image preview', 'newspack-plugin')
+              alt: (0, _i18n.__)('Image preview', 'newspack-plugin'),
+              style: imageStyle
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "newspack-image-upload__controls",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {

package/dist/cjs/image-upload/style.scss

@@ -7,6 +7,9 @@
 
 .newspack-image-upload {
 	margin: wp-vars.$grid-unit-40 0;
+	&--no-margin {
+		margin: 0;
+	}
 	&__image {
 		align-items: center;
 		background-position: center;

package/dist/cjs/index.js

@@ -28,12 +28,6 @@ Object.defineProperty(exports, "AutocompleteWithSuggestions", {
     return _autocompleteWithSuggestions["default"];
   }
 });
-Object.defineProperty(exports, "BoxContrast", {
-  enumerable: true,
-  get: function get() {
-    return _boxContrast["default"];
-  }
-});
 Object.defineProperty(exports, "Breadcrumbs", {
   enumerable: true,
   get: function get() {
@@ -407,7 +401,6 @@ var _autocompleteWithSuggestions = _interopRequireDefault(require("./autocomplet
 var _autocompleteWithLatestPosts = _interopRequireDefault(require("./autocomplete-with-latest-posts"));
 var _breadcrumbs = _interopRequireDefault(require("./breadcrumbs"));
 var _button = _interopRequireDefault(require("./button"));
-var _boxContrast = _interopRequireDefault(require("./box-contrast"));
 var _card = _interopRequireDefault(require("./card"));
 var _cardFeature = _interopRequireDefault(require("./card-feature"));
 var _cardForm = _interopRequireDefault(require("./card-form"));

package/dist/cjs/info-button/style.scss

@@ -39,7 +39,7 @@
 .newspack-info-button__popup {
 	background-color: wp-colors.$gray-900;
 	border-radius: var(--wpds-border-radius-md, #{wp-vars.$radius-medium});
-	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	box-shadow: wp-vars.$elevation-small;
 	color: wp-colors.$white;
 	outline: 0;
 	padding: var(--wpds-dimension-padding-xs, #{wp-vars.$grid-unit-05}) var(--wpds-dimension-padding-sm, #{wp-vars.$grid-unit-10});

package/dist/cjs/modal/style.scss

@@ -83,15 +83,14 @@
 		}
 	}
 
-	.components-modal__content {
-		> * {
-			&:first-child {
-				margin-top: 0;
-			}
+	.components-modal__children-container {
+		> :first-child,
+		> .screen-reader-text:first-child + * {
+			margin-top: 0;
+		}
 
-			&:last-child {
-				margin-bottom: 0;
-			}
+		> :last-child {
+			margin-bottom: 0;
 		}
 	}
 }

package/dist/cjs/page/style.scss

@@ -9,10 +9,10 @@
 // postcss-import cannot resolve exports maps, and resolving the public
 // specifier through sass/webpack leaks a bogus `wp-theme/design-tokens.css`
 // script dependency into consumers' asset manifests, which silently blocks
-// their enqueues. If upstream moves `src/prebuilt/`, this fails loudly at
+// their enqueues. If upstream moves `prebuilt/`, this fails loudly at
 // build time.
 /* stylelint-disable-next-line no-invalid-position-at-import-rule -- sass @use must precede the CSS @import; postcss-import inlines it at build time. */
-@import "@wordpress/theme/src/prebuilt/css/design-tokens.css";
+@import "@wordpress/theme/prebuilt/css/design-tokens.css";
 
 // Newspack brand mapping: the wpds brand color tokens ship in WordPress
 // blue; remap them onto the Newspack primary scale so every design-system
@@ -51,7 +51,6 @@
 }
 
 .newspack-page__header {
-	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
 	background: var(--wpds-color-background-surface-neutral-strong);
 	border-block-end: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
@@ -62,7 +61,6 @@
 }
 
 .newspack-page__header-subtitle {
-	/* 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);
 	padding-block-end: var(--wpds-dimension-padding-xs);
 }

package/dist/cjs/plugin-settings/style.scss

@@ -1,6 +1,6 @@
 .newspack-card:not(.newspack-settings__no-border) {
 	.newspack-action-card__region-children {
-		> .newspack-grid {
+		> .newspack-grid:not(.newspack-grid--no-margin) {
 			margin: 32px 0 0 !important;
 		}
 	}

package/dist/cjs/section-header/index.js

@@ -42,6 +42,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @property {boolean}            [centered=false]   - Indicates if the header is centered.
  * @property {?string}            [className=null]   - Additional CSS class name, applied to the outer container.
  * @property {string|Function|*}  [description]      - Description of the section.
+ * @property {boolean}            [fullWidthText]    - Lets the title and description span the full header width. With a back nav they are otherwise capped at half, which suits a page-wide header but not one already sitting in a column.
  * @property {number}             [heading=2]        - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
  * @property {string|Function|*}  [icon]             - Icon to display in the header.
  * @property {boolean}            [isWhite=false]    - Indicates if the header should use a white theme.
@@ -70,6 +71,8 @@ var _jsxRuntime = require("react/jsx-runtime");
     className = _ref$className === void 0 ? null : _ref$className,
     _ref$description = _ref.description,
     description = _ref$description === void 0 ? '' : _ref$description,
+    _ref$fullWidthText = _ref.fullWidthText,
+    fullWidthText = _ref$fullWidthText === void 0 ? false : _ref$fullWidthText,
     _ref$heading = _ref.heading,
     heading = _ref$heading === void 0 ? 2 : _ref$heading,
     _ref$icon = _ref.icon,
@@ -91,7 +94,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children;
   // If id is in the URL as a scrollTo param, scroll to it on render.
-  var ref = (0, _element.useRef)();
+  var ref = (0, _element.useRef)(undefined);
   (0, _element.useEffect)(function () {
     var params = new Proxy(new URLSearchParams(window.location.search), {
       get: function get(searchParams, prop) {
@@ -167,7 +170,7 @@ var _jsxRuntime = require("react/jsx-runtime");
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     id: id,
-    className: (0, _classnames["default"])('newspack-section-header__container', backNav && 'newspack-section-header--has-back-nav', primaryAction && 'newspack-section-header--has-primary-action', className),
+    className: (0, _classnames["default"])('newspack-section-header__container', backNav && 'newspack-section-header--has-back-nav', fullWidthText && 'newspack-section-header--full-width-text', primaryAction && 'newspack-section-header--has-primary-action', className),
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_grid["default"], {
       columns: 1,

package/dist/cjs/section-header/style.scss

@@ -9,7 +9,7 @@
 
 .newspack-section-header {
 	flex: 1;
-	margin: 64px 0 32px;
+	margin: wp-vars.$grid-unit-60 0 wp-vars.$grid-unit-40;
 
 	&__container {
 		position: relative;
@@ -17,7 +17,7 @@
 			text-wrap: balance;
 		}
 		&:not(:first-child) {
-			margin-top: 48px;
+			margin-top: wp-vars.$grid-unit-60;
 		}
 		&:has(> .newspack-section-header--no-margin) {
 			margin-top: 0;
@@ -34,7 +34,7 @@
 				flex-direction: row;
 			}
 		}
-		&.newspack-section-header--has-back-nav {
+		&.newspack-section-header--has-back-nav:not(.newspack-section-header--full-width-text) {
 			@include wp-mixins.break-wide {
 				.newspack-section-header__title-container,
 				p {

package/dist/cjs/settings/style.scss

@@ -145,7 +145,7 @@
 			}
 
 			& + & {
-				margin-top: 64px;
+				margin-top: wp-vars.$grid-unit-60;
 			}
 		}
 	}

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

@@ -62,13 +62,12 @@ var StyleCard = /*#__PURE__*/function (_Component) {
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
             src: image,
             alt: cardTitle + ' ' + (0, _i18n.__)('Thumbnail', 'newspack-plugin')
+          }), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
+            children: (0, _i18n.__)('Selected', 'newspack-plugin')
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "newspack-style-card__actions",
-            children: [isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "newspack-style-card__actions__badge",
-              children: (0, _i18n.__)('Selected', 'newspack-plugin')
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-              variant: "link",
+            children: [!isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              variant: "tertiary",
               onClick: onClick,
               "aria-label": ariaLabel ? ariaLabel : (0, _i18n.__)('Select', 'newspack-plugin') + ' ' + cardTitle,
               tabIndex: "0",
@@ -76,7 +75,7 @@ var StyleCard = /*#__PURE__*/function (_Component) {
             }), url && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.WebPreview, {
               url: url,
               label: (0, _i18n.__)('View Demo', 'newspack-plugin'),
-              variant: "link"
+              variant: "tertiary"
             })]
           })]
         }), cardTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -48,11 +48,13 @@
 
 		.newspack-style-card__is-active & {
 			border-color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 
-			img {
-				position: relative;
-				z-index: -1;
+			&::after {
+				box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+				content: "";
+				inset: 0;
+				pointer-events: none;
+				position: absolute;
 			}
 		}
 	}
@@ -74,18 +76,12 @@
 			display: none;
 		}
 
-		&__badge,
 		.components-button {
 			margin: 4px;
 			opacity: 0;
 			transition: opacity 125ms ease-in-out;
 		}
 
-		&__badge {
-			color: var(--wp-admin-theme-color);
-			font-weight: bold;
-		}
-
 		.newspack-style-card__is-active & {
 			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 		}

package/dist/cjs/style.scss

@@ -1,4 +1,5 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 @use "../../colors/colors.module" as np-colors;
 
 :root {
@@ -21,14 +22,14 @@
 	gap: 16px;
 	justify-content: flex-start;
 	align-items: center;
-	margin: 64px 0 32px;
+	margin: wp-vars.$grid-unit-60 0 wp-vars.$grid-unit-40;
 
 	&:empty {
 		display: none;
 	}
 
 	+ .newspack-card {
-		margin-top: 64px;
+		margin-top: wp-vars.$grid-unit-60;
 	}
 }
 

package/dist/cjs/tabbed-navigation/style.scss

@@ -54,7 +54,6 @@
 
 		&[data-disabled],
 		&[aria-disabled="true"] {
-			/* 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-interactive-neutral-disabled, #{wp-colors.$gray-600} );
 			pointer-events: none;
 		}

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

@@ -3,6 +3,7 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 @use "../../../colors/colors.module" as np-colors;
 
 .newspack-wizard {
@@ -94,10 +95,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;
 			}
 		}
 		&:not(.newspack-wizard__content--full-width) {

package/dist/cjs/wizard/index.js

@@ -404,6 +404,7 @@ var Wizard = function Wizard(_ref2, ref) {
   var headerActions = (actions === null || actions === void 0 ? void 0 : actions.length) > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [mainActions.map(function (action, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+        "aria-label": action.ariaLabel,
         className: "newspack-wizard__actions__main",
         href: action.href,
         icon: resolveIcon(action.icon),
@@ -434,6 +435,7 @@ var Wizard = function Wizard(_ref2, ref) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
               children: group.map(function (action, index) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+                  "aria-label": action.ariaLabel,
                   className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__actions__more__main' : 'newspack-wizard__actions__more__more',
                   icon: action.icon,
                   href: action.href,

package/dist/esm/_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/esm/card/core-card.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 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) { _defineProperty(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; }
 /**
@@ -27,6 +27,7 @@ import classNames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var CoreCard = function CoreCard(_ref) {
   var actions = _ref.actions,
+    actionsLabel = _ref.actionsLabel,
     actionType = _ref.actionType,
     as = _ref.as,
     buttonsCard = _ref.buttonsCard,
@@ -65,7 +66,7 @@ var CoreCard = function CoreCard(_ref) {
     hasHeaderBorder = _ref$hasHeaderBorder === void 0 ? true : _ref$hasHeaderBorder,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var bodySize = isSmall ? undefined : size;
-  var classes = classNames('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 = classNames('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) {
@@ -154,7 +155,7 @@ var CoreCard = function CoreCard(_ref) {
         onChange: onToggle
       }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/_jsx(DropdownMenu, {
         icon: moreVertical,
-        label: __('More', 'newspack-plugin'),
+        label: actionsLabel || __('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.
@@ -165,6 +166,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
@@ -176,6 +178,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/esm/card/core-card.test.js

@@ -1,7 +1,10 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+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.
  */
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies.
@@ -53,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 () {
+    render(/*#__PURE__*/_jsx(CoreCard, {
+      header: "Settings",
+      actions: [{
+        label: 'Delete',
+        action: function action() {}
+      }]
+    }));
+    expect(screen.getByRole('button', {
+      name: 'More actions'
+    })).toBeInTheDocument();
+  });
+  it('names the actions menu with actionsLabel when supplied', function () {
+    render(/*#__PURE__*/_jsx(CoreCard, {
+      header: "Settings",
+      actions: [{
+        label: 'Delete',
+        action: function action() {}
+      }],
+      actionsLabel: "Settings actions"
+    }));
+    expect(screen.getByRole('button', {
+      name: 'Settings actions'
+    })).toBeInTheDocument();
+  });
+  it('gives a menu item its ariaLabel as the accessible name', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          render(/*#__PURE__*/_jsx(CoreCard, {
+            header: "Settings",
+            actions: [{
+              label: 'Delete',
+              ariaLabel: 'Delete: Settings',
+              action: function action() {}
+            }]
+          }));
+          fireEvent.click(screen.getByRole('button', {
+            name: 'More actions'
+          }));
+          _t = expect;
+          _context.n = 1;
+          return 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 = render(/*#__PURE__*/_jsx(CoreCard, {
         header: "Settings",
@@ -91,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 = render(/*#__PURE__*/_jsx(CoreCard, {
+        header: "Settings"
+      })),
+      plain = _render0.container;
+    expect(plain.querySelector('.newspack-card--core__no-border')).toBeNull();
+    var _render1 = render(/*#__PURE__*/_jsx(CoreCard, {
+        header: "Settings",
+        noBorder: true
+      })),
+      borderless = _render1.container;
+    expect(borderless.querySelector('.newspack-card--core__no-border')).not.toBeNull();
+    var _render10 = render(/*#__PURE__*/_jsx(CoreCard, {
+        header: "Settings",
+        isBorderless: true
+      })),
+      coreBorderless = _render10.container;
+    expect(coreBorderless.querySelector('.newspack-card--core__no-border')).not.toBeNull();
+  });
 });

package/dist/esm/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;