@patternfly/patternfly 6.1.0-prerelease.6 → 6.1.0-prerelease.8

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 (13) hide show
  1. package/components/Menu/menu.css +7 -3
  2. package/components/Menu/menu.scss +5 -3
  3. package/components/Page/page.css +4 -1
  4. package/components/Page/page.scss +3 -2
  5. package/components/_index.css +11 -4
  6. package/docs/components/Menu/examples/Menu.md +24 -32
  7. package/docs/components/Page/examples/Page.css +1 -1
  8. package/docs/components/Page/examples/Page.md +10 -7
  9. package/package.json +2 -2
  10. package/patternfly-no-globals.css +11 -4
  11. package/patternfly.css +11 -4
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Menu/menu.css CHANGED
@@ -68,7 +68,6 @@
68
68
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
69
69
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
70
70
  --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
71
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
72
71
  --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
73
72
  --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
74
73
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -554,8 +553,13 @@
554
553
  .pf-v6-c-menu__item-action.pf-m-favorited,
555
554
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
556
555
  .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
557
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
558
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
556
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
557
+ }
558
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
559
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
560
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
561
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
562
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
559
563
  }
560
564
 
561
565
  .pf-v6-c-menu__breadcrumb {
package/components/Menu/menu.scss CHANGED
@@ -101,7 +101,6 @@
101
101
  // * Menu action
102
102
  --#{$menu}__item-action--FontSize: var(--pf-t--global--font--size--body--default);
103
103
  --#{$menu}__item-action--icon--size: var(--#{$menu}__item-action--FontSize, var(--pf-t--global--icon--size--md));
104
- --#{$menu}__item-action--Color: var(--pf-t--global--icon--color--subtle);
105
104
  --#{$menu}__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
106
105
  --#{$menu}__item-action--button--MinWidth: calc(var(--#{$menu}__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
107
106
 
@@ -613,8 +612,11 @@
613
612
  &.pf-m-favorited,
614
613
  &.pf-m-favorited:hover,
615
614
  &.pf-m-favorited .#{$button} {
616
- --#{$button}--Color: var(--#{$menu}__item-action--m-favorited--Color);
617
- --#{$menu}__item-action--Color: var(--#{$menu}__item-action--m-favorited--Color);
615
+ --#{$button}--m-plain__icon--Color: var(--#{$menu}__item-action--m-favorited--Color);
616
+
617
+ &:is(:hover, :focus) {
618
+ --#{$button}--hover__icon--Color: var(--#{$menu}__item-action--m-favorited--Color);
619
+ }
618
620
  }
619
621
  }
620
622
 
package/components/Page/page.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
5
5
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
6
6
  --pf-v6-c-page__sidebar--Width: 18.125rem;
7
- --pf-v6-c-page__sidebar--xl--Width: auto;
7
+ --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
8
8
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9
9
  --pf-v6-c-page__sidebar--BoxShadow: none;
10
10
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -193,18 +193,21 @@
193
193
  flex-grow: 0;
194
194
  }
195
195
 
196
+ .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
196
197
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
197
198
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
198
199
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
199
200
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
200
201
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
201
202
  }
203
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
202
204
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
203
205
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
204
206
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
205
207
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
206
208
  align-items: center;
207
209
  }
210
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
208
211
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
209
212
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
210
213
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
package/components/Page/page.scss CHANGED
@@ -15,7 +15,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
15
15
  // Sidebar
16
16
  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
17
17
  --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
18
- --#{$page}__sidebar--xl--Width: auto;
18
+ --#{$page}__sidebar--xl--Width: #{pf-size-prem(290px)}; // TODO Can remove at breaking change
19
19
  --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
20
20
  --#{$page}__sidebar--BoxShadow: none;
21
21
 
@@ -136,7 +136,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
136
136
  background-color: var(--#{$page}--BackgroundColor);
137
137
 
138
138
  @media (min-width: $pf-v6-global--breakpoint--xl) {
139
- --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width);
139
+ --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width); // TODO can remove at breaking change
140
140
 
141
141
  grid-template-areas:
142
142
  "header header"
@@ -247,6 +247,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
247
247
  }
248
248
  }
249
249
 
250
+ .#{$page}__main-subnav,
250
251
  .#{$page}__main-breadcrumb,
251
252
  .#{$page}__main-tabs,
252
253
  .#{$page}__main-section,
