@splunk/react-ui 4.33.0 → 4.35.0

package/JSONTree.js

@@ -168,10 +168,10 @@
                     N(r);
                     v === null || v === void 0 ? void 0 : v(r, n);
                 };
-                var B = function e(n) {
+                var U = function e(n) {
                     j === null || j === void 0 ? void 0 : j(n, r);
                 };
-                var U = function e(r) {
+                var B = function e(r) {
                     var n;
                     r.stopPropagation();
                     F === null || F === void 0 ? void 0 : (n = F.current) === null || n === void 0 ? void 0 : n.focus();
@@ -210,7 +210,7 @@
                         onClick: function e(r) {
                             var n, t;
                             J(!_, r);
-                            B(r);
+                            U(r);
                             (n = (t = S.props).onClick) === null || n === void 0 ? void 0 : n.call(t, r);
                         },
                         "aria-expanded": _
@@ -221,7 +221,7 @@
                     ref: M,
                     tabIndex: q,
                     onBlur: H,
-                    onFocus: U,
+                    onFocus: B,
                     onKeyDown: z,
                     role: "treeitem",
                     "aria-labelledby": u,
@@ -230,7 +230,7 @@
                     ref: F,
                     tabIndex: -1,
                     onFocus: X,
-                    onClick: B
+                    onClick: U
                 },  o().createElement(s, null, a), W(), !_ && l), _ &&  o().createElement(o().Fragment, null,  o().createElement(y, {
                     role: "group",
                     $defaultIndent: C
@@ -398,7 +398,7 @@
             function J(e) {
                 return _(e, "0");
             }
-            function B(e) {
+            function U(e) {
                 var r = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "0";
                 var n = _(e, r);
                 var t = r;
@@ -417,11 +417,11 @@
                 }
  // continue to find its last child recursively
                                 t = "".concat(t, "-0");
-                return B(e, t);
+                return U(e, t);
             }
             // CONCATENATED MODULE: ./src/Tree/Tree.tsx
-            function U() {
-                U = Object.assign || function(e) {
+            function B() {
+                B = Object.assign || function(e) {
                     for (var r = 1; r < arguments.length; r++) {
                         var n = arguments[r];
                         for (var t in n) {
@@ -432,7 +432,7 @@
                     }
                     return e;
                 };
-                return U.apply(this, arguments);
+                return B.apply(this, arguments);
             }
             function H(e, r) {
                 return Q(e) || G(e, r) || z(e, r) || X();
@@ -555,7 +555,7 @@
 
                       case "end":
                         r.preventDefault();
-                        v(B(s));
+                        v(U(s));
                         break;
 
                       default:
@@ -589,7 +589,7 @@
                         itemPaths: s,
                         focusedItemId: d
                     }
-                },  o().createElement(y, U({
+                },  o().createElement(y, B({
                     role: "tree",
                     $defaultIndent: a
                 }, i), r));
@@ -705,7 +705,7 @@
         n.r(t);
         // EXPORTS
                 n.d(t, {
-            default: () => /* reexport */ Se
+            default: () => /* reexport */ ke
         });
         // EXTERNAL MODULE: external "react"
                 var e = n(9497);
@@ -722,9 +722,9 @@
         // EXTERNAL MODULE: external "@splunk/themes"
                 var f = n(3563);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeStyles.ts
-        var d = (0, u.css)([ "", ";", ";&:focus-within{border:", ";}" ], f.mixins.reset("block"), f.mixins.typography({
+        var d = (0, u.css)([ "", ";", ";" ], f.mixins.reset("block"), f.mixins.typography({
             family: "monospace"
-        }), f.variables.activeBorder);
+        }));
         var v = c().code.withConfig({
             displayName: "JSONTreeStyles__StyledScrollCode",
             componentId: "vrdt21-0"
@@ -916,8 +916,8 @@
         const $ = require("@splunk/react-ui/Clickable");
         var J =  n.n($);
         // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-        const B = require("@splunk/react-ui/Tooltip");
-        var U =  n.n(B);
+        const U = require("@splunk/react-ui/Tooltip");
+        var B =  n.n(U);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeItemStyles.ts
         var H = {
             string: f.variables.syntaxTeal,
@@ -928,43 +928,45 @@
         };
         var X = (0, u.css)([ "word-break:break-word;word-wrap:break-word;" ]);
         var z = (0, u.css)([ "white-space:nowrap;" ]);
-        var W = c().span.withConfig({
-            displayName: "JSONTreeItemStyles__StyledValue",
-            componentId: "o558h3-0"
-        })([ "color:", ";", ";" ], (function(e) {
+        var W = (0, u.css)([ "color:", ";", ";" ], (function(e) {
             var r = e.valueType;
             return H[r];
         }), (function(e) {
             var r = e.overflowType;
             return r === "wrap" ? X : z;
         }));
-        var G = c()(W.withComponent(J())).withConfig({
+        var G = c().span.withConfig({
+            displayName: "JSONTreeItemStyles__StyledValue",
+            componentId: "o558h3-0"
+        })([ "", "" ], W);
+        var Q = c()(J()).withConfig({
             displayName: "JSONTreeItemStyles__StyledValueInteractiveClickable",
             componentId: "o558h3-1"
-        })([ "font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], f.variables.focusColor, (0, 
+        })([ "", " font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], W, f.variables.focusColor, (0, 
         f.pick)({
             enterprise: f.variables.backgroundColorHover,
             prisma: f.variables.interactiveColorOverlayHover
         }));
-        var Q = c().span.withConfig({
-            displayName: "JSONTreeItemStyles__StyledProperty",
-            componentId: "o558h3-2"
-        })([ "font-weight:bold;color:", ";" ], (0, f.pick)({
+        var Y = (0, u.css)([ "font-weight:bold;color:", ";" ], (0, f.pick)({
             enterprise: {
                 dark: "#ec9f98",
                 light: f.variables.syntaxRed
             },
             prisma: f.variables.syntaxRed
         }));
-        var Y = c()(Q.withComponent(J())).withConfig({
+        var Z = c().span.withConfig({
+            displayName: "JSONTreeItemStyles__StyledProperty",
+            componentId: "o558h3-2"
+        })([ "", "" ], Y);
+        var ee = c()(J()).withConfig({
             displayName: "JSONTreeItemStyles__StyledPropertyInteractiveClickable",
             componentId: "o558h3-3"
-        })([ "font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], f.variables.focusColor, (0, 
+        })([ "", " font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], Y, f.variables.focusColor, (0, 
         f.pick)({
             enterprise: f.variables.backgroundColorHover,
             prisma: f.variables.interactiveColorOverlayHover
         }));
-        var Z = c()(J()).withConfig({
+        var re = c()(J()).withConfig({
             displayName: "JSONTreeItemStyles__StyledExpandLinkClickable",
             componentId: "o558h3-4"
         })([ "cursor:pointer;color:", ";font-family:inherit;&:hover{background-color:", ";text-decoration:none;}&:focus{box-shadow:", ";&:active{box-shadow:none;}}", "" ], (0, 
@@ -980,52 +982,52 @@
         }), f.variables.focusShadowInset, (0, f.pick)({
             prisma: (0, u.css)([ "border-radius:", ";" ], f.variables.borderRadius)
         }));
-        var ee = c()(U()).withConfig({
+        var ne = c()(B()).withConfig({
             displayName: "JSONTreeItemStyles__StyledTooltip",
             componentId: "o558h3-5"
         })([ "font-family:", ";" ], f.variables.monoFontFamily);
         // CONCATENATED MODULE: ./src/JSONTree/renderTreeItems.tsx
-        function re(e) {
+        function te(e) {
             "@babel/helpers - typeof";
             if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-                re = function e(r) {
+                te = function e(r) {
                     return typeof r;
                 };
             } else {
-                re = function e(r) {
+                te = function e(r) {
                     return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
                 };
             }
-            return re(e);
+            return te(e);
         }
-        function ne(e) {
-            return ie(e) || ae(e) || oe(e) || te();
+        function oe(e) {
+            return ue(e) || le(e) || ie(e) || ae();
         }
-        function te() {
+        function ae() {
             throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         }
-        function oe(e, r) {
+        function ie(e, r) {
             if (!e) return;
-            if (typeof e === "string") return le(e, r);
+            if (typeof e === "string") return ce(e, r);
             var n = Object.prototype.toString.call(e).slice(8, -1);
             if (n === "Object" && e.constructor) n = e.constructor.name;
             if (n === "Map" || n === "Set") return Array.from(e);
-            if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return le(e, r);
+            if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ce(e, r);
         }
-        function ae(e) {
+        function le(e) {
             if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
         }
-        function ie(e) {
-            if (Array.isArray(e)) return le(e);
+        function ue(e) {
+            if (Array.isArray(e)) return ce(e);
         }
-        function le(e, r) {
+        function ce(e, r) {
             if (r == null || r > e.length) r = e.length;
             for (var n = 0, t = new Array(r); n < r; n++) {
                 t[n] = e[n];
             }
             return t;
         }
-        function ue(n) {
+        function fe(n) {
             var t = n.defaultOpen, o = t === void 0 ? false : t, a = n.expandChildren, i = a === void 0 ? false : a, u = n.expandChildrenOnShiftKey, c = u === void 0 ? false : u, f = n.indent, d = f === void 0 ? 4 : f, v = n.indentLevel, s = v === void 0 ? 1 : v, p = n.obj, b = n.onClickKey, h = n.onClickValue, S = n.overflow, k = S === void 0 ? "scroll" : S, x = n.path, I = x === void 0 ? [] : x, P = n.shift, R = n.updateShift;
             var K = y()(Array(s), j()(" ", d));
             var _;
@@ -1049,7 +1051,7 @@
             var q = function e(r, n) {
                 var t, o;
                 // When rendering a single value key is not present, here we prevent `[undefined]` in path
-                                var a = n !== undefined ? [].concat(ne(I), [ n ]) : ne(I);
+                                var a = n !== undefined ? [].concat(oe(I), [ n ]) : oe(I);
                 var i = ".".concat(a.join("."));
                 (t = N) === null || t === void 0 ? void 0 : (o = t.current) === null || o === void 0 ? void 0 : o.focus();
                 b === null || b === void 0 ? void 0 : b(r, {
@@ -1060,7 +1062,7 @@
             var V = function e(r, n) {
                 var t, o;
                 // When rendering a single value key is not present, here we prevent `[undefined]` in path
-                                var a = n !== undefined ? [].concat(ne(I), [ n ]) : ne(I);
+                                var a = n !== undefined ? [].concat(oe(I), [ n ]) : oe(I);
                 var i = ".".concat(a.join("."));
                 (t = _) === null || t === void 0 ? void 0 : (o = t.current) === null || o === void 0 ? void 0 : o.focus();
                 h === null || h === void 0 ? void 0 : h(r, {
@@ -1088,7 +1090,7 @@
                 var i = o ? "[-]" : "[+]";
                 var l = o ? (0, E._)("Collapse all") : (0, E._)("Shift click to expand all");
                 var u = (0, e.useRef)(null);
-                var f =  r().createElement(Z, {
+                var f =  r().createElement(re, {
                     elementRef: u,
                     tabIndex: -1,
                     onClick: function e(r) {
@@ -1099,7 +1101,7 @@
                 }, " ", i, " ");
                 if (c && a) {
                     return {
-                        expandLink:  r().createElement(ee, {
+                        expandLink:  r().createElement(ne, {
                             contentRelationship: "description",
                             openDelay: "secondary",
                             defaultPlacement: "above",
@@ -1131,7 +1133,7 @@
                     // isObject is true for arrays
                     u = m()(o) ? "[]" : "{}";
                 } else {
-                    u = ue({
+                    u = fe({
                         defaultOpen: i === true,
                         expandChildren: i,
                         expandChildrenOnShiftKey: c,
@@ -1139,7 +1141,7 @@
                         onClickValue: h,
                         overflow: k,
                         obj: o,
-                        path: a !== undefined ? [].concat(ne(I), [ a ]) : ne(I),
+                        path: a !== undefined ? [].concat(oe(I), [ a ]) : oe(I),
                         indentLevel: s + 1,
                         shift: P,
                         updateShift: R
@@ -1147,10 +1149,10 @@
                 }
                 if (l()(u) || w()(u)) {
                     var d = o === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
-                    re(o);
+                    te(o);
                     if (h) {
                         return {
-                            representation:  r().createElement(G, {
+                            representation:  r().createElement(Q, {
                                 elementRef: f,
                                 valueType: d,
                                 overflowType: k,
@@ -1167,7 +1169,7 @@
                         };
                     }
                     return {
-                        representation:  r().createElement(W, {
+                        representation:  r().createElement(G, {
                             valueType: d,
                             overflowType: k
                         }, u)
@@ -1177,11 +1179,11 @@
                     representation: u
                 };
             };
-            var B = function n(t) {
+            var U = function n(t) {
                 var o = (0, e.useRef)(null);
                 if (b) {
                     return {
-                        propertyElement:  r().createElement("span", null,  r().createElement(Y, {
+                        propertyElement:  r().createElement("span", null,  r().createElement(ee, {
                             elementRef: o,
                             tabIndex: -1,
                             onClick: function e(r) {
@@ -1196,11 +1198,11 @@
                     };
                 }
                 return {
-                    propertyElement:  r().createElement("span", null,  r().createElement(Q, null, t), ":", " ")
+                    propertyElement:  r().createElement("span", null,  r().createElement(Z, null, t), ":", " ")
                 };
             };
             if (O()(p) && !g()(p) || m()(p) && p.length > 0) {
-                var U = C()(p).map((function(e, n, t) {
+                var B = C()(p).map((function(e, n, t) {
                     var o = p[e];
  // TS: should be safe based on (recursive) JSONElement type
                                         var a = m()(p) ? parseInt(e, 10) : e;
@@ -1209,7 +1211,7 @@
                         key: a,
                         value: o
                     }), u = l.representation, c = l.clickableValRef;
-                    var f = !m()(p) ? B(a) : {
+                    var f = !m()(p) ? U(a) : {
                         propertyElement: undefined,
                         clickableKeyRef: undefined
                     }, d = f.propertyElement, v = f.clickableKeyRef;
@@ -1247,10 +1249,10 @@
                         value: p,
                         index: 0,
                         renderExpandLink: $,
-                        representation: U
+                        representation: B
                     });
                 }
-                return U;
+                return B;
             }
  // edge case: a single number/string/boolean being rendered (still valid JSON)
                         var X = J({
@@ -1264,8 +1266,8 @@
             });
         }
         // CONCATENATED MODULE: ./src/JSONTree/JSONTree.tsx
-        function ce() {
-            ce = Object.assign || function(e) {
+        function de() {
+            de = Object.assign || function(e) {
                 for (var r = 1; r < arguments.length; r++) {
                     var n = arguments[r];
                     for (var t in n) {
@@ -1276,30 +1278,30 @@
                 }
                 return e;
             };
-            return ce.apply(this, arguments);
+            return de.apply(this, arguments);
         }
-        function fe(e, r) {
-            return ye(e) || pe(e, r) || ve(e, r) || de();
+        function ve(e, r) {
+            return me(e) || be(e, r) || pe(e, r) || se();
         }
-        function de() {
+        function se() {
             throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         }
-        function ve(e, r) {
+        function pe(e, r) {
             if (!e) return;
-            if (typeof e === "string") return se(e, r);
+            if (typeof e === "string") return ye(e, r);
             var n = Object.prototype.toString.call(e).slice(8, -1);
             if (n === "Object" && e.constructor) n = e.constructor.name;
             if (n === "Map" || n === "Set") return Array.from(e);
-            if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return se(e, r);
+            if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ye(e, r);
         }
-        function se(e, r) {
+        function ye(e, r) {
             if (r == null || r > e.length) r = e.length;
             for (var n = 0, t = new Array(r); n < r; n++) {
                 t[n] = e[n];
             }
             return t;
         }
-        function pe(e, r) {
+        function be(e, r) {
             if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
             var n = [];
             var t = true;
@@ -1322,12 +1324,12 @@
             }
             return n;
         }
-        function ye(e) {
+        function me(e) {
             if (Array.isArray(e)) return e;
         }
-        function be(e, r) {
+        function he(e, r) {
             if (e == null) return {};
-            var n = me(e, r);
+            var n = ge(e, r);
             var t, o;
             if (Object.getOwnPropertySymbols) {
                 var a = Object.getOwnPropertySymbols(e);
@@ -1340,7 +1342,7 @@
             }
             return n;
         }
-        function me(e, r) {
+        function ge(e, r) {
             if (e == null) return {};
             var n = {};
             var t = Object.keys(e);
@@ -1352,7 +1354,7 @@
             }
             return n;
         }
-        var he = {
+        var Se = {
             elementRef: a().oneOfType([ a().func, a().object ]),
             expandChildren: a().oneOfType([ a().bool, a().oneOf([ "withShiftModifier" ]) ]),
             indent: a().number,
@@ -1364,24 +1366,24 @@
         };
         /**
  * Used to visualize a JSON string.
- */        function ge(n) {
-            var t = n.elementRef, o = n.expandChildren, a = o === void 0 ? false : o, i = n.indent, u = i === void 0 ? 4 : i, c = n.json, f = n.onClickKey, d = n.onClickValue, p = n.overflow, y = p === void 0 ? "scroll" : p, b = n.expandChildrenOnShiftKey, m = b === void 0 ? false : b, h = be(n, [ "elementRef", "expandChildren", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
+ */        function we(n) {
+            var t = n.elementRef, o = n.expandChildren, a = o === void 0 ? false : o, i = n.indent, u = i === void 0 ? 4 : i, c = n.json, f = n.onClickKey, d = n.onClickValue, p = n.overflow, y = p === void 0 ? "scroll" : p, b = n.expandChildrenOnShiftKey, m = b === void 0 ? false : b, h = he(n, [ "elementRef", "expandChildren", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
             // @docs-props-type JSONTreePropsBase
                         var g = l()(c) ? JSON.parse(c) : c;
             var S = y === "wrap" ? s : v;
-            var w = (0, e.useState)(undefined), k = fe(w, 2), O = k[0], x = k[1];
+            var w = (0, e.useState)(undefined), k = ve(w, 2), O = k[0], x = k[1];
             var C = function e(r) {
                 x(r);
             };
             
-            return r().createElement(S, ce({
+            return r().createElement(S, de({
                 "data-language": "language-json",
                 "data-test": "json-tree",
                 ref: t,
                 role: "tree"
             }, h),  r().createElement(A["default"], {
                 defaultIndent: false
-            }, ue({
+            }, fe({
                 defaultOpen: true,
                 expandChildren: a,
                 expandChildrenOnShiftKey: m,
@@ -1394,8 +1396,8 @@
                 updateShift: C
             })));
         }
-        ge.propTypes = he;
-        /* harmony default export */        const Se = ge;
+        we.propTypes = Se;
+        /* harmony default export */        const ke = we;
     }) // CONCATENATED MODULE: ./src/JSONTree/index.ts
     ();
     module.exports = t;

package/List.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(t, {
         Item: () => /* reexport */ v,
-        default: () => /* reexport */ P
+        default: () => /* reexport */ S
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -194,26 +194,22 @@
         ordered: i().bool,
         type: i().oneOf([ "disc", "decimal", "lower-alpha", "upper-alpha" ])
     };
-    var j = {
-        type: "disc"
-    };
-    function S(e) {
-        var t = e.children, r = e.elementRef, o = e.type, i = e.ordered, l = O(e, [ "children", "elementRef", "type", "ordered" ]);
+    function j(e) {
+        var t = e.children, r = e.elementRef, o = e.type, i = o === void 0 ? "disc" : o, l = e.ordered, a = O(e, [ "children", "elementRef", "type", "ordered" ]);
         // @docs-props-type ListPropsBase
         // Default prop value is "disc", we cannot determine if user or defaultProps is setting the value
                 if (false) {}
         
         return n().createElement(f, b({
-            as: i || o !== "disc" ? "ol" : "ul",
+            as: l || i !== "disc" ? "ol" : "ul",
             "data-test": "list",
             ref: r,
-            $listStyleType: i ? "decimal" : o
-        }, l), t);
+            $listStyleType: l ? "decimal" : i
+        }, a), t);
     }
-    S.propTypes = g;
-    S.defaultProps = j;
-    S.Item = v;
-    /* harmony default export */    const P = S;
+    j.propTypes = g;
+    j.Item = v;
+    /* harmony default export */    const S = j;
     // CONCATENATED MODULE: ./src/List/index.ts
     module.exports = t;
     /******/})();

package/MIGRATION.mdx

@@ -5,6 +5,88 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 4.35.0
+
+### Deprecated `Menu`'s `retainFocus` prop
+
+#### Change
+
+`Menu`'s `retainFocus` prop is deprecated and will be removed in the next major version.
+
+#### Context
+
+To provide more control over the focus behavior of `Menu`, including the option to opt out of focus management, a new `focusMode` prop has been introduced with the following values:
+- `never`: The menu will never take focus, and the active menu item will not have a focus-like appearance.
+- `normal`: Opts out of focus management. The menu and its children follow the normal focus order of DOM without any interference (no loop, no arrow keys, multiple tab stops).
+- `roving` (original `retainFocus={false}`): Does not retain focus inside the menu. There is one tab stop of menu. Uses up/down arrow keys to navigate and loop inside the menu.
+
+The original `retainFocus={true}` is no longer supported due to its poor user experience and accessibility issues:
+* If the Menu is used standalone, it traps the tab navigation within the Menu, preventing the user from accessing the next element via keyboard navigation.
+* If the Menu is used in a `Dropdown`, it creates multiple tab stops, making navigation inefficient.
+
+#### Migration steps
+
+* Replace `retainFocus={false}` with `focusMode="roving"`.
+* If `retainFocus={true}` was used, replace it with `focusMode="roving"`. Additionally, convert the corresponding tests with multiple tabs to use arrow key navigation.
+
+## 4.34.0
+
+### Deprecated `Select`'s `appearance` values of `"flat"`, `"pill"`, and `"toggle"`
+
+#### Change
+
+`Select`'s `appearance` prop's `"flat"`, `"pill"`, and `"toggle"` values are deprecated and will be removed in the next major version.
+
+#### Context
+
+The `"pill"` value for `appearance` was only supported in Enterprise theme, and the `"flat"` and `"toggle"` values were only supported in the Prisma theme.
+
+As part of our effort to unify behaviors and APIs across themes, we are deprecating these appearances.
+
+#### Migration steps
+
+For Enterprise themes:
+* the `"pill"` value can be replaced with `"subtle"` with no other changes.
+
+For Prisma themes:
+* the `"flat"` appearance can be replaced by `"secondary"` or `"subtle"` depending on the context in which it appears.
+* the `"toggle"` appearance can be replaced with `"default"`.
+
+### Improved `Card.Header` accessibility when rendering actions
+
+#### Change
+
+* New `actions` prop to render card actions.
+* Default to rendering the container element as an `article` tag instead of a `div`.
+* New `tag` prop to control the HTML tag used for `Card`'s container element.
+
+#### Context
+
+Cards rendered the `secondaryActions` button with the same label -- "Actions".
+This would create an ambiguous label (especially when multiple cards are rendered) which may be confusing non-visual users.
+
+The new `actions` prop provides full control over the rendering of the actions to make sure the secondary actions button name can be made unique and not ambiguous for assistive technology users.
+
+Cards used a `div` as the container element which did not provide any semantic grouping of the content.
+The new `article` container element provides semantic clarity, improves accessibility, and future-proofs the code, as it clearly denotes self-contained, independently distributable content, which `div` does not.
+
+[MDN - Article Role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/article_role)
+
+#### Migration steps
+
+* Update `Card` to use the new `actions` prop instead of `secondaryActions` and add an unambiguous label for each action:
+
+```jsx
+<Card.Header title="My widget" actions={() => <>}>
+    <HeaderActions>
+        <Button icon={<Star/>} aria-label="Favorite My widget" />
+        <Dropdown toggle={<ActionsSecondaryToggle content="More actions for My widget" />}>
+            {actionsSecondaryMenuOne}
+        </Dropdown>
+    </HeaderActions>
+</Card.Header>
+```
+
 ## 4.33.0
 
 ### Deprecated `Button`'s `appearance` values of `"flat"`, `"pill"`, and `"toggle"`
@@ -28,6 +110,24 @@ For Prisma themes:
 * the `"flat"` appearance can be replaced by `"secondary"` or `"subtle"` depending on the context in which it appears.
 * the `"toggle"` appearance can be replaced with `"default"`.
 
+### Deprecated `CollapsiblePanel`'s `titleWithActions` prop
+
+#### Change
+
+`CollapsiblePanel`'s `titleWithActions` prop has been deprecated and will be removed in the next major version.
+
+#### Context
+
+Previously, `titleWithActions` prop allowed for customized interactive elements to be added directly to the `title` prop. 
+Now, a new `actions` prop is introduced to reserve the `title` prop for text only. The `actions` prop should contain all customized 
+interactive actions that were previously placed in the `title` prop. This ensures that the controls are not read as part of the label, 
+while still providing the necessary interactivity.
+
+#### Migration steps
+
+Remove `CollapsiblePanel`'s `titleWithActions` prop. Extract the actions/interactive elements from the `title` prop 
+and move them to the new `actions` prop.
+
 ## 4.30.0
 
 ### Deprecated `NavigationProvider`'s `prefix` prop