@carbon/ibm-products 2.71.0 → 2.72.0-rc.0

package/lib/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js

@@ -0,0 +1,102 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var floatingUi_dom = require('../../dom/dist/floating-ui.dom.js');
+require('react');
+require('react-dom');
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow$1 = options => {
+  function isRef(value) {
+    return {}.hasOwnProperty.call(value, 'current');
+  }
+  return {
+    name: 'arrow',
+    options,
+    fn(state) {
+      const {
+        element,
+        padding
+      } = typeof options === 'function' ? options(state) : options;
+      if (element && isRef(element)) {
+        if (element.current != null) {
+          return floatingUi_dom.arrow({
+            element: element.current,
+            padding
+          }).fn(state);
+        }
+        return {};
+      }
+      if (element) {
+        return floatingUi_dom.arrow({
+          element,
+          padding
+        }).fn(state);
+      }
+      return {};
+    }
+  };
+};
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = (options, deps) => ({
+  ...floatingUi_dom.offset(options),
+  options: [options, deps]
+});
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = (options, deps) => ({
+  ...floatingUi_dom.shift(options),
+  options: [options, deps]
+});
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = (options, deps) => ({
+  ...floatingUi_dom.flip(options),
+  options: [options, deps]
+});
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = (options, deps) => ({
+  ...arrow$1(options),
+  options: [options, deps]
+});
+
+exports.autoUpdate = floatingUi_dom.autoUpdate;
+exports.computePosition = floatingUi_dom.computePosition;
+exports.platform = floatingUi_dom.platform;
+exports.arrow = arrow;
+exports.flip = flip;
+exports.offset = offset;
+exports.shift = shift;

package/lib/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js

