@patternfly/react-styles 6.0.0-alpha.11 → 6.0.0-alpha.13

Sign up to get free protection for your applications and to get access to all the features.
Files changed (77) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/css/components/Accordion/accordion.css +1 -1
  3. package/css/components/Alert/alert.css +2 -0
  4. package/css/components/Breadcrumb/breadcrumb.css +9 -1
  5. package/css/components/Button/button.css +44 -46
  6. package/css/components/CalendarMonth/calendar-month.css +61 -92
  7. package/css/components/CalendarMonth/calendar-month.d.ts +2 -4
  8. package/css/components/CalendarMonth/calendar-month.js +2 -4
  9. package/css/components/CalendarMonth/calendar-month.mjs +2 -4
  10. package/css/components/CodeBlock/code-block.css +4 -0
  11. package/css/components/CodeEditor/code-editor.css +94 -72
  12. package/css/components/CodeEditor/code-editor.d.ts +4 -4
  13. package/css/components/CodeEditor/code-editor.js +4 -4
  14. package/css/components/CodeEditor/code-editor.mjs +4 -4
  15. package/css/components/DataList/data-list.css +1 -1
  16. package/css/components/DatePicker/date-picker.css +13 -14
  17. package/css/components/DatePicker/date-picker.d.ts +1 -2
  18. package/css/components/DatePicker/date-picker.js +1 -2
  19. package/css/components/DatePicker/date-picker.mjs +1 -2
  20. package/css/components/Divider/divider.css +8 -6
  21. package/css/components/DualListSelector/dual-list-selector.css +54 -51
  22. package/css/components/DualListSelector/dual-list-selector.d.ts +1 -2
  23. package/css/components/DualListSelector/dual-list-selector.js +1 -2
  24. package/css/components/DualListSelector/dual-list-selector.mjs +1 -2
  25. package/css/components/Form/form.css +3 -7
  26. package/css/components/FormControl/form-control.css +6 -6
  27. package/css/components/Icon/icon.css +27 -27
  28. package/css/components/Label/label-group.css +1 -1
  29. package/css/components/Label/label.css +18 -14
  30. package/css/components/Login/login.css +5 -22
  31. package/css/components/Login/login.d.ts +1 -1
  32. package/css/components/Login/login.js +1 -1
  33. package/css/components/Login/login.mjs +1 -1
  34. package/css/components/Menu/menu.css +387 -419
  35. package/css/components/Menu/menu.d.ts +5 -8
  36. package/css/components/Menu/menu.js +5 -8
  37. package/css/components/Menu/menu.mjs +5 -8
  38. package/css/components/MenuToggle/menu-toggle.css +219 -272
  39. package/css/components/MenuToggle/menu-toggle.d.ts +7 -8
  40. package/css/components/MenuToggle/menu-toggle.js +7 -8
  41. package/css/components/MenuToggle/menu-toggle.mjs +7 -8
  42. package/css/components/NotificationBadge/notification-badge.css +4 -4
  43. package/css/components/Pagination/pagination.css +3 -13
  44. package/css/components/ProgressStepper/progress-stepper.css +72 -69
  45. package/css/components/ProgressStepper/progress-stepper.d.ts +1 -0
  46. package/css/components/ProgressStepper/progress-stepper.js +1 -0
  47. package/css/components/ProgressStepper/progress-stepper.mjs +1 -0
  48. package/css/components/SimpleList/simple-list.css +0 -3
  49. package/css/components/Table/table-grid.css +31 -47
  50. package/css/components/Table/table-scrollable.css +6 -6
  51. package/css/components/Table/table-tree-view.css +81 -74
  52. package/css/components/Table/table-tree-view.d.ts +1 -0
  53. package/css/components/Table/table-tree-view.js +1 -0
  54. package/css/components/Table/table-tree-view.mjs +1 -0
  55. package/css/components/Table/table.css +156 -255
  56. package/css/components/Table/table.d.ts +0 -1
  57. package/css/components/Table/table.js +0 -1
  58. package/css/components/Table/table.mjs +0 -1
  59. package/css/components/Tabs/tabs.css +1 -2
  60. package/css/components/TextInputGroup/text-input-group.css +0 -14
  61. package/css/components/TextInputGroup/text-input-group.d.ts +1 -3
  62. package/css/components/TextInputGroup/text-input-group.js +1 -3
  63. package/css/components/TextInputGroup/text-input-group.mjs +1 -3
  64. package/css/components/Tile/tile.css +1 -1
  65. package/css/components/TreeView/tree-view.css +76 -97
  66. package/css/components/TreeView/tree-view.d.ts +0 -4
  67. package/css/components/TreeView/tree-view.js +0 -4
  68. package/css/components/TreeView/tree-view.mjs +0 -4
  69. package/css/components/Wizard/wizard.css +122 -205
  70. package/css/components/Wizard/wizard.d.ts +0 -3
  71. package/css/components/Wizard/wizard.js +0 -3
  72. package/css/components/Wizard/wizard.mjs +0 -3
  73. package/css/docs/components/Menu/examples/Menu.css +7 -11
  74. package/css/docs/components/Menu/examples/Menu.d.ts +2 -1
  75. package/css/docs/components/Menu/examples/Menu.js +2 -1
  76. package/css/docs/components/Menu/examples/Menu.mjs +2 -1
  77. package/package.json +3 -3
@@ -2,7 +2,6 @@ import './table.css';
2
2
  declare const _default: {
3
3
  "button": "pf-v5-c-button",
4
4
  "check": "pf-v5-c-check",
5
- "checkInput": "pf-v5-c-check__input",
6
5
  "dirRtl": "pf-v5-m-dir-rtl",
7
6
  "modifiers": {
8
7
  "hidden": "pf-m-hidden",
@@ -4,7 +4,6 @@ require('./table.css');
4
4
  exports.default = {
5
5
  "button": "pf-v5-c-button",
6
6
  "check": "pf-v5-c-check",
7
- "checkInput": "pf-v5-c-check__input",
8
7
  "dirRtl": "pf-v5-m-dir-rtl",
9
8
  "modifiers": {
10
9
  "hidden": "pf-m-hidden",
@@ -2,7 +2,6 @@ import './table.css';
2
2
  export default {
3
3
  "button": "pf-v5-c-button",
4
4
  "check": "pf-v5-c-check",
5
- "checkInput": "pf-v5-c-check__input",
6
5
  "dirRtl": "pf-v5-m-dir-rtl",
7
6
  "modifiers": {
8
7
  "hidden": "pf-m-hidden",
@@ -132,7 +132,7 @@
132
132
  --pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
133
133
  --pf-v5-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
134
134
  --pf-v5-c-tabs__link-toggle-icon--Rotate: 0;
135
- --pf-v5-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--FontSize--sm);
135
+ --pf-v5-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
136
136
  --pf-v5-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
137
137
  }
138
138
 
@@ -555,7 +555,6 @@
555
555
 
556
556
  .pf-v5-c-tabs__link:where(:hover, :focus) {
557
557
  --pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs__link--hover--BackgroundColor);
558
- mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
559
558
  }
560
559
  .pf-v5-c-tabs__link:disabled, .pf-v5-c-tabs__link.pf-m-disabled {
561
560
  pointer-events: none;
@@ -25,8 +25,6 @@
25
25
  --pf-v5-c-text-input-group__icon--Left: var(--pf-v5-global--spacer--sm);
26
26
  --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-global--icon--Color--dark);
27
27
  --pf-v5-c-text-input-group__icon--TranslateY: -50%;
28
- --pf-v5-c-text-input-group__utilities--MarginRight: var(--pf-v5-global--spacer--sm);
29
- --pf-v5-c-text-input-group__utilities--MarginLeft: var(--pf-v5-global--spacer--xs);
30
28
  --pf-v5-c-text-input-group__utilities--child--MarginLeft: var(--pf-v5-global--spacer--xs);
31
29
  --pf-v5-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--xs);
32
30
  --pf-v5-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-v5-global--spacer--xs);
@@ -139,19 +137,7 @@
139
137
  .pf-v5-c-text-input-group__utilities > * + * {
140
138
  margin-inline-start: var(--pf-v5-c-text-input-group__utilities--child--MarginLeft);
141
139
  }
142
- .pf-v5-c-text-input-group__utilities .pf-v5-c-button {
143
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-text-input-group__utilities--c-button--PaddingRight);
144
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-text-input-group__utilities--c-button--PaddingLeft);
145
- }
146
140
 
147
141
  .pf-v5-c-text-input-group__group {
148
142
  display: flex;
149
- }
150
-
151
- :where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
152
- --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
153
- --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
154
- --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
155
- --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
156
- --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
157
143
  }
@@ -1,6 +1,5 @@
1
1
  import './text-input-group.css';
2
2
  declare const _default: {
3
- "button": "pf-v5-c-button",
4
3
  "chipGroupMain": "pf-v5-c-chip-group__main",
5
4
  "modifiers": {
6
5
  "disabled": "pf-m-disabled",
@@ -14,7 +13,6 @@ declare const _default: {
14
13
  "textInputGroupMain": "pf-v5-c-text-input-group__main",
15
14
  "textInputGroupText": "pf-v5-c-text-input-group__text",
16
15
  "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
17
- "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
18
- "themeDark": "pf-v5-theme-dark"
16
+ "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
19
17
  };
20
18
  export default _default;
@@ -2,7 +2,6 @@
2
2
  exports.__esModule = true;
3
3
  require('./text-input-group.css');
4
4
  exports.default = {
5
- "button": "pf-v5-c-button",
6
5
  "chipGroupMain": "pf-v5-c-chip-group__main",
7
6
  "modifiers": {
8
7
  "disabled": "pf-m-disabled",
@@ -16,6 +15,5 @@ exports.default = {
16
15
  "textInputGroupMain": "pf-v5-c-text-input-group__main",
17
16
  "textInputGroupText": "pf-v5-c-text-input-group__text",
18
17
  "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
19
- "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
20
- "themeDark": "pf-v5-theme-dark"
18
+ "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
21
19
  };
@@ -1,6 +1,5 @@
1
1
  import './text-input-group.css';
2
2
  export default {
3
- "button": "pf-v5-c-button",
4
3
  "chipGroupMain": "pf-v5-c-chip-group__main",
5
4
  "modifiers": {
6
5
  "disabled": "pf-m-disabled",
@@ -14,6 +13,5 @@ export default {
14
13
  "textInputGroupMain": "pf-v5-c-text-input-group__main",
15
14
  "textInputGroupText": "pf-v5-c-text-input-group__text",
16
15
  "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
17
- "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
18
- "themeDark": "pf-v5-theme-dark"
16
+ "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
19
17
  };
@@ -11,7 +11,7 @@
11
11
  --pf-v5-c-tile--before--BorderRadius: var(--pf-v5-c-tile--BorderRadius);
12
12
  --pf-v5-c-tile--after--BackgroundColor: transparent;
13
13
  --pf-v5-c-tile__icon--MarginRight: var(--pf-t--global--spacer--sm);
14
- --pf-v5-c-tile__icon--FontSize: var(--pf-t--global--icon--size--body--default);
14
+ --pf-v5-c-tile__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
15
15
  --pf-v5-c-tile__icon--Color: var(--pf-t--global--icon--color--regular);
16
16
  --pf-v5-c-tile__title--Color: var(--pf-t--global--text--color--regular);
17
17
  --pf-v5-c-tile__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -1,117 +1,111 @@
1
- .pf-v5-c-tree-view {
2
- --pf-v5-c-tree-view--PaddingTop: var(--pf-v5-global--spacer--sm);
3
- --pf-v5-c-tree-view--PaddingBottom: var(--pf-v5-global--spacer--sm);
4
- --pf-v5-c-tree-view__node--indent--base: calc(var(--pf-v5-global--spacer--md) * 2 + var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth));
5
- --pf-v5-c-tree-view__node--nested-indent--base: calc(var(--pf-v5-c-tree-view__node--indent--base) - var(--pf-v5-global--spacer--md));
6
- --pf-v5-c-tree-view__node--PaddingTop--base: var(--pf-v5-global--spacer--sm);
7
- --pf-v5-c-tree-view__node--PaddingTop: var(--pf-v5-c-tree-view__node--PaddingTop--base);
8
- --pf-v5-c-tree-view__node--PaddingRight: var(--pf-v5-global--spacer--sm);
9
- --pf-v5-c-tree-view__node--PaddingBottom: var(--pf-v5-global--spacer--sm);
1
+ :where(:root),
2
+ :where(.pf-v5-c-tree-view) {
3
+ --pf-v5-c-tree-view__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth));
4
+ --pf-v5-c-tree-view__node--nested-indent--base: calc(var(--pf-v5-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
5
+ --pf-v5-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);
6
+ --pf-v5-c-tree-view__node--PaddingTop: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-tree-view__node--PaddingRight: var(--pf-t--global--spacer--sm);
8
+ --pf-v5-c-tree-view__node--PaddingBottom: var(--pf-t--global--spacer--sm);
10
9
  --pf-v5-c-tree-view__node--PaddingLeft: var(--pf-v5-c-tree-view__node--indent--base);
11
- --pf-v5-c-tree-view__node--Color: var(--pf-v5-global--Color--100);
12
- --pf-v5-c-tree-view__node--m-current--Color: var(--pf-v5-global--link--Color);
13
- --pf-v5-c-tree-view__node--m-current--FontWeight: var(--pf-v5-global--FontWeight--bold);
10
+ --pf-v5-c-tree-view__node--Color: var(--pf-t--global--text--color--subtle);
14
11
  --pf-v5-c-tree-view__node--BackgroundColor: transparent;
12
+ --pf-v5-c-tree-view__node--m-current--Color: var(--pf-t--global--text--color--regular);
13
+ --pf-v5-c-tree-view__node--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
14
+ --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
15
15
  --pf-v5-c-tree-view__node-container--Display: contents;
16
- --pf-v5-c-tree-view__node-content--RowGap: var(--pf-v5-global--spacer--sm);
16
+ --pf-v5-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
17
17
  --pf-v5-c-tree-view__node-content--Overflow: visible;
18
- --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
19
- --pf-v5-c-tree-view__node--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
20
- --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-v5-c-tree-view__node--PaddingTop--base);
18
+ --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-v5-c-tree-view__node--PaddingTop);
21
19
  --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-v5-c-tree-view__node--PaddingLeft);
22
20
  --pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
23
21
  --pf-v5-c-tree-view__node-toggle--Position: absolute;
24
- --pf-v5-c-tree-view__node-toggle--Color--base: var(--pf-v5-global--Color--200);
22
+ --pf-v5-c-tree-view__node-toggle--Color--base: var(--pf-t--global--icon--color--subtle);
25
23
  --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--Color--base);
26
- --pf-v5-c-tree-view__node-toggle--hover--Color: var(--pf-v5-global--Color--100);
27
- --pf-v5-c-tree-view__node-toggle--focus--Color: var(--pf-v5-global--Color--100);
28
- --pf-v5-c-tree-view__node-toggle--active--Color: var(--pf-v5-global--Color--100);
29
24
  --pf-v5-c-tree-view__node-toggle--BackgroundColor: transparent;
30
- --pf-v5-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-v5-global--Color--100);
31
- --pf-v5-c-tree-view__node-toggle-icon--MinWidth: var(--pf-v5-global--FontSize--md);
32
- --pf-v5-c-tree-view__node-toggle-icon--Transition: transform var(--pf-v5-global--TransitionDuration) var(--pf-v5-global--TimingFunction);
33
- --pf-v5-c-tree-view__node-toggle-button--PaddingTop: var(--pf-v5-global--spacer--form-element);
34
- --pf-v5-c-tree-view__node-toggle-button--PaddingRight: var(--pf-v5-global--spacer--md);
35
- --pf-v5-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
36
- --pf-v5-c-tree-view__node-toggle-button--PaddingLeft: var(--pf-v5-global--spacer--md);
37
- --pf-v5-c-tree-view__node-toggle-button--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
38
- --pf-v5-c-tree-view__node-toggle-button--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
39
- --pf-v5-c-tree-view__node-check--MarginRight: var(--pf-v5-global--spacer--sm);
40
- --pf-v5-c-tree-view__node-count--MarginLeft: var(--pf-v5-global--spacer--sm);
41
- --pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor: var(--pf-v5-global--disabled-color--200);
42
- --pf-v5-c-tree-view__search--PaddingTop: var(--pf-v5-global--spacer--sm);
43
- --pf-v5-c-tree-view__search--PaddingRight: var(--pf-v5-global--spacer--sm);
44
- --pf-v5-c-tree-view__search--PaddingBottom: var(--pf-v5-global--spacer--sm);
45
- --pf-v5-c-tree-view__search--PaddingLeft: var(--pf-v5-global--spacer--sm);
46
- --pf-v5-c-tree-view__node-icon--PaddingRight: var(--pf-v5-global--spacer--sm);
47
- --pf-v5-c-tree-view__node-icon--Color: var(--pf-v5-global--icon--Color--light);
25
+ --pf-v5-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-t--global--icon--color--regular);
26
+ --pf-v5-c-tree-view__node-toggle-icon--MinWidth: var(--pf-t--global--icon--size--font--body--default);
27
+ --pf-v5-c-tree-view__node-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
28
+ --pf-v5-c-tree-view__node-toggle--PaddingRight: var(--pf-t--global--spacer--md);
29
+ --pf-v5-c-tree-view__node-toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
30
+ --pf-v5-c-tree-view__node-toggle--PaddingLeft: var(--pf-t--global--spacer--md);
31
+ --pf-v5-c-tree-view__node-toggle--MarginTop: calc(var(--pf-v5-c-tree-view__node-toggle--PaddingTop) * -1);
32
+ --pf-v5-c-tree-view__node-toggle--MarginBottom: calc(var(--pf-v5-c-tree-view__node-toggle--PaddingTop) * -1);
33
+ --pf-v5-c-tree-view__node-check--MarginRight: var(--pf-t--global--spacer--sm);
34
+ --pf-v5-c-tree-view__node-count--MarginLeft: var(--pf-t--global--spacer--sm);
35
+ --pf-v5-c-tree-view__search--PaddingTop: var(--pf-t--global--spacer--sm);
36
+ --pf-v5-c-tree-view__search--PaddingRight: var(--pf-t--global--spacer--sm);
37
+ --pf-v5-c-tree-view__search--PaddingBottom: var(--pf-t--global--spacer--sm);
38
+ --pf-v5-c-tree-view__search--PaddingLeft: var(--pf-t--global--spacer--sm);
39
+ --pf-v5-c-tree-view__node-icon--PaddingRight: var(--pf-t--global--spacer--sm);
40
+ --pf-v5-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
48
41
  --pf-v5-c-tree-view__node-toggle-icon--base--Rotate: 0;
49
42
  --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
50
43
  --pf-v5-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
51
44
  --pf-v5-c-tree-view__node-text--max-lines: 1;
52
- --pf-v5-c-tree-view__node-title--FontWeight: var(--pf-v5-global--FontWeight--bold);
53
- --pf-v5-c-tree-view__action--MarginLeft: var(--pf-v5-global--spacer--md);
45
+ --pf-v5-c-tree-view__node-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
46
+ --pf-v5-c-tree-view__action--MarginInlineEnd: var(--pf-t--global--spacer--md);
54
47
  --pf-v5-c-tree-view--m-guides--guide--Left: var(--pf-v5-c-tree-view--m-guides--guide-left--base);
55
- --pf-v5-c-tree-view--m-guides--guide-color--base: var(--pf-v5-global--BorderColor--100);
56
- --pf-v5-c-tree-view--m-guides--guide-width--base: var(--pf-v5-global--BorderWidth--sm);
48
+ --pf-v5-c-tree-view--m-guides--guide-color--base: var(--pf-t--global--border--color--default);
49
+ --pf-v5-c-tree-view--m-guides--guide-width--base: var(--pf-t--global--border--width--divider--default);
57
50
  --pf-v5-c-tree-view--m-guides--guide-left--base: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides__list-node--guide-width--base));
58
51
  --pf-v5-c-tree-view--m-guides--guide-left--base--offset: calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left) + var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth) / 2);
59
- --pf-v5-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-v5-global--spacer--lg);
52
+ --pf-v5-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-t--global--spacer--lg);
60
53
  --pf-v5-c-tree-view--m-guides__list-item--before--Top: 0;
61
54
  --pf-v5-c-tree-view--m-guides__list-item--before--Width: var(--pf-v5-c-tree-view--m-guides--guide-width--base);
62
55
  --pf-v5-c-tree-view--m-guides__list-item--before--Height: 100%;
63
56
  --pf-v5-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-v5-c-tree-view--m-guides--guide-color--base);
64
57
  --pf-v5-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-v5-c-tree-view--m-guides__node--before--Top);
65
58
  --pf-v5-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-v5-c-tree-view--m-guides__list-item--last-child--before--Top);
66
- --pf-v5-c-tree-view--m-guides__list-item--ZIndex: var(--pf-v5-global--ZIndex--xs);
59
+ --pf-v5-c-tree-view--m-guides__list-item--ZIndex: var(--pf-t--global--Zindex--xs);
67
60
  --pf-v5-c-tree-view--m-guides__node--before--Width: 1rem;
68
61
  --pf-v5-c-tree-view--m-guides__node--before--Height: var(--pf-v5-c-tree-view--m-guides--guide-width--base);
69
62
  --pf-v5-c-tree-view--m-guides__node--before--Top: 1.125rem;
70
63
  --pf-v5-c-tree-view--m-guides__node--before--BackgroundColor: var(--pf-v5-c-tree-view--m-guides--guide-color--base);
71
- --pf-v5-c-tree-view--m-compact--base-border--Left--offset: var(--pf-v5-global--spacer--md);
64
+ --pf-v5-c-tree-view--m-compact--base-border--Left--offset: var(--pf-t--global--spacer--md);
72
65
  --pf-v5-c-tree-view--m-compact--base-border--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset));
73
66
  --pf-v5-c-tree-view--m-compact__node--indent--base: var(--pf-v5-c-tree-view__node--indent--base);
74
- --pf-v5-c-tree-view--m-compact__node--nested-indent--base: var(--pf-v5-global--spacer--lg);
67
+ --pf-v5-c-tree-view--m-compact__node--nested-indent--base: var(--pf-t--global--spacer--lg);
75
68
  --pf-v5-c-tree-view--m-compact--border--Left: var(--pf-v5-c-tree-view--m-compact--base-border--Left);
69
+ --pf-v5-c-tree-view--m-compact__node--Color: var(--pf-t--global--text--color--regular);
76
70
  --pf-v5-c-tree-view--m-compact__node--PaddingTop: 0;
77
71
  --pf-v5-c-tree-view--m-compact__node--PaddingBottom: 0;
78
- --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop: var(--pf-v5-global--spacer--sm);
79
- --pf-v5-c-tree-view--m-compact__node--nested--PaddingBottom: var(--pf-v5-global--spacer--sm);
72
+ --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop: var(--pf-t--global--spacer--sm);
73
+ --pf-v5-c-tree-view--m-compact__node--nested--PaddingBottom: var(--pf-t--global--spacer--sm);
80
74
  --pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop));
81
- --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
82
- --pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
75
+ --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
76
+ --pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor: var(--pf-t--global--border--color--default);
83
77
  --pf-v5-c-tree-view--m-compact__list-item--before--Top: 0;
84
78
  --pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-v5-c-tree-view--m-compact__node--before--Top);
85
- --pf-v5-c-tree-view--m-compact__list-item--nested--before--Top: calc(var(--pf-v5-c-tree-view__node--PaddingTop--base) * -1);
86
- --pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height: calc(var(--pf-v5-c-tree-view--m-compact__node--before--Top) + var(--pf-v5-c-tree-view__node--PaddingTop--base));
79
+ --pf-v5-c-tree-view--m-compact__list-item--nested--before--Top: calc(var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop) * -1);
80
+ --pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height: calc(var(--pf-v5-c-tree-view--m-compact__node--before--Top) + var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop));
87
81
  --pf-v5-c-tree-view--m-compact__node--PaddingLeft: var(--pf-v5-c-tree-view--m-compact__node--indent--base);
88
82
  --pf-v5-c-tree-view--m-compact__node--before--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop) + var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem);
89
83
  --pf-v5-c-tree-view--m-compact__node--level-2--PaddingLeft: var(--pf-v5-c-tree-view--m-compact__node--indent--base);
90
- --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight: calc(var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft) * -.5);
91
- --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft: calc(var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft) * -1.5);
84
+ --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight: calc(var(--pf-v5-c-tree-view__node-toggle--PaddingLeft) * -.5);
85
+ --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft: calc(var(--pf-v5-c-tree-view__node-toggle--PaddingLeft) * -1.5);
92
86
  --pf-v5-c-tree-view--m-compact__node-container--Display: flex;
93
- --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base: var(--pf-v5-global--spacer--lg);
94
- --pf-v5-c-tree-view--m-compact__node-container--PaddingTop: var(--pf-v5-global--spacer--lg);
95
- --pf-v5-c-tree-view--m-compact__node-container--PaddingRight: var(--pf-v5-global--spacer--lg);
87
+ --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base: var(--pf-t--global--spacer--lg);
88
+ --pf-v5-c-tree-view--m-compact__node-container--PaddingTop: var(--pf-t--global--spacer--lg);
89
+ --pf-v5-c-tree-view--m-compact__node-container--PaddingRight: var(--pf-t--global--spacer--lg);
96
90
  --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base);
97
- --pf-v5-c-tree-view--m-compact__node-container--PaddingLeft: var(--pf-v5-global--spacer--xs);
98
- --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop: var(--pf-v5-global--spacer--md);
99
- --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight: var(--pf-v5-global--spacer--lg);
100
- --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom: var(--pf-v5-global--spacer--md);
101
- --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft: var(--pf-v5-global--spacer--lg);
102
- --pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
91
+ --pf-v5-c-tree-view--m-compact__node-container--PaddingLeft: var(--pf-t--global--spacer--xs);
92
+ --pf-v5-c-tree-view--m-compact__node-container--BorderRadius: var(--pf-t--global--border--radius--small);
93
+ --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop: var(--pf-t--global--spacer--md);
94
+ --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight: var(--pf-t--global--spacer--lg);
95
+ --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom: var(--pf-t--global--spacer--md);
96
+ --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft: var(--pf-t--global--spacer--lg);
97
+ --pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
103
98
  --pf-v5-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom: 0;
104
99
  --pf-v5-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
105
- --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset: var(--pf-v5-global--spacer--sm);
100
+ --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset: var(--pf-t--global--spacer--sm);
106
101
  --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
107
102
  --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base: var(--pf-v5-c-tree-view__node--indent--base);
108
- --pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-v5-global--spacer--2xl);
103
+ --pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-t--global--spacer--2xl);
109
104
  --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop: 0;
110
105
  --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom: 0;
111
106
  --pf-v5-c-tree-view--m-compact--m-no-background__node--before--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop) + var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem);
112
- padding-block-start: var(--pf-v5-c-tree-view--PaddingTop);
113
- padding-block-end: var(--pf-v5-c-tree-view--PaddingBottom);
114
107
  }
108
+
115
109
  .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item {
116
110
  position: relative;
117
111
  }
@@ -145,11 +139,11 @@
145
139
  --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth: 0;
146
140
  }
147
141
  .pf-v5-c-tree-view.pf-m-compact {
142
+ --pf-v5-c-tree-view__node--Color: var(--pf-v5-c-tree-view--m-compact__node--Color);
148
143
  --pf-v5-c-tree-view__node--PaddingTop: var(--pf-v5-c-tree-view--m-compact__node--PaddingTop);
149
144
  --pf-v5-c-tree-view__node--PaddingBottom: var(--pf-v5-c-tree-view--m-compact__node--PaddingBottom);
150
145
  --pf-v5-c-tree-view__node-container--Display: var(--pf-v5-c-tree-view--m-compact__node-container--Display);
151
146
  --pf-v5-c-tree-view__node--hover--BackgroundColor: transparent;
152
- --pf-v5-c-tree-view__node--focus--BackgroundColor: transparent;
153
147
  --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top);
154
148
  }
155
149
  .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item {
@@ -226,7 +220,6 @@
226
220
  display: inline-block;
227
221
  min-width: var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth);
228
222
  text-align: center;
229
- transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
230
223
  transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
231
224
  }
232
225
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
@@ -264,30 +257,15 @@
264
257
  }
265
258
  .pf-v5-c-tree-view__node.pf-m-current {
266
259
  --pf-v5-c-tree-view__node--Color: var(--pf-v5-c-tree-view__node--m-current--Color);
267
- font-weight: var(--pf-v5-c-tree-view__node--m-current--FontWeight);
268
- }
269
- .pf-v5-c-tree-view__node:focus {
270
- --pf-v5-c-tree-view__node--BackgroundColor: var(--pf-v5-c-tree-view__node--focus--BackgroundColor);
271
260
  }
272
261
  .pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count {
273
262
  margin-inline-start: var(--pf-v5-c-tree-view__node-count--MarginLeft);
274
263
  }
275
- .pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count .pf-v5-c-badge.pf-m-read {
276
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
277
- }
278
- .pf-v5-c-tree-view__node:not(.pf-m-selectable):hover, .pf-v5-c-tree-view__node.pf-m-selectable .pf-v5-c-tree-view__node-toggle:hover {
279
- --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--hover--Color);
280
- }
281
- .pf-v5-c-tree-view__node:not(.pf-m-selectable):focus, .pf-v5-c-tree-view__node.pf-m-selectable .pf-v5-c-tree-view__node-toggle:focus {
282
- --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--focus--Color);
283
- }
284
- .pf-v5-c-tree-view__node:not(.pf-m-selectable):active, .pf-v5-c-tree-view__node.pf-m-selectable .pf-v5-c-tree-view__node-toggle:active {
285
- --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--active--Color);
286
- }
287
264
 
288
265
  .pf-v5-c-tree-view__node-container {
289
266
  display: var(--pf-v5-c-tree-view__node-container--Display);
290
267
  flex-grow: 1;
268
+ border-radius: var(--pf-v5-c-tree-view--m-compact__node-container--BorderRadius);
291
269
  }
292
270
 
293
271
  .pf-v5-c-tree-view__node-content {
@@ -310,12 +288,12 @@
310
288
  display: inline-flex;
311
289
  align-items: center;
312
290
  justify-content: center;
313
- padding-block-start: var(--pf-v5-c-tree-view__node-toggle-button--PaddingTop);
314
- padding-block-end: var(--pf-v5-c-tree-view__node-toggle-button--PaddingBottom);
315
- padding-inline-start: var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft);
316
- padding-inline-end: var(--pf-v5-c-tree-view__node-toggle-button--PaddingRight);
317
- margin-block-start: var(--pf-v5-c-tree-view__node-toggle-button--MarginTop);
318
- margin-block-end: var(--pf-v5-c-tree-view__node-toggle-button--MarginBottom);
291
+ padding-block-start: var(--pf-v5-c-tree-view__node-toggle--PaddingTop);
292
+ padding-block-end: var(--pf-v5-c-tree-view__node-toggle--PaddingBottom);
293
+ padding-inline-start: var(--pf-v5-c-tree-view__node-toggle--PaddingLeft);
294
+ padding-inline-end: var(--pf-v5-c-tree-view__node-toggle--PaddingRight);
295
+ margin-block-start: var(--pf-v5-c-tree-view__node-toggle--MarginTop);
296
+ margin-block-end: var(--pf-v5-c-tree-view__node-toggle--MarginBottom);
319
297
  color: var(--pf-v5-c-tree-view__node-toggle--Color);
320
298
  background-color: var(--pf-v5-c-tree-view__node-toggle--BackgroundColor);
321
299
  border: 0;
@@ -370,6 +348,8 @@ label.pf-v5-c-tree-view__node-text {
370
348
  .pf-v5-c-tree-view__content {
371
349
  display: flex;
372
350
  align-items: center;
351
+ background-color: var(--pf-v5-c-tree-view__content--BackgroundColor);
352
+ border-radius: var(--pf-v5-c-tree-view__content--BorderRadius);
373
353
  }
374
354
 
375
355
  .pf-v5-c-tree-view__content:hover,
@@ -378,7 +358,11 @@ label.pf-v5-c-tree-view__node-text {
378
358
  }
379
359
 
380
360
  .pf-v5-c-tree-view__action {
381
- margin-inline-start: var(--pf-v5-c-tree-view__action--MarginLeft);
361
+ margin-inline-end: var(--pf-v5-c-tree-view__action--MarginInlineEnd);
362
+ }
363
+
364
+ .pf-v5-c-tree-view__content:has(> .pf-v5-c-tree-view__node.pf-m-current) {
365
+ --pf-v5-c-tree-view__content--BackgroundColor: var(--pf-v5-c-tree-view__node--m-current--BackgroundColor);
382
366
  }
383
367
 
384
368
  .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
@@ -466,9 +450,4 @@ label.pf-v5-c-tree-view__node-text {
466
450
  --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset));
467
451
  --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 9 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base));
468
452
  --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
469
- }
470
-
471
- :where(.pf-v5-theme-dark) .pf-v5-c-tree-view {
472
- --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
473
- --pf-v5-c-tree-view__node--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
474
453
  }
@@ -1,6 +1,5 @@
1
1
  import './tree-view.css';
2
2
  declare const _default: {
3
- "badge": "pf-v5-c-badge",
4
3
  "dirRtl": "pf-v5-m-dir-rtl",
5
4
  "modifiers": {
6
5
  "compact": "pf-m-compact",
@@ -8,11 +7,8 @@ declare const _default: {
8
7
  "expanded": "pf-m-expanded",
9
8
  "noBackground": "pf-m-no-background",
10
9
  "current": "pf-m-current",
11
- "read": "pf-m-read",
12
- "selectable": "pf-m-selectable",
13
10
  "truncate": "pf-m-truncate"
14
11
  },
15
- "themeDark": "pf-v5-theme-dark",
16
12
  "treeView": "pf-v5-c-tree-view",
17
13
  "treeViewAction": "pf-v5-c-tree-view__action",
18
14
  "treeViewContent": "pf-v5-c-tree-view__content",
@@ -2,7 +2,6 @@
2
2
  exports.__esModule = true;
3
3
  require('./tree-view.css');
4
4
  exports.default = {
5
- "badge": "pf-v5-c-badge",
6
5
  "dirRtl": "pf-v5-m-dir-rtl",
7
6
  "modifiers": {
8
7
  "compact": "pf-m-compact",
@@ -10,11 +9,8 @@ exports.default = {
10
9
  "expanded": "pf-m-expanded",
11
10
  "noBackground": "pf-m-no-background",
12
11
  "current": "pf-m-current",
13
- "read": "pf-m-read",
14
- "selectable": "pf-m-selectable",
15
12
  "truncate": "pf-m-truncate"
16
13
  },
17
- "themeDark": "pf-v5-theme-dark",
18
14
  "treeView": "pf-v5-c-tree-view",
19
15
  "treeViewAction": "pf-v5-c-tree-view__action",
20
16
  "treeViewContent": "pf-v5-c-tree-view__content",
@@ -1,6 +1,5 @@
1
1
  import './tree-view.css';
2
2
  export default {
3
- "badge": "pf-v5-c-badge",
4
3
  "dirRtl": "pf-v5-m-dir-rtl",
5
4
  "modifiers": {
6
5
  "compact": "pf-m-compact",
@@ -8,11 +7,8 @@ export default {
8
7
  "expanded": "pf-m-expanded",
9
8
  "noBackground": "pf-m-no-background",
10
9
  "current": "pf-m-current",
11
- "read": "pf-m-read",
12
- "selectable": "pf-m-selectable",
13
10
  "truncate": "pf-m-truncate"
14
11
  },
15
- "themeDark": "pf-v5-theme-dark",
16
12
  "treeView": "pf-v5-c-tree-view",
17
13
  "treeViewAction": "pf-v5-c-tree-view__action",
18
14
  "treeViewContent": "pf-v5-c-tree-view__content",