newspack-components 4.11.0 → 4.12.0-alpha.1

package/dist/cjs/drawer/slots.test.js

@@ -132,86 +132,35 @@ describe('Drawer.Content', function () {
       container = _render2.container;
     expect(sectionOf(container).style.getPropertyValue('--newspack-drawer-content-padding')).toBe('0px');
   });
-  it('renders each section as a VStack', function () {
+  it('spaces its children by the lg gap token, and by the gap prop', function () {
     var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_content["default"], {
         children: "stacked"
       })),
-      container = _render3.container;
-    expect(sectionOf(container)).toHaveClass('newspack-drawer__content', 'components-v-stack');
-  });
-
-  // VStack emits its spacing as a `calc()` on the 4px base, not as pixels.
-  it('spaces its children by 16px, and by the gap prop', function () {
-    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_content["default"], {
-        children: "stacked"
-      })),
-      container = _render4.container,
-      rerender = _render4.rerender;
-    expect(window.getComputedStyle(sectionOf(container)).gap).toBe('calc(4px * 4)');
+      container = _render3.container,
+      rerender = _render3.rerender;
+    expect(sectionOf(container).style.gap).toContain('gap-lg');
     rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_content["default"], {
-      gap: 2,
+      gap: "sm",
       children: "stacked"
     }));
-    expect(window.getComputedStyle(sectionOf(container)).gap).toBe('calc(4px * 2)');
+    expect(sectionOf(container).style.gap).toContain('gap-sm');
   });
-
-  // VStack keeps only elements, so these would otherwise vanish without warning.
   it('keeps plain text sitting beside an element', function () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_content["default"], {
-      children: ["Lead text", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: "an element"
-      }), 42]
-    }));
-    expect(_react.screen.getByText('Lead text')).toBeInTheDocument();
-    expect(_react.screen.getByText('an element')).toBeInTheDocument();
-    expect(_react.screen.getByText('42')).toBeInTheDocument();
-  });
-  it('keeps a run of text and interpolations on one row', function () {
-    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_content["default"], {
-        children: ["Edited by ", 'Ada', " just now"]
-      })),
-      container = _render5.container;
-    var rows = sectionOf(container).children;
-    expect(rows).toHaveLength(1);
-    expect(rows[0]).toHaveTextContent('Edited by Ada just now');
-  });
-  it('starts a new row either side of an element', function () {
-    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_content["default"], {
-        children: ["before", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: "middle"
-        }), "after"]
-      })),
-      container = _render6.container;
-    expect(Array.from(sectionOf(container).children).map(function (row) {
-      return row.textContent;
-    })).toEqual(['before', 'middle', 'after']);
-  });
-  it('emits no row for whitespace or empty text between elements', function () {
-    var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_content["default"], {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: "one"
-        }), " ", '', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: "two"
-        })]
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_content["default"], {
+        children: ["Lead text", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: "an element"
+        }), 42]
       })),
-      container = _render7.container;
-    expect(Array.from(sectionOf(container).children).map(function (row) {
-      return row.textContent;
-    })).toEqual(['one', 'two']);
-  });
-  it('keeps a lone string', function () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_content["default"], {
-      children: "on its own"
-    }));
-    expect(_react.screen.getByText('on its own')).toBeInTheDocument();
+      container = _render4.container;
+    expect(sectionOf(container)).toHaveTextContent('Lead textan element42');
   });
 });
 describe('Drawer.Divider', function () {
   it('renders a separator, merging className', function () {
-    var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
         className: "custom"
       })),
-      container = _render8.container;
+      container = _render5.container;
     var divider = container.querySelector('hr');
     expect(divider).toHaveClass('newspack-drawer__divider', 'custom');
     expect(_react.screen.getByRole('separator')).toBe(divider);
@@ -224,8 +173,17 @@ describe('Drawer.Footer', function () {
     }));
     expect(_react.screen.getByText('actions')).toHaveClass('newspack-drawer__footer');
   });
