@patternfly/react-core 4.203.0 → 4.204.0

package/dist/umd/react-core.js

@@ -13306,8 +13306,10 @@
     ActionGroup.displayName = 'ActionGroup';
 
     const Form = (_a) => {
-        var { children = null, className = '', isHorizontal = false, isWidthLimited = false } = _a, props = __rest$1(_a, ["children", "className", "isHorizontal", "isWidthLimited"]);
-        return (React__namespace.createElement("form", Object.assign({ noValidate: true }, props, { className: css(styles$Z.form, isHorizontal && styles$Z.modifiers.horizontal, isWidthLimited && styles$Z.modifiers.limitWidth, className) }), children));
+        var { children = null, className = '', isHorizontal = false, isWidthLimited = false, maxWidth = '' } = _a, props = __rest$1(_a, ["children", "className", "isHorizontal", "isWidthLimited", "maxWidth"]);
+        return (React__namespace.createElement("form", Object.assign({ noValidate: true }, (maxWidth && {
+            style: Object.assign({ '--pf-c-form--m-limit-width--MaxWidth': maxWidth }, props.style)
+        }), props, { className: css(styles$Z.form, isHorizontal && styles$Z.modifiers.horizontal, (isWidthLimited || maxWidth) && styles$Z.modifiers.limitWidth, className) }), children));
     };
     Form.displayName = 'Form';
 
@@ -14106,6 +14108,7 @@
       "loginMainFooterLinksItemLink": "pf-c-login__main-footer-links-item-link",
       "loginMainHeader": "pf-c-login__main-header",
       "loginMainHeaderDesc": "pf-c-login__main-header-desc",
+      "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
       "title": "pf-c-title"
     };
 
@@ -15750,7 +15753,7 @@
     var FileIcon$1 = FileIcon;
 
     const MultipleFileUploadStatusItem = (_a) => {
-        var { className, file, fileIcon, onReadStarted = () => { }, onReadFinished = () => { }, onReadSuccess = () => { }, onReadFail = () => { }, onClearClick = () => { }, customFileHandler, fileName, fileSize, progressValue, progressVariant, progressAriaLabel, progressAriaLabelledBy, buttonAriaLabel = 'Remove from list' } = _a, props = __rest$1(_a, ["className", "file", "fileIcon", "onReadStarted", "onReadFinished", "onReadSuccess", "onReadFail", "onClearClick", "customFileHandler", "fileName", "fileSize", "progressValue", "progressVariant", "progressAriaLabel", "progressAriaLabelledBy", "buttonAriaLabel"]);
+        var { className, file, fileIcon, onReadStarted = () => { }, onReadFinished = () => { }, onReadSuccess = () => { }, onReadFail = () => { }, onClearClick = () => { }, customFileHandler, fileName, fileSize, progressValue, progressVariant, progressAriaLabel, progressAriaLabelledBy, progressId, buttonAriaLabel = 'Remove from list' } = _a, props = __rest$1(_a, ["className", "file", "fileIcon", "onReadStarted", "onReadFinished", "onReadSuccess", "onReadFail", "onClearClick", "customFileHandler", "fileName", "fileSize", "progressValue", "progressVariant", "progressAriaLabel", "progressAriaLabelledBy", "progressId", "buttonAriaLabel"]);
         const [loadPercentage, setLoadPercentage] = React__namespace.useState(0);
         const [loadResult, setLoadResult] = React__namespace.useState();
         function readFile(file) {
@@ -15804,7 +15807,7 @@
         return (React__namespace.createElement("li", Object.assign({ className: css(styles$x.multipleFileUploadStatusItem, className) }, props),
             React__namespace.createElement("div", { className: styles$x.multipleFileUploadStatusItemIcon }, fileIcon || React__namespace.createElement(FileIcon$1, null)),
             React__namespace.createElement("div", { className: styles$x.multipleFileUploadStatusItemMain },
-                React__namespace.createElement(Progress, { title: title, value: progressValue || loadPercentage, variant: progressVariant || loadResult, "aria-label": progressAriaLabel, "aria-labelledby": progressAriaLabelledBy })),
+                React__namespace.createElement(Progress, { title: title, value: progressValue || loadPercentage, variant: progressVariant || loadResult, "aria-label": progressAriaLabel, "aria-labelledby": progressAriaLabelledBy, id: progressId })),
             React__namespace.createElement("div", { className: styles$x.multipleFileUploadStatusItemClose },
                 React__namespace.createElement(Button, { variant: "plain", "aria-label": buttonAriaLabel, onClick: onClearClick },
                     React__namespace.createElement(TimesCircleIcon$1, null)))));
@@ -17022,13 +17025,19 @@
     };
 
     let toggleId = 0;
