@patternfly/patternfly 6.0.0-alpha.227 → 6.0.0-alpha.229

package/docs/components/JumpLinks/examples/JumpLinks.md

@@ -439,7 +439,6 @@ cssPrefix: pf-v6-c-jump-links
         class="pf-v6-c-button pf-m-plain"
         type="button"
         aria-label="Toggle jump links"
-        aria-expanded="false"
       >
         <span class="pf-v6-c-button__icon pf-m-start">
           <span class="pf-v6-c-jump-links__toggle-icon">
@@ -514,8 +513,8 @@ cssPrefix: pf-v6-c-jump-links
       <button
         class="pf-v6-c-button pf-m-plain"
         type="button"
-        aria-label="Toggle jump links"
         aria-expanded="true"
+        aria-label="Toggle jump links"
       >
         <span class="pf-v6-c-button__icon pf-m-start">
           <span class="pf-v6-c-jump-links__toggle-icon">
@@ -591,7 +590,6 @@ cssPrefix: pf-v6-c-jump-links
         class="pf-v6-c-button pf-m-plain"
         type="button"
         aria-label="Toggle jump links"
-        aria-expanded="false"
       >
         <span class="pf-v6-c-button__icon pf-m-start">
           <span class="pf-v6-c-jump-links__toggle-icon">
@@ -666,7 +664,6 @@ cssPrefix: pf-v6-c-jump-links
         class="pf-v6-c-button pf-m-plain"
         type="button"
         aria-label="Toggle jump links"
-        aria-expanded="false"
       >
         <span class="pf-v6-c-button__icon pf-m-start">
           <span class="pf-v6-c-jump-links__toggle-icon">

package/docs/demos/Drawer/examples/Drawer.md

@@ -1360,7 +1360,30 @@ wrapperTag: div
                         <nav
                           class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
                         >
-                          <div class="pf-v6-c-jump-links__label">Jump to section</div>
+                          <div class="pf-v6-c-jump-links__header">
+                            <div class="pf-v6-c-jump-links__toggle">
+                              <button
+                                class="pf-v6-c-button pf-m-plain"
+                                type="button"
+                                aria-label="Toggle jump links"
+                              >
+                                <span class="pf-v6-c-button__icon pf-m-start">
+                                  <span class="pf-v6-c-jump-links__toggle-icon">
+                                    <i
+                                      class="fas fa-angle-right"
+                                      aria-hidden="true"
+                                    ></i>
+                                  </span>
+                                </span>
+                                <span
+                                  class="pf-v6-c-button__text"
+                                >Jump to section</span>
+                              </button>
+                            </div>
+                            <div
+                              class="pf-v6-c-jump-links__label"
+                            >Jump to section</div>
+                          </div>
                           <ul class="pf-v6-c-jump-links__list" role="list">
                             <li class="pf-v6-c-jump-links__item pf-m-current">
                               <span class="pf-v6-c-jump-links__link">
@@ -1740,7 +1763,30 @@ wrapperTag: div
                         <nav
                           class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
                         >
-                          <div class="pf-v6-c-jump-links__label">Jump to section</div>
+                          <div class="pf-v6-c-jump-links__header">
+                            <div class="pf-v6-c-jump-links__toggle">
+                              <button
+                                class="pf-v6-c-button pf-m-plain"
+                                type="button"
+                                aria-label="Toggle jump links"
+                              >
+                                <span class="pf-v6-c-button__icon pf-m-start">
+                                  <span class="pf-v6-c-jump-links__toggle-icon">
+                                    <i
+                                      class="fas fa-angle-right"
+                                      aria-hidden="true"
+                                    ></i>
+                                  </span>
+                                </span>
+                                <span
+                                  class="pf-v6-c-button__text"
+                                >Jump to section</span>
+                              </button>
+                            </div>
+                            <div
+                              class="pf-v6-c-jump-links__label"
+                            >Jump to section</div>
+                          </div>
                           <ul class="pf-v6-c-jump-links__list" role="list">
                             <li class="pf-v6-c-jump-links__item pf-m-current">
                               <span class="pf-v6-c-jump-links__link">

package/docs/demos/JumpLinks/examples/JumpLinks.md

@@ -284,7 +284,6 @@ section: components
                             class="pf-v6-c-button pf-m-plain"
                             type="button"
                             aria-label="Toggle jump links"
-                            aria-expanded="false"
                           >
                             <span class="pf-v6-c-button__icon pf-m-start">
                               <span class="pf-v6-c-jump-links__toggle-icon">
@@ -702,7 +701,6 @@ section: components
                             class="pf-v6-c-button pf-m-plain"
                             type="button"
                             aria-label="Toggle jump links"