+  it('lays its actions out in one end-aligned row that wraps', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_footer["default"], {
+      children: "actions"
+    }));
+    var footer = _react.screen.getByText('actions');
+    expect(footer.style.flexDirection).toBe('row');
+    expect(footer.style.justifyContent).toBe('flex-end');
+    expect(footer.style.flexWrap).toBe('wrap');
+  });
   it('renders its actions as direct children', function () {
-    var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_footer["default"], {
+    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_footer["default"], {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_action["default"], {
           children: "One"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_action["default"], {
@@ -234,7 +192,7 @@ describe('Drawer.Footer', function () {
           children: "Three"
         })]
       })),
-      container = _render9.container;
+      container = _render6.container;
     var footer = container.querySelector('.newspack-drawer__footer');
     expect(Array.from(footer.children)).toEqual([_react.screen.getByRole('button', {
       name: 'One'

package/dist/cjs/drawer/style.scss

@@ -80,10 +80,7 @@ $drawer-size-x-large: 640px;
 }
 
 .newspack-drawer__header {
-	align-items: center;
-	display: flex;
 	flex: 0 0 auto;
-	gap: wp-vars.$grid-unit-10;
 	padding: wp-vars.$grid-unit-30 wp-vars.$grid-unit-30 wp-vars.$grid-unit-20;
 }
 
@@ -139,23 +136,8 @@ $drawer-size-x-large: 640px;
 
 .newspack-drawer__footer {
 	background: wp-colors.$white;
-	display: flex;
 	flex: 0 0 auto;
-	gap: wp-vars.$grid-unit-10;
 	padding: wp-vars.$grid-unit-20 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;
-
-	> .components-button {
-		flex: 1;
-		justify-content: center;
-	}
-
-	&:has(> :nth-child(3)) {
-		flex-direction: column;
-
-		> .components-button {
-			flex: 0 0 auto;
-		}
-	}
 }
 
 @keyframes newspack-drawer-slide-in {

package/dist/cjs/index.js

@@ -334,6 +334,12 @@ Object.defineProperty(exports, "TextControl", {
     return _textControl["default"];
   }
 });
+Object.defineProperty(exports, "TooltipBadge", {
+  enumerable: true,
+  get: function get() {
+    return _tooltipBadge["default"];
+  }
+});
 Object.defineProperty(exports, "Waiting", {
   enumerable: true,
   get: function get() {
@@ -454,6 +460,7 @@ var _styleCard = _interopRequireDefault(require("./style-card"));
 var _tabbedNavigation = _interopRequireDefault(require("./tabbed-navigation"));
 var _tableCard = _interopRequireDefault(require("./table-card"));
 var _textControl = _interopRequireDefault(require("./text-control"));
+var _tooltipBadge = _interopRequireDefault(require("./tooltip-badge"));
 var _waiting = _interopRequireDefault(require("./waiting"));
 var _webPreview = _interopRequireDefault(require("./web-preview"));
 var _wizard = _interopRequireWildcard(require("./wizard"));

package/dist/cjs/page/index.js

@@ -74,11 +74,13 @@ var _jsxRuntime = require("react/jsx-runtime");
             direction: "row",
             gap: "sm",
             justify: "space-between",
+            wrap: "wrap",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
               direction: "row",
               gap: "sm",
-              align: "center",
+              align: "start",
               justify: "start",
+              className: "newspack-page__header-title",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "newspack-page__header-visual",
                 "aria-hidden": "true",
@@ -91,7 +93,13 @@ var _jsxRuntime = require("react/jsx-runtime");
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_breadcrumbs["default"], {
                   items: breadcrumbItems
                 })
-              }), badges]
+              }), badges && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+                direction: "row",
+                gap: "sm",
+                align: "center",
+                className: "newspack-page__header-badges",
+                children: badges
+              })]
             }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
               direction: "row",
               gap: "sm",

package/dist/cjs/page/style.scss

@@ -56,8 +56,29 @@
 	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
 }
 
