@patternfly/react-styles 6.3.0-prerelease.3 → 6.3.0-prerelease.5

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.
@@ -376,33 +376,32 @@
376
376
  }
377
377
 
378
378
  .pf-v6-c-accordion__expandable-content {
379
- display: none;
380
- margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
379
+ max-height: 0;
381
380
  margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
382
381
  margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
383
382
  font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
384
383
  color: var(--pf-v6-c-accordion__expandable-content--Color);
384
+ visibility: hidden;
385
385
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
386
386
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
387
387
  opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
388
+ transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
388
389
  transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
389
- transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
390
- transition-property: opacity, translate, display;
391
- transition-behavior: allow-discrete;
390
+ transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
391
+ transition-property: opacity, translate, visibility, max-height, margin-block-end;
392
392
  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
393
393
  }
394
394
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
395
- max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
396
395
  overflow-y: auto;
397
396
  }
398
397
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
399
- display: revert;
398
+ max-height: 9999px;
399
+ margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
400
+ visibility: revert;
401
+ transition-delay: 0s;
400
402
  }
401
- @starting-style {
402
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
403
- --pf-v6-c-accordion__expandable-content--Opacity: 0;
404
- --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
405
- }
403
+ .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
404
+ max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
406
405
  }
407
406
 
408
407
  .pf-v6-c-accordion__expandable-content-body {
@@ -1548,9 +1547,10 @@ button.pf-v6-c-breadcrumb__link {
1548
1547
  --pf-v6-c-button--TextDecorationLine: none;
1549
1548
  --pf-v6-c-button--TextDecorationStyle: none;
1550
1549
  --pf-v6-c-button--TextDecorationColor: currentcolor;
1550
+ --pf-v6-c-button--TransitionDelay: 0s;
1551
1551
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1552
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1553
- --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
1552
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1553
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
1554
1554
  --pf-v6-c-button--hover--BackgroundColor: transparent;
1555
1555
  --pf-v6-c-button--hover--BorderColor: transparent;
1556
1556
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -1766,6 +1766,16 @@ button.pf-v6-c-breadcrumb__link {
1766
1766
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1767
1767
  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
1768
1768
  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
1769
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1770
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
1771
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
1772
+ --pf-v6-c-button__icon--TransitionProperty: none;
1773
+ --pf-v6-c-button__icon--Rotate: 0deg;
1774
+ --pf-v6-c-button__icon--Scale: 1;
1775
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
1776
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
1777
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
1778
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
1769
1779
  --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1770
1780
  --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1771
1781
  --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
@@ -1791,9 +1801,28 @@ button.pf-v6-c-breadcrumb__link {
1791
1801
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
1792
1802
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1793
1803
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
1804
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1805
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1806
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1807
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1808
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
1794
1809
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
1795
1810
  --pf-v6-c-button--m-block--Display: flex;
1796
1811
  --pf-v6-c-button--m-block--Width: 100%;
1812
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1813
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
1814
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
1815
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
1816
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
1817
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
1818
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
1819
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
1820
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
1821
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
1822
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
1823
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
1824
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
1825
+ --pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
1797
1826
  }
1798
1827
 
1799
1828
  .pf-v6-c-button {
@@ -1817,16 +1846,19 @@ button.pf-v6-c-breadcrumb__link {
1817
1846
  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
1818
1847
  white-space: nowrap;
1819
1848
  cursor: pointer;
1849
+ -webkit-user-select: none;
1820
1850
  user-select: none;
1821
- background-color: var(--pf-v6-c-button--BackgroundColor);
1851
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
1822
1852
  border: 0;
1823
1853
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
1824
1854
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
1825
1855
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
1826
1856
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
1857
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
1827
1858
  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
1828
1859
  transition-duration: var(--pf-v6-c-button--TransitionDuration);
1829
1860
  transition-property: var(--pf-v6-c-button--TransitionProperty);
1861
+ scale: var(--pf-v6-c-button--Scale, revert);
1830
1862
  }
1831
1863
  .pf-v6-c-button::after {
1832
1864
  position: absolute;
@@ -1935,6 +1967,7 @@ button.pf-v6-c-breadcrumb__link {
1935
1967
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
1936
1968
  text-align: start;
1937
1969
  white-space: normal;
1970
+ background: transparent;
1938
1971
  outline-offset: 0.125rem;
1939
1972
  }
1940
1973
  span.pf-v6-c-button.pf-m-link.pf-m-inline {
@@ -2068,6 +2101,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2068
2101
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
2069
2102
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
2070
2103
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
2104
+ background: var(--pf-v6-c-button--BackgroundColor);
2071
2105
  }
2072
2106
  .pf-v6-c-button.pf-m-block {
2073
2107
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
@@ -2094,7 +2128,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2094
2128
  }
2095
2129
  .pf-v6-c-button.pf-m-favorited {
2096
2130
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
2131
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
2097
2132
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
2133
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
2098
2134
  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
2099
2135
  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
2100
2136
  }
@@ -2103,6 +2139,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2103
2139
  animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
2104
2140
  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
2105
2141
  }
2142
+ .pf-v6-c-button.pf-m-settings {
2143
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
2144
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
2145
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
2146
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
2147
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
2148
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
2149
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
2150
+ }
2151
+ .pf-v6-c-button.pf-m-hamburger {
2152
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2153
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
2154
+ --pf-v6-c-button__icon--TransitionProperty: scale;
2155
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2156
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
2157
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
2158
+ }
2159
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
2160
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2161
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2162
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2163
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
2164
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
2165
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2166
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
2167
+ }
2168
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
2169
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2170
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2171
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2172
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
2173
+ --pf-v6-c-button__icon--Scale: 1;
2174
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2175
+ --pf-v6-c-button--hover__icon--Scale: 1;
2176
+ }
2106
2177
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2107
2178
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
2108
2179
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -2110,24 +2181,32 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2110
2181
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
2111
2182
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
2112
2183
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
2184
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
2185
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
2186
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
2187
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
2113
2188
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2114
2189
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2115
2190
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2116
2191
  }
2117
- .pf-v6-c-button.pf-m-clicked {
2192
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
2118
2193
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
2119
2194
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
2120
2195
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
2121
2196
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
2122
2197
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2123
2198
  }
2199
+ .pf-v6-c-button:active {
2200
+ background-size: 100%;
2201
+ transition-duration: 0s;
2202
+ }
2124
2203
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2125
2204
  pointer-events: none;
2126
2205
  }