package/components/_index.css CHANGED
@@ -9431,7 +9431,6 @@ ul.pf-v6-c-list {
9431
9431
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
9432
9432
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
9433
9433
  --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
9434
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
9435
9434
  --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
9436
9435
  --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
9437
9436
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -9917,8 +9916,13 @@ ul.pf-v6-c-list {
9917
9916
  .pf-v6-c-menu__item-action.pf-m-favorited,
9918
9917
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
9919
9918
  .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
9920
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9921
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9919
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9920
+ }
9921
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
9922
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
9923
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
9924
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
9925
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9922
9926
  }
9923
9927
 
9924
9928
  .pf-v6-c-menu__breadcrumb {
@@ -11395,7 +11399,7 @@ ul.pf-v6-c-list {
11395
11399
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
11396
11400
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
11397
11401
  --pf-v6-c-page__sidebar--Width: 18.125rem;
11398
- --pf-v6-c-page__sidebar--xl--Width: auto;
11402
+ --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
11399
11403
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11400
11404
  --pf-v6-c-page__sidebar--BoxShadow: none;
11401
11405
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -11584,18 +11588,21 @@ ul.pf-v6-c-list {
11584
11588
  flex-grow: 0;
11585
11589
  }
11586
11590
 
11591
+ .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
11587
11592
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
11588
11593
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
11589
11594
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
11590
11595
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
11591
11596
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
11592
11597
  }
11598
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
11593
11599
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
11594
11600
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
11595
11601
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
11596
11602
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
11597
11603
  align-items: center;
11598
11604
  }
11605
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
11599
11606
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
11600
11607
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
11601
11608
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -5640,37 +5640,17 @@ cssPrefix: pf-v6-c-menu
5640
5640
  </span>
5641
5641
  <span class="pf-v6-c-menu__item-description">This is a description</span>
5642
5642
  </a>
5643
- <div class="pf-v6-c-menu__item-action pf-m-favorited pf-m-favorite">
5643
+ <div class="pf-v6-c-menu__item-action pf-m-favorited">
5644
5644
  <button
5645
5645
  class="pf-v6-c-button pf-m-plain"
5646
5646
  type="button"
5647
5647
  role="menuitem"
5648
5648
  aria-label="Starred"
5649
- ></button>
5650
- </div>
5651
- </li>
5652
- <li class="pf-v6-c-menu__list-item" role="none">
5653
- <a
5654
- class="pf-v6-c-menu__item"
5655
- href="#"
5656
- role="menuitem"
5657
- target="_blank"
5658
- >
5659
- <span class="pf-v6-c-menu__item-main">
5660
- <span class="pf-v6-c-menu__item-text">Item 3</span>
5661
- <span class="pf-v6-c-menu__item-external-icon">
5662
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
5649
+ >
5650
+ <span class="pf-v6-c-button__icon">
5651
+ <i class="fas fa-star" aria-hidden="true"></i>
5663
5652
  </span>
5664
- <span class="pf-v6-screen-reader">(opens new window)</span>
5665
- </span>
5666
- </a>
5667
- <div class="pf-v6-c-menu__item-action pf-m-favorite">
5668
- <button
5669
- class="pf-v6-c-button pf-m-plain"
5670
- type="button"
5671
- role="menuitem"
5672
- aria-label="Not starred"
5673
- ></button>
5653
+ </button>
5674
5654
  </div>
5675
5655
  </li>
5676
5656
  </ul>
@@ -5686,13 +5666,17 @@ cssPrefix: pf-v6-c-menu
5686
5666
  </span>
5687
5667
  <span class="pf-v6-c-menu__item-description">This is a description</span>
5688
5668
  </a>
5689
- <div class="pf-v6-c-menu__item-action pf-m-favorite">
5669
+ <div class="pf-v6-c-menu__item-action pf-m-favorited">
5690
5670
  <button
5691
5671
  class="pf-v6-c-button pf-m-plain"
5692
5672
  type="button"
5693
5673
  role="menuitem"
5694
- aria-label="Not starred"
5695
- ></button>
5674
+ aria-label="Starred"
5675
+ >
5676
+ <span class="pf-v6-c-button__icon">
5677
+ <i class="fas fa-star" aria-hidden="true"></i>
5678
+ </span>
5679
+ </button>
5696
5680
  </div>
5697
5681
  </li>
5698
5682
  <li class="pf-v6-c-menu__list-item pf-m-disabled" role="none">
