@patternfly/patternfly 6.5.0-prerelease.53 → 6.5.0-prerelease.55

package/docs/components/Card/examples/Card.md

@@ -1937,4 +1937,5 @@ A card is a generic rectangular container that can be used to build other compon
 | `.pf-m-expanded` | `.pf-v6-c-card` | Modifies the card for the expanded state. |
 | `.pf-m-toggle-right` | `.pf-v6-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
 | `.pf-m-full-height` | `.pf-v6-c-card` | Modifies the card to full height of its parent. |
+| `.pf-m-glass` | `.pf-v6-c-card` | Applies glass styles when glass theme is enabled. |
 | `.pf-m-no-offset` | `.pf-v6-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |

package/docs/components/DragDrop/examples/DragDrop.css

@@ -3,7 +3,7 @@
 }
 
 .pf-v6-c-draggable.pf-m-dragging {
-  --pf-v6-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   position: absolute;
   inset-block-start: 23%;

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

@@ -52,7 +52,9 @@ wrapperTag: div
     </div>
   </header>
   <div class="pf-v6-c-page__sidebar">
-    <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    <div class="pf-v6-c-page__sidebar-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    </div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
@@ -208,12 +210,14 @@ wrapperTag: div
     </div>
   </header>
   <div class="pf-v6-c-page__sidebar">
-    <div class="pf-v6-c-page__sidebar-body">Navigation</div>
-    <div class="pf-v6-c-page__sidebar-body pf-m-fill">inset content</div>
-    <div
-      class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-inset-none"
-    >content that is not inset</div>
-    <div class="pf-v6-c-page__sidebar-body pf-m-no-fill">footer content</div>
+    <div class="pf-v6-c-page__sidebar-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+      <div class="pf-v6-c-page__sidebar-body pf-m-fill">inset content</div>
+      <div
+        class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-inset-none"
+      >content that is not inset</div>
+      <div class="pf-v6-c-page__sidebar-body pf-m-no-fill">footer content</div>
+    </div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
@@ -340,7 +344,9 @@ wrapperTag: div
     </div>
   </header>
   <div class="pf-v6-c-page__sidebar">
-    <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    <div class="pf-v6-c-page__sidebar-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    </div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
@@ -418,7 +424,9 @@ wrapperTag: div
     </div>
   </header>
   <div class="pf-v6-c-page__sidebar">
-    <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    <div class="pf-v6-c-page__sidebar-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    </div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
@@ -519,34 +527,36 @@ wrapperTag: div
 ```html isBeta
 <div class="pf-v6-c-page pf-m-dock">
   <div class="pf-v6-c-page__dock">
-    <header class="pf-v6-c-masthead pf-m-docked">
-      <div class="pf-v6-c-masthead__main">
-        <div class="pf-v6-c-masthead__brand">logo</div>
-      </div>
-      <div class="pf-v6-c-masthead__content">
-        <button
-          class="pf-v6-c-button pf-m-plain"
-          type="button"
-          aria-label="Chat"
-        >
-          <span class="pf-v6-c-button__icon">
-            <svg
-              class="pf-v6-svg"
-              viewBox="0 0 512 512"
-              fill="currentColor"
-              aria-hidden="true"
-              role="img"
-              width="1em"
-              height="1em"
-            >
-              <path
-                d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </header>
+    <div class="pf-v6-c-page__dock-main">
+      <header class="pf-v6-c-masthead pf-m-docked">
+        <div class="pf-v6-c-masthead__main">
+          <div class="pf-v6-c-masthead__brand">logo</div>
+        </div>
+        <div class="pf-v6-c-masthead__content">
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Chat"
+          >
+            <span class="pf-v6-c-button__icon">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 512 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </header>
+    </div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">

package/docs/components/Panel/examples/Panel.md

@@ -157,6 +157,17 @@ cssPrefix: pf-v6-c-panel
 
 ```
 
+### Pill
+
+```html
+<div class="pf-v6-c-panel pf-m-pill">
+  <div class="pf-v6-c-panel__main">
+    <div class="pf-v6-c-panel__main-body">Main content</div>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Usage
@@ -173,3 +184,4 @@ cssPrefix: pf-v6-c-panel
 | `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |
 | `.pf-m-scrollable` | `.pf-v6-c-panel` | Modifies the panel for scrollable styles. |
 | `.pf-m-secondary` | `.pf-v6-c-panel` | Modifies the panel for secondary styles. |
+| `.pf-m-pill` | `.pf-v6-c-panel` | Modifies the panel for pill border radius. |

package/docs/components/Wizard/examples/Wizard.md

@@ -3813,6 +3813,327 @@ wrapperTag: div
 
 ```
 
+### Plain
+
+```html isFullscreen
+<div class="pf-v6-c-wizard pf-m-plain">
+  <div class="pf-v6-c-wizard__header">
+    <div class="pf-v6-c-wizard__close">
+      <button
+        class="pf-v6-c-button pf-m-plain"
+        type="button"
+        aria-label="Close"
+      >
+        <span class="pf-v6-c-button__icon">
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <div class="pf-v6-c-wizard__title">
+      <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
+    </div>
+    <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
+  </div>
+  <button
+    aria-label="Wizard Header Toggle"
+    class="pf-v6-c-wizard__toggle"
+    aria-expanded="false"
+  >
+    <span class="pf-v6-c-wizard__toggle-list">
+      <span class="pf-v6-c-wizard__toggle-list-item">
+        <span class="pf-v6-c-wizard__toggle-num">2</span>
+        Configuration
+        <span class="pf-v6-c-wizard__toggle-separator">
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
+    </span>
+    <span class="pf-v6-c-wizard__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </button>
+  <div class="pf-v6-c-wizard__outer-wrap">
+    <div class="pf-v6-c-wizard__inner-wrap">
+      <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
+        <ol class="pf-v6-c-wizard__nav-list" role="list">
+          <li class="pf-v6-c-wizard__nav-item">
+            <button class="pf-v6-c-wizard__nav-link" type="button">
+              <span class="pf-v6-c-wizard__nav-link-main">
+                <span class="pf-v6-c-wizard__nav-link-text">Information</span>
+              </span>
+            </button>
+          </li>
+          <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
+            <button
+              class="pf-v6-c-wizard__nav-link pf-m-current"
+              type="button"
+              aria-expanded="true"
+            >
+              <span class="pf-v6-c-wizard__nav-link-main">
+                <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
+                <span class="pf-v6-c-wizard__nav-link-toggle">
+                  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
+                    <svg
+                      class="pf-v6-svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                      role="img"
+                      width="1em"
+                      height="1em"
+                    >
+                      <path
+                        d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </button>
+            <ol class="pf-v6-c-wizard__nav-list" role="list">
+              <li class="pf-v6-c-wizard__nav-item">
+                <button class="pf-v6-c-wizard__nav-link" type="button">
+                  <span class="pf-v6-c-wizard__nav-link-main">
+                    <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
+                  </span>
+                </button>
+              </li>
+              <li class="pf-v6-c-wizard__nav-item">
+                <button
+                  class="pf-v6-c-wizard__nav-link pf-m-current"
+                  type="button"
+                  aria-current="page"
+                >
+                  <span class="pf-v6-c-wizard__nav-link-main">
+                    <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
+                  </span>
+                </button>
+              </li>
+              <li class="pf-v6-c-wizard__nav-item">
+                <button class="pf-v6-c-wizard__nav-link" type="button">
+                  <span class="pf-v6-c-wizard__nav-link-main">
+                    <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
+                  </span>
+                </button>
+              </li>
+            </ol>
+          </li>
+          <li class="pf-v6-c-wizard__nav-item">
+            <button class="pf-v6-c-wizard__nav-link" type="button">
+              <span class="pf-v6-c-wizard__nav-link-main">
+                <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
+              </span>
+            </button>
+          </li>
+          <li class="pf-v6-c-wizard__nav-item">
+            <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
+              <span class="pf-v6-c-wizard__nav-link-main">
+                <span class="pf-v6-c-wizard__nav-link-text">Review</span>
+              </span>
+            </button>
+          </li>
+        </ol>
+      </nav>
+      <main class="pf-v6-c-wizard__main" tabindex="0">
+        <div class="pf-v6-c-wizard__main-body">
+          <form class="pf-v6-c-form pf-m-limit-width" novalidate>
+            <div class="pf-v6-c-form__group">
+              <div class="pf-v6-c-form__group-label"><label
+                  class="pf-v6-c-form__label"
+                  for="wizard-plain-header-form-field1"
+                >
+                  <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
+                    class="pf-v6-c-form__label-required"
+                    aria-hidden="true"
+                  >&#42;</span></label>
+              </div>
+              <div class="pf-v6-c-form__group-control">
+                <span class="pf-v6-c-form-control">
+                  <input
+                    type="text"
+                    id="wizard-plain-header-form-field1"
+                    name="wizard-plain-header-form-field1"
+                  />
+                </span>
+              </div>
+            </div>
+            <div class="pf-v6-c-form__group">
+              <div class="pf-v6-c-form__group-label"><label
+                  class="pf-v6-c-form__label"
+                  for="wizard-plain-header-form-field2"
+                >
+                  <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
+                    class="pf-v6-c-form__label-required"
+                    aria-hidden="true"
+                  >&#42;</span></label>
+              </div>
+              <div class="pf-v6-c-form__group-control">
+                <span class="pf-v6-c-form-control">
+                  <input
+                    type="text"
+                    id="wizard-plain-header-form-field2"
+                    name="wizard-plain-header-form-field2"
+                  />
+                </span>
+              </div>
+            </div>
+            <div class="pf-v6-c-form__group">
+              <div class="pf-v6-c-form__group-label"><label
+                  class="pf-v6-c-form__label"
+                  for="wizard-plain-header-form-field3"
+                >
+                  <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
+                    class="pf-v6-c-form__label-required"
+                    aria-hidden="true"
+                  >&#42;</span></label>
+              </div>
+              <div class="pf-v6-c-form__group-control">
+                <span class="pf-v6-c-form-control">
+                  <input
+                    type="text"
+                    id="wizard-plain-header-form-field3"
+                    name="wizard-plain-header-form-field3"
+                  />
+                </span>
+              </div>
+            </div>
+            <div class="pf-v6-c-form__group">
+              <div class="pf-v6-c-form__group-label"><label
+                  class="pf-v6-c-form__label"
+                  for="wizard-plain-header-form-field4"
+                >
+                  <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
+                    class="pf-v6-c-form__label-required"
+                    aria-hidden="true"
+                  >&#42;</span></label>
+              </div>
+              <div class="pf-v6-c-form__group-control">
+                <span class="pf-v6-c-form-control">
+                  <input
+                    type="text"
+                    id="wizard-plain-header-form-field4"
+                    name="wizard-plain-header-form-field4"
+                  />
+                </span>
+              </div>
+            </div>
+            <div class="pf-v6-c-form__group">
+              <div class="pf-v6-c-form__group-label"><label
+                  class="pf-v6-c-form__label"
+                  for="wizard-plain-header-form-field5"
+                >
+                  <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
+                    class="pf-v6-c-form__label-required"
+                    aria-hidden="true"
+                  >&#42;</span></label>
+              </div>
+              <div class="pf-v6-c-form__group-control">
+                <span class="pf-v6-c-form-control">
+                  <input
+                    type="text"
+                    id="wizard-plain-header-form-field5"
+                    name="wizard-plain-header-form-field5"
+                  />
+                </span>
+              </div>
+            </div>
+            <div class="pf-v6-c-form__group">
+              <div class="pf-v6-c-form__group-label"><label
+                  class="pf-v6-c-form__label"
+                  for="wizard-plain-header-form-field6"
+                >
+                  <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
+                    class="pf-v6-c-form__label-required"
+                    aria-hidden="true"
+                  >&#42;</span></label>
+              </div>
+              <div class="pf-v6-c-form__group-control">
+                <span class="pf-v6-c-form-control">
+                  <input
+                    type="text"
+                    id="wizard-plain-header-form-field6"
+                    name="wizard-plain-header-form-field6"
+                  />
+                </span>
+              </div>
+            </div>
+            <div class="pf-v6-c-form__group">
+              <div class="pf-v6-c-form__group-label"><label
+                  class="pf-v6-c-form__label"
+                  for="wizard-plain-header-form-field7"
+                >
+                  <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
+                    class="pf-v6-c-form__label-required"
+                    aria-hidden="true"
+                  >&#42;</span></label>
+              </div>
+              <div class="pf-v6-c-form__group-control">
+                <span class="pf-v6-c-form-control">
+                  <input
+                    type="text"
+                    id="wizard-plain-header-form-field7"
+                    name="wizard-plain-header-form-field7"
+                  />
+                </span>
+              </div>
+            </div>
+          </form>
+        </div>
+      </main>
+    </div>
+    <footer class="pf-v6-c-wizard__footer">
+      <div class="pf-v6-c-action-list">
+        <div class="pf-v6-c-action-list__group">
+          <div class="pf-v6-c-action-list__item">
+            <button class="pf-v6-c-button pf-m-secondary" type="button">
+              <span class="pf-v6-c-button__text">Back</span>
+            </button>
+          </div>
+          <div class="pf-v6-c-action-list__item">
+            <button class="pf-v6-c-button pf-m-primary" type="button">
+              <span class="pf-v6-c-button__text">Next</span>
+            </button>
+          </div>
+        </div>
+        <div class="pf-v6-c-action-list__group">
+          <div class="pf-v6-c-action-list__item">
+            <button class="pf-v6-c-button pf-m-link" type="button">
+              <span class="pf-v6-c-button__text">Cancel</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -3865,6 +4186,8 @@ wrapperTag: div
 | `.pf-v6-c-wizard__footer-cancel` | `<div>` | Initiates the cancel button. **Required** |
 | `.pf-m-expanded` | `.pf-v6-c-wizard__toggle`, `.pf-v6-c-wizard__nav` | Modifies the mobile steps toggle and steps menu for the expanded state. |
 | `.pf-m-finished` | `.pf-v6-c-wizard` | Modifies the wizard for the finished state. |
+| `.pf-m-plain` | `.pf-v6-c-wizard` | Modifies the wizard to have a transparent background. |
+| `.pf-m-no-plain` | `.pf-v6-c-wizard` | Prevents the wizard from automatically applying plain styling when glass theme is enabled. |
 | `.pf-m-expandable` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expandable state. |
 | `.pf-m-expanded` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
 | `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |

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

@@ -197,44 +197,46 @@ This demo implements the about modal, including the backdrop.
     </div>
   </header>
   <div class="pf-v6-c-page__sidebar">
-    <div class="pf-v6-c-page__sidebar-body">
-      <nav
-        class="pf-v6-c-nav"
-        id="modal-basic-example-primary-nav"
-        aria-label="Global"
-      >
-        <ul class="pf-v6-c-nav__list" role="list">
-          <li class="pf-v6-c-nav__item">
-            <a href="#" class="pf-v6-c-nav__link">
-              <span class="pf-v6-c-nav__link-text">System panel</span>
-            </a>
-          </li>
-          <li class="pf-v6-c-nav__item">
-            <a
-              href="#"
-              class="pf-v6-c-nav__link pf-m-current"
-              aria-current="page"
-            >
-              <span class="pf-v6-c-nav__link-text">Policy</span>
-            </a>
-          </li>
-          <li class="pf-v6-c-nav__item">
-            <a href="#" class="pf-v6-c-nav__link">
-              <span class="pf-v6-c-nav__link-text">Authentication</span>
-            </a>
-          </li>
-          <li class="pf-v6-c-nav__item">
-            <a href="#" class="pf-v6-c-nav__link">
-              <span class="pf-v6-c-nav__link-text">Network services</span>
-            </a>
-          </li>
-          <li class="pf-v6-c-nav__item">
-            <a href="#" class="pf-v6-c-nav__link">
-              <span class="pf-v6-c-nav__link-text">Server</span>
-            </a>
-          </li>
-        </ul>
-      </nav>
+    <div class="pf-v6-c-page__sidebar-main">
+      <div class="pf-v6-c-page__sidebar-body">
+        <nav
+          class="pf-v6-c-nav"
+          id="modal-basic-example-primary-nav"
+          aria-label="Global"
+        >
+          <ul class="pf-v6-c-nav__list" role="list">
+            <li class="pf-v6-c-nav__item">
+              <a href="#" class="pf-v6-c-nav__link">
+                <span class="pf-v6-c-nav__link-text">System panel</span>
+              </a>
+            </li>
+            <li class="pf-v6-c-nav__item">
+              <a
+                href="#"
+                class="pf-v6-c-nav__link pf-m-current"
+                aria-current="page"
+              >
+                <span class="pf-v6-c-nav__link-text">Policy</span>
+              </a>
+            </li>
+            <li class="pf-v6-c-nav__item">
+              <a href="#" class="pf-v6-c-nav__link">
+                <span class="pf-v6-c-nav__link-text">Authentication</span>
+              </a>
+            </li>
+            <li class="pf-v6-c-nav__item">
+              <a href="#" class="pf-v6-c-nav__link">
+                <span class="pf-v6-c-nav__link-text">Network services</span>
+              </a>
+            </li>
+            <li class="pf-v6-c-nav__item">
+              <a href="#" class="pf-v6-c-nav__link">
+                <span class="pf-v6-c-nav__link-text">Server</span>
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
     </div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">