@patternfly/react-table 4.61.19 → 4.63.0

package/dist/umd/react-table.css

@@ -1297,6 +1297,8 @@
   --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
   --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
   --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
+  --pf-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-table__tree-view-icon--MinWidth: var(--pf-global--FontSize--md);
   --pf-c-table__tree-view-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -1371,6 +1373,12 @@
   margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
 }
 
+.pf-c-table__tree-view-main > .pf-c-table__check label {
+  padding-right: var(--pf-c-table__tree-view-main--c-table__check--PaddingRight);
+  padding-left: var(--pf-c-table__tree-view-main--c-table__check--PaddingLeft);
+  margin: 0 calc(var(--pf-c-table__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
+}
+
 .pf-c-table__tree-view-text {
   display: flex;
 }
@@ -19055,6 +19063,15 @@ ul.pf-c-list {
   flex: 1 0 auto;
 }
 
+.pf-c-pagination__nav-page-select .pf-c-form-control {
+  appearance: textfield;
+}
+
+.pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-inner-spin-button, .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
 .pf-c-pagination {
   --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
   --pf-c-pagination--m-bottom--child--MarginRight: 0;
@@ -19083,7 +19100,7 @@ ul.pf-c-list {
   --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
+  --pf-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
   --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
   --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
   --pf-c-pagination__total-items--Display: block;
@@ -19964,6 +19981,10 @@ ul.pf-c-list {
   --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100);
 }
 
+.pf-c-progress-stepper__step:last-child {
+  --pf-c-progress-stepper__step-main--MarginBottom: 0;
+}
+
 .pf-c-progress-stepper__step-connector {
   position: relative;
   display: flex;
@@ -24440,10 +24461,19 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-toolbar--spacer: 0;
 }
 
+.pf-c-number-input .pf-c-form-control {
+  appearance: textfield;
+}
+
+.pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
 .pf-c-number-input {
   --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2);
+  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
   --pf-c-number-input--c-form-control--width-chars: 4;
   --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
   display: inline-flex;
@@ -24454,12 +24484,6 @@ label.pf-c-radio, .pf-c-radio__label,
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);
   text-align: right;
-  -moz-appearance: textfield;
-}
-
-.pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
 }
 
 .pf-c-input-group + .pf-c-number-input__unit,
@@ -25562,6 +25586,7 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__text-input--MinWidth: 12ch;
   --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
+  --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
   --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
   --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -25683,6 +25708,10 @@ label.pf-c-radio, .pf-c-radio__label,
   color: var(--pf-c-text-input-group__text-input--m-hint--Color);
 }
 
+.pf-c-text-input-group__text-input::placeholder {
+  color: var(--pf-c-text-input-group--placeholder--Color);
+}
+
 .pf-c-text-input-group__utilities {
   display: flex;
   align-items: center;
@@ -29227,6 +29256,20 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl);
   --pf-c-alert-group--m-toast--MaxWidth: 37.5rem;
   --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
+  --pf-c-alert-group__overflow-button--BorderWidth: 0;
+  --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
+  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
+  --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
+  --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
+  --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
+  --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
 }
 
 .pf-c-alert-group > * + * {
@@ -29242,6 +29285,31 @@ label.pf-c-radio, .pf-c-radio__label,
   max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
 }
 
+.pf-c-alert-group__overflow-button {
+  position: relative;
+  width: 100%;
+  padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
+  color: var(--pf-c-alert-group__overflow-button--Color);
+  background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
+  border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
+  box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
+}
+
+.pf-c-alert-group__overflow-button:hover {
+  --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
+  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
+}
+
+.pf-c-alert-group__overflow-button:focus {
+  --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
+  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
+}
+
+.pf-c-alert-group__overflow-button:active {
+  --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
+  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
+}
+
 .pf-c-about-modal-box {
   --pf-global--Color--100: var(--pf-global--Color--light-100);
   --pf-global--Color--200: var(--pf-global--Color--light-200);

package/dist/umd/react-table.js

@@ -7107,7 +7107,9 @@
 
     const TableComposableBase = (_a) => {
         var _b, _c;
-        var { children, className, variant, borders = true, isStickyHeader = false, gridBreakPoint = exports.TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', innerRef, ouiaId, ouiaSafe = true, isTreeTable = false, isNested = false, nestedHeaderColumnSpans } = _a, props = __rest$2(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "nestedHeaderColumnSpans"]);
+        var { children, className, variant, borders = true, isStickyHeader = false, gridBreakPoint = exports.TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', innerRef, ouiaId, ouiaSafe = true, isTreeTable = false, isNested = false, isStriped = false, isExpandable = false, 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        nestedHeaderColumnSpans } = _a, props = __rest$2(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "nestedHeaderColumnSpans"]);
         const tableRef = innerRef || React__namespace.useRef(null);
         React__namespace.useEffect(() => {
             document.addEventListener('keydown', handleKeys);
@@ -7140,17 +7142,7 @@
             const getFocusableElement = (element) => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
             handleArrows(event, rows, (element) => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
         };
-        return (React__namespace.createElement("table", Object.assign({ "aria-label": ariaLabel, role: role, className: css(className, _default$3.table, isTreeTable ? treeGrid : grid, _default$3.modifiers[variant], !borders && _default$3.modifiers.noBorderRows, isStickyHeader && _default$3.modifiers.stickyHeader, isTreeTable && _default$1.modifiers.treeView, isNested && 'pf-m-nested'), ref: tableRef }, (isTreeTable && { role: 'treegrid' }), ouiaProps, props),
-            nestedHeaderColumnSpans &&
-                nestedHeaderColumnSpans.map((span, index) => {
-                    if (span === 1) {
-                        return React__namespace.createElement("col", { key: index });
-                    }
-                    else {
-                        return React__namespace.createElement("colgroup", { key: index, span: span });
-                    }
-                }),
-            children));
+        return (React__namespace.createElement("table", Object.assign({ "aria-label": ariaLabel, role: role, className: css(className, _default$3.table, isTreeTable ? treeGrid : grid, _default$3.modifiers[variant], !borders && _default$3.modifiers.noBorderRows, isStickyHeader && _default$3.modifiers.stickyHeader, isTreeTable && _default$1.modifiers.treeView, isStriped && _default$3.modifiers.striped, isExpandable && _default$3.modifiers.expandable, isNested && 'pf-m-nested'), ref: tableRef }, (isTreeTable && { role: 'treegrid' }), ouiaProps, props), children));
     };
     const TableComposable = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TableComposableBase, Object.assign({}, props, { innerRef: ref }))));
     TableComposable.displayName = 'TableComposable';
@@ -7163,14 +7155,14 @@
     Thead.displayName = 'Thead';
 
     const TbodyBase = (_a) => {
-        var { children, className, isExpanded, innerRef } = _a, props = __rest$2(_a, ["children", "className", "isExpanded", "innerRef"]);
-        return (React__namespace.createElement("tbody", Object.assign({ role: "rowgroup", className: css(className, isExpanded && _default$3.modifiers.expanded), ref: innerRef }, props), children));
+        var { children, className, isExpanded, innerRef, isEvenStriped = false, isOddStriped = false } = _a, props = __rest$2(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
+        return (React__namespace.createElement("tbody", Object.assign({ role: "rowgroup", className: css(className, isExpanded && _default$3.modifiers.expanded, isOddStriped && _default$3.modifiers.striped, isEvenStriped && _default$3.modifiers.stripedEven), ref: innerRef }, props), children));
     };
     const Tbody = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TbodyBase, Object.assign({}, props, { innerRef: ref }))));
     Tbody.displayName = 'Tbody';
 
     const TrBase = (_a) => {
-        var { children, className, isExpanded, isEditable, isHidden = false, isHoverable = false, isRowSelected = false, innerRef, ouiaId, ouiaSafe = true, resetOffset = false, onRowClick } = _a, props = __rest$2(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isHoverable", "isRowSelected", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick"]);
+        var { children, className, isExpanded, isEditable, isHidden = false, isHoverable = false, isRowSelected = false, isStriped = false, innerRef, ouiaId, ouiaSafe = true, resetOffset = false, onRowClick } = _a, props = __rest$2(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isHoverable", "isRowSelected", "isStriped", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick"]);
         const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe);
         let onKeyDown = null;
         if (onRowClick) {
@@ -7181,7 +7173,7 @@
                 }
             };
         }
-        return (React__namespace.createElement("tr", Object.assign({ className: css(className, isExpanded !== undefined && _default$3.tableExpandableRow, isExpanded && _default$3.modifiers.expanded, isEditable && _default$4.modifiers.inlineEditable, isHoverable && _default$3.modifiers.hoverable, isRowSelected && _default$3.modifiers.selected, resetOffset && _default$3.modifiers.firstCellOffsetReset), hidden: isHidden || (isExpanded !== undefined && !isExpanded) }, (isHoverable && { tabIndex: 0 }), { ref: innerRef }, (onRowClick && { onClick: onRowClick, onKeyDown }), ouiaProps, props), children));
+        return (React__namespace.createElement("tr", Object.assign({ className: css(className, isExpanded !== undefined && _default$3.tableExpandableRow, isExpanded && _default$3.modifiers.expanded, isEditable && _default$4.modifiers.inlineEditable, isHoverable && _default$3.modifiers.hoverable, isRowSelected && _default$3.modifiers.selected, isStriped && _default$3.modifiers.striped, resetOffset && _default$3.modifiers.firstCellOffsetReset), hidden: isHidden || (isExpanded !== undefined && !isExpanded) }, (isHoverable && { tabIndex: 0 }), { ref: innerRef }, (onRowClick && { onClick: onRowClick, onKeyDown }), ouiaProps, props), children));
     };
     const Tr = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TrBase, Object.assign({}, props, { innerRef: ref }))));
     Tr.displayName = 'Tr';

package/dist/umd/react-table.min.css

@@ -1297,6 +1297,8 @@
   --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
   --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
   --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
+  --pf-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-table__tree-view-icon--MinWidth: var(--pf-global--FontSize--md);
   --pf-c-table__tree-view-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -1371,6 +1373,12 @@
   margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
 }
 
+.pf-c-table__tree-view-main > .pf-c-table__check label {
+  padding-right: var(--pf-c-table__tree-view-main--c-table__check--PaddingRight);
+  padding-left: var(--pf-c-table__tree-view-main--c-table__check--PaddingLeft);
+  margin: 0 calc(var(--pf-c-table__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
+}
+
 .pf-c-table__tree-view-text {
   display: flex;
 }
@@ -19055,6 +19063,15 @@ ul.pf-c-list {
   flex: 1 0 auto;
 }
 
+.pf-c-pagination__nav-page-select .pf-c-form-control {
+  appearance: textfield;
+}
+
+.pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-inner-spin-button, .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
 .pf-c-pagination {
   --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
   --pf-c-pagination--m-bottom--child--MarginRight: 0;
@@ -19083,7 +19100,7 @@ ul.pf-c-list {
   --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
+  --pf-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
   --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
   --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
   --pf-c-pagination__total-items--Display: block;
@@ -19964,6 +19981,10 @@ ul.pf-c-list {
   --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100);
 }
 
+.pf-c-progress-stepper__step:last-child {
+  --pf-c-progress-stepper__step-main--MarginBottom: 0;
+}
+
 .pf-c-progress-stepper__step-connector {
   position: relative;
   display: flex;
@@ -24440,10 +24461,19 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-toolbar--spacer: 0;
 }
 
+.pf-c-number-input .pf-c-form-control {
+  appearance: textfield;
+}
+
+.pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
 .pf-c-number-input {
   --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2);
+  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
   --pf-c-number-input--c-form-control--width-chars: 4;
   --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
   display: inline-flex;
@@ -24454,12 +24484,6 @@ label.pf-c-radio, .pf-c-radio__label,
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);
   text-align: right;
-  -moz-appearance: textfield;
-}
-
-.pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
 }
 
 .pf-c-input-group + .pf-c-number-input__unit,
@@ -25562,6 +25586,7 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__text-input--MinWidth: 12ch;
   --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
+  --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
   --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
   --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -25683,6 +25708,10 @@ label.pf-c-radio, .pf-c-radio__label,
   color: var(--pf-c-text-input-group__text-input--m-hint--Color);
 }
 
+.pf-c-text-input-group__text-input::placeholder {
+  color: var(--pf-c-text-input-group--placeholder--Color);
+}
+
 .pf-c-text-input-group__utilities {
   display: flex;
   align-items: center;
@@ -29227,6 +29256,20 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl);
   --pf-c-alert-group--m-toast--MaxWidth: 37.5rem;
   --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
+  --pf-c-alert-group__overflow-button--BorderWidth: 0;
+  --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
+  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
+  --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
+  --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
+  --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
+  --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
 }
 
 .pf-c-alert-group > * + * {
@@ -29242,6 +29285,31 @@ label.pf-c-radio, .pf-c-radio__label,
   max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
 }
 
+.pf-c-alert-group__overflow-button {
+  position: relative;
+  width: 100%;
+  padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
+  color: var(--pf-c-alert-group__overflow-button--Color);
+  background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
+  border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
+  box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
+}
+
+.pf-c-alert-group__overflow-button:hover {
+  --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
+  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
+}
+
+.pf-c-alert-group__overflow-button:focus {
+  --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
+  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
+}
+
+.pf-c-alert-group__overflow-button:active {
+  --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
+  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
+}
+
 .pf-c-about-modal-box {
   --pf-global--Color--100: var(--pf-global--Color--light-100);
   --pf-global--Color--200: var(--pf-global--Color--light-200);