@patternfly/react-styles 6.5.0-prerelease.2 → 6.5.0-prerelease.21

package/css/components/Card/card.css

@@ -1,6 +1,6 @@
 .pf-v6-c-card {
   --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
   --pf-v6-c-card--BorderStyle: solid;
   --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -32,8 +32,9 @@
   --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
-  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
-  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
+  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
+  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
   --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -70,13 +71,18 @@
   --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-card--m-full-height--Height: 100%;
   --pf-v6-c-card--m-plain--BorderColor: transparent;
   --pf-v6-c-card--m-plain--BackgroundColor: transparent;
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+  --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
+  --pf-v6-c-card--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --pf-v6-c-card--m-glass--BorderWidth: var(--pf-t--global--border--width--glass--default);
+  --pf-v6-c-card--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
+  --pf-v6-c-card--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --pf-v6-c-card--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
 }
 
 .pf-v6-c-card {
@@ -96,10 +102,18 @@
   border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
   border-radius: inherit;
 }
+:where(.pf-v6-theme-glass) .pf-v6-c-card.pf-m-glass {
+  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
+  backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
+  box-shadow: var(--pf-v6-c-card--m-glass--BoxShadow);
+}
 .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
   gap: 0;
 }
 .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
   isolation: isolate;
 }
 .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -134,12 +148,16 @@
 .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
 }
-.pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
+.pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
+  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
+}
+
+.pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
   --pf-v6-c-card__actions--PaddingInlineStart: 0;
   --pf-v6-c-card__actions--MarginBlockStart: 0;
   --pf-v6-c-card__actions--MarginBlockEnd: 0;
 }
-
 .pf-v6-c-card.pf-m-compact {
   --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
   --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -163,13 +181,24 @@
   --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
 }
 .pf-v6-c-card.pf-m-secondary {
-  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
-  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
 }
+.pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
+}
 .pf-v6-c-card.pf-m-plain {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
+  backdrop-filter: none;
+}
+.pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
+}
+.pf-v6-c-card.pf-m-plain.pf-m-selectable.pf-m-current, .pf-v6-c-card.pf-m-plain.pf-m-clickable.pf-m-current {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
 }
 .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
   transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
@@ -207,12 +236,12 @@
   flex-wrap: wrap;
   row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
 }