2127
2206
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2128
2207
  color: var(--pf-v6-c-button--disabled--Color);
2129
2208
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2130
- background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
2209
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
2131
2210
  }
2132
2211
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2133
2212
  border-color: transparent;
@@ -2168,6 +2247,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2168
2247
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2169
2248
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2170
2249
  color: var(--pf-v6-c-button__icon--Color);
2250
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2251
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2252
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2253
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2254
+ rotate: var(--pf-v6-c-button__icon--Rotate);
2255
+ scale: var(--pf-v6-c-button__icon--Scale);
2171
2256
  }
2172
2257
  .pf-v6-c-button__icon.pf-m-start {
2173
2258
  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
@@ -2212,6 +2297,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2212
2297
  align-items: center;
2213
2298
  }
2214
2299
 
2300
+ .pf-v6-c-button--hamburger-icon path {
2301
+ fill: none;
2302
+ stroke: currentcolor;
2303
+ stroke-linecap: round;
2304
+ stroke-linejoin: round;
2305
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2306
+ }
2307
+
2308
+ .pf-v6-c-button--hamburger-icon--top {
2309
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2310
+ }
2311
+
2312
+ .pf-v6-c-button--hamburger-icon--middle {
2313
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2314
+ }
2315
+
2316
+ .pf-v6-c-button--hamburger-icon--arrow {
2317
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2318
+ }
2319
+
2320
+ .pf-v6-c-button--hamburger-icon--bottom {
2321
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2322
+ }
2323
+
2215
2324
  @keyframes pf-v6-c-button-icon-notify {
2216
2325
  33% {
2217
2326
  transform: rotate(30deg);
@@ -6474,7 +6583,7 @@ ul) {
6474
6583
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
6475
6584
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
6476
6585
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
6477
- --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6586
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
6478
6587
  --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
6479
6588
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
6480
6589
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
@@ -6493,7 +6602,7 @@ ul) {
6493
6602
  gap: 0;
6494
6603
  transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
6495
6604
  transition-duration: 0s;
6496
- transition-property: gap;
6605
+ transition-property: gap, padding-block-end;
6497
6606
  }
6498
6607
  .pf-v6-c-expandable-section.pf-m-expanded {
6499
6608
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -6503,7 +6612,6 @@ ul) {
6503
6612
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
6504
6613
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
6505
6614
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
6506
- --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
6507
6615
  --pf-v6-c-expandable-section__content--Visibility: auto;
6508
6616
  --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
6509
6617
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
@@ -6520,7 +6628,6 @@ ul) {
6520
6628
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
6521
6629
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
6522
6630
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
6523
- transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
6524
6631
  }
6525
6632
  .pf-v6-c-expandable-section.pf-m-indented {
6526
6633
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -6706,6 +6813,19 @@ ul) {
6706
6813
  --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
6707
6814
  --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
6708
6815
  --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
6816
+ --pf-v6-c-form__field-group-body--TranslateY: 0;
6817
+ --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
6818
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
6819
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
6820
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
6821
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
6822
+ }
6823
+ @media screen and (prefers-reduced-motion: no-preference) {
6824
+ .pf-v6-c-form {
6825
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
6826
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
6827
+ --pf-v6-c-form__field-group-body--TranslateY: -.5rem;
6828
+ }
6709
6829
  }
6710
6830
 
6711
6831
  .pf-v6-c-form {
@@ -7062,6 +7182,16 @@ ul) {
7062
7182
  .pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
7063
7183
  --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
7064
7184
  }
7185
+ .pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
7186
+ max-height: 9999px;
7187
+ padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
7188
+ padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
7189
+ visibility: visible;
7190
+ opacity: 1;
7191
+ transition-delay: 0s;
7192
+ transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
7193
+ translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
7194
+ }
7065
7195
 