-                            aria-expanded="false"
                           >
                             <span class="pf-v6-c-button__icon pf-m-start">
                               <span class="pf-v6-c-jump-links__toggle-icon">
@@ -1120,7 +1118,6 @@ section: components
                             class="pf-v6-c-button pf-m-plain"
                             type="button"
                             aria-label="Toggle jump links"
-                            aria-expanded="false"
                           >
                             <span class="pf-v6-c-button__icon pf-m-start">
                               <span class="pf-v6-c-jump-links__toggle-icon">
@@ -1850,7 +1847,30 @@ section: components
                         <nav
                           class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
                         >
-                          <div class="pf-v6-c-jump-links__label">Jump to section</div>
+                          <div class="pf-v6-c-jump-links__header">
+                            <div class="pf-v6-c-jump-links__toggle">
+                              <button
+                                class="pf-v6-c-button pf-m-plain"
+                                type="button"
+                                aria-label="Toggle jump links"
+                              >
+                                <span class="pf-v6-c-button__icon pf-m-start">
+                                  <span class="pf-v6-c-jump-links__toggle-icon">
+                                    <i
+                                      class="fas fa-angle-right"
+                                      aria-hidden="true"
+                                    ></i>
+                                  </span>
+                                </span>
+                                <span
+                                  class="pf-v6-c-button__text"
+                                >Jump to section</span>
+                              </button>
+                            </div>
+                            <div
+                              class="pf-v6-c-jump-links__label"
+                            >Jump to section</div>
+                          </div>
                           <ul class="pf-v6-c-jump-links__list" role="list">
                             <li class="pf-v6-c-jump-links__item pf-m-current">
                               <span class="pf-v6-c-jump-links__link">
@@ -2230,7 +2250,30 @@ section: components
                         <nav
                           class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
                         >
-                          <div class="pf-v6-c-jump-links__label">Jump to section</div>
+                          <div class="pf-v6-c-jump-links__header">
+                            <div class="pf-v6-c-jump-links__toggle">
+                              <button
+                                class="pf-v6-c-button pf-m-plain"
+                                type="button"
+                                aria-label="Toggle jump links"
+                              >
+                                <span class="pf-v6-c-button__icon pf-m-start">
+                                  <span class="pf-v6-c-jump-links__toggle-icon">
+                                    <i
+                                      class="fas fa-angle-right"
+                                      aria-hidden="true"
+                                    ></i>
+                                  </span>
+                                </span>
+                                <span
+                                  class="pf-v6-c-button__text"
+                                >Jump to section</span>
+                              </button>
+                            </div>
+                            <div
+                              class="pf-v6-c-jump-links__label"
+                            >Jump to section</div>
+                          </div>
                           <ul class="pf-v6-c-jump-links__list" role="list">
                             <li class="pf-v6-c-jump-links__item pf-m-current">
                               <span class="pf-v6-c-jump-links__link">

package/layouts/Bullseye/bullseye.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-l-bullseye) {
+:root,
+.pf-v6-l-bullseye {
   --pf-v6-l-bullseye--Padding: 0;
 }
 

package/layouts/Bullseye/bullseye.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$bullseye}) {
+@include pf-root($bullseye) {
   --#{$bullseye}--Padding: 0;
 }
 

package/layouts/Flex/flex.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-l-flex) {
+:root,
+.pf-v6-l-flex {
   --pf-v6-l-flex--Display: flex;
   --pf-v6-l-flex--FlexWrap: wrap;
   --pf-v6-l-flex--AlignItems: baseline;

package/layouts/Flex/flex.scss

@@ -6,7 +6,7 @@ $pf-v6-l-flex--spacer-map: build-spacer-map();
 $pf-v6-l-flex--gap-map: build-spacer-map("base", "none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl");
 $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $pf-v6-l-flex--spacer-map);
 
-:where(:root, .#{$flex}) {
+@include pf-root($flex) {
   --#{$flex}--Display: flex;
   --#{$flex}--FlexWrap: wrap;
   --#{$flex}--AlignItems: baseline;

package/layouts/Gallery/gallery.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-l-gallery) {
+:root,
+.pf-v6-l-gallery {
   --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
   --pf-v6-l-gallery--GridTemplateColumns--min: 250px;
   --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);

package/layouts/Gallery/gallery.scss

@@ -2,7 +2,7 @@
 
 $pf-v6-l-gallery--breakpoint-map: build-breakpoint-map();
 
-:where(:root, .#{$gallery}) {
+@include pf-root($gallery) {
   --#{$gallery}--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
   --#{$gallery}--GridTemplateColumns--min: 250px;
   --#{$gallery}--GridTemplateColumns--minmax--min: var(--#{$gallery}--GridTemplateColumns--min);

package/layouts/Grid/grid.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-l-grid) {
+:root,
+.pf-v6-l-grid {
   --pf-v6-l-grid--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
   --pf-v6-l-grid__item--GridColumnStart: auto;
   --pf-v6-l-grid__item--GridColumnEnd: span 12;

package/layouts/Grid/grid.scss

@@ -41,7 +41,7 @@ $pf-v6-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used fo
 }
 
 // Grid base
-:where(:root, .#{$grid}) {
+@include pf-root($grid) {
   --#{$grid}--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
   --#{$grid}__item--GridColumnStart: auto;
   --#{$grid}__item--GridColumnEnd: span 12;

package/layouts/Level/level.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-l-level) {
+:root,
+.pf-v6-l-level {
   --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
 }
 

package/layouts/Level/level.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$level}) {
+@include pf-root($level) {
   --#{$level}--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
 }
 

package/layouts/Split/split.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-l-split) {
+:root,
+.pf-v6-l-split {
   --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
 }
 

package/layouts/Split/split.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$split}) {
+@include pf-root($split) {
   --#{$stack}--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
 }
 

package/layouts/Stack/stack.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-l-stack) {
+:root,
+.pf-v6-l-stack {
   --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
 }
 

package/layouts/Stack/stack.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$stack}) {
+@include pf-root($stack) {
   --#{$stack}--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
 }
 

package/layouts/_index.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-l-bullseye) {
+:root,
+.pf-v6-l-bullseye {
   --pf-v6-l-bullseye--Padding: 0;
 }
 
@@ -11,7 +12,8 @@
   margin: 0;
 }
 
-:where(:root, .pf-v6-l-flex) {
+:root,
+.pf-v6-l-flex {
   --pf-v6-l-flex--Display: flex;
   --pf-v6-l-flex--FlexWrap: wrap;
   --pf-v6-l-flex--AlignItems: baseline;
@@ -2392,7 +2394,8 @@
   }
 }
 
-:where(:root, .pf-v6-l-gallery) {
+:root,
+.pf-v6-l-gallery {
   --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
   --pf-v6-l-gallery--GridTemplateColumns--min: 250px;
   --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
@@ -2463,7 +2466,8 @@
   }
 }
 
-:where(:root, .pf-v6-l-grid) {
+:root,
+.pf-v6-l-grid {
   --pf-v6-l-grid--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
   --pf-v6-l-grid__item--GridColumnStart: auto;
   --pf-v6-l-grid__item--GridColumnEnd: span 12;
@@ -3400,7 +3404,8 @@
   grid-gap: var(--pf-v6-l-grid--m-gutter--GridGap);
 }
 
-:where(:root, .pf-v6-l-level) {
+:root,
+.pf-v6-l-level {
   --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
 }
 
@@ -3414,7 +3419,8 @@
   gap: var(--pf-v6-l-level--m-gutter--Gap);
 }
 
-:where(:root, .pf-v6-l-split) {
+:root,
+.pf-v6-l-split {
   --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
 }
 
@@ -3435,7 +3441,8 @@
   gap: var(--pf-v6-l-stack--m-gutter--Gap);
 }
 
-:where(:root, .pf-v6-l-stack) {
+:root,
+.pf-v6-l-stack {
   --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.0.0-alpha.227",
+  "version": "6.0.0-alpha.229",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-base-no-globals.css

@@ -4852,7 +4852,7 @@
   vertical-align: -0.125em;
 }
 
-:where(:root) {
+:root {
   --pf-v6-global--inverse--multiplier: 1;
   --pf-t--color--black: #000000;
   --pf-t--color--blue--10: #e0f0ff;
@@ -5688,7 +5688,7 @@
   --pf-t--temp--dev--tbd: #BC11E0;
 }
 
-:where(.pf-v6-theme-dark) {
+:root:where(.pf-v6-theme-dark) {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
   --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
   --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);

package/patternfly-base.css

@@ -4973,7 +4973,7 @@ button) {
   vertical-align: -0.125em;
 }
 
-:where(:root) {
+:root {
   --pf-v6-global--inverse--multiplier: 1;
   --pf-t--color--black: #000000;
   --pf-t--color--blue--10: #e0f0ff;
@@ -5809,7 +5809,7 @@ button) {
   --pf-t--temp--dev--tbd: #BC11E0;
 }
 
-:where(.pf-v6-theme-dark) {
+:root:where(.pf-v6-theme-dark) {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
   --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
   --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);