@carbon/ibm-products 2.39.0 → 2.40.0

package/lib/components/Tearsheet/Tearsheet.d.ts

@@ -1,3 +1,121 @@
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { ButtonProps } from '@carbon/react';
+/**
+ * The accessibility title for the close icon (if shown).
+ *
+ * **Note:** This prop is only required if a close icon is shown, i.e. if
+ * there are a no navigation actions and/or hasCloseIcon is true.
+ */
+export type CloseIconDescriptionTypes = {
+    hasCloseIcon?: false;
+    closeIconDescription?: string;
+} | {
+    hasCloseIcon: true;
+    closeIconDescription: string;
+};
+interface TearsheetProps extends PropsWithChildren {
+    /**
+     * The navigation actions to be shown as buttons in the action area at the
+     * bottom of the tearsheet. Each action is specified as an object with
+     * optional fields: 'label' to supply the button label, 'kind' to select the
+     * button kind (must be 'primary', 'secondary' or 'ghost'), 'loading' to
+     * display a loading indicator, and 'onClick' to receive notifications when
+     * the button is clicked. Additional fields in the object will be passed to
+     * the Button component, and these can include 'disabled', 'ref', 'className',
+     * and any other Button props, except 'size'. Any other fields in the object will
+     * be passed through to the button element as HTML attributes.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions: ButtonProps[];
+    /**
+     * The aria-label for the tearsheet, which is optional.
+     * if it is not passed, the title will be used as the aria-label.
+     */
+    ariaLabel?: string;
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Enable a close icon ('x') in the header area of the tearsheet. By default,
+     * (when this prop is omitted, or undefined or null) a tearsheet does not
+     * display a close icon if there are navigation actions ("transactional
+     * tearsheet") and displays one if there are no navigation actions ("passive
+     * tearsheet"), and that behavior can be overridden if required by setting
+     * this prop to either true or false.
+     */
+    hasCloseIcon?: boolean;
+    /**
+     * The content for the influencer section of the tearsheet, displayed
+     * alongside the main content. This is typically a menu, or filter, or
+     * progress indicator, or similar.
+     */
+    influencer?: ReactNode;
+    /**
+     * The position of the influencer section, 'left' or 'right'.
+     */
+    influencerPosition?: 'left' | 'right';
+    /**
+     * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
+     * is 320px.
+     */
+    influencerWidth?: 'narrow' | 'wide';
+    /**
+     * A label for the tearsheet, displayed in the header area of the tearsheet
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * Navigation content, such as a set of tabs, to be displayed at the bottom
+     * of the header area of the tearsheet.
+     */
+    navigation?: ReactNode;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onClose?: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    /** @deprecated */
+    /**
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition?: 'normal' | 'lower';
+}
 /**
  * A tearsheet is a mostly full-screen type of dialog that keeps users
  * in-context and focused by bringing actionable content front and center while
@@ -10,9 +128,17 @@
  * panel on either the left or right side, the main content area, and a set of
  * action buttons.
  */
-export let Tearsheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export namespace deprecatedProps {
-    let verticalPosition: PropTypes.Requireable<string>;
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+export declare let Tearsheet: React.ForwardRefExoticComponent<(TearsheetProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     *
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition: PropTypes.Requireable<string>;
+};
+export {};

package/lib/components/Tearsheet/Tearsheet.js

@@ -23,17 +23,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["influencerPosition", "influencerWidth", "verticalPosition"];
+var _excluded = ["influencerPosition", "influencerWidth"];
 var componentName = 'Tearsheet';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values for props
-var defaults = {
-  influencerPosition: 'left',
-  influencerWidth: 'narrow',
-  verticalPosition: 'lower'
-};
+/**
+ * The accessibility title for the close icon (if shown).
+ *
+ * **Note:** This prop is only required if a close icon is shown, i.e. if
+ * there are a no navigation actions and/or hasCloseIcon is true.
+ */
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+
+// Note that the descriptions here should be kept in sync with those for the
+// corresponding props for TearsheetNarrow and TearsheetShell components.
 
 /**
  * A tearsheet is a mostly full-screen type of dialog that keeps users
@@ -49,16 +56,13 @@ var defaults = {
  */
 exports.Tearsheet = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$influencerPositi = _ref.influencerPosition,
-    influencerPosition = _ref$influencerPositi === void 0 ? defaults.influencerPosition : _ref$influencerPositi,
+    influencerPosition = _ref$influencerPositi === void 0 ? 'left' : _ref$influencerPositi,
     _ref$influencerWidth = _ref.influencerWidth,
-    influencerWidth = _ref$influencerWidth === void 0 ? defaults.influencerWidth : _ref$influencerWidth,
-    _ref$verticalPosition = _ref.verticalPosition,
-    verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
+    influencerWidth = _ref$influencerWidth === void 0 ? 'narrow' : _ref$influencerWidth,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, devtools.getDevtoolsProps(componentName)), rest), {}, {
     influencerPosition: influencerPosition,
     influencerWidth: influencerWidth,
-    verticalPosition: verticalPosition,
     ref: ref,
     size: 'wide'
   }));
