@patternfly/react-styles 6.3.0-prerelease.1 → 6.3.0-prerelease.10

package/css/components/Tabs/tabs.css

@@ -96,25 +96,28 @@
   --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-tabs--link-accent--start: 0;
-  --pf-v6-c-tabs--link-accent--length: auto;
+  --pf-v6-c-tabs--link-accent--length: 0;
   --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
   --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
+  --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
   --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
-  --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
+  --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
   --pf-v6-c-tabs--link-accent--Width: initial;
   --pf-v6-c-tabs--link-accent--Height: 0;
   --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
   --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
+  --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
+  --pf-v6-c-tabs--link-accent--TranslateY: 0;
+  --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
+  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
   --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
-  --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
   --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
   --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
-  --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
-  --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
+  --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
+  --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
   --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -274,11 +277,13 @@
   --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
   --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
   --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
-  --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
   --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
   --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
   --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
   --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
+  --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
+  --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
+  --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
   display: inline-flex;
   flex-direction: column;
   height: 100%;
@@ -855,15 +860,15 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
     content: revert;
   }
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
     position: absolute;
-    inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
+    inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
     inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
-    inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
+    inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
     width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
     height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
     content: "";
@@ -872,7 +877,12 @@
     border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
     transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
     transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
-    transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
+    transition-property: width, height, translate;
+    transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
+    translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
+  }
+  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+    translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
   }
   .pf-v6-c-tabs.pf-m-initializing-accent {
     --pf-v6-c-tabs--link-accent--TransitionDuration: 0;

package/css/components/Tabs/tabs.d.ts

@@ -65,6 +65,7 @@ declare const _default: {
     "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent"
   },
   "tabs": "pf-v6-c-tabs",

package/css/components/Tabs/tabs.js

@@ -67,6 +67,7 @@ exports.default = {
     "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent"
   },
   "tabs": "pf-v6-c-tabs",

package/css/components/Tabs/tabs.mjs

@@ -65,6 +65,7 @@ export default {
     "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent"
   },
   "tabs": "pf-v6-c-tabs",

package/css/components/TextInputGroup/text-input-group.css

@@ -103,6 +103,22 @@
   --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
   --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-text-input-group.pf-m-error {
+    translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
+    animation-name: pf-v6-global-danger-jiggle-motion;
+    animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
+    animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
+    animation-fill-mode: both;
+  }
+}
+.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
+  --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+  animation-name: pf-v6-global-fade-in;
+  animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
+}
 .pf-v6-c-text-input-group:hover {
   --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
 }

package/css/components/TextInputGroup/text-input-group.d.ts

@@ -7,8 +7,8 @@ declare const _default: {
     "success": "pf-m-success",
     "warning": "pf-m-warning",
     "error": "pf-m-error",
-    "icon": "pf-m-icon",
     "status": "pf-m-status",
+    "icon": "pf-m-icon",
     "hint": "pf-m-hint"
   },
   "textInputGroup": "pf-v6-c-text-input-group",

package/css/components/TextInputGroup/text-input-group.js

@@ -9,8 +9,8 @@ exports.default = {
     "success": "pf-m-success",
     "warning": "pf-m-warning",
     "error": "pf-m-error",
-    "icon": "pf-m-icon",
     "status": "pf-m-status",
+    "icon": "pf-m-icon",
     "hint": "pf-m-hint"
   },
   "textInputGroup": "pf-v6-c-text-input-group",

package/css/components/TextInputGroup/text-input-group.mjs

@@ -7,8 +7,8 @@ export default {
     "success": "pf-m-success",
     "warning": "pf-m-warning",
     "error": "pf-m-error",
-    "icon": "pf-m-icon",
     "status": "pf-m-status",
+    "icon": "pf-m-icon",
     "hint": "pf-m-hint"
   },
   "textInputGroup": "pf-v6-c-text-input-group",

package/css/components/Timestamp/timestamp.css

@@ -28,4 +28,8 @@
   --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--hover--Color);
   --pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine);
   --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle);
+}
+
+.pf-v6-c-timestamp__text {
+  text-decoration: inherit;
 }

package/css/components/Timestamp/timestamp.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   "modifiers": {
     "helpText": "pf-m-help-text"
   },
-  "timestamp": "pf-v6-c-timestamp"
+  "timestamp": "pf-v6-c-timestamp",
+  "timestampText": "pf-v6-c-timestamp__text"
 };
 export default _default;

package/css/components/Timestamp/timestamp.js

@@ -5,5 +5,6 @@ exports.default = {
   "modifiers": {
     "helpText": "pf-m-help-text"
   },
-  "timestamp": "pf-v6-c-timestamp"
+  "timestamp": "pf-v6-c-timestamp",
+  "timestampText": "pf-v6-c-timestamp__text"
 };

package/css/components/Timestamp/timestamp.mjs

@@ -3,5 +3,6 @@ export default {
   "modifiers": {
     "helpText": "pf-m-help-text"
   },
-  "timestamp": "pf-v6-c-timestamp"
+  "timestamp": "pf-v6-c-timestamp",
+  "timestampText": "pf-v6-c-timestamp__text"
 };

package/css/components/TreeView/tree-view.css

@@ -14,6 +14,17 @@
   --pf-v6-c-tree-view__node-container--Display: contents;
   --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tree-view__node-content--Overflow: visible;
+  --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
+  --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
+  --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-tree-view__list--Opacity: 0;
+  --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
+  --pf-v6-c-tree-view__list--TranslateY: 0;
+  --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
   --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
   --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
   --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -29,6 +40,8 @@
   --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
   --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
+  --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -104,6 +117,13 @@
   --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
   --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-tree-view {
+    --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-tree-view__list--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
   position: relative;
@@ -219,12 +239,23 @@
   display: inline-block;
   min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
   text-align: center;
+  transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
   scale: -1 1;
 }
 
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
+  max-height: 0;
+  visibility: hidden;
+  opacity: var(--pf-v6-c-tree-view__list--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
+  transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height;
+  translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
+}
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
   --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
   --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -233,6 +264,14 @@
   --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
   --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
 }
+.pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
+  max-height: 99999px;
+  visibility: revert;
+  opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
+  translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
+}
 
 .pf-v6-c-tree-view__node,
 .pf-v6-c-tree-view__node-container {

package/css/components/TreeView/tree-view.d.ts

@@ -12,6 +12,7 @@ declare const _default: {
   "treeView": "pf-v6-c-tree-view",
   "treeViewAction": "pf-v6-c-tree-view__action",
   "treeViewContent": "pf-v6-c-tree-view__content",
+  "treeViewList": "pf-v6-c-tree-view__list",
   "treeViewListItem": "pf-v6-c-tree-view__list-item",
   "treeViewNode": "pf-v6-c-tree-view__node",
   "treeViewNodeCheck": "pf-v6-c-tree-view__node-check",

package/css/components/TreeView/tree-view.js

@@ -14,6 +14,7 @@ exports.default = {
   "treeView": "pf-v6-c-tree-view",
   "treeViewAction": "pf-v6-c-tree-view__action",
   "treeViewContent": "pf-v6-c-tree-view__content",
+  "treeViewList": "pf-v6-c-tree-view__list",
   "treeViewListItem": "pf-v6-c-tree-view__list-item",
   "treeViewNode": "pf-v6-c-tree-view__node",
   "treeViewNodeCheck": "pf-v6-c-tree-view__node-check",

package/css/components/TreeView/tree-view.mjs

@@ -12,6 +12,7 @@ export default {
   "treeView": "pf-v6-c-tree-view",
   "treeViewAction": "pf-v6-c-tree-view__action",
   "treeViewContent": "pf-v6-c-tree-view__content",
+  "treeViewList": "pf-v6-c-tree-view__list",
   "treeViewListItem": "pf-v6-c-tree-view__list-item",
   "treeViewNode": "pf-v6-c-tree-view__node",
   "treeViewNodeCheck": "pf-v6-c-tree-view__node-check",

package/css/components/Truncate/truncate.css

@@ -8,6 +8,7 @@
   grid-auto-flow: column;
   align-items: baseline;
   min-width: var(--pf-v6-c-truncate--MinWidth);
+  text-decoration: inherit;
 }
 .pf-v6-c-truncate.pf-m-fixed {
   display: inline;