@patternfly/react-table 4.42.0 → 4.44.0

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 (74) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/dist/esm/components/Table/base/provider.d.ts +5 -5
  3. package/dist/esm/components/Table/base/types.d.ts +5 -5
  4. package/dist/esm/components/TableComposable/InnerScrollContainer.d.ts +9 -0
  5. package/dist/esm/components/TableComposable/InnerScrollContainer.d.ts.map +1 -0
  6. package/dist/esm/components/TableComposable/InnerScrollContainer.js +10 -0
  7. package/dist/esm/components/TableComposable/InnerScrollContainer.js.map +1 -0
  8. package/dist/esm/components/TableComposable/OuterScrollContainer.d.ts +9 -0
  9. package/dist/esm/components/TableComposable/OuterScrollContainer.d.ts.map +1 -0
  10. package/dist/esm/components/TableComposable/OuterScrollContainer.js +10 -0
  11. package/dist/esm/components/TableComposable/OuterScrollContainer.js.map +1 -0
  12. package/dist/esm/components/TableComposable/TableComposable.d.ts +3 -1
  13. package/dist/esm/components/TableComposable/TableComposable.d.ts.map +1 -1
  14. package/dist/esm/components/TableComposable/TableComposable.js +12 -2
  15. package/dist/esm/components/TableComposable/TableComposable.js.map +1 -1
  16. package/dist/esm/components/TableComposable/Th.d.ts +11 -1
  17. package/dist/esm/components/TableComposable/Th.d.ts.map +1 -1
  18. package/dist/esm/components/TableComposable/Th.js +5 -2
  19. package/dist/esm/components/TableComposable/Th.js.map +1 -1
  20. package/dist/esm/components/TableComposable/Thead.d.ts +3 -1
  21. package/dist/esm/components/TableComposable/Thead.d.ts.map +1 -1
  22. package/dist/esm/components/TableComposable/Thead.js +2 -2
  23. package/dist/esm/components/TableComposable/Thead.js.map +1 -1
  24. package/dist/esm/components/TableComposable/Tr.d.ts +3 -1
  25. package/dist/esm/components/TableComposable/Tr.d.ts.map +1 -1
  26. package/dist/esm/components/TableComposable/Tr.js +2 -2
  27. package/dist/esm/components/TableComposable/Tr.js.map +1 -1
  28. package/dist/esm/components/TableComposable/index.d.ts +2 -0
  29. package/dist/esm/components/TableComposable/index.d.ts.map +1 -1
  30. package/dist/esm/components/TableComposable/index.js +2 -0
  31. package/dist/esm/components/TableComposable/index.js.map +1 -1
  32. package/dist/js/components/Table/base/provider.d.ts +5 -5
  33. package/dist/js/components/Table/base/types.d.ts +5 -5
  34. package/dist/js/components/TableComposable/InnerScrollContainer.d.ts +9 -0
  35. package/dist/js/components/TableComposable/InnerScrollContainer.d.ts.map +1 -0
  36. package/dist/js/components/TableComposable/InnerScrollContainer.js +14 -0
  37. package/dist/js/components/TableComposable/InnerScrollContainer.js.map +1 -0
  38. package/dist/js/components/TableComposable/OuterScrollContainer.d.ts +9 -0
  39. package/dist/js/components/TableComposable/OuterScrollContainer.d.ts.map +1 -0
  40. package/dist/js/components/TableComposable/OuterScrollContainer.js +14 -0
  41. package/dist/js/components/TableComposable/OuterScrollContainer.js.map +1 -0
  42. package/dist/js/components/TableComposable/TableComposable.d.ts +3 -1
  43. package/dist/js/components/TableComposable/TableComposable.d.ts.map +1 -1
  44. package/dist/js/components/TableComposable/TableComposable.js +12 -2
  45. package/dist/js/components/TableComposable/TableComposable.js.map +1 -1
  46. package/dist/js/components/TableComposable/Th.d.ts +11 -1
  47. package/dist/js/components/TableComposable/Th.d.ts.map +1 -1
  48. package/dist/js/components/TableComposable/Th.js +5 -2
  49. package/dist/js/components/TableComposable/Th.js.map +1 -1
  50. package/dist/js/components/TableComposable/Thead.d.ts +3 -1
  51. package/dist/js/components/TableComposable/Thead.d.ts.map +1 -1
  52. package/dist/js/components/TableComposable/Thead.js +2 -2
  53. package/dist/js/components/TableComposable/Thead.js.map +1 -1
  54. package/dist/js/components/TableComposable/Tr.d.ts +3 -1
  55. package/dist/js/components/TableComposable/Tr.d.ts.map +1 -1
  56. package/dist/js/components/TableComposable/Tr.js +2 -2
  57. package/dist/js/components/TableComposable/Tr.js.map +1 -1
  58. package/dist/js/components/TableComposable/index.d.ts +2 -0
  59. package/dist/js/components/TableComposable/index.d.ts.map +1 -1
  60. package/dist/js/components/TableComposable/index.js +2 -0
  61. package/dist/js/components/TableComposable/index.js.map +1 -1
  62. package/dist/umd/react-table.css +772 -282
  63. package/dist/umd/react-table.js +247 -208
  64. package/dist/umd/react-table.min.css +955 -465
  65. package/dist/umd/react-table.min.js +3 -3
  66. package/package.json +6 -6
  67. package/src/components/TableComposable/InnerScrollContainer.tsx +22 -0
  68. package/src/components/TableComposable/OuterScrollContainer.tsx +22 -0
  69. package/src/components/TableComposable/TableComposable.tsx +11 -0
  70. package/src/components/TableComposable/Th.tsx +26 -0
  71. package/src/components/TableComposable/Thead.tsx +12 -1
  72. package/src/components/TableComposable/Tr.tsx +5 -1
  73. package/src/components/TableComposable/examples/ComposableTable.md +1106 -0
  74. package/src/components/TableComposable/index.ts +2 -0
@@ -4158,6 +4158,63 @@
4158
4158
  --pf-c-table--cell--Width: auto;
4159
4159
  }
4160
4160
  }
4161
+ .pf-c-table {
4162
+ --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
4163
+ --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
4164
+ --pf-c-table__sticky-column--Left: 0;
4165
+ --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
4166
+ --pf-c-table__sticky-column--Top: 0;
4167
+ --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
4168
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
4169
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
4170
+ --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
4171
+ }
4172
+
4173
+ .pf-c-table .pf-c-table__sticky-column {
4174
+ position: sticky;
4175
+ left: var(--pf-c-table__sticky-column--Left);
4176
+ z-index: var(--pf-c-table__sticky-column--ZIndex);
4177
+ min-width: var(--pf-c-table__sticky-column--MinWidth);
4178
+ background-color: var(--pf-c-table__sticky-column--BackgroundColor);
4179
+ background-clip: padding-box;
4180
+ }
4181
+
4182
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
4183
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
4184
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
4185
+ }
4186
+
4187
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
4188
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
4189
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
4190
+ }
4191
+
4192
+ .pf-c-table.pf-m-sticky-header {
4193
+ --pf-c-table--cell--Overflow: visible;
4194
+ }
4195
+
4196
+ .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
4197
+ z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
4198
+ }
4199
+
4200
+ .pf-c-scroll-outer-wrapper {
4201
+ --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
4202
+ display: flex;
4203
+ flex-direction: column;
4204
+ max-width: 100%;
4205
+ min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
4206
+ max-height: 100%;
4207
+ overflow: hidden;
4208
+ }
4209
+
4210
+ .pf-c-scroll-inner-wrapper {
4211
+ display: flex;
4212
+ flex-direction: column;
4213
+ max-width: 100%;
4214
+ max-height: 100%;
4215
+ overflow: auto;
4216
+ }
4217
+
4161
4218
  .pf-c-form {
4162
4219
  --pf-c-form--GridGap: var(--pf-global--gutter--md);
4163
4220
  --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);
