@patternfly/patternfly 6.3.0-prerelease.49 → 6.3.0-prerelease.50

package/components/Button/button.css

@@ -671,6 +671,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
+  outline-offset: var(--pf-t--global--focus-ring--position--offset);
 }
 .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);

package/components/Button/button.scss

@@ -765,6 +765,7 @@
     text-decoration-line: var(--#{$button}--hover--TextDecorationLine);
     text-decoration-style: var(--#{$button}--hover--TextDecorationStyle);
     text-decoration-color: var(--#{$button}--hover--TextDecorationColor);
+    outline-offset: var(--pf-t--global--focus-ring--position--offset);
   }
 
   &:active,

package/components/Card/card.css

@@ -228,7 +228,6 @@
 }
 
 .pf-v6-c-card__title-text {
-  overflow: auto;
   font-family: var(--pf-v6-c-card__title-text--FontFamily);
   font-size: var(--pf-v6-c-card__title-text--FontSize);
   font-weight: var(--pf-v6-c-card__title-text--FontWeight);

package/components/Card/card.scss

@@ -312,7 +312,6 @@
 }
 
 .#{$card}__title-text {
-  overflow: auto;
   font-family: var(--#{$card}__title-text--FontFamily);
   font-size: var(--#{$card}__title-text--FontSize);
   font-weight: var(--#{$card}__title-text--FontWeight);

package/components/_index.css

@@ -2199,6 +2199,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
+  outline-offset: var(--pf-t--global--focus-ring--position--offset);
 }
 .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
@@ -2780,7 +2781,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 
 .pf-v6-c-card__title-text {
-  overflow: auto;
   font-family: var(--pf-v6-c-card__title-text--FontFamily);
   font-size: var(--pf-v6-c-card__title-text--FontSize);
   font-weight: var(--pf-v6-c-card__title-text--FontWeight);

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -138,7 +138,7 @@ cssPrefix: pf-v6-c-code-editor
               <i class="fas fa- fa-code" aria-hidden="true"></i>
             </div>
             <div class="pf-v6-c-empty-state__title">
-              <h1 class="pf-v6-c-empty-state__title-text">Start editing</h1>
+              <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
             </div>
           </div>
 
@@ -188,7 +188,7 @@ cssPrefix: pf-v6-c-code-editor
               <i class="fas fa- fa-code" aria-hidden="true"></i>
             </div>
             <div class="pf-v6-c-empty-state__title">
-              <h1 class="pf-v6-c-empty-state__title-text">Start editing</h1>
+              <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
             </div>
           </div>
 
@@ -346,7 +346,7 @@ This is an extra container used in React to prevent event propagation if upload
                 <i class="fas fa- fa-code" aria-hidden="true"></i>
               </div>
               <div class="pf-v6-c-empty-state__title">
-                <h1 class="pf-v6-c-empty-state__title-text">Start editing</h1>
+                <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
               </div>
             </div>
 

package/docs/components/EmptyState/examples/EmptyState.md

@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa-cubes" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
       </div>
     </div>
 
@@ -64,7 +64,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa-cubes" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
       </div>
     </div>
 
@@ -109,7 +109,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa-cubes" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
       </div>
     </div>
 
@@ -160,7 +160,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa-cubes" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
       </div>
     </div>
 
@@ -210,7 +210,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa-cubes" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
       </div>
     </div>
 
@@ -259,7 +259,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa- fa-check-circle" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">You're all set</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">You're all set</h4>
       </div>
     </div>
 

package/docs/components/ExpandableSection/examples/ExpandableSection.md

@@ -15,7 +15,7 @@ cssPrefix: pf-v6-c-expandable-section
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show more</span>
+      <span class="pf-v6-c-button__text">Show more hidden example content</span>
     </button>
   </div>
   <div
@@ -37,7 +37,7 @@ cssPrefix: pf-v6-c-expandable-section
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show less</span>
+      <span class="pf-v6-c-button__text">Show less expanded example content</span>
     </button>
   </div>
   <div
@@ -58,7 +58,7 @@ cssPrefix: pf-v6-c-expandable-section
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show less</span>
+      <span class="pf-v6-c-button__text">Show less indented example content</span>
     </button>
   </div>
   <div
@@ -79,7 +79,9 @@ cssPrefix: pf-v6-c-expandable-section
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show more</span>
+      <span
+        class="pf-v6-c-button__text"
+      >Show more disclosure variation example content</span>
     </button>
   </div>
   <div
@@ -103,7 +105,9 @@ cssPrefix: pf-v6-c-expandable-section
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show less</span>
+      <span
+        class="pf-v6-c-button__text"
+      >Show less disclosure variation example content</span>
     </button>
   </div>
   <div
@@ -126,7 +130,9 @@ cssPrefix: pf-v6-c-expandable-section
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show less</span>
+      <span
+        class="pf-v6-c-button__text"
+      >Show less disclosure variation indented example content</span>
     </button>
   </div>
   <div
@@ -167,7 +173,7 @@ cssPrefix: pf-v6-c-expandable-section
               <i class="fas fa-angle-right" aria-hidden="true"></i>
             </span>
           </span>
-          <span class="pf-v6-c-button__text">Show less</span>
+          <span class="pf-v6-c-button__text">Show less detached example content</span>
         </button>
       </div>
     </div>
@@ -185,7 +191,7 @@ cssPrefix: pf-v6-c-expandable-section
   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
   <div class="pf-v6-c-expandable-section__toggle">
     <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
-      <span class="pf-v6-c-button__text">Show more</span>
+      <span class="pf-v6-c-button__text">Show more truncated content</span>
     </button>
   </div>
 </div>
@@ -205,7 +211,7 @@ cssPrefix: pf-v6-c-expandable-section
       type="button"
       aria-expanded
     >
-      <span class="pf-v6-c-button__text">Show less</span>
+      <span class="pf-v6-c-button__text">Show less truncated content</span>
     </button>
   </div>
 </div>

package/docs/components/Hint/examples/Hint.md

@@ -13,7 +13,7 @@ cssPrefix: pf-v6-c-hint
       class="pf-v6-c-menu-toggle pf-m-plain"
       type="button"
       aria-expanded="false"
-      aria-label="Hint menu toggle"
+      aria-label="Hint with title example actions"
       id="hint-with-title-example-hint"
     >
       <span class="pf-v6-c-menu-toggle__icon">
@@ -35,7 +35,7 @@ cssPrefix: pf-v6-c-hint
       class="pf-v6-c-menu-toggle pf-m-plain"
       type="button"
       aria-expanded="false"
-      aria-label="Hint menu toggle"
+      aria-label="Hint with title and footer example actions"
       id="hint-with-title-and-actions-example-hint"
     >
       <span class="pf-v6-c-menu-toggle__icon">
@@ -74,7 +74,7 @@ cssPrefix: pf-v6-c-hint
       class="pf-v6-c-menu-toggle pf-m-plain"
       type="button"
       aria-expanded="false"
-      aria-label="Hint menu toggle"
+      aria-label="Hint without title example actions"
       id="hint-with-no-title-example-hint"
     >
       <span class="pf-v6-c-menu-toggle__icon">

package/docs/components/Skeleton/examples/Skeleton.md

@@ -9,14 +9,18 @@ cssPrefix: pf-v6-c-skeleton
 ### Default
 
 ```html
-<div class="pf-v6-c-skeleton"></div>
+<div class="pf-v6-c-skeleton">
+  <span class="pf-v6-screen-reader">Loading default content</span>
+</div>
 
 ```
 
 ### Percentage width modifiers
 
 ```html
-<div class="pf-v6-c-skeleton pf-m-width-25"></div>
+<div class="pf-v6-c-skeleton pf-m-width-25">
+  <span class="pf-v6-screen-reader">Loading percentage with modifiers content</span>
+</div>
 <br />
 <div class="pf-v6-c-skeleton pf-m-width-33"></div>
 <br />
@@ -33,7 +37,9 @@ cssPrefix: pf-v6-c-skeleton
 ### Percentage height modifiers
 
 ```html
-<div class="pf-v6-c-skeleton pf-m-height-25"></div>
+<div class="pf-v6-c-skeleton pf-m-height-25">
+  <span class="pf-v6-screen-reader">Loading percentage height modifiers content</span>
+</div>
 <div class="pf-v6-c-skeleton pf-m-height-33"></div>
 <div class="pf-v6-c-skeleton pf-m-height-50"></div>
 <div class="pf-v6-c-skeleton pf-m-height-66"></div>
@@ -46,7 +52,9 @@ cssPrefix: pf-v6-c-skeleton
 
 ```html
 --pf-v6-global--FontSize--4xl
-<div class="pf-v6-c-skeleton pf-m-text-4xl"></div>
+<div class="pf-v6-c-skeleton pf-m-text-4xl">
+  <span class="pf-v6-screen-reader">Loading text modifiers content</span>
+</div>
 <br />--pf-v6-global--FontSize--3xl
 <div class="pf-v6-c-skeleton pf-m-text-3xl"></div>
 <br />--pf-v6-global--FontSize--2xl
@@ -66,19 +74,25 @@ cssPrefix: pf-v6-c-skeleton
 
 ```html
 Small circle
-<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-sm"></div>
+<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-sm">
+  <span class="pf-v6-screen-reader">Loading circle content</span>
+</div>
 <br />Medium circle
 <div class="pf-v6-c-skeleton pf-m-circle pf-m-width-md"></div>
 <br />Large circle
 <div class="pf-v6-c-skeleton pf-m-circle pf-m-width-lg"></div>
 <br />Small square
-<div class="pf-v6-c-skeleton pf-m-square pf-m-width-sm"></div>
+<div class="pf-v6-c-skeleton pf-m-square pf-m-width-sm">
+  <span class="pf-v6-screen-reader">Loading square content</span>
+</div>
 <br />Medium square
 <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
 <br />Large square
 <div class="pf-v6-c-skeleton pf-m-square pf-m-width-lg"></div>
 <br />Small rectangle
-<div class="pf-v6-c-skeleton pf-m-height-sm pf-m-width-md"></div>
+<div class="pf-v6-c-skeleton pf-m-height-sm pf-m-width-md">
+  <span class="pf-v6-screen-reader">Loading rectangle content</span>
+</div>
 <br />Medium rectangle
 <div class="pf-v6-c-skeleton pf-m-height-md pf-m-width-lg"></div>
 <br />Large rectangle

package/docs/components/Title/examples/Title.md

@@ -19,12 +19,12 @@ cssPrefix: pf-v6-c-title
 ### Heading level modifiers
 
 ```html
-<div class="pf-v6-c-title pf-m-h1">H1-styled title</div>
-<div class="pf-v6-c-title pf-m-h2">H2-styled title</div>
-<div class="pf-v6-c-title pf-m-h3">H3-styled title</div>
-<div class="pf-v6-c-title pf-m-h4">H4-styled title</div>
-<div class="pf-v6-c-title pf-m-h5">H5-styled title</div>
-<div class="pf-v6-c-title pf-m-h6">H6-styled title</div>
+<h1 class="pf-v6-c-title pf-m-h1">H1-styled title</h1>
+<h2 class="pf-v6-c-title pf-m-h2">H2-styled title</h2>
+<h3 class="pf-v6-c-title pf-m-h3">H3-styled title</h3>
+<h4 class="pf-v6-c-title pf-m-h4">H4-styled title</h4>
+<h5 class="pf-v6-c-title pf-m-h5">H5-styled title</h5>
+<h6 class="pf-v6-c-title pf-m-h6">H6-styled title</h6>
 
 ```
 
@@ -33,7 +33,7 @@ cssPrefix: pf-v6-c-title
 ```html
 <h1 class="pf-v6-c-title pf-m-2xl pf-m-page-title">2xl page title</h1>
 
-<div class="pf-v6-c-title pf-m-h1 pf-m-page-title">H1 page title</div>
+<h1 class="pf-v6-c-title pf-m-h1 pf-m-page-title">H1 page title</h1>
 
 ```
 
@@ -58,7 +58,7 @@ The content component defines margin on headers. To regain the same spacing use,
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v6-c-title` | `*` |  Initiates a title. Always use it with a modifier class. |
+| `.pf-v6-c-title` | `h1-h6` |  Initiates a title. Always use it with a modifier class. |
 | `.pf-m-4xl` | `.pf-v6-c-title` | Modifies for 4xl size |
 | `.pf-m-3xl` | `.pf-v6-c-title` | Modifies for 3xl size |
 | `.pf-m-2xl` | `.pf-v6-c-title` | Modifies for 2xl size |

package/docs/demos/Skeleton/examples/Skeleton.md

@@ -288,7 +288,9 @@ section: components
             <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
               <div class="pf-v6-c-card__body">
                 <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
-                  <div class="pf-v6-c-skeleton"></div>
+                  <div class="pf-v6-c-skeleton">
+                    <span class="pf-v6-screen-reader">Loading card content</span>
+                  </div>
                   <div class="pf-v6-c-skeleton pf-m-width-66"></div>
                   <div class="pf-v6-c-skeleton pf-m-width-25"></div>
                   <div class="pf-v6-c-skeleton pf-m-width-50"></div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.3.0-prerelease.49",
+  "version": "6.3.0-prerelease.50",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -47,7 +47,7 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.1.0",
-    "@patternfly/documentation-framework": "6.17.0",
+    "@patternfly/documentation-framework": "6.18.2",
     "@patternfly/patternfly-a11y": "5.1.0",
     "@patternfly/react-code-editor": "6.3.1",
     "@patternfly/react-core": "6.3.1",

package/patternfly-no-globals.css

@@ -9695,6 +9695,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
+  outline-offset: var(--pf-t--global--focus-ring--position--offset);
 }
 .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
@@ -10276,7 +10277,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 
 .pf-v6-c-card__title-text {
-  overflow: auto;
   font-family: var(--pf-v6-c-card__title-text--FontFamily);
   font-size: var(--pf-v6-c-card__title-text--FontSize);
   font-weight: var(--pf-v6-c-card__title-text--FontWeight);

package/patternfly.css

@@ -9835,6 +9835,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
+  outline-offset: var(--pf-t--global--focus-ring--position--offset);
 }
 .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
@@ -10416,7 +10417,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 
 .pf-v6-c-card__title-text {
-  overflow: auto;
   font-family: var(--pf-v6-c-card__title-text--FontFamily);
   font-size: var(--pf-v6-c-card__title-text--FontSize);
   font-weight: var(--pf-v6-c-card__title-text--FontWeight);