7066
7196
  .pf-v6-c-form__field-group-toggle {
7067
7197
  grid-row: 1/2;
@@ -7128,9 +7258,17 @@ ul) {
7128
7258
  display: grid;
7129
7259
  grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
7130
7260
  gap: var(--pf-v6-c-form__field-group-body--Gap);
7131
- padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
7132
- padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
7133
7261
  }
7262
+ .pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
7263
+ max-height: 0;
7264
+ visibility: hidden;
7265
+ opacity: 0;
7266
+ transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
7267
+ transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
7268
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
7269
+ translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
7270
+ }
7271
+
7134
7272
  .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
7135
7273
  --pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
7136
7274
  --pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
@@ -9835,7 +9973,7 @@ ul.pf-v6-c-list {
9835
9973
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
9836
9974
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
9837
9975
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
9838
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9976
+ --pf-v6-c-menu--TransitionDuration: 0s;
9839
9977
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9840
9978
  --pf-v6-c-menu--m-plain--BoxShadow: none;
9841
9979
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -9908,14 +10046,34 @@ ul.pf-v6-c-list {
9908
10046
  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
9909
10047
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
9910
10048
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
9911
- --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
10049
+ --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
9912
10050
  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
9913
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10051
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
9914
10052
  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
9915
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10053
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
9916
10054
  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
9917
10055
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
9918
10056
  }
10057
+ @media (prefers-reduced-motion: no-preference) {
10058
+ .pf-v6-c-menu {
10059
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
10060
+ }
10061
+ }
10062
+ @media (prefers-reduced-motion: no-preference) {
10063
+ .pf-v6-c-menu {
10064
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
10065
+ }
10066
+ }
10067
+ @media (prefers-reduced-motion: no-preference) {
10068
+ .pf-v6-c-menu {
10069
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10070
+ }
10071
+ }
10072
+ @media (prefers-reduced-motion: no-preference) {
10073
+ .pf-v6-c-menu {
10074
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10075
+ }
10076
+ }
9919
10077
 
9920
10078
  .pf-v6-c-menu__content,
9921
10079
  .pf-v6-c-menu__list-item,
@@ -10449,6 +10607,14 @@ ul.pf-v6-c-list {
10449
10607
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
10450
10608
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
10451
10609
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
10610
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
10611
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
10612
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
10613
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
10614
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
10615
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
10616
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
10617
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
10452
10618
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
10453
10619
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
10454
10620
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
@@ -10546,6 +10712,11 @@ ul.pf-v6-c-list {
10546
10712
  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
10547
10713
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
10548
10714
  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
10715
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
10716
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
10717
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
10718
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
10719
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
10549
10720
  }
10550
10721
 
10551
10722
  .pf-v6-c-menu-toggle {
@@ -10659,6 +10830,10 @@ ul.pf-v6-c-list {
10659
10830
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
10660
10831
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
10661
10832
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
10833
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
10834
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
10835
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
10836
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
10662
10837
  }
10663
10838
  .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
10664
10839
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
@@ -10714,6 +10889,15 @@ ul.pf-v6-c-list {
10714
10889
  opacity: 1;
10715
10890
  }
10716
10891
  }
10892
+ .pf-v6-c-menu-toggle.pf-m-settings {
10893
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
10894
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
10895
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
10896
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
10897
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
10898
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
10899
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
10900
+ }
10717
10901
  .pf-v6-c-menu-toggle.pf-m-placeholder {
10718
10902
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
10719
10903
  }
@@ -10875,6 +11059,10 @@ ul.pf-v6-c-list {
10875
11059
 
10876
11060
  .pf-v6-c-menu-toggle__icon {
10877
11061
  flex-shrink: 0;
11062
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
11063
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
11064
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
11065
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
10878
11066
  }
10879
11067
  .pf-v6-c-menu-toggle__icon :where(picture, img) {
10880
11068
  vertical-align: middle;
@@ -11366,9 +11554,13 @@ ul.pf-v6-c-list {
11366
11554
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11367
11555
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
11368
11556
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
11369
- --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
11370
- --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
11557
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
11558
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
11559
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
11560
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
11371
11561
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
11562
+ --pf-v6-c-nav__subnav--TranslateY: 0;
11563
+ --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
11372
11564
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
11373
11565
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
11374
11566
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -11397,6 +11589,13 @@ ul.pf-v6-c-list {
11397
11589
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
11398
11590
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11399
11591
  }
11592
+ @media screen and (prefers-reduced-motion: no-preference) {
11593
+ .pf-v6-c-nav {
11594
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
11595
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
11596
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
11597
+ }
11598
+ }
11400
11599
 
11401
11600
  .pf-v6-c-nav,
11402
11601
  .pf-v6-c-nav__section,
@@ -11467,24 +11666,27 @@ ul.pf-v6-c-list {
11467
11666
 
11468
11667
  .pf-v6-c-nav__subnav {
11469
11668
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
11470
- grid-template-rows: 1fr;
11471
- min-height: 0;
11669
+ max-height: 9999px;
11472
11670
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
11473
11671
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
11474
11672
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11475
11673
  overflow-y: clip;
11476
- transition-delay: 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
11674
+ visibility: visible;
11675
+ transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
11477
11676
  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
11478
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
11479
- transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
11677
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
11678
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
11679
+ translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
11480
11680
  }
11481
11681
  .pf-v6-c-nav__subnav[hidden] {
11482
11682
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
11483
11683
  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
11684
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
11484
11685
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11485
11686
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11687
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
11486
11688
  display: grid;
11487
- grid-template-rows: 0fr;
11689
+ max-height: 0;
11488
11690
  visibility: hidden;
11489
11691
  opacity: 0;
11490
11692
  }
@@ -12077,6 +12279,51 @@ ul.pf-v6-c-list {
12077
12279
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
12078
12280
  }
12079
12281
  }
12282
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12283
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12284
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12285
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12286
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12287
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
12288
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12289
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
12290
+ }
12291
+ .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
12292
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12293
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12294
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12295
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12296
+ --pf-v6-c-button__icon--Scale: 1;
12297
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12298
+ --pf-v6-c-button--hover__icon--Scale: 1;
12299
+ }
12300
+ @media (min-width: 75rem) {
12301
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
12302
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
12303
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
12304
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
12305
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
12306
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
12307
+ }
12308
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12309
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12310
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12311
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12312
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12313
+ --pf-v6-c-button__icon--Scale: 1;
12314
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12315
+ --pf-v6-c-button--hover__icon--Scale: 1;
12316
+ }
12317
+ .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12318
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12319
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12320
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12321
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12322
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
12323
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12324
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
12325
+ }
12326
+ }
12080
12327
 