@@ -5280,10 +5337,10 @@ label.pf-c-check, .pf-c-check__label,
5280
5337
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
5281
5338
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
5282
5339
  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
5283
- --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
5284
- --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
5285
5340
  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
5286
5341
  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
5342
+ --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
5343
+ --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
5287
5344
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
5288
5345
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
5289
5346
  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
@@ -5297,9 +5354,22 @@ label.pf-c-check, .pf-c-check__label,
5297
5354
  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
5298
5355
  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
5299
5356
  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
5300
- --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
5301
5357
  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
5358
+ --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
5302
5359
  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
5360
+ --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
5361
+ --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
5362
+ --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
5363
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
5364
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
5365
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
5366
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
5367
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
5368
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
5369
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
5370
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
5371
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
5372
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
5303
5373
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
5304
5374
  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
5305
5375
  --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
@@ -5313,6 +5383,14 @@ label.pf-c-check, .pf-c-check__label,
5313
5383
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
5314
5384
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
5315
5385
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
5386
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
5387
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
5388
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
5389
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
5390
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
5391
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
5392
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
5393
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
5316
5394
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
5317
5395
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
5318
5396
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -5413,6 +5491,10 @@ label.pf-c-check, .pf-c-check__label,
5413
5491
  border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
5414
5492
  }
5415
5493
 
5494
+ .pf-c-dropdown.pf-m-expanded {
5495
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
5496
+ }
5497
+
5416
5498
  .pf-c-dropdown__toggle {
5417
5499
  position: relative;
5418
5500
  display: flex;
@@ -5490,6 +5572,10 @@ label.pf-c-check, .pf-c-check__label,
5490
5572
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
5491
5573
  }
5492
5574
 
5575
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
5576
+ border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
5577
+ }
5578
+
5493
5579
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
5494
5580
  display: flex;
5495
5581
  align-items: center;
@@ -5511,21 +5597,53 @@ label.pf-c-check, .pf-c-check__label,
5511
5597
  margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
5512
5598
  }
5513
5599
 
5514
- .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
5600
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
5601
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
5602
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
5603
+ }
5604
+
5605
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
5606
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
5607
+ border: 0;
5608
+ }
5609
+
5610
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
5611
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
5612
+ }
5613
+
5614
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
5615
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
5616
+ }
5617
+
5618
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
5619
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
5620
+ }
5621
+
5622
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
5623
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
5624
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
5625
+ }
5626
+
5627
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
5628
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
5629
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
5630
+ }
5631
+
5632
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
5515
5633
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
5516
5634
  }
5517
5635
 
5518
- .pf-c-dropdown__toggle:not(.pf-m-action):active::before, .pf-c-dropdown__toggle:not(.pf-m-action).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
5636
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
5519
5637
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
5520
5638
  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
5521
5639
  }
5522
5640
 
5523
- .pf-c-dropdown__toggle:not(.pf-m-action):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
5641
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
5524
5642
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
5525
5643
  border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
5526
5644
  }
5527
5645
 
5528
- .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
5646
+ .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
5529
5647
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
5530
5648
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
5531
5649
  }
@@ -5545,7 +5663,7 @@ label.pf-c-check, .pf-c-check__label,
5545
5663
  border: 0;
5546
5664
  }
5547
5665
 
5548
- .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
5666
+ .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
5549
5667
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
5550
5668
  }
5551
5669
 
@@ -5554,11 +5672,15 @@ label.pf-c-check, .pf-c-check__label,
5554
5672
  }
5555
5673
 
5556
5674
  .pf-c-dropdown__toggle.pf-m-primary {
5557
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5558
5675
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
5676
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5559
5677
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
5560
5678
  }
5561
5679
 
5680
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
5681
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5682
+ }
5683
+
5562
5684
  .pf-c-dropdown__toggle.pf-m-primary::before {
5563
5685
  border: 0;
5564
5686
  }
@@ -5567,18 +5689,46 @@ label.pf-c-check, .pf-c-check__label,
5567
5689
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
5568
5690
  }
5569
5691
 
5570
- .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
5571
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
5572
- }
5573
-
5574
5692
  .pf-c-dropdown__toggle.pf-m-primary:focus {
5575
5693
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
5576
5694
  }
5577
5695
 
5696
+ .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
5697
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
5698
+ }
5699
+
5578
5700
  .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
5579
5701
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
5580
5702
  }
5581
5703
 
5704
+ .pf-c-dropdown__toggle.pf-m-secondary {
5705
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
5706
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
5707
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
5708
+ }
5709
+
5710
+ .pf-c-dropdown__toggle.pf-m-secondary::before {
5711
+ border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
5712
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
5713
+ }
5714
+
5715
+ .pf-c-dropdown__toggle.pf-m-secondary:hover {
5716
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
5717
+ }
5718
+
5719
+ .pf-c-dropdown__toggle.pf-m-secondary:focus {
5720
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
5721
+ }
5722
+
5723
+ .pf-c-dropdown__toggle.pf-m-secondary:active, .pf-c-dropdown__toggle.pf-m-secondary.pf-m-active {
5724
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
5725
+ }
5726
+
5727
+ .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary {
5728
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
5729
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
5730
+ }
5731
+
5582
5732
  .pf-c-dropdown__toggle > .pf-c-badge {
5583
5733
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
5584
5734
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
@@ -5893,7 +6043,8 @@ label.pf-c-check, .pf-c-check__label,
5893
6043
  --pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
5894
6044
  --pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
5895
6045
  --pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
5896
- --pf-c-form-control__select--PaddingRight: var(--pf-global--spacer--lg);
6046
+ --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
6047
+ --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm) - var(--pf-c-form-control--BorderWidth));
5897
6048
  --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
5898
6049
  --pf-c-form-control__select--BackgroundSize: .625em;
5899
6050
  --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 1px);
@@ -6045,11 +6196,18 @@ label.pf-c-check, .pf-c-check__label,
6045
6196
 
6046
6197
  select.pf-c-form-control {
6047
6198
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
6199
+ --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
6048
6200
  background-image: var(--pf-c-form-control__select--BackgroundUrl);
6049
6201
  background-position: var(--pf-c-form-control__select--BackgroundPosition);
6050
6202
  background-size: var(--pf-c-form-control__select--BackgroundSize);
6051
6203
  }
6052
6204
 
6205
+ @-moz-document url-prefix() {
6206
+ select.pf-c-form-control {
6207
+ --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
6208
+ --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
6209
+ }
6210
+ }
6053
6211
  select.pf-c-form-control[aria-invalid=true] {
6054
6212
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
6055
6213
  --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);
@@ -7136,6 +7294,153 @@ svg.pf-c-spinner.pf-m-xl {
7136
7294
  --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
7137
7295
  }
7138
7296
 
7297
+ .pf-u-screen-reader {
7298
+ position: fixed;
7299
+ top: 0;
7300
+ left: 0;
7301
+ overflow: hidden;
7302
+ clip: rect(0, 0, 0, 0);
7303
+ white-space: nowrap;
7304
+ border: 0;
7305
+ }
7306
+
7307
+ .pf-u-visible {
7308
+ position: static;
7309
+ overflow: visible;
7310
+ clip: auto;
7311
+ white-space: normal;
7312
+ border: inherit;
7313
+ }
7314
+
7315
+ .pf-u-hidden {
7316
+ display: none !important;
7317
+ }
7318
+
7319
+ @media screen and (min-width: 576px) {
7320
+ .pf-u-screen-reader-on-sm {
7321
+ position: fixed;
7322
+ top: 0;
7323
+ left: 0;
7324
+ overflow: hidden;
7325
+ clip: rect(0, 0, 0, 0);
7326
+ white-space: nowrap;
7327
+ border: 0;
7328
+ }
7329
+ }
7330
+ @media screen and (min-width: 576px) {
7331
+ .pf-u-visible-on-sm {
7332
+ position: static;
7333
+ overflow: visible;
7334
+ clip: auto;
7335
+ white-space: normal;
7336
+ border: inherit;
7337
+ }
7338
+ }
7339
+ @media screen and (min-width: 576px) {
7340
+ .pf-u-hidden-on-sm {
7341
+ display: none !important;
7342
+ }
7343
+ }
7344
+ @media screen and (min-width: 768px) {
7345
+ .pf-u-screen-reader-on-md {
7346
+ position: fixed;
7347
+ top: 0;
7348
+ left: 0;
7349
+ overflow: hidden;
7350
+ clip: rect(0, 0, 0, 0);
7351
+ white-space: nowrap;
7352
+ border: 0;
7353
+ }
7354
+ }
7355
+ @media screen and (min-width: 768px) {
7356
+ .pf-u-visible-on-md {
7357
+ position: static;
7358
+ overflow: visible;
7359
+ clip: auto;
7360
+ white-space: normal;
7361
+ border: inherit;
7362
+ }
7363
+ }
7364
+ @media screen and (min-width: 768px) {
7365
+ .pf-u-hidden-on-md {
7366
+ display: none !important;
7367
+ }
7368
+ }
7369
+ @media screen and (min-width: 992px) {
7370
+ .pf-u-screen-reader-on-lg {
7371
+ position: fixed;
7372
+ top: 0;
7373
+ left: 0;
7374
+ overflow: hidden;
7375
+ clip: rect(0, 0, 0, 0);
7376
+ white-space: nowrap;
7377
+ border: 0;
7378
+ }
7379
+ }
7380
+ @media screen and (min-width: 992px) {
7381
+ .pf-u-visible-on-lg {
7382
+ position: static;
7383
+ overflow: visible;
7384
+ clip: auto;
7385
+ white-space: normal;
7386
+ border: inherit;
7387
+ }
7388
+ }
7389
+ @media screen and (min-width: 992px) {
7390
+ .pf-u-hidden-on-lg {
7391
+ display: none !important;
7392
+ }
7393
+ }
7394
+ @media screen and (min-width: 1200px) {
7395
+ .pf-u-screen-reader-on-xl {
7396
+ position: fixed;
7397
+ top: 0;
7398
+ left: 0;
7399
+ overflow: hidden;
7400
+ clip: rect(0, 0, 0, 0);
7401
+ white-space: nowrap;
7402
+ border: 0;
7403
+ }
7404
+ }
7405
+ @media screen and (min-width: 1200px) {
7406
+ .pf-u-visible-on-xl {
7407
+ position: static;
7408
+ overflow: visible;
7409
+ clip: auto;
7410
+ white-space: normal;
7411
+ border: inherit;
7412
+ }
7413
+ }
7414
+ @media screen and (min-width: 1200px) {
7415
+ .pf-u-hidden-on-xl {
7416
+ display: none !important;
7417
+ }
7418
+ }
7419
+ @media screen and (min-width: 1450px) {
7420
+ .pf-u-screen-reader-on-2xl {
7421
+ position: fixed;
7422
+ top: 0;
7423
+ left: 0;
7424
+ overflow: hidden;
7425
+ clip: rect(0, 0, 0, 0);
7426
+ white-space: nowrap;
7427
+ border: 0;
7428
+ }
7429
+ }
7430
+ @media screen and (min-width: 1450px) {
7431
+ .pf-u-visible-on-2xl {
7432
+ position: static;
7433
+ overflow: visible;
7434
+ clip: auto;
7435
+ white-space: normal;
7436
+ border: inherit;
7437
+ }
7438
+ }
7439
+ @media screen and (min-width: 1450px) {
7440
+ .pf-u-hidden-on-2xl {
7441
+ display: none !important;
7442
+ }
7443
+ }
7139
7444
  .pf-c-app-launcher {
7140
7445
  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
7141
7446
  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -7312,206 +7617,59 @@ svg.pf-c-spinner.pf-m-xl {
7312
7617
  opacity: 1;
7313
7618
  }
7314
7619
 
7315
- .pf-c-app-launcher__menu-item.pf-m-link {
7316
- --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-c-app-launcher__menu-item--m-link--PaddingRight);
7317
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
7318
- }
7319
-
7320
- .pf-c-app-launcher__menu-item.pf-m-action {
7321
- --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--m-action--Color);
7322
- --pf-c-app-launcher__menu-item--Width: var(--pf-c-app-launcher__menu-item--m-action--Width);
7323
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
7324
- font-size: var(--pf-c-app-launcher__menu-item--m-action--FontSize);
7325
- }
7326
-
7327
- .pf-c-app-launcher__menu-item.pf-m-action:hover, .pf-c-app-launcher__menu-item.pf-m-action:focus {
7328
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--hover--Color);
7329
- }
7330
-
7331
- .pf-c-app-launcher__menu-item-icon {
7332
- display: inline-flex;
7333
- align-items: center;
7334
- justify-content: center;
7335
- width: var(--pf-c-app-launcher__menu-item-icon--Width);
7336
- height: var(--pf-c-app-launcher__menu-item-icon--Height);
7337
- margin-right: var(--pf-c-app-launcher__menu-item-icon--MarginRight);
7338
- }
7339
-
7340
- .pf-c-app-launcher__menu-item-icon > * {
7341
- max-width: 100%;
7342
- max-height: 100%;
7343
- }
7344
-
7345
- .pf-c-app-launcher__menu-item-external-icon {
7346
- padding-left: var(--pf-c-app-launcher__menu-item-external-icon--PaddingLeft);
7347
- margin-left: auto;
7348
- font-size: var(--pf-c-app-launcher__menu-item-external-icon--FontSize);
7349
- color: var(--pf-c-app-launcher__menu-item-external-icon--Color);
7350
- opacity: 0;
7351
- transform: translateY(var(--pf-c-app-launcher__menu-item-external-icon--TranslateY));
7352
- }
7353
-
7354
- .pf-c-app-launcher__group + .pf-c-app-launcher__group {
7355
- padding-top: var(--pf-c-app-launcher__group--group--PaddingTop);
7356
- }
7357
-
7358
- .pf-c-app-launcher__group-title {
7359
- padding-top: var(--pf-c-app-launcher__group-title--PaddingTop);
7360
- padding-right: var(--pf-c-app-launcher__group-title--PaddingRight);
7361
- padding-bottom: var(--pf-c-app-launcher__group-title--PaddingBottom);
7362
- padding-left: var(--pf-c-app-launcher__group-title--PaddingLeft);
7363
- font-size: var(--pf-c-app-launcher__group-title--FontSize);
7364
- font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
7365
- color: var(--pf-c-app-launcher__group-title--Color);
7366
- }
7367
-
7368
- .pf-u-screen-reader {
7369
- position: fixed;
7370
- top: 0;
7371
- left: 0;
7372
- overflow: hidden;
7373
- clip: rect(0, 0, 0, 0);
7374
- white-space: nowrap;
7375
- border: 0;
7376
- }
7377
-
7378
- .pf-u-visible {
7379
- position: static;
7380
- overflow: visible;
7381
- clip: auto;
7382
- white-space: normal;
7383
- border: inherit;
7384
- }
7385
-
7386
- .pf-u-hidden {
7387
- display: none !important;
7388
- }
7389
-
7390
- @media screen and (min-width: 576px) {
7391
- .pf-u-screen-reader-on-sm {
7392
- position: fixed;
7393
- top: 0;
7394
- left: 0;
7395
- overflow: hidden;
7396
- clip: rect(0, 0, 0, 0);
7397
- white-space: nowrap;
7398
- border: 0;
7399
- }
7400
- }
7401
- @media screen and (min-width: 576px) {
7402
- .pf-u-visible-on-sm {
7403
- position: static;
7404
- overflow: visible;
7405
- clip: auto;
7406
- white-space: normal;
7407
- border: inherit;
7408
- }
7409
- }
7410
- @media screen and (min-width: 576px) {
7411
- .pf-u-hidden-on-sm {
7412
- display: none !important;
7413
- }
7414
- }
7415
- @media screen and (min-width: 768px) {
7416
- .pf-u-screen-reader-on-md {
7417
- position: fixed;
7418
- top: 0;
7419
- left: 0;
7420
- overflow: hidden;
7421
- clip: rect(0, 0, 0, 0);
7422
- white-space: nowrap;
7423
- border: 0;
7424
- }
7425
- }
7426
- @media screen and (min-width: 768px) {
7427
- .pf-u-visible-on-md {
7428
- position: static;
7429
- overflow: visible;
7430
- clip: auto;
7431
- white-space: normal;
7432
- border: inherit;
7433
- }
7434
- }
7435
- @media screen and (min-width: 768px) {
7436
- .pf-u-hidden-on-md {
7437
- display: none !important;
7438
- }
7439
- }
7440
- @media screen and (min-width: 992px) {
7441
- .pf-u-screen-reader-on-lg {
7442
- position: fixed;
7443
- top: 0;
7444
- left: 0;
7445
- overflow: hidden;
7446
- clip: rect(0, 0, 0, 0);
7447
- white-space: nowrap;
7448
- border: 0;
7449
- }
7450
- }
7451
- @media screen and (min-width: 992px) {
7452
- .pf-u-visible-on-lg {
7453
- position: static;
7454
- overflow: visible;
7455
- clip: auto;
7456
- white-space: normal;
7457
- border: inherit;
7458
- }
7620
+ .pf-c-app-launcher__menu-item.pf-m-link {
7621
+ --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-c-app-launcher__menu-item--m-link--PaddingRight);
7622
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
7459
7623
  }
