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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/components/Compass/compass.css +14 -4
  2. package/components/Compass/compass.scss +16 -4
  3. package/components/Drawer/drawer.css +30 -26
  4. package/components/Drawer/drawer.scss +7 -3
  5. package/components/Masthead/masthead.css +40 -0
  6. package/components/Masthead/masthead.scss +47 -0
  7. package/components/Nav/nav.css +55 -0
  8. package/components/Nav/nav.scss +70 -3
  9. package/components/Page/page.css +20 -0
  10. package/components/Page/page.scss +27 -0
  11. package/components/Toolbar/toolbar.css +32 -6
  12. package/components/Toolbar/toolbar.scss +28 -4
  13. package/components/_index.css +191 -36
  14. package/docs/components/Compass/examples/Compass.css +8 -2
  15. package/docs/components/Compass/examples/Compass.md +22 -1
  16. package/docs/components/Masthead/examples/masthead.md +67 -0
  17. package/docs/components/Nav/examples/Navigation.md +44 -0
  18. package/docs/components/Page/examples/Page.md +37 -0
  19. package/docs/components/Toolbar/examples/Toolbar.md +28 -0
  20. package/docs/demos/AboutModal/examples/AboutModal.md +5 -5
  21. package/docs/demos/Alert/examples/Alert.md +15 -15
  22. package/docs/demos/BackToTop/examples/BackToTop.md +5 -5
  23. package/docs/demos/Banner/examples/Banner.md +10 -10
  24. package/docs/demos/CardView/examples/CardView.md +5 -5
  25. package/docs/demos/Compass/examples/Compass.md +208 -0
  26. package/docs/demos/Dashboard/examples/Dashboard.md +5 -5
  27. package/docs/demos/DataList/examples/DataList.md +20 -23
  28. package/docs/demos/DescriptionList/examples/DescriptionList.md +15 -15
  29. package/docs/demos/Drawer/examples/Drawer.md +25 -25
  30. package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -30
  31. package/docs/demos/Masthead/examples/Masthead.md +55 -58
  32. package/docs/demos/Modal/examples/Modal.md +30 -33
  33. package/docs/demos/Nav/examples/Nav.md +299 -62
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +25 -25
  35. package/docs/demos/Page/examples/Page.md +70 -79
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -35
  37. package/docs/demos/Skeleton/examples/Skeleton.md +5 -5
  38. package/docs/demos/Table/examples/Table.md +75 -78
  39. package/docs/demos/Tabs/examples/Tabs.md +30 -30
  40. package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
  41. package/docs/demos/Wizard/examples/Wizard.md +45 -48
  42. package/package.json +2 -2
  43. package/patternfly-no-globals.css +191 -36
  44. package/patternfly.css +191 -36
  45. package/patternfly.min.css +1 -1
  46. package/patternfly.min.css.map +1 -1
@@ -12283,16 +12283,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12283
12283
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
12284
12284
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
12285
12285
  --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
12286
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12287
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12288
- --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12289
12286
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12290
12287
  --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
12291
12288
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
12292
12289
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
12293
12290
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
12294
- --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12291
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12292
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12295
12293
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
12294
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12295
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12296
12296
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
12297
12297
  --pf-v6-c-compass__message-bar--Width: 450px;
12298
12298
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
@@ -12343,6 +12343,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12343
12343
  background-image: var(--pf-v6-c-compass--BackgroundImage);
12344
12344
  background-size: cover;
12345
12345
  }
12346
+ .pf-v6-c-compass.pf-m-dock {
12347
+ grid-template-areas: "dock main";
12348
+ grid-template-rows: auto;
12349
+ grid-template-columns: auto 1fr;
12350
+ align-items: stretch;
12351
+ padding: 0;
12352
+ }
12353
+ .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
12354
+ padding: var(--pf-v6-c-compass--Padding);
12355
+ }
12346
12356
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12347
12357
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12348
12358
  }
@@ -15002,7 +15012,7 @@ ul) {
15002
15012
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
15003
15013
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
15004
15014
  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
15005
- --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
15015
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
15006
15016
  }
15007
15017
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
15008
15018
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -15031,7 +15041,7 @@ ul) {
15031
15041
  visibility: visible;
15032
15042
  }
15033
15043
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15034
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
15044
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
15035
15045
  }
15036
15046
 
15037
15047
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -15380,82 +15390,86 @@ ul) {
15380
15390
  }