12081
12328
  .pf-v6-c-page > .pf-v6-c-masthead {
12082
12329
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
@@ -22432,10 +22679,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22432
22679
  }
22433
22680
 
22434
22681
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
22682
+ max-height: 0;
22683
+ visibility: hidden;
22435
22684
  opacity: var(--pf-v6-c-tree-view__list--Opacity);
22685
+ transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
22436
22686
  transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
22437
- transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
22438
- transition-property: opacity, translate;
22687
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
22688
+ transition-property: opacity, translate, visibility, max-height;
22439
22689
  translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
22440
22690
  }
22441
22691
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
@@ -22447,8 +22697,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22447
22697
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
22448
22698
  }
22449
22699
  .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
22700
+ max-height: 9999px;
22701
+ visibility: revert;
22450
22702
  opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
22451
- transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
22703
+ transition-delay: 0s;
22704
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
22452
22705
  translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
22453
22706
  }
22454
22707
 
@@ -45,6 +45,11 @@ declare const _default: {
45
45
  "breadcrumbList": "pf-v6-c-breadcrumb__list",
46
46
  "button": "pf-v6-c-button",
47
47
  "buttonCount": "pf-v6-c-button__count",
48
+ "buttonHamburgerIcon": "pf-v6-c-button--hamburger-icon",
49
+ "buttonHamburgerIconArrow": "pf-v6-c-button--hamburger-icon--arrow",
50
+ "buttonHamburgerIconBottom": "pf-v6-c-button--hamburger-icon--bottom",
51
+ "buttonHamburgerIconMiddle": "pf-v6-c-button--hamburger-icon--middle",
52
+ "buttonHamburgerIconTop": "pf-v6-c-button--hamburger-icon--top",
48
53
  "buttonIcon": "pf-v6-c-button__icon",
49
54
  "buttonIconFavorite": "pf-v6-c-button__icon-favorite",
50
55
  "buttonIconFavorited": "pf-v6-c-button__icon-favorited",
@@ -395,6 +400,10 @@ declare const _default: {
395
400
  "small": "pf-m-small",
396
401
  "favorite": "pf-m-favorite",
397
402
  "favorited": "pf-m-favorited",
403
+ "settings": "pf-m-settings",
404
+ "hamburger": "pf-m-hamburger",
405
+ "expand": "pf-m-expand",
406
+ "collapse": "pf-m-collapse",
398
407
  "clicked": "pf-m-clicked",
399
408
  "ariaDisabled": "pf-m-aria-disabled",
400
409
  "progress": "pf-m-progress",