@@ -103,7 +107,8 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: propsHelper.allPropTypes([ActionSet.ActionSet.validateActions(function () {
+  actions: propsHelper.allPropTypes([/**@ts-ignore */
+  ActionSet.ActionSet.validateActions(function () {
     return '2xl';
   }), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
     kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -127,6 +132,7 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
+  /**@ts-ignore */
   closeIconDescription: index["default"].string.isRequired.if(function (_ref2) {
     var actions = _ref2.actions,
       hasCloseIcon = _ref2.hasCloseIcon;
@@ -144,6 +150,7 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * tearsheet"), and that behavior can be overridden if required by setting
    * this prop to either true or false.
    */
+  /**@ts-ignore */
   hasCloseIcon: index["default"].bool,
   /**
    * The content for the influencer section of the tearsheet, displayed
@@ -166,6 +173,10 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * to page of a multi-page task).
    */
   label: index["default"].node,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  launcherButtonRef: index["default"].any,
   /**
    * Navigation content, such as a set of tabs, to be displayed at the bottom
    * of the header area of the tearsheet.
@@ -184,6 +195,7 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
+  /**@ts-ignore */
   portalTarget: TearsheetShell.portalType,
   /**
    * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens

package/lib/components/Tearsheet/TearsheetShell.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import { type ButtonProps } from '@carbon/react';
 interface TearsheetShellProps extends PropsWithChildren {
@@ -57,6 +57,10 @@ interface TearsheetShellProps extends PropsWithChildren {
      * to page of a multi-page task).
      */
     label?: ReactNode;
+    /**
+     * Provide a ref to return focus to once the tearsheet is closed.
+     */
+    launcherButtonRef?: RefObject<any>;
     /**
      * Navigation content, such as a set of tabs, to be displayed at the bottom
      * of the header area of the tearsheet. NB the navigation is only applicable

package/lib/components/Tearsheet/TearsheetShell.js

@@ -21,6 +21,7 @@ var react = require('@carbon/react');
 var Wrap = require('../../global/js/utils/Wrap.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
+var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -28,7 +29,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(settings.pkg.prefix, "--tearsheet");
@@ -91,6 +92,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
+    launcherButtonRef = _ref.launcherButtonRef,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = react.usePrefix();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
@@ -101,9 +103,11 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
   var modalRef = ref || localRef;
   var _useResizeObserver = useResizeObserver.useResizeObserver(resizer),
     width = _useResizeObserver.width;
-  var _useFocus = useFocus.useFocus(modalRef),
+  var prevOpen = usePreviousValue.usePreviousValue(open);
+  var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener;
+    keyDownListener = _useFocus.keyDownListener,
+    specifiedElement = _useFocus.specifiedElement;
   var modalRefValue = modalRef.current;
   var wide = size === 'wide';
 
@@ -142,17 +146,30 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
+    if (selectorPrimaryFocus) {
+      return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+    }
     firstElement === null || firstElement === void 0 || firstElement.focus();
   };
   React.useEffect(function () {
     if (open) {
-      // Focusing the first element
+      // Focusing the first element or selectorPrimaryFocus element
       setTimeout(function () {
+        if (selectorPrimaryFocus) {
+          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+        }
         firstElement === null || firstElement === void 0 || firstElement.focus();
       }, 0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
+  React.useEffect(function () {
+    if (prevOpen && !open && launcherButtonRef) {
+      setTimeout(function () {
+        launcherButtonRef.current.focus();
+      }, 0);
+    }
+  }, [launcherButtonRef, open, prevOpen]);
   React.useEffect(function () {
     if (open && position !== depth) {
       setTimeout(function () {
@@ -411,6 +428,11 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * to page of a multi-page task).
    */
   label: index["default"].node,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: index["default"].any,
   /**
    * Navigation content, such as a set of tabs, to be displayed at the bottom
    * of the header area of the tearsheet. NB the navigation is only applicable

package/lib/components/WebTerminal/WebTerminal.d.ts

@@ -41,6 +41,10 @@ interface WebTerminalProps extends PropsWithChildren {
      * Optionally pass if the web terminal should be open by default
      */
     isInitiallyOpen?: boolean;
+    /**
+     * Specifies aria label for Web terminal
+     */
+    webTerminalAriaLabel?: string;
 }
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.

package/lib/components/WebTerminal/WebTerminal.js

@@ -25,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen"];
+var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen", "webTerminalAriaLabel"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'WebTerminal';
@@ -36,7 +36,8 @@ var defaults = {
   actions: Object.freeze([]),
   documentationLinks: Object.freeze([]),
   documentationLinksIconDescription: 'Show documentation links',
-  isInitiallyOpen: false
+  isInitiallyOpen: false,
+  webTerminalAriaLabel: 'Web terminal header'
 };
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
@@ -53,6 +54,8 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
     _ref$isInitiallyOpen = _ref.isInitiallyOpen,
     isInitiallyOpen = _ref$isInitiallyOpen === void 0 ? defaults.isInitiallyOpen : _ref$isInitiallyOpen,
+    _ref$webTerminalAriaL = _ref.webTerminalAriaLabel,
+    webTerminalAriaLabel = _ref$webTerminalAriaL === void 0 ? defaults.webTerminalAriaLabel : _ref$webTerminalAriaL,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useWebTerminal = index.useWebTerminal(),
     open = _useWebTerminal.open,
@@ -111,6 +114,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default["default"].createElement("header", {
+    "aria-label": webTerminalAriaLabel,
     className: "".concat(blockClass, "__bar")
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__actions")
@@ -205,5 +209,9 @@ exports.WebTerminal.propTypes = {
   /**
    * Optionally pass if the web terminal should be open by default
    */
-  isInitiallyOpen: index$1["default"].bool
+  isInitiallyOpen: index$1["default"].bool,
+  /**
+   * Specifies aria label for Web terminal
+   */
+  webTerminalAriaLabel: index$1["default"].string
 };

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

@@ -1,11 +1,13 @@
-export function useFocus(modalRef: any): {
+export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
     firstElement: any;
     lastElement: any;
     allElements: any;
+    specifiedElement: any;
     keyDownListener: (event: any) => void;
     getFocusable: () => {
         first: any;
         last: any;
         all: any;
+        specifiedElement: any;
     };
 };

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

@@ -13,7 +13,7 @@ var react = require('@carbon/react');
 var settings = require('../../../settings.js');
 var React = require('react');
 
-var useFocus = function useFocus(modalRef) {
+var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var carbonPrefix = react.usePrefix();
   var tearsheetBaseClass = "".concat(settings.pkg.prefix, "--tearsheet");
   // Querying focusable element in the modal
@@ -43,12 +43,14 @@ var useFocus = function useFocus(modalRef) {
     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;
     return {
       first: first,
       last: last,
-      all: all
+      all: all,
+      specifiedElement: specifiedElement
     };
-  }, [modalEl, query]);
+  }, [modalEl, query, selectorPrimaryFocus]);
   React.useEffect(function () {
     getFocusable();
   }, [getFocusable]);
@@ -80,6 +82,7 @@ var useFocus = function useFocus(modalRef) {
     firstElement: getFocusable().first,
     lastElement: getFocusable().last,
     allElements: getFocusable().all,
+    specifiedElement: getFocusable().specified,
     keyDownListener: handleKeyDown,
     getFocusable: getFocusable
   };

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

@@ -5,5 +5,5 @@ export function useRetrieveStepData({ stepsContext, stepNumber, introStep, inval
     invalid: boolean;
     shouldIncludeStep: boolean;
     secondaryLabel: string;
-    title: string;
+    title: React.ReactNode;
 }): void;

package/lib/global/js/hooks/useRetrieveStepData.js

@@ -22,7 +22,7 @@ var React = require('react');
  * @param {boolean} useResetCreateComponent.invalid
  * @param {boolean} useResetCreateComponent.shouldIncludeStep
  * @param {string} useResetCreateComponent.secondaryLabel
- * @param {string} useResetCreateComponent.title
+ * @param {React.ReactNode} useResetCreateComponent.title
  */
 var useRetrieveStepData = function useRetrieveStepData(_ref) {
   var stepsContext = _ref.stepsContext,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.39.0",
+  "version": "2.40.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -92,7 +92,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.37.0",
+    "@carbon/ibm-products-styles": "^2.37.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -116,5 +116,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "90e3441d8fdfc65023988bd734089c72fba0799b"
+  "gitHead": "2fbbfdc269add9b97a3eac30e5570b91ec80fd82"
 }

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -14,6 +14,7 @@
 @use '@carbon/react/scss/motion' as *;
 @use '@carbon/react/scss/colors' as *;
 @use '@carbon/react/scss/theme' as *;
+@use '@carbon/layout/scss/convert';
 @use '@carbon/styles/scss/components/button/tokens' as *;
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
@@ -43,7 +44,7 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
   &--is-mounted {
     bottom: 0;
     /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
-    transition: transform $duration-moderate-02 motion(exit, productive);
+    transition: $duration-moderate-02 motion(exit, productive);
     @media (prefers-reduced-motion) {
       transition: none;
     }
@@ -60,7 +61,8 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
     bottom: 0;
     overflow: hidden;
     pointer-events: none;
-    transform: perspective(carbon--mini-units(18))
+    /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
+    transform: perspective(convert.to-rem(144px))
       translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1));
     transform-origin: top center;
     visibility: visible;

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

@@ -14,5 +14,6 @@ $side-panel-sizes: (
   sm: 20rem,
   md: 30rem,
   lg: 40rem,
+  xl: 65rem,
   2xl: 40rem 75%,
 );

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

@@ -48,7 +48,7 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
   line-height: inherit;
 }
 
-.#{$popover-block-class} {
+.#{$block-class} .#{$popover-block-class} {
   max-width: $spacing-05;
   margin: 0 auto;
 }

package/telemetry.yml

@@ -132,6 +132,7 @@ collect:
         - kind
         - label
         - labelText
+        - launcherButtonRef
         - legendText
         - link
         - links
@@ -795,6 +796,7 @@ collect:
         - documentationLinks
         - documentationLinksIconDescription
         - isInitiallyOpen
+        - webTerminalAriaLabel
         # React
         - key
         - ref