7460
- @media screen and (min-width: 992px) {
7461
- .pf-u-hidden-on-lg {
7462
- display: none !important;
7463
- }
7624
+
7625
+ .pf-c-app-launcher__menu-item.pf-m-action {
7626
+ --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--m-action--Color);
7627
+ --pf-c-app-launcher__menu-item--Width: var(--pf-c-app-launcher__menu-item--m-action--Width);
7628
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
7629
+ font-size: var(--pf-c-app-launcher__menu-item--m-action--FontSize);
7464
7630
  }
7465
- @media screen and (min-width: 1200px) {
7466
- .pf-u-screen-reader-on-xl {
7467
- position: fixed;
7468
- top: 0;
7469
- left: 0;
7470
- overflow: hidden;
7471
- clip: rect(0, 0, 0, 0);
7472
- white-space: nowrap;
7473
- border: 0;
7474
- }
7631
+
7632
+ .pf-c-app-launcher__menu-item.pf-m-action:hover, .pf-c-app-launcher__menu-item.pf-m-action:focus {
7633
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--hover--Color);
7475
7634
  }
7476
- @media screen and (min-width: 1200px) {
7477
- .pf-u-visible-on-xl {
7478
- position: static;
7479
- overflow: visible;
7480
- clip: auto;
7481
- white-space: normal;
7482
- border: inherit;
7483
- }
7635
+
7636
+ .pf-c-app-launcher__menu-item-icon {
7637
+ display: inline-flex;
7638
+ align-items: center;
7639
+ justify-content: center;
7640
+ width: var(--pf-c-app-launcher__menu-item-icon--Width);
7641
+ height: var(--pf-c-app-launcher__menu-item-icon--Height);
7642
+ margin-right: var(--pf-c-app-launcher__menu-item-icon--MarginRight);
7484
7643
  }
7485
- @media screen and (min-width: 1200px) {
7486
- .pf-u-hidden-on-xl {
7487
- display: none !important;
7488
- }
7644
+
7645
+ .pf-c-app-launcher__menu-item-icon > * {
7646
+ max-width: 100%;
7647
+ max-height: 100%;
7489
7648
  }
7490
- @media screen and (min-width: 1450px) {
7491
- .pf-u-screen-reader-on-2xl {
7492
- position: fixed;
7493
- top: 0;
7494
- left: 0;
7495
- overflow: hidden;
7496
- clip: rect(0, 0, 0, 0);
7497
- white-space: nowrap;
7498
- border: 0;
7499
- }
7649
+
7650
+ .pf-c-app-launcher__menu-item-external-icon {
7651
+ padding-left: var(--pf-c-app-launcher__menu-item-external-icon--PaddingLeft);
7652
+ margin-left: auto;
7653
+ font-size: var(--pf-c-app-launcher__menu-item-external-icon--FontSize);
7654
+ color: var(--pf-c-app-launcher__menu-item-external-icon--Color);
7655
+ opacity: 0;
7656
+ transform: translateY(var(--pf-c-app-launcher__menu-item-external-icon--TranslateY));
7500
7657
  }
7501
- @media screen and (min-width: 1450px) {
7502
- .pf-u-visible-on-2xl {
7503
- position: static;
7504
- overflow: visible;
7505
- clip: auto;
7506
- white-space: normal;
7507
- border: inherit;
7508
- }
7658
+
7659
+ .pf-c-app-launcher__group + .pf-c-app-launcher__group {
7660
+ padding-top: var(--pf-c-app-launcher__group--group--PaddingTop);
7509
7661
  }
7510
- @media screen and (min-width: 1450px) {
7511
- .pf-u-hidden-on-2xl {
7512
- display: none !important;
7513
- }
7662
+
7663
+ .pf-c-app-launcher__group-title {
7664
+ padding-top: var(--pf-c-app-launcher__group-title--PaddingTop);
7665
+ padding-right: var(--pf-c-app-launcher__group-title--PaddingRight);
7666
+ padding-bottom: var(--pf-c-app-launcher__group-title--PaddingBottom);
7667
+ padding-left: var(--pf-c-app-launcher__group-title--PaddingLeft);
7668
+ font-size: var(--pf-c-app-launcher__group-title--FontSize);
7669
+ font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
7670
+ color: var(--pf-c-app-launcher__group-title--Color);
7514
7671
  }
7672
+
7515
7673
  .pf-c-avatar {
7516
7674
  --pf-c-avatar--BorderColor: transparent;
7517
7675
  --pf-c-avatar--BorderWidth: 0;
@@ -11951,6 +12109,10 @@ button.pf-c-breadcrumb__link {
11951
12109
  overflow-anchor: none;
11952
12110
  }
11953
12111
 
12112
+ .pf-c-dual-list-selector__list-item:focus {
12113
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
12114
+ }
12115
+
11954
12116
  .pf-c-dual-list-selector__list-item.pf-m-expandable {
11955
12117
  --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
11956
12118
  }
@@ -11975,10 +12137,6 @@ button.pf-c-breadcrumb__link {
11975
12137
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
11976
12138
  }
11977
12139
 
11978
- .pf-c-dual-list-selector__list-item-row:focus-within {
11979
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
11980
- }
11981
-
11982
12140
  .pf-c-dual-list-selector__list-item-row.pf-m-selected {
11983
12141
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
11984
12142
  }
@@ -12028,9 +12186,7 @@ button.pf-c-breadcrumb__link {
12028
12186
  position: relative;
12029
12187
  width: 100%;
12030
12188
  padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
12031
- text-align: left;
12032
12189
  cursor: pointer;
12033
- border: 0;
12034
12190
  }
12035
12191
 
12036
12192
  .pf-c-dual-list-selector__item-count {
@@ -14972,7 +15128,10 @@ ul.pf-c-list {
14972
15128
  --pf-c-menu--MinWidth: auto;
14973
15129
  --pf-c-menu--Width: auto;
14974
15130
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
15131
+ --pf-c-menu--Top: auto;
14975
15132
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
15133
+ --pf-c-menu--m-flyout__menu--Right: auto;
15134
+ --pf-c-menu--m-flyout__menu--Bottom: auto;
14976
15135
  --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
14977
15136
  --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
14978
15137
  --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
@@ -15086,15 +15245,38 @@ ul.pf-c-list {
15086
15245
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
15087
15246
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
15088
15247
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15248
+ top: var(--pf-c-menu--Top);
15089
15249
  z-index: var(--pf-c-menu--ZIndex);
15090
15250
  width: var(--pf-c-menu--Width);
15091
15251
  min-width: var(--pf-c-menu--MinWidth);
15092
15252
  background-color: var(--pf-c-menu--BackgroundColor);
15093
15253
  box-shadow: var(--pf-c-menu--BoxShadow);
15094
- }
15095
-
15096
- .pf-c-menu .pf-c-menu__content {
15097
- overflow-y: auto;
15254
+ --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
15255
+ --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
15256
+ --pf-c-menu--m-nav__list--PaddingTop: 0;
15257
+ --pf-c-menu--m-nav__list--PaddingBottom: 0;
15258
+ --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15259
+ --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15260
+ --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15261
+ --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
15262
+ --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
15263
+ --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
15264
+ --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
15265
+ --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
15266
+ --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
15267
+ --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15268
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
15269
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
15270
+ --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
15271
+ --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
15272
+ --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
15273
+ --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
15274
+ --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
15275
+ --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
15276
+ --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
15277
+ --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
15278
+ --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
15279
+ --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
15098
15280
  }
15099
15281
 
15100
15282
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
@@ -15106,33 +15288,26 @@ ul.pf-c-list {
15106
15288
  margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
15107
15289
  }
15108
15290
 
15109
- .pf-c-menu.pf-m-flyout {
15110
- overflow: visible;
15111
- }
15112
-
15113
- .pf-c-menu.pf-m-flyout .pf-c-menu {
15291
+ .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
15114
15292
  position: absolute;
15115
15293
  top: var(--pf-c-menu--m-flyout__menu--Top);
15116
- right: auto;
15294
+ right: var(--pf-c-menu--m-flyout__menu--Right);
15295
+ bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
15117
15296
  left: var(--pf-c-menu--m-flyout__menu--Left);
15118
15297
  }
15119
15298
 
15120
- .pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-top {
15121
- top: auto;
15122
- bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
15123
- }
15124
-
15125
- .pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-left {
15126
- right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
15127
- left: auto;
15299
+ .pf-c-menu .pf-c-menu.pf-m-flyout .pf-c-menu__content, .pf-c-menu.pf-m-flyout .pf-c-menu .pf-c-menu__content {
15300
+ overflow-y: visible;
15128
15301
  }
15129
15302
 
15130
- .pf-c-menu.pf-m-flyout .pf-c-menu__content {
15131
- overflow-y: visible;
15303
+ .pf-c-menu.pf-m-top {
15304
+ --pf-c-menu--m-flyout__menu--Top: auto;
15305
+ --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
15132
15306
  }
15133
15307
 
15134
- .pf-c-menu.pf-m-flyout .pf-c-menu__list-item {
15135
- position: relative;
15308
+ .pf-c-menu.pf-m-left {
15309
+ --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
15310
+ --pf-c-menu--m-flyout__menu--Left: auto;
15136
15311
  }
15137
15312
 
15138
15313
  .pf-c-menu.pf-m-drilldown {
@@ -15174,6 +15349,11 @@ ul.pf-c-list {
15174
15349
  transition: var(--pf-c-menu--m-drilldown__list--Transition);
15175
15350
  }
15176
15351
 
15352
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
15353
+ --pf-c-menu__list--PaddingTop: 0;
15354
+ --pf-c-menu__list--PaddingBottom: 0;
15355
+ }
15356
+
15177
15357
  .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
15178
15358
  z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
15179
15359
  }
@@ -15218,6 +15398,76 @@ ul.pf-c-list {
15218
15398
  --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
15219
15399
  }
15220
15400
 
15401
+ .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
15402
+ overflow-y: auto;
15403
+ }
15404
+
15405
+ .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
15406
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
15407
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
15408
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
15409
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
15410
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
15411
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
15412
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
15413
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
15414
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
15415
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
15416
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
15417
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
15418
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
15419
+ }
15420
+
15421
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
15422
+ position: relative;
15423
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
15424
+ }
15425
+
15426
+ .pf-c-menu.pf-m-nav .pf-c-menu__item::before, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item::before {
15427
+ position: absolute;
15428
+ right: 0;
15429
+ bottom: 0;
15430
+ left: 0;
15431
+ content: "";
15432
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
15433
+ }
15434
+
15435
+ .pf-c-menu.pf-m-nav .pf-c-menu__item:hover::after, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item:hover::after {
15436
+ position: absolute;
15437
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
15438
+ bottom: 0;
15439
+ left: 0;
15440
+ content: "";
15441
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
15442
+ }
15443
+
15444
+ .pf-c-menu.pf-m-nav .pf-c-menu {
15445
+ width: 100%;
15446
+ }
15447
+
15448
+ .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
15449
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
15450
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
15451
+ }
15452
+
15453
+ .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-top {
15454
+ --pf-c-menu--m-nav--c-menu--Top: auto;
15455
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
15456
+ }
15457
+
15458
+ .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-left {
15459
+ --pf-c-menu--m-nav--c-menu--Left: auto;
15460
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
15461
+ }
15462
+
15463
+ .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child {
15464
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
15465
+ }
15466
+
15467
+ .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child .pf-c-menu {
15468
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
15469
+ }
15470
+
15221
15471
  .pf-c-menu__breadcrumb {
15222
15472
  display: flex;
15223
15473
  align-items: center;
@@ -15290,6 +15540,7 @@ ul.pf-c-list {
15290
15540
 
15291
15541
  .pf-c-menu__list-item {
15292
15542
  --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
15543
+ position: relative;
15293
15544
  color: var(--pf-c-menu__list-item--Color);
15294
15545
  background-color: var(--pf-c-menu__list-item--BackgroundColor);
15295
15546
  }
@@ -15472,6 +15723,7 @@ ul.pf-c-list {
15472
15723
  }
15473
15724
 
15474
15725
  .pf-c-menu-toggle {
15726
+ --pf-c-menu-toggle--BorderRadius: 0;
15475
15727
  --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
15476
15728
  --pf-c-menu-toggle--PaddingRight: var(--pf-global--spacer--sm);
15477
15729
  --pf-c-menu-toggle--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -15506,12 +15758,27 @@ ul.pf-c-list {
15506
15758
  --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
15507
15759
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
15508
15760
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
15761
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
15509
15762
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
15510
15763
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
15511
15764
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
15512
15765
  --pf-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
15513
15766
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
15514
15767
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
15768
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
15769
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
15770
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
15771
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
15772
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
15773
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
15774
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
15775
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
15776
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
15777
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
15778
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
15779
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
15780
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
15781
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
15515
15782
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
15516
15783
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
15517
15784
  --pf-c-menu-toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
@@ -15542,6 +15809,7 @@ ul.pf-c-list {
15542
15809
  color: var(--pf-c-menu-toggle--Color);
15543
15810
  background-color: var(--pf-c-menu-toggle--BackgroundColor);
15544
15811
  border: 0;
15812
+ border-radius: var(--pf-c-menu-toggle--BorderRadius);
15545
15813
  }
15546
15814
 
15547
15815
  .pf-c-menu-toggle::before, .pf-c-menu-toggle::after {
@@ -15565,6 +15833,7 @@ ul.pf-c-list {
15565
15833
  }
15566
15834
 
15567
15835
  .pf-c-menu-toggle.pf-m-primary {
15836
+ --pf-c-menu-toggle--BorderRadius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
15568
15837
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-primary--Color);
15569
15838
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-primary--BackgroundColor);
15570
15839
  --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-c-menu-toggle--m-primary--hover--BackgroundColor);
@@ -15574,6 +15843,48 @@ ul.pf-c-list {
15574
15843
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
15575
15844
  }
15576
15845
 
15846
+ .pf-c-menu-toggle.pf-m-primary, .pf-c-menu-toggle.pf-m-primary::before {
15847
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
15848
+ }
15849
+
15850
+ .pf-c-menu-toggle.pf-m-secondary {
15851
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
15852
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
15853
+ }
15854
+
15855
+ .pf-c-menu-toggle.pf-m-secondary, .pf-c-menu-toggle.pf-m-secondary::before {
15856
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
15857
+ }
15858
+
15859
+ .pf-c-menu-toggle.pf-m-secondary::before {
15860
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
15861
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
15862
+ }
15863
+
15864
+ .pf-c-menu-toggle.pf-m-secondary::after {
15865
+ border: 0;
15866
+ }
15867
+
15868
+ .pf-c-menu-toggle.pf-m-secondary:hover {
15869
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
15870
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
15871
+ }
15872
+
15873
+ .pf-c-menu-toggle.pf-m-secondary:focus {
15874
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
15875
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
15876
+ }
15877
+
15878
+ .pf-c-menu-toggle.pf-m-secondary:active {
15879
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
15880
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
15881
+ }
15882
+
15883
+ .pf-c-menu-toggle.pf-m-secondary.pf-m-expanded {
15884
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
15885
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
15886
+ }
15887
+
15577
15888
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
15578
15889
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
15579
15890
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -16098,7 +16409,6 @@ ul.pf-c-list {
16098
16409
  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
16099
16410
  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
16100
16411
  --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
16101
- --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
16102
16412
  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
16103
16413
  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-c-nav__item--m-flyout--c-menu--Top) - var(--pf-c-nav__item--before--BorderWidth));
16104
16414
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
@@ -16107,11 +16417,10 @@ ul.pf-c-list {
16107
16417
  --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
16108
16418
  --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16109
16419
  --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
16420
+ --pf-c-nav__item--m-flyout--c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
16110
16421
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
16422
+ --pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
16111
16423
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-global--spacer--lg);
16112
- --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
16113
- --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
16114
- --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
16115
16424
  --pf-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-global--Color--light-200);
16116
16425
  --pf-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
16117
16426
  --pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-c-nav__link--OutlineOffset);
@@ -16120,17 +16429,52 @@ ul.pf-c-list {
16120
16429
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
16121
16430
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
16122
16431
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
16432
+ --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
16433
+ --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
16434
+ --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
16123
16435
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
16124
- --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
16125
- --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
16126
- --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
16127
- --pf-c-nav__item--m-drilldown__subnav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16128
- --pf-c-nav__item--m-drilldown__subnav--ZIndex: var(--pf-global--ZIndex--xs);
16129
- --pf-c-nav__item--m-drilldown__link--PaddingTop: var(--pf-global--spacer--md);
16130
- --pf-c-nav__item--m-drilldown__link--PaddingBottom: var(--pf-global--spacer--md);
16131
- --pf-c-nav__item--m-drilldown__link--FontSize: var(--pf-global--FontSize--md);
16132
- --pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate: 0;
16133
- --pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex: var(--pf-global--ZIndex--xs);
16436
+ --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
16437
+ --pf-c-nav--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16438
+ --pf-c-nav--c-menu__list--PaddingTop: 0;
16439
+ --pf-c-nav--c-menu__list--PaddingBottom: 0;
16440
+ --pf-c-nav--c-menu__list-item--Color: var(--pf-global--Color--light-100);
16441
+ --pf-c-nav--c-menu__list-item--hover--Color: var(--pf-global--Color--light-100);
16442
+ --pf-c-nav--c-menu__list-item--active--Color: var(--pf-global--Color--light-100);
16443
+ --pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
16444
+ --pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16445
+ --pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16446
+ --pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
16447
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
16448
+ --pf-c-nav--c-menu__item--PaddingBottom: var(--pf-global--spacer--md);
16449
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
16450
+ --pf-c-nav--c-menu__item--xl--PaddingRight: var(--pf-global--spacer--lg);
16451
+ --pf-c-nav--c-menu__item--xl--PaddingLeft: var(--pf-global--spacer--lg);
16452
+ --pf-c-nav--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
16453
+ --pf-c-nav--c-menu__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
16454
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
16455
+ --pf-c-nav--c-menu__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
16456
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: 0;
16457
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: transparent;
16458
+ --pf-c-nav--c-menu__item--m-current--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
16459
+ --pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth: var(--pf-global--BorderWidth--xl);
16460
+ --pf-c-nav--c-menu__item--m-current--after--BorderColor: var(--pf-global--active-color--400);
16461
+ --pf-c-nav--c-menu__item-description--Color: var(--pf-global--Color--400);
16462
+ --pf-c-nav--c-menu--m-flyout--left-offset: 0.25rem;
16463
+ --pf-c-nav--c-menu--m-flyout--m-left--right-offset: 0.25rem;
16464
+ --pf-c-nav--c-menu--m-flyout--Top: 0;
16465
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: calc(var(--pf-c-nav--c-menu--m-flyout--Top) * -1);
16466
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: auto;
16467
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: auto;
16468
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav--c-menu--m-flyout--left-offset));
16469
+ --pf-c-nav--c-menu--m-flyout--m-left--Right: calc(100% - var(--pf-c-nav--c-menu--m-flyout--m-left--right-offset));
16470
+ --pf-c-nav--c-menu--m-flyout--m-top--Bottom: 0;
16471
+ --pf-c-nav--c-menu--m-flyout--BoxShadow: var(--pf-global--BoxShadow--lg);
16472
+ --pf-c-nav--c-menu--m-flyout__item--PaddingTop: var(--pf-global--spacer--sm);
16473
+ --pf-c-nav--c-menu--m-flyout__item--PaddingRight: var(--pf-global--spacer--lg);
16474
+ --pf-c-nav--c-menu--m-flyout__item--PaddingBottom: var(--pf-global--spacer--sm);
16475
+ --pf-c-nav--c-menu--m-flyout__item--PaddingLeft: var(--pf-global--spacer--lg);
16476
+ --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
16477
+ --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
16134
16478
  --pf-c-nav__toggle--m-start--MarginRight: var(--pf-global--spacer--sm);
16135
16479
  position: relative;
16136
16480
  }
@@ -16148,8 +16492,98 @@ ul.pf-c-list {
16148
16492
  --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
16149
16493
  --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
16150
16494
  --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
16495
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--xl--PaddingRight);
16496
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--xl--PaddingLeft);
16151
16497
  }
16152
16498
  }
16499
+ .pf-c-nav .pf-c-menu {
16500
+ --pf-c-menu--MinWidth: 100%;
16501
+ --pf-c-menu--BackgroundColor: var(--pf-c-nav--c-menu--BackgroundColor);
16502
+ --pf-c-menu__list--PaddingTop: var(--pf-c-nav--c-menu__list--PaddingTop);
16503
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-nav--c-menu__list--PaddingBottom);
16504
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu__item--PaddingTop);
16505
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--PaddingRight);
16506
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu__item--PaddingBottom);
16507
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--PaddingLeft);
16508
+ --pf-c-menu__list-item--Color: var(--pf-c-nav--c-menu__list-item--Color);
16509
+ --pf-c-menu__list-item--hover--Color: var(--pf-c-nav--c-menu__list-item--hover--Color);
16510
+ --pf-c-menu__list-item--active--Color: var(--pf-c-nav--c-menu__list-item--active--Color);
16511
+ --pf-c-menu__list-item--focus-within--Color: var(--pf-c-nav--c-menu__list-item--focus-within--Color);
16512
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav--c-menu__list-item--hover--BackgroundColor);
16513
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor);
16514
+ --pf-c-menu__item-description--Color: var(--pf-c-nav--c-menu__item-description--Color);
16515
+ }
16516
+
16517
+ .pf-c-nav .pf-c-menu:first-child > .pf-c-menu__content {
16518
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
16519
+ }
16520
+
16521
+ .pf-c-nav .pf-c-menu.pf-m-flyout, .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu {
16522
+ --pf-c-menu--BoxShadow: var(--pf-c-nav--c-menu--m-flyout--BoxShadow);
16523
+ --pf-c-menu__list--PaddingTop: 0;
16524
+ --pf-c-menu__list--PaddingBottom: 0;
16525
+ --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
16526
+ --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color);
16527
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
16528
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
16529
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
16530
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu--m-flyout__item--PaddingLeft);
16531
+ top: var(--pf-c-nav--c-menu--m-flyout--c-menu--Top);
16532
+ right: var(--pf-c-nav--c-menu--m-flyout--c-menu--Right);
16533
+ bottom: var(--pf-c-nav--c-menu--m-flyout--c-menu--Bottom);
16534
+ left: var(--pf-c-nav--c-menu--m-flyout--c-menu--Left);
16535
+ }
16536
+
16537
+ .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover {
16538
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
16539
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
16540
+ }
16541
+
16542
+ .pf-c-nav .pf-c-menu.pf-m-top {
16543
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: auto;
16544
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav--c-menu--m-flyout--m-top--Bottom);
16545
+ }
16546
+
16547
+ .pf-c-nav .pf-c-menu.pf-m-left {
16548
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav--c-menu--m-flyout--m-left--Right);
16549
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: auto;
16550
+ }
16551
+
16552
+ .pf-c-nav .pf-c-menu .pf-c-divider {
16553
+ margin-top: 0;
16554
+ margin-bottom: 0;
16555
+ }
16556
+
16557
+ .pf-c-nav .pf-c-menu__item {
16558
+ position: relative;
16559
+ outline-offset: var(--pf-c-nav--c-menu__item--OutlineOffset);
16560
+ }
16561
+
16562
+ .pf-c-nav .pf-c-menu__item::before, .pf-c-nav .pf-c-menu__item::after {
16563
+ position: absolute;
16564
+ top: 0;
16565
+ content: "";
16566
+ }
16567
+
16568
+ .pf-c-nav .pf-c-menu__item::before {
16569
+ right: 0;
16570
+ bottom: calc(var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
16571
+ left: 0;
16572
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
16573
+ }
16574
+
16575
+ .pf-c-nav .pf-c-menu__item::after {
16576
+ bottom: 0;
16577
+ left: 0;
16578
+ border-left: var(--pf-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-c-nav--c-menu__item--after--BorderLeftColor);
16579
+ }
16580
+
16581
+ .pf-c-nav .pf-c-menu__item.pf-m-current {
16582
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
16583
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
16584
+ background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
16585
+ }
16586
+
16153
16587
  .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
16154
16588
  content: none;
16155
16589
  }
@@ -16431,9 +16865,13 @@ ul.pf-c-list {
16431
16865
  --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
16432
16866
  --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
16433
16867
  --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
16868
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop);
16434
16869
  --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
16870
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
16435
16871
  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
16436
16872
  --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
16873
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
16874
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
16437
16875
  position: absolute;
16438
16876
  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
16439
16877
  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
@@ -16443,16 +16881,6 @@ ul.pf-c-list {
16443
16881
  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
16444
16882
  }
16445
16883
 
16446
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
16447
- top: auto;
16448
- bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
16449
- }
16450
-
16451
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
16452
- right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
16453
- left: auto;
16454
- }
16455
-
16456
16884
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
16457
16885
  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
16458
16886
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
@@ -16481,27 +16909,6 @@ ul.pf-c-list {
16481
16909
  border-left: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
16482
16910
  }
16483
16911
 
16484
- .pf-c-nav__item.pf-m-drilldown {
16485
- --pf-c-nav__subnav--PaddingTop: var(--pf-c-nav__item--m-drilldown__subnav--PaddingTop);
16486
- --pf-c-nav__subnav--PaddingBottom: var(--pf-c-nav__item--m-drilldown__subnav--PaddingBottom);
16487
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__item--m-drilldown__subnav--PaddingLeft);
16488
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: var(--pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate);
16489
- }
16490
-
16491
- .pf-c-nav__item.pf-m-drilldown > .pf-c-nav__subnav {
16492
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav__item--m-drilldown__link--PaddingTop);
16493
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__item--m-drilldown__link--PaddingBottom);
16494
- --pf-c-nav__link--FontSize: var(--pf-c-nav__item--m-drilldown__link--FontSize);
16495
- --pf-c-nav__subnav--MaxHeight: 100%;
16496
- position: absolute;
16497
- top: 0;
16498
- left: 100%;
16499
- z-index: var(--pf-c-nav__item--m-drilldown__subnav--ZIndex);
16500
- width: 100%;
16501
- height: 100%;
16502
- background-color: var(--pf-c-nav__item--m-drilldown__subnav--BackgroundColor);
16503
- }
16504
-
16505
16912
  .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
16506
16913
  left: 0;
16507
16914
  z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
@@ -16542,16 +16949,16 @@ ul.pf-c-list {
16542
16949
  border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
16543
16950
  }
16544
16951
 
16545
- .pf-c-nav__link:hover {
16952
+ .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
16546
16953
  color: var(--pf-c-nav__link--hover--Color);
16547
16954
  background-color: var(--pf-c-nav__link--hover--BackgroundColor);
16548
16955
  }
16549
16956
 
16550
- .pf-c-nav__link:hover::before {
16957
+ .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
16551
16958
  border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
16552
16959
  }
16553
16960
 
16554
- .pf-c-nav__link:hover::after {
16961
+ .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
16555
16962
  border-color: var(--pf-c-nav__link--hover--after--BorderColor);
16556
16963
  border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
16557
16964
  }
@@ -24937,6 +25344,89 @@ label.pf-c-radio, .pf-c-radio__label,
24937
25344
  --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
24938
25345
  }
24939
25346
 
25347
+ .pf-c-panel {
25348
+ --pf-c-panel--Width: auto;
25349
+ --pf-c-panel--MinWidth: auto;
25350
+ --pf-c-panel--MaxWidth: none;
25351
+ --pf-c-panel--ZIndex: auto;
25352
+ --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
25353
+ --pf-c-panel--BoxShadow: none;
25354
+ --pf-c-panel--before--BorderWidth: 0;
25355
+ --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
25356
+ --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
25357
+ --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
25358
+ --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
25359
+ --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
25360
+ --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
25361
+ --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
25362
+ --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
25363
+ --pf-c-panel__main--MaxHeight: none;
25364
+ --pf-c-panel__main--Overflow: visible;
25365
+ --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
25366
+ --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
25367
+ --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
25368
+ --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
25369
+ --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
25370
+ --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
25371
+ --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
25372
+ --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
25373
+ --pf-c-panel__footer--BoxShadow: none;
25374
+ --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
25375
+ --pf-c-panel--m-scrollable__main--Overflow: auto;
25376
+ --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
25377
+ position: relative;
25378
+ z-index: var(--pf-c-panel--ZIndex);
25379
+ width: var(--pf-c-panel--Width);
25380
+ min-width: var(--pf-c-panel--MinWidth);
25381
+ max-width: var(--pf-c-panel--MaxWidth);
25382
+ background-color: var(--pf-c-panel--BackgroundColor);
25383
+ box-shadow: var(--pf-c-panel--BoxShadow);
25384
+ }
25385
+
25386
+ .pf-c-panel::before {
25387
+ position: absolute;
25388
+ top: 0;
25389
+ right: 0;
25390
+ bottom: 0;
25391
+ left: 0;
25392
+ pointer-events: none;
25393
+ content: "";
25394
+ border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
25395
+ }
25396
+
25397
+ .pf-c-panel.pf-m-bordered {
25398
+ --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
25399
+ }
25400
+
25401
+ .pf-c-panel.pf-m-raised {
25402
+ --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
25403
+ --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
25404
+ }
25405
+
25406
+ .pf-c-panel.pf-m-scrollable {
25407
+ --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
25408
+ --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
25409
+ --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
25410
+ }
25411
+
25412
+ .pf-c-panel__header {
25413
+ padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
25414
+ }
25415
+
25416
+ .pf-c-panel__main {
25417
+ max-height: var(--pf-c-panel__main--MaxHeight);
25418
+ overflow: var(--pf-c-panel__main--Overflow);
25419
+ }
25420
+
25421
+ .pf-c-panel__main-body {
25422
+ padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
25423
+ }
25424
+
25425
+ .pf-c-panel__footer {
25426
+ padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
25427
+ box-shadow: var(--pf-c-panel__footer--BoxShadow);
25428
+ }
25429
+
24940
25430
  .pf-l-flex {
24941
25431
  --pf-l-flex--Display: flex;
24942
25432
  --pf-l-flex--FlexWrap: wrap;