-.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
-  margin-inline-start: 0;
-}
 .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
   margin-inline-end: auto;
 }
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  margin-inline-start: 0;
+}
 
 .pf-v6-c-card__header-main {
   flex-grow: 1;
@@ -226,15 +255,16 @@
   margin-inline-end: var(--pf-v6-c-card__header-toggle--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-card__header-toggle-icon {
   display: inline-block;
   transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
   transition-property: transform;
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
-  scale: -1 1;
-}
 
 .pf-v6-c-card__title-text {
   font-family: var(--pf-v6-c-card__title-text--FontFamily);
@@ -245,6 +275,12 @@
   overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
 }
 
+.pf-v6-c-card__subtitle {
+  padding-block-start: var(--pf-t--global--spacer--sm);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
 .pf-v6-c-card__actions {
   display: flex;
   gap: var(--pf-v6-c-card__actions--Gap);

package/css/components/Card/card.d.ts

@@ -12,6 +12,7 @@ declare const _default: {
   "cardHeaderToggle": "pf-v6-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
   "cardSelectableActions": "pf-v6-c-card__selectable-actions",
+  "cardSubtitle": "pf-v6-c-card__subtitle",
   "cardTitle": "pf-v6-c-card__title",
   "cardTitleText": "pf-v6-c-card__title-text",
   "check": "pf-v6-c-check",
@@ -20,6 +21,7 @@ declare const _default: {
   "dirRtl": "pf-v6-m-dir-rtl",
   "divider": "pf-v6-c-divider",
   "modifiers": {
+    "glass": "pf-m-glass",
     "selectable": "pf-m-selectable",
     "clickable": "pf-m-clickable",
     "current": "pf-m-current",
@@ -40,6 +42,7 @@ declare const _default: {
   "radio": "pf-v6-c-radio",
   "radioInput": "pf-v6-c-radio__input",
   "radioLabel": "pf-v6-c-radio__label",
-  "screenReader": "pf-v6-screen-reader"
+  "screenReader": "pf-v6-screen-reader",
+  "themeGlass": "pf-v6-theme-glass"
 };
 export default _default;

package/css/components/Card/card.js

@@ -14,6 +14,7 @@ exports.default = {
   "cardHeaderToggle": "pf-v6-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
   "cardSelectableActions": "pf-v6-c-card__selectable-actions",
+  "cardSubtitle": "pf-v6-c-card__subtitle",
   "cardTitle": "pf-v6-c-card__title",
   "cardTitleText": "pf-v6-c-card__title-text",
   "check": "pf-v6-c-check",
@@ -22,6 +23,7 @@ exports.default = {
   "dirRtl": "pf-v6-m-dir-rtl",
   "divider": "pf-v6-c-divider",
   "modifiers": {
+    "glass": "pf-m-glass",
     "selectable": "pf-m-selectable",
     "clickable": "pf-m-clickable",
     "current": "pf-m-current",
@@ -42,5 +44,6 @@ exports.default = {
   "radio": "pf-v6-c-radio",
   "radioInput": "pf-v6-c-radio__input",
   "radioLabel": "pf-v6-c-radio__label",
-  "screenReader": "pf-v6-screen-reader"
+  "screenReader": "pf-v6-screen-reader",
+  "themeGlass": "pf-v6-theme-glass"
 };

package/css/components/Card/card.mjs

@@ -12,6 +12,7 @@ export default {
   "cardHeaderToggle": "pf-v6-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
   "cardSelectableActions": "pf-v6-c-card__selectable-actions",
+  "cardSubtitle": "pf-v6-c-card__subtitle",
   "cardTitle": "pf-v6-c-card__title",
   "cardTitleText": "pf-v6-c-card__title-text",
   "check": "pf-v6-c-check",
@@ -20,6 +21,7 @@ export default {
   "dirRtl": "pf-v6-m-dir-rtl",
   "divider": "pf-v6-c-divider",
   "modifiers": {
+    "glass": "pf-m-glass",
     "selectable": "pf-m-selectable",
     "clickable": "pf-m-clickable",
     "current": "pf-m-current",
@@ -40,5 +42,6 @@ export default {
   "radio": "pf-v6-c-radio",
   "radioInput": "pf-v6-c-radio__input",
   "radioLabel": "pf-v6-c-radio__label",
-  "screenReader": "pf-v6-screen-reader"
+  "screenReader": "pf-v6-screen-reader",
+  "themeGlass": "pf-v6-theme-glass"
 };

package/css/components/ClipboardCopy/clipboard-copy.css

@@ -2,20 +2,22 @@
   --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-clipboard-copy__toggle-icon--Transition: transform var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration) var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction);
-  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: -180deg;
   --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
   --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
+  --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor: var(--pf-t--global--border--color--control--read-only);
   --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
   --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -44,19 +46,24 @@
 .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
   display: inline-flex;
 }
+.pf-v6-c-clipboard-copy.pf-m-readonly {
+  --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor);
+}
 
 .pf-v6-c-clipboard-copy__group {
   display: flex;
   gap: var(--pf-v6-c-clipboard-copy__group--Gap);
 }
 
-.pf-v6-c-clipboard-copy__toggle-icon {
-  transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
-}
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-clipboard-copy__toggle-icon {
   scale: -1 1;
 }
 
+.pf-v6-c-clipboard-copy__toggle-icon {
+  transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
+}
+
 .pf-v6-c-clipboard-copy__expandable-content {
   padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);

package/css/components/ClipboardCopy/clipboard-copy.d.ts

@@ -14,6 +14,7 @@ declare const _default: {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "truncate": "pf-m-truncate",
+    "readonly": "pf-m-readonly",
     "code": "pf-m-code",
     "plain": "pf-m-plain"
   }

package/css/components/ClipboardCopy/clipboard-copy.js

@@ -16,6 +16,7 @@ exports.default = {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "truncate": "pf-m-truncate",
+    "readonly": "pf-m-readonly",
     "code": "pf-m-code",
     "plain": "pf-m-plain"
   }

package/css/components/ClipboardCopy/clipboard-copy.mjs

@@ -14,6 +14,7 @@ export default {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "truncate": "pf-m-truncate",
+    "readonly": "pf-m-readonly",
     "code": "pf-m-code",
     "plain": "pf-m-plain"
   }

package/css/components/CodeEditor/code-editor.css

@@ -8,7 +8,7 @@
   --pf-v6-c-code-editor__header--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-code-editor__header--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: transparent;
   --pf-v6-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -70,8 +70,8 @@
 
 .pf-v6-c-code-editor__container {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .pf-v6-c-code-editor__header {