@patternfly/patternfly 6.6.0-prerelease.10 → 6.6.0-prerelease.12

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 (13) hide show
  1. package/components/DragDrop/drag-drop.css +4 -0
  2. package/components/DragDrop/drag-drop.scss +4 -0
  3. package/components/Page/page.css +7 -5
  4. package/components/Page/page.scss +9 -8
  5. package/components/Panel/panel.css +1 -1
  6. package/components/Panel/panel.scss +2 -2
  7. package/components/_index.css +12 -6
  8. package/docs/demos/Dashboard/examples/Dashboard.md +27 -30
  9. package/package.json +2 -2
  10. package/patternfly-no-globals.css +12 -6
  11. package/patternfly.css +12 -6
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/DragDrop/drag-drop.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
4
4
  --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
5
5
  --pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
6
+ --pf-v6-c-draggable--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
6
7
  --pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
7
8
  --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
8
9
  --pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -17,6 +18,7 @@
17
18
  --pf-v6-c-draggable--Cursor: var(--pf-v6-c-draggable--m-dragging--Cursor);
18
19
  position: relative;
19
20
  background-color: var(--pf-v6-c-draggable--m-dragging--BackgroundColor);
21
+ border-radius: var(--pf-v6-c-draggable--m-dragging--BorderRadius);
20
22
  box-shadow: var(--pf-v6-c-draggable--m-dragging--BoxShadow);
21
23
  }
22
24
  .pf-v6-c-draggable.pf-m-dragging::after {
@@ -36,6 +38,7 @@
36
38
 
37
39
  .pf-v6-c-droppable {
38
40
  --pf-v6-c-droppable--before--BackgroundColor: transparent;
41
+ --pf-v6-c-droppable--before--BorderRadius: var(--pf-t--global--border--radius--small);
39
42
  --pf-v6-c-droppable--before--Opacity: 0;
40
43
  --pf-v6-c-droppable--after--BorderWidth: 0;
41
44
  --pf-v6-c-droppable--after--BorderColor: transparent;
@@ -58,6 +61,7 @@
58
61
  }
59
62
  .pf-v6-c-droppable::before {
60
63
  background-color: var(--pf-v6-c-droppable--before--BackgroundColor);
64
+ border-radius: var(--pf-v6-c-droppable--before--BorderRadius);
61
65
  opacity: var(--pf-v6-c-droppable--before--Opacity);
62
66
  }
63
67
  .pf-v6-c-droppable::after {
package/components/DragDrop/drag-drop.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  --#{$draggable}--m-dragging--Cursor: grabbing;
6
6
  --#{$draggable}--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
7
7
  --#{$draggable}--m-dragging--BackgroundColor: transparent;
8
+ --#{$draggable}--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
8
9
  --#{$draggable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
9
10
  --#{$draggable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
10
11
  --#{$draggable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -20,6 +21,7 @@
20
21
 
21
22
  position: relative;
22
23
  background-color: var(--#{$draggable}--m-dragging--BackgroundColor);
24
+ border-radius: var(--#{$draggable}--m-dragging--BorderRadius);
23
25
  box-shadow: var(--#{$draggable}--m-dragging--BoxShadow);
24
26
 
25
27
  &::after {
@@ -42,6 +44,7 @@
42
44
 
43
45
  @include pf-root($droppable) {
44
46
  --#{$droppable}--before--BackgroundColor: transparent;
47
+ --#{$droppable}--before--BorderRadius: var(--pf-t--global--border--radius--small);
45
48
  --#{$droppable}--before--Opacity: 0;
46
49
  --#{$droppable}--after--BorderWidth: 0;
47
50
  --#{$droppable}--after--BorderColor: transparent;
@@ -67,6 +70,7 @@
67
70
 
68
71
  &::before {
69
72
  background-color: var(--#{$droppable}--before--BackgroundColor);
73
+ border-radius: var(--#{$droppable}--before--BorderRadius);
70
74
  opacity: var(--#{$droppable}--before--Opacity);
71
75
  }
72
76
 
package/components/Page/page.css CHANGED
@@ -14,11 +14,12 @@
14
14
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
15
15
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
16
16
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
17
- --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
17
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
18
18
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
19
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
19
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
20
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
20
21
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
21
- --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
22
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
22
23
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23
24
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
24
25
  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -414,8 +415,6 @@
414
415
  }
415
416
  @media (min-width: 62rem) {
416
417
  .pf-v6-c-page__dock {
417
- --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
418
- --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
419
418
  position: revert;
420
419
  inset: revert;
421
420
  visibility: revert;
@@ -443,6 +442,9 @@
443
442
  }
444
443
  @media (min-width: 62rem) {
445
444
  .pf-v6-c-page__dock-main {
445
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
446
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
447
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
446
448
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
447
449
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
448
450
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
package/components/Page/page.scss CHANGED
@@ -27,11 +27,12 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
27
27
  --#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
28
28
  --#{$page}__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
29
29
  --#{$page}__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
30
- --#{$page}__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
30
+ --#{$page}__dock-main--BorderInlineEndWidth: 0;
31
31
  --#{$page}__dock-main--BorderInlineEndColor: transparent;
32
- --#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
32
+ --#{$page}__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
33
+ --#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
33
34
  --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
34
- --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
35
+ --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
35
36
 
36
37
  // Docked nav
37
38
  --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
@@ -285,7 +286,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
285
286
  --#{$page}__main-container--MarginBlockStart: var(--#{$page}__main-container--MarginBlockStart--glass);
286
287
  --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--MaxHeight--glass);
287
288
  --#{$page}--m-dock__main-container--MaxHeight: var(--#{$page}--m-dock__main-container--MaxHeight--glass);
288
- --#{$page}--m-dock__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart--glass);
289
+ --#{$page}--m-dock__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart--glass);
289
290
  }
290
291
 
291
292
  @media (min-width: $pf-v6-global--breakpoint--xl) {
@@ -447,9 +448,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
447
448
  }
448
449
 
449
450
  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
450
- --#{$page}__dock-main--BackgroundColor: var(--#{$page}__dock-main--desktop--BackgroundColor);
451
- --#{$page}__dock-main--BorderInlineEndColor: var(--#{$page}__dock-main--desktop--BorderInlineEndColor);
452
-
453
451
  position: revert;
454
452
  inset: revert;
455
453
  visibility: revert;
@@ -479,6 +477,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
479
477
  }
480
478
 
481
479
  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
480
+ --#{$page}__dock-main--BorderInlineEndWidth: var(--#{$page}__dock-main--desktop--BorderInlineEndWidth);
481
+ --#{$page}__dock-main--BackgroundColor: var(--#{$page}__dock-main--desktop--BackgroundColor);
482
+ --#{$page}__dock-main--BorderInlineEndColor: var(--#{$page}__dock-main--desktop--BorderInlineEndColor);
482
483
  --#{$page}__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
483
484
  --#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
484
485
  --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--#{$page}__dock-main--BorderInlineEndWidth);
@@ -975,4 +976,4 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
975
976
  flex-grow: 1;
976
977
  }
977
978
  }
978
- }
979
+ }
package/components/Panel/panel.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6
6
  --pf-v6-c-panel--BoxShadow: none;
7
7
  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
8
- --pf-v6-c-panel--before--BorderWidth: 0;
8
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
9
9
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
10
10
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11
11
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
package/components/Panel/panel.scss CHANGED
@@ -9,12 +9,12 @@
9
9
  --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--medium);
10
10
 
11
11
  // border
12
- --#{$panel}--before--BorderWidth: 0;
12
+ --#{$panel}--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13
13
  --#{$panel}--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
14
14
 
15
15
  // secondary modifier
16
16
  --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
17
- --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17
+ --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); // TODO - remove in a breaking change
18
18
 
19
19
  // bordered
20
20
  --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
package/components/_index.css CHANGED
@@ -5714,6 +5714,7 @@ ul) {
5714
5714
  --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
5715
5715
  --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
5716
5716
  --pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
5717
+ --pf-v6-c-draggable--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
5717
5718
  --pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
5718
5719
  --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
5719
5720
  --pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -5728,6 +5729,7 @@ ul) {
5728
5729
  --pf-v6-c-draggable--Cursor: var(--pf-v6-c-draggable--m-dragging--Cursor);
5729
5730
  position: relative;
5730
5731
  background-color: var(--pf-v6-c-draggable--m-dragging--BackgroundColor);
5732
+ border-radius: var(--pf-v6-c-draggable--m-dragging--BorderRadius);
5731
5733
  box-shadow: var(--pf-v6-c-draggable--m-dragging--BoxShadow);
5732
5734
  }
5733
5735
  .pf-v6-c-draggable.pf-m-dragging::after {
@@ -5747,6 +5749,7 @@ ul) {
5747
5749
 
5748
5750
  .pf-v6-c-droppable {
5749
5751
  --pf-v6-c-droppable--before--BackgroundColor: transparent;
5752
+ --pf-v6-c-droppable--before--BorderRadius: var(--pf-t--global--border--radius--small);
5750
5753
  --pf-v6-c-droppable--before--Opacity: 0;
5751
5754
  --pf-v6-c-droppable--after--BorderWidth: 0;
5752
5755
  --pf-v6-c-droppable--after--BorderColor: transparent;
@@ -5769,6 +5772,7 @@ ul) {
5769
5772
  }
5770
5773
  .pf-v6-c-droppable::before {
5771
5774
  background-color: var(--pf-v6-c-droppable--before--BackgroundColor);
5775
+ border-radius: var(--pf-v6-c-droppable--before--BorderRadius);
5772
5776
  opacity: var(--pf-v6-c-droppable--before--Opacity);
5773
5777
  }
5774
5778
  .pf-v6-c-droppable::after {
@@ -13862,11 +13866,12 @@ ul.pf-v6-c-list {
13862
13866
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
13863
13867
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
13864
13868
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
13865
- --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
13869
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
13866
13870
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
13867
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13871
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
13872
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
13868
13873
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
13869
- --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
13874
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
13870
13875
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
13871
13876
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
13872
13877
  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -14262,8 +14267,6 @@ ul.pf-v6-c-list {
14262
14267
  }
14263
14268
  @media (min-width: 62rem) {
14264
14269
  .pf-v6-c-page__dock {
14265
- --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
14266
- --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
14267
14270
  position: revert;
14268
14271
  inset: revert;
14269
14272
  visibility: revert;
@@ -14291,6 +14294,9 @@ ul.pf-v6-c-list {
14291
14294
  }
14292
14295
  @media (min-width: 62rem) {
14293
14296
  .pf-v6-c-page__dock-main {
14297
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
14298
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
14299
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
14294
14300
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
14295
14301
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
14296
14302
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
@@ -15424,7 +15430,7 @@ ul.pf-v6-c-list {
15424
15430
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15425
15431
  --pf-v6-c-panel--BoxShadow: none;
15426
15432
  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
15427
- --pf-v6-c-panel--before--BorderWidth: 0;
15433
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15428
15434
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
15429
15435
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15430
15436
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -499,8 +499,14 @@ cssPrefix: pf-d-dashboard
499
499
  class="pf-v6-l-flex__item"
500
500
  style="margin-block-end: -.25em"
501
501
  >
502
- <span class="pf-v6-c-label pf-m-red">
502
+ <span class="pf-v6-c-label pf-m-danger">
503
503
  <span class="pf-v6-c-label__content">
504
+ <span class="pf-v6-c-label__icon">
505
+ <i
506
+ class="fas fa-fw fa-exclamation-circle"
507
+ aria-hidden="true"
508
+ ></i>
509
+ </span>
504
510
  <span class="pf-v6-c-label__text">Incident</span>
505
511
  </span>
506
512
  </span>
@@ -510,9 +516,7 @@ cssPrefix: pf-d-dashboard
510
516
  style="row-gap: var(--pf-6-global--spacer--md);"
511
517
  >
512
518
  <span class="pf-v6-c-icon">
513
- <span
514
- class="pf-v6-c-icon__content pf-m-success"
515
- >
519
+ <span class="pf-v6-c-icon__content pf-m-danger">
516
520
  <svg
517
521
  class="pf-v6-svg"
518
522
  fill="currentColor"
@@ -530,7 +534,7 @@ cssPrefix: pf-d-dashboard
530
534
  </span>
531
535
  <p class="pf-v6-u-color-200">
532
536
  System reboot
533
- <b class="pf-v6-u-color-100">is not</b> required
537
+ <b class="pf-v6-u-color-100">is</b> required
534
538
  </p>
535
539
  </div>
536
540
  </div>
@@ -635,7 +639,9 @@ cssPrefix: pf-d-dashboard
635
639
  style="row-gap: var(--pf-6-global--spacer--md);"
636
640
  >
637
641
  <span class="pf-v6-c-icon">
638
- <span class="pf-v6-c-icon__content pf-m-danger">
642
+ <span
643
+ class="pf-v6-c-icon__content pf-m-success"
644
+ >
639
645
  <svg
640
646
  class="pf-v6-svg"
641
647
  fill="currentColor"
@@ -653,7 +659,7 @@ cssPrefix: pf-d-dashboard
653
659
  </span>
654
660
  <p class="pf-v6-u-color-200">
655
661
  System reboot
656
- <b class="pf-v6-u-color-100">is</b> required
662
+ <b class="pf-v6-u-color-100">is not</b> required
657
663
  </p>
658
664
  </div>
659
665
  </div>
@@ -747,8 +753,14 @@ cssPrefix: pf-d-dashboard
747
753
  class="pf-v6-l-flex__item"
748
754
  style="margin-block-end: -.25em"
749
755
  >
750
- <span class="pf-v6-c-label pf-m-red">
756
+ <span class="pf-v6-c-label pf-m-danger">
751
757
  <span class="pf-v6-c-label__content">
758
+ <span class="pf-v6-c-label__icon">
759
+ <i
760
+ class="fas fa-fw fa-exclamation-circle"
761
+ aria-hidden="true"
762
+ ></i>
763
+ </span>
752
764
  <span class="pf-v6-c-label__text">Incident</span>
753
765
  </span>
754
766
  </span>
@@ -758,9 +770,7 @@ cssPrefix: pf-d-dashboard
758
770
  style="row-gap: var(--pf-6-global--spacer--md);"
759
771
  >
760
772
  <span class="pf-v6-c-icon">
761
- <span
762
- class="pf-v6-c-icon__content pf-m-success"
763
- >
773
+ <span class="pf-v6-c-icon__content pf-m-danger">
764
774
  <svg
765
775
  class="pf-v6-svg"
766
776
  fill="currentColor"
@@ -778,7 +788,7 @@ cssPrefix: pf-d-dashboard
778
788
  </span>
779
789
  <p class="pf-v6-u-color-200">
780
790
  System reboot
781
- <b class="pf-v6-u-color-100">is not</b> required
791
+ <b class="pf-v6-u-color-100">is</b> required
782
792
  </p>
783
793
  </div>
784
794
  </div>
@@ -1050,7 +1060,7 @@ cssPrefix: pf-d-dashboard
1050
1060
  aria-label="Group of labels"
1051
1061
  >
1052
1062
  <li class="pf-v6-c-label-group__list-item">
1053
- <span class="pf-v6-c-label pf-m-red">
1063
+ <span class="pf-v6-c-label pf-m-danger">
1054
1064
  <span class="pf-v6-c-label__content">
1055
1065
  <span class="pf-v6-c-label__icon">
1056
1066
  <i
@@ -1063,11 +1073,11 @@ cssPrefix: pf-d-dashboard
1063
1073
  </span>
1064
1074
  </li>
1065
1075
  <li class="pf-v6-c-label-group__list-item">
1066
- <span class="pf-v6-c-label pf-m-orange">
1076
+ <span class="pf-v6-c-label pf-m-warning">
1067
1077
  <span class="pf-v6-c-label__content">
1068
1078
  <span class="pf-v6-c-label__icon">
1069
1079
  <i
1070
- class="fas fa-fw fa-exclamation-circle"
1080
+ class="fas fa-fw fa-exclamation-triangle"
1071
1081
  aria-hidden="true"
1072
1082
  ></i>
1073
1083
  </span>
@@ -1076,7 +1086,7 @@ cssPrefix: pf-d-dashboard
1076
1086
  </span>
1077
1087
  </li>
1078
1088
  <li class="pf-v6-c-label-group__list-item">
1079
- <span class="pf-v6-c-label pf-m-green">
1089
+ <span class="pf-v6-c-label pf-m-success">
1080
1090
  <span class="pf-v6-c-label__content">
1081
1091
  <span class="pf-v6-c-label__icon">
1082
1092
  <i
@@ -1089,7 +1099,7 @@ cssPrefix: pf-d-dashboard
1089
1099
  </span>
1090
1100
  </li>
1091
1101
  <li class="pf-v6-c-label-group__list-item">
1092
- <span class="pf-v6-c-label pf-m-blue">
1102
+ <span class="pf-v6-c-label pf-m-info">
1093
1103
  <span class="pf-v6-c-label__content">
1094
1104
  <span class="pf-v6-c-label__icon">
1095
1105
  <i
@@ -1101,19 +1111,6 @@ cssPrefix: pf-d-dashboard
1101
1111
  </span>
1102
1112
  </span>
1103
1113
  </li>
1104
- <li class="pf-v6-c-label-group__list-item">
1105
- <span class="pf-v6-c-label pf-m-teal">
1106
- <span class="pf-v6-c-label__content">
1107
- <span class="pf-v6-c-label__icon">
1108
- <i
1109
- class="fas fa-fw fa-bell"
1110
- aria-hidden="true"
1111
- ></i>
1112
- </span>
1113
- <span class="pf-v6-c-label__text">3</span>
1114
- </span>
1115
- </span>
1116
- </li>
1117
1114
  </ul>
1118
1115
  </div>
1119
1116
  </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
- "version": "6.6.0-prerelease.10",
4
+ "version": "6.6.0-prerelease.12",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -71,7 +71,7 @@
71
71
  "@commitlint/config-conventional": "^19.1.0",
72
72
  "@fortawesome/fontawesome": "^1.1.8",
73
73
  "@octokit/rest": "^20.1.0",
74
- "@patternfly/documentation-framework": "6.44.3",
74
+ "@patternfly/documentation-framework": "6.44.4",
75
75
  "@patternfly/patternfly-a11y": "5.1.0",
76
76
  "@patternfly/react-code-editor": "6.5.1",
77
77
  "@patternfly/react-core": "6.5.1",
package/patternfly-no-globals.css CHANGED
@@ -14970,6 +14970,7 @@ ul) {
14970
14970
  --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
14971
14971
  --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
14972
14972
  --pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
14973
+ --pf-v6-c-draggable--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
14973
14974
  --pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
14974
14975
  --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
14975
14976
  --pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -14984,6 +14985,7 @@ ul) {
14984
14985
  --pf-v6-c-draggable--Cursor: var(--pf-v6-c-draggable--m-dragging--Cursor);
14985
14986
  position: relative;
14986
14987
  background-color: var(--pf-v6-c-draggable--m-dragging--BackgroundColor);
14988
+ border-radius: var(--pf-v6-c-draggable--m-dragging--BorderRadius);
14987
14989
  box-shadow: var(--pf-v6-c-draggable--m-dragging--BoxShadow);
14988
14990
  }
14989
14991
  .pf-v6-c-draggable.pf-m-dragging::after {
@@ -15003,6 +15005,7 @@ ul) {
15003
15005
 
15004
15006
  .pf-v6-c-droppable {
15005
15007
  --pf-v6-c-droppable--before--BackgroundColor: transparent;
15008
+ --pf-v6-c-droppable--before--BorderRadius: var(--pf-t--global--border--radius--small);
15006
15009
  --pf-v6-c-droppable--before--Opacity: 0;
15007
15010
  --pf-v6-c-droppable--after--BorderWidth: 0;
15008
15011
  --pf-v6-c-droppable--after--BorderColor: transparent;
@@ -15025,6 +15028,7 @@ ul) {
15025
15028
  }
15026
15029
  .pf-v6-c-droppable::before {
15027
15030
  background-color: var(--pf-v6-c-droppable--before--BackgroundColor);
15031
+ border-radius: var(--pf-v6-c-droppable--before--BorderRadius);
15028
15032
  opacity: var(--pf-v6-c-droppable--before--Opacity);
15029
15033
  }
15030
15034
  .pf-v6-c-droppable::after {
@@ -23118,11 +23122,12 @@ ul.pf-v6-c-list {
23118
23122
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
23119
23123
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
23120
23124
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
23121
- --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
23125
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
23122
23126
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
23123
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
23127
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
23128
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
23124
23129
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
23125
- --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
23130
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
23126
23131
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23127
23132
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
23128
23133
  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -23518,8 +23523,6 @@ ul.pf-v6-c-list {
23518
23523
  }
23519
23524
  @media (min-width: 62rem) {
23520
23525
  .pf-v6-c-page__dock {
23521
- --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
23522
- --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
23523
23526
  position: revert;
23524
23527
  inset: revert;
23525
23528
  visibility: revert;
@@ -23547,6 +23550,9 @@ ul.pf-v6-c-list {
23547
23550
  }
23548
23551
  @media (min-width: 62rem) {
23549
23552
  .pf-v6-c-page__dock-main {
23553
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
23554
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
23555
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
23550
23556
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
23551
23557
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
23552
23558
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
@@ -24680,7 +24686,7 @@ ul.pf-v6-c-list {
24680
24686
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24681
24687
  --pf-v6-c-panel--BoxShadow: none;
24682
24688
  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
24683
- --pf-v6-c-panel--before--BorderWidth: 0;
24689
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24684
24690
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
24685
24691
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24686
24692
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
package/patternfly.css CHANGED
@@ -15125,6 +15125,7 @@ ul) {
15125
15125
  --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
15126
15126
  --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
15127
15127
  --pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
15128
+ --pf-v6-c-draggable--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
15128
15129
  --pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
15129
15130
  --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
15130
15131
  --pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -15139,6 +15140,7 @@ ul) {
15139
15140
  --pf-v6-c-draggable--Cursor: var(--pf-v6-c-draggable--m-dragging--Cursor);
15140
15141
  position: relative;
15141
15142
  background-color: var(--pf-v6-c-draggable--m-dragging--BackgroundColor);
15143
+ border-radius: var(--pf-v6-c-draggable--m-dragging--BorderRadius);
15142
15144
  box-shadow: var(--pf-v6-c-draggable--m-dragging--BoxShadow);
15143
15145
  }
15144
15146
  .pf-v6-c-draggable.pf-m-dragging::after {
@@ -15158,6 +15160,7 @@ ul) {
15158
15160
 
15159
15161
  .pf-v6-c-droppable {
15160
15162
  --pf-v6-c-droppable--before--BackgroundColor: transparent;
15163
+ --pf-v6-c-droppable--before--BorderRadius: var(--pf-t--global--border--radius--small);
15161
15164
  --pf-v6-c-droppable--before--Opacity: 0;
15162
15165
  --pf-v6-c-droppable--after--BorderWidth: 0;
15163
15166
  --pf-v6-c-droppable--after--BorderColor: transparent;
@@ -15180,6 +15183,7 @@ ul) {
15180
15183
  }
15181
15184
  .pf-v6-c-droppable::before {
15182
15185
  background-color: var(--pf-v6-c-droppable--before--BackgroundColor);
15186
+ border-radius: var(--pf-v6-c-droppable--before--BorderRadius);
15183
15187
  opacity: var(--pf-v6-c-droppable--before--Opacity);
15184
15188
  }
15185
15189
  .pf-v6-c-droppable::after {
@@ -23273,11 +23277,12 @@ ul.pf-v6-c-list {
23273
23277
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
23274
23278
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
23275
23279
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
23276
- --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
23280
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
23277
23281
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
23278
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
23282
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
23283
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
23279
23284
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
23280
- --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
23285
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
23281
23286
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23282
23287
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
23283
23288
  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -23673,8 +23678,6 @@ ul.pf-v6-c-list {
23673
23678
  }
23674
23679
  @media (min-width: 62rem) {
23675
23680
  .pf-v6-c-page__dock {
23676
- --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
23677
- --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
23678
23681
  position: revert;
23679
23682
  inset: revert;
23680
23683
  visibility: revert;
@@ -23702,6 +23705,9 @@ ul.pf-v6-c-list {
23702
23705
  }
23703
23706
  @media (min-width: 62rem) {
23704
23707
  .pf-v6-c-page__dock-main {
23708
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
23709
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
23710
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
23705
23711
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
23706
23712
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
23707
23713
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
@@ -24835,7 +24841,7 @@ ul.pf-v6-c-list {
24835
24841
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24836
24842
  --pf-v6-c-panel--BoxShadow: none;
24837
24843
  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
24838
- --pf-v6-c-panel--before--BorderWidth: 0;
24844
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24839
24845
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
24840
24846
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24841
24847
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);