@patternfly/react-core 4.222.11 → 4.222.14

package/dist/umd/react-core.js

@@ -8614,19 +8614,24 @@
     const today = new Date();
     const CalendarMonth = (_a) => {
         var { date: dateProp, locale = undefined, monthFormat = date => date.toLocaleDateString(locale, { month: 'long' }), weekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'narrow' }), longWeekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'long' }), dayFormat = date => date.getDate(), weekStart = 0, // Use the American Sunday as a default
-        onChange = () => { }, validators = [() => true], className, onSelectToggle = () => { }, rangeStart, prevMonthAriaLabel = 'Previous month', nextMonthAriaLabel = 'Next month', yearInputAriaLabel = 'Select year', cellAriaLabel } = _a, props = __rest$1(_a, ["date", "locale", "monthFormat", "weekdayFormat", "longWeekdayFormat", "dayFormat", "weekStart", "onChange", "validators", "className", "onSelectToggle", "rangeStart", "prevMonthAriaLabel", "nextMonthAriaLabel", "yearInputAriaLabel", "cellAriaLabel"]);
+        onChange = () => { }, validators = [() => true], className, onSelectToggle = () => { }, rangeStart, prevMonthAriaLabel = 'Previous month', nextMonthAriaLabel = 'Next month', yearInputAriaLabel = 'Select year', cellAriaLabel, isDateFocused = false } = _a, props = __rest$1(_a, ["date", "locale", "monthFormat", "weekdayFormat", "longWeekdayFormat", "dayFormat", "weekStart", "onChange", "validators", "className", "onSelectToggle", "rangeStart", "prevMonthAriaLabel", "nextMonthAriaLabel", "yearInputAriaLabel", "cellAriaLabel", "isDateFocused"]);
         const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
         const [isSelectOpen, setIsSelectOpen] = React__default["default"].useState(false);
         // eslint-disable-next-line prefer-const
