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

package/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -16,7 +16,7 @@ cssPrefix: pf-v6-c-text-input-group
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value
-        aria-label="Type to filter"
+        aria-label="Basic"
       />
     </span>
   </div>
@@ -35,7 +35,7 @@ cssPrefix: pf-v6-c-text-input-group
         type="text"
         disabled
         value="Disabled"
-        aria-label="Disabled text input group example input"
+        aria-label="Disabled"
       />
     </span>
   </div>
@@ -56,7 +56,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Text input group with plain styling"
-        aria-label="Type to filter"
+        aria-label="Plain"
       />
     </span>
   </div>
@@ -78,7 +78,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         type="text"
         placeholder="placeholder"
         value
-        aria-label="Type to filter"
+        aria-label="Utilities and icon with placeholder"
       />
     </span>
   </div>
@@ -86,7 +86,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear utilities and icon with placeholder example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -107,7 +107,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Success validation"
-        aria-label="Type to filter"
+        aria-label="Success validation"
       />
       <span class="pf-v6-c-text-input-group__icon pf-m-status">
         <i aria-hidden="true" class="fas fa-check-circle"></i>
@@ -126,7 +126,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Warning validation with icon at start"
-        aria-label="Type to filter"
+        aria-label="Warning validation"
       />
       <span class="pf-v6-c-text-input-group__icon pf-m-status">
         <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
@@ -145,7 +145,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Error validation with icon at start and utilities"
-        aria-label="Type to filter"
+        aria-label="Error validation"
       />
       <span class="pf-v6-c-text-input-group__icon pf-m-status">
         <i aria-hidden="true" class="fas fa-exclamation-circle"></i>
@@ -156,7 +156,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear error validation example"
     >
       <span class="pf-v6-c-button__text">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -362,7 +362,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value
-        aria-label="Type to filter"
+        aria-label="Filters"
       />
     </span>
   </div>
@@ -370,7 +370,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear filter example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -723,7 +723,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value
-        aria-label="Type to filter"
+        aria-label="Filters expanded"
       />
     </span>
   </div>
