newspack-components 4.7.0 → 4.8.0-alpha.1

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

@@ -2,55 +2,51 @@
  * 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;
 
 .newspack-card-feature {
 	height: 100%;
 
-	.newspack-card--core__header {
-		height: 100%;
-	}
-
-	.newspack-card--core__header-content {
-		gap: 16px;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
+	&__actions {
+		margin-top: auto;
 
-		// Push the action row (buttons + badge) to the bottom.
-		> :last-child {
-			margin-top: auto;
+		.newspack-card-feature__badge {
+			flex-shrink: 1;
+			min-width: 0;
 		}
 	}
 
 	&__content {
 		flex: 1;
-		min-width: 0; // prevent flex blowout on long words
+		min-width: 0;
 	}
 
 	&__title {
-		font-size: wp-vars.$font-size-x-large;
-		line-height: wp-vars.$font-line-height-x-large;
-		text-align: left;
+		@include wp-mixins.heading-x-large();
+
+		margin: 0;
 	}
 
 	&__description {
-		text-align: left;
+		@include np-mixins.text-muted;
+
+		margin: 0;
 	}
 
 	&__icon {
 		align-items: center;
 		display: flex;
-		flex: 0 0 40px;
-		height: 40px;
+		flex: 0 0 wp-vars.$grid-unit-50;
+		height: wp-vars.$grid-unit-50;
 		justify-content: center;
 
 		svg {
 			display: block;
 			fill: currentcolor;
-			height: 24px;
-			width: 24px;
+			height: wp-vars.$grid-unit-30;
+			width: wp-vars.$grid-unit-30;
 		}
 
 		&--radius-small {
@@ -62,14 +58,7 @@
 		}
 	}
 
-	// Unmet requirements state: lighter border, muted content.
-	&.newspack-card-feature--muted {
-		border-color: wp-colors.$gray-100;
-		box-shadow: wp-colors.$gray-100 0 0 0 1px;
-
-		.newspack-card-feature__title,
-		.newspack-card-feature__description {
-			color: wp-colors.$gray-700;
-		}
+	&.newspack-card-feature--muted &__title {
+		@include np-mixins.text-muted;
 	}
 }

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

@@ -9,7 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _components = require("@wordpress/components");
-var _badge = _interopRequireDefault(require("../badge"));
+var _ui = require("@wordpress/ui");
 var _card = _interopRequireDefault(require("../card"));
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -36,7 +36,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 var _CardForm = function CardForm(_ref) {
-  var _badge$level;
+  var _badge$intent;
   var title = _ref.title,
     description = _ref.description,
     badge = _ref.badge,
@@ -123,9 +123,9 @@ var _CardForm = function CardForm(_ref) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
           spacing: 2,
           expanded: false,
-          children: [badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge["default"], {
-            text: badge.text,
-            level: (_badge$level = badge.level) !== null && _badge$level !== void 0 ? _badge$level : 'success'
+          children: [(badge === null || badge === void 0 ? void 0 : badge.label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Badge, {
+            intent: (_badge$intent = badge.intent) !== null && _badge$intent !== void 0 ? _badge$intent : 'stable',
+            children: badge.label
           }), actions]
         })]
       })

package/dist/cjs/card-sortable-list/index.js

@@ -10,6 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
+var _ui = require("@wordpress/ui");
 var _ = require("../");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -384,6 +385,7 @@ var CardSortableList = function CardSortableList(_ref) {
             onDragEnd: handleDragEnd,
             appendToOwnerDocument: true,
             children: function children(_ref2) {
+              var _item$badge, _item$badge$intent;
               var onDraggableStart = _ref2.onDraggableStart,
                 onDraggableEnd = _ref2.onDraggableEnd;
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
@@ -395,9 +397,9 @@ var CardSortableList = function CardSortableList(_ref) {
                 __experimentalCoreProps: _objectSpread(_objectSpread({
                   header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
-                      children: [item.title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Badge, {
-                        level: item.badgeLevel,
-                        text: item.badgeText
+                      children: [item.title, ((_item$badge = item.badge) === null || _item$badge === void 0 ? void 0 : _item$badge.label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Badge, {
+                        intent: (_item$badge$intent = item.badge.intent) !== null && _item$badge$intent !== void 0 ? _item$badge$intent : 'none',
+                        children: item.badge.label
                       })]
                     }), item.description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
                       children: item.description

package/dist/cjs/card-sortable-list/index.test.js

@@ -0,0 +1,50 @@
+"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.
+ */
+
+var items = [{
+  id: 1,
+  title: 'Homepage',
+  badge: {
+    label: 'Active',
+    intent: 'stable'
+  }
+}, {
+  id: 2,
+  title: 'About',
+  badge: {
+    label: 'Draft',
+    intent: 'draft'
+  }
+}];
+describe('CardSortableList', function () {
+  it('renders a badge for each item that has badge text', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      items: items
+    }));
+    expect(_react.screen.getByText('Active')).toBeInTheDocument();
+    expect(_react.screen.getByText('Draft')).toBeInTheDocument();
+  });
+  it('renders no badge for an item without badge text', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          id: 1,
+          title: 'Homepage'
+        }]
+      })),
+      container = _render.container;
+    expect(_react.screen.getByText('Homepage')).toBeInTheDocument();
+    // An unguarded Badge would still emit an empty span, so assert on element children.
+    expect(container.querySelector('h3').children).toHaveLength(0);
+  });
+});

