@carbon/ibm-products 2.43.2-canary.7 → 2.43.2-canary.70

package/lib/components/Toolbar/ToolbarButton.js

@@ -37,7 +37,7 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Icon = renderIcon;
   return /*#__PURE__*/React__default["default"].createElement(react.IconButton, _rollupPluginBabelHelpers["extends"]({
-    align: ((_useContext = React.useContext(Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
+    align: (_useContext = React.useContext(Toolbar.ToolbarContext)) !== null && _useContext !== void 0 && _useContext.vertical ? 'right' : 'top'
   }, rest, {
     label: iconDescription,
     ref: ref,

package/lib/components/WebTerminal/WebTerminal.js

@@ -19,6 +19,7 @@ var react = require('@carbon/react');
 var carbonMotion = require('@carbon/motion');
 var index = require('./hooks/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -65,10 +66,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
     setRender = _useState2[1];
-  var _ref2 = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-      matches: true
-    },
-    prefersReducedMotion = _ref2.matches;
+  var shouldReduceMotion = usePrefersReducedMotion["default"]();
   var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit forwards', " ").concat(carbonMotion.moderate02);
   var showDocumentationLinks = React.useMemo(function () {
     return documentationLinks.length > 0;
@@ -101,7 +99,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
       If the user prefers reduced motion, we have to manually set render to false
       because onAnimationEnd will never be called.
     */
-    if (prefersReducedMotion) {
+    if (shouldReduceMotion) {
       setRender(false);
     }
     closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
@@ -110,7 +108,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     ref: ref,
     className: cx__default["default"]([blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
-      animation: !prefersReducedMotion ? webTerminalAnimationName : ''
+      animation: !shouldReduceMotion ? webTerminalAnimationName : ''
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default["default"].createElement("header", {
@@ -128,15 +126,15 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     "aria-label": documentationLinksIconDescription,
     menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
     size: "lg"
-  }, documentationLinks.map(function (_ref4, i) {
-    var rest = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref4), _ref4));
+  }, documentationLinks.map(function (_ref3, i) {
+    var rest = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref3), _ref3));
     return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers["extends"]({
       key: i
     }, rest));
-  })), actions.map(function (_ref5) {
-    var renderIcon = _ref5.renderIcon,
-      onClick = _ref5.onClick,
-      iconDescription = _ref5.iconDescription;
+  })), actions.map(function (_ref4) {
+    var renderIcon = _ref4.renderIcon,
+      onClick = _ref4.onClick,
+      iconDescription = _ref4.iconDescription;
     return /*#__PURE__*/React__default["default"].createElement(react.Button, {
       key: iconDescription,
       hasIconOnly: true,

package/lib/components/index.d.ts

@@ -50,7 +50,6 @@ export { Nav } from "./Nav";
 export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { ScrollGradient } from "./ScrollGradient";
-export { StatusIndicator } from "./StatusIndicator";
 export { TagOverflow } from "./TagOverflow";
 export { ActionBar } from "./ActionBar";
 export { ConditionBuilder } from "./ConditionBuilder";
@@ -68,5 +67,6 @@ export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
 export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
 export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
 export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
+export { StatusIndicator, StatusIndicatorStep } from "./StatusIndicator";
 export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from "./FeatureFlags";

package/lib/global/js/hooks/useFocus.d.ts

@@ -1,3 +1,4 @@
+export function getSpecificElement(parentEl: any, elementId: any): any;
 export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
     firstElement: any;
     lastElement: any;

package/lib/global/js/hooks/useFocus.js

@@ -13,6 +13,9 @@ var react = require('@carbon/react');
 var settings = require('../../../settings.js');
 var React = require('react');
 
+var getSpecificElement = function getSpecificElement(parentEl, elementId) {
+  return elementId ? parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId) : null;
+};
 var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var carbonPrefix = react.usePrefix();
   var tearsheetBaseClass = "".concat(settings.pkg.prefix, "--tearsheet");
@@ -43,7 +46,7 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
     var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
     var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
     var all = focusableElements;
-    var specifiedElement = selectorPrimaryFocus ? modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelector(selectorPrimaryFocus) : null;
+    var specifiedElement = getSpecificElement(modalEl, selectorPrimaryFocus);
     return {
       first: first,
       last: last,
@@ -88,4 +91,5 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   };
 };
 
+exports.getSpecificElement = getSpecificElement;
 exports.useFocus = useFocus;

package/lib/global/js/hooks/usePrefersReducedMotion.js

@@ -11,19 +11,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var window$1 = require('../utils/window.js');
+var useIsomorphicEffect = require('./useIsomorphicEffect.js');
 
 var usePrefersReducedMotion = function usePrefersReducedMotion() {
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     prefersReducedMotion = _useState2[0],
     setPrefersReducedMotion = _useState2[1];
-  React.useEffect(function () {
-    if (window$1.hasDocument()) {
-      var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)'),
-        matches = _window$matchMedia.matches;
-      setPrefersReducedMotion(matches);
-    }
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var mediaQueryList = window.matchMedia('(prefers-reduced-motion: no-preference)');
+    var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: no-preference)'),
+      matches = _window$matchMedia.matches;
+    setPrefersReducedMotion(!matches);
+    var listener = function listener(event) {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addEventListener('change', listener);
+    return function () {
+      mediaQueryList.removeEventListener('change', listener);
+    };
   }, []);
   return prefersReducedMotion;
 };

package/lib/global/js/package-settings.d.ts

@@ -39,6 +39,7 @@ declare namespace defaults {
         let ErrorEmptyState: boolean;
         let ExportModal: boolean;
         let ExpressiveCard: boolean;
+        let FullPageError: boolean;
         let HTTPError403: boolean;
         let HTTPError404: boolean;
         let HTTPErrorOther: boolean;
@@ -80,7 +81,6 @@ declare namespace defaults {
         let BigNumbers: boolean;
         let TruncatedList: boolean;
         let DelimitedList: boolean;
-        let FullPageError: boolean;
         let ScrollGradient: boolean;
         let StringFormatter: boolean;
         let StatusIndicator: boolean;

package/lib/global/js/package-settings.js

@@ -41,6 +41,7 @@ var defaults = {
     ErrorEmptyState: true,
     ExportModal: true,
     ExpressiveCard: true,
+    FullPageError: true,
     HTTPError403: true,
     HTTPError404: true,
     HTTPErrorOther: true,
@@ -83,7 +84,6 @@ var defaults = {
     BigNumbers: false,
     TruncatedList: false,
     DelimitedList: false,
-    FullPageError: false,
     ScrollGradient: false,
     StringFormatter: false,
     StatusIndicator: false,

package/lib/index.js

@@ -126,6 +126,7 @@ var StringFormatter = require('./components/StringFormatter/StringFormatter.js')
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
 var ScrollGradient = require('./components/ScrollGradient/ScrollGradient.js');
 var StatusIndicator = require('./components/StatusIndicator/StatusIndicator.js');
+var StatusIndicatorStep = require('./components/StatusIndicator/StatusIndicatorStep.js');
 var TagOverflow = require('./components/TagOverflow/TagOverflow.js');
 var ActionBar = require('./components/ActionBar/ActionBar.js');
 var FilterPanel = require('./components/FilterPanel/FilterPanel.js');
@@ -535,6 +536,10 @@ Object.defineProperty(exports, 'StatusIndicator', {
 	enumerable: true,
 	get: function () { return StatusIndicator.StatusIndicator; }
 });
+Object.defineProperty(exports, 'StatusIndicatorStep', {
+	enumerable: true,
+	get: function () { return StatusIndicatorStep.StatusIndicatorStep; }
+});
 Object.defineProperty(exports, 'TagOverflow', {
 	enumerable: true,
 	get: function () { return TagOverflow.TagOverflow; }

package/lib/settings.d.ts

@@ -25,6 +25,7 @@ export const pkg: {
         ErrorEmptyState: boolean;
         ExportModal: boolean;
         ExpressiveCard: boolean;
+        FullPageError: boolean;
         HTTPError403: boolean;
         HTTPError404: boolean;
         HTTPErrorOther: boolean;
@@ -66,7 +67,6 @@ export const pkg: {
         BigNumbers: boolean;
         TruncatedList: boolean;
         DelimitedList: boolean;
-        FullPageError: boolean;
         ScrollGradient: boolean;
         StringFormatter: boolean;
         StatusIndicator: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.7+b2a413a06",
+  "version": "2.43.2-canary.70+b0f63caf5",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,7 +26,8 @@
     "lib",
     "scss",
     "flags.js",
-    "telemetry.yml"
+    "telemetry.yml",
+    ".playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json"
   ],
   "keywords": [
     "carbon",
@@ -80,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.2.0",
+    "jest-config-ibm-cloud-cognitive": "^1.3.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -88,14 +89,14 @@
     "rimraf": "^5.0.5",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.70.0",
+    "sass": "^1.77.2",
     "typescript-config-carbon": "^0.2.1",
     "yargs": "^17.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.39.0",
+    "@carbon/ibm-products-styles": "^2.40.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -119,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "b2a413a067c999839c9481e3fa7d1fd8b1e3d2ff"
+  "gitHead": "b0f63caf5098caf27f6039ad4d9a8519d7cf63a1"
 }

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -49,7 +49,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__condition-block {
   display: flex;
-  width: max-content;
+  width: fit-content;
   flex-direction: row;
 }
 .#{$block-class}__content-container {

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -1,6 +1,6 @@
 @use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/spacing' as *;
-@use '@carbon/react/scss/motion';
+@use '@carbon/react/scss/motion' as *;
 @use '@carbon/styles/scss/components/tag' as *;
 @use '@carbon/styles/scss/utilities/focus-outline';
 @use '../../../global/styles/project-settings' as c4p-settings;
@@ -30,7 +30,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__condition__deletion-preview
   .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
-    .#{$block-class}__connector-button
+    .#{$block-class}__connector-button,
+    .#{$block-class}__add-button
   ) {
   background-color: $tag-background-red;
   color: $tag-color-red;
@@ -52,8 +53,19 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   text-wrap: nowrap;
 }
 .#{$block-class}__group-preview {
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: all $duration-moderate-02 motion(exit, expressive);
+  .#{$block-class}__preview-condition {
+    display: flex;
+  }
+}
+.#{$block-class}__group-preview-animate {
+  height: auto;
   opacity: 0.5;
   pointer-events: none;
+  transition: all $duration-moderate-02 motion(exit, expressive);
 }
 .#{$block-class}__connector-disabled {
   display: flex;

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -96,7 +96,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__item-date,
 .#{$block-class}__item-text,
 .#{$block-class}__item-number,
-#{$block-class}__item-time {
+.#{$block-class}__item-time {
   padding-block-end: $spacing-05;
   padding-inline: $spacing-05;
 }
@@ -212,7 +212,12 @@ $colors: (
     background-color: $layer;
   }
   .#{$block-class}__condition-wrapper > :nth-child(1) .#{$block-class}__button,
-  .#{$block-class}__condition-wrapper > :nth-child(2) .#{$block-class}__button {
+  .#{$block-class}__condition-wrapper
+    > :nth-child(2)
+    .#{$block-class}__button:not(
+      .#{$block-class}__add-button,
+      .#{$block-class}__add-condition-sub-group
+    ) {
     /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
   }
@@ -229,3 +234,27 @@ $colors: (
   align-self: center;
   margin-left: auto;
 }
+.#{$block-class}__add-condition-sub-group-wrapper {
+  z-index: -1;
+  width: 0;
+  margin-left: -50%;
+  opacity: 0;
+  pointer-events: none;
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+  transition: all linear $duration-fast-02;
+}
+.#{$block-class}__add-condition-sub-group-wrapper--show {
+  z-index: 0;
+  width: auto;
+  margin-left: 0;
+  opacity: 1;
+  pointer-events: all;
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+  transition: all linear $duration-fast-02;
+}
+.#{$block-class}__invalid-input {
+  display: flex;
+}
+.#{$block-class}__invalid-input > svg {
+  color: $support-warning;
+}

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -98,6 +98,7 @@ $header-cell-background: $layer-accent-01;
     position: sticky;
     z-index: 4;
     left: 0;
+    background-color: $background;
   }
   .#{$block-class}__td-th.#{$block-class}__td {
     @include font-family.font-weight('semibold');
@@ -200,6 +201,13 @@ $header-cell-background: $layer-accent-01;
       outline: 0;
     }
   }
+
+  .#{$block-class}__td-th.#{$block-class}__td_custom {
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-03;
+  }
+
   .#{$block-class}__selection-area--element {
     position: absolute;
     z-index: 2;
@@ -251,7 +259,9 @@ $header-cell-background: $layer-accent-01;
         background-color: $background-inverse;
       }
     }
-    .#{$block-class}__th--selected-header.#{$block-class}__th {
+    .#{$block-class}__th--selected-header.#{$block-class}__th:not(
+        .#{$block-class}__th--active-header-disabledSwapping
+      ) {
       cursor: grab;
     }
     .#{$block-class}__th--selected-header-reorder-active.#{$block-class}__th {
@@ -267,6 +277,9 @@ $header-cell-background: $layer-accent-01;
     width: $spacing-01;
     background-color: $background-brand;
   }
+  .#{$block-class}__th--active-header-disabledSwapping {
+    cursor: pointer;
+  }
   .#{$block-class}__th--active-header,
   .#{$block-class}__td-th--active-header.#{$block-class}__td {
     background-color: $background-selected-hover;
@@ -282,7 +295,9 @@ $header-cell-background: $layer-accent-01;
       background-color: $background-inverse;
     }
   }
-  .#{$block-class}__th--selected-header.#{$block-class}__th {
+  .#{$block-class}__th--selected-header.#{$block-class}__th:not(
+      .#{$block-class}__th--active-header-disabledSwapping
+    ) {
     cursor: grab;
   }
   .#{$block-class}__th--selected-header-reorder-active.#{$block-class}__th {