-        let [focusedDate, setFocusedDate] = React__default["default"].useState(new Date(dateProp));
-        if (!isValidDate(focusedDate)) {
-            if (isValidDate(rangeStart)) {
-                focusedDate = rangeStart;
+        const [focusedDate, setFocusedDate] = React__default["default"].useState(() => {
+            const initDate = new Date(dateProp);
+            if (isValidDate(initDate)) {
+                return initDate;
             }
             else {
-                focusedDate = today;
+                if (isValidDate(rangeStart)) {
+                    return rangeStart;
+                }
+                else {
+                    return today;
+                }
             }
-        }
+        });
         const [hoveredDate, setHoveredDate] = React__default["default"].useState(new Date(focusedDate));
         const focusRef = React__default["default"].useRef();
         const [hiddenMonthId] = React__default["default"].useState(getUniqueId('hidden-month-span'));
@@ -8634,21 +8639,23 @@
         const isValidated = (date) => validators.every(validator => validator(date));
         const focusedDateValidated = isValidated(focusedDate);
         React.useEffect(() => {
-            if (!(isValidDate(dateProp) && isSameDate(focusedDate, dateProp))) {
+            if (isValidDate(dateProp) && !isSameDate(focusedDate, dateProp)) {
                 setFocusedDate(dateProp);
             }
+            else if (!dateProp) {
+                setFocusedDate(today);
+            }
         }, [dateProp]);
         React.useEffect(() => {
-            // When using header controls don't move focus
-            if (shouldFocus) {
-                if (focusRef.current && focusedDateValidated) {
-                    focusRef.current.focus();
-                }
+            // Calendar month should not be focused on page load
+            // Datepicker should place focus in calendar month when opened
+            if ((shouldFocus || isDateFocused) && focusedDateValidated && focusRef.current) {
+                focusRef.current.focus();
             }
             else {
                 setShouldFocus(true);
             }
-        }, [focusedDate]);
+        }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
         const onMonthClick = (newDate) => {
             setFocusedDate(newDate);
             setHoveredDate(newDate);
@@ -8785,6 +8792,7 @@
       "cardHeader": "pf-c-card__header",
       "cardHeaderToggle": "pf-c-card__header-toggle",
       "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
+      "cardSrInput": "pf-c-card__sr-input",
       "cardTitle": "pf-c-card__title",
       "divider": "pf-c-divider",
       "modifiers": {
@@ -8806,7 +8814,8 @@
         "noOffset": "pf-m-no-offset",
         "noFill": "pf-m-no-fill",
         "overpassFont": "pf-m-overpass-font"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const CardContext = React__namespace.createContext({
@@ -9209,7 +9218,7 @@
         const hasCustomMinWidth = minWidth !== popoverMinWidth.value;
         const hasCustomMaxWidth = maxWidth !== popoverMaxWidth.value;
         const onDocumentKeyDown = (event) => {
-            if (event.keyCode === KEY_CODES.ESCAPE_KEY && visible) {
+            if (event.key === KeyTypes.Escape && visible) {
                 if (triggerManually) {
                     shouldClose(null, hide, event);
                 }
@@ -10300,7 +10309,7 @@
     .toString()
     .padStart(2, '0')}`;
     const DatePickerBase = (_a, ref) => {
-        var { className, locale = undefined, dateFormat = yyyyMMddFormat, dateParse = (val) => val.split('-').length === 3 && new Date(`${val}T00:00:00`), isDisabled = false, placeholder = 'YYYY-MM-DD', value: valueProp = '', 'aria-label': ariaLabel = 'Date picker', buttonAriaLabel = 'Toggle date picker', onChange = () => undefined, onBlur = () => undefined, invalidFormatText = 'Invalid date', helperText, appendTo, popoverProps, monthFormat, weekdayFormat, longWeekdayFormat, dayFormat, weekStart, validators = [], rangeStart, style: styleProps = {}, inputProps = {} } = _a, props = __rest$1(_a, ["className", "locale", "dateFormat", "dateParse", "isDisabled", "placeholder", "value", 'aria-label', "buttonAriaLabel", "onChange", "onBlur", "invalidFormatText", "helperText", "appendTo", "popoverProps", "monthFormat", "weekdayFormat", "longWeekdayFormat", "dayFormat", "weekStart", "validators", "rangeStart", "style", "inputProps"]);
+        var { className, locale = undefined, dateFormat = yyyyMMddFormat, dateParse = (val) => val.split('-').length === 3 && new Date(`${val}T00:00:00`), isDisabled = false, placeholder = 'YYYY-MM-DD', value: valueProp = '', 'aria-label': ariaLabel = 'Date picker', buttonAriaLabel = 'Toggle date picker', onChange = () => undefined, onBlur = () => undefined, invalidFormatText = 'Invalid date', helperText, appendTo = 'parent', popoverProps, monthFormat, weekdayFormat, longWeekdayFormat, dayFormat, weekStart, validators = [], rangeStart, style: styleProps = {}, inputProps = {} } = _a, props = __rest$1(_a, ["className", "locale", "dateFormat", "dateParse", "isDisabled", "placeholder", "value", 'aria-label', "buttonAriaLabel", "onChange", "onBlur", "invalidFormatText", "helperText", "appendTo", "popoverProps", "monthFormat", "weekdayFormat", "longWeekdayFormat", "dayFormat", "weekStart", "validators", "rangeStart", "style", "inputProps"]);
         const [value, setValue] = React__namespace.useState(valueProp);
         const [valueDate, setValueDate] = React__namespace.useState(dateParse(value));
         const [errorText, setErrorText] = React__namespace.useState('');
@@ -10310,6 +10319,7 @@
         const widthChars = React__namespace.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
         const style = Object.assign({ '--pf-c-date-picker__input--c-form-control--width-chars': widthChars }, styleProps);
         const buttonRef = React__namespace.useRef();
+        const datePickerWrapperRef = React__namespace.useRef();
         React__namespace.useEffect(() => {
             setValue(valueProp);
             setValueDate(dateParse(valueProp));
@@ -10364,15 +10374,22 @@
         };
         React.useImperativeHandle(ref, () => ({
             setCalendarOpen: (isOpen) => setPopoverOpen(isOpen),
-            toggleCalendar: () => setPopoverOpen(prev => !prev)
-        }), [setPopoverOpen]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(datePickerStyles.datePicker, className), style: style }, props),
+            toggleCalendar: (setOpen, eventKey) => {
+                if (eventKey === KeyTypes.Escape && popoverOpen && !selectOpen) {
+                    setPopoverOpen(prev => (setOpen !== undefined ? setOpen : !prev));
+                }
+            },
+            isCalendarOpen: popoverOpen
+        }), [setPopoverOpen, popoverOpen, selectOpen]);
+        const getParentElement = () => datePickerWrapperRef && datePickerWrapperRef.current ? datePickerWrapperRef.current : null;
+        return (React__namespace.createElement("div", Object.assign({ className: css(datePickerStyles.datePicker, className), ref: datePickerWrapperRef, style: style }, props),
             React__namespace.createElement(Popover, Object.assign({ position: "bottom", bodyContent: React__namespace.createElement(CalendarMonth, { date: valueDate, onChange: onDateClick, locale: locale, 
                     // Use truthy values of strings
-                    validators: validators.map(validator => (date) => !validator(date)), onSelectToggle: open => setSelectOpen(open), monthFormat: monthFormat, weekdayFormat: weekdayFormat, longWeekdayFormat: longWeekdayFormat, dayFormat: dayFormat, weekStart: weekStart, rangeStart: rangeStart }), showClose: false, isVisible: popoverOpen, shouldClose: (_1, _2, event) => {
+                    validators: validators.map(validator => (date) => !validator(date)), onSelectToggle: open => setSelectOpen(open), monthFormat: monthFormat, weekdayFormat: weekdayFormat, longWeekdayFormat: longWeekdayFormat, dayFormat: dayFormat, weekStart: weekStart, rangeStart: rangeStart, isDateFocused: true }), showClose: false, isVisible: popoverOpen, shouldClose: (_1, _2, event) => {
                     event = event;
-                    // Let the select menu close
-                    if (event.keyCode && event.keyCode === 27 && selectOpen) {
+                    if (event.key === KeyTypes.Escape && selectOpen) {
+                        event.stopPropagation();
+                        setSelectOpen(false);
                         return false;
                     }
                     // Let our button handle toggling
@@ -10380,8 +10397,11 @@
                         return false;
                     }
                     setPopoverOpen(false);
+                    if (event.key === KeyTypes.Escape && popoverOpen) {
+                        event.stopPropagation();
+                    }
                     return true;
-                }, withFocusTrap: true, hasNoPadding: true, hasAutoWidth: true, appendTo: appendTo }, popoverProps),
+                }, withFocusTrap: true, hasNoPadding: true, hasAutoWidth: true, appendTo: appendTo === 'parent' ? getParentElement() : appendTo }, popoverProps),
                 React__namespace.createElement("div", { className: datePickerStyles.datePickerInput },
                     React__namespace.createElement(InputGroup, null,
                         React__namespace.createElement(TextInput, Object.assign({ isDisabled: isDisabled, "aria-label": ariaLabel, placeholder: placeholder, validated: errorText ? 'error' : 'default', value: value, onChange: onTextInput, onBlur: onInputBlur, onKeyPress: onKeyPress }, inputProps)),
@@ -14562,14 +14582,14 @@
         const editableButtonRef = React__namespace.useRef();
         const editableInputRef = React__namespace.useRef();
         React__namespace.useEffect(() => {
-            document.addEventListener('click', onDocClick);
+            document.addEventListener('mousedown', onDocMouseDown);
             document.addEventListener('keydown', onKeyDown);
             return () => {
-                document.removeEventListener('click', onDocClick);
+                document.removeEventListener('mousedown', onDocMouseDown);
                 document.removeEventListener('keydown', onKeyDown);
             };
         });
-        const onDocClick = (event) => {
+        const onDocMouseDown = (event) => {
             if (isEditableActive &&
                 editableInputRef &&
                 editableInputRef.current &&
@@ -14706,9 +14726,9 @@
         render() {
             const _a = this.props, { categoryName, children, className, isClosable, isCompact, closeBtnAriaLabel, 'aria-label': ariaLabel, onClick, numLabels, expandedText, collapsedText, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            defaultIsOpen, tooltipPosition, isVertical, isEditable, hasEditableTextArea, editableTextAreaProps } = _a, 
+            defaultIsOpen, tooltipPosition, isVertical, isEditable, hasEditableTextArea, editableTextAreaProps, addLabelControl } = _a, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
-            rest = __rest$1(_a, ["categoryName", "children", "className", "isClosable", "isCompact", "closeBtnAriaLabel", 'aria-label', "onClick", "numLabels", "expandedText", "collapsedText", "defaultIsOpen", "tooltipPosition", "isVertical", "isEditable", "hasEditableTextArea", "editableTextAreaProps"]);
+            rest = __rest$1(_a, ["categoryName", "children", "className", "isClosable", "isCompact", "closeBtnAriaLabel", 'aria-label', "onClick", "numLabels", "expandedText", "collapsedText", "defaultIsOpen", "tooltipPosition", "isVertical", "isEditable", "hasEditableTextArea", "editableTextAreaProps", "addLabelControl"]);
             const { isOpen } = this.state;
             const numChildren = React__namespace.Children.count(children);
             const collapsedTextResult = fillTemplate(collapsedText, {
@@ -14724,6 +14744,7 @@
                         labelArray.map((child, i) => (React__namespace.createElement("li", { className: css(styles$D.labelGroupListItem), key: i }, child))),
                         numChildren > numLabels && (React__namespace.createElement("li", { className: css(styles$D.labelGroupListItem) },
                             React__namespace.createElement(Label, { isOverflowLabel: true, onClick: this.toggleCollapse, className: css(isCompact && labelStyles.modifiers.compact) }, isOpen ? expandedText : collapsedTextResult))),
+                        addLabelControl && React__namespace.createElement("li", { className: css(styles$D.labelGroupListItem) }, addLabelControl),
                         isEditable && hasEditableTextArea && (React__namespace.createElement("li", { className: css(styles$D.labelGroupListItem, styles$D.modifiers.textarea) },
                             React__namespace.createElement("textarea", Object.assign({ className: css(styles$D.labelGroupTextarea), rows: 1, tabIndex: 0 }, editableTextAreaProps)))))));
                 const close = (React__namespace.createElement("div", { className: css(styles$D.labelGroupClose) },
@@ -14733,7 +14754,7 @@
                     React__namespace.createElement("div", { className: css(styles$D.labelGroupMain) }, content),
                     isClosable && close));
             };
-            return numChildren === 0 ? null : (React__namespace.createElement(GenerateId, null, randomId => renderLabelGroup(this.props.id || randomId)));
+            return numChildren === 0 && addLabelControl === undefined ? null : (React__namespace.createElement(GenerateId, null, randomId => renderLabelGroup(this.props.id || randomId)));
         }
     }
     LabelGroup.displayName = 'LabelGroup';
@@ -19598,19 +19619,19 @@
                 var _a, _b, _c, _d;
                 const clickedOnToggle = (_b = (_a = this.toggleRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
                 const clickedWithinMenu = (_d = (_c = this.menuRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.contains(event.target);
-                if (this.state.isOpen && !(clickedOnToggle || clickedWithinMenu)) {
+                if (this.state.isTimeOptionsOpen && !(clickedOnToggle || clickedWithinMenu)) {
                     this.onToggle(false);
                 }
             };
             this.handleGlobalKeys = (event) => {
                 var _a, _b, _c, _d;
-                const { isOpen, focusedIndex, scrollIndex } = this.state;
+                const { isTimeOptionsOpen, focusedIndex, scrollIndex } = this.state;
                 // keyboard pressed while focus on toggle
                 if ((_b = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) {
-                    if (!isOpen && event.key !== KeyTypes.Tab) {
+                    if (!isTimeOptionsOpen && event.key !== KeyTypes.Tab && event.key !== KeyTypes.Escape) {
                         this.onToggle(true);
                     }
-                    else if (isOpen) {
+                    else if (isTimeOptionsOpen) {
                         if (event.key === KeyTypes.Escape || event.key === KeyTypes.Tab) {
                             this.onToggle(false);
                         }
@@ -19767,27 +19788,32 @@
                     const { delimiter, is24Hour, includeSeconds } = this.props;
                     const time = parseTime(prevState.timeState, timeRegex, delimiter, !is24Hour, includeSeconds);
                     return {
-                        isOpen,
+                        isTimeOptionsOpen: isOpen,
                         timeState: time,
                         isInvalid: isOpen ? isInvalid : !this.isValid(time)
                     };
                 });
+                this.props.setIsOpen(isOpen);
+                if (!isOpen) {
+                    this.inputRef.current.focus();
+                }
             };
             this.onSelect = (e) => {
                 const { timeRegex, timeState } = this.state;
-                const { delimiter, is24Hour, includeSeconds } = this.props;
+                const { delimiter, is24Hour, includeSeconds, setIsOpen } = this.props;
                 const time = parseTime(e.target.textContent, timeRegex, delimiter, !is24Hour, includeSeconds);
                 if (time !== timeState) {
                     this.onInputChange(time);
                 }
                 this.inputRef.current.focus();
                 this.setState({
-                    isOpen: false,
+                    isTimeOptionsOpen: false,
                     isInvalid: false
                 });
+                setIsOpen(false);
             };
             this.onInputClick = (e) => {
-                if (!this.state.isOpen) {
+                if (!this.state.isTimeOptionsOpen) {
                     this.onToggle(true);
                 }
                 e.stopPropagation();
@@ -19811,7 +19837,7 @@
                     isInvalid: !this.isValid(time)
                 });
             };
-            const { is24Hour, delimiter, time, includeSeconds } = this.props;
+            const { is24Hour, delimiter, time, includeSeconds, isOpen } = this.props;
             let { minTime, maxTime } = this.props;
             if (minTime === '') {
                 const minSeconds = includeSeconds ? `${delimiter}00` : '';
@@ -19824,7 +19850,7 @@
             const timeRegex = this.getRegExp();
             this.state = {
                 isInvalid: false,
-                isOpen: false,
+                isTimeOptionsOpen: isOpen,
                 timeState: parseTime(time, timeRegex, delimiter, !is24Hour, includeSeconds),
                 focusedIndex: null,
                 scrollIndex: 0,
@@ -19844,9 +19870,12 @@
             document.removeEventListener('keydown', this.handleGlobalKeys);
         }
         componentDidUpdate(prevProps, prevState) {
-            const { timeState, isOpen, isInvalid, timeRegex } = this.state;
-            const { time, is24Hour, delimiter, includeSeconds } = this.props;
-            if (isOpen && !prevState.isOpen && timeState && !isInvalid) {
+            const { timeState, isTimeOptionsOpen, isInvalid, timeRegex } = this.state;
+            const { time, is24Hour, delimiter, includeSeconds, isOpen } = this.props;
+            if (prevProps.isOpen !== isOpen) {
+                this.onToggle(isOpen);
+            }
+            if (isTimeOptionsOpen && !prevState.isTimeOptionsOpen && timeState && !isInvalid) {
                 this.scrollToSelection(timeState);
             }
             if (delimiter !== prevProps.delimiter) {
@@ -19863,10 +19892,14 @@
         render() {
             const _a = this.props, { 'aria-label': ariaLabel, isDisabled, className, placeholder, id, menuAppendTo, is24Hour, invalidFormatErrorMessage, invalidMinMaxErrorMessage, stepMinutes, width, delimiter, inputProps, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            onChange, time, validateTime, minTime, maxTime, includeSeconds } = _a, 
+            onChange, 
+            /* eslint-disable @typescript-eslint/no-unused-vars */
+            setIsOpen, 
+            /* eslint-disable @typescript-eslint/no-unused-vars */
+            isOpen, time, validateTime, minTime, maxTime, includeSeconds } = _a, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
-            props = __rest$1(_a, ['aria-label', "isDisabled", "className", "placeholder", "id", "menuAppendTo", "is24Hour", "invalidFormatErrorMessage", "invalidMinMaxErrorMessage", "stepMinutes", "width", "delimiter", "inputProps", "onChange", "time", "validateTime", "minTime", "maxTime", "includeSeconds"]);
-            const { timeState, isOpen, isInvalid, minTimeState, maxTimeState } = this.state;
+            props = __rest$1(_a, ['aria-label', "isDisabled", "className", "placeholder", "id", "menuAppendTo", "is24Hour", "invalidFormatErrorMessage", "invalidMinMaxErrorMessage", "stepMinutes", "width", "delimiter", "inputProps", "onChange", "setIsOpen", "isOpen", "time", "validateTime", "minTime", "maxTime", "includeSeconds"]);
+            const { timeState, isTimeOptionsOpen, isInvalid, minTimeState, maxTimeState } = this.state;
             const style = { '--pf-c-date-picker__input--c-form-control--Width': width };
             const options = makeTimeOptions(stepMinutes, !is24Hour, delimiter, minTimeState, maxTimeState, includeSeconds);
             const isValidFormat = this.isValidFormat(timeState);
@@ -19885,8 +19918,8 @@
                 React__namespace.createElement("div", Object.assign({ className: css(datePickerStyles.datePickerInput), style: style }, props),
                     React__namespace.createElement(InputGroup, null,
                         React__namespace.createElement("div", { id: randomId },
-                            React__namespace.createElement("div", { ref: this.toggleRef, style: { paddingLeft: '0' } }, menuAppendTo !== 'inline' ? (React__namespace.createElement(Popper, { appendTo: menuAppendTo === 'parent' ? getParentElement() : menuAppendTo, trigger: textInput, popper: menuContainer, isVisible: isOpen })) : (textInput)),
-                            isOpen && menuAppendTo === 'inline' && menuContainer)),
+                            React__namespace.createElement("div", { ref: this.toggleRef, style: { paddingLeft: '0' } }, menuAppendTo !== 'inline' ? (React__namespace.createElement(Popper, { appendTo: menuAppendTo === 'parent' ? getParentElement() : menuAppendTo, trigger: textInput, popper: menuContainer, isVisible: isTimeOptionsOpen })) : (textInput)),
+                            isTimeOptionsOpen && menuAppendTo === 'inline' && menuContainer)),
                     isInvalid && (React__namespace.createElement("div", { className: css(datePickerStyles.datePickerHelperText, datePickerStyles.modifiers.error) }, !isValidFormat ? invalidFormatErrorMessage : invalidMinMaxErrorMessage)))));
         }
     }
@@ -19906,7 +19939,8 @@
         stepMinutes: 30,
         inputProps: {},
         minTime: '',
-        maxTime: ''
+        maxTime: '',
+        setIsOpen: () => { }
     };
 
     Promise.resolve().then(function () { return toggleGroup; });

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

@@ -2919,6 +2919,8 @@ button.pf-c-breadcrumb__link {
   --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
+  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
   display: flex;
   flex-direction: column;
   background-color: var(--pf-c-card--BackgroundColor);
@@ -3178,10 +3180,28 @@ button.pf-c-breadcrumb__link {
   font-size: var(--pf-c-card__footer--FontSize);
 }
 
+.pf-c-card__sr-input:focus + .pf-c-card::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
+}
+
 .pf-m-overpass-font .pf-c-card .pf-c-card__title {
   font-weight: var(--pf-global--FontWeight--normal);
 }
 
+:where(.pf-theme-dark) .pf-c-card {
+  --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
+}
+
 .pf-c-check {
   --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
   --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
@@ -17092,6 +17112,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
   color: var(--pf-c-progress-stepper__step-title--Color);
   text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
+  border: 0;
 }
 
 .pf-c-progress-stepper__step-title.pf-m-help-text {