@patternfly/patternfly 5.1.0-prerelease.30 → 5.1.0-prerelease.32

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 (14) hide show
  1. package/components/Popover/popover.css +43 -62
  2. package/components/Popover/popover.scss +45 -84
  3. package/components/Toolbar/toolbar.scss +2 -0
  4. package/components/Tooltip/tooltip.css +44 -63
  5. package/components/Tooltip/tooltip.scss +45 -84
  6. package/docs/components/Popover/examples/Popover.md +4 -4
  7. package/docs/components/Tooltip/examples/Tooltip.md +5 -5
  8. package/docs/demos/DataList/examples/DataList.md +8 -2
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +87 -125
  11. package/patternfly-theme-dark-unversioned.css +87 -125
  12. package/patternfly.css +87 -125
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/components/Tooltip/tooltip.scss CHANGED
@@ -39,127 +39,81 @@
39
39
  &:is(
40
40
  .pf-m-top,
41
41
  .pf-m-top-left,
42
- .pf-m-top-right,
43
- .pf-m-block-start,
44
- .pf-m-block-start-inline-start,
45
- .pf-m-block-start-inline-end
42
+ .pf-m-top-right
46
43
  ) {
47
- .#{$tooltip}__arrow {
48
- inset-block-end: 0;
49
- inset-inline-start: 50%;
50
-
51
- @include pf-v5-bidirectional-style(
52
- $prop: transform,
53
- $ltr-val: translateX(var(--#{$tooltip}__arrow--m-top--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-top--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-top--Rotate)),
54
- $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-top--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-top--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-top--Rotate))
55
- );
56
- }
44
+ --#{$tooltip}__arrow--Bottom: var(--#{$tooltip}--m-top--Bottom, 0);
45
+ --#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-top--Left, 50%);
46
+ --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-top--TranslateX);
47
+ --#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-top--TranslateY);
48
+ --#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-top--Rotate);
57
49
  }
58
50
 
59
51
  &:is(
60
52
  .pf-m-bottom,
61
53
  .pf-m-bottom-left,
62
- .pf-m-bottom-right,
63
- .pf-m-block-end,
64
- .pf-m-block-end-inline-start,
65
- .pf-m-block-end-inline-end
66
- ) {
67
- .#{$tooltip}__arrow {
68
- inset-block-start: 0;
69
- inset-inline-start: 50%;
70
-
71
- @include pf-v5-bidirectional-style(
72
- $prop: transform,
73
- $ltr-val: translateX(var(--#{$tooltip}__arrow--m-bottom--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-bottom--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-bottom--Rotate)),
74
- $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-bottom--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-bottom--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-bottom--Rotate))
75
- );
76
- }
54
+ .pf-m-bottom-right
55
+ ) {
56
+ --#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-bottom--Top, 0);
57
+ --#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-bottom--Left, 50%);
58
+ --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-bottom--TranslateX);
59
+ --#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-bottom--TranslateY);
60
+ --#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-bottom--Rotate);
77
61
  }
78
62
 
79
63
  &:is(
80
64
  .pf-m-left,
81
65
  .pf-m-left-top,
82
- .pf-m-left-bottom,
83
- .pf-m-inline-start,
84
- .pf-m-inline-start-block-start,
85
- .pf-m-inline-start-block-end
66
+ .pf-m-left-bottom
86
67
  ) {
87
- .#{$tooltip}__arrow {
88
- inset-block-start: 50%;
89
- inset-inline-end: 0;
90
-
91
- @include pf-v5-bidirectional-style(
92
- $prop: transform,
93
- $ltr-val: translateX(var(--#{$tooltip}__arrow--m-left--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-left--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-left--Rotate)),
94
- $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-left--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-left--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-left--Rotate))
95
- );
96
- }
68
+ --#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-left--Top, 50%);
69
+ --#{$tooltip}__arrow--Right: var(--#{$tooltip}--m-left--Right, 0);
70
+ --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-left--TranslateX);
71
+ --#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-left--TranslateY);
72
+ --#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-left--Rotate);
97
73
  }
98
74
 
99
75
  &:is(
100
76
  .pf-m-right,
101
77
  .pf-m-right-top,
102
- .pf-m-right-bottom,
103
- .pf-m-inline-end,
104
- .pf-m-inline-end-block-start,
105
- .pf-m-inline-end-block-end
78
+ .pf-m-right-bottom
106
79
  ) {
107
- .#{$tooltip}__arrow {
108
- inset-block-start: 50%;
109
- inset-inline-start: 0;
110
-
111
- @include pf-v5-bidirectional-style(
112
- $prop: transform,
113
- $ltr-val: translateX(var(--#{$tooltip}__arrow--m-right--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-right--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-right--Rotate)),
114
- $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-right--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-right--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-right--Rotate))
115
- );
116
- }
80
+ --#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-right--Top, 50%);
81
+ --#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-right--Left, 0);
82
+ --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-right--TranslateX);
83
+ --#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-right--TranslateY);
84
+ --#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-right--Rotate);
117
85
  }
118
86
 
119
87
  &:is(
120
88
  .pf-m-left-top,
121
- .pf-m-right-top,
122
- .pf-m-inline-start-block-start,
123
- .pf-m-inline-end-block-start
89
+ .pf-m-right-top
124
90
  ) {
125
- .#{$tooltip}__arrow {
126
- inset-block-start: var(--#{$tooltip}__arrow--Height);
127
- }
91
+ --#{$tooltip}__arrow--Top: 0;
92
+ --#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-top--TranslateY);
128
93
  }
129
94
 
130
95
  &:is(
131
96
  .pf-m-left-bottom,
132
- .pf-m-right-bottom,
133
- .pf-m-inline-start-block-end,
134
- .pf-m-inline-end-block-end
97
+ .pf-m-right-bottom
135
98
  ) {
136
- .#{$tooltip}__arrow {
137
- inset-block-start: auto;
138
- inset-block-end: 0;
139
- }
99
+ --#{$tooltip}__arrow--Top: auto;
100
+ --#{$tooltip}__arrow--Bottom: 0;
140
101
  }
141
102
 
142
103
  &:is(
143
104
  .pf-m-top-left,
144
- .pf-m-bottom-left,
145
- .pf-m-block-start-block-start,
146
- .pf-m-block-end-block-start
105
+ .pf-m-bottom-left
147
106
  ) {
148
- .#{$tooltip}__arrow {
149
- inset-inline-start: var(--#{$tooltip}__arrow--Width);
150
- }
107
+ --#{$tooltip}__arrow--Left: 0;
108
+ --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-left--TranslateX);
151
109
  }
152
110
 
153
111
  &:is(
154
112
  .pf-m-top-right,
155
- .pf-m-bottom-right,
156
- .pf-m-block-start-block-end,
157
- .pf-m-block-end-block-end
113
+ .pf-m-bottom-right
158
114
  ) {
159
- .#{$tooltip}__arrow {
160
- inset-inline-start: auto;
161
- inset-inline-end: 0;
162
- }
115
+ --#{$tooltip}__arrow--Right: 0;
116
+ --#{$tooltip}__arrow--Left: auto;
163
117
  }
164
118
  }
165
119
 
@@ -175,18 +129,25 @@
175
129
  word-break: break-word;
176
130
  background-color: var(--#{$tooltip}__content--BackgroundColor);
177
131
 
178
- &:is(.pf-m-text-align-left, .pf-m-text-align-start) {
132
+ &.pf-m-text-align-left {
179
133
  text-align: start;
180
134
  }
181
135
  }
182
136
 
183
137
  .#{$tooltip}__arrow {
184
138
  position: absolute;
139
+ /* stylelint-disable liberty/use-logical-spec */
140
+ top: var(--#{$tooltip}__arrow--Top, auto);
141
+ right: var(--#{$tooltip}__arrow--Right, auto);
142
+ bottom: var(--#{$tooltip}__arrow--Bottom, auto);
143
+ left: var(--#{$tooltip}__arrow--Left, auto);
144
+ /* stylelint-enable */
185
145
  width: var(--#{$tooltip}__arrow--Width);
186
146
  height: var(--#{$tooltip}__arrow--Height);
187
147
  pointer-events: none;
188
148
  background-color: var(--#{$tooltip}__arrow--BackgroundColor);
189
149
  box-shadow: var(--#{$tooltip}__arrow--BoxShadow);
150
+ transform: translateX(var(--#{$tooltip}__arrow--TranslateX, 0)) translateY(var(--#{$tooltip}__arrow--TranslateY, 0)) rotate(var(--#{$tooltip}__arrow--Rotate, 0));
190
151
  }
191
152
 
192
153
  // stylelint-disable no-invalid-position-at-import-rule
package/docs/components/Popover/examples/Popover.md CHANGED
@@ -669,10 +669,10 @@ A popover is used to provide contextual information for another component on cli
669
669
  | `.pf-v5-c-popover__title-text` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<span>` | Creates the popover title text. |
670
670
  | `.pf-v5-c-popover__body` | `<div>` | The popover's body text. **Required** |
671
671
  | `.pf-v5-c-popover__footer` | `<footer>` | Initiates a popover footer. |
672
- | `.pf-m-left{-top/bottom}`, `.pf-m-inline-start{-block-start/block-end}` | `.pf-v5-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
673
- | `.pf-m-right{-top/bottom}`, `.pf-m-inline-end{-block-start/block-end}` | `.pf-v5-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
674
- | `.pf-m-top{-left/right}`, `.pf-m-block-start{-inline-start/inline-end}` | `.pf-v5-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
675
- | `.pf-m-bottom{-left/right}`, `.pf-m-block-end{-inline-start/inline-end}` | `.pf-v5-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
672
+ | `.pf-m-left{-top/bottom}` | `.pf-v5-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
673
+ | `.pf-m-right{-top/bottom}` | `.pf-v5-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
674
+ | `.pf-m-top{-left/right}` | `.pf-v5-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
675
+ | `.pf-m-bottom{-left/right}` | `.pf-v5-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
676
676
  | `.pf-m-no-padding` | `.pf-v5-c-popover` | Removes the outer padding from the popover content. |
677
677
  | `.pf-m-width-auto` | `.pf-v5-c-popover` | Allows popover width to be defined by the popover content. |
678
678
  | `.pf-m-custom` | `.pf-v5-c-popover` | Modifies for the custom alert state. |
package/docs/components/Tooltip/examples/Tooltip.md CHANGED
@@ -135,8 +135,8 @@ A tooltip is used to provide contextual information for another component on hov
135
135
  | `.pf-v5-c-tooltip` | `<div>` | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required**|
136
136
  | `.pf-v5-c-tooltip__arrow` | `<div>` | Creates an arrow pointing towards the element the tooltip describes. **Required** |
137
137
  | `.pf-v5-c-tooltip__content` | `<div>` | Creates the body of the tooltip. **Required** |
138
- | `.pf-m-left{-top/bottom}`, `.pf-m-inline-start{-block-start/block-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
139
- | `.pf-m-right{-top/bottom}`, `.pf-m-inline-end{-block-start/block-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
140
- | `.pf-m-top{-left/right}`, `.pf-m-block-start{-inline-start/inline-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
141
- | `.pf-m-bottom{-left/right}`, `.pf-m-block-start{-inline-start/inline-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
142
- | `.pf-m-text-align-left`, `.pf-m-text-align-start` | `.pf-v5-c-tooltip__content` | Modifies tooltip content to text align left. |
138
+ | `.pf-m-left{-top/bottom}` | `.pf-v5-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
139
+ | `.pf-m-right{-top/bottom}` | `.pf-v5-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
140
+ | `.pf-m-top{-left/right}` | `.pf-v5-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
141
+ | `.pf-m-bottom{-left/right}` | `.pf-v5-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
142
+ | `.pf-m-text-align-left` | `.pf-v5-c-tooltip__content` | Modifies tooltip content to text align left. |
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -1940,8 +1940,14 @@ wrapperTag: div
1940
1940
  type="button"
1941
1941
  aria-label="Expand all rows"
1942
1942
  >
1943
- <span class="pf-v5-c-toolbar__expand-all-icon">
1944
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1943
+ <span class="pf-v5-c-icon">
1944
+ <span
1945
+ class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
1946
+ >
1947
+ <span class="pf-v5-c-toolbar__expand-all-icon">
1948
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1949
+ </span>
1950
+ </span>
1945
1951
  </span>
1946
1952
  </button>
1947
1953
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.1.0-prerelease.30",
4
+ "version": "5.1.0-prerelease.32",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -22502,85 +22502,59 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22502
22502
  }
22503
22503
  .pf-v5-c-popover:is(.pf-m-top,
22504
22504
  .pf-m-top-left,
22505
- .pf-m-top-right,
22506
- .pf-m-block-start,
22507
- .pf-m-block-start-inline-start,
22508
- .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
22509
- inset-block-end: 0;
22510
- inset-inline-start: 50%;
22511
- transform: translateX(var(--pf-v5-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
22512
- }
22513
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
22514
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
22505
+ .pf-m-top-right) {
22506
+ --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover--m-top--Bottom, 0);
22507
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-top--Left, 50%);
22508
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-top--TranslateX);
22509
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
22510
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-top--Rotate);
22515
22511
  }
22516
-
22517
22512
  .pf-v5-c-popover:is(.pf-m-bottom,
22518
22513
  .pf-m-bottom-left,
22519
- .pf-m-bottom-right,
22520
- .pf-m-block-end,
22521
- .pf-m-block-end-inline-start,
22522
- .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22523
- inset-block-start: 0;
22524
- inset-inline-start: 50%;
22525
- transform: translateX(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
22514
+ .pf-m-bottom-right) {
22515
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-bottom--Top, 0);
22516
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-bottom--Left, 50%);
22517
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-bottom--TranslateX);
22518
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-bottom--TranslateY);
22519
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-bottom--Rotate);
22526
22520
  }
22527
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22528
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
22529
- }
22530
-
22531
22521
  .pf-v5-c-popover:is(.pf-m-left,
22532
22522
  .pf-m-left-top,
22533
- .pf-m-left-bottom,
22534
- .pf-m-inline-start,
22535
- .pf-m-inline-start-block-start,
22536
- .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
22537
- inset-block-start: 50%;
22538
- inset-inline-end: 0;
22539
- transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
22540
- }
22541
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
22542
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
22523
+ .pf-m-left-bottom) {
22524
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-left--Top, 50%);
22525
+ --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover--m-left--Right, 0);
22526
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
22527
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-left--TranslateY);
22528
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-left--Rotate);
22543
22529
  }
22544
-
22545
22530
  .pf-v5-c-popover:is(.pf-m-right,
22546
22531
  .pf-m-right-top,
22547
- .pf-m-right-bottom,
22548
- .pf-m-inline-end,
22549
- .pf-m-inline-end-block-start,
22550
- .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22551
- inset-block-start: 50%;
22552
- inset-inline-start: 0;
22553
- transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
22532
+ .pf-m-right-bottom) {
22533
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-right--Top, 50%);
22534
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-right--Left, 0);
22535
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-right--TranslateX);
22536
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-right--TranslateY);
22537
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-right--Rotate);
22554
22538
  }
22555
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22556
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
22557
- }
22558
-
22559
22539
  .pf-v5-c-popover:is(.pf-m-left-top,
22560
- .pf-m-right-top,
22561
- .pf-m-inline-start-block-start,
22562
- .pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
22563
- inset-block-start: var(--pf-v5-c-popover__arrow--Height);
22540
+ .pf-m-right-top) {
22541
+ --pf-v5-c-popover__arrow--Top: 0;
22542
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
22564
22543
  }
22565
22544
  .pf-v5-c-popover:is(.pf-m-left-bottom,
22566
- .pf-m-right-bottom,
22567
- .pf-m-inline-start-block-end,
22568
- .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22569
- inset-block-start: auto;
22570
- inset-block-end: 0;
22545
+ .pf-m-right-bottom) {
22546
+ --pf-v5-c-popover__arrow--Top: auto;
22547
+ --pf-v5-c-popover__arrow--Bottom: 0;
22571
22548
  }
22572
22549
  .pf-v5-c-popover:is(.pf-m-top-left,
22573
- .pf-m-bottom-left,
22574
- .pf-m-block-start-inline-start,
22575
- .pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
22576
- inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
22550
+ .pf-m-bottom-left) {
22551
+ --pf-v5-c-popover__arrow--Left: 0;
22552
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
22577
22553
  }
22578
22554
  .pf-v5-c-popover:is(.pf-m-top-right,
22579
- .pf-m-bottom-right,
22580
- .pf-m-block-start-inline-end,
22581
- .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22582
- inset-inline-start: auto;
22583
- inset-inline-end: 0;
22555
+ .pf-m-bottom-right) {
22556
+ --pf-v5-c-popover__arrow--Right: 0;
22557
+ --pf-v5-c-popover__arrow--Left: auto;
22584
22558
  }
22585
22559
  .pf-v5-c-popover.pf-m-danger {
22586
22560
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
@@ -22623,11 +22597,18 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22623
22597
 
22624
22598
  .pf-v5-c-popover__arrow {
22625
22599
  position: absolute;
22600
+ /* stylelint-disable liberty/use-logical-spec */
22601
+ top: var(--pf-v5-c-popover__arrow--Top, auto);
22602
+ right: var(--pf-v5-c-popover__arrow--Right, auto);
22603
+ bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
22604
+ left: var(--pf-v5-c-popover__arrow--Left, auto);
22605
+ /* stylelint-enable */
22626
22606
  width: var(--pf-v5-c-popover__arrow--Width);
22627
22607
  height: var(--pf-v5-c-popover__arrow--Height);
22628
22608
  pointer-events: none;
22629
22609
  background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
22630
22610
  box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
22611
+ transform: translateX(var(--pf-v5-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-popover__arrow--Rotate, 0));
22631
22612
  }
22632
22613
 
22633
22614
  .pf-v5-c-popover__header {
@@ -30266,85 +30247,59 @@ svg.pf-v5-c-spinner.pf-m-xl {
30266
30247
  }
30267
30248
  .pf-v5-c-tooltip:is(.pf-m-top,
30268
30249
  .pf-m-top-left,
30269
- .pf-m-top-right,
30270
- .pf-m-block-start,
30271
- .pf-m-block-start-inline-start,
30272
- .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
30273
- inset-block-end: 0;
30274
- inset-inline-start: 50%;
30275
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
30276
- }
30277
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
30278
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
30250
+ .pf-m-top-right) {
30251
+ --pf-v5-c-tooltip__arrow--Bottom: var(--pf-v5-c-tooltip--m-top--Bottom, 0);
30252
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-top--Left, 50%);
30253
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-top--TranslateX);
30254
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
30255
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-top--Rotate);
30279
30256
  }
30280
-
30281
30257
  .pf-v5-c-tooltip:is(.pf-m-bottom,
30282
30258
  .pf-m-bottom-left,
30283
- .pf-m-bottom-right,
30284
- .pf-m-block-end,
30285
- .pf-m-block-end-inline-start,
30286
- .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
30287
- inset-block-start: 0;
30288
- inset-inline-start: 50%;
30289
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
30259
+ .pf-m-bottom-right) {
30260
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-bottom--Top, 0);
30261
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-bottom--Left, 50%);
30262
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX);
30263
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY);
30264
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate);
30290
30265
  }
30291
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
30292
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
30293
- }
30294
-
30295
30266
  .pf-v5-c-tooltip:is(.pf-m-left,
30296
30267
  .pf-m-left-top,
30297
- .pf-m-left-bottom,
30298
- .pf-m-inline-start,
30299
- .pf-m-inline-start-block-start,
30300
- .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
30301
- inset-block-start: 50%;
30302
- inset-inline-end: 0;
30303
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
30304
- }
30305
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
30306
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
30268
+ .pf-m-left-bottom) {
30269
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-left--Top, 50%);
30270
+ --pf-v5-c-tooltip__arrow--Right: var(--pf-v5-c-tooltip--m-left--Right, 0);
30271
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
30272
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-left--TranslateY);
30273
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-left--Rotate);
30307
30274
  }
30308
-
30309
30275
  .pf-v5-c-tooltip:is(.pf-m-right,
30310
30276
  .pf-m-right-top,
30311
- .pf-m-right-bottom,
30312
- .pf-m-inline-end,
30313
- .pf-m-inline-end-block-start,
30314
- .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30315
- inset-block-start: 50%;
30316
- inset-inline-start: 0;
30317
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
30277
+ .pf-m-right-bottom) {
30278
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-right--Top, 50%);
30279
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-right--Left, 0);
30280
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-right--TranslateX);
30281
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-right--TranslateY);
30282
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-right--Rotate);
30318
30283
  }
30319
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30320
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
30321
- }
30322
-
30323
30284
  .pf-v5-c-tooltip:is(.pf-m-left-top,
30324
- .pf-m-right-top,
30325
- .pf-m-inline-start-block-start,
30326
- .pf-m-inline-end-block-start) .pf-v5-c-tooltip__arrow {
30327
- inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
30285
+ .pf-m-right-top) {
30286
+ --pf-v5-c-tooltip__arrow--Top: 0;
30287
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
30328
30288
  }
30329
30289
  .pf-v5-c-tooltip:is(.pf-m-left-bottom,
30330
- .pf-m-right-bottom,
30331
- .pf-m-inline-start-block-end,
30332
- .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30333
- inset-block-start: auto;
30334
- inset-block-end: 0;
30290
+ .pf-m-right-bottom) {
30291
+ --pf-v5-c-tooltip__arrow--Top: auto;
30292
+ --pf-v5-c-tooltip__arrow--Bottom: 0;
30335
30293
  }
30336
30294
  .pf-v5-c-tooltip:is(.pf-m-top-left,
30337
- .pf-m-bottom-left,
30338
- .pf-m-block-start-block-start,
30339
- .pf-m-block-end-block-start) .pf-v5-c-tooltip__arrow {
30340
- inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
30295
+ .pf-m-bottom-left) {
30296
+ --pf-v5-c-tooltip__arrow--Left: 0;
30297
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
30341
30298
  }
30342
30299
  .pf-v5-c-tooltip:is(.pf-m-top-right,
30343
- .pf-m-bottom-right,
30344
- .pf-m-block-start-block-end,
30345
- .pf-m-block-end-block-end) .pf-v5-c-tooltip__arrow {
30346
- inset-inline-start: auto;
30347
- inset-inline-end: 0;
30300
+ .pf-m-bottom-right) {
30301
+ --pf-v5-c-tooltip__arrow--Right: 0;
30302
+ --pf-v5-c-tooltip__arrow--Left: auto;
30348
30303
  }
30349
30304
 
30350
30305
  .pf-v5-c-tooltip__content {
@@ -30359,17 +30314,24 @@ svg.pf-v5-c-spinner.pf-m-xl {
30359
30314
  word-break: break-word;
30360
30315
  background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
30361
30316
  }
30362
- .pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
30317
+ .pf-v5-c-tooltip__content.pf-m-text-align-left {
30363
30318
  text-align: start;
30364
30319
  }
30365
30320
 
30366
30321
  .pf-v5-c-tooltip__arrow {
30367
30322
  position: absolute;
30323
+ /* stylelint-disable liberty/use-logical-spec */
30324
+ top: var(--pf-v5-c-tooltip__arrow--Top, auto);
30325
+ right: var(--pf-v5-c-tooltip__arrow--Right, auto);
30326
+ bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
30327
+ left: var(--pf-v5-c-tooltip__arrow--Left, auto);
30328
+ /* stylelint-enable */
30368
30329
  width: var(--pf-v5-c-tooltip__arrow--Width);
30369
30330
  height: var(--pf-v5-c-tooltip__arrow--Height);
30370
30331
  pointer-events: none;
30371
30332
  background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
30372
30333
  box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
30334
+ transform: translateX(var(--pf-v5-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-tooltip__arrow--Rotate, 0));
30373
30335
  }
30374
30336
 
30375
30337
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,