+.newspack-page__header-title {
+	min-width: 0;
+}
+
 .newspack-page__header-actions {
+	flex-basis: 100%;
+	flex-shrink: 0;
+	justify-content: flex-end;
+	margin-inline-start: auto;
+
+	@include wp-mixins.break-medium {
+		flex-basis: auto;
+	}
+
+	&:empty,
+	&:has(> :only-child:empty) {
+		display: none;
+	}
+}
+
+.newspack-page__header-badges {
 	flex-shrink: 0;
+	min-height: wp-vars.$button-size;
 }
 
 .newspack-page__header-subtitle {
@@ -68,7 +89,7 @@
 .newspack-page__header-visual {
 	display: grid;
 	flex-shrink: 0;
-	height: 24px;
+	height: wp-vars.$button-size;
 	place-items: center;
 	width: 24px;
 
@@ -80,5 +101,6 @@
 }
 
 .newspack-page__breadcrumbs {
-	min-height: wp-vars.$button-size;
+	min-width: 0;
+	padding-block: calc((#{wp-vars.$button-size} - var(--wpds-typography-line-height-md)) / 2);
 }

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

@@ -21,6 +21,11 @@
 	/* stylelint-disable-next-line plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the indicator token. */
 	--wpds-color-stroke-interactive-neutral-strong: #{np-colors.$primary-600};
 
+	[role="tablist"] {
+		max-width: 100%;
+		overflow-x: auto;
+	}
+
 	a[role="tab"] {
 		text-decoration: none;
 

package/dist/cjs/tooltip-badge/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _compose = require("@wordpress/compose");
+var _ui = require("@wordpress/ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * A badge whose tooltip explains it. The tooltip serves mouse and keyboard users;
+ * screen readers get the same text as the trigger's description, which keeps it
+ * out of the accessible name of a heading the badge sits in.
+ */
+var _TooltipBadge = function TooltipBadge(_ref) {
+  var label = _ref.label,
+    tooltip = _ref.tooltip,
+    _ref$intent = _ref.intent,
+    intent = _ref$intent === void 0 ? 'none' : _ref$intent;
+  var descriptionId = (0, _compose.useInstanceId)(_TooltipBadge, 'newspack-tooltip-badge');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Tooltip.Root, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Tooltip.Trigger, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          tabIndex: 0,
+          "aria-describedby": descriptionId
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Badge, {
+          intent: intent,
+          children: label
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Tooltip.Popup, {
+        children: tooltip
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      id: descriptionId,
+      hidden: true,
+      children: tooltip
+    })]
+  });
+};
+var _default = exports["default"] = _TooltipBadge;

package/dist/cjs/tooltip-badge/index.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require("./"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+describe('TooltipBadge', function () {
+  it('describes its focusable trigger with the tooltip text, keeping it out of a surrounding heading name', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+      children: ["Registration wall", /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Overrides paid access",
+        tooltip: "This grants registered readers access.",
+        intent: "low"
+      })]
+    }));
+    expect(_react.screen.getByRole('heading', {
+      name: 'Registration wall Overrides paid access'
+    })).toBeInTheDocument();
+    var trigger = _react.screen.getByText('Overrides paid access').closest('[tabindex="0"]');
+    expect(trigger).toHaveAccessibleDescription('This grants registered readers access.');
+  });
+});

package/dist/cjs/wizard/index.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _components = require("@wordpress/components");
+var _ui = require("@wordpress/ui");
 var _data = require("@wordpress/data");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
@@ -114,12 +115,13 @@ var ResetHeaderData = function ResetHeaderData() {
  * can read the current route and derive the active-tab breadcrumb.
  */
 var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
-  var _activeSection;
+  var _activeSection, _activeSection2;
   var hideHeader = _ref.hideHeader,
     headerText = _ref.headerText,
     sections = _ref.sections,
     sectionName = _ref.sectionName,
     subTitle = _ref.subTitle,
+    headerSubTitle = _ref.headerSubTitle,
     actions = _ref.actions,
     wizardTabbedNavigation = _ref.tabbedNavigation,
     children = _ref.children;
@@ -149,11 +151,19 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
         break;
       }
     }