@@ -5713,14 +5697,18 @@ cssPrefix: pf-v6-c-menu
5713
5697
  </span>
5714
5698
  <span class="pf-v6-c-menu__item-description">This is a description</span>
5715
5699
  </a>
5716
- <div class="pf-v6-c-menu__item-action pf-m-favorite">
5700
+ <div class="pf-v6-c-menu__item-action">
5717
5701
  <button
5718
5702
  class="pf-v6-c-button pf-m-plain"
5719
5703
  type="button"
5720
5704
  role="menuitem"
5721
5705
  aria-label="Not starred"
5722
5706
  disabled
5723
- ></button>
5707
+ >
5708
+ <span class="pf-v6-c-button__icon">
5709
+ <i class="fas fa-star" aria-hidden="true"></i>
5710
+ </span>
5711
+ </button>
5724
5712
  </div>
5725
5713
  </li>
5726
5714
  <li class="pf-v6-c-menu__list-item" role="none">
@@ -5738,13 +5726,17 @@ cssPrefix: pf-v6-c-menu
5738
5726
  <span class="pf-v6-screen-reader">(opens new window)</span>
5739
5727
  </span>
5740
5728
  </a>
5741
- <div class="pf-v6-c-menu__item-action pf-m-favorite">
5729
+ <div class="pf-v6-c-menu__item-action">
5742
5730
  <button
5743
5731
  class="pf-v6-c-button pf-m-plain"
5744
5732
  type="button"
5745
5733
  role="menuitem"
5746
5734
  aria-label="Not starred"
5747
- ></button>
5735
+ >
5736
+ <span class="pf-v6-c-button__icon">
5737
+ <i class="fas fa-star" aria-hidden="true"></i>
5738
+ </span>
5739
+ </button>
5748
5740
  </div>
5749
5741
  </li>
5750
5742
  </ul>
package/docs/components/Page/examples/Page.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* Because the page component has height:100dvh, override it just for the embedded examples */
2
- .ws-mdx-content-content [id^=ws-core-c-page-] .pf-v6-c-page {
2
+ #ws-page-main [id^=ws-core-c-page-] .pf-v6-c-page {
3
3
  height: min-content;
4
4
  min-height: 30em;
5
5
  }
package/docs/components/Page/examples/Page.md CHANGED
@@ -152,10 +152,11 @@ wrapperTag: div
152
152
  </header>
153
153
  <div class="pf-v6-c-page__sidebar">
154
154
  <div class="pf-v6-c-page__sidebar-body">Navigation</div>
155
+ <div class="pf-v6-c-page__sidebar-body pf-m-fill">inset content</div>
155
156
  <div
156
- class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-page-insets"
157
- >inset content</div>
158
- <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
157
+ class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-inset-none"
158
+ >content that is not inset</div>
159
+ <div class="pf-v6-c-page__sidebar-body pf-m-no-fill">footer content</div>
159
160
  </div>
160
161
  <div class="pf-v6-c-page__main-container" tabindex="-1">
161
162
  <main class="pf-v6-c-page__main" tabindex="-1">
@@ -193,7 +194,7 @@ wrapperTag: div
193
194
  <span>Content</span>
194
195
  </div>
195
196
  </header>
196
- <div class="pf-v6-c-page__main-container" tabindex="-1">
197
+ <div class="pf-v6-c-page__main-container pf-m-fill" tabindex="-1">
197
198
  <main class="pf-v6-c-page__main" tabindex="-1">
198
199
  <section class="pf-v6-c-page__main-section">
199
200
  <div class="pf-v6-c-page__main-body">A regular page section.</div>
@@ -201,13 +202,15 @@ wrapperTag: div
201
202
  <section class="pf-v6-c-page__main-section pf-m-fill">
202
203
  <div class="pf-v6-c-page__main-body">
203
204
  This section uses
204
- <code>.pf-m-fill</code> to fill the available space.
205
+ <code>.pf-m-fill</code> to fill the available space. The
206
+ <code>.pf-v6-c-page__main-container</code> must also have
207
+ <code>.pf-m-fill</code> in order for the section to have space to stretch to full height.
205
208
  </div>
206
209
  </section>
207
210
  <section class="pf-v6-c-page__main-section pf-m-no-fill">
208
211
  <div class="pf-v6-c-page__main-body">
209
212
  This section uses
210
- <code>.pf-m-no-fill</code> not to fill the available space.
213
+ <code>.pf-m-no-fill</code> and will not fill the available space.
211
214
  </div>