@@ -731,7 +731,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear filters expanded example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -783,7 +783,7 @@ The React implementation can be found in the [search input](/components/search-i
         type="text"
         placeholder="Find by name"
         value
-        aria-label="Search input"
+        aria-label="Search input group"
       />
     </span>
   </div>
@@ -805,7 +805,7 @@ The React implementation can be found in the [search input](/components/search-i
         type="text"
         placeholder="Find by name"
         value="Joh"
-        aria-label="Search input"
+        aria-label="Search input group no match"
       />
     </span>
   </div>
@@ -813,7 +813,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear search input group no match"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -838,16 +838,19 @@ The React implementation can be found in the [search input](/components/search-i
         type="text"
         placeholder="Find by name"
         value="John Doe"
-        aria-label="Search input"
+        aria-label="Search input group match with result count"
       />
     </span>
   </div>
   <div class="pf-v6-c-text-input-group__utilities">
-    <span class="pf-v6-c-badge pf-m-read">3</span>
+    <span class="pf-v6-c-badge pf-m-read">
+      <span aria-hidden="true">3</span>
+      <span class="pf-v6-screen-reader">3 matching results</span>
+    </span>
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear search input group match with result count"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -872,16 +875,36 @@ The React implementation can be found in the [search input](/components/search-i
         type="text"
         placeholder="Find by name"
         value="John Doe"
-        aria-label="Search input"
+        aria-label="Search input group match with navigable options"
       />
     </span>
   </div>
   <div class="pf-v6-c-text-input-group__utilities">
-    <span class="pf-v6-c-badge pf-m-read">1 / 3</span>
+    <span class="pf-v6-c-badge pf-m-read">
+      <span aria-hidden="true">1 / 3</span>
+      <span class="pf-v6-screen-reader">Showing result 1 / 3</span>
+    </span>
+    <div class="pf-v6-c-text-input-group__group">
+      <button
+        class="pf-v6-c-button pf-m-plain"
+        type="button"
+        aria-label="Previous"
+        disabled
+      >
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
+        </span>
+      </button>
+      <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Next">
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
+        </span>
+      </button>
+    </div>
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear search input group match with navigable options"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -910,7 +933,7 @@ The React implementation can be found in the [search input](/components/search-i
             type="text"
             placeholder="Search"
             value
-            aria-label="Search input"
+            aria-label="Search input group collapsed"
           />
         </span>
       </div>
@@ -920,7 +943,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Open search"
+      aria-label="Open search input group collapsed"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-search fa-fw" aria-hidden="true"></i>
@@ -928,7 +951,11 @@ The React implementation can be found in the [search input](/components/search-i
     </button>
   </div>
   <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
-    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
+    <button
+      class="pf-v6-c-button pf-m-plain"
+      type="button"
+      aria-label="Close search input group expandable"
+    >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
       </span>
@@ -954,7 +981,7 @@ The React implementation can be found in the [search input](/components/search-i
             type="text"
             placeholder="Search"
             value
-            aria-label="Search input"
+            aria-label="Search input group expanded"
           />
         </span>
       </div>
@@ -964,7 +991,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Open search"
+      aria-label="Open search input group collapsed"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-search fa-fw" aria-hidden="true"></i>
@@ -972,7 +999,11 @@ The React implementation can be found in the [search input](/components/search-i
     </button>
   </div>
   <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
-    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
+    <button
+      class="pf-v6-c-button pf-m-plain"
+      type="button"
+      aria-label="Close search input group expandable"
+    >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
       </span>
@@ -998,7 +1029,7 @@ The React implementation can be found in the [search input](/components/search-i
             type="text"
             placeholder="Find by name"
             value
-            aria-label="Search input"
+            aria-label="Search input group with submit button"
           />
         </span>
       </div>
@@ -1008,7 +1039,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-control"
       type="submit"
-      aria-label="Search"
+      aria-label="Submit search input group"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1034,7 +1065,7 @@ The React implementation can be found in the [search input](/components/search-i
             class="pf-v6-c-text-input-group__text-input"
             type="text"
             value="username:root firstname:ned"
-            aria-label="Search input"
+            aria-label="Search input group advanced search"
           />
         </span>
       </div>
@@ -1042,7 +1073,7 @@ The React implementation can be found in the [search input](/components/search-i
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Clear input"
+          aria-label="Clear advance search input group collapsed"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1056,7 +1087,7 @@ The React implementation can be found in the [search input](/components/search-i
       class="pf-v6-c-button pf-m-control"
       type="button"
       aria-expanded="false"
-      aria-label="Advanced search"
+      aria-label="Advanced search collapsed"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -1067,7 +1098,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-control"
       type="submit"
-      aria-label="Search"
+      aria-label="Search advance search input group collapsed"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1093,7 +1124,7 @@ The React implementation can be found in the [search input](/components/search-i
             class="pf-v6-c-text-input-group__text-input"
             type="text"
             value="username:root firstname:ned"
-            aria-label="Search input"
+            aria-label="Search input group advanced search expanded"
           />
         </span>
       </div>
@@ -1101,7 +1132,7 @@ The React implementation can be found in the [search input](/components/search-i
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Clear input"
+          aria-label="Clear advance search input group expanded"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1115,7 +1146,7 @@ The React implementation can be found in the [search input](/components/search-i
       class="pf-v6-c-button pf-m-expanded pf-m-control"
       type="button"
       aria-expanded="true"
-      aria-label="Advanced search"
+      aria-label="Advanced search expanded"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -1126,7 +1157,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-control"
       type="submit"
-      aria-label="Search"
+      aria-label="Search advance search input group expanded"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1211,10 +1242,20 @@ The React implementation can be found in the [search input](/components/search-i
         </div>
         <div class="pf-v6-c-form__group pf-m-action">
           <div class="pf-v6-c-form__actions">
-            <button class="pf-v6-c-button pf-m-primary" type="submit">
+            <button
+              class="pf-v6-c-button pf-m-primary"
+              id="submit-advanced-search-expanded"
+              type="submit"
+              aria-labelledby="submit-advanced-search-expanded search-input-group-advanced-search-expanded"
+            >
               <span class="pf-v6-c-button__text">Submit</span>
             </button>
-            <button class="pf-v6-c-button pf-m-link" type="reset">
+            <button
+              class="pf-v6-c-button pf-m-link"
+              id="reset-advanced-search-expanded"
+              type="reset"
+              aria-labelledby="reset-advanced-search-expanded search-input-group-advanced-search-expanded"
+            >
               <span class="pf-v6-c-button__text">Reset</span>
             </button>
           </div>
@@ -1239,7 +1280,7 @@ The React implementation can be found in the [search input](/components/search-i
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="app"
-        aria-label="Search input"
+        aria-label="Search input group autocomplete"
       />
     </span>
   </div>
@@ -1247,7 +1288,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear autocomplete search input group"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1315,7 +1356,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear autocomple search input group last option hint"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1356,7 +1397,7 @@ The React implementation can be found in the [search input](/components/search-i
               class="pf-v6-c-text-input-group__text-input"
               type="text"
               value="username:root firstname:n"
-              aria-label="Search input"
+              aria-label="Search input group advanced search expanded with autocomplete"
             />
           </span>
         </div>
@@ -1364,7 +1405,7 @@ The React implementation can be found in the [search input](/components/search-i
           <button
             class="pf-v6-c-button pf-m-plain"
             type="button"
-            aria-label="Clear input"
+            aria-label="Clear advance search input group expanded with autocomplete"
           >
             <span class="pf-v6-c-button__icon">
               <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1378,7 +1419,7 @@ The React implementation can be found in the [search input](/components/search-i
         class="pf-v6-c-button pf-m-expanded pf-m-control"
         type="button"
         aria-expanded="true"
-        aria-label="Advanced search"
+        aria-label="Advanced search expanded with autocomplete"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -1389,7 +1430,7 @@ The React implementation can be found in the [search input](/components/search-i
       <button
         class="pf-v6-c-button pf-m-control"
         type="submit"
-        aria-label="Search"
+        aria-label="Search advanced search input group expanded with autocomplete"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1474,10 +1515,20 @@ The React implementation can be found in the [search input](/components/search-i
           </div>
           <div class="pf-v6-c-form__group pf-m-action">
             <div class="pf-v6-c-form__actions">
-              <button class="pf-v6-c-button pf-m-primary" type="submit">
+              <button
+                class="pf-v6-c-button pf-m-primary"
+                id="submit-advanced-search-expanded-with-autocomplete"
+                type="submit"
+                aria-labelledby="submit-advanced-search-expanded-with-autocomplete search-input-group-advanced-search-expanded-with-autocomplete"
+              >
                 <span class="pf-v6-c-button__text">Submit</span>
               </button>
-              <button class="pf-v6-c-button pf-m-link" type="reset">
+              <button
+                class="pf-v6-c-button pf-m-link"
+                id="reset-advanced-search-expanded-with-autocomplete"
+                type="submit"
+                aria-labelledby="reset-advanced-search-expanded-with-autocomplete search-input-group-advanced-search-expanded-with-autocomplete"
+              >
                 <span class="pf-v6-c-button__text">Reset</span>
               </button>
             </div>

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.3.0-prerelease.50",
+  "version": "6.3.0-prerelease.52",
   "keywords": [],
   "license": "MIT",
+  "engines": {
+    "node": ">=20.18.3 <22"
+  },
   "scripts": {
     "a11y": "patternfly-a11y --config patternfly-a11y.config",
     "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
@@ -47,7 +50,7 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.1.0",
-    "@patternfly/documentation-framework": "6.18.2",
+    "@patternfly/documentation-framework": "6.19.0",
     "@patternfly/patternfly-a11y": "5.1.0",
     "@patternfly/react-code-editor": "6.3.1",
     "@patternfly/react-core": "6.3.1",
@@ -99,7 +102,8 @@
   },
   "resolutions": {
     "@babel/preset-env": "7.18.2",
-    "monaco-editor": "0.34.1"
+    "monaco-editor": "0.34.1",
+    "on-headers": "~1.1.0"
   },
   "repository": {
     "type": "git",
@@ -109,5 +113,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "packageManager": "yarn@4.9.3"
 }

package/patternfly-no-globals.css

@@ -7710,15 +7710,22 @@
   --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
+  --pf-v6-c-accordion__toggle-icon--Rotate: 0;
   --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0;
   --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: 0;
   --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
+  --pf-v6-c-accordion__expandable-content--MaxHeight: 0;
+  --pf-v6-c-accordion__expandable-content--Visibility: hidden;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
   --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
@@ -7816,6 +7823,7 @@
 .pf-v6-c-accordion__item.pf-m-expanded {
   --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
+  --pf-v6-c-accordion__toggle-icon--Rotate: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate);
   --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
   --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
   --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
@@ -7824,9 +7832,11 @@
   --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
   --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
   --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
-}
-.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
-  transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
+  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd);
+  --pf-v6-c-accordion__expandable-content--MaxHeight: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight);
+  --pf-v6-c-accordion__expandable-content--Visibility: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility);
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s;
+  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
 }
 
 .pf-v6-c-accordion__toggle {
@@ -7862,6 +7872,7 @@
 
 .pf-v6-c-accordion__toggle-icon {
   transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
+  transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
   scale: -1 1;
@@ -7872,12 +7883,13 @@
 }
 
 .pf-v6-c-accordion__expandable-content {
-  max-height: 0;
+  max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight);
+  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
   font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
   color: var(--pf-v6-c-accordion__expandable-content--Color);
-  visibility: hidden;
+  visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
@@ -7888,17 +7900,9 @@
   translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
 }
 .pf-v6-c-accordion__expandable-content.pf-m-fixed {
+  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base);
   overflow-y: auto;
 }
-.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
-  max-height: 99999px;
-  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
-  visibility: revert;
-  transition-delay: 0s;
-}
-.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
-  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
-}
 
 .pf-v6-c-accordion__expandable-content-body {
   padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);