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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.md +45 -5
  2. package/css/assets/images/icon-help.hbs +3 -0
  3. package/css/assets/images/icon-outlined-star.hbs +3 -0
  4. package/css/assets/images/icon-star.hbs +3 -0
  5. package/css/components/Accordion/accordion.css +72 -3
  6. package/css/components/Alert/alert-group.css +52 -31
  7. package/css/components/Alert/alert-group.d.ts +4 -1
  8. package/css/components/Alert/alert-group.js +4 -1
  9. package/css/components/Alert/alert-group.mjs +4 -1
  10. package/css/components/Button/button.css +154 -6
  11. package/css/components/Button/button.d.ts +12 -0
  12. package/css/components/Button/button.js +12 -0
  13. package/css/components/Button/button.mjs +12 -0
  14. package/css/components/Card/card.css +3 -0
  15. package/css/components/DataList/data-list.css +2 -2
  16. package/css/components/Drawer/drawer.css +28 -14
  17. package/css/components/DualListSelector/dual-list-selector.css +36 -0
  18. package/css/components/DualListSelector/dual-list-selector.d.ts +1 -0
  19. package/css/components/DualListSelector/dual-list-selector.js +1 -0
  20. package/css/components/DualListSelector/dual-list-selector.mjs +1 -0
  21. package/css/components/ExpandableSection/expandable-section.css +63 -1
  22. package/css/components/ExpandableSection/expandable-section.d.ts +3 -2
  23. package/css/components/ExpandableSection/expandable-section.js +3 -2
  24. package/css/components/ExpandableSection/expandable-section.mjs +3 -2
  25. package/css/components/FileUpload/file-upload.css +3 -3
  26. package/css/components/Form/form.css +40 -1
  27. package/css/components/Form/form.d.ts +2 -1
  28. package/css/components/Form/form.js +2 -1
  29. package/css/components/Form/form.mjs +2 -1
  30. package/css/components/FormControl/form-control.css +17 -2
  31. package/css/components/FormControl/form-control.d.ts +2 -2
  32. package/css/components/FormControl/form-control.js +2 -2
  33. package/css/components/FormControl/form-control.mjs +2 -2
  34. package/css/components/InputGroup/input-group.css +80 -0
  35. package/css/components/InputGroup/input-group.d.ts +6 -0
  36. package/css/components/InputGroup/input-group.js +6 -0
  37. package/css/components/InputGroup/input-group.mjs +6 -0
  38. package/css/components/Menu/menu.css +24 -4
  39. package/css/components/MenuToggle/menu-toggle.css +38 -4
  40. package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
  41. package/css/components/MenuToggle/menu-toggle.js +1 -0
  42. package/css/components/MenuToggle/menu-toggle.mjs +1 -0
  43. package/css/components/Nav/nav.css +22 -8
  44. package/css/components/Page/page.css +62 -3
  45. package/css/components/Page/page.d.ts +3 -0
  46. package/css/components/Page/page.js +3 -0
  47. package/css/components/Page/page.mjs +3 -0
  48. package/css/components/Progress/progress.css +16 -0
  49. package/css/components/Skeleton/skeleton.css +22 -2
  50. package/css/components/Spinner/spinner.css +5 -0
  51. package/css/components/Spinner/spinner.d.ts +1 -0
  52. package/css/components/Spinner/spinner.js +1 -0
  53. package/css/components/Spinner/spinner.mjs +1 -0
  54. package/css/components/Table/table-grid.css +21 -5
  55. package/css/components/Table/table-grid.d.ts +1 -0
  56. package/css/components/Table/table-grid.js +1 -0
  57. package/css/components/Table/table-grid.mjs +1 -0
  58. package/css/components/Table/table.css +86 -8
  59. package/css/components/Table/table.d.ts +4 -0
  60. package/css/components/Table/table.js +4 -0
  61. package/css/components/Table/table.mjs +4 -0
  62. package/css/components/Tabs/tabs.css +75 -0
  63. package/css/components/Tabs/tabs.d.ts +3 -1
  64. package/css/components/Tabs/tabs.js +3 -1
  65. package/css/components/Tabs/tabs.mjs +3 -1
  66. package/css/components/TextInputGroup/text-input-group.css +16 -0
  67. package/css/components/TextInputGroup/text-input-group.d.ts +1 -1
  68. package/css/components/TextInputGroup/text-input-group.js +1 -1
  69. package/css/components/TextInputGroup/text-input-group.mjs +1 -1
  70. package/css/components/Timestamp/timestamp.css +4 -0
  71. package/css/components/Timestamp/timestamp.d.ts +2 -1
  72. package/css/components/Timestamp/timestamp.js +2 -1
  73. package/css/components/Timestamp/timestamp.mjs +2 -1
  74. package/css/components/TreeView/tree-view.css +39 -0
  75. package/css/components/TreeView/tree-view.d.ts +1 -0
  76. package/css/components/TreeView/tree-view.js +1 -0
  77. package/css/components/TreeView/tree-view.mjs +1 -0
  78. package/css/components/Truncate/truncate.css +6 -0
  79. package/css/components/Truncate/truncate.d.ts +3 -0
  80. package/css/components/Truncate/truncate.js +3 -0
  81. package/css/components/Truncate/truncate.mjs +3 -0
  82. package/css/components/_index.css +985 -97
  83. package/css/components/_index.d.ts +28 -2
  84. package/css/components/_index.js +28 -2
  85. package/css/components/_index.mjs +28 -2
  86. package/package.json +3 -3
@@ -29,12 +29,15 @@ exports.default = {
29
29
  "favorite": "pf-m-favorite",
30
30
  "borderRight": "pf-m-border-right",
31
31
  "borderLeft": "pf-m-border-left",
32
+ "action": "pf-m-action",
32
33
  "noBorderRows": "pf-m-no-border-rows",
33
34
  "expanded": "pf-m-expanded",
34
35
  "clickable": "pf-m-clickable",
35
36
  "selected": "pf-m-selected",
36
37
  "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
37
38
  "dragOver": "pf-m-drag-over",
39
+ "animateExpand": "pf-m-animate-expand",
40
+ "noAnimateExpand": "pf-m-no-animate-expand",
38
41
  "truncate": "pf-m-truncate",
39
42
  "wrap": "pf-m-wrap",
40
43
  "nowrap": "pf-m-nowrap",
@@ -43,6 +46,7 @@ exports.default = {
43
46
  "standalone": "pf-m-standalone",
44
47
  "favorited": "pf-m-favorited",
45
48
  "noPadding": "pf-m-no-padding",
49
+ "noBackground": "pf-m-no-background",
46
50
  "compact": "pf-m-compact",
47
51
  "borderRow": "pf-m-border-row",
48
52
  "width_10": "pf-m-width-10",
@@ -27,12 +27,15 @@ export default {
27
27
  "favorite": "pf-m-favorite",
28
28
  "borderRight": "pf-m-border-right",
29
29
  "borderLeft": "pf-m-border-left",
30
+ "action": "pf-m-action",
30
31
  "noBorderRows": "pf-m-no-border-rows",
31
32
  "expanded": "pf-m-expanded",
32
33
  "clickable": "pf-m-clickable",
33
34
  "selected": "pf-m-selected",
34
35
  "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
35
36
  "dragOver": "pf-m-drag-over",
37
+ "animateExpand": "pf-m-animate-expand",
38
+ "noAnimateExpand": "pf-m-no-animate-expand",
36
39
  "truncate": "pf-m-truncate",
37
40
  "wrap": "pf-m-wrap",
38
41
  "nowrap": "pf-m-nowrap",
@@ -41,6 +44,7 @@ export default {
41
44
  "standalone": "pf-m-standalone",
42
45
  "favorited": "pf-m-favorited",
43
46
  "noPadding": "pf-m-no-padding",
47
+ "noBackground": "pf-m-no-background",
44
48
  "compact": "pf-m-compact",
45
49
  "borderRow": "pf-m-border-row",
46
50
  "width_10": "pf-m-width-10",
@@ -1,3 +1,13 @@
1
+ @property --pf-v6-c-tabs--link-accent--length {
2
+ syntax: "<length>";
3
+ inherits: true;
4
+ initial-value: 0px;
5
+ }
6
+ @property --pf-v6-c-tabs--link-accent--start {
7
+ syntax: "<length>";
8
+ inherits: true;
9
+ initial-value: 0px;
10
+ }
1
11
  .pf-v6-c-tabs {
2
12
  --pf-v6-c-tabs--inset: 0;
3
13
  --pf-v6-c-tabs--Width: auto;
@@ -59,6 +69,8 @@
59
69
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
60
70
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
61
71
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
72
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
73
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
62
74
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
63
75
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
64
76
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -83,6 +95,29 @@
83
95
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
84
96
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
85
97
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
98
+ --pf-v6-c-tabs--link-accent--start: 0;
99
+ --pf-v6-c-tabs--link-accent--length: 0;
100
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
101
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
102
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
103
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
104
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
105
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
106
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
107
+ --pf-v6-c-tabs--link-accent--Width: initial;
108
+ --pf-v6-c-tabs--link-accent--Height: 0;
109
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
110
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
111
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
112
+ --pf-v6-c-tabs--link-accent--TranslateY: 0;
113
+ --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
114
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
115
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
116
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
117
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
118
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
119
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
120
+ --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
86
121
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
87
122
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
88
123
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -240,6 +275,15 @@
240
275
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
241
276
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
242
277
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
278
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
279
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
280
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
281
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
282
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
283
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
284
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
285
+ --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
286
+ --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
243
287
  display: inline-flex;
244
288
  flex-direction: column;
245
289
  height: 100%;
@@ -502,6 +546,7 @@
502
546
  text-decoration-line: none;
503
547
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
504
548
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
549
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
505
550
  }
506
551
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
507
552
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -812,4 +857,34 @@
812
857
  --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
813
858
  --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
814
859
  }
860
+ }
861
+
862
+ @media (prefers-reduced-motion: no-preference) {
863
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
864
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
865
+ content: revert;
866
+ }
867
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
868
+ position: absolute;
869
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
870
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
871
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
872
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
873
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
874
+ content: "";
875
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
876
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
877
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
878
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
879
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
880
+ transition-property: width, height, translate;
881
+ transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
882
+ translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
883
+ }
884
+ :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 {
885
+ translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
886
+ }
887
+ .pf-v6-c-tabs.pf-m-initializing-accent {
888
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
889
+ }
815
890
  }
@@ -64,7 +64,9 @@ declare const _default: {
64
64
  "insetMdOn_2xl": "pf-m-inset-md-on-2xl",
65
65
  "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
66
66
  "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
67
- "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
67
+ "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
68
+ "animateCurrent": "pf-m-animate-current",
69
+ "initializingAccent": "pf-m-initializing-accent"
68
70
  },
69
71
  "tabs": "pf-v6-c-tabs",
70
72
  "tabsAdd": "pf-v6-c-tabs__add",
@@ -66,7 +66,9 @@ exports.default = {
66
66
  "insetMdOn_2xl": "pf-m-inset-md-on-2xl",
67
67
  "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
68
68
  "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
69
- "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
69
+ "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
70
+ "animateCurrent": "pf-m-animate-current",
71
+ "initializingAccent": "pf-m-initializing-accent"
70
72
  },
71
73
  "tabs": "pf-v6-c-tabs",
72
74
  "tabsAdd": "pf-v6-c-tabs__add",
@@ -64,7 +64,9 @@ export default {
64
64
  "insetMdOn_2xl": "pf-m-inset-md-on-2xl",
65
65
  "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
66
66
  "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
67
- "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
67
+ "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
68
+ "animateCurrent": "pf-m-animate-current",
69
+ "initializingAccent": "pf-m-initializing-accent"
68
70
  },
69
71
  "tabs": "pf-v6-c-tabs",
70
72
  "tabsAdd": "pf-v6-c-tabs__add",
@@ -103,6 +103,22 @@
103
103
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
104
104
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
105
105
  }
106
+ @media (prefers-reduced-motion: no-preference) {
107
+ .pf-v6-c-text-input-group.pf-m-error {
108
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
109
+ animation-name: pf-v6-global-danger-jiggle-motion;
110
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
111
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
112
+ animation-fill-mode: both;
113
+ }
114
+ }
115
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
116
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
117
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
118
+ animation-name: pf-v6-global-fade-in;
119
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
120
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
121
+ }
106
122
  .pf-v6-c-text-input-group:hover {
107
123
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
108
124
  }
@@ -7,8 +7,8 @@ declare const _default: {
7
7
  "success": "pf-m-success",
8
8
  "warning": "pf-m-warning",
9
9
  "error": "pf-m-error",
10
- "icon": "pf-m-icon",
11
10
  "status": "pf-m-status",
11
+ "icon": "pf-m-icon",
12
12
  "hint": "pf-m-hint"
13
13
  },
14
14
  "textInputGroup": "pf-v6-c-text-input-group",
@@ -9,8 +9,8 @@ exports.default = {
9
9
  "success": "pf-m-success",
10
10
  "warning": "pf-m-warning",
11
11
  "error": "pf-m-error",
12
- "icon": "pf-m-icon",
13
12
  "status": "pf-m-status",
13
+ "icon": "pf-m-icon",
14
14
  "hint": "pf-m-hint"
15
15
  },
16
16
  "textInputGroup": "pf-v6-c-text-input-group",
@@ -7,8 +7,8 @@ export default {
7
7
  "success": "pf-m-success",
8
8
  "warning": "pf-m-warning",
9
9
  "error": "pf-m-error",
10
- "icon": "pf-m-icon",
11
10
  "status": "pf-m-status",
11
+ "icon": "pf-m-icon",
12
12
  "hint": "pf-m-hint"
13
13
  },
14
14
  "textInputGroup": "pf-v6-c-text-input-group",
@@ -28,4 +28,8 @@
28
28
  --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--hover--Color);
29
29
  --pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine);
30
30
  --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle);
31
+ }
32
+
33
+ .pf-v6-c-timestamp__text {
34
+ text-decoration: inherit;
31
35
  }
@@ -3,6 +3,7 @@ declare const _default: {
3
3
  "modifiers": {
4
4
  "helpText": "pf-m-help-text"
5
5
  },
6
- "timestamp": "pf-v6-c-timestamp"
6
+ "timestamp": "pf-v6-c-timestamp",
7
+ "timestampText": "pf-v6-c-timestamp__text"
7
8
  };
8
9
  export default _default;
@@ -5,5 +5,6 @@ exports.default = {
5
5
  "modifiers": {
6
6
  "helpText": "pf-m-help-text"
7
7
  },
8
- "timestamp": "pf-v6-c-timestamp"
8
+ "timestamp": "pf-v6-c-timestamp",
9
+ "timestampText": "pf-v6-c-timestamp__text"
9
10
  };
@@ -3,5 +3,6 @@ export default {
3
3
  "modifiers": {
4
4
  "helpText": "pf-m-help-text"
5
5
  },
6
- "timestamp": "pf-v6-c-timestamp"
6
+ "timestamp": "pf-v6-c-timestamp",
7
+ "timestampText": "pf-v6-c-timestamp__text"
7
8
  };
@@ -14,6 +14,17 @@
14
14
  --pf-v6-c-tree-view__node-container--Display: contents;
15
15
  --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
16
16
  --pf-v6-c-tree-view__node-content--Overflow: visible;
17
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
18
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
19
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
20
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
21
+ --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
22
+ --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
23
+ --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24
+ --pf-v6-c-tree-view__list--Opacity: 0;
25
+ --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
26
+ --pf-v6-c-tree-view__list--TranslateY: 0;
27
+ --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
17
28
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
18
29
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
19
30
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -29,6 +40,8 @@
29
40
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
30
41
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
31
42
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
43
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
44
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
32
45
  --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
33
46
  --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
34
47
  --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -104,6 +117,13 @@
104
117
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
105
118
  --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);
106
119
  }
120
+ @media screen and (prefers-reduced-motion: no-preference) {
121
+ .pf-v6-c-tree-view {
122
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
123
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
124
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
125
+ }
126
+ }
107
127
 
108
128
  .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 {
109
129
  position: relative;
@@ -219,12 +239,23 @@
219
239
  display: inline-block;
220
240
  min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
221
241
  text-align: center;
242
+ transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
222
243
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
223
244
  }
224
245
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
225
246
  scale: -1 1;
226
247
  }
227
248
 
249
+ .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
250
+ max-height: 0;
251
+ visibility: hidden;
252
+ opacity: var(--pf-v6-c-tree-view__list--Opacity);
253
+ transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
254
+ transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
255
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
256
+ transition-property: opacity, translate, visibility, max-height;
257
+ translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
258
+ }
228
259
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
229
260
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
230
261
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -233,6 +264,14 @@
233
264
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
234
265
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
235
266
  }
267
+ .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
268
+ max-height: 99999px;
269
+ visibility: revert;
270
+ opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
271
+ transition-delay: 0s;
272
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
273
+ translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
274
+ }
236
275
 
237
276
  .pf-v6-c-tree-view__node,
238
277
  .pf-v6-c-tree-view__node-container {
@@ -12,6 +12,7 @@ declare const _default: {
12
12
  "treeView": "pf-v6-c-tree-view",
13
13
  "treeViewAction": "pf-v6-c-tree-view__action",
14
14
  "treeViewContent": "pf-v6-c-tree-view__content",
15
+ "treeViewList": "pf-v6-c-tree-view__list",
15
16
  "treeViewListItem": "pf-v6-c-tree-view__list-item",
16
17
  "treeViewNode": "pf-v6-c-tree-view__node",
17
18
  "treeViewNodeCheck": "pf-v6-c-tree-view__node-check",
@@ -14,6 +14,7 @@ exports.default = {
14
14
  "treeView": "pf-v6-c-tree-view",
15
15
  "treeViewAction": "pf-v6-c-tree-view__action",
16
16
  "treeViewContent": "pf-v6-c-tree-view__content",
17
+ "treeViewList": "pf-v6-c-tree-view__list",
17
18
  "treeViewListItem": "pf-v6-c-tree-view__list-item",
18
19
  "treeViewNode": "pf-v6-c-tree-view__node",
19
20
  "treeViewNodeCheck": "pf-v6-c-tree-view__node-check",
@@ -12,6 +12,7 @@ export default {
12
12
  "treeView": "pf-v6-c-tree-view",
13
13
  "treeViewAction": "pf-v6-c-tree-view__action",
14
14
  "treeViewContent": "pf-v6-c-tree-view__content",
15
+ "treeViewList": "pf-v6-c-tree-view__list",
15
16
  "treeViewListItem": "pf-v6-c-tree-view__list-item",
16
17
  "treeViewNode": "pf-v6-c-tree-view__node",
17
18
  "treeViewNodeCheck": "pf-v6-c-tree-view__node-check",
@@ -8,6 +8,12 @@
8
8
  grid-auto-flow: column;
9
9
  align-items: baseline;
10
10
  min-width: var(--pf-v6-c-truncate--MinWidth);
11
+ text-decoration: inherit;
12
+ }
13
+ .pf-v6-c-truncate.pf-m-fixed {
14
+ display: inline;
15
+ align-items: revert;
16
+ min-width: revert;
11
17
  }
12
18
 
13
19
  .pf-v6-c-truncate__start,
@@ -1,6 +1,9 @@
1
1
  import './truncate.css';
2
2
  declare const _default: {
3
3
  "dirRtl": "pf-v6-m-dir-rtl",
4
+ "modifiers": {
5
+ "fixed": "pf-m-fixed"
6
+ },
4
7
  "truncate": "pf-v6-c-truncate",
5
8
  "truncateEnd": "pf-v6-c-truncate__end",
6
9
  "truncateStart": "pf-v6-c-truncate__start"
@@ -3,6 +3,9 @@ exports.__esModule = true;
3
3
  require('./truncate.css');
4
4
  exports.default = {
5
5
  "dirRtl": "pf-v6-m-dir-rtl",
6
+ "modifiers": {
7
+ "fixed": "pf-m-fixed"
8
+ },
6
9
  "truncate": "pf-v6-c-truncate",
7
10
  "truncateEnd": "pf-v6-c-truncate__end",
8
11
  "truncateStart": "pf-v6-c-truncate__start"
@@ -1,6 +1,9 @@
1
1
  import './truncate.css';
2
2
  export default {
3
3
  "dirRtl": "pf-v6-m-dir-rtl",
4
+ "modifiers": {
5
+ "fixed": "pf-m-fixed"
6
+ },
4
7
  "truncate": "pf-v6-c-truncate",
5
8
  "truncateEnd": "pf-v6-c-truncate__end",
6
9
  "truncateStart": "pf-v6-c-truncate__start"