package/dist/cjs/collapsible-group/context.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTitleLevel = exports.TitleLevelContext = void 0;
+var _element = require("@wordpress/element");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+var TitleLevelContext = exports.TitleLevelContext = (0, _element.createContext)(2);
+var useTitleLevel = exports.useTitleLevel = function useTitleLevel() {
+  return (0, _element.useContext)(TitleLevelContext);
+};

package/dist/cjs/collapsible-group/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _item = _interopRequireDefault(require("./item"));
+var _root = _interopRequireDefault(require("./root"));
+/**
+ * CollapsibleGroup
+ */
+
+/**
+ * Internal dependencies
+ */
+
+// The group is itself renderable, so `Item` hangs off it rather than forming a namespace object like `Drawer`.
+var CollapsibleGroup = Object.assign(_root["default"], {
+  Item: _item["default"]
+});
+CollapsibleGroup.displayName = 'CollapsibleGroup';
+_item["default"].displayName = 'CollapsibleGroup.Item';
+var _default = exports["default"] = CollapsibleGroup;

package/dist/cjs/collapsible-group/index.test.js

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@testing-library/react");
+var _index = _interopRequireDefault(require("./index"));
+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; } /**
+ * External dependencies
+ */ /**
+ * Internal dependencies
+ */
+var renderItems = function renderItems(count) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread(_objectSpread({}, props), {}, {
+    children: Array.from({
+      length: count
+    }, function (_, i) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"].Item, {
+        title: "Panel ".concat(i),
+        children: "content"
+      }, i);
+    })
+  })));
+};
+var dividers = function dividers(container) {
+  return container.querySelectorAll('.newspack-divider');
+};
+var items = function items(container) {
+  return container.querySelectorAll('.newspack-collapsible-group__item');
+};
+describe('CollapsibleGroup dividers', function () {
+  it('renders no divider for a single item', function () {
+    var _renderItems = renderItems(1),
+      container = _renderItems.container;
+    expect(items(container)).toHaveLength(1);
+    expect(dividers(container)).toHaveLength(0);
+  });
+  it('renders a divider between items but not after the last', function () {
+    var _renderItems2 = renderItems(3),
+      container = _renderItems2.container;
+    expect(items(container)).toHaveLength(3);
+    expect(dividers(container)).toHaveLength(2);
+    expect(container.querySelector('.newspack-collapsible-group').lastElementChild).not.toHaveClass('newspack-divider');
+  });
+  it('counts only rendered items when placing dividers', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_index["default"], {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"].Item, {
+          title: "Panel 0",
+          children: "content"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"].Item, {
+          title: "Panel 1",
+          children: "content"
+        }), false, 'trailing text']
+      })),
+      container = _render.container;
+    expect(items(container)).toHaveLength(2);
+    expect(dividers(container)).toHaveLength(1);
+    expect(container.querySelector('.newspack-collapsible-group').lastElementChild).not.toHaveClass('newspack-divider');
+  });
+  it('renders tertiary dividers', function () {
+    var _renderItems3 = renderItems(2),
+      container = _renderItems3.container;
+    expect(dividers(container)[0]).toHaveClass('newspack-divider--variant-tertiary');
+  });
+});
+describe('CollapsibleGroup titleLevel', function () {
+  it('renders item titles as h2 by default', function () {
+    renderItems(2);
+    expect(_react.screen.getAllByRole('heading', {
+      level: 2
+    })).toHaveLength(2);
+  });
+  it('renders every item title at the level given', function () {
+    renderItems(2, {
+      titleLevel: 3
+    });
+    expect(_react.screen.getAllByRole('heading', {
+      level: 3
+    })).toHaveLength(2);
+    expect(_react.screen.queryByRole('heading', {
+      level: 2
+    })).not.toBeInTheDocument();
+  });
+  it('clamps a level above the heading range', function () {
+    renderItems(2, {
+      titleLevel: 7
+    });
+    expect(_react.screen.getAllByRole('heading', {
+      level: 6
+    })).toHaveLength(2);
+  });
+  it('clamps a level below the heading range', function () {
+    renderItems(1, {
+      titleLevel: 0
+    });
+    expect(_react.screen.getByRole('heading', {
+      level: 1
+    })).toBeInTheDocument();
+  });
+  it('inherits the level in a nested group', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      titleLevel: 4,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"].Item, {
+        title: "Outer",
+        defaultOpen: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"].Item, {
+            title: "Inner",
+            children: "content"
+          })
+        })
+      })
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 4,
+      name: 'Inner'
+    })).toBeInTheDocument();
+  });
+  it('inherits the level in a nested group when the title is hidden', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      titleLevel: 4,
+      hideSingleTitle: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"].Item, {
+        title: "Outer",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"].Item, {
+            title: "Inner",
+            children: "content"
+          })
+        })
+      })
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 4,
+      name: 'Inner'
+    })).toBeInTheDocument();
+  });
+});
+describe('CollapsibleGroup hideSingleTitle', function () {
+  it('keeps the title on a lone item by default', function () {
+    renderItems(1);
+    expect(_react.screen.getByRole('button', {
+      name: 'Panel 0'
+    })).toBeInTheDocument();
+  });
+  it('drops the title and opens a lone item when set', function () {
+    renderItems(1, {
+      hideSingleTitle: true
+    });
+    expect(_react.screen.queryByRole('button', {
+      name: 'Panel 0'
+    })).not.toBeInTheDocument();
+    expect(_react.screen.getByText('content')).toBeVisible();
+  });
+  it('leaves titles alone when there is more than one item', function () {
+    renderItems(2, {
+      hideSingleTitle: true
+    });
+    expect(_react.screen.getByRole('button', {
+      name: 'Panel 0'
+    })).toBeInTheDocument();
+    expect(_react.screen.getByRole('button', {
+      name: 'Panel 1'
+    })).toBeInTheDocument();
+  });
+});
+describe('CollapsibleGroup item state', function () {
+  it('expands only the item marked defaultOpen', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_index["default"], {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"].Item, {
+        title: "Open",
+        defaultOpen: true,
+        children: "open content"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"].Item, {
+        title: "Closed",
+        children: "closed content"
+      })]
+    }));
+    expect(_react.screen.getByRole('button', {
+      name: 'Open'
+    })).toHaveAttribute('aria-expanded', 'true');
+    expect(_react.screen.getByRole('button', {
+      name: 'Closed'
+    })).toHaveAttribute('aria-expanded', 'false');
+  });
+  it('leaves a collapsed panel reachable by find-in-page', function () {
+    var _renderItems4 = renderItems(1),
+      container = _renderItems4.container;
+    expect(container.querySelector('.newspack-collapsible-group__panel')).toHaveAttribute('hidden', 'until-found');
+    expect(_react.screen.getByText('content')).toBeInTheDocument();
+  });
+  it('opens an item when its trigger is clicked', function () {
+    var _renderItems5 = renderItems(1),
+      container = _renderItems5.container;
+    var trigger = _react.screen.getByRole('button', {
+      name: 'Panel 0'
+    });
+    _react.fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(container.querySelector('.newspack-collapsible-group__panel')).not.toHaveAttribute('hidden');
+  });
+  it('closes an open item when its trigger is clicked', function () {
+    var _renderItems6 = renderItems(1),
+      container = _renderItems6.container;
+    var trigger = _react.screen.getByRole('button', {
+      name: 'Panel 0'
+    });
+    _react.fireEvent.click(trigger);
+    _react.fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(container.querySelector('.newspack-collapsible-group__panel')).toHaveAttribute('hidden', 'until-found');
+  });
+});

package/dist/cjs/collapsible-group/item.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _icons = require("@wordpress/icons");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+var Item = function Item(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    title = _ref.title;
+  var titleLevel = (0, _context.useTitleLevel)();
+  if (!title) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('newspack-collapsible-group__item', className),
+      children: children
+    });
+  }
+  var Heading = "h".concat(titleLevel);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Collapsible.Root, {
+    className: (0, _classnames["default"])('newspack-collapsible-group__item', className),
+    defaultOpen: defaultOpen,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
+      className: "newspack-collapsible-group__heading",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Collapsible.Trigger, {
+        className: "newspack-collapsible-group__trigger",
+        children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: _icons.chevronDown,
+          size: 24
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Collapsible.Panel, {
+      className: "newspack-collapsible-group__panel",
+      hiddenUntilFound: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-collapsible-group__panel-inner",
+        children: children
+      })
+    })]
+  });
+};
+var _default = exports["default"] = Item;

package/dist/cjs/collapsible-group/root.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _element = require("@wordpress/element");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _divider = _interopRequireDefault(require("../divider"));
+var _context = require("./context");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+var clampTitleLevel = function clampTitleLevel(level) {
+  return Number.isFinite(level) ? Math.min(6, Math.max(1, Math.round(level))) : undefined;
+};
+var Root = function Root(_ref) {
+  var _clampTitleLevel;
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'xl' : _ref$gap,
+    _ref$hideSingleTitle = _ref.hideSingleTitle,
+    hideSingleTitle = _ref$hideSingleTitle === void 0 ? false : _ref$hideSingleTitle,
+    titleLevel = _ref.titleLevel;
+  var inheritedTitleLevel = (0, _context.useTitleLevel)();
+  var items = _element.Children.toArray(children).filter(_element.isValidElement);
+  var hideTitle = hideSingleTitle && items.length === 1;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.TitleLevelContext.Provider, {
+    value: (_clampTitleLevel = clampTitleLevel(titleLevel)) !== null && _clampTitleLevel !== void 0 ? _clampTitleLevel : inheritedTitleLevel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+      className: (0, _classnames["default"])('newspack-collapsible-group', className),
+      direction: "column",
+      gap: gap,
+      children: items.map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+          children: [hideTitle ? (0, _element.cloneElement)(item, {
+            title: undefined
+          }) : item, index < items.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+            variant: "tertiary",
+            marginBottom: 0,
+            marginTop: 0
+          })]
+        }, item.key);
+      })
+    })
+  });
+};
+var _default = exports["default"] = Root;

package/dist/cjs/collapsible-group/style.scss

@@ -0,0 +1,47 @@
+@use "../mixins" as mixins;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-collapsible-group {
+	&__heading {
+		margin: 0;
+	}
+
+	&__trigger {
+		@include wp-mixins.heading-large();
+		align-items: center;
+		background: none;
+		border: 0;
+		color: inherit;
+		cursor: pointer;
+		display: flex;
+		gap: wp-vars.$grid-unit-10;
+		justify-content: space-between;
+		padding: 0;
+		text-align: left;
+		width: 100%;
+
+		&:focus-visible {
+			@include mixins.wpds-focus-ring;
+			outline-offset: wp-vars.$grid-unit-05;
+		}
+
+		svg {
+			flex-shrink: 0;
+		}
+
+		&[aria-expanded="true"] svg {
+			transform: rotate(180deg);
+		}
+
+		@media (prefers-reduced-motion: no-preference) {
+			svg {
+				transition: transform 0.1s ease-out;
+			}
+		}
+	}
+
+	&__panel-inner {
+		padding-top: wp-vars.$grid-unit-30;
+	}
+}

package/dist/cjs/collapsible-group/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});