@patternfly/patternfly 4.157.1 → 4.159.2

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 (26) hide show
  1. package/README.md +2 -2
  2. package/RELEASE-NOTES.md +30 -0
  3. package/components/Dropdown/dropdown.css +46 -11
  4. package/components/Dropdown/dropdown.scss +60 -11
  5. package/components/Menu/menu.css +84 -0
  6. package/components/Menu/menu.scss +109 -0
  7. package/components/MenuToggle/menu-toggle.css +48 -1
  8. package/components/MenuToggle/menu-toggle.scss +62 -1
  9. package/components/Nav/nav.css +3 -3
  10. package/components/Nav/nav.scss +2 -1
  11. package/components/Table/table.css +2 -2
  12. package/components/Table/table.scss +2 -2
  13. package/docs/components/Dropdown/examples/Dropdown.css +1 -0
  14. package/docs/components/Dropdown/examples/Dropdown.md +94 -0
  15. package/docs/components/Menu/examples/Menu.md +1 -0
  16. package/docs/components/MenuToggle/examples/MenuToggle.md +79 -14
  17. package/docs/components/Nav/examples/Navigation.css +12 -4
  18. package/docs/components/Nav/examples/Navigation.md +51 -232
  19. package/docs/components/Table/examples/Table.md +2168 -76
  20. package/docs/demos/Button/examples/Button.md +176 -0
  21. package/docs/demos/Table/examples/Table.md +3734 -95
  22. package/package.json +1 -1
  23. package/patternfly-no-reset.css +183 -17
  24. package/patternfly.css +183 -17
  25. package/patternfly.min.css +1 -1
  26. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.157.1",
4
+ "version": "4.159.2",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -12141,10 +12141,10 @@ label.pf-c-check, .pf-c-check__label,
12141
12141
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
12142
12142
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
12143
12143
  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
12144
- --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12145
- --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
12146
12144
  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12147
12145
  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
12146
+ --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12147
+ --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
12148
12148
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12149
12149
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
12150
12150
  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
@@ -12158,9 +12158,22 @@ label.pf-c-check, .pf-c-check__label,
12158
12158
  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
12159
12159
  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
12160
12160
  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
12161
- --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
12162
12161
  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
12162
+ --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
12163
12163
  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
12164
+ --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
12165
+ --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
12166
+ --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
12167
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
12168
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
12169
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
12170
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
12171
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
12172
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
12173
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
12174
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
12175
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
12176
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
12164
12177
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
12165
12178
  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
12166
12179
  --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
@@ -12387,18 +12400,18 @@ label.pf-c-check, .pf-c-check__label,
12387
12400
  border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12388
12401
  border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12389
12402
  }
12390
- .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
12403
+ .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 {
12391
12404
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
12392
12405
  }
12393
- .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 {
12406
+ .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 {
12394
12407
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
12395
12408
  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
12396
12409
  }
12397
- .pf-c-dropdown__toggle:not(.pf-m-action):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
12410
+ .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 {
12398
12411
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
12399
12412
  border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
12400
12413
  }
12401
- .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 {
12414
+ .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 {
12402
12415
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
12403
12416
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
12404
12417
  }
@@ -12414,7 +12427,7 @@ label.pf-c-check, .pf-c-check__label,
12414
12427
  .pf-c-dropdown__toggle.pf-m-plain::before {
12415
12428
  border: 0;
12416
12429
  }
12417
- .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 {
12430
+ .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 {
12418
12431
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
12419
12432
  }
12420
12433
  .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-plain:disabled {
@@ -12434,15 +12447,37 @@ label.pf-c-check, .pf-c-check__label,
12434
12447
  .pf-c-dropdown__toggle.pf-m-primary:hover {
12435
12448
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
12436
12449
  }
12437
- .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
12438
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
12439
- }
12440
12450
  .pf-c-dropdown__toggle.pf-m-primary:focus {
12441
12451
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
12442
12452
  }
12453
+ .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
12454
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
12455
+ }
12443
12456
  .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
12444
12457
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
12445
12458
  }
12459
+ .pf-c-dropdown__toggle.pf-m-secondary {
12460
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
12461
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
12462
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
12463
+ }
12464
+ .pf-c-dropdown__toggle.pf-m-secondary::before {
12465
+ border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
12466
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
12467
+ }
12468
+ .pf-c-dropdown__toggle.pf-m-secondary:hover {
12469
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
12470
+ }
12471
+ .pf-c-dropdown__toggle.pf-m-secondary:focus {
12472
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
12473
+ }
12474
+ .pf-c-dropdown__toggle.pf-m-secondary:active, .pf-c-dropdown__toggle.pf-m-secondary.pf-m-active {
12475
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
12476
+ }
12477
+ .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary {
12478
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
12479
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
12480
+ }
12446
12481
  .pf-c-dropdown__toggle > .pf-c-badge {
12447
12482
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
12448
12483
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
@@ -15745,6 +15780,7 @@ ul.pf-c-list {
15745
15780
  --pf-c-menu--MinWidth: auto;
15746
15781
  --pf-c-menu--Width: auto;
15747
15782
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
15783
+ --pf-c-menu--Top: auto;
15748
15784
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
15749
15785
  --pf-c-menu--m-flyout__menu--Right: auto;
15750
15786
  --pf-c-menu--m-flyout__menu--Bottom: auto;
@@ -15861,11 +15897,38 @@ ul.pf-c-list {
15861
15897
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
15862
15898
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
15863
15899
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15900
+ top: var(--pf-c-menu--Top);
15864
15901
  z-index: var(--pf-c-menu--ZIndex);
15865
15902
  width: var(--pf-c-menu--Width);
15866
15903
  min-width: var(--pf-c-menu--MinWidth);
15867
15904
  background-color: var(--pf-c-menu--BackgroundColor);
15868
15905
  box-shadow: var(--pf-c-menu--BoxShadow);
15906
+ --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
15907
+ --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
15908
+ --pf-c-menu--m-nav__list--PaddingTop: 0;
15909
+ --pf-c-menu--m-nav__list--PaddingBottom: 0;
15910
+ --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15911
+ --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15912
+ --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15913
+ --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
15914
+ --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
15915
+ --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
15916
+ --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
15917
+ --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
15918
+ --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
15919
+ --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15920
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
15921
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
15922
+ --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
15923
+ --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
15924
+ --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
15925
+ --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
15926
+ --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
15927
+ --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
15928
+ --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
15929
+ --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
15930
+ --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
15931
+ --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
15869
15932
  }
15870
15933
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
15871
15934
  overflow: visible;
@@ -15965,6 +16028,62 @@ ul.pf-c-list {
15965
16028
  .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
15966
16029
  overflow-y: auto;
15967
16030
  }
16031
+ .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
16032
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
16033
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
16034
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
16035
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
16036
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
16037
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
16038
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
16039
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
16040
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
16041
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
16042
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
16043
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
16044
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
16045
+ }
16046
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
16047
+ position: relative;
16048
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
16049
+ }
16050
+ .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 {
16051
+ position: absolute;
16052
+ right: 0;
16053
+ bottom: 0;
16054
+ left: 0;
16055
+ content: "";
16056
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
16057
+ }
16058
+ .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 {
16059
+ position: absolute;
16060
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
16061
+ bottom: 0;
16062
+ left: 0;
16063
+ content: "";
16064
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
16065
+ }
16066
+ .pf-c-menu.pf-m-nav .pf-c-menu {
16067
+ width: 100%;
16068
+ }
16069
+ .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
16070
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
16071
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
16072
+ }
16073
+ .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 {
16074
+ --pf-c-menu--m-nav--c-menu--Top: auto;
16075
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
16076
+ }
16077
+ .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 {
16078
+ --pf-c-menu--m-nav--c-menu--Left: auto;
16079
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
16080
+ }
16081
+ .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 {
16082
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
16083
+ }
16084
+ .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 {
16085
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
16086
+ }
15968
16087
 
15969
16088
  .pf-c-menu__breadcrumb {
15970
16089
  display: flex;
@@ -16235,14 +16354,28 @@ ul.pf-c-list {
16235
16354
  --pf-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
16236
16355
  --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
16237
16356
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
16238
- --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
16239
16357
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
16358
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
16240
16359
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
16241
16360
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
16242
16361
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
16243
16362
  --pf-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
16244
16363
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
16245
16364
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
16365
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
16366
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
16367
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
16368
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
16369
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
16370
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
16371
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
16372
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
16373
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
16374
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
16375
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
16376
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
16377
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
16378
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
16246
16379
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
16247
16380
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
16248
16381
  --pf-c-menu-toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
@@ -16302,6 +16435,39 @@ ul.pf-c-list {
16302
16435
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
16303
16436
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
16304
16437
  }
16438
+ .pf-c-menu-toggle.pf-m-primary, .pf-c-menu-toggle.pf-m-primary::before {
16439
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
16440
+ }
16441
+ .pf-c-menu-toggle.pf-m-secondary {
16442
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
16443
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
16444
+ }
16445
+ .pf-c-menu-toggle.pf-m-secondary, .pf-c-menu-toggle.pf-m-secondary::before {
16446
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
16447
+ }
16448
+ .pf-c-menu-toggle.pf-m-secondary::before {
16449
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
16450
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
16451
+ }
16452
+ .pf-c-menu-toggle.pf-m-secondary::after {
16453
+ border: 0;
16454
+ }
16455
+ .pf-c-menu-toggle.pf-m-secondary:hover {
16456
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
16457
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
16458
+ }
16459
+ .pf-c-menu-toggle.pf-m-secondary:focus {
16460
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
16461
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
16462
+ }
16463
+ .pf-c-menu-toggle.pf-m-secondary:active {
16464
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
16465
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
16466
+ }
16467
+ .pf-c-menu-toggle.pf-m-secondary.pf-m-expanded {
16468
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
16469
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
16470
+ }
16305
16471
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
16306
16472
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
16307
16473
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -17289,14 +17455,14 @@ ul.pf-c-list {
17289
17455
  border-color: var(--pf-c-nav__link--after--BorderColor);
17290
17456
  border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
17291
17457
  }
17292
- .pf-c-nav__link:hover {
17458
+ .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
17293
17459
  color: var(--pf-c-nav__link--hover--Color);
17294
17460
  background-color: var(--pf-c-nav__link--hover--BackgroundColor);
17295
17461
  }
17296
- .pf-c-nav__link:hover::before {
17462
+ .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
17297
17463
  border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
17298
17464
  }
17299
- .pf-c-nav__link:hover::after {
17465
+ .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
17300
17466
  border-color: var(--pf-c-nav__link--hover--after--BorderColor);
17301
17467
  border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
17302
17468
  }
@@ -23536,8 +23702,8 @@ svg.pf-c-spinner.pf-m-xl {
23536
23702
  --pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
23537
23703
  --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
23538
23704
  --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
23539
- --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
23540
- --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
23705
+ --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
23706
+ --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
23541
23707
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
23542
23708
  --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
23543
23709
  --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
package/patternfly.css CHANGED
@@ -12277,10 +12277,10 @@ label.pf-c-check, .pf-c-check__label,
12277
12277
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
12278
12278
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
12279
12279
  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
12280
- --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12281
- --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
12282
12280
  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12283
12281
  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
12282
+ --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12283
+ --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
12284
12284
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12285
12285
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
12286
12286
  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
@@ -12294,9 +12294,22 @@ label.pf-c-check, .pf-c-check__label,
12294
12294
  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
12295
12295
  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
12296
12296
  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
12297
- --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
12298
12297
  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
12298
+ --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
12299
12299
  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
12300
+ --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
12301
+ --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
12302
+ --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
12303
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
12304
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
12305
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
12306
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
12307
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
12308
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
12309
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
12310
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
12311
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
12312
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
12300
12313
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
12301
12314
  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
12302
12315
  --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
@@ -12523,18 +12536,18 @@ label.pf-c-check, .pf-c-check__label,
12523
12536
  border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12524
12537
  border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12525
12538
  }
12526
- .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
12539
+ .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 {
12527
12540
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
12528
12541
  }
12529
- .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 {
12542
+ .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 {
12530
12543
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
12531
12544
  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
12532
12545
  }
12533
- .pf-c-dropdown__toggle:not(.pf-m-action):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
12546
+ .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 {
12534
12547
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
12535
12548
  border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
12536
12549
  }
12537
- .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 {
12550
+ .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 {
12538
12551
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
12539
12552
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
12540
12553
  }
@@ -12550,7 +12563,7 @@ label.pf-c-check, .pf-c-check__label,
12550
12563
  .pf-c-dropdown__toggle.pf-m-plain::before {
12551
12564
  border: 0;
12552
12565
  }
12553
- .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 {
12566
+ .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 {
12554
12567
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
12555
12568
  }
12556
12569
  .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-plain:disabled {
@@ -12570,15 +12583,37 @@ label.pf-c-check, .pf-c-check__label,
12570
12583
  .pf-c-dropdown__toggle.pf-m-primary:hover {
12571
12584
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
12572
12585
  }
12573
- .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
12574
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
12575
- }
12576
12586
  .pf-c-dropdown__toggle.pf-m-primary:focus {
12577
12587
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
12578
12588
  }
12589
+ .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
12590
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
12591
+ }
12579
12592
  .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
12580
12593
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
12581
12594
  }
12595
+ .pf-c-dropdown__toggle.pf-m-secondary {
12596
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
12597
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
12598
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
12599
+ }
12600
+ .pf-c-dropdown__toggle.pf-m-secondary::before {
12601
+ border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
12602
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
12603
+ }
12604
+ .pf-c-dropdown__toggle.pf-m-secondary:hover {
12605
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
12606
+ }
12607
+ .pf-c-dropdown__toggle.pf-m-secondary:focus {
12608
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
12609
+ }
12610
+ .pf-c-dropdown__toggle.pf-m-secondary:active, .pf-c-dropdown__toggle.pf-m-secondary.pf-m-active {
12611
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
12612
+ }
12613
+ .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary {
12614
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
12615
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
12616
+ }
12582
12617
  .pf-c-dropdown__toggle > .pf-c-badge {
12583
12618
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
12584
12619
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
@@ -15881,6 +15916,7 @@ ul.pf-c-list {
15881
15916
  --pf-c-menu--MinWidth: auto;
15882
15917
  --pf-c-menu--Width: auto;
15883
15918
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
15919
+ --pf-c-menu--Top: auto;
15884
15920
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
15885
15921
  --pf-c-menu--m-flyout__menu--Right: auto;
15886
15922
  --pf-c-menu--m-flyout__menu--Bottom: auto;
@@ -15997,11 +16033,38 @@ ul.pf-c-list {
15997
16033
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
15998
16034
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
15999
16035
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
16036
+ top: var(--pf-c-menu--Top);
16000
16037
  z-index: var(--pf-c-menu--ZIndex);
16001
16038
  width: var(--pf-c-menu--Width);
16002
16039
  min-width: var(--pf-c-menu--MinWidth);
16003
16040
  background-color: var(--pf-c-menu--BackgroundColor);
16004
16041
  box-shadow: var(--pf-c-menu--BoxShadow);
16042
+ --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
16043
+ --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16044
+ --pf-c-menu--m-nav__list--PaddingTop: 0;
16045
+ --pf-c-menu--m-nav__list--PaddingBottom: 0;
16046
+ --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16047
+ --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16048
+ --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16049
+ --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
16050
+ --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
16051
+ --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
16052
+ --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
16053
+ --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
16054
+ --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
16055
+ --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
16056
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
16057
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
16058
+ --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
16059
+ --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
16060
+ --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
16061
+ --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
16062
+ --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
16063
+ --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
16064
+ --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
16065
+ --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
16066
+ --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
16067
+ --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
16005
16068
  }
16006
16069
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
16007
16070
  overflow: visible;
@@ -16101,6 +16164,62 @@ ul.pf-c-list {
16101
16164
  .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
16102
16165
  overflow-y: auto;
16103
16166
  }
16167
+ .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
16168
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
16169
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
16170
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
16171
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
16172
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
16173
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
16174
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
16175
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
16176
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
16177
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
16178
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
16179
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
16180
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
16181
+ }
16182
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
16183
+ position: relative;
16184
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
16185
+ }
16186
+ .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 {
16187
+ position: absolute;
16188
+ right: 0;
16189
+ bottom: 0;
16190
+ left: 0;
16191
+ content: "";
16192
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
16193
+ }
16194
+ .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 {
16195
+ position: absolute;
16196
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
16197
+ bottom: 0;
16198
+ left: 0;
16199
+ content: "";
16200
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
16201
+ }
16202
+ .pf-c-menu.pf-m-nav .pf-c-menu {
16203
+ width: 100%;
16204
+ }
16205
+ .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
16206
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
16207
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
16208
+ }
16209
+ .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 {
16210
+ --pf-c-menu--m-nav--c-menu--Top: auto;
16211
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
16212
+ }
16213
+ .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 {
16214
+ --pf-c-menu--m-nav--c-menu--Left: auto;
16215
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
16216
+ }
16217
+ .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 {
16218
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
16219
+ }
16220
+ .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 {
16221
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
16222
+ }
16104
16223
 
16105
16224
  .pf-c-menu__breadcrumb {
16106
16225
  display: flex;
@@ -16371,14 +16490,28 @@ ul.pf-c-list {
16371
16490
  --pf-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
16372
16491
  --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
16373
16492
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
16374
- --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
16375
16493
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
16494
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
16376
16495
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
16377
16496
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
16378
16497
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
16379
16498
  --pf-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
16380
16499
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
16381
16500
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
16501
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
16502
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
16503
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
16504
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
16505
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
16506
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
16507
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
16508
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
16509
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
16510
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
16511
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
16512
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
16513
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
16514
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
16382
16515
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
16383
16516
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
16384
16517
  --pf-c-menu-toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
@@ -16438,6 +16571,39 @@ ul.pf-c-list {
16438
16571
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
16439
16572
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
16440
16573
  }
16574
+ .pf-c-menu-toggle.pf-m-primary, .pf-c-menu-toggle.pf-m-primary::before {
16575
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
16576
+ }
16577
+ .pf-c-menu-toggle.pf-m-secondary {
16578
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
16579
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
16580
+ }
16581
+ .pf-c-menu-toggle.pf-m-secondary, .pf-c-menu-toggle.pf-m-secondary::before {
16582
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
16583
+ }
16584
+ .pf-c-menu-toggle.pf-m-secondary::before {
16585
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
16586
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
16587
+ }
16588
+ .pf-c-menu-toggle.pf-m-secondary::after {
16589
+ border: 0;
16590
+ }
16591
+ .pf-c-menu-toggle.pf-m-secondary:hover {
16592
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
16593
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
16594
+ }
16595
+ .pf-c-menu-toggle.pf-m-secondary:focus {
16596
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
16597
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
16598
+ }
16599
+ .pf-c-menu-toggle.pf-m-secondary:active {
16600
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
16601
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
16602
+ }
16603
+ .pf-c-menu-toggle.pf-m-secondary.pf-m-expanded {
16604
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
16605
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
16606
+ }
16441
16607
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
16442
16608
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
16443
16609
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -17425,14 +17591,14 @@ ul.pf-c-list {
17425
17591
  border-color: var(--pf-c-nav__link--after--BorderColor);
17426
17592
  border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
17427
17593
  }
17428
- .pf-c-nav__link:hover {
17594
+ .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
17429
17595
  color: var(--pf-c-nav__link--hover--Color);
17430
17596
  background-color: var(--pf-c-nav__link--hover--BackgroundColor);
17431
17597
  }
17432
- .pf-c-nav__link:hover::before {
17598
+ .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
17433
17599
  border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
17434
17600
  }
17435
- .pf-c-nav__link:hover::after {
17601
+ .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
17436
17602
  border-color: var(--pf-c-nav__link--hover--after--BorderColor);
17437
17603
  border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
17438
17604
  }
@@ -23672,8 +23838,8 @@ svg.pf-c-spinner.pf-m-xl {
23672
23838
  --pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
23673
23839
  --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
23674
23840
  --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
23675
- --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
23676
- --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
23841
+ --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
23842
+ --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
23677
23843
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
23678
23844
  --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
23679
23845
  --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;