+
+    // WizardError normally mounts inside the tab bar, so a route without one renders it itself.
   } catch (err) {
     _iterator.e(err);
   } finally {
     _iterator.f();
   }
+  if ((_activeSection = (0, _breadcrumbsSelect.activeSection)(sections, pathname)) !== null && _activeSection !== void 0 && _activeSection.hideTabbedNavigation && tabbedNavigation) {
+    tabbedNavigation = null;
+    children = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError["default"], {}), children]
+    });
+  }
   if (hideHeader) {
     // Without the Page shell the tabs still own the content: it renders
     // inside the active tab's panel.
@@ -173,10 +183,10 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
   // Append any render-time leaf crumb(s) the section supplied via
   // headerData.sectionName (deduped against the current trailing label).
   breadcrumbItems = (0, _breadcrumbsSelect.appendSectionName)(breadcrumbItems, sectionName);
-  var sectionSubTitle = (_activeSection = (0, _breadcrumbsSelect.activeSection)(sections, pathname)) === null || _activeSection === void 0 ? void 0 : _activeSection.subHeaderText;
+  var sectionSubTitle = (_activeSection2 = (0, _breadcrumbsSelect.activeSection)(sections, pathname)) === null || _activeSection2 === void 0 ? void 0 : _activeSection2.subHeaderText;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
     breadcrumbItems: breadcrumbItems,
-    subTitle: sectionSubTitle !== null && sectionSubTitle !== void 0 ? sectionSubTitle : subTitle,
+    subTitle: headerSubTitle || (sectionSubTitle !== null && sectionSubTitle !== void 0 ? sectionSubTitle : subTitle),
     actions: actions,
     tabbedNavigation: tabbedNavigation,
     children: children
@@ -189,7 +199,7 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
  * @property {string}     [subHeaderText]           The sub-header text, optional.
  * @property {string}     [apiSlug]                 The API slug, optional.
  * @property {string}     [className]               CSS classes, optional.
- * @property {any[]}      sections                  Array of sections. A section's own `subHeaderText` replaces the wizard's while it is active.
+ * @property {any[]}      sections                  Array of sections. A section's own `subHeaderText` replaces the wizard's while it is active, and `hideTabbedNavigation` hides the tab bar on its route.
  *                                                  Its optional `tabbedNavigation( params )` returns the tab items shown while its route matches.
  * @property {boolean}    [hasSimpleFooter]         Indicates if a simple footer is used, optional.
  * @property {() => void} [renderAboveSections]     Function to render content above sections, optional.
@@ -247,7 +257,8 @@ var Wizard = function Wizard(_ref2, ref) {
     sectionSize = headerData.sectionSize,
     sectionTitle = headerData.sectionTitle,
     sectionPrimaryAction = headerData.sectionPrimaryAction,
-    sectionSecondaryAction = headerData.sectionSecondaryAction;
+    sectionSecondaryAction = headerData.sectionSecondaryAction,
+    headerSubTitle = headerData.subTitle;
   var mainActions = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
     return action.type === 'primary' || action.type === 'secondary';
   });
@@ -310,9 +321,10 @@ var Wizard = function Wizard(_ref2, ref) {
         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.jsxs)(_ui.Stack, {
+              direction: "column",
+              align: "center",
+              gap: "sm",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
                 noMargin: true
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
@@ -466,6 +478,7 @@ var Wizard = function Wizard(_ref2, ref) {
             sections: routedSections,
             sectionName: sectionName,
             subTitle: subHeaderText,
+            headerSubTitle: headerSubTitle,
             actions: headerActions,
             tabbedNavigation: tabbedNavigation,
             children: content

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

@@ -548,4 +548,82 @@ describe('Wizard section subtitle', function () {
       }
     }, _callee1);
   })));
+});
+describe('Wizard tab bar on hidden routes', function () {
+  beforeEach(function () {
+    _apiFetch["default"].mockReset();
+    _apiFetch["default"].mockResolvedValue({});
+  });
+  it('hides the tab bar on a hideTabbedNavigation route and restores it on a tab route', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee10() {
+    var _t10, _t11, _t12;
+    return _regenerator().w(function (_context10) {
+      while (1) switch (_context10.n) {
+        case 0:
+          window.location.hash = '#/list';
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: [{
+              label: 'List',
+              path: '/list',
+              exact: true,
+              render: function render() {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: "List view"
+                });
+              }
+            }, {
+              label: 'Other',
+              path: '/other',
+              exact: true,
+              render: function render() {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: "Other view"
+                });
+              }
+            }, {
+              path: '/list/:id',
+              isHidden: true,
+              hideTabbedNavigation: true,
+              render: function render() {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: "Item view"
+                });
+              }
+            }]
+          }));
+          _t10 = expect;
+          _context10.n = 1;
+          return _react.screen.findByText('List view');
+        case 1:
+          _t10(_context10.v).toBeInTheDocument();
+          expect(_react.screen.getByRole('tab', {
+            name: 'Other'
+          })).toBeInTheDocument();
+          (0, _react.act)(function () {
+            window.location.hash = '#/list/esp';
+            window.dispatchEvent(new HashChangeEvent('hashchange'));
+          });
+          _t11 = expect;
+          _context10.n = 2;
+          return _react.screen.findByText('Item view');
+        case 2:
+          _t11(_context10.v).toBeInTheDocument();
+          expect(_react.screen.queryByRole('tab')).not.toBeInTheDocument();
+          (0, _react.act)(function () {
+            window.location.hash = '#/list';
+            window.dispatchEvent(new HashChangeEvent('hashchange'));
+          });
+          _t12 = expect;
+          _context10.n = 3;
+          return _react.screen.findByText('List view');
+        case 3:
+          _t12(_context10.v).toBeInTheDocument();
+          expect(_react.screen.getByRole('tab', {
+            name: 'Other'
+          })).toBeInTheDocument();
+        case 4:
+          return _context10.a(2);
+      }
+    }, _callee10);
+  })));
 });

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

@@ -31,7 +31,8 @@ var DEFAULT_STATE = {
     badges: [],
     sectionDescription: '',
     sectionName: '',
-    sectionTitle: ''
+    sectionTitle: '',
+    subTitle: ''
   },
   isLoading: false,
   isQuietLoading: false,

package/dist/esm/breadcrumbs/index.js

@@ -92,6 +92,7 @@ var Breadcrumbs = function Breadcrumbs(_ref3) {
       render: /*#__PURE__*/_jsx("ul", {}),
       direction: "row",
       align: "center",
+      wrap: "wrap",
       className: "newspack-breadcrumbs__list",
       children: [preceding.map(function (item, index) {
         return /*#__PURE__*/_jsxs("li", {

package/dist/esm/breadcrumbs/style.scss

@@ -7,8 +7,8 @@
 	padding: 0;
 
 	> li {
-		flex-shrink: 0;
 		margin: 0;
+		min-width: 0;
 
 		a {
 			color: wp-colors.$gray-900;
@@ -20,11 +20,6 @@
 			}
 		}
 	}
-
-	> li:last-child {
-		flex-shrink: 1;
-		min-width: 0;
-	}
 }
 
 .newspack-breadcrumbs__count {
@@ -39,9 +34,7 @@
 }
 
 .newspack-breadcrumbs__list h1.newspack-breadcrumbs__current {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	overflow-wrap: break-word;
 	padding: 0;
-	line-height: normal;
+	line-height: var(--wpds-typography-line-height-md, #{wp-vars.$grid-unit-30});
 }

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

@@ -221,7 +221,7 @@
 				color: inherit;
 				text-decoration: none;
 				&:hover {
-					text-decoration: underline;
+					color: var(--wp-admin-theme-color);
 				}
 			}
 		}