@splunk/react-ui 5.0.0-beta.4 → 5.0.0-rc.1

package/Button.js

@@ -171,7 +171,9 @@
         value: i().any
     };
     var I = (0, v._)("(Opens new window)");
-    var P =  r().forwardRef((function(e, n) {
+    var P =  r().forwardRef((function(e, 
+    // SUI-7623 - needs to be specified for react-docgen versions less than 7.1.0
+    n) {
         var a = e.action, i = e.appearance, l = i === void 0 ? "default" : i, s = e.append, c = e.children, d = e.className, v = e.classNamePrivate, m = e.disabled, y = e.error, g = e.icon, h = e.inline, w = h === void 0 ? true : h, N = e.isMenu, k = e.label, P = e.onClick, _ = e.openInNewContext, j = e.prepend, M = e.value, E = C(e, [ "action", "appearance", "append", "children", "className", "classNamePrivate", "disabled", "error", "icon", "inline", "isMenu", "label", "onClick", "openInNewContext", "prepend", "value" ]);
         // @docs-props-type ButtonPropsBase
                 var T = (0, t.useCallback)((function(e) {

package/ButtonSimple.js

@@ -61,8 +61,8 @@
         r.r(e);
     // EXPORTS
         r.d(e, {
-        buttonMixin: () => /* reexport */ C,
-        default: () => /* reexport */ M
+        buttonMixin: () => /* reexport */ g,
+        default: () => /* reexport */ h
     });
     // CONCATENATED MODULE: external "react"
     const o = require("react");
@@ -75,12 +75,12 @@
     var c =  r.n(i);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const l = require("@splunk/react-ui/Clickable");
-    var s =  r.n(l);
+    var d =  r.n(l);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const d = require("@splunk/themes");
+    const s = require("@splunk/themes");
     // CONCATENATED MODULE: external "lodash/merge"
-    const b = require("lodash/merge");
-    var v =  r.n(b);
+    const v = require("lodash/merge");
+    var b =  r.n(v);
     // CONCATENATED MODULE: ./src/ButtonSimple/mixin.ts
     function u(r) {
         "@babel/helpers - typeof";
@@ -100,73 +100,73 @@
         var i;
         var c;
         var l;
-        var s = d.variables.contentColorActive;
-        var b;
-        var v = d.variables.contentColorDisabled;
+        var d = s.variables.contentColorActive;
+        var v;
+        var b = s.variables.contentColorDisabled;
         var u;
         switch (r) {
           case "primary":
             {
-                e = d.variables.actionColorBackgroundPrimary;
-                o = d.variables.actionColorBackgroundPrimaryActive;
-                a = d.variables.actionColorBackgroundPrimaryDisabled;
-                t = d.variables.actionColorBackgroundPrimaryHover;
-                s = d.variables.contentColorInverted;
-                v = d.variables.contentColorInverted;
+                e = s.variables.actionColorBackgroundPrimary;
+                o = s.variables.actionColorBackgroundPrimaryActive;
+                a = s.variables.actionColorBackgroundPrimaryDisabled;
+                t = s.variables.actionColorBackgroundPrimaryHover;
+                d = s.variables.contentColorInverted;
+                b = s.variables.contentColorInverted;
                 break;
             }
 
           case "destructive":
             {
-                e = d.variables.actionColorBackgroundDestructive;
-                o = d.variables.actionColorBackgroundDestructiveActive;
-                a = d.variables.actionColorBackgroundDestructiveDisabled;
-                t = d.variables.actionColorBackgroundDestructiveHover;
-                s = d.variables.contentColorInverted;
-                v = d.variables.contentColorInverted;
+                e = s.variables.actionColorBackgroundDestructive;
+                o = s.variables.actionColorBackgroundDestructiveActive;
+                a = s.variables.actionColorBackgroundDestructiveDisabled;
+                t = s.variables.actionColorBackgroundDestructiveHover;
+                d = s.variables.contentColorInverted;
+                b = s.variables.contentColorInverted;
                 break;
             }
 
           case "destructiveSecondary":
             {
-                n = d.variables.actionColorBorderDestructiveSecondary;
-                i = d.variables.actionColorBorderDestructiveSecondaryActive;
-                c = d.variables.actionColorBorderDestructiveSecondaryDisabled;
-                l = d.variables.actionColorBorderDestructiveSecondaryHover;
-                e = d.variables.actionColorBackgroundDestructiveSecondary;
-                o = d.variables.actionColorBackgroundDestructiveSecondaryActive;
-                a = d.variables.actionColorBackgroundDestructiveSecondaryDisabled;
-                t = d.variables.actionColorBackgroundDestructiveSecondaryHover;
-                s = d.variables.contentColorNegative;
-                v = d.variables.contentColorNegativeWeak;
+                n = s.variables.actionColorBorderDestructiveSecondary;
+                i = s.variables.actionColorBorderDestructiveSecondaryActive;
+                c = s.variables.actionColorBorderDestructiveSecondaryDisabled;
+                l = s.variables.actionColorBorderDestructiveSecondaryHover;
+                e = s.variables.actionColorBackgroundDestructiveSecondary;
+                o = s.variables.actionColorBackgroundDestructiveSecondaryActive;
+                a = s.variables.actionColorBackgroundDestructiveSecondaryDisabled;
+                t = s.variables.actionColorBackgroundDestructiveSecondaryHover;
+                d = s.variables.contentColorNegative;
+                b = s.variables.contentColorNegativeWeak;
                 break;
             }
 
           case "secondary":
-            n = d.variables.actionColorBorderSecondary;
-            i = d.variables.actionColorBorderSecondaryActive;
-            c = d.variables.actionColorBorderSecondaryDisabled;
-            l = d.variables.actionColorBorderSecondaryHover;
-            e = d.variables.actionColorBackgroundSecondary;
-            o = d.variables.actionColorBackgroundSecondaryActive;
-            t = d.variables.actionColorBackgroundSecondaryHover;
+            n = s.variables.actionColorBorderSecondary;
+            i = s.variables.actionColorBorderSecondaryActive;
+            c = s.variables.actionColorBorderSecondaryDisabled;
+            l = s.variables.actionColorBorderSecondaryHover;
+            e = s.variables.actionColorBackgroundSecondary;
+            o = s.variables.actionColorBackgroundSecondaryActive;
+            t = s.variables.actionColorBackgroundSecondaryHover;
             break;
 
           case "subtle":
-            b = d.variables.contentColorAccentStrong;
-            u = d.variables.contentColorAccentStrong;
-            o = d.variables.actionColorBackgroundSubtleActive;
-            t = d.variables.actionColorBackgroundSubtleHover;
+            v = s.variables.contentColorAccentStrong;
+            u = s.variables.contentColorAccentStrong;
+            o = s.variables.actionColorBackgroundSubtleActive;
+            t = s.variables.actionColorBackgroundSubtleHover;
             break;
 
           case "standalone":
-            s = d.variables.contentColorAccent;
-            b = d.variables.contentColorAccentStrong;
-            v = d.variables.contentColorAccentWeak;
-            u = d.variables.contentColorAccentStrong;
-            e = d.variables.actionColorBackgroundSubtle;
-            o = d.variables.actionColorBackgroundSubtleActive;
-            t = d.variables.actionColorBackgroundSubtleHover;
+            d = s.variables.contentColorAccent;
+            v = s.variables.contentColorAccentStrong;
+            b = s.variables.contentColorAccentWeak;
+            u = s.variables.contentColorAccentStrong;
+            e = s.variables.actionColorBackgroundSubtle;
+            o = s.variables.actionColorBackgroundSubtleActive;
+            t = s.variables.actionColorBackgroundSubtleHover;
             break;
 
           default:
@@ -180,9 +180,9 @@
             borderColorActive: i,
             borderColorDisabled: c,
             borderColorHover: l,
-            color: s,
-            colorActive: b,
-            colorDisabled: v,
+            color: d,
+            colorActive: v,
+            colorDisabled: b,
             colorHover: u
         };
         return p;
@@ -196,126 +196,50 @@
             a = r;
         }
         var t = y(o);
-        var n = v()(t, a), c = n.background, l = n.backgroundActive, s = n.backgroundDisabled, b = n.backgroundDisabledSelected, f = n.backgroundHover, C = n.borderColor, g = n.borderColorActive, m = n.borderColorDisabled, k = n.borderColorHover, S = n.color, O = n.colorActive, B = n.colorDisabled, A = n.colorHover;
-        var D = c != null && c !== "transparent";
+        var n = b()(t, a), c = n.background, l = n.backgroundActive, d = n.backgroundDisabled, v = n.backgroundDisabledSelected, f = n.backgroundHover, g = n.borderColor, C = n.borderColorActive, k = n.borderColorDisabled, S = n.borderColorHover, m = n.color, B = n.colorActive, A = n.colorDisabled, D = n.colorHover;
+        var h = c != null && c !== "transparent";
         return function() {
-            return (0, i.css)([ "border:", " solid ", ";border-radius:", ";", " ", " cursor:pointer;position:relative;font-weight:", ";&:focus,&:hover{z-index:3;}&:focus{box-shadow:", ";}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";border-color:", ";color:", ";transition:none;}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";", "}" ], d.variables.inputBorderWidth, C, d.variables.borderRadius, (function(r) {
+            return (0, i.css)([ "border:", " solid ", ";border-radius:", ";", " ", " cursor:pointer;position:relative;font-weight:", ";&:focus,&:hover{z-index:3;}&:focus{box-shadow:", ";}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";border-color:", ";color:", ";transition:none;}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";", "}" ], s.variables.inputBorderWidth, g, s.variables.borderRadius, (function(r) {
                 var e = r.$append;
                 return e && (0, i.css)([ "border-top-right-radius:0.1px;border-bottom-right-radius:0.1px;border-right:none;" ]);
             }), (function(r) {
                 var e = r.$prepend;
                 return e && (0, i.css)([ "border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;" ]);
-            }), d.variables.fontWeightSemiBold, d.variables.focusShadow, c, S, f, k, A, l, g, O, m, B, (function(r) {
+            }), s.variables.fontWeightSemiBold, s.variables.focusShadow, c, m, f, S, D, l, C, B, k, A, (function(r) {
                 var e = r.$selected;
-                return D && (0, i.css)([ "background-color:", ";" ], e ? b : s);
+                return h && (0, i.css)([ "background-color:", ";" ], e ? v : d);
             }));
         };
     }
-    /* harmony default export */    const C = f;
+    /* harmony default export */    const g = f;
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimpleStyles.ts
-    function g(r) {
-        "@babel/helpers - typeof";
-        return g = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(r) {
-            return typeof r;
-        } : function(r) {
-            return r && "function" == typeof Symbol && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
-        }, g(r);
-    }
-    function m(r, e) {
-        var o = Object.keys(r);
-        if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(r);
-            e && (a = a.filter((function(e) {
-                return Object.getOwnPropertyDescriptor(r, e).enumerable;
-            }))), o.push.apply(o, a);
-        }
-        return o;
-    }
-    function k(r) {
-        for (var e = 1; e < arguments.length; e++) {
-            var o = null != arguments[e] ? arguments[e] : {};
-            e % 2 ? m(Object(o), !0).forEach((function(e) {
-                S(r, e, o[e]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(o)) : m(Object(o)).forEach((function(e) {
-                Object.defineProperty(r, e, Object.getOwnPropertyDescriptor(o, e));
-            }));
-        }
-        return r;
-    }
-    function S(r, e, o) {
-        return (e = O(e)) in r ? Object.defineProperty(r, e, {
-            value: o,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : r[e] = o, r;
-    }
-    function O(r) {
-        var e = B(r, "string");
-        return "symbol" == g(e) ? e : e + "";
-    }
-    function B(r, e) {
-        if ("object" != g(r) || !r) return r;
-        var o = r[Symbol.toPrimitive];
-        if (void 0 !== o) {
-            var a = o.call(r, e || "default");
-            if ("object" != g(a)) return a;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
-        }
-        return ("string" === e ? String : Number)(r);
-    }
-    var A = {
-        borderColor: d.variables.interactiveColorAccentError,
-        borderColorActive: d.variables.interactiveColorAccentError,
-        borderColorHover: d.mixins.overlayColors(d.variables.interactiveColorAccentError, d.variables.interactiveColorBorderHover)
-    };
-    var D = {
-        background: d.variables.interactiveColorBackground,
-        backgroundActive: d.variables.interactiveColorOverlayActive,
-        backgroundHover: d.variables.interactiveColorOverlayHover,
-        borderColor: d.variables.transparent,
-        borderColorActive: d.variables.transparent,
-        borderColorDisabled: d.variables.transparent,
-        borderColorHover: d.variables.transparent,
-        color: d.variables.contentColorActive,
-        colorActive: d.variables.contentColorActive,
-        colorDisable: d.variables.contentColorDisabled,
-        colorHover: d.variables.contentColorActive
-    };
-    var h = {
-        background: d.variables.interactiveColorBackground,
-        backgroundActive: d.variables.interactiveColorOverlayActive,
-        backgroundHover: d.variables.interactiveColorOverlayHover,
-        borderColor: d.variables.interactiveColorBorder,
-        borderColorActive: d.variables.interactiveColorBorderActive,
-        borderColorDisabled: d.variables.interactiveColorBorderDisabled,
-        borderColorHover: d.variables.interactiveColorBorderHover
+    var C = {
+        borderColor: s.variables.interactiveColorAccentError,
+        borderColorActive: s.variables.interactiveColorAccentError,
+        borderColorHover: s.mixins.overlayColors(s.variables.interactiveColorAccentError, s.variables.interactiveColorBorderHover)
     };
-    var j = c()(s()).withConfig({
+    var k = c()(d()).withConfig({
         displayName: "ButtonSimpleStyles__StyledClickable",
         componentId: "vlarwe-0"
-    })([ "", " align-items:center;justify-content:center;&:not([disabled],[aria-disabled='true']){", "}", "" ], d.mixins.reset("flex"), (function(r) {
-        var e = r.$error, o = r.$isMenu;
-        return e && (0, i.css)([ "", "" ], (0, d.pickVariant)("$variant", {
-            default: o ? C("secondary", k(k({}, h), A)) : C("secondary", A),
-            secondary: o ? C("secondary", k(k({}, h), A)) : C("secondary", A),
-            subtle: o ? C("secondary", k(k({}, D), A)) : C("subtle", A)
+    })([ "", " align-items:center;justify-content:center;&:not([disabled],[aria-disabled='true']){", "}", "" ], s.mixins.reset("flex"), (function(r) {
+        var e = r.$error;
+        return e && (0, i.css)([ "", "" ], (0, s.pickVariant)("$variant", {
+            default: g("secondary", C),
+            secondary: g("secondary", C),
+            subtle: g("subtle", C)
         }));
-    }), (function(r) {
-        var e = r.$isMenu;
-        return (0, d.pickVariant)("$variant", {
-            default: e ? C("secondary", h) : C("secondary"),
-            primary: C("primary"),
-            secondary: e ? C("secondary", h) : C("secondary"),
-            subtle: e ? C("secondary", D) : C("subtle"),
-            destructive: C("destructive"),
-            destructiveSecondary: C("destructiveSecondary"),
-            standalone: C("standalone")
-        });
+    }), (0, s.pickVariant)("$variant", {
+        default: g("secondary"),
+        primary: g("primary"),
+        secondary: g("secondary"),
+        subtle: g("subtle"),
+        destructive: g("destructive"),
+        destructiveSecondary: g("destructiveSecondary"),
+        standalone: g("standalone")
     }));
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimple.tsx
-    function H() {
-        return H = Object.assign ? Object.assign.bind() : function(r) {
+    function S() {
+        return S = Object.assign ? Object.assign.bind() : function(r) {
             for (var e = 1; e < arguments.length; e++) {
                 var o = arguments[e];
                 for (var a in o) {
@@ -323,11 +247,11 @@
                 }
             }
             return r;
-        }, H.apply(null, arguments);
+        }, S.apply(null, arguments);
     }
-    function w(r, e) {
+    function m(r, e) {
         if (null == r) return {};
-        var o, a, t = P(r, e);
+        var o, a, t = B(r, e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(r);
             for (a = 0; a < n.length; a++) {
@@ -336,7 +260,7 @@
         }
         return t;
     }
-    function P(r, e) {
+    function B(r, e) {
         if (null == r) return {};
         var o = {};
         for (var a in r) {
@@ -347,7 +271,7 @@
         }
         return o;
     }
-    var x = {
+    var A = {
         action: n().string,
         appearance: n().oneOf([ "default", "secondary", "primary", "destructive", "destructiveSecondary", "subtle", "standalone" ]),
         append: n().bool,
@@ -360,24 +284,24 @@
         prepend: n().bool,
         to: n().string
     };
-    var $ =  a().forwardRef((function(r, e) {
-        var o = r.appearance, t = o === void 0 ? "default" : o, n = r.append, i = r.children, c = r.disabled, l = r.error, s = r.isMenu, d = r.prepend, b = w(r, [ "appearance", "append", "children", "disabled", "error", "isMenu", "prepend" ]);
+    var D =  a().forwardRef((function(r, e) {
+        var o = r.appearance, t = o === void 0 ? "default" : o, n = r.append, i = r.children, c = r.disabled, l = r.error, d = r.isMenu, s = r.prepend, v = m(r, [ "appearance", "append", "children", "disabled", "error", "isMenu", "prepend" ]);
         // @docs-props-type ButtonSimplePropsBase
                 
-        return a().createElement(j, H({
+        return a().createElement(k, S({
             "aria-invalid": l,
             "data-test": "button-simple",
             disabled: c,
             $variant: t,
             $append: n,
-            $prepend: d,
+            $prepend: s,
             $error: l,
-            $isMenu: s,
+            $isMenu: d,
             ref: e
-        }, b), i);
+        }, v), i);
     }));
-    $.propTypes = x;
-    /* harmony default export */    const M = $;
+    D.propTypes = A;
+    /* harmony default export */    const h = D;
     // only for styled-components that wrap ButtonSimple
         // CONCATENATED MODULE: ./src/ButtonSimple/index.ts
     module.exports = e;

package/CHANGELOG.md

@@ -1,10 +1,13 @@
 Change Log
 ============
 
-4.45.0 - TBD
+4.45.0 - May 6, 2025
 ----------
 Bug Fixes:
 * `Table` now displays `cursor: default` when a row is not clickable and is an empty action cell (SUI-7232).
+* `Table` now maintains consistent IDs for expansion rows through renders (SUI-7698).
+* `Layer` will now render at the correct `z-index` when `separateStackingContexts` is set in `LayerStackGlobalProvider` (SUI-7241).
+* `Concertina`, `File`, `Layer`, `Slider`, `Resize`, and `TextArea` will no longer cause issues with server-side rendering (SUI-7737)
 
 4.44.1 - April 10, 2025
 ----------

package/CHANGELOG.v5.mdx

@@ -1,6 +1,64 @@
 Change Log
 ============
 
+5.0.0-rc.1 - May 14, 2025
+----------
+New Features:
+* `Card` now defaults to a borderless appearance for non-clickable cards (SUI-7651).
+* `Dropdown`, `Search`, and `TabBar` now uses `KeyboardEvent`'s `key` property instead of deprecated `keycode` property (SUI-7352).
+* `Table` now uses `KeyboardEvent`'s `key` property instead of deprecated `keycode` property (SUI-7352).
+* `FormRows`, `JSONTree`, `Number`, and `RadioBar` now use `KeyboardEvent`'s `key` property instead of deprecated `keycode` property (SUI-7352).
+
+Bug Fixes:
+* `Table`'s `rowExpansion` button now correctly displays hover styles (SUI-7772).
+* `Text` no longer has border hover effects incorrectly applied when `disabled` or `dimmed` (SUI-7639).
+* `Switch`'s `toggle` appearance now has correct role of `switch` (SUI-7713).
+* `Table.HeadCell`'s and `Table.HeadDropdownCell`'s borders now span the full cell height when content wraps to multiline (SUI-7760)
+* `CollapsiblePanel` no longer flickers on open or close of panel (SUI-7620).
+* `Color` now passes `className` and `elementRef` to the root element instead of an inner component, allowing proper styling with `styled-components` (SUI-6211).
+* `Button`'s now have consistent styling when using `appearance="secondary"` and `isMenu` (SUI-7611).
+
+Deprecations:
+* `Popover`'s `"inverted"` value of the `appearance` prop has been deprecated and will be removed in the next major version. See the migration guide for details (SUI-6154).
+
+API Changes:
+* `Color`'s test hook `[data-test="color"]` is now on the root component and `[data-test="toggle-swatch"]` is on the toggle swatch. See migration guide for details (SUI-7773).
+
+5.0.0-beta.5 - May 7, 2025
+----------
+New Features:
+* `TabBar` supports a new prop `maxTabWidth` prop (SUI-7599).
+* `data-test-disabled` test hook has been added to data entry components for testing (SUI-7575).
+* `Table`'s resize handler now supports hover state (SUI-7302).
+* `Card.Header`'s `truncateTitle` prop now truncates title when a node with text content is passed into `title` prop (SUI-6333).
+* `Typography` has reintroduced the `withReset` prop, which defaults to `true` and removes all browser-default styles while applying theme-specific defaults (SUI-7638).
+
+Bug Fixes:
+* `Message` content are now displayed using flow layout instead of flex (SUI-6271).
+* `Progress` performance improved by preventing styled-components from generating excessive classes (SUI-7625).
+* `Tooltip`'s toggletip focus and hover styles now have the correct shape (SUI-6155, SUI-7719).
+* `Card.Header`'s `actions` now center align with the first line of the title (SUI-7657).
+* `Slider` now correctly displays the bar when `minLabel` or `maxLabel` are set to null (SUI-7730).
+* `Slider`'s drag handle no longer covers labels (SUI-7732).
+* `RadioBar` now has improved visual contrast to better differentiate between selected and unselected options (SUI-7654).
+* `Table` now correctly aligns multiline content when it wraps to a new line (SUI-7606).
+* `Prose` should no longer apply margin to the last element (SUI-7227).
+* `Text` now displays the `not-allowed` cursor on adornments when disabled (SUI-7532).
+* `Typography`'s styles are now consistent with equivalent content components (SUI-7638).
+* `Link` will now always render as an `a` tag, even when disabled (SUI-7543).
+
+API Changes:
+* `TabBar`'s `tabWidth` prop has been removed. See migration guide for details (SUI-7599).
+   * For enforcing a max width of `TabBar.Tab`s use `maxTabWidth` instead.
+* `Multiselect`'s `useClickawayOverlay` prop has been removed (SUI-7722).
+
+Deprecations:
+* `TabBar` and `TabLayout`'s `iconPosition` prop has been deprecated and will be removed in the next major version. See the migration guide for details (SUI-7736).
+Bug Fixes:
+* FormRows correctly takes up the full width given (SUI-7716)
+* FormRows no longer reserves extra space for remove button when rows are not removable (SUI-7717)
+* `Card.Header`'s `anchor` prop is deprecated and will be removed in the next major version. See the migration guide for details (SUI-6577).
+
 5.0.0-beta.4 - April 22, 2025
 ----------
 New Features:
@@ -146,6 +204,7 @@ API Changes:
 * `Button`'s `appearance` prop no longer supports the `"flat"`, `"pill"`, or `"toggle"` values (SUI-6561).
 * `Button`'s `selected` prop has been removed (SUI-6058).
 * `Button` no longer supports the `error` prop.
+* `Button`'s `label` prop no longer sets HTML `label` attribute. See migration guide for details (SUI-6054).
 
 * `Card` and `Card.Footer`'s `showBorder` prop has been removed (SUI-6577).
 

package/Card.js

@@ -61,10 +61,10 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Body: () => /* reexport */ j,
+        Body: () => /* reexport */ x,
         Footer: () => /* reexport */ _,
-        Header: () => /* reexport */ J,
-        default: () => /* reexport */ je
+        Header: () => /* reexport */ G,
+        default: () => /* reexport */ xe
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -88,11 +88,11 @@
     var f = l().div.withConfig({
         displayName: "HeaderStyles__StyledTitle",
         componentId: "eqi6uk-0"
-    })([ "", " ", " margin:0;overflow-wrap:break-word;padding:0;" ], u.mixins.reset("block"), u.mixins.typography("title3"));
+    })([ "", " ", " overflow-wrap:break-word;" ], u.mixins.reset("block"), u.mixins.typography("title3"));
     var p = l().div.withConfig({
         displayName: "HeaderStyles__StyledSubtitle",
         componentId: "eqi6uk-1"
-    })([ "", " ", " margin:0;overflow-wrap:break-word;padding:0;" ], u.mixins.reset("block"), u.mixins.typography("body", {
+    })([ "", " ", " overflow-wrap:break-word;" ], u.mixins.reset("block"), u.mixins.typography("body", {
         color: "active"
     }));
     var y = l().div.withConfig({
@@ -100,12 +100,12 @@
         componentId: "eqi6uk-2"
     })([ "", " flex:0 1 auto;", " &:not(:last-child){margin-right:", ";}" ], u.mixins.reset("block"), (function(e) {
         var r = e.$truncateTitle;
-        return r && (0, a.css)([ "overflow:hidden;& > ", ",& > ", "{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" ], /* sc-sel */ f, /* sc-sel */ p);
+        return r && (0, a.css)([ "overflow:hidden;& > ", ",& > ", ",& > ", " *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" ], /* sc-sel */ f, /* sc-sel */ p, /* sc-sel */ f);
     }), u.variables.spacingSmall);
     var b = l().div.withConfig({
         displayName: "HeaderStyles__StyledActionContainer",
         componentId: "eqi6uk-3"
-    })([ "", " align-items:center;display:flex;flex:0 0 auto;justify-content:space-between;gap:", ";" ], u.mixins.reset("block"), u.variables.spacingSmall);
+    })([ "", " align-items:center;flex:0 0 auto;justify-content:space-between;gap:", ";transform:translateY(calc(-1 * (", " - 20px) / 2));" ], u.mixins.reset("flex"), u.variables.spacingSmall, u.variables.inputHeight);
     var v = l()(s()).withConfig({
         displayName: "HeaderStyles__StyledBox",
         componentId: "eqi6uk-4"
@@ -169,9 +169,9 @@
         }, i), r);
     }
     S.propTypes = O;
-    /* harmony default export */    const j = S;
+    /* harmony default export */    const x = S;
     // CONCATENATED MODULE: ./src/Card/FooterStyles.ts
-    var x = l()(s()).withConfig({
+    var j = l()(s()).withConfig({
         displayName: "FooterStyles__StyledBox",
         componentId: "sc-1yu3r4s-0"
     })([ "", " ", " text-align:right;align-self:end;" ], u.mixins.typography("body"), d);
@@ -219,7 +219,7 @@
         var r = e.children, t = C(e, [ "children" ]);
         // @docs-props-type FooterPropsBase
                 
-        return n().createElement(x, k({
+        return n().createElement(j, k({
             "data-test": "footer"
         }, t), r);
     }
@@ -233,10 +233,10 @@
     var R =  e.n(N);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
     const A = require("@splunk/react-ui/Button");
-    var W =  e.n(A);
+    var H =  e.n(A);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const B = require("@splunk/react-ui/Dropdown");
-    var H =  e.n(B);
+    const W = require("@splunk/react-ui/Dropdown");
+    var B =  e.n(W);
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
     const $ = require("@splunk/react-ui/Tooltip");
     var D =  e.n($);
@@ -291,12 +291,12 @@
     // when we want actions to be the intended use case
         var X =  n().createElement(q(), null);
     // `forwardRef` is used to enable focus on toggle when Dropdown is closing
-        var z =  n().forwardRef((function(e, r) {
+        var Y =  n().forwardRef((function(e, r) {
         
         return n().createElement(D(), U({
             content: (0, F._)("Actions"),
             contentRelationship: "label"
-        }, e),  n().createElement(W(), {
+        }, e),  n().createElement(H(), {
             appearance: "secondary",
             "data-test": "actions-secondary-toggle",
             icon: X,
@@ -305,16 +305,17 @@
     }));
     /**
  * A styled container for `Card` header content.
- */    function G(e) {
+ */    function z(e) {
         var r = e.actions, t = e.actionPrimary, o = e.actionsSecondary, i = e.anchor, a = e.children, l = e.subtitle, c = e.title, s = e.truncateTitle, u = s === void 0 ? true : s, d = L(e, [ "actions", "actionPrimary", "actionsSecondary", "anchor", "children", "subtitle", "title", "truncateTitle" ]);
         // @docs-props-type HeaderPropsBase
                 if (false) {}
+        if (false) {}
         var m;
         if (r) {
             m = r();
         } else if (t || o) {
-            m =  n().createElement(n().Fragment, null, t, o &&  n().createElement(H(), {
-                toggle:  n().createElement(z, null)
+            m =  n().createElement(n().Fragment, null, t, o &&  n().createElement(B(), {
+                toggle:  n().createElement(Y, null)
             }, o));
         }
         
@@ -326,14 +327,14 @@
             name: i
         }, c) : c), l &&  n().createElement(p, null, l)), a, m &&  n().createElement(b, null, m));
     }
-    G.propTypes = V;
-    /* harmony default export */    const J = G;
+    z.propTypes = V;
+    /* harmony default export */    const G = z;
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const K = require("@splunk/react-ui/Clickable");
-    var Q =  e.n(K);
+    const J = require("@splunk/react-ui/Clickable");
+    var K =  e.n(J);
     // CONCATENATED MODULE: ./src/Card/CardStyles.ts
-    var Y = "0.2s";
-    var Z = (0, a.css)([ "", ";gap:", " 0;grid-template-rows:min-content;background-color:", ";min-width:100px;flex:1;vertical-align:top;border:2px solid ", ";border-radius:", ";box-shadow:", ";transition:height ", ",width ", ",min-width ", ",max-width ", ",margin ", ",box-shadow ", ",border-color ", ";&[data-clickable='true']{cursor:pointer;", " &:hover{background-color:", ";box-shadow:", ";", "{text-decoration:underline;}}&:focus{box-shadow:", ";", "{text-decoration:underline;}}}" ], u.mixins.reset("inline-grid"), u.variables.spacingLarge, u.variables.backgroundColorSection, u.variables.borderColorWeak, u.variables.borderRadius, u.variables.embossShadow, Y, Y, Y, Y, Y, Y, Y, (function(e) {
+    var Q = "0.2s";
+    var Z = (0, a.css)([ "", ";gap:", " 0;grid-template-rows:min-content;background-color:", ";min-width:100px;flex:1;vertical-align:top;border:1px solid ", ";border-radius:", ";box-shadow:", ";transition:height ", ",width ", ",min-width ", ",max-width ", ",margin ", ",box-shadow ", ",border-color ", ";&[data-clickable='true']{cursor:pointer;border-color:", ";", " &:hover{background-color:", ";box-shadow:", ";", "{text-decoration:underline;}}&:focus{box-shadow:", ";", "{text-decoration:underline;}}}" ], u.mixins.reset("inline-grid"), u.variables.spacingLarge, u.variables.backgroundColorSection, u.variables.transparent, u.variables.borderRadius, u.variables.embossShadow, Q, Q, Q, Q, Q, Q, Q, u.variables.borderColorWeak, (function(e) {
         var r = e.$selected;
         return r && (0, a.css)([ "background-color:", ";" ], u.mixins.overlayColors(u.variables.backgroundColorSection, u.variables.interactiveColorOverlaySelected));
     }), u.mixins.overlayColors(u.variables.backgroundColorSection, u.variables.interactiveColorOverlayHover), u.variables.overlayShadow, /* sc-sel */ f, u.variables.focusShadow, /* sc-sel */ f);
@@ -341,7 +342,7 @@
         displayName: "CardStyles__Styled",
         componentId: "ola3x0-0"
     })([ "", "" ], Z);
-    var re = l()(Q()).withConfig({
+    var re = l()(K()).withConfig({
         displayName: "CardStyles__StyledClickable",
         componentId: "ola3x0-1"
     })([ "", "" ], Z);
@@ -545,10 +546,10 @@
         return ge(e) ?  n().createElement(we, e) :  n().createElement(Oe, e);
     }
     Se.propTypes = me;
-    Se.Header = J;
-    Se.Body = j;
+    Se.Header = G;
+    Se.Body = x;
     Se.Footer = _;
-    /* harmony default export */    const je = Se;
+    /* harmony default export */    const xe = Se;
     // CONCATENATED MODULE: ./src/Card/index.ts
     module.exports = r;
     /******/})();