-    const OptionsToggle = ({ itemsTitle = 'items', optionsToggle = 'Items per page', 
+    const OptionsToggle = ({ itemsTitle = 'items', optionsToggle, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     itemsPerPageTitle = 'Items per page', ofWord = 'of', firstIndex = 0, lastIndex = 0, itemCount, widgetId = '', showToggle = true, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onToggle = (_isOpen) => undefined, isOpen = false, isDisabled = false, parentRef = null, toggleTemplate: ToggleTemplate, onEnter = null }) => (React__namespace.createElement("div", { className: css(styles$s.optionsMenuToggle, isDisabled && styles$s.modifiers.disabled, styles$s.modifiers.plain, styles$s.modifiers.text) }, showToggle && (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("span", { className: css(styles$s.optionsMenuToggleText) }, typeof ToggleTemplate === 'string' ? (fillTemplate(ToggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })) : (React__namespace.createElement(ToggleTemplate, { firstIndex: firstIndex, lastIndex: lastIndex, ofWord: ofWord, itemCount: itemCount, itemsTitle: itemsTitle }))),
-        React__namespace.createElement(DropdownToggle, { onEnter: onEnter, "aria-label": optionsToggle, onToggle: onToggle, isDisabled: isDisabled || (itemCount && itemCount <= 0), isOpen: isOpen, id: `${widgetId}-toggle-${toggleId++}`, className: styles$s.optionsMenuToggleButton, parentRef: parentRef })))));
+    onToggle = (_isOpen) => undefined, isOpen = false, isDisabled = false, parentRef = null, toggleTemplate: ToggleTemplate, onEnter = null, perPageComponent = 'div' }) => {
+        const isDiv = perPageComponent === 'div';
+        const toggleClasses = css(styles$s.optionsMenuToggle, isDisabled && styles$s.modifiers.disabled, styles$s.modifiers.plain, styles$s.modifiers.text);
+        const template = typeof ToggleTemplate === 'string' ? (fillTemplate(ToggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })) : (React__namespace.createElement(ToggleTemplate, { firstIndex: firstIndex, lastIndex: lastIndex, ofWord: ofWord, itemCount: itemCount, itemsTitle: itemsTitle }));
+        const dropdown = showToggle && (React__namespace.createElement(React__namespace.Fragment, null,
+            isDiv && React__namespace.createElement("span", { className: css(styles$s.optionsMenuToggleText) }, template),
+            React__namespace.createElement(DropdownToggle, { onEnter: onEnter, "aria-label": isDiv ? optionsToggle || 'Items per page' : optionsToggle, onToggle: onToggle, isDisabled: isDisabled || (itemCount && itemCount <= 0), isOpen: isOpen, id: `${widgetId}-toggle-${toggleId++}`, className: isDiv ? styles$s.optionsMenuToggleButton : toggleClasses, parentRef: parentRef, "aria-haspopup": "listbox" }, !isDiv && template)));
+        return isDiv ? React__namespace.createElement("div", { className: toggleClasses }, dropdown) : dropdown;
+    };
     OptionsToggle.displayName = 'OptionsToggle';
 
     class PaginationOptionsMenu extends React__namespace.Component {
@@ -17071,12 +17080,12 @@
             };
         }
         render() {
-            const { widgetId, isDisabled, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle, ofWord } = this.props;
+            const { widgetId, isDisabled, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle, ofWord, perPageComponent } = this.props;
             const { isOpen } = this.state;
             return (React__namespace.createElement(DropdownContext.Provider, { value: {
                     id: widgetId,
                     onSelect: this.onSelect,
-                    toggleIndicatorClass: styles$s.optionsMenuToggleButtonIcon,
+                    toggleIndicatorClass: perPageComponent === 'div' ? styles$s.optionsMenuToggleButtonIcon : styles$s.optionsMenuToggleIcon,
                     toggleTextClass: styles$s.optionsMenuToggleText,
                     menuClass: styles$s.optionsMenuMenu,
                     itemClass: styles$s.optionsMenuMenuItem,
@@ -17087,7 +17096,7 @@
                     baseComponent: 'div',
                     ouiaComponentType: PaginationOptionsMenu.displayName
                 } },
-                React__namespace.createElement(DropdownWithContext, { direction: dropDirection, isOpen: isOpen, toggle: React__namespace.createElement(OptionsToggle, { optionsToggle: optionsToggle, itemsPerPageTitle: itemsPerPageTitle, showToggle: perPageOptions && perPageOptions.length > 0, onToggle: this.onToggle, isOpen: isOpen, widgetId: widgetId, firstIndex: firstIndex, lastIndex: lastIndex, itemCount: itemCount, itemsTitle: itemsTitle, ofWord: ofWord, toggleTemplate: toggleTemplate, parentRef: this.parentRef.current, isDisabled: isDisabled }), dropdownItems: this.renderItems(), isPlain: true })));
+                React__namespace.createElement(DropdownWithContext, { direction: dropDirection, isOpen: isOpen, toggle: React__namespace.createElement(OptionsToggle, { optionsToggle: optionsToggle, itemsPerPageTitle: itemsPerPageTitle, showToggle: perPageOptions && perPageOptions.length > 0, onToggle: this.onToggle, isOpen: isOpen, widgetId: widgetId, firstIndex: firstIndex, lastIndex: lastIndex, itemCount: itemCount, itemsTitle: itemsTitle, ofWord: ofWord, toggleTemplate: toggleTemplate, parentRef: this.parentRef.current, isDisabled: isDisabled, perPageComponent: perPageComponent }), dropdownItems: this.renderItems(), isPlain: true })));
         }
     }
     PaginationOptionsMenu.displayName = 'PaginationOptionsMenu';