package/scss/components/Datagrid/_datagrid.scss

@@ -80,7 +80,3 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   ) {
   min-width: auto;
 }
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--pagination {
-  background-color: $layer-02;
-}

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -80,6 +80,19 @@ $row-heights: (
   align-items: center;
 }
 
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox-focus
+  .cds--checkbox-label::before {
+  outline: $spacing-01 solid $focus;
+  outline-offset: 1px;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox {
+  display: flex;
+  height: -webkit-fill-available;
+  justify-content: center;
+  padding-inline: $spacing-05;
+}
+
 .#{variables.$block-class}__static--outer-cell {
   display: flex;
   height: -webkit-fill-available;

package/scss/components/HTTPErrors/_http-errors.scss

@@ -13,6 +13,9 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $block-class: #{c4p-settings.$pkg-prefix}--http-errors;
+$block-class-404: #{c4p-settings.$pkg-prefix}--http-errors-404;
+$block-class-403: #{c4p-settings.$pkg-prefix}--http-errors-403;
+$block-class-other: #{c4p-settings.$pkg-prefix}--http-errors-other;
 
 .#{$block-class} .#{$block-class}__content {
   position: fixed;
@@ -66,3 +69,77 @@ $block-class: #{c4p-settings.$pkg-prefix}--http-errors;
     transform: scale(1.5);
   }
 }
+/* stylelint-disable carbon/theme-token-use */
+
+.#{$block-class-404}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-404}__prefix-cls-67 {
+  fill: #697077;
+}
+.#{$block-class-404}__prefix-cls-68 {
+  fill: #282828;
+}
+.#{$block-class-404}__prefix-cls-69 {
+  fill: #51565c;
+}
+.#{$block-class-404}__prefix-cls-70 {
+  fill: #002b50;
+}
+.#{$block-class-404}__prefix-cls-71 {
+  fill: #413d3d;
+}
+.#{$block-class-404}__prefix-cls-72 {
+  fill: #908b8b;
+}
+.#{$block-class-404}__prefix-cls-75 {
+  fill: #a4a4a5;
+}
+.#{$block-class-404}__prefix-cls-76 {
+  opacity: 0.15;
+}
+.#{$block-class-403}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-403}__prefix-cls-80 {
+  mix-blend-mode: multiply;
+  opacity: 0.25;
+}
+.#{$block-class-403}__prefix-cls-75 {
+  fill: #595655;
+}
+.#{$block-class-403}__prefix-cls-76 {
+  opacity: 0.15;
+}
+.#{$block-class-403}__prefix-cls-77 {
+  fill: #373d42;
+}
+.#{$block-class-403}__prefix-cls-78 {
+  fill: #002b50;
+}
+.#{$block-class-403}__prefix-cls-81 {
+  fill: #2b2828;
+}
+.#{$block-class-other}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-other}__prefix-cls-69 {
+  fill: #697077;
+}
+.#{$block-class-other}__prefix-cls-70 {
+  fill: #282828;
+}
+.#{$block-class-other}__prefix-cls-71 {
+  fill: #51565c;
+}
+.#{$block-class-other}__prefix-cls-72 {
+  fill: #e0dbda;
+}
+.#{$block-class-other}__prefix-cls-73 {
+  fill: #003d73;
+}
+.#{$block-class-other}__prefix-cls-75 {
+  opacity: 0.15;
+}
+
+/* stylelint-enable */

package/scss/components/OptionsTile/_options-tile.scss

@@ -163,18 +163,18 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
   overflow: hidden;
 }
 
-.#{$block-class}:not(.#{$block-class}--closing)
-  > details[open]
-  .#{$block-class}__summary,
+.#{$block-class}__summary.#{$block-class}__summary--open:not(
+    .#{$block-class}__summary--closing
+  ),
 .#{$block-class}__summary--hidden {
   height: 0;
   margin-top: 0;
   opacity: 0;
 }
 
-.#{$block-class}:not(.#{$block-class}--closing)
-  > details[open]
-  .#{$block-class}__chevron {
+.#{$block-class}__chevron.#{$block-class}__chevron--open:not(
+    .#{$block-class}__chevron--closing
+  ) {
   transform: rotate(180deg);
 }
 

package/scss/components/SidePanel/_side-panel.scss

@@ -363,7 +363,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__slug-and-close {
-    position: fixed;
+    position: absolute;
     z-index: 10; /* must be higher than title container border bottom */
     top: 0;
     right: 0;

package/scss/components/StatusIcon/_status-icon.scss

@@ -73,7 +73,7 @@ $themes: ('light', 'dark');
 
 $block-class: #{$pkg-prefix}--status-icon;
 
-@function --clr($name, $theme: light) {
+@function carbon-clr($name, $theme: light) {
   // stylelint-disable-next-line carbon/theme-token-use
   $color: map-get(map-get($colors, $name), $theme);
   @return $color;
@@ -125,13 +125,13 @@ $block-class: #{$pkg-prefix}--status-icon;
           // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
           animation: rotating 8000ms infinite linear;
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
         } @else if $icon == running {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
         } @else {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
           @media (prefers-reduced-motion) {
             .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
               animation: none;

package/scss/components/StringFormatter/_string-formatter.scss

@@ -79,7 +79,7 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 .#{$block-class}
   .#{$popover-block-class}--top-right
   .#{$popover-block-class}-caret {
-  /* stylelint-disable-next-line declaration-no-important */
+  /* stylelint-disable-next-line */
   inset-block-start: -1px !important;
 }
 
@@ -92,6 +92,6 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 .#{$block-class}
   .#{$popover-block-class}--bottom-right
   .#{$popover-block-class}-caret {
-  /* stylelint-disable-next-line declaration-no-important */
+  /* stylelint-disable-next-line */
   inset-block-end: -1px !important;
 }

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -44,7 +44,7 @@ $themes: (
 
 $theme-keys: map-keys($themes);
 
-@function --get-background-color($color, $key, $contrast-key) {
+@function carbon-get-background-color($color, $key, $contrast-key) {
   @return map-get(
     $carbon-colors,
     #{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
@@ -59,7 +59,11 @@ $theme-keys: map-keys($themes);
     @each $contrast-key in $theme-keys {
       .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
         // stylelint-disable-next-line carbon/theme-token-use
-        background-color: --get-background-color($color, $key, $contrast-key);
+        background-color: carbon-get-background-color(
+          $color,
+          $key,
+          $contrast-key
+        );
       }
     }
   }

package/scss/components/_index-released-only.scss

@@ -23,6 +23,7 @@
 @use './EmptyStates';
 @use './ExportModal';
 @use './ExpressiveCard';
+@use './FullPageError';
 @use './HTTPErrors';
 @use './ImportModal';
 @use './MultiAddSelect';