15381
15391
  @media (min-width: 48rem) {
15382
15392
  .pf-v6-c-drawer__panel.pf-m-width-25 {
15383
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15393
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15384
15394
  }
15385
15395
  .pf-v6-c-drawer__panel.pf-m-width-33 {
15386
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15396
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15387
15397
  }
15388
15398
  .pf-v6-c-drawer__panel.pf-m-width-50 {
15389
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15399
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15390
15400
  }
15391
15401
  .pf-v6-c-drawer__panel.pf-m-width-66 {
15392
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15402
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15393
15403
  }
15394
15404
  .pf-v6-c-drawer__panel.pf-m-width-75 {
15395
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15405
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15396
15406
  }
15397
15407
  .pf-v6-c-drawer__panel.pf-m-width-100 {
15398
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15408
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15409
+ --pf-v6-c-drawer__main--Gap: 0;
15399
15410
  }
15400
15411
  }
15401
15412
  @media (min-width: 62rem) {
15402
15413
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
15403
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15414
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15404
15415
  }
15405
15416
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
15406
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15417
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15407
15418
  }
15408
15419
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
15409
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15420
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15410
15421
  }
15411
15422
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
15412
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15423
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15413
15424
  }
15414
15425
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
15415
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15426
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15416
15427
  }
15417
15428
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
15418
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15429
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15430
+ --pf-v6-c-drawer__main--Gap: 0;
15419
15431
  }
15420
15432
  }
15421
15433
  @media (min-width: 75rem) {
15422
15434
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
15423
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15435
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15424
15436
  }
15425
15437
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
15426
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15438
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15427
15439
  }
15428
15440
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
15429
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15441
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15430
15442
  }
15431
15443
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
15432
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15444
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15433
15445
  }
15434
15446
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
15435
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15447
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15436
15448
  }
15437
15449
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
15438
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15450
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15451
+ --pf-v6-c-drawer__main--Gap: 0;
15439
15452
  }
15440
15453
  }
15441
15454
  @media (min-width: 90.625rem) {
15442
15455
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
15443
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15456
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15444
15457
  }
15445
15458
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
15446
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15459
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15447
15460
  }
15448
15461
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
15449
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15462
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15450
15463
  }
15451
15464
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
15452
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15465
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15453
15466
  }
15454
15467
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
15455
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15468
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15456
15469
  }
15457
15470
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
15458
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15471
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15472
+ --pf-v6-c-drawer__main--Gap: 0;
15459
15473
  }
15460
15474
  }
15461
15475
  @media (min-width: 48rem) {
@@ -18993,6 +19007,15 @@ ul.pf-v6-c-list {
18993
19007
  --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
18994
19008
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
18995
19009
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
19010
+ --pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
19011
+ --pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
19012
+ --pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
19013
+ --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
19014
+ --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
19015
+ --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19016
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
19017
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
19018
+ --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
18996
19019
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
18997
19020
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
18998
19021
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
@@ -19013,6 +19036,7 @@ ul.pf-v6-c-list {
19013
19036
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
19014
19037
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
19015
19038
  display: grid;
19039
+ grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
19016
19040
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
19017
19041
  row-gap: var(--pf-v6-c-masthead--RowGap);
19018
19042
  column-gap: var(--pf-v6-c-masthead--ColumnGap);
@@ -19045,6 +19069,36 @@ ul.pf-v6-c-list {
19045
19069
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
19046
19070
  }
19047
19071
  }
19072
+ .pf-v6-c-masthead.pf-m-docked {
19073
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
19074
+ --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
19075
+ --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
19076
+ --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
19077
+ --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
19078
+ --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
19079
+ --pf-v6-c-masthead--GridTemplateColumns: auto;
19080
+ --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
19081
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
19082
+ --pf-v6-c-masthead__main--GridColumn: auto;
19083
+ --pf-v6-c-masthead__content--GridColumn: auto;
19084
+ --pf-v6-c-masthead__logo--Width: auto;
19085
+ --pf-v6-c-masthead__main--MarginInlineEnd: 0;
19086
+ display: flex;
19087
+ flex-direction: column;
19088
+ align-items: center;
19089
+ width: fit-content;
19090
+ height: 100%;
19091
+ backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
19092
+ }
19093
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
19094
+ flex-direction: column;
19095
+ flex-grow: 1;
19096
+ align-self: revert;
19097
+ }
19098
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
19099
+ --pf-v6-c-masthead--c-toolbar--Width: fit-content;
19100
+ height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
19101
+ }
19048
19102
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
19049
19103
  flex-wrap: nowrap;