@@ -17099,7 +17108,7 @@
         perPageOptions: [],
         itemsPerPageTitle: 'Items per page',
         perPageSuffix: 'per page',
-        optionsToggle: 'Items per page',
+        optionsToggle: '',
         ofWord: 'of',
         perPage: 0,
         firstIndex: 0,
@@ -17107,7 +17116,8 @@
         defaultToFullPage: false,
         itemsTitle: 'items',
         toggleTemplate: ToggleTemplate,
-        onPerPageSelect: () => null
+        onPerPageSelect: () => null,
+        perPageComponent: 'div'
     };
 
     const c_pagination__nav_page_select_c_form_control_width_chars = {
@@ -17177,7 +17187,7 @@
             }
         }
         render() {
-            const _a = this.props, { children, className, variant, isDisabled, isCompact, isStatic, isSticky, perPage, titles, firstPage, page: propPage, offset, defaultToFullPage, itemCount, itemsStart, itemsEnd, perPageOptions, dropDirection: dropDirectionProp, widgetId, toggleTemplate, onSetPage, onPerPageSelect, onFirstClick, onPreviousClick, onNextClick, onPageInput, onLastClick, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["children", "className", "variant", "isDisabled", "isCompact", "isStatic", "isSticky", "perPage", "titles", "firstPage", "page", "offset", "defaultToFullPage", "itemCount", "itemsStart", "itemsEnd", "perPageOptions", "dropDirection", "widgetId", "toggleTemplate", "onSetPage", "onPerPageSelect", "onFirstClick", "onPreviousClick", "onNextClick", "onPageInput", "onLastClick", "ouiaId", "ouiaSafe"]);
+            const _a = this.props, { children, className, variant, isDisabled, isCompact, isStatic, isSticky, perPage, titles, firstPage, page: propPage, offset, defaultToFullPage, itemCount, itemsStart, itemsEnd, perPageOptions, dropDirection: dropDirectionProp, widgetId, toggleTemplate, onSetPage, onPerPageSelect, onFirstClick, onPreviousClick, onNextClick, onPageInput, onLastClick, ouiaId, ouiaSafe, perPageComponent } = _a, props = __rest$1(_a, ["children", "className", "variant", "isDisabled", "isCompact", "isStatic", "isSticky", "perPage", "titles", "firstPage", "page", "offset", "defaultToFullPage", "itemCount", "itemsStart", "itemsEnd", "perPageOptions", "dropDirection", "widgetId", "toggleTemplate", "onSetPage", "onPerPageSelect", "onFirstClick", "onPreviousClick", "onNextClick", "onPageInput", "onLastClick", "ouiaId", "ouiaSafe", "perPageComponent"]);
             const dropDirection = dropDirectionProp || (variant === 'bottom' && !isStatic ? 'up' : 'down');
             let page = propPage;
             if (!page && offset) {
@@ -17209,7 +17219,7 @@
                         typeof toggleTemplate !== 'string' &&
                         toggleTemplate(toggleTemplateProps),
                     !toggleTemplate && (React__namespace.createElement(ToggleTemplate, { firstIndex: firstIndex, lastIndex: lastIndex, itemCount: itemCount, itemsTitle: titles.items, ofWord: titles.ofWord })))),
