@patternfly/patternfly 6.0.0-alpha.176 → 6.0.0-alpha.178

package/components/_index.css

@@ -408,11 +408,11 @@
   --pf-v6-c-alert__action--TranslateY: 0.125rem;
   --pf-v6-c-alert__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v6-c-alert__description--PaddingBlockStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-alert__action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-alert__action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base);
   --pf-v6-c-alert__description--action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base);
-  --pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-alert--m-custom--BorderColor: var(--pf-t--global--border--color--status--custom--default);
   --pf-v6-c-alert--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
   --pf-v6-c-alert--m-custom__title--Color: var(--pf-t--global--text--color--regular);
@@ -569,15 +569,12 @@
   grid-area: actiongroup;
   padding-block-start: var(--pf-v6-c-alert__action-group--PaddingBlockStart);
 }
-.pf-v6-c-alert__action-group > .pf-v6-c-button {
-  --pf-v6-c-button--m-link--m-inline--hover--TextDecoration: none;
-}
 .pf-v6-c-alert__action-group > .pf-v6-c-button:not(:last-child) {
   margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd);
 }
 
 :where(:root, .pf-v6-c-alert-group) {
-  --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-alert-group--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
@@ -5122,7 +5119,7 @@ ul) {
   --pf-v6-c-drawer__panel--MinWidth: 50%;
   --pf-v6-c-drawer__panel--MaxHeight: auto;
   --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
-  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -5209,7 +5206,7 @@ ul) {
   --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
   --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
   --pf-v6-c-drawer__panel--BoxShadow: none;
-  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
+  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
   --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-drawer__panel--after--BackgroundColor: transparent;
@@ -5229,19 +5226,19 @@ ul) {
 }
 
 .pf-v6-c-drawer {
-  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
-  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--right);
+  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
+  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow-x: hidden;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
-  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--right);
+  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
 }
 
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
-  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
+  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
 }
 
 .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) {
@@ -5987,11 +5984,11 @@ ul) {
   --pf-v6-c-empty-state--m-xs__body--MarginBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
   --pf-v6-c-empty-state--m-xl__body--MarginBlockStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
   --pf-v6-c-empty-state__footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-empty-state--m-xs__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --pf-v6-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
 }
 
 .pf-v6-c-empty-state {
@@ -7421,10 +7418,10 @@ select ~ .pf-v6-c-form-control__utilities {
 }
 
 :where(:root, .pf-v6-c-inline-edit) {
-  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
-  --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--plain);
   --pf-v6-c-inline-edit__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-inline-edit__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold);
 }
@@ -9813,9 +9810,6 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
   --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-menu-toggle--active--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --pf-v6-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--action--clicked);
-  --pf-v6-c-menu-toggle--active--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
@@ -9843,9 +9837,6 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
   --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
   --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
-  --pf-v6-c-menu-toggle--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--clicked);
-  --pf-v6-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--clicked);
-  --pf-v6-c-menu-toggle--m-primary--active--BorderColor: transparent;
   --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
   --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
   --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
@@ -9860,9 +9851,6 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
-  --pf-v6-c-menu-toggle--m-secondary--active--Color: var(--pf-t--global--text--color--brand--clicked);
-  --pf-v6-c-menu-toggle--m-secondary--active--BorderWidth: var(--pf-t--global--border--width--action--clicked);
-  --pf-v6-c-menu-toggle--m-secondary--active--BorderColor: var(--pf-t--global--border--color--brand--clicked);
   --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
   --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
   --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
@@ -9880,7 +9868,6 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-t--global--color--brand--clicked);
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
@@ -9893,7 +9880,6 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
   --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
-  --pf-v6-c-menu-toggle--m-plain--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
@@ -9960,9 +9946,6 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
   --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
   --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
-  --pf-v6-c-menu-toggle--active--Color: var(--pf-v6-c-menu-toggle--m-primary--active--Color);
-  --pf-v6-c-menu-toggle--active--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--active--BackgroundColor);
-  --pf-v6-c-menu-toggle--active--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--active--BorderColor);
   --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
   --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
   --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
@@ -9978,9 +9961,6 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
   --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
   --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
-  --pf-v6-c-menu-toggle--active--Color: var(--pf-v6-c-menu-toggle--m-secondary--active--Color);
-  --pf-v6-c-menu-toggle--active--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--active--BorderWidth);
-  --pf-v6-c-menu-toggle--active--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--active--BorderColor);
   --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
   --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
   --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
@@ -10002,7 +9982,6 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
   --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
   --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
-  --pf-v6-c-menu-toggle--active--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--active--BackgroundColor);
   --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
   --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
   --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
@@ -10024,13 +10003,6 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
   --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
 }