19050
19104
  min-width: 0;
@@ -21093,6 +21147,15 @@ ul.pf-v6-c-list {
21093
21147
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
21094
21148
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
21095
21149
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
21150
+ --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
21151
+ --pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
21152
+ --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
21153
+ --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
21154
+ --pf-v6-c-nav__item--accent--ScaleY: 0;
21155
+ --pf-v6-c-nav__item--current--accent--ScaleY: 1;
21156
+ --pf-v6-c-nav__item--accent--TransitionDuration: 0;
21157
+ --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
21158
+ --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
21096
21159
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
21097
21160
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
21098
21161
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -21117,6 +21180,7 @@ ul.pf-v6-c-list {
21117
21180
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
21118
21181
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
21119
21182
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
21183
+ --pf-v6-c-nav__link-text--FontSize: initial;
21120
21184
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
21121
21185
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
21122
21186
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -21157,6 +21221,11 @@ ul.pf-v6-c-list {
21157
21221
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
21158
21222
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
21159
21223
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
21224
+ --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
21225
+ --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
21226
+ --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
21227
+ --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
21228
+ --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
21160
21229
  }
21161
21230
  @media screen and (prefers-reduced-motion: no-preference) {
21162
21231
  .pf-v6-c-nav {
@@ -21198,6 +21267,21 @@ ul.pf-v6-c-list {
21198
21267
  .pf-v6-c-nav.pf-m-fill {
21199
21268
  flex-grow: 1;
21200
21269
  }
21270
+ .pf-v6-c-nav.pf-m-docked {
21271
+ --pf-v6-c-nav--PaddingBlockStart: 0;
21272
+ --pf-v6-c-nav--PaddingBlockEnd: 0;
21273
+ --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
21274
+ --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
21275
+ --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
21276
+ --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
21277
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
21278
+ width: fit-content;
21279
+ }
21280
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
21281
+ position: relative;
21282
+ align-self: center;
21283
+ min-width: 1lh;
21284
+ }
21201
21285
  .pf-v6-c-nav .pf-v6-c-menu {
21202
21286
  --pf-v6-c-menu--MinWidth: 100%;
21203
21287
  }
@@ -21261,14 +21345,34 @@ ul.pf-v6-c-list {
21261
21345
  }
21262
21346
 
21263
21347
  .pf-v6-c-nav__item {
21348
+ position: relative;
21264
21349
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
21265
21350
  }
21351
+ .pf-v6-c-nav__item::before {
21352
+ position: absolute;
21353
+ inset-block-start: 0;
21354
+ inset-block-end: 0;
21355
+ inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
21356
+ width: var(--pf-v6-c-nav__item--accent--size);
21357
+ pointer-events: none;
21358
+ content: var(--pf-v6-c-nav__item--accent--content, "");
21359
+ background-color: var(--pf-v6-c-nav__item--accent--color);
21360
+ border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
21361
+ transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
21362
+ transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
21363
+ transition-property: scale;
21364
+ scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
21365
+ }
21266
21366
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
21267
21367
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
21268
21368
  }
21269
21369
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
21270
21370
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
21271
21371
  }
21372
+ .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
21373
+ --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
21374
+ --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
21375
+ }
21272
21376
 
21273
21377
  .pf-v6-c-nav__section {
21274
21378
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -21330,6 +21434,10 @@ ul.pf-v6-c-list {
21330
21434
  color: var(--pf-v6-c-nav__link-icon--Color);
21331
21435
  }
21332
21436
 
21437
+ .pf-v6-c-nav__link-text {
21438
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
21439
+ }
21440
+
21333
21441
  .pf-v6-c-nav__toggle {
21334
21442
  flex: none;
21335
21443
  align-self: start;
@@ -21385,6 +21493,7 @@ ul.pf-v6-c-list {
21385
21493
  }
21386
21494
 
21387
21495
  .pf-v6-c-nav:where(.pf-m-horizontal) {
21496
+ --pf-v6-c-nav__item--accent--content: none;
21388
21497
  padding: 0;
21389
21498
  overflow: hidden;
21390
21499
  }
@@ -21750,6 +21859,7 @@ ul.pf-v6-c-list {
21750
21859
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21751
21860
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
21752
21861
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
21862
+ --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
21753
21863
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
21754
21864
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
21755
21865
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -21857,6 +21967,9 @@ ul.pf-v6-c-list {
21857
21967
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
21858
21968
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
21859
21969
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
21970
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
21971
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
21972
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
21860
21973
  }
21861
21974
  @media screen and (prefers-reduced-motion: no-preference) {
21862
21975
  .pf-v6-c-page {
@@ -21899,6 +22012,16 @@ ul.pf-v6-c-list {
21899
22012
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
21900
22013
  }
21901
22014
  }
22015
+ .pf-v6-c-page.pf-m-dock {
22016
+ --pf-v6-c-page--masthead--main-container--GridArea: main;
22017
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
22018
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
22019
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
22020
+ grid-template-areas: "dock main";
22021
+ grid-template-rows: auto;
22022
+ grid-template-columns: auto 1fr;
22023
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
22024
+ }
21902
22025
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
21903
22026
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
21904
22027
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -21955,6 +22078,11 @@ ul.pf-v6-c-list {
21955
22078
  }
21956
22079
  }
21957
22080
 
22081
+ .pf-v6-c-page__dock {
22082
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
22083
+ grid-area: dock;
22084
+ }
22085
+
21958
22086
  .pf-v6-c-page__sidebar {
21959
22087
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
21960
22088
  display: flex;
@@ -22258,6 +22386,7 @@ ul.pf-v6-c-list {
22258
22386
  flex-direction: column;
22259
22387
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
22260
22388
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22389
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
22261
22390
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22262
22391
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22263
22392
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -30291,6 +30420,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30291
30420
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
30292
30421
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
30293
30422
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
30423
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
30294
30424
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
30295
30425
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
30296
30426
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -30494,6 +30624,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30494
30624
  .pf-v6-c-toolbar.pf-m-no-background {
30495
30625
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
30496
30626
  }
30627
+ .pf-v6-c-toolbar.pf-m-vertical {
30628
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
30629
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
30630
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
30631
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
30632
+ }
30633
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
30634
+ flex-direction: column;
30635
+ align-items: center;
30636
+ }
30497
30637
 
30498
30638
  .pf-v6-c-toolbar__item {
30499
30639
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
@@ -30573,6 +30713,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30573
30713
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
30574
30714
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30575
30715
  }
30716
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
30717
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30718
+ }
30576
30719
  .pf-v6-c-toolbar__group.pf-m-filter-group {
30577
30720
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
30578
30721
  }
@@ -30584,9 +30727,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30584
30727
  .pf-v6-c-toolbar__group.pf-m-action-group {
30585
30728
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30586
30729
  }
30730
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
30731
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30732
+ }
30587
30733
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30588
30734
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30589
30735
  }
30736
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30737
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30738
+ }
30590
30739
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
30591
30740
  flex-wrap: wrap;
30592
30741
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -30663,7 +30812,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30663
30812
  }