-                React__namespace.createElement(PaginationOptionsMenu, { itemsPerPageTitle: titles.itemsPerPage, perPageSuffix: titles.perPageSuffix, itemsTitle: isCompact ? '' : titles.items, optionsToggle: titles.optionsToggle, perPageOptions: perPageOptions, firstIndex: itemsStart !== null ? itemsStart : firstIndex, lastIndex: itemsEnd !== null ? itemsEnd : lastIndex, ofWord: titles.ofWord, defaultToFullPage: defaultToFullPage, itemCount: itemCount, page: page, perPage: perPage, lastPage: lastPage, onPerPageSelect: onPerPageSelect, dropDirection: dropDirection, widgetId: widgetId, toggleTemplate: toggleTemplate, isDisabled: isDisabled }),
+                React__namespace.createElement(PaginationOptionsMenu, { itemsPerPageTitle: titles.itemsPerPage, perPageSuffix: titles.perPageSuffix, itemsTitle: isCompact ? '' : titles.items, optionsToggle: titles.optionsToggle, perPageOptions: perPageOptions, firstIndex: itemsStart !== null ? itemsStart : firstIndex, lastIndex: itemsEnd !== null ? itemsEnd : lastIndex, ofWord: titles.ofWord, defaultToFullPage: defaultToFullPage, itemCount: itemCount, page: page, perPage: perPage, lastPage: lastPage, onPerPageSelect: onPerPageSelect, dropDirection: dropDirection, widgetId: widgetId, toggleTemplate: toggleTemplate, isDisabled: isDisabled, perPageComponent: perPageComponent }),
                 React__namespace.createElement(Navigation, { pagesTitle: titles.page, pagesTitlePlural: titles.pages, toLastPage: titles.toLastPage, toPreviousPage: titles.toPreviousPage, toNextPage: titles.toNextPage, toFirstPage: titles.toFirstPage, currPage: titles.currPage, paginationTitle: titles.paginationTitle, ofWord: titles.ofWord, page: itemCount && itemCount <= 0 ? 0 : page, perPage: perPage, itemCount: itemCount, firstPage: itemsStart !== null ? itemsStart : 1, lastPage: lastPage, onSetPage: onSetPage, onFirstClick: onFirstClick, onPreviousClick: onPreviousClick, onNextClick: onNextClick, onLastClick: onLastClick, onPageInput: onPageInput, isDisabled: isDisabled, isCompact: isCompact }),
                 children));
         }
@@ -17233,7 +17243,7 @@
             toPreviousPage: 'Go to previous page',
             toLastPage: 'Go to last page',
             toNextPage: 'Go to next page',
-            optionsToggle: 'Items per page',
+            optionsToggle: '',
             currPage: 'Current page',
             paginationTitle: 'Pagination',
             ofWord: 'of'
@@ -17253,7 +17263,8 @@
         onNextClick: () => undefined,
         onPageInput: () => undefined,
         onLastClick: () => undefined,
-        ouiaSafe: true
+        ouiaSafe: true,
+        perPageComponent: 'div'
     };
 
     Promise.resolve().then(function () { return progressStepper; });
@@ -17316,10 +17327,11 @@
         warning: styles$p.modifiers.warning,
         danger: styles$p.modifiers.danger
     };
-    const ProgressStepBase = (_a) => {
-        var { children, className, variant, isCurrent, description, icon, titleId, popover, innerRef, 'aria-label': ariaLabel } = _a, props = __rest$1(_a, ["children", "className", "variant", "isCurrent", "description", "icon", "titleId", "popover", "innerRef", 'aria-label']);
+    const ProgressStep = (_a) => {
+        var { children, className, variant, isCurrent, description, icon, titleId, 'aria-label': ariaLabel, popoverRender } = _a, props = __rest$1(_a, ["children", "className", "variant", "isCurrent", "description", "icon", "titleId", 'aria-label', "popoverRender"]);
         const _icon = icon !== undefined ? icon : variantIcons[variant];
-        const Component = popover !== undefined ? 'span' : 'div';
+        const Component = popoverRender !== undefined ? 'span' : 'div';
+        const stepRef = React__namespace.useRef();
         if (props.id === undefined || titleId === undefined) {
             /* eslint-disable no-console */
             console.warn('ProgressStep: The titleId and id properties are required to make this component accessible, and one or both of these properties are missing.');
@@ -17328,12 +17340,11 @@
             React__namespace.createElement("div", { className: css(styles$p.progressStepperStepConnector) },
                 React__namespace.createElement("span", { className: css(styles$p.progressStepperStepIcon) }, _icon && _icon)),
             React__namespace.createElement("div", { className: css(styles$p.progressStepperStepMain) },
-                React__namespace.createElement(Component, Object.assign({ className: css(styles$p.progressStepperStepTitle, popover && styles$p.modifiers.helpText), id: titleId, ref: innerRef }, (popover && { tabIndex: 0, role: 'button', type: 'button' }), (props.id !== undefined && titleId !== undefined && { 'aria-labelledby': `${props.id} ${titleId}` })),
+                React__namespace.createElement(Component, Object.assign({ className: css(styles$p.progressStepperStepTitle, popoverRender && styles$p.modifiers.helpText), id: titleId, ref: stepRef }, (popoverRender && { tabIndex: 0, role: 'button', type: 'button' }), (props.id !== undefined && titleId !== undefined && { 'aria-labelledby': `${props.id} ${titleId}` })),
                     children,
-                    popover),
+                    popoverRender && popoverRender(stepRef)),
                 description && React__namespace.createElement("div", { className: css(styles$p.progressStepperStepDescription) }, description))));
     };
-    const ProgressStep = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(ProgressStepBase, Object.assign({ innerRef: ref }, props))));
     ProgressStep.displayName = 'ProgressStep';
 
     Promise.resolve().then(function () { return radio; });
@@ -18104,13 +18115,15 @@
         render() {
             const _a = this.props, { 
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            id, className, label, labelOff, isChecked, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["id", "className", "label", "labelOff", "isChecked", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
+            id, className, label, labelOff, isChecked, hasCheckIcon, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["id", "className", "label", "labelOff", "isChecked", "hasCheckIcon", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
             const isAriaLabelledBy = props['aria-label'] === '';
             return (React__namespace.createElement("label", Object.assign({ className: css(styles$i.switch, isReversed && styles$i.modifiers.reverse, className), htmlFor: this.id }, getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)),
                 React__namespace.createElement("input", Object.assign({ id: this.id, className: css(styles$i.switchInput), type: "checkbox", onChange: event => onChange(event.target.checked, event), checked: isChecked, disabled: isDisabled, "aria-labelledby": isAriaLabelledBy ? `${this.id}-on` : null }, props)),
                 label !== undefined ? (React__namespace.createElement(React__namespace.Fragment, null,
                     React__namespace.createElement("span", { className: css(styles$i.switchToggle) }),
                     React__namespace.createElement("span", { className: css(styles$i.switchLabel, styles$i.modifiers.on), id: isAriaLabelledBy ? `${this.id}-on` : null, "aria-hidden": "true" }, label),
+                    hasCheckIcon && (React__namespace.createElement("div", { className: css(styles$i.switchToggleIcon), "aria-hidden": "true" },
+                        React__namespace.createElement(CheckIcon$1, { noVerticalAlign: true }))),
                     React__namespace.createElement("span", { className: css(styles$i.switchLabel, styles$i.modifiers.off), id: isAriaLabelledBy ? `${this.id}-off` : null, "aria-hidden": "true" }, labelOff !== undefined ? labelOff : label))) : (React__namespace.createElement("span", { className: css(styles$i.switchToggle) },
                     React__namespace.createElement("div", { className: css(styles$i.switchToggleIcon), "aria-hidden": "true" },
                         React__namespace.createElement(CheckIcon$1, { noVerticalAlign: true }))))));
@@ -18152,6 +18165,7 @@
         "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
         "expanded": "pf-m-expanded",
         "pageInsets": "pf-m-page-insets",
+        "action": "pf-m-action",
         "disabled": "pf-m-disabled",
         "ariaDisabled": "pf-m-aria-disabled",
         "insetNone": "pf-m-inset-none",
@@ -18192,7 +18206,10 @@
         "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
       },
       "tabs": "pf-c-tabs",
+      "tabsAdd": "pf-c-tabs__add",
       "tabsItem": "pf-c-tabs__item",
+      "tabsItemClose": "pf-c-tabs__item-close",
+      "tabsItemCloseIcon": "pf-c-tabs__item-close-icon",
       "tabsItemIcon": "pf-c-tabs__item-icon",
       "tabsItemText": "pf-c-tabs__item-text",
       "tabsLink": "pf-c-tabs__link",

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

@@ -10335,17 +10335,24 @@ ul.pf-c-list {
     grid-template-columns: 1fr auto;
   }
 }
+.pf-c-login__main-header-utilities,
 .pf-c-login__main-header .pf-c-dropdown {
   grid-column: auto;
   grid-row: auto;
 }
 
 @media (min-width: 768px) {
-  .pf-c-login__main-header .pf-c-dropdown {
+  .pf-c-login__main-header-utilities,
+.pf-c-login__main-header .pf-c-dropdown {
     grid-column: 2/3;
     grid-row: 1;
   }
 }
+.pf-c-login__main-header-utilities .pf-c-dropdown {
+  grid-column: auto;
+  grid-row: auto;
+}
+
 .pf-c-login__main-header-desc {
   margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
   font-size: var(--pf-c-login__main-header-desc--FontSize);
@@ -18037,6 +18044,8 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-tabs__list--Display: flex;
   --pf-c-tabs__list--Visibility: visible;
+  --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-tabs__link--Color: var(--pf-global--Color--200);
   --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
   --pf-c-tabs__link--BackgroundColor: transparent;
@@ -18052,11 +18061,14 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
   --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
+  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
-  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderTopWidth: 0;
   --pf-c-tabs__link--before--BorderRightWidth: 0;
   --pf-c-tabs__link--before--BorderBottomWidth: 0;
@@ -18114,6 +18126,19 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
   --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
+  --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
+  --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
+  --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
+  --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
+  --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
   position: relative;
   display: flex;
   width: var(--pf-c-tabs--Width);
@@ -18235,6 +18260,10 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
 }
 
+.pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
+  --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
+}
+
 .pf-c-tabs.pf-m-vertical {
   --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
   --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
@@ -18430,6 +18459,8 @@ svg.pf-c-spinner.pf-m-xl {
 
 .pf-c-tabs.pf-m-secondary {
   --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
+  --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
+  --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
 }
 
 .pf-c-tabs.pf-m-page-insets {
@@ -18498,11 +18529,28 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
 }
 
+.pf-c-tabs__item.pf-m-action {
+  --pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
+  position: relative;
+}
+
+.pf-c-tabs__item.pf-m-action::before {
+  z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
+}
+
+.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
+.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
+  content: revert;
+}
+
 .pf-c-tabs::before,
 .pf-c-tabs__list::before,
 .pf-c-tabs__link::before,
 .pf-c-tabs__link::after,
-.pf-c-tabs__scroll-button::before {
+.pf-c-tabs__item.pf-m-action::before,
+.pf-c-tabs__item.pf-m-action::after,
+.pf-c-tabs__scroll-button::before,
+.pf-c-tabs__add::before {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -18514,18 +18562,21 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-tabs__list::before,
 .pf-c-tabs__link::before,
 .pf-c-tabs__link::after,
-.pf-c-tabs__scroll-button::before {
+.pf-c-tabs__item.pf-m-action::before,
+.pf-c-tabs__item.pf-m-action::after,
+.pf-c-tabs__scroll-button::before,
+.pf-c-tabs__add::before {
   top: 0;
 }
 
 .pf-c-tabs__link,
 .pf-c-tabs__scroll-button,
-.pf-c-tabs__list::before {
+.pf-c-tabs__list::before,
+.pf-c-tabs__add::before {
   border: 0;
 }
 
 .pf-c-tabs__link {
-  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
   position: relative;
   display: flex;
   flex: 1;
@@ -18533,19 +18584,24 @@ svg.pf-c-spinner.pf-m-xl {
   font-size: var(--pf-c-tabs__link--FontSize);
   color: var(--pf-c-tabs__link--Color);
   text-decoration: none;
-  background-color: var(--pf-c-tabs__link--BackgroundColor);
   outline-offset: var(--pf-c-tabs__link--OutlineOffset);
 }
 
-.pf-c-tabs__link::before {
+.pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
+  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
+  background-color: var(--pf-c-tabs__link--BackgroundColor);
+}
+
+.pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
   pointer-events: none;
-  border-color: var(--pf-c-tabs__link--before--border-color--base);
   border-width: var(--pf-c-tabs__link--before--BorderTopWidth) var(--pf-c-tabs__link--before--BorderRightWidth) var(--pf-c-tabs__link--before--BorderBottomWidth) var(--pf-c-tabs__link--before--BorderLeftWidth);
+  border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
   border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
   border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
+  border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
 }
 
-.pf-c-tabs__link::after {
+.pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
   top: var(--pf-c-tabs__link--after--Top);
   right: var(--pf-c-tabs__link--after--Right);
   bottom: var(--pf-c-tabs__link--after--Bottom);
@@ -18554,15 +18610,15 @@ svg.pf-c-spinner.pf-m-xl {
   border-width: var(--pf-c-tabs__link--after--BorderTopWidth) var(--pf-c-tabs__link--after--BorderRightWidth) var(--pf-c-tabs__link--after--BorderBottomWidth) var(--pf-c-tabs__link--after--BorderLeftWidth);
 }
 
-.pf-c-tabs__link:hover {
+.pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
 }
 
-.pf-c-tabs__link:focus {
+.pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
 }
 
-.pf-c-tabs__link:active {
+.pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
 }
 
@@ -18570,7 +18626,7 @@ svg.pf-c-spinner.pf-m-xl {
   pointer-events: none;
 }
 
-.pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
+.pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
   --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
@@ -18592,6 +18648,23 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs__link--child--MarginRight: 0;
 }
 
+.pf-c-tabs__item-close {
+  display: flex;
+}
+
+.pf-c-tabs__item-close .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
+  --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
+  --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
+  outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
+}
+
+.pf-c-tabs__item-close-icon {
+  display: inline-block;
+  margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
+}
+
 .pf-c-tabs__scroll-button {
   flex: none;
   width: var(--pf-c-tabs__scroll-button--Width);
@@ -18629,6 +18702,21 @@ svg.pf-c-spinner.pf-m-xl {
   pointer-events: none;
 }
 
+.pf-c-tabs__add {
+  position: relative;
+  display: flex;
+}
+
+.pf-c-tabs__add::before {
+  border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
+}
+
+.pf-c-tabs__add .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
+  --pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
+  --pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
+}
+
 .pf-c-tabs.pf-m-inset-none {
   --pf-c-tabs--inset: 0;
   --pf-c-tabs--m-vertical--inset: 0;