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

package/components/Page/page.css

@@ -2,6 +2,7 @@
   --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
+  --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width--base: 18.125rem;
   --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -109,6 +110,9 @@
   --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
+  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-page {
@@ -151,6 +155,16 @@
     grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
   }
 }
+.pf-v6-c-page.pf-m-dock {
+  --pf-v6-c-page--masthead--main-container--GridArea: main;
+  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
+  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
+  --pf-v6-c-page__main-container--MarginInlineStart: 0;
+  grid-template-areas: "dock main";
+  grid-template-rows: auto;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
+}
 .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
   --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
   --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -207,6 +221,11 @@
   }
 }
 
+.pf-v6-c-page__dock {
+  z-index: var(--pf-v6-c-page__dock--ZIndex);
+  grid-area: dock;
+}
+
 .pf-v6-c-page__sidebar {
   z-index: var(--pf-v6-c-page__sidebar--ZIndex);
   display: flex;
@@ -510,6 +529,7 @@
   flex-direction: column;
   align-self: var(--pf-v6-c-page__main-container--AlignSelf);
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
+  margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
   background: var(--pf-v6-c-page__main-container--BackgroundColor);

package/components/Page/page.scss

@@ -12,6 +12,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Header
   --#{$page}--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
 
+  // Dock
+  --#{$page}__dock--ZIndex: var(--pf-t--global--z-index--md);
+
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$page}__sidebar--Width--base: #{pf-size-prem(290px)};
@@ -166,6 +169,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Drawer section
   --#{$page}__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$page}__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
+
+  // Docked nav
+  --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
+  --#{$page}--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
 }
 
 .#{$page} {
@@ -190,6 +198,18 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     grid-template-columns: var(--#{$page}__sidebar--Width) 1fr;
   }
 
+  &.pf-m-dock {
+    --#{$page}--masthead--main-container--GridArea: main;
+    --#{$page}__main-container--MaxHeight: var(--#{$page}--m-dock__main-container--MaxHeight);
+    --#{$page}__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart);
+    --#{$page}__main-container--MarginInlineStart: 0;
+
+    grid-template-areas: "dock main";
+    grid-template-rows: auto;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--#{$page}--m-dock--ColumnGap);
+  }
+
   // Hamburger menu animation
   // mobile - show expand on hover
   > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
@@ -230,6 +250,12 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   grid-area: header;
 }
 
+// Dock
+.#{$page}__dock {
+  z-index: var(--#{$page}__dock--ZIndex);
+  grid-area: dock;
+}
+
 // Sidebar
 .#{$page}__sidebar {
   z-index: var(--#{$page}__sidebar--ZIndex);
@@ -404,6 +430,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   flex-direction: column;
   align-self: var(--#{$page}__main-container--AlignSelf);
   max-height: var(--#{$page}__main-container--MaxHeight);
+  margin-block-start: var(--#{$page}__main-container--MarginBlockStart, 0);
   margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
   margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
   background: var(--#{$page}__main-container--BackgroundColor);

package/components/Toolbar/toolbar.css

@@ -40,6 +40,7 @@
   --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
   --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
   --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -243,6 +244,16 @@
 .pf-v6-c-toolbar.pf-m-no-background {
   --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
 }
+.pf-v6-c-toolbar.pf-m-vertical {
+  --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
+  --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
+  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
+  --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
+}
+.pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
+  flex-direction: column;
+  align-items: center;
+}
 
 .pf-v6-c-toolbar__item {
   --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
@@ -322,6 +333,9 @@
   row-gap: var(--pf-v6-c-toolbar__group--RowGap);
   column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
 }
+.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
+  row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
+}
 .pf-v6-c-toolbar__group.pf-m-filter-group {
   column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
 }
@@ -333,9 +347,15 @@
 .pf-v6-c-toolbar__group.pf-m-action-group {
   column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
 }
+.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
+  row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
+}
 .pf-v6-c-toolbar__group.pf-m-action-group-plain {
   column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
 }
+.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
+  row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
+}
 .pf-v6-c-toolbar__group.pf-m-action-group-inline {
   flex-wrap: wrap;
   column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -412,7 +432,8 @@
 }
 .pf-v6-c-toolbar__group.pf-m-align-end,
 .pf-v6-c-toolbar__item.pf-m-align-end {
-  margin-inline-start: auto;
+  margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+  margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
 }
 .pf-v6-c-toolbar__group.pf-m-flex-grow,
 .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -667,7 +688,8 @@
   }
   .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
   .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