@@ -0,0 +1,182 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+function hasWindow() {
+  return typeof window !== 'undefined';
+}
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+}
+function isTableElement(element) {
+  return ['table', 'td', 'th'].includes(getNodeName(element));
+}
+function isTopLayer(element) {
+  return [':popover-open', ':modal'].some(selector => {
+    try {
+      return element.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
+function isContainingBlock(elementOrCss) {
+  const webkit = isWebKit();
+  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
+}
+function isLastTraversableNode(node) {
+  return ['html', 'body', '#document'].includes(getNodeName(node));
+}
+function getComputedStyle(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+}
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+
+exports.getComputedStyle = getComputedStyle;
+exports.getContainingBlock = getContainingBlock;
+exports.getDocumentElement = getDocumentElement;
+exports.getFrameElement = getFrameElement;
+exports.getNearestOverflowAncestor = getNearestOverflowAncestor;
+exports.getNodeName = getNodeName;
+exports.getNodeScroll = getNodeScroll;
+exports.getOverflowAncestors = getOverflowAncestors;
+exports.getParentNode = getParentNode;
+exports.getWindow = getWindow;
+exports.isContainingBlock = isContainingBlock;
+exports.isElement = isElement;
+exports.isHTMLElement = isHTMLElement;
+exports.isLastTraversableNode = isLastTraversableNode;
+exports.isNode = isNode;
+exports.isOverflowElement = isOverflowElement;
+exports.isShadowRoot = isShadowRoot;
+exports.isTableElement = isTableElement;
+exports.isTopLayer = isTopLayer;
+exports.isWebKit = isWebKit;

package/lib/node_modules/@floating-ui/utils/dist/floating-ui.utils.js

@@ -0,0 +1,164 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+const oppositeAlignmentMap = {
+  start: 'end',
+  end: 'start'
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+function getSideAxis(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+}
+function getSideList(side, isStart, rtl) {
+  const lr = ['left', 'right'];
+  const rl = ['right', 'left'];
+  const tb = ['top', 'bottom'];
+  const bt = ['bottom', 'top'];
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case 'left':
+    case 'right':
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
+  };
+}
+
+exports.clamp = clamp;
+exports.createCoords = createCoords;
+exports.evaluate = evaluate;
+exports.expandPaddingObject = expandPaddingObject;
+exports.floor = floor;
+exports.getAlignment = getAlignment;
+exports.getAlignmentAxis = getAlignmentAxis;
+exports.getAlignmentSides = getAlignmentSides;
+exports.getAxisLength = getAxisLength;
+exports.getExpandedPlacements = getExpandedPlacements;
+exports.getOppositeAlignmentPlacement = getOppositeAlignmentPlacement;
+exports.getOppositeAxis = getOppositeAxis;
+exports.getOppositeAxisPlacements = getOppositeAxisPlacements;
+exports.getOppositePlacement = getOppositePlacement;
+exports.getPaddingObject = getPaddingObject;
+exports.getSide = getSide;
+exports.getSideAxis = getSideAxis;
+exports.max = max;
+exports.min = min;
+exports.rectToClientRect = rectToClientRect;
+exports.round = round;

package/lib/settings.d.ts

@@ -67,8 +67,9 @@ export const pkg: {
         Nav: boolean;
         NavItem: boolean;
         NavList: boolean;
-        BigNumbers: boolean;
+        BigNumber: boolean;
         TruncatedList: boolean;
+        TruncatedText: boolean;
         DelimitedList: boolean;
         ScrollGradient: boolean;
         StringFormatter: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.71.0",
+  "version": "2.72.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,7 +48,6 @@
     "build:scss": "copyfiles '../ibm-products-styles/scss/**/*.*' ./ -u 2",
     "build:storybook": "yarn dlx cross-env \"NODE_OPTIONS=--max_old_space_size=8192\" && storybook build --quiet",
     "build:js-new": "node scripts/build",
-    "ci-check": "node scripts/import",
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate/index.mjs",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
@@ -82,16 +81,16 @@
     "@storybook/react-vite": "^9.0.13",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.29.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.30.0-rc.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
     "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.0.0",
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.30.0",
+    "jest-config-ibm-cloud-cognitive": "^1.31.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all": "^4.1.5",
@@ -108,12 +107,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.10",
-    "@carbon-labs/react-resizer": "^0.3.0",
-    "@carbon/feature-flags": "^0.27.0",
-    "@carbon/ibm-products-styles": "^2.67.0",
+    "@carbon-labs/react-resizer": "^0.5.0",
+    "@carbon/feature-flags": "^0.28.1",
+    "@carbon/ibm-products-styles": "^2.68.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.7.0",
-    "@carbon/utilities-react": "0.9.0",
+    "@carbon/utilities-react": "0.10.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -126,11 +125,11 @@
     "@carbon/grid": "^11.38.0",
     "@carbon/layout": "^11.36.0",
     "@carbon/motion": "^11.30.0",
-    "@carbon/react": "^1.85.1",
+    "@carbon/react": "^1.86.0",
     "@carbon/themes": "^11.55.0",
     "@carbon/type": "^11.42.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "6b1aa641b80b4df7b6fc51c91dfaaefbfccc1ae6"
+  "gitHead": "844a483091e668abe326d27da86108ec05be8860"
 }

package/scss/components/{BigNumbers/_big-numbers.scss → BigNumber/_big-number.scss}

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -17,11 +17,11 @@
 // TODO: @use '@carbon/styles/scss/grid';
 // or
 // TODO: @use '@carbon/styles/scss/grid';
-// BigNumbers uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by BigNumbers
+// BigNumber uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by BigNumber
 // The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--big-numbers;
-$skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
+$block-class: #{c4p-settings.$pkg-prefix}--big-number;
+$skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-number-skeleton;
 
 .#{$block-class}__label {
   @include type-style('label-01');

package/scss/components/{BigNumbers → BigNumber}/_carbon-imports.scss

@@ -1,11 +1,11 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-// Import any Carbon component styles used from BigNumbers in this file.
-// BigNumbers uses the following Carbon components:
+// Import any Carbon component styles used from BigNumber in this file.
+// BigNumber uses the following Carbon components:
 @use '@carbon/styles/scss/components/skeleton-styles';
 @use '@carbon/styles/scss/components/tooltip';

package/scss/components/{BigNumbers → BigNumber}/_index-with-carbon.scss

@@ -1,9 +1,9 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
 @use './carbon-imports';
-@use './big-numbers';
+@use './big-number';

package/scss/components/{BigNumbers → BigNumber}/_index.scss

@@ -1,8 +1,8 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@use './big-numbers';
+@use './big-number';

package/scss/components/Card/_card.scss

@@ -18,11 +18,13 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class} {
+  border: 1px solid transparent;
   background-color: $layer-01;
   color: $text-primary;
 }
 
 .#{$block-class}__clickable {
+  border-color: $border-tile-01;
   cursor: pointer;
   // stylelint-disable-next-line carbon/motion-easing-use
   transition: background-color $duration-fast-02;

package/scss/components/Coachmark/_bubble.scss

@@ -0,0 +1,62 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as theme;
+@use '@carbon/styles/scss/themes' as themes;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/utilities';
+@use '../../../../ibm-products-styles/src/global/styles/project-settings' as
+  c4p-settings;
+
+$prefix: #{c4p-settings.$pkg-prefix} !default;
+
+.#{$prefix}__bubble {
+  position: fixed;
+  z-index: 10000;
+  display: none;
+  padding: $spacing-05;
+  border-radius: $spacing-01;
+  /* stylelint-disable-next-line declaration-no-important */
+  background: theme.$layer !important;
+  color: theme.$text-primary;
+  font-weight: bold;
+  inline-size: max-content;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+}
+
+.#{$prefix}__bubble-hidden {
+  display: none;
+}
+
+.#{$prefix}__bubble-open {
+  display: grid;
+  pointer-events: all;
+}
+
+.#{$prefix}__bubble-drop-shadow {
+  filter: drop-shadow(0 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2));
+}
+
+.#{$prefix}__bubble__arrow {
+  position: absolute;
+  z-index: 10010;
+  background: theme.$layer;
+  block-size: $spacing-04;
+  inline-size: $spacing-04;
+  transform: rotate(45deg);
+}
+
+.#{$prefix}__bubble__header {
+  z-index: 10020;
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: -$spacing-05;
+  margin-inline: -$spacing-05;
+}