212
215
  </section>
213
216
  </main>
@@ -416,7 +419,7 @@ This component provides the basic chrome for a page, including sidebar and main
416
419
  | `.pf-m-inset-none` | `.pf-v6-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
417
420
  | `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
418
421
  | `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
419
- | `.pf-m-fill` | `.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
422
+ | `.pf-m-fill` | `.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. Note that `.pf-v6-c-page__main-container` must also have `.pf-m-fill` applied in order for the section to have space to stretch to full height.|
420
423
  | `.pf-m-no-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element not to grow to fill the available vertical space. |
421
424
  | `.pf-m-limit-width` | `.pf-v6-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
422
425
  | `.pf-m-align-center` | `.pf-v6-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
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": "6.1.0-prerelease.6",
4
+ "version": "6.1.0-prerelease.8",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,7 +47,7 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.0.10",
50
+ "@patternfly/documentation-framework": "6.0.12",
51
51
  "@patternfly/patternfly-a11y": "5.0.0",
52
52
  "@patternfly/react-code-editor": "6.0.0",
53
53
  "@patternfly/react-core": "6.0.0",
package/patternfly-no-globals.css CHANGED
@@ -16893,7 +16893,6 @@ ul.pf-v6-c-list {
16893
16893
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
16894
16894
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
16895
16895
  --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
16896
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
16897
16896
  --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
16898
16897
  --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
16899
16898
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -17379,8 +17378,13 @@ ul.pf-v6-c-list {
17379
17378
  .pf-v6-c-menu__item-action.pf-m-favorited,
17380
17379
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
17381
17380
  .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
17382
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17383
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17381
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17382
+ }
17383
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
17384
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
17385
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
17386
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
17387
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17384
17388
  }
17385
17389
 
17386
17390
  .pf-v6-c-menu__breadcrumb {
@@ -18857,7 +18861,7 @@ ul.pf-v6-c-list {
18857
18861
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
18858
18862
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
18859
18863
  --pf-v6-c-page__sidebar--Width: 18.125rem;
18860
- --pf-v6-c-page__sidebar--xl--Width: auto;
18864
+ --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
18861
18865
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18862
18866
  --pf-v6-c-page__sidebar--BoxShadow: none;
18863
18867
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -19046,18 +19050,21 @@ ul.pf-v6-c-list {
19046
19050
  flex-grow: 0;
19047
19051
  }
19048
19052
 
19053
+ .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
19049
19054
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
19050
19055
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
19051
19056
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
19052
19057
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
19053
19058
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
19054
19059
  }
19060
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
19055
19061
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
19056
19062
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
19057
19063
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
19058
19064
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
19059
19065
  align-items: center;
19060
19066
  }
19067
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19061
19068
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19062
19069
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19063
19070
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
package/patternfly.css CHANGED
@@ -17029,7 +17029,6 @@ ul.pf-v6-c-list {
17029
17029
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
17030
17030
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
17031
17031
  --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
17032
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
17033
17032
  --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
17034
17033
  --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
17035
17034
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -17515,8 +17514,13 @@ ul.pf-v6-c-list {
17515
17514
  .pf-v6-c-menu__item-action.pf-m-favorited,
17516
17515
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
17517
17516
  .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
17518
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17519
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17517
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17518
+ }
17519
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
17520
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
17521
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
17522
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
17523
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17520
17524
  }
17521
17525
 
17522
17526
  .pf-v6-c-menu__breadcrumb {
@@ -18993,7 +18997,7 @@ ul.pf-v6-c-list {
18993
18997
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
18994
18998
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
18995
18999
  --pf-v6-c-page__sidebar--Width: 18.125rem;
18996
- --pf-v6-c-page__sidebar--xl--Width: auto;
19000
+ --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
18997
19001
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18998
19002
  --pf-v6-c-page__sidebar--BoxShadow: none;
18999
19003
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -19182,18 +19186,21 @@ ul.pf-v6-c-list {
19182
19186
  flex-grow: 0;
19183
19187
  }
19184
19188
 
19189
+ .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
19185
19190
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
19186
19191
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
19187
19192
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
19188
19193
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
19189
19194
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
19190
19195
  }
19196
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
19191
19197
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
19192
19198
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
19193
19199
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
19194
19200
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
19195
19201
  align-items: center;
19196
19202
  }
19203
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19197
19204
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19198
19205
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19199
19206
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,