30664
30813
  .pf-v6-c-toolbar__group.pf-m-align-end,
30665
30814
  .pf-v6-c-toolbar__item.pf-m-align-end {
30666
- margin-inline-start: auto;
30815
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
30816
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
30667
30817
  }
30668
30818
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
30669
30819
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -30918,7 +31068,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30918
31068
  }
30919
31069
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
30920
31070
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
30921
- margin-inline-start: auto;
31071
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31072
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
30922
31073
  }
30923
31074
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
30924
31075
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -31170,7 +31321,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31170
31321
  }
31171
31322
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
31172
31323
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
31173
- margin-inline-start: auto;
31324
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31325
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31174
31326
  }
31175
31327
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
31176
31328
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -31422,7 +31574,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31422
31574
  }
31423
31575
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
31424
31576
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
31425
- margin-inline-start: auto;
31577
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31578
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31426
31579
  }
31427
31580
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
31428
31581
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -31674,7 +31827,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31674
31827
  }
31675
31828
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
31676
31829
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
31677
- margin-inline-start: auto;
31830
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31831
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31678
31832
  }
31679
31833
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
31680
31834
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -31926,7 +32080,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31926
32080
  }
31927
32081
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
31928
32082
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
31929
- margin-inline-start: auto;
32083
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
32084
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31930
32085
  }
31931
32086
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
31932
32087
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {