@patternfly/react-styles 6.2.0-prerelease.9 → 6.2.1-prerelease.0

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.
Files changed (58) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/css/components/Accordion/accordion.css +3 -1
  3. package/css/components/Alert/alert-group.css +2 -2
  4. package/css/components/Banner/banner.css +2 -2
  5. package/css/components/Button/button.css +25 -0
  6. package/css/components/Button/button.d.ts +2 -0
  7. package/css/components/Button/button.js +2 -0
  8. package/css/components/Button/button.mjs +2 -0
  9. package/css/components/Card/card.css +24 -2
  10. package/css/components/Card/card.d.ts +1 -0
  11. package/css/components/Card/card.js +1 -0
  12. package/css/components/Card/card.mjs +1 -0
  13. package/css/components/ClipboardCopy/clipboard-copy.css +6 -1
  14. package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -0
  15. package/css/components/ClipboardCopy/clipboard-copy.js +1 -0
  16. package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -0
  17. package/css/components/CodeEditor/code-editor.css +3 -0
  18. package/css/components/CodeEditor/code-editor.d.ts +1 -0
  19. package/css/components/CodeEditor/code-editor.js +1 -0
  20. package/css/components/CodeEditor/code-editor.mjs +1 -0
  21. package/css/components/DataList/data-list.css +3 -1
  22. package/css/components/Drawer/drawer.css +28 -14
  23. package/css/components/DualListSelector/dual-list-selector.css +4 -2
  24. package/css/components/ExpandableSection/expandable-section.css +3 -1
  25. package/css/components/Form/form.css +4 -2
  26. package/css/components/FormControl/form-control.css +109 -43
  27. package/css/components/HelperText/helper-text.css +2 -2
  28. package/css/components/JumpLinks/jump-links.css +4 -2
  29. package/css/components/Menu/menu.css +4 -4
  30. package/css/components/MenuToggle/menu-toggle.css +1 -1
  31. package/css/components/Nav/nav.css +12 -15
  32. package/css/components/NotificationDrawer/notification-drawer.css +3 -1
  33. package/css/components/Page/page.css +20 -4
  34. package/css/components/Page/page.d.ts +1 -0
  35. package/css/components/Page/page.js +1 -0
  36. package/css/components/Page/page.mjs +1 -0
  37. package/css/components/Switch/switch.css +3 -1
  38. package/css/components/Table/table-grid.css +3 -1
  39. package/css/components/Table/table.css +7 -5
  40. package/css/components/Tabs/tabs.css +71 -2
  41. package/css/components/Tabs/tabs.d.ts +2 -1
  42. package/css/components/Tabs/tabs.js +2 -1
  43. package/css/components/Tabs/tabs.mjs +2 -1
  44. package/css/components/Toolbar/toolbar.css +10 -3
  45. package/css/components/Toolbar/toolbar.d.ts +1 -0
  46. package/css/components/Toolbar/toolbar.js +1 -0
  47. package/css/components/Toolbar/toolbar.mjs +1 -0
  48. package/css/components/Truncate/truncate.css +5 -0
  49. package/css/components/Truncate/truncate.d.ts +3 -0
  50. package/css/components/Truncate/truncate.js +3 -0
  51. package/css/components/Truncate/truncate.mjs +3 -0
  52. package/css/components/Wizard/wizard.css +4 -2
  53. package/css/components/_index.css +364 -114
  54. package/css/components/_index.d.ts +6 -3
  55. package/css/components/_index.js +6 -3
  56. package/css/components/_index.mjs +6 -3
  57. package/css/docs/components/Toolbar/examples/Toolbar.css +3 -0
  58. package/package.json +3 -3
@@ -210,7 +210,9 @@
210
210
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
211
211
  --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
212
212
  --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
213
- --pf-v6-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
213
+ --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
214
+ --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
215
+ --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
214
216
  --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
215
217
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
216
218
  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
@@ -675,14 +677,14 @@
675
677
  transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
676
678
  }
677
679
  }
678
- .pf-v6-c-alert-group__item.pf-m-offstage-top {
680
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
679
681
  grid-template-rows: 0fr;
680
682
  margin-block: 0;
681
683
  overflow: hidden;
682
684
  opacity: 0;
683
685
  transform: translateY(-100%);
684
686
  }
685
- .pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
687
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
686
688
  min-height: 0;
687
689
  padding-block-start: 0;
688
690
  padding-block-end: 0;
@@ -1250,8 +1252,8 @@
1250
1252
  cursor: not-allowed;
1251
1253
  }
1252
1254
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
1253
- --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
1254
- --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1255
+ --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
1256
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1255
1257
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
1256
1258
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
1257
1259
  }
@@ -1673,6 +1675,12 @@ button.pf-v6-c-breadcrumb__link {
1673
1675
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1674
1676
  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
1675
1677
  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
1678
+ --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1679
+ --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1680
+ --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
1681
+ --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
1682
+ --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
1683
+ --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
1676
1684
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1677
1685
  --pf-v6-c-button__progress--Opacity: 0;
1678
1686
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -1982,6 +1990,20 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1982
1990
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
1983
1991
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
1984
1992
  }
1993
+ .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
1994
+ transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
1995
+ transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
1996
+ transition-property: color;
1997
+ }
1998
+ .pf-v6-c-button.pf-m-favorited {
1999
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
2000
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
2001
+ }
2002
+ .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
2003
+ animation-name: pf-v6-c-button-icon-favorited;
2004
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
2005
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
2006
+ }
1985
2007
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1986
2008
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1987
2009
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -2080,6 +2102,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2080
2102
  transform: rotate(-60deg);
2081
2103
  }
2082
2104
  }
2105
+ @keyframes pf-v6-c-button-icon-favorited {
2106
+ 50% {
2107
+ transform: scale(1.5);
2108
+ }
2109
+ }
2083
2110
  .pf-v6-c-calendar-month {
2084
2111
  --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2085
2112
  --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -2302,6 +2329,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2302
2329
  --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
2303
2330
  --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
2304
2331
  --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
2332
+ --pf-v6-c-card__title-text--OverflowWrap: break-word;
2305
2333
  --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2306
2334
  --pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
2307
2335
  --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
@@ -2310,12 +2338,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2310
2338
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
2311
2339
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2312
2340
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2341
+ --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
2342
+ --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
2313
2343
  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2314
2344
  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
2315
2345
  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2316
2346
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2317
2347
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2318
- --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2348
+ --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2319
2349
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2320
2350
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
2321
2351
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -2473,6 +2503,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2473
2503
  .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
2474
2504
  order: 2;
2475
2505
  }
2506
+ .pf-v6-c-card__header.pf-m-wrap {
2507
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
2508
+ gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
2509
+ }
2510
+ .pf-v6-c-card__header.pf-m-wrap,
2511
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2512
+ flex-wrap: wrap;
2513
+ row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
2514
+ }
2515
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2516
+ margin-inline-start: 0;
2517
+ }
2518
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
2519
+ margin-inline-end: auto;
2520
+ }
2476
2521
 
2477
2522
  .pf-v6-c-card__header-main {
2478
2523
  flex-grow: 1;
@@ -2488,18 +2533,22 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2488
2533
 
2489
2534
  .pf-v6-c-card__header-toggle-icon {
2490
2535
  display: inline-block;
2491
- transition: transform var(--pf-v6-c-card__header-toggle-icon--TransitionDuration) var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
2536
+ transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
2537
+ transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
2538
+ transition-property: transform;
2492
2539
  }
2493
2540
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
2494
2541
  scale: -1 1;
2495
2542
  }
2496
2543
 
2497
2544
  .pf-v6-c-card__title-text {
2545
+ overflow: auto;
2498
2546
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
2499
2547
  font-size: var(--pf-v6-c-card__title-text--FontSize);
2500
2548
  font-weight: var(--pf-v6-c-card__title-text--FontWeight);
2501
2549
  line-height: var(--pf-v6-c-card__title-text--LineHeight);
2502
2550
  color: var(--pf-v6-c-card__title-text--Color);
2551
+ overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
2503
2552
  }
2504
2553
 
2505
2554
  .pf-v6-c-card__actions {
@@ -2699,7 +2748,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2699
2748
  }
2700
2749
 
2701
2750
  .pf-v6-c-clipboard-copy {
2702
- --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
2751
+ --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2752
+ --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2753
+ --pf-v6-c-clipboard-copy__toggle-icon--Transition: transform var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration) var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction);
2703
2754
  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
2704
2755
  --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
2705
2756
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -2739,6 +2790,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2739
2790
  .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block {
2740
2791
  display: block;
2741
2792
  }
2793
+ .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
2794
+ display: inline-flex;
2795
+ }
2742
2796
 
2743
2797
  .pf-v6-c-clipboard-copy__group {
2744
2798
  display: flex;
@@ -2997,6 +3051,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2997
3051
  .pf-v6-c-code-editor__main .monaco-editor {
2998
3052
  background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
2999
3053
  }
3054
+ .pf-v6-c-code-editor__main a.label-name {
3055
+ text-decoration-line: none;
3056
+ }
3000
3057
 
3001
3058
  .pf-v6-c-code-editor__header + .pf-v6-c-code-editor__main {
3002
3059
  border-block-start-width: 0;
@@ -3764,7 +3821,9 @@ ul) {
3764
3821
  --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3765
3822
  --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3766
3823
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
3767
- --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
3824
+ --pf-v6-c-data-list__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
3825
+ --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3826
+ --pf-v6-c-data-list__toggle-icon--Transition: transform var(--pf-v6-c-data-list__toggle-icon--TransitionDuration) var(--pf-v6-c-data-list__toggle-icon--TransitionTimingFunction);
3768
3827
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
3769
3828
  --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
3770
3829
  --pf-v6-c-data-list__item-draggable-button--BackgroundColor: transparent;
@@ -4600,7 +4659,7 @@ ul) {
4600
4659
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
4601
4660
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
4602
4661
  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
4603
- --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
4662
+ --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
4604
4663
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
4605
4664
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
4606
4665
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
@@ -4824,7 +4883,9 @@ ul) {
4824
4883
  min-width: var(--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth);
4825
4884
  color: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Color, inherit);
4826
4885
  text-align: center;
4827
- transition: transform var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration) var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
4886
+ transition-timing-function: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
4887
+ transition-duration: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration);
4888
+ transition-property: transform;
4828
4889
  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
4829
4890
  }
4830
4891
 
@@ -5249,9 +5310,15 @@ ul) {
5249
5310
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
5250
5311
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5251
5312
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5313
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
5314
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
5315
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
5252
5316
  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5253
- --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
5254
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
5317
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
5318
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
5319
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
5320
+ --pf-v6-c-drawer__panel--Opacity: 0;
5321
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
5255
5322
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5256
5323
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5257
5324
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -5341,6 +5408,17 @@ ul) {
5341
5408
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
5342
5409
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
5343
5410
  }
5411
+ @media screen and (prefers-reduced-motion: no-preference) {
5412
+ .pf-v6-c-drawer {
5413
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
5414
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
5415
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
5416
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5417
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
5418
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
5419
+ --pf-v6-c-drawer__panel--Opacity: 1;
5420
+ }
5421
+ }
5344
5422
  @media screen and (min-width: 75rem) {
5345
5423
  .pf-v6-c-drawer {
5346
5424
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
@@ -5388,8 +5466,13 @@ ul) {
5388
5466
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
5389
5467
  flex-direction: column;
5390
5468
  }
5469
+ .pf-v6-c-drawer.pf-m-expanded {
5470
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
5471
+ }
5391
5472
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5392
5473
  transform: translateX(-100%);
5474
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
5475
+ visibility: visible;
5393
5476
  }
5394
5477
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5395
5478
  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
@@ -5462,8 +5545,11 @@ ul) {
5462
5545
  order: 1;
5463
5546
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
5464
5547
  overflow: auto;
5548
+ visibility: hidden;
5465
5549
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
5466
5550
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
5551
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
5552
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
5467
5553
  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
5468
5554
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
5469
5555
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
@@ -5520,17 +5606,6 @@ ul) {
5520
5606
  padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
5521
5607
  }
5522
5608
 
5523
- @keyframes pf-remove-tab-focus {
5524
- to {
5525
- visibility: hidden;
5526
- }
5527
- }
5528
- .pf-v6-c-drawer__panel[hidden] {
5529
- animation-name: pf-remove-tab-focus;
5530
- animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
5531
- animation-fill-mode: forwards;
5532
- }
5533
-
5534
5609
  .pf-v6-c-drawer__head {
5535
5610
  display: grid;
5536
5611
  grid-template-columns: auto;
@@ -5638,7 +5713,7 @@ ul) {
5638
5713
  .pf-v6-c-drawer {
5639
5714
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
5640
5715
  }
5641
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5716
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5642
5717
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
5643
5718
  }
5644
5719
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
@@ -6215,7 +6290,9 @@ ul) {
6215
6290
  --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
6216
6291
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
6217
6292
  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
6218
- --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
6293
+ --pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6294
+ --pf-v6-c-expandable-section__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
6295
+ --pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
6219
6296
  --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
6220
6297
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
6221
6298
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
@@ -6407,7 +6484,7 @@ ul) {
6407
6484
  --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
6408
6485
  --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6409
6486
  --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6410
- --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
6487
+ --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
6411
6488
  --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6412
6489
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
6413
6490
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
@@ -6805,7 +6882,9 @@ ul) {
6805
6882
  display: inline-block;
6806
6883
  min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
6807
6884
  text-align: center;
6808
- transition: transform var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration) var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
6885
+ transition-timing-function: var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
6886
+ transition-duration: var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration);
6887
+ transition-property: transform;
6809
6888
  transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
6810
6889
  }
6811
6890
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon {
@@ -6879,10 +6958,29 @@ ul) {
6879
6958
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
6880
6959
  --pf-v6-c-form-control--Width: 100%;
6881
6960
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
6882
- --pf-v6-c-form-control--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
6883
- --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
6884
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6885
- --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
6961
+ --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
6962
+ --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
6963
+ --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base);
6964
+ --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base);
6965
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6966
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6967
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6968
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6969
+ --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
6970
+ --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
6971
+ --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd);
6972
+ --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6973
+ --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6974
+ --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6975
+ --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6976
+ --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6977
+ --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6978
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6979
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6980
+ --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6981
+ --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6982
+ --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6983
+ --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6886
6984
  --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
6887
6985
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
6888
6986
  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
@@ -6902,25 +7000,33 @@ ul) {
6902
7000
  --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
6903
7001
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
6904
7002
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
7003
+ --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize);
6905
7004
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6906
7005
  --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
6907
- --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
7006
+ --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial;
7007
+ --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial;
7008
+ --pf-v6-c-form-control__input--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
7009
+ --pf-v6-c-form-control__select--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
7010
+ --pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
6908
7011
  --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6909
7012
  --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
6910
- --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
7013
+ --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial;
7014
+ --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial;
7015
+ --pf-v6-c-form-control__input--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
7016
+ --pf-v6-c-form-control__select--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
7017
+ --pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
6911
7018
  --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6912
7019
  --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
6913
- --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
7020
+ --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial;
7021
+ --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial;
6914
7022
  --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
6915
- --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
7023
+ --pf-v6-c-form-control__input--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
7024
+ --pf-v6-c-form-control__select--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
7025
+ --pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
7026
+ --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
6916
7027
  --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
6917
7028
  --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
6918
- --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
6919
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6920
- --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
6921
- --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
6922
- --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
6923
- --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
7029
+ --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--icon--width) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
6924
7030
  --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
6925
7031
  --pf-v6-c-form-control--textarea--Height: auto;
6926
7032
  --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
@@ -6934,11 +7040,13 @@ ul) {
6934
7040
  --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
6935
7041
  --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
6936
7042
  --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
6937
- --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
6938
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6939
- --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6940
- --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
7043
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart);
7044
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
7045
+ --pf-v6-c-form-control__utilities--textarea--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
7046
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0;
7047
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0;
6941
7048
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7049
+ --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
6942
7050
  --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
6943
7051
  }
6944
7052
 
@@ -6979,12 +7087,11 @@ ul) {
6979
7087
  padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
6980
7088
  padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
6981
7089
  color: var(--pf-v6-c-form-control--Color);
7090
+ appearance: none;
6982
7091
  background-color: transparent;
6983
7092
  border: none;
6984
7093
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
6985
7094
  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
6986
- -moz-appearance: none;
6987
- -webkit-appearance: none;
6988
7095
  }
6989
7096
  .pf-v6-c-form-control > ::placeholder {
6990
7097
  color: var(--pf-v6-c-form-control--m-placeholder--Color);
@@ -6992,6 +7099,14 @@ ul) {
6992
7099
  .pf-v6-c-form-control > :is(input, select) {
6993
7100
  text-overflow: ellipsis;
6994
7101
  }
7102
+ .pf-v6-c-form-control:has(input) {
7103
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
7104
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
7105
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart);
7106
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
7107
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd);
7108
+ }
7109
+
6995
7110
  .pf-v6-c-form-control.pf-m-textarea {
6996
7111
  padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset);
6997
7112
  padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset);
@@ -7001,14 +7116,20 @@ ul) {
7001
7116
  .pf-v6-c-form-control.pf-m-textarea.pf-m-success, .pf-v6-c-form-control.pf-m-textarea.pf-m-warning, .pf-v6-c-form-control.pf-m-textarea.pf-m-error {
7002
7117
  --pf-v6-c-form-control--m-status--PaddingInlineEnd--offset: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--ColumnGap));
7003
7118
  }
7119
+ .pf-v6-c-form-control.pf-m-textarea:has(textarea) {
7120
+ --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
7121
+ --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
7122
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
7123
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0px));
7124
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
7125
+ }
7004
7126
  .pf-v6-c-form-control.pf-m-textarea > textarea {
7005
- padding-block-start: calc(var(--pf-v6-c-form-control--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
7006
- padding-block-end: calc(var(--pf-v6-c-form-control--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
7007
- padding-inline-start: calc(var(--pf-v6-c-form-control--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
7008
- padding-inline-end: calc(var(--pf-v6-c-form-control--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0));
7009
7127
  outline-offset: 0;
7010
7128
  scrollbar-gutter: stable;
7011
7129
  }
7130
+ .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
7131
+ padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
7132
+ }
7012
7133
  .pf-v6-c-form-control.pf-m-readonly {
7013
7134
  --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
7014
7135
  --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
@@ -7041,37 +7162,58 @@ ul) {
7041
7162
  cursor: not-allowed;
7042
7163
  }
7043
7164
  .pf-v6-c-form-control.pf-m-error {
7044
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
7045
7165
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
7046
7166
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
7047
7167
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
7048
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
7049
7168
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
7050
7169
  }
7051
- .pf-v6-c-form-control.pf-m-error.pf-m-icon {
7052
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7170
+ .pf-v6-c-form-control.pf-m-error > textarea {
7171
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
7172
+ }
7173
+ .pf-v6-c-form-control.pf-m-error > input {
7174
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd));
7175
+ }
7176
+ .pf-v6-c-form-control.pf-m-error > select {
7177
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-error--PaddingInlineEnd));
7178
+ }
7179
+ .pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) {
7180
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7053
7181
  }
7054
7182
  .pf-v6-c-form-control.pf-m-success {
7055
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
7056
7183
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
7057
7184
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
7058
7185
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
7059
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
7060
7186
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
7061
7187
  }
7062
- .pf-v6-c-form-control.pf-m-success.pf-m-icon {
7063
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7188
+ .pf-v6-c-form-control.pf-m-success > textarea {
7189
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd));
7190
+ }
7191
+ .pf-v6-c-form-control.pf-m-success > input {
7192
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd));
7193
+ }
7194
+ .pf-v6-c-form-control.pf-m-success > select {
7195
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-success--PaddingInlineEnd));
7196
+ }
7197
+ .pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) {
7198
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7064
7199
  }
7065
7200
  .pf-v6-c-form-control.pf-m-warning {
7066
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
7067
7201
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
7068
7202
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
7069
7203
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
7070
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
7071
7204
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
7072
7205
  }
7073
- .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
7074
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7206
+ .pf-v6-c-form-control.pf-m-warning > textarea {
7207
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd));
7208
+ }
7209
+ .pf-v6-c-form-control.pf-m-warning > input {
7210
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd));
7211
+ }
7212
+ .pf-v6-c-form-control.pf-m-warning > select {
7213
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd));
7214
+ }
7215
+ .pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) {
7216
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7075
7217
  }
7076
7218
  .pf-v6-c-form-control:hover {
7077
7219
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
@@ -7080,13 +7222,19 @@ ul) {
7080
7222
  .pf-v6-c-form-control.pf-m-icon {
7081
7223
  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
7082
7224
  }
7083
- .pf-v6-c-form-control > select {
7084
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
7225
+ .pf-v6-c-form-control:has(select) {
7226
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart);
7227
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd);
7085
7228
  --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
7229
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
7230
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7086
7231
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
7087
7232
  }
7233
+ .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
7234
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7235
+ }
7088
7236
  @-moz-document url-prefix() {
7089
- .pf-v6-c-form-control > select {
7237
+ .pf-v6-c-form-control:has(select) {
7090
7238
  --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
7091
7239
  --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
7092
7240
  }
@@ -7132,6 +7280,7 @@ ul) {
7132
7280
  grid-column: 3;
7133
7281
  padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
7134
7282
  padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
7283
+ font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
7135
7284
  color: var(--pf-v6-c-form-control__toggle-icon--Color);
7136
7285
  pointer-events: none;
7137
7286
  }
@@ -7147,10 +7296,6 @@ ul) {
7147
7296
  pointer-events: none;
7148
7297
  }
7149
7298
 
7150
- select ~ .pf-v6-c-form-control__utilities {
7151
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
7152
- }
7153
-
7154
7299
  .pf-v6-c-hint {
7155
7300
  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
7156
7301
  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -7286,11 +7431,11 @@ select ~ .pf-v6-c-form-control__utilities {
7286
7431
  --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
7287
7432
  --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
7288
7433
  --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
7289
- animation-name: --pf-v6-c-helper-text-item-fade-in;
7434
+ animation-name: pf-v6-c-helper-text-item-fade-in;
7290
7435
  animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
7291
7436
  animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
7292
7437
  }
7293
- @keyframes --pf-v6-c-helper-text-item-fade-in {
7438
+ @keyframes pf-v6-c-helper-text-item-fade-in {
7294
7439
  from {
7295
7440
  opacity: 0;
7296
7441
  }
@@ -7770,7 +7915,7 @@ label.pf-v6-c-input-group__text {
7770
7915
  --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
7771
7916
  --pf-v6-c-jump-links__toggle--Display: none;
7772
7917
  --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7773
- --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
7918
+ --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
7774
7919
  --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7775
7920
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
7776
7921
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
@@ -7962,7 +8107,9 @@ label.pf-v6-c-input-group__text {
7962
8107
  .pf-v6-c-jump-links__toggle-icon {
7963
8108
  display: inline-block;
7964
8109
  color: var(--pf-v6-c-jump-links__toggle-icon--Color);
7965
- transition: transform var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration) var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
8110
+ transition-timing-function: var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
8111
+ transition-duration: var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration);
8112
+ transition-property: transform;
7966
8113
  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
7967
8114
  }
7968
8115
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
@@ -10033,16 +10180,16 @@ ul.pf-v6-c-list {
10033
10180
  opacity: 0;
10034
10181
  }
10035
10182
 
10036
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
10183
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
10037
10184
  .pf-v6-c-menu__item-action.pf-m-favorited,
10038
10185
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
10039
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
10186
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
10040
10187
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
10041
10188
  }
10042
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
10189
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
10043
10190
  .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
10044
10191
  .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
10045
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
10192
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
10046
10193
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
10047
10194
  }
10048
10195
 
@@ -10172,7 +10319,7 @@ ul.pf-v6-c-list {
10172
10319
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
10173
10320
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
10174
10321
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
10175
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-v6-c-menu-toggle--BorderRadius);
10322
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
10176
10323
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
10177
10324
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
10178
10325
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -11015,9 +11162,9 @@ ul.pf-v6-c-list {
11015
11162
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11016
11163
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
11017
11164
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
11018
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: 0s;
11019
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
11020
- --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
11165
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
11166
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
11167
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
11021
11168
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
11022
11169
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
11023
11170
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -11046,12 +11193,6 @@ ul.pf-v6-c-list {
11046
11193
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
11047
11194
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11048
11195
  }
11049
- @media (prefers-reduced-motion: no-preference) {
11050
- .pf-v6-c-nav {
11051
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
11052
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
11053
- }
11054
- }
11055
11196
 
11056
11197
  .pf-v6-c-nav,
11057
11198
  .pf-v6-c-nav__section,
@@ -11103,7 +11244,7 @@ ul.pf-v6-c-list {
11103
11244
  }
11104
11245
 
11105
11246
  [class^=pf-v6-c-nav][hidden] {
11106
- visibility: hidden;
11247
+ display: none;
11107
11248
  }
11108
11249
 
11109
11250
  .pf-v6-c-nav__nav,
@@ -11112,7 +11253,6 @@ ul.pf-v6-c-list {
11112
11253
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
11113
11254
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
11114
11255
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
11115
- visibility: visible;
11116
11256
  }
11117
11257
 
11118
11258
  .pf-v6-c-nav__list {
@@ -11129,15 +11269,19 @@ ul.pf-v6-c-list {
11129
11269
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
11130
11270
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11131
11271
  overflow-y: clip;
11132
- transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
11133
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
11134
- transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
11272
+ 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);
11273
+ transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
11274
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
11275
+ transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
11135
11276
  }
11136
11277
  .pf-v6-c-nav__subnav[hidden] {
11137
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
11278
+ --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
11279
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
11138
11280
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11139
11281
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11282
+ display: grid;
11140
11283
  grid-template-rows: 0fr;
11284
+ visibility: hidden;
11141
11285
  opacity: 0;
11142
11286
  }
11143
11287
 
@@ -11370,7 +11514,9 @@ ul.pf-v6-c-list {
11370
11514
  --pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
11371
11515
  --pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
11372
11516
  --pf-v6-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
11373
- --pf-v6-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
11517
+ --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
11518
+ --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
11519
+ --pf-v6-c-notification-drawer__group-toggle-icon--Transition: transform var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration) var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction);
11374
11520
  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
11375
11521
  }
11376
11522
 
@@ -11619,8 +11765,9 @@ ul.pf-v6-c-list {
11619
11765
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
11620
11766
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
11621
11767
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
11622
- --pf-v6-c-page__sidebar--Width: 18.125rem;
11623
- --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
11768
+ --pf-v6-c-page__sidebar--Width--base: 18.125rem;
11769
+ --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
11770
+ --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
11624
11771
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11625
11772
  --pf-v6-c-page__sidebar--BoxShadow: none;
11626
11773
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -11652,12 +11799,18 @@ ul.pf-v6-c-list {
11652
11799
  --pf-v6-c-page__main-container--GridArea: main;
11653
11800
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
11654
11801
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
11802
+ --pf-v6-c-page__main-container--AlignSelf: start;
11655
11803
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11656
11804
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
11657
11805
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
11658
11806
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
11659
11807
  --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
11660
11808
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
11809
+ --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
11810
+ --pf-v6-c-page__main-container--xs--BorderRadius: 0;
11811
+ --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
11812
+ --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
11813
+ --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
11661
11814
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11662
11815
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11663
11816
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -12015,7 +12168,7 @@ ul.pf-v6-c-list {
12015
12168
  .pf-v6-c-page__main-container {
12016
12169
  display: flex;
12017
12170
  flex-direction: column;
12018
- align-self: start;
12171
+ align-self: var(--pf-v6-c-page__main-container--AlignSelf);
12019
12172
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
12020
12173
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
12021
12174
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -12023,6 +12176,15 @@ ul.pf-v6-c-list {
12023
12176
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
12024
12177
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
12025
12178
  }
12179
+ @media screen and (max-width: calc(48rem - 1px)) {
12180
+ .pf-v6-c-page__main-container {
12181
+ --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
12182
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
12183
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
12184
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
12185
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
12186
+ }
12187
+ }
12026
12188
 
12027
12189
  .pf-v6-c-page__main-container,
12028
12190
  .pf-v6-c-page__drawer {
@@ -12033,7 +12195,7 @@ ul.pf-v6-c-list {
12033
12195
  -webkit-overflow-scrolling: touch;
12034
12196
  }
12035
12197
  @media screen and (min-width: 75rem) {
12036
- .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12198
+ .pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12037
12199
  .pf-v6-c-masthead + .pf-v6-c-page__drawer,
12038
12200
  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
12039
12201
  --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
@@ -14683,7 +14845,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14683
14845
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
14684
14846
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
14685
14847
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
14686
- --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
14848
+ --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
14849
+ --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
14850
+ --pf-v6-c-switch__toggle--before--Transition: transform var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration);
14687
14851
  --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
14688
14852
  }
14689
14853
 
@@ -14898,7 +15062,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14898
15062
  --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
14899
15063
  --pf-v6-c-table--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl);
14900
15064
  --pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart: calc(var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart) + var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart));
14901
- --pf-v6-c-table__toggle__icon--Transition: .2s ease-in 0s;
15065
+ --pf-v6-c-table__toggle__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
15066
+ --pf-v6-c-table__toggle__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15067
+ --pf-v6-c-table__toggle__icon--Transition: transform var(--pf-v6-c-table__toggle__icon--TransitionDuration) var(--pf-v6-c-table__toggle__icon--TransitionTimingFunction);
14902
15068
  --pf-v6-c-table__toggle--m-expanded__icon--Rotate: 180deg;
14903
15069
  }
14904
15070
 
@@ -16465,7 +16631,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16465
16631
  --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16466
16632
  --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16467
16633
  --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
16468
- --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
16634
+ --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
16469
16635
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
16470
16636
  --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
16471
16637
  --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -16963,7 +17129,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16963
17129
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
16964
17130
  }
16965
17131
  .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
16966
- transition: transform var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration) var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
17132
+ transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
17133
+ transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
17134
+ transition-property: transform;
16967
17135
  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
16968
17136
  }
16969
17137
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
@@ -16998,13 +17166,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
16998
17166
  vertical-align: baseline;
16999
17167
  }
17000
17168
 
17001
- .pf-v6-c-table__favorite .pf-v6-c-button {
17169
+ .pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
17002
17170
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
17003
17171
  }
17004
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
17172
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
17005
17173
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
17006
17174
  }
17007
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
17175
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
17008
17176
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
17009
17177
  }
17010
17178
 
@@ -18167,6 +18335,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18167
18335
  }
18168
18336
  }
18169
18337
 
18338
+ @property --pf-v6-c-tabs--link-accent--length {
18339
+ syntax: "<length>";
18340
+ inherits: true;
18341
+ initial-value: 0px;
18342
+ }
18343
+ @property --pf-v6-c-tabs--link-accent--start {
18344
+ syntax: "<length>";
18345
+ inherits: true;
18346
+ initial-value: 0px;
18347
+ }
18170
18348
  .pf-v6-c-tabs {
18171
18349
  --pf-v6-c-tabs--inset: 0;
18172
18350
  --pf-v6-c-tabs--Width: auto;
@@ -18228,6 +18406,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18228
18406
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
18229
18407
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
18230
18408
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
18409
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
18410
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
18231
18411
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
18232
18412
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
18233
18413
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -18252,6 +18432,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18252
18432
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
18253
18433
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
18254
18434
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
18435
+ --pf-v6-c-tabs--link-accent--start: 0;
18436
+ --pf-v6-c-tabs--link-accent--length: auto;
18437
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
18438
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
18439
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
18440
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
18441
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
18442
+ --pf-v6-c-tabs--link-accent--Width: initial;
18443
+ --pf-v6-c-tabs--link-accent--Height: 0;
18444
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
18445
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
18446
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
18447
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
18448
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
18449
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
18450
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
18451
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
18452
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
18453
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
18454
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
18255
18455
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18256
18456
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18257
18457
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -18271,7 +18471,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18271
18471
  --pf-v6-c-tabs__item--ScrollSnapAlign: end;
18272
18472
  --pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
18273
18473
  --pf-v6-c-tabs__toggle--Display: flex;
18274
- --pf-v6-c-tabs__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
18474
+ --pf-v6-c-tabs__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18475
+ --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
18476
+ --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
18275
18477
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
18276
18478
  --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
18277
18479
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
@@ -18291,7 +18493,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18291
18493
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
18292
18494
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
18293
18495
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
18294
- --pf-v6-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
18496
+ --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18497
+ --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
18498
+ --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
18295
18499
  --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
18296
18500
  --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
18297
18501
  --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
@@ -18405,6 +18609,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18405
18609
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
18406
18610
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
18407
18611
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
18612
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
18613
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
18614
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
18615
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
18616
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
18617
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
18618
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
18408
18619
  display: inline-flex;
18409
18620
  flex-direction: column;
18410
18621
  height: 100%;
@@ -18667,6 +18878,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18667
18878
  text-decoration-line: none;
18668
18879
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
18669
18880
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
18881
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
18670
18882
  }
18671
18883
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
18672
18884
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -18979,6 +19191,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18979
19191
  }
18980
19192
  }
18981
19193
 
19194
+ @media (prefers-reduced-motion: no-preference) {
19195
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
19196
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
19197
+ content: revert;
19198
+ }
19199
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
19200
+ position: absolute;
19201
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
19202
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
19203
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
19204
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
19205
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
19206
+ content: "";
19207
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
19208
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
19209
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
19210
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
19211
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
19212
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
19213
+ }
19214
+ .pf-v6-c-tabs.pf-m-initializing-accent {
19215
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
19216
+ }
19217
+ }
18982
19218
  .pf-v6-c-text-input-group {
18983
19219
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
18984
19220
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -19586,7 +19822,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19586
19822
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19587
19823
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19588
19824
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
19589
- --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
19825
+ --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
19590
19826
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19591
19827
  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
19592
19828
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
@@ -19766,13 +20002,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19766
20002
  }
19767
20003
  .pf-v6-c-toolbar.pf-m-full-height {
19768
20004
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
19769
- --pf-v6-c-toolbar--PaddinkBlockEnd: 0;
20005
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
19770
20006
  }
19771
20007
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
19772
20008
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
19773
20009
  align-items: stretch;
19774
20010
  align-self: stretch;
19775
20011
  }
20012
+ .pf-v6-c-toolbar.pf-m-no-padding {
20013
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
20014
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
20015
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
20016
+ }
19776
20017
  .pf-v6-c-toolbar.pf-m-primary {
19777
20018
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
19778
20019
  }
@@ -19919,7 +20160,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19919
20160
 
19920
20161
  .pf-v6-c-toolbar__expand-all-icon {
19921
20162
  display: inline-flex;
19922
- transition: transform var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration) var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
20163
+ transition-timing-function: var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
20164
+ transition-duration: var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration);
20165
+ transition-property: transform;
19923
20166
  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
19924
20167
  }
19925
20168
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
@@ -21583,6 +21826,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21583
21826
  align-items: baseline;
21584
21827
  min-width: var(--pf-v6-c-truncate--MinWidth);
21585
21828
  }
21829
+ .pf-v6-c-truncate.pf-m-fixed {
21830
+ display: inline;
21831
+ align-items: revert;
21832
+ min-width: revert;
21833
+ }
21586
21834
 
21587
21835
  .pf-v6-c-truncate__start,
21588
21836
  .pf-v6-c-truncate__end {
@@ -22151,7 +22399,7 @@ label.pf-v6-c-tree-view__node-text {
22151
22399
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
22152
22400
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
22153
22401
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
22154
- --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
22402
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
22155
22403
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22156
22404
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
22157
22405
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
@@ -22557,7 +22805,9 @@ label.pf-v6-c-tree-view__node-text {
22557
22805
 
22558
22806
  .pf-v6-c-wizard__nav-link-toggle-icon {
22559
22807
  display: inline-block;
22560
- transition: transform var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration) var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
22808
+ transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
22809
+ transition-duration: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration);
22810
+ transition-property: transform;
22561
22811
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
22562
22812
  }
22563
22813
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {