@patternfly/react-core 4.224.7 → 4.224.10

package/dist/umd/react-core.js

@@ -1441,11 +1441,11 @@
      *  </GenerateId>
      *  );
      */
-    let currentId$3 = 0;
+    let currentId$2 = 0;
     class GenerateId extends React__namespace.Component {
         constructor() {
             super(...arguments);
-            this.id = `${this.props.prefix}${currentId$3++}`;
+            this.id = `${this.props.prefix}${currentId$2++}`;
         }
         render() {
             return this.props.children(this.id);
@@ -4363,7 +4363,7 @@
                 return '1em';
         }
     };
-    let currentId$2 = 0;
+    let currentId$1 = 0;
     /**
      * Factory to create Icon class components for consumers
      */
@@ -4372,7 +4372,7 @@
         return _a = class SVGIcon extends React__namespace.Component {
                 constructor() {
                     super(...arguments);
-                    this.id = `icon-title-${currentId$2++}`;
+                    this.id = `icon-title-${currentId$1++}`;
                 }
                 render() {
                     const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
@@ -7480,7 +7480,7 @@
     };
 
     // seed for the aria-labelledby ID
-    let currentId$1 = 0;
+    let currentId = 0;
     class Select extends React__namespace.Component {
         constructor() {
             super(...arguments);
@@ -8106,7 +8106,7 @@
             /* eslint-disable @typescript-eslint/no-unused-vars */
             favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject, shouldResetOnSelect, isFlipEnabled } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "onBlur", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "typeAheadAriaDescribedby", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "inputAutoComplete", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject", "shouldResetOnSelect", "isFlipEnabled"]);
             const { focusFirstOption: openedOnEnter, typeaheadCurrIndex, typeaheadInputValue, typeaheadFilteredChildren, favoritesGroup } = this.state;
-            const selectToggleId = toggleId || `pf-select-toggle-id-${currentId$1++}`;
+            const selectToggleId = toggleId || `pf-select-toggle-id-${currentId++}`;
             const selections = Array.isArray(selectionsProp) ? selectionsProp : [selectionsProp];
             // Find out if the selected option is a placeholder
             const selectedOption = React__namespace.Children.toArray(children).find((option) => option.props.value === selections[0]);
@@ -9643,7 +9643,8 @@
         extendChildren() {
             return React__namespace.Children.map(this.props.children, (child, index) => React__namespace.cloneElement(child, {
                 sendRef: this.sendRef,
-                index
+                index,
+                role: 'menuitem'
             }));
         }
     }
@@ -9659,9 +9660,6 @@
         onSelect: (event, value) => undefined
     });
 
-    // seed for the aria-labelledby ID
-    let currentId = 0;
-    const newId = currentId++;
     class ContextSelector extends React__namespace.Component {
         constructor(props) {
             super(props);
@@ -9677,15 +9675,15 @@
             };
         }
         render() {
-            const toggleId = `pf-context-selector-toggle-id-${newId}`;
-            const screenReaderLabelId = `pf-context-selector-label-id-${newId}`;
-            const searchButtonId = `pf-context-selector-search-button-id-${newId}`;
-            const _a = this.props, { children, className, isOpen, isFullHeight, onToggle, onSelect, screenReaderLabel, toggleText, searchButtonAriaLabel, searchInputValue, onSearchInputChange, searchInputPlaceholder, onSearchButtonClick, menuAppendTo, ouiaId, ouiaSafe, isPlain, isText, footer, disableFocusTrap, isFlipEnabled } = _a, props = __rest$1(_a, ["children", "className", "isOpen", "isFullHeight", "onToggle", "onSelect", "screenReaderLabel", "toggleText", "searchButtonAriaLabel", "searchInputValue", "onSearchInputChange", "searchInputPlaceholder", "onSearchButtonClick", "menuAppendTo", "ouiaId", "ouiaSafe", "isPlain", "isText", "footer", "disableFocusTrap", "isFlipEnabled"]);
-            const menuContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$P.contextSelectorMenu) }, (isFlipEnabled && { style: { position: 'revert' } })), isOpen && (React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } } },
+            const _a = this.props, { children, className, isOpen, isFullHeight, onToggle, onSelect, screenReaderLabel, toggleText, searchButtonAriaLabel, searchInputValue, onSearchInputChange, searchInputPlaceholder, onSearchButtonClick, menuAppendTo, ouiaId, ouiaSafe, isPlain, isText, footer, disableFocusTrap, isFlipEnabled, id } = _a, props = __rest$1(_a, ["children", "className", "isOpen", "isFullHeight", "onToggle", "onSelect", "screenReaderLabel", "toggleText", "searchButtonAriaLabel", "searchInputValue", "onSearchInputChange", "searchInputPlaceholder", "onSearchButtonClick", "menuAppendTo", "ouiaId", "ouiaSafe", "isPlain", "isText", "footer", "disableFocusTrap", "isFlipEnabled", "id"]);
+            const uniqueId = id || getUniqueId();
+            const toggleId = `pf-context-selector-toggle-id-${uniqueId}`;
+            const screenReaderLabelId = `pf-context-selector-label-id-${uniqueId}`;
+            const menuContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$P.contextSelectorMenu) }, (isFlipEnabled && { style: { position: 'revert' } }), { id: uniqueId }), isOpen && (React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } } },
                 React__namespace.createElement("div", { className: css(styles$P.contextSelectorMenuSearch) },
                     React__namespace.createElement(InputGroup, null,
-                        React__namespace.createElement(TextInput, { value: searchInputValue, type: "search", placeholder: searchInputPlaceholder, onChange: onSearchInputChange, onKeyPress: this.onEnterPressed, "aria-labelledby": searchButtonId }),
-                        React__namespace.createElement(Button, { variant: exports.ButtonVariant.control, "aria-label": searchButtonAriaLabel, id: searchButtonId, onClick: onSearchButtonClick },
+                        React__namespace.createElement(TextInput, { value: searchInputValue, type: "search", placeholder: searchInputPlaceholder, onChange: onSearchInputChange, onKeyPress: this.onEnterPressed, "aria-label": searchButtonAriaLabel }),
+                        React__namespace.createElement(Button, { variant: exports.ButtonVariant.control, "aria-label": searchButtonAriaLabel, onClick: onSearchButtonClick },
                             React__namespace.createElement(SearchIcon$1, { "aria-hidden": "true" })))),
                 React__namespace.createElement(ContextSelectorContext.Provider, { value: { onSelect } },
                     React__namespace.createElement(ContextSelectorMenuList, { isOpen: isOpen }, children)),
@@ -11123,7 +11121,13 @@
             setFocusedOption(id);
             onOptionSelect(e, index, id);
         };
-        return (React__namespace.createElement("ul", Object.assign({ className: css(styles$L.dualListSelectorList), role: isTree ? 'tree' : 'listbox', "aria-multiselectable": "true", "aria-labelledby": ariaLabelledBy, "aria-activedescendant": focusedOption, "aria-disabled": isDisabled ? 'true' : undefined }, props), options.length === 0
+        const hasOptions = () => options.length !== 0 || (children !== undefined && children.length !== 0);
+        return (React__namespace.createElement("ul", Object.assign({ className: css(styles$L.dualListSelectorList) }, (hasOptions() && {
+            role: isTree ? 'tree' : 'listbox',
+            'aria-multiselectable': true,
+            'aria-labelledby': ariaLabelledBy,
+            'aria-activedescendant': focusedOption
+        }), { "aria-disabled": isDisabled ? 'true' : undefined }, props), options.length === 0
             ? children
             : options.map((option, index) => {
                 if (displayOption(option)) {
@@ -11284,7 +11288,7 @@
         return (React__namespace.createElement("div", Object.assign({ className: css(styles$L.dualListSelectorControls, className), tabIndex: 0, ref: wrapperRef, "aria-label": ariaLabel }, props), children));
     };
     DualListSelectorControlsWrapperBase.displayName = 'DualListSelectorControlsWrapperBase';
-    const DualListSelectorControlsWrapper = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(DualListSelectorControlsWrapperBase, Object.assign({ innerRef: ref }, props))));
+    const DualListSelectorControlsWrapper = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(DualListSelectorControlsWrapperBase, Object.assign({ innerRef: ref, role: "group" }, props))));
     DualListSelectorControlsWrapper.displayName = 'DualListSelectorControlsWrapper';
 
     const DualListSelectorControlBase = (_a) => {
@@ -11694,8 +11698,8 @@
                 ? chosenOptions.map(item => this.mapChecked(item, true))
                 : chosenOptions);
             return (React__namespace.createElement(DualListSelectorContext.Provider, { value: { isTree } },
-                React__namespace.createElement("div", Object.assign({ className: css(styles$L.dualListSelector, className), id: id }, props), children === '' ? (React__namespace.createElement(React__namespace.Fragment, null,
-                    React__namespace.createElement(DualListSelectorPane, { isSearchable: isSearchable, onFilterUpdate: this.onFilterUpdate, searchInputAriaLabel: availableOptionsSearchAriaLabel, filterOption: filterOption, onSearchInputChanged: onAvailableOptionsSearchInputChanged, status: availableOptionsStatusToDisplay, title: availableOptionsTitle, options: available, selectedOptions: isTree ? availableTreeOptionsChecked : availableOptionsSelected, onOptionSelect: this.onOptionSelect, onOptionCheck: (e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, false), actions: availableOptionsActions, id: `${id}-available-pane`, isDisabled: isDisabled }),
+                React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement("div", Object.assign({ className: css(styles$L.dualListSelector, className), id: id || randomId }, props), children === '' ? (React__namespace.createElement(React__namespace.Fragment, null,
+                    React__namespace.createElement(DualListSelectorPane, { isSearchable: isSearchable, onFilterUpdate: this.onFilterUpdate, searchInputAriaLabel: availableOptionsSearchAriaLabel, filterOption: filterOption, onSearchInputChanged: onAvailableOptionsSearchInputChanged, status: availableOptionsStatusToDisplay, title: availableOptionsTitle, options: available, selectedOptions: isTree ? availableTreeOptionsChecked : availableOptionsSelected, onOptionSelect: this.onOptionSelect, onOptionCheck: (e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, false), actions: availableOptionsActions, id: `${id || randomId}-available-pane`, isDisabled: isDisabled }),
                     React__namespace.createElement(DualListSelectorControlsWrapper, { "aria-label": controlsAriaLabel },
                         React__namespace.createElement(DualListSelectorControl, { isDisabled: (isTree ? availableTreeOptionsChecked.length === 0 : availableOptionsSelected.length === 0) ||
                                 isDisabled, onClick: isTree ? this.addTreeSelected : this.addSelected, ref: this.addSelectedButtonRef, "aria-label": addSelectedAriaLabel, tooltipContent: addSelectedTooltip, tooltipProps: addSelectedTooltipProps },
@@ -11704,9 +11708,10 @@
                             React__namespace.createElement(AngleDoubleRightIcon$1, null)),
                         React__namespace.createElement(DualListSelectorControl, { isDisabled: chosenOptions.length === 0 || isDisabled, onClick: isTree ? this.removeAllTreeVisible : this.removeAllVisible, "aria-label": removeAllAriaLabel, ref: this.removeAllButtonRef, tooltipContent: removeAllTooltip, tooltipProps: removeAllTooltipProps },
                             React__namespace.createElement(AngleDoubleLeftIcon$1, null)),
-                        React__namespace.createElement(DualListSelectorControl, { onClick: isTree ? this.removeTreeSelected : this.removeSelected, isDisabled: (isTree ? chosenTreeOptionsChecked.length === 0 : chosenOptionsSelected.length === 0) || isDisabled, ref: this.removeSelectedButtonRef, "aria-label": removeSelectedAriaLabel, tooltipContent: removeSelectedTooltip, tooltipProps: removeSelectedTooltipProps },
+                        React__namespace.createElement(DualListSelectorControl, { onClick: isTree ? this.removeTreeSelected : this.removeSelected, isDisabled: (isTree ? chosenTreeOptionsChecked.length === 0 : chosenOptionsSelected.length === 0) ||
+                                isDisabled, ref: this.removeSelectedButtonRef, "aria-label": removeSelectedAriaLabel, tooltipContent: removeSelectedTooltip, tooltipProps: removeSelectedTooltipProps },
                             React__namespace.createElement(AngleLeftIcon$1, null))),
-                    React__namespace.createElement(DualListSelectorPane, { isChosen: true, isSearchable: isSearchable, onFilterUpdate: this.onFilterUpdate, searchInputAriaLabel: chosenOptionsSearchAriaLabel, filterOption: filterOption, onSearchInputChanged: onChosenOptionsSearchInputChanged, title: chosenOptionsTitle, status: chosenOptionsStatusToDisplay, options: chosen, selectedOptions: isTree ? chosenTreeOptionsChecked : chosenOptionsSelected, onOptionSelect: this.onOptionSelect, onOptionCheck: (e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, true), actions: chosenOptionsActions, id: `${id}-chosen-pane`, isDisabled: isDisabled }))) : (children))));
+                    React__namespace.createElement(DualListSelectorPane, { isChosen: true, isSearchable: isSearchable, onFilterUpdate: this.onFilterUpdate, searchInputAriaLabel: chosenOptionsSearchAriaLabel, filterOption: filterOption, onSearchInputChanged: onChosenOptionsSearchInputChanged, title: chosenOptionsTitle, status: chosenOptionsStatusToDisplay, options: chosen, selectedOptions: isTree ? chosenTreeOptionsChecked : chosenOptionsSelected, onOptionSelect: this.onOptionSelect, onOptionCheck: (e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, true), actions: chosenOptionsActions, id: `${id || randomId}-chosen-pane`, isDisabled: isDisabled }))) : (children))))));
         }
     }
     DualListSelector.displayName = 'DualListSelector';
@@ -11718,7 +11723,6 @@
         chosenOptions: [],
         chosenOptionsTitle: 'Chosen options',
         chosenOptionsSearchAriaLabel: 'Chosen search input',
-        id: getUniqueId('dual-list-selector'),
         controlsAriaLabel: 'Selector controls',
         addAllAriaLabel: 'Add all',
         addSelectedAriaLabel: 'Add selected',
@@ -20578,6 +20582,7 @@
         "noBackground": "pf-m-no-background",
         "current": "pf-m-current",
         "read": "pf-m-read",
+        "selectable": "pf-m-selectable",
         "truncate": "pf-m-truncate"
       },
       "themeDark": "pf-theme-dark",

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

@@ -2552,7 +2552,7 @@ button.pf-c-breadcrumb__link {
 }
 
 .pf-c-button__progress .pf-c-spinner {
-  --pf-c-spinner--Color: currentColor;
+  --pf-c-spinner--Color: currentcolor;
 }
 
 .pf-m-overpass-font .pf-c-button {
@@ -6387,8 +6387,8 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-drawer__splitter-handle--after--Height: 0.25rem;
   --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
   --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
-  --pf-c-drawer__actions--MarginTop: calc(var(pf-global--spacer--form-element) * -1);
-  --pf-c-drawer__actions--MarginRight: calc(var(pf-global--spacer--form-element) * -1);
+  --pf-c-drawer__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-drawer__actions--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-drawer__panel--BoxShadow: none;
   --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-global--BoxShadow--lg-left);
   --pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-global--BoxShadow--lg-right);
@@ -9490,7 +9490,7 @@ label.pf-c-input-group__text {
   --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
   --pf-c-jump-links__toggle--Display: none;
   --pf-c-jump-links__toggle--Visibility: hidden;
-  --pf-c-jump-links__toggle-icon--Color: currentColor;
+  --pf-c-jump-links__toggle-icon--Color: currentcolor;
   --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-jump-links__toggle-icon--Rotate: 0;
   --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
@@ -12875,7 +12875,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 .pf-c-menu-toggle.pf-m-split-button > .pf-c-check {
   --pf-c-menu-toggle--PaddingRight: 0;
   --pf-c-check__input--MarginTop: 0;
-  --pf-c-check__label--Color: currentColor;
+  --pf-c-check__label--Color: currentcolor;
   align-items: center;
   align-self: stretch;
 }
@@ -19605,7 +19605,7 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs__toggle--Visibility: hidden;
   --pf-c-tabs__toggle--MarginBottom: 0;
   --pf-c-tabs--m-expanded__toggle--MarginBottom: var(--pf-global--spacer--md);
-  --pf-c-tabs__toggle-icon--Color: currentColor;
+  --pf-c-tabs__toggle-icon--Color: currentcolor;
   --pf-c-tabs__toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-tabs__toggle-icon--Rotate: 0;
   --pf-c-tabs__toggle-text--MarginLeft: 0;
@@ -22683,8 +22683,14 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
   --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
   --pf-c-tree-view__node-toggle--Position: absolute;
+  --pf-c-tree-view__node-toggle--Color--base: var(--pf-global--Color--200);
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
+  --pf-c-tree-view__node-toggle--hover--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__node-toggle--focus--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__node-toggle--active--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
-  --pf-c-tree-view__node-toggle-icon--Transition: var(--pf-global--Transition);
+  --pf-c-tree-view__node-toggle-icon--Transition: transform var(--pf-global--TransitionDuration) var(--pf-global--TimingFunction);
   --pf-c-tree-view__node-toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-tree-view__node-toggle-button--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -22909,9 +22915,11 @@ svg.pf-c-spinner.pf-m-xl {
 
 .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
   --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
 }
 
 .pf-c-tree-view__list-item.pf-m-expanded {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__list-item--m-expanded__node-toggle--Color);
   --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
 }
 
@@ -22949,6 +22957,25 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
 }
 
+.pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
+}
+
+.pf-c-tree-view__node:hover,
+.pf-c-tree-view__node .pf-c-tree-view__node-toggle:hover {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover__icon--Color);
+}
+
+.pf-c-tree-view__node:focus,
+.pf-c-tree-view__node .pf-c-tree-view__node-toggle:focus {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus__icon--Color);
+}
+
+.pf-c-tree-view__node:active,
+.pf-c-tree-view__node .pf-c-tree-view__node-toggle:active {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active__icon--Color);
+}
+
 .pf-c-tree-view__node-container {
   display: var(--pf-c-tree-view__node-container--Display);
   flex-grow: 1;
@@ -22978,6 +23005,7 @@ svg.pf-c-spinner.pf-m-xl {
   padding: var(--pf-c-tree-view__node-toggle-button--PaddingTop) var(--pf-c-tree-view__node-toggle-button--PaddingRight) var(--pf-c-tree-view__node-toggle-button--PaddingBottom) var(--pf-c-tree-view__node-toggle-button--PaddingLeft);
   margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
   margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
+  color: var(--pf-c-tree-view__node-toggle--Color);
   border: 0;
   transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
 }
@@ -22998,6 +23026,10 @@ svg.pf-c-spinner.pf-m-xl {
   white-space: nowrap;
 }
 
+label.pf-c-tree-view__node-text {
+  cursor: pointer;
+}
+
 .pf-c-tree-view__node-title {
   font-weight: var(--pf-c-tree-view__node-title--FontWeight);
 }
@@ -23954,6 +23986,40 @@ svg.pf-c-spinner.pf-m-xl {
   display: flex;
 }
 
+.pf-c-truncate {
+  --pf-c-truncate--MinWidth: 12ch;
+  --pf-c-truncate__start--MinWidth: 6ch;
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: baseline;
+  min-width: var(--pf-c-truncate--MinWidth);
+}
+
+.pf-c-truncate__start,
+.pf-c-truncate__end {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-c-truncate__start {
+  min-width: var(--pf-c-truncate__start--MinWidth);
+}
+
+.pf-c-truncate__end {
+  direction: rtl;
+}
+
+.pf-c-truncate__start + .pf-c-truncate__end {
+  overflow: visible;
+  direction: ltr;
+}
+
+@supports (-webkit-hyphens: none) {
+  .pf-c-truncate__end {
+    direction: ltr;
+  }
+}
 .pf-c-panel {
   --pf-c-panel--Width: auto;
   --pf-c-panel--MinWidth: auto;
@@ -24037,40 +24103,6 @@ svg.pf-c-spinner.pf-m-xl {
   box-shadow: var(--pf-c-panel__footer--BoxShadow);
 }
 
-.pf-c-truncate {
-  --pf-c-truncate--MinWidth: 12ch;
-  --pf-c-truncate__start--MinWidth: 6ch;
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: baseline;
-  min-width: var(--pf-c-truncate--MinWidth);
-}
-
-.pf-c-truncate__start,
-.pf-c-truncate__end {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pf-c-truncate__start {
-  min-width: var(--pf-c-truncate__start--MinWidth);
-}
-
-.pf-c-truncate__end {
-  direction: rtl;
-}
-
-.pf-c-truncate__start + .pf-c-truncate__end {
-  overflow: visible;
-  direction: ltr;
-}
-
-@supports (-webkit-hyphens: none) {
-  .pf-c-truncate__end {
-    direction: ltr;
-  }
-}
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;
@@ -26147,75 +26179,6 @@ svg.pf-c-spinner.pf-m-xl {
     --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
   }
 }
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
   --pf-l-grid__item--GridColumnStart: auto;
@@ -27430,6 +27393,75 @@ svg.pf-c-spinner.pf-m-xl {
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-level {
   --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;