-.pf-v6-c-menu-toggle:is(:active, .pf-m-active) {
-  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--active--Color);
-  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--active--BackgroundColor);
-  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--active--BorderWidth);
-  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--active--BorderColor);
-  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--active__toggle-icon--Color);
-}
 .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
   --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
   --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
@@ -10117,9 +10089,6 @@ ul.pf-v6-c-list {
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):is(:hover, :focus) {
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor);
 }
-.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):is(:active, .pf-m-active) {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor);
-}
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded {
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor);
 }
@@ -10240,6 +10209,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
   --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v6-c-modal-box__title--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--md);
   --pf-v6-c-modal-box__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -10361,6 +10331,7 @@ ul.pf-v6-c-list {
   flex: 0 0 auto;
   font-family: var(--pf-v6-c-modal-box__title--FontFamily);
   font-size: var(--pf-v6-c-modal-box__title--FontSize);
+  font-weight: var(--pf-v6-c-modal-box__title--FontWeight);
   line-height: var(--pf-v6-c-modal-box__title--LineHeight);
 }
 .pf-v6-c-modal-box__title.pf-m-icon {
@@ -11341,6 +11312,8 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0;
   --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
+  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
   --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -11489,6 +11462,10 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd);
   --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart);
 }
+.pf-v6-c-page__sidebar-body.pf-m-context-selector {
+  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd);
+  --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart);
+}
 .pf-v6-c-page__sidebar-body.pf-m-inset-none {
   --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0;
   --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0;

package/docs/components/Page/examples/Page.md

@@ -402,6 +402,7 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
 | `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
 | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
+| `.pf-m-context-selector` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body to contain a context selector. |
 | `.pf-m-inset-none` | `.pf-v6-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
 | `.pf-m-light` | `.pf-v6-c-page__sidebar` | Modifies the sidebar the light variation. **Note: for use with a light themed nav component** |
 | `.pf-m-light` | `.pf-v6-c-page__main-section` | Modifies a main page section to have a light theme. |

package/docs/demos/AboutModal/examples/AboutModal.md

@@ -110,36 +110,6 @@ This demo implements the about modal, including the backdrop.
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Overview</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Services</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
             <div
               class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
             >

package/docs/demos/Alert/examples/Alert.md

@@ -108,36 +108,6 @@ section: components
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Overview</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Services</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
             <div
               class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
             >
@@ -514,36 +484,6 @@ section: components
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Overview</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Services</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
             <div
               class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
             >
@@ -1020,36 +960,6 @@ section: components
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Overview</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Services</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
             <div
               class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
             >

package/docs/demos/BackToTop/examples/BackToTop.md

@@ -109,36 +109,6 @@ cssPrefix: pf-d-back-to-top
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Overview</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Services</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
             <div
               class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
             >

package/docs/demos/Banner/examples/Banner.md

@@ -110,36 +110,6 @@ wrapperTag: div
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Overview</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Services</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
             <div
               class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
             >
@@ -604,36 +574,6 @@ wrapperTag: div
           >
             <div class="pf-v6-c-toolbar__content">
               <div class="pf-v6-c-toolbar__content-section">
-                <div class="pf-v6-c-toolbar__item">
-                  <button
-                    class="pf-v6-c-menu-toggle"
-                    type="button"
-                    aria-expanded="false"
-                  >
-                    <span class="pf-v6-c-menu-toggle__text">Overview</span>
-                    <span class="pf-v6-c-menu-toggle__controls">
-                      <span class="pf-v6-c-menu-toggle__toggle-icon">
-                        <i class="fas fa-caret-down" aria-hidden="true"></i>
-                      </span>
-                    </span>
-                  </button>
-                </div>
-
-                <div class="pf-v6-c-toolbar__item">
-                  <button
-                    class="pf-v6-c-menu-toggle"
-                    type="button"
-                    aria-expanded="false"
-                  >
-                    <span class="pf-v6-c-menu-toggle__text">Services</span>
-                    <span class="pf-v6-c-menu-toggle__controls">
-                      <span class="pf-v6-c-menu-toggle__toggle-icon">
-                        <i class="fas fa-caret-down" aria-hidden="true"></i>
-                      </span>
-                    </span>
-                  </button>
-                </div>
-
                 <div
                   class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
                 >

package/docs/demos/CardView/examples/CardView.md

@@ -108,36 +108,6 @@ section: patterns
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Overview</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Services</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
             <div
               class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
             >

package/docs/demos/Dashboard/examples/Dashboard.md

@@ -106,36 +106,6 @@ cssPrefix: pf-d-dashboard
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Overview</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
-            <div class="pf-v6-c-toolbar__item">
-              <button
-                class="pf-v6-c-menu-toggle"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v6-c-menu-toggle__text">Services</span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-
             <div
               class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
             >