-    margin-inline-start: auto;
+    margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+    margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
   }
   .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
   .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -919,7 +941,8 @@
   }
   .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
   .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
-    margin-inline-start: auto;
+    margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+    margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
   }
   .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
   .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -1171,7 +1194,8 @@
   }
   .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
   .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
-    margin-inline-start: auto;
+    margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+    margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
   }
   .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
   .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -1423,7 +1447,8 @@
   }
   .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
   .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
-    margin-inline-start: auto;
+    margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+    margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
   }
   .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
   .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -1675,7 +1700,8 @@
   }
   .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
   .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
-    margin-inline-start: auto;
+    margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+    margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
   }
   .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
   .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {

package/components/Toolbar/toolbar.scss

@@ -69,6 +69,9 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   --#{$toolbar}--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$toolbar}--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
 
+  // * Toolbar vertical
+  --#{$toolbar}--m-vertical--Width: fit-content;
+
   // * Toolbar expand all
   --#{$toolbar}__expand-all-icon--Rotate: 0;
   --#{$toolbar}__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -193,9 +196,17 @@ $pf-v6--include-toolbar-breakpoints: true !default;
     --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-no-background--BackgroundColor);
   }
 
-  // @include resize-observer-placeholder('md') {
-  //   do resize observer things here
-  // }
+  &.pf-m-vertical {
+    --#{$toolbar}--child--m-align-end--MarginBlockStart: auto;
+    --#{$toolbar}--child--m-align-end--MarginInlineStart: 0;
+    --#{$toolbar}--PaddingBlockEnd: 0;
+    --#{$toolbar}--Width: var(--#{$toolbar}--m-vertical--Width);
+
+    :is(.#{$toolbar}__group, .#{$toolbar}__item, .#{$toolbar}__content-section) {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
 }
 
 // - Toolbar item
@@ -237,6 +248,10 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   row-gap: var(--#{$toolbar}__group--RowGap);
   column-gap: var(--#{$toolbar}__group--ColumnGap);
 
+  .#{$toolbar}.pf-m-vertical & {
+    row-gap: var(--#{$toolbar}__group--ColumnGap);
+  }
+
   // - Toolbar filter group
   &.pf-m-filter-group {
     column-gap: var(--#{$toolbar}__group--m-filter-group--ColumnGap);
@@ -252,11 +267,19 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   // - Toolbar action group
   &.pf-m-action-group {
     column-gap: var(--#{$toolbar}__group--m-action-group--ColumnGap);
+
+    .#{$toolbar}.pf-m-vertical & {
+      row-gap: var(--#{$toolbar}__group--m-action-group--ColumnGap);
+    }
   }
 
   // - Toolbar action group plain
   &.pf-m-action-group-plain {
     column-gap: var(--#{$toolbar}__group--m-action-group-plain--ColumnGap);
+
+    .#{$toolbar}.pf-m-vertical & {
+      row-gap: var(--#{$toolbar}__group--m-action-group-plain--ColumnGap);
+    }
   }
 
   // - Toolbar action group inline
@@ -348,7 +371,8 @@ $pf-v6--include-toolbar-breakpoints: true !default;
       }
 
       &.pf-m-align-end#{$breakpoint-name} {
-        margin-inline-start: auto;
+        margin-block-start: var(--#{$toolbar}--child--m-align-end--MarginBlockStart, 0);
+        margin-inline-start: var(--#{$toolbar}--child--m-align-end--MarginInlineStart, auto);
       }
 
       &.pf-m-flex-grow#{$breakpoint-name} {