@patternfly/patternfly 6.0.0-alpha.71 → 6.0.0-alpha.73

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.
@@ -60,7 +60,9 @@
60
60
  width: 100%;
61
61
  height: var(--pf-v5-c-divider--Size);
62
62
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
63
+ flex-shrink: 0;
63
64
  align-items: stretch;
65
+ align-self: stretch;
64
66
  justify-content: center;
65
67
  border: 0;
66
68
  }
@@ -77,7 +79,7 @@
77
79
  .pf-v5-c-divider.pf-m-vertical {
78
80
  flex-direction: column;
79
81
  width: var(--pf-v5-c-divider--Size);
80
- height: 100%;
82
+ height: inherit;
81
83
  }
82
84
  .pf-v5-c-divider.pf-m-inset-none {
83
85
  --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
@@ -115,7 +117,7 @@
115
117
  .pf-v5-c-divider.pf-m-vertical-on-sm {
116
118
  flex-direction: column;
117
119
  width: var(--pf-v5-c-divider--Size);
118
- height: 100%;
120
+ height: inherit;
119
121
  }
120
122
  }
121
123
  @media (min-width: 576px) {
@@ -155,7 +157,7 @@
155
157
  .pf-v5-c-divider.pf-m-vertical-on-md {
156
158
  flex-direction: column;
157
159
  width: var(--pf-v5-c-divider--Size);
158
- height: 100%;
160
+ height: inherit;
159
161
  }
160
162
  }
161
163
  @media (min-width: 768px) {
@@ -195,7 +197,7 @@
195
197
  .pf-v5-c-divider.pf-m-vertical-on-lg {
196
198
  flex-direction: column;
197
199
  width: var(--pf-v5-c-divider--Size);
198
- height: 100%;
200
+ height: inherit;
199
201
  }
200
202
  }
201
203
  @media (min-width: 992px) {
@@ -235,7 +237,7 @@
235
237
  .pf-v5-c-divider.pf-m-vertical-on-xl {
236
238
  flex-direction: column;
237
239
  width: var(--pf-v5-c-divider--Size);
238
- height: 100%;
240
+ height: inherit;
239
241
  }
240
242
  }
241
243
  @media (min-width: 1200px) {
@@ -275,7 +277,7 @@
275
277
  .pf-v5-c-divider.pf-m-vertical-on-2xl {
276
278
  flex-direction: column;
277
279
  width: var(--pf-v5-c-divider--Size);
278
- height: 100%;
280
+ height: inherit;
279
281
  }
280
282
  }
281
283
  @media (min-width: 1450px) {
@@ -13,7 +13,7 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
13
13
  @mixin pf-v5-c-divider--m-vertical {
14
14
  flex-direction: column;
15
15
  width: var(--#{$divider}--Size); // apply size to width in vertical orientation
16
- height: 100%;
16
+ height: inherit;
17
17
  }
18
18
 
19
19
  :root,
@@ -32,7 +32,9 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
32
32
  @include pf-v5-c-divider--m-horizontal; // default, set to orientation to horizontal
33
33
  @include pf-v5-hidden-visible(var(--#{$divider}--Display));
34
34
 
35
+ flex-shrink: 0;
35
36
  align-items: stretch;
37
+ align-self: stretch;
36
38
  justify-content: center;
37
39
  border: 0; // removes the default border styling on an hr
38
40
 
@@ -133,6 +133,7 @@
133
133
  --pf-v5-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
134
134
  --pf-v5-c-label--m-clickable--hover--BorderWidth: 0;
135
135
  --pf-v5-c-label--m-clickable--hover--BorderColor: transparent;
136
+ --pf-v5-c-label--m-clickable__content--Cursor: pointer;
136
137
  --pf-v5-c-label--m-filled__actions--c-button--Color: var(--pf-v5-c-label__icon--Color);
137
138
  --pf-v5-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--button--default);
138
139
  --pf-v5-c-label--m-outline--BackgroundColor: transparent;
@@ -163,6 +164,7 @@
163
164
  --pf-v5-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
164
165
  --pf-v5-c-label__content--MaxWidth: 100%;
165
166
  --pf-v5-c-label__content--Gap: var(--pf-t--global--spacer--xs);
167
+ --pf-v5-c-label__content--Cursor: initial;
166
168
  --pf-v5-c-label__icon--FontSize: var(--pf-t--global--icon--size--body--sm);
167
169
  --pf-v5-c-label__text--MaxWidth: 100%;
168
170
  --pf-v5-c-label__actions--MarginRight: calc(var(--pf-v5-c-label__actions--c-button--PaddingRight) * -1);
@@ -180,9 +182,11 @@
180
182
  --pf-v5-c-label--m-editable--TextDecorationOffset: 0.25rem;
181
183
  --pf-v5-c-label--m-editable--TextDecorationColor: currentcolor;
182
184
  --pf-v5-c-label--m-editable__content--MaxWidth: 16ch;
185
+ --pf-v5-c-label--m-editable__content--Cursor: pointer;
183
186
  --pf-v5-c-label--m-editable--m-editable-active--TextDecoration: none;
184
187
  --pf-v5-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
185
188
  --pf-v5-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
189
+ --pf-v5-c-label--m-editable--m-editable-active__content--Cursor: initial;
186
190
  }
187
191
 
188
192
  .pf-v5-c-label {
@@ -364,6 +368,7 @@
364
368
  }
365
369
  .pf-v5-c-label.pf-m-editable {
366
370
  --pf-v5-c-label__content--MaxWidth: var(--pf-v5-c-label--m-editable__content--MaxWidth);
371
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable__content--Cursor);
367
372
  }
368
373
  .pf-v5-c-label.pf-m-editable .pf-v5-c-label__text {
369
374
  text-decoration: var(--pf-v5-c-label--m-editable--TextDecoration);
@@ -376,6 +381,7 @@
376
381
  --pf-v5-c-label--m-editable--TextDecoration: var(--pf-v5-c-label--m-editable--m-editable-active--TextDecoration);
377
382
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-editable--m-editable-active--BackgroundColor);
378
383
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-editable--m-editable-active--Color);
384
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable--m-editable-active__content--Cursor);
379
385
  }
380
386
  .pf-v5-c-label.pf-m-overflow {
381
387
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-overflow--Color);
@@ -398,11 +404,8 @@
398
404
  --pf-v5-c-label--m-add--BorderColor: var(--pf-v5-c-label--m-add--hover--BorderColor);
399
405
  --pf-v5-c-label--m-add--BorderWidth: var(--pf-v5-c-label--m-add--hover--BorderWidth);
400
406
  }
401
- .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-editable .pf-v5-c-label__content {
402
- padding: 0;
403
- cursor: pointer;
404
- background-color: transparent;
405
- border: none;
407
+ .pf-v5-c-label.pf-m-clickable {
408
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-clickable__content--Cursor);
406
409
  }
407
410
  .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content:is(:hover, :focus) {
408
411
  text-decoration: none;
@@ -436,8 +439,11 @@
436
439
  .pf-v5-c-label__content {
437
440
  gap: var(--pf-v5-c-label__content--Gap);
438
441
  max-width: var(--pf-v5-c-label__content--MaxWidth);
442
+ padding: 0;
439
443
  overflow: hidden;
440
444
  color: var(--pf-v5-c-label--Color);
445
+ cursor: var(--pf-v5-c-label__content--Cursor, revert);
446
+ background: transparent;
441
447
  border-width: 0;
442
448
  }
443
449
  .pf-v5-c-label__content::before {
@@ -166,6 +166,7 @@
166
166
  // Clickable
167
167
  --#{$label}--m-clickable--hover--BorderWidth: 0;
168
168
  --#{$label}--m-clickable--hover--BorderColor: transparent;
169
+ --#{$label}--m-clickable__content--Cursor: pointer;
169
170
 
170
171
  // Filled
171
172
  --#{$label}--m-filled__actions--c-button--Color: var(--#{$label}__icon--Color);
@@ -208,6 +209,7 @@
208
209
  // Content
209
210
  --#{$label}__content--MaxWidth: 100%;
210
211
  --#{$label}__content--Gap: var(--pf-t--global--spacer--xs);
212
+ --#{$label}__content--Cursor: initial;
211
213
 
212
214
  // Icon
213
215
  --#{$label}__icon--FontSize: var(--pf-t--global--icon--size--body--sm);
@@ -235,11 +237,13 @@
235
237
  --#{$label}--m-editable--TextDecorationOffset: #{pf-size-prem(4px)};
236
238
  --#{$label}--m-editable--TextDecorationColor: currentcolor;
237
239
  --#{$label}--m-editable__content--MaxWidth: 16ch;
240
+ --#{$label}--m-editable__content--Cursor: pointer;
238
241
 
239
242
  // Editable active
240
243
  --#{$label}--m-editable--m-editable-active--TextDecoration: none;
241
244
  --#{$label}--m-editable--m-editable-active--BackgroundColor: transparent;
242
- --#{$label}--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);;
245
+ --#{$label}--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
246
+ --#{$label}--m-editable--m-editable-active__content--Cursor: initial;
243
247
  }
244
248
 
245
249
  .#{$label} {
@@ -439,6 +443,7 @@
439
443
 
440
444
  &.pf-m-editable {
441
445
  --#{$label}__content--MaxWidth: var(--#{$label}--m-editable__content--MaxWidth);
446
+ --#{$label}__content--Cursor: var(--#{$label}--m-editable__content--Cursor);
442
447
 
443
448
  .#{$label}__text {
444
449
  text-decoration: var(--#{$label}--m-editable--TextDecoration);
@@ -453,6 +458,7 @@
453
458
  --#{$label}--m-editable--TextDecoration: var(--#{$label}--m-editable--m-editable-active--TextDecoration);
454
459
  --#{$label}--BackgroundColor: var(--#{$label}--m-editable--m-editable-active--BackgroundColor);
455
460
  --#{$label}--Color: var(--#{$label}--m-editable--m-editable-active--Color);
461
+ --#{$label}__content--Cursor: var(--#{$label}--m-editable--m-editable-active__content--Cursor);
456
462
  }
457
463
 
458
464
  &.pf-m-overflow {
@@ -481,17 +487,9 @@
481
487
  }
482
488
  }
483
489
 
484
- &.pf-m-clickable,
485
- &.pf-m-editable {
486
- .#{$label}__content {
487
- padding: 0;
488
- cursor: pointer;
489
- background-color: transparent;
490
- border: none;
491
- }
492
- }
493
-
494
490
  &.pf-m-clickable {
491
+ --#{$label}__content--Cursor: var(--#{$label}--m-clickable__content--Cursor);
492
+
495
493
  .#{$label}__content {
496
494
  &,
497
495
  &:is(:hover, :focus) {
@@ -530,8 +528,11 @@
530
528
  .#{$label}__content {
531
529
  gap: var(--#{$label}__content--Gap);
532
530
  max-width: var(--#{$label}__content--MaxWidth);
531
+ padding: 0;
533
532
  overflow: hidden;
534
533
  color: var(--#{$label}--Color);
534
+ cursor: var(--#{$label}__content--Cursor, revert);
535
+ background: transparent;
535
536
  border-width: 0;
536
537
 
537
538
  &::before {
@@ -91,6 +91,32 @@ cssPrefix: pf-v5-c-divider
91
91
 
92
92
  ```
93
93
 
94
+ ### In flex layout
95
+
96
+ ```html
97
+ <strong>Horizontal</strong>
98
+ <br />
99
+ <br />
100
+ <div class="pf-v5-l-flex">
101
+ <div class="pf-v5-l-flex__item">item 1</div>
102
+
103
+ <div class="pf-v5-c-divider pf-m-vertical" role="separator"></div>
104
+ <div class="pf-v5-l-flex__item">item 1</div>
105
+ </div>
106
+ <br />
107
+ <br />
108
+ <strong>Vertical</strong>
109
+ <br />
110
+ <br />
111
+ <div class="pf-v5-l-flex pf-m-column">
112
+ <div class="pf-v5-l-flex__item">item 1</div>
113
+
114
+ <div class="pf-v5-c-divider" role="separator"></div>
115
+ <div class="pf-v5-l-flex__item">item 1</div>
116
+ </div>
117
+
118
+ ```
119
+
94
120
  ## Documentation
95
121
 
96
122
  ### Overview
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": "6.0.0-alpha.71",
4
+ "version": "6.0.0-alpha.73",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -14354,7 +14354,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14354
14354
  width: 100%;
14355
14355
  height: var(--pf-v5-c-divider--Size);
14356
14356
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
14357
+ flex-shrink: 0;
14357
14358
  align-items: stretch;
14359
+ align-self: stretch;
14358
14360
  justify-content: center;
14359
14361
  border: 0;
14360
14362
  }
@@ -14371,7 +14373,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14371
14373
  .pf-v5-c-divider.pf-m-vertical {
14372
14374
  flex-direction: column;
14373
14375
  width: var(--pf-v5-c-divider--Size);
14374
- height: 100%;
14376
+ height: inherit;
14375
14377
  }
14376
14378
  .pf-v5-c-divider.pf-m-inset-none {
14377
14379
  --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
@@ -14409,7 +14411,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14409
14411
  .pf-v5-c-divider.pf-m-vertical-on-sm {
14410
14412
  flex-direction: column;
14411
14413
  width: var(--pf-v5-c-divider--Size);
14412
- height: 100%;
14414
+ height: inherit;
14413
14415
  }
14414
14416
  }
14415
14417
  @media (min-width: 576px) {
@@ -14449,7 +14451,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14449
14451
  .pf-v5-c-divider.pf-m-vertical-on-md {
14450
14452
  flex-direction: column;
14451
14453
  width: var(--pf-v5-c-divider--Size);
14452
- height: 100%;
14454
+ height: inherit;
14453
14455
  }
14454
14456
  }
14455
14457
  @media (min-width: 768px) {
@@ -14489,7 +14491,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14489
14491
  .pf-v5-c-divider.pf-m-vertical-on-lg {
14490
14492
  flex-direction: column;
14491
14493
  width: var(--pf-v5-c-divider--Size);
14492
- height: 100%;
14494
+ height: inherit;
14493
14495
  }
14494
14496
  }
14495
14497
  @media (min-width: 992px) {
@@ -14529,7 +14531,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14529
14531
  .pf-v5-c-divider.pf-m-vertical-on-xl {
14530
14532
  flex-direction: column;
14531
14533
  width: var(--pf-v5-c-divider--Size);
14532
- height: 100%;
14534
+ height: inherit;
14533
14535
  }
14534
14536
  }
14535
14537
  @media (min-width: 1200px) {
@@ -14569,7 +14571,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14569
14571
  .pf-v5-c-divider.pf-m-vertical-on-2xl {
14570
14572
  flex-direction: column;
14571
14573
  width: var(--pf-v5-c-divider--Size);
14572
- height: 100%;
14574
+ height: inherit;
14573
14575
  }
14574
14576
  }
14575
14577
  @media (min-width: 1450px) {
@@ -18275,6 +18277,7 @@ label.pf-v5-c-input-group__text {
18275
18277
  --pf-v5-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
18276
18278
  --pf-v5-c-label--m-clickable--hover--BorderWidth: 0;
18277
18279
  --pf-v5-c-label--m-clickable--hover--BorderColor: transparent;
18280
+ --pf-v5-c-label--m-clickable__content--Cursor: pointer;
18278
18281
  --pf-v5-c-label--m-filled__actions--c-button--Color: var(--pf-v5-c-label__icon--Color);
18279
18282
  --pf-v5-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--button--default);
18280
18283
  --pf-v5-c-label--m-outline--BackgroundColor: transparent;
@@ -18305,6 +18308,7 @@ label.pf-v5-c-input-group__text {
18305
18308
  --pf-v5-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
18306
18309
  --pf-v5-c-label__content--MaxWidth: 100%;
18307
18310
  --pf-v5-c-label__content--Gap: var(--pf-t--global--spacer--xs);
18311
+ --pf-v5-c-label__content--Cursor: initial;
18308
18312
  --pf-v5-c-label__icon--FontSize: var(--pf-t--global--icon--size--body--sm);
18309
18313
  --pf-v5-c-label__text--MaxWidth: 100%;
18310
18314
  --pf-v5-c-label__actions--MarginRight: calc(var(--pf-v5-c-label__actions--c-button--PaddingRight) * -1);
@@ -18322,9 +18326,11 @@ label.pf-v5-c-input-group__text {
18322
18326
  --pf-v5-c-label--m-editable--TextDecorationOffset: 0.25rem;
18323
18327
  --pf-v5-c-label--m-editable--TextDecorationColor: currentcolor;
18324
18328
  --pf-v5-c-label--m-editable__content--MaxWidth: 16ch;
18329
+ --pf-v5-c-label--m-editable__content--Cursor: pointer;
18325
18330
  --pf-v5-c-label--m-editable--m-editable-active--TextDecoration: none;
18326
18331
  --pf-v5-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
18327
18332
  --pf-v5-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
18333
+ --pf-v5-c-label--m-editable--m-editable-active__content--Cursor: initial;
18328
18334
  }
18329
18335
 
18330
18336
  .pf-v5-c-label {
@@ -18506,6 +18512,7 @@ label.pf-v5-c-input-group__text {
18506
18512
  }
18507
18513
  .pf-v5-c-label.pf-m-editable {
18508
18514
  --pf-v5-c-label__content--MaxWidth: var(--pf-v5-c-label--m-editable__content--MaxWidth);
18515
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable__content--Cursor);
18509
18516
  }
18510
18517
  .pf-v5-c-label.pf-m-editable .pf-v5-c-label__text {
18511
18518
  text-decoration: var(--pf-v5-c-label--m-editable--TextDecoration);
@@ -18518,6 +18525,7 @@ label.pf-v5-c-input-group__text {
18518
18525
  --pf-v5-c-label--m-editable--TextDecoration: var(--pf-v5-c-label--m-editable--m-editable-active--TextDecoration);
18519
18526
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-editable--m-editable-active--BackgroundColor);
18520
18527
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-editable--m-editable-active--Color);
18528
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable--m-editable-active__content--Cursor);
18521
18529
  }
18522
18530
  .pf-v5-c-label.pf-m-overflow {
18523
18531
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-overflow--Color);
@@ -18540,11 +18548,8 @@ label.pf-v5-c-input-group__text {
18540
18548
  --pf-v5-c-label--m-add--BorderColor: var(--pf-v5-c-label--m-add--hover--BorderColor);
18541
18549
  --pf-v5-c-label--m-add--BorderWidth: var(--pf-v5-c-label--m-add--hover--BorderWidth);
18542
18550
  }
18543
- .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-editable .pf-v5-c-label__content {
18544
- padding: 0;
18545
- cursor: pointer;
18546
- background-color: transparent;
18547
- border: none;
18551
+ .pf-v5-c-label.pf-m-clickable {
18552
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-clickable__content--Cursor);
18548
18553
  }
18549
18554
  .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content:is(:hover, :focus) {
18550
18555
  text-decoration: none;
@@ -18578,8 +18583,11 @@ label.pf-v5-c-input-group__text {
18578
18583
  .pf-v5-c-label__content {
18579
18584
  gap: var(--pf-v5-c-label__content--Gap);
18580
18585
  max-width: var(--pf-v5-c-label__content--MaxWidth);
18586
+ padding: 0;
18581
18587
  overflow: hidden;
18582
18588
  color: var(--pf-v5-c-label--Color);
18589
+ cursor: var(--pf-v5-c-label__content--Cursor, revert);
18590
+ background: transparent;
18583
18591
  border-width: 0;
18584
18592
  }
18585
18593
  .pf-v5-c-label__content::before {
@@ -14471,7 +14471,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14471
14471
  width: 100%;
14472
14472
  height: var(--pf-v5-c-divider--Size);
14473
14473
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
14474
+ flex-shrink: 0;
14474
14475
  align-items: stretch;
14476
+ align-self: stretch;
14475
14477
  justify-content: center;
14476
14478
  border: 0;
14477
14479
  }
@@ -14488,7 +14490,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14488
14490
  .pf-v5-c-divider.pf-m-vertical {
14489
14491
  flex-direction: column;
14490
14492
  width: var(--pf-v5-c-divider--Size);
14491
- height: 100%;
14493
+ height: inherit;
14492
14494
  }
14493
14495
  .pf-v5-c-divider.pf-m-inset-none {
14494
14496
  --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
@@ -14526,7 +14528,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14526
14528
  .pf-v5-c-divider.pf-m-vertical-on-sm {
14527
14529
  flex-direction: column;
14528
14530
  width: var(--pf-v5-c-divider--Size);
14529
- height: 100%;
14531
+ height: inherit;
14530
14532
  }
14531
14533
  }
14532
14534
  @media (min-width: 576px) {
@@ -14566,7 +14568,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14566
14568
  .pf-v5-c-divider.pf-m-vertical-on-md {
14567
14569
  flex-direction: column;
14568
14570
  width: var(--pf-v5-c-divider--Size);
14569
- height: 100%;
14571
+ height: inherit;
14570
14572
  }
14571
14573
  }
14572
14574
  @media (min-width: 768px) {
@@ -14606,7 +14608,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14606
14608
  .pf-v5-c-divider.pf-m-vertical-on-lg {
14607
14609
  flex-direction: column;
14608
14610
  width: var(--pf-v5-c-divider--Size);
14609
- height: 100%;
14611
+ height: inherit;
14610
14612
  }
14611
14613
  }
14612
14614
  @media (min-width: 992px) {
@@ -14646,7 +14648,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14646
14648
  .pf-v5-c-divider.pf-m-vertical-on-xl {
14647
14649
  flex-direction: column;
14648
14650
  width: var(--pf-v5-c-divider--Size);
14649
- height: 100%;
14651
+ height: inherit;
14650
14652
  }
14651
14653
  }
14652
14654
  @media (min-width: 1200px) {
@@ -14686,7 +14688,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14686
14688
  .pf-v5-c-divider.pf-m-vertical-on-2xl {
14687
14689
  flex-direction: column;
14688
14690
  width: var(--pf-v5-c-divider--Size);
14689
- height: 100%;
14691
+ height: inherit;
14690
14692
  }
14691
14693
  }
14692
14694
  @media (min-width: 1450px) {
@@ -18392,6 +18394,7 @@ label.pf-v5-c-input-group__text {
18392
18394
  --pf-v5-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
18393
18395
  --pf-v5-c-label--m-clickable--hover--BorderWidth: 0;
18394
18396
  --pf-v5-c-label--m-clickable--hover--BorderColor: transparent;
18397
+ --pf-v5-c-label--m-clickable__content--Cursor: pointer;
18395
18398
  --pf-v5-c-label--m-filled__actions--c-button--Color: var(--pf-v5-c-label__icon--Color);
18396
18399
  --pf-v5-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--button--default);
18397
18400
  --pf-v5-c-label--m-outline--BackgroundColor: transparent;
@@ -18422,6 +18425,7 @@ label.pf-v5-c-input-group__text {
18422
18425
  --pf-v5-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
18423
18426
  --pf-v5-c-label__content--MaxWidth: 100%;
18424
18427
  --pf-v5-c-label__content--Gap: var(--pf-t--global--spacer--xs);
18428
+ --pf-v5-c-label__content--Cursor: initial;
18425
18429
  --pf-v5-c-label__icon--FontSize: var(--pf-t--global--icon--size--body--sm);
18426
18430
  --pf-v5-c-label__text--MaxWidth: 100%;
18427
18431
  --pf-v5-c-label__actions--MarginRight: calc(var(--pf-v5-c-label__actions--c-button--PaddingRight) * -1);
@@ -18439,9 +18443,11 @@ label.pf-v5-c-input-group__text {
18439
18443
  --pf-v5-c-label--m-editable--TextDecorationOffset: 0.25rem;
18440
18444
  --pf-v5-c-label--m-editable--TextDecorationColor: currentcolor;
18441
18445
  --pf-v5-c-label--m-editable__content--MaxWidth: 16ch;
18446
+ --pf-v5-c-label--m-editable__content--Cursor: pointer;
18442
18447
  --pf-v5-c-label--m-editable--m-editable-active--TextDecoration: none;
18443
18448
  --pf-v5-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
18444
18449
  --pf-v5-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
18450
+ --pf-v5-c-label--m-editable--m-editable-active__content--Cursor: initial;
18445
18451
  }
18446
18452
 
18447
18453
  .pf-v5-c-label {
@@ -18623,6 +18629,7 @@ label.pf-v5-c-input-group__text {
18623
18629
  }
18624
18630
  .pf-v5-c-label.pf-m-editable {
18625
18631
  --pf-v5-c-label__content--MaxWidth: var(--pf-v5-c-label--m-editable__content--MaxWidth);
18632
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable__content--Cursor);
18626
18633
  }
18627
18634
  .pf-v5-c-label.pf-m-editable .pf-v5-c-label__text {
18628
18635
  text-decoration: var(--pf-v5-c-label--m-editable--TextDecoration);
@@ -18635,6 +18642,7 @@ label.pf-v5-c-input-group__text {
18635
18642
  --pf-v5-c-label--m-editable--TextDecoration: var(--pf-v5-c-label--m-editable--m-editable-active--TextDecoration);
18636
18643
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-editable--m-editable-active--BackgroundColor);
18637
18644
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-editable--m-editable-active--Color);
18645
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable--m-editable-active__content--Cursor);
18638
18646
  }
18639
18647
  .pf-v5-c-label.pf-m-overflow {
18640
18648
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-overflow--Color);
@@ -18657,11 +18665,8 @@ label.pf-v5-c-input-group__text {
18657
18665
  --pf-v5-c-label--m-add--BorderColor: var(--pf-v5-c-label--m-add--hover--BorderColor);
18658
18666
  --pf-v5-c-label--m-add--BorderWidth: var(--pf-v5-c-label--m-add--hover--BorderWidth);
18659
18667
  }
18660
- .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-editable .pf-v5-c-label__content {
18661
- padding: 0;
18662
- cursor: pointer;
18663
- background-color: transparent;
18664
- border: none;
18668
+ .pf-v5-c-label.pf-m-clickable {
18669
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-clickable__content--Cursor);
18665
18670
  }
18666
18671
  .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content:is(:hover, :focus) {
18667
18672
  text-decoration: none;
@@ -18695,8 +18700,11 @@ label.pf-v5-c-input-group__text {
18695
18700
  .pf-v5-c-label__content {
18696
18701
  gap: var(--pf-v5-c-label__content--Gap);
18697
18702
  max-width: var(--pf-v5-c-label__content--MaxWidth);
18703
+ padding: 0;
18698
18704
  overflow: hidden;
18699
18705
  color: var(--pf-v5-c-label--Color);
18706
+ cursor: var(--pf-v5-c-label__content--Cursor, revert);
18707
+ background: transparent;
18700
18708
  border-width: 0;
18701
18709
  }
18702
18710
  .pf-v5-c-label__content::before {
package/patternfly.css CHANGED
@@ -14471,7 +14471,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14471
14471
  width: 100%;
14472
14472
  height: var(--pf-v5-c-divider--Size);
14473
14473
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
14474
+ flex-shrink: 0;
14474
14475
  align-items: stretch;
14476
+ align-self: stretch;
14475
14477
  justify-content: center;
14476
14478
  border: 0;
14477
14479
  }
@@ -14488,7 +14490,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14488
14490
  .pf-v5-c-divider.pf-m-vertical {
14489
14491
  flex-direction: column;
14490
14492
  width: var(--pf-v5-c-divider--Size);
14491
- height: 100%;
14493
+ height: inherit;
14492
14494
  }
14493
14495
  .pf-v5-c-divider.pf-m-inset-none {
14494
14496
  --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
@@ -14526,7 +14528,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14526
14528
  .pf-v5-c-divider.pf-m-vertical-on-sm {
14527
14529
  flex-direction: column;
14528
14530
  width: var(--pf-v5-c-divider--Size);
14529
- height: 100%;
14531
+ height: inherit;
14530
14532
  }
14531
14533
  }
14532
14534
  @media (min-width: 576px) {
@@ -14566,7 +14568,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14566
14568
  .pf-v5-c-divider.pf-m-vertical-on-md {
14567
14569
  flex-direction: column;
14568
14570
  width: var(--pf-v5-c-divider--Size);
14569
- height: 100%;
14571
+ height: inherit;
14570
14572
  }
14571
14573
  }
14572
14574
  @media (min-width: 768px) {
@@ -14606,7 +14608,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14606
14608
  .pf-v5-c-divider.pf-m-vertical-on-lg {
14607
14609
  flex-direction: column;
14608
14610
  width: var(--pf-v5-c-divider--Size);
14609
- height: 100%;
14611
+ height: inherit;
14610
14612
  }
14611
14613
  }
14612
14614
  @media (min-width: 992px) {
@@ -14646,7 +14648,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14646
14648
  .pf-v5-c-divider.pf-m-vertical-on-xl {
14647
14649
  flex-direction: column;
14648
14650
  width: var(--pf-v5-c-divider--Size);
14649
- height: 100%;
14651
+ height: inherit;
14650
14652
  }
14651
14653
  }
14652
14654
  @media (min-width: 1200px) {
@@ -14686,7 +14688,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14686
14688
  .pf-v5-c-divider.pf-m-vertical-on-2xl {
14687
14689
  flex-direction: column;
14688
14690
  width: var(--pf-v5-c-divider--Size);
14689
- height: 100%;
14691
+ height: inherit;
14690
14692
  }
14691
14693
  }
14692
14694
  @media (min-width: 1450px) {
@@ -18392,6 +18394,7 @@ label.pf-v5-c-input-group__text {
18392
18394
  --pf-v5-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
18393
18395
  --pf-v5-c-label--m-clickable--hover--BorderWidth: 0;
18394
18396
  --pf-v5-c-label--m-clickable--hover--BorderColor: transparent;
18397
+ --pf-v5-c-label--m-clickable__content--Cursor: pointer;
18395
18398
  --pf-v5-c-label--m-filled__actions--c-button--Color: var(--pf-v5-c-label__icon--Color);
18396
18399
  --pf-v5-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--button--default);
18397
18400
  --pf-v5-c-label--m-outline--BackgroundColor: transparent;
@@ -18422,6 +18425,7 @@ label.pf-v5-c-input-group__text {
18422
18425
  --pf-v5-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
18423
18426
  --pf-v5-c-label__content--MaxWidth: 100%;
18424
18427
  --pf-v5-c-label__content--Gap: var(--pf-t--global--spacer--xs);
18428
+ --pf-v5-c-label__content--Cursor: initial;
18425
18429
  --pf-v5-c-label__icon--FontSize: var(--pf-t--global--icon--size--body--sm);
18426
18430
  --pf-v5-c-label__text--MaxWidth: 100%;
18427
18431
  --pf-v5-c-label__actions--MarginRight: calc(var(--pf-v5-c-label__actions--c-button--PaddingRight) * -1);
@@ -18439,9 +18443,11 @@ label.pf-v5-c-input-group__text {
18439
18443
  --pf-v5-c-label--m-editable--TextDecorationOffset: 0.25rem;
18440
18444
  --pf-v5-c-label--m-editable--TextDecorationColor: currentcolor;
18441
18445
  --pf-v5-c-label--m-editable__content--MaxWidth: 16ch;
18446
+ --pf-v5-c-label--m-editable__content--Cursor: pointer;
18442
18447
  --pf-v5-c-label--m-editable--m-editable-active--TextDecoration: none;
18443
18448
  --pf-v5-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
18444
18449
  --pf-v5-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
18450
+ --pf-v5-c-label--m-editable--m-editable-active__content--Cursor: initial;
18445
18451
  }
18446
18452
 
18447
18453
  .pf-v5-c-label {
@@ -18623,6 +18629,7 @@ label.pf-v5-c-input-group__text {
18623
18629
  }
18624
18630
  .pf-v5-c-label.pf-m-editable {
18625
18631
  --pf-v5-c-label__content--MaxWidth: var(--pf-v5-c-label--m-editable__content--MaxWidth);
18632
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable__content--Cursor);
18626
18633
  }
18627
18634
  .pf-v5-c-label.pf-m-editable .pf-v5-c-label__text {
18628
18635
  text-decoration: var(--pf-v5-c-label--m-editable--TextDecoration);
@@ -18635,6 +18642,7 @@ label.pf-v5-c-input-group__text {
18635
18642
  --pf-v5-c-label--m-editable--TextDecoration: var(--pf-v5-c-label--m-editable--m-editable-active--TextDecoration);
18636
18643
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-editable--m-editable-active--BackgroundColor);
18637
18644
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-editable--m-editable-active--Color);
18645
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable--m-editable-active__content--Cursor);
18638
18646
  }
18639
18647
  .pf-v5-c-label.pf-m-overflow {
18640
18648
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-overflow--Color);
@@ -18657,11 +18665,8 @@ label.pf-v5-c-input-group__text {
18657
18665
  --pf-v5-c-label--m-add--BorderColor: var(--pf-v5-c-label--m-add--hover--BorderColor);
18658
18666
  --pf-v5-c-label--m-add--BorderWidth: var(--pf-v5-c-label--m-add--hover--BorderWidth);
18659
18667
  }
18660
- .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-editable .pf-v5-c-label__content {
18661
- padding: 0;
18662
- cursor: pointer;
18663
- background-color: transparent;
18664
- border: none;
18668
+ .pf-v5-c-label.pf-m-clickable {
18669
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-clickable__content--Cursor);
18665
18670
  }
18666
18671
  .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content:is(:hover, :focus) {
18667
18672
  text-decoration: none;
@@ -18695,8 +18700,11 @@ label.pf-v5-c-input-group__text {
18695
18700
  .pf-v5-c-label__content {
18696
18701
  gap: var(--pf-v5-c-label__content--Gap);
18697
18702
  max-width: var(--pf-v5-c-label__content--MaxWidth);
18703
+ padding: 0;
18698
18704
  overflow: hidden;
18699
18705
  color: var(--pf-v5-c-label--Color);
18706
+ cursor: var(--pf-v5-c-label__content--Cursor, revert);
18707
+ background: transparent;
18700
18708
  border-width: 0;
18701
18709
  }
18702
18710
  .pf-v5-c-label__content::before {