@patternfly/react-styles 6.2.0-prerelease.8 → 6.2.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 (43) 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 +21 -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/DataList/data-list.css +3 -1
  18. package/css/components/DualListSelector/dual-list-selector.css +4 -2
  19. package/css/components/ExpandableSection/expandable-section.css +3 -1
  20. package/css/components/Form/form.css +4 -2
  21. package/css/components/FormControl/form-control.css +108 -41
  22. package/css/components/HelperText/helper-text.css +13 -0
  23. package/css/components/JumpLinks/jump-links.css +4 -2
  24. package/css/components/Menu/menu.css +4 -4
  25. package/css/components/MenuToggle/menu-toggle.css +42 -1
  26. package/css/components/Nav/nav.css +12 -15
  27. package/css/components/NotificationDrawer/notification-drawer.css +3 -1
  28. package/css/components/Page/page.css +16 -1
  29. package/css/components/Switch/switch.css +3 -1
  30. package/css/components/Table/table-grid.css +3 -1
  31. package/css/components/Table/table.css +7 -5
  32. package/css/components/Tabs/tabs.css +6 -2
  33. package/css/components/Toolbar/toolbar.css +10 -3
  34. package/css/components/Toolbar/toolbar.d.ts +1 -0
  35. package/css/components/Toolbar/toolbar.js +1 -0
  36. package/css/components/Toolbar/toolbar.mjs +1 -0
  37. package/css/components/Wizard/wizard.css +4 -2
  38. package/css/components/_index.css +308 -93
  39. package/css/components/_index.d.ts +3 -3
  40. package/css/components/_index.js +3 -3
  41. package/css/components/_index.mjs +3 -3
  42. package/css/docs/components/Toolbar/examples/Toolbar.css +3 -0
  43. 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);
@@ -2310,12 +2337,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2310
2337
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
2311
2338
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2312
2339
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2340
+ --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
2341
+ --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
2313
2342
  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2314
2343
  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
2315
2344
  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2316
2345
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2317
2346
  --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);
2347
+ --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2319
2348
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2320
2349
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
2321
2350
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -2473,6 +2502,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2473
2502
  .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
2474
2503
  order: 2;
2475
2504
  }
2505
+ .pf-v6-c-card__header.pf-m-wrap {
2506
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
2507
+ gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
2508
+ }
2509
+ .pf-v6-c-card__header.pf-m-wrap,
2510
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2511
+ flex-wrap: wrap;
2512
+ row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
2513
+ }
2514
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2515
+ margin-inline-start: 0;
2516
+ }
2517
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
2518
+ margin-inline-end: auto;
2519
+ }
2476
2520
 
2477
2521
  .pf-v6-c-card__header-main {
2478
2522
  flex-grow: 1;
@@ -2488,7 +2532,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2488
2532
 
2489
2533
  .pf-v6-c-card__header-toggle-icon {
2490
2534
  display: inline-block;
2491
- transition: transform var(--pf-v6-c-card__header-toggle-icon--TransitionDuration) var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
2535
+ transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
2536
+ transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
2537
+ transition-property: transform;
2492
2538
  }
2493
2539
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
2494
2540
  scale: -1 1;
@@ -2699,7 +2745,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2699
2745
  }
2700
2746
 
2701
2747
  .pf-v6-c-clipboard-copy {
2702
- --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
2748
+ --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2749
+ --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2750
+ --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
2751
  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
2704
2752
  --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
2705
2753
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -2739,6 +2787,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2739
2787
  .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block {
2740
2788
  display: block;
2741
2789
  }
2790
+ .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
2791
+ display: inline-flex;
2792
+ }
2742
2793
 
2743
2794
  .pf-v6-c-clipboard-copy__group {
2744
2795
  display: flex;
@@ -3764,7 +3815,9 @@ ul) {
3764
3815
  --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3765
3816
  --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3766
3817
  --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;
3818
+ --pf-v6-c-data-list__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
3819
+ --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3820
+ --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
3821
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
3769
3822
  --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
3770
3823
  --pf-v6-c-data-list__item-draggable-button--BackgroundColor: transparent;
@@ -4600,7 +4653,7 @@ ul) {
4600
4653
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
4601
4654
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
4602
4655
  --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);
4656
+ --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
4604
4657
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
4605
4658
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
4606
4659
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
@@ -4824,7 +4877,9 @@ ul) {
4824
4877
  min-width: var(--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth);
4825
4878
  color: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Color, inherit);
4826
4879
  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);
4880
+ transition-timing-function: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
4881
+ transition-duration: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration);
4882
+ transition-property: transform;
4828
4883
  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
4829
4884
  }
4830
4885
 
@@ -6215,7 +6270,9 @@ ul) {
6215
6270
  --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
6216
6271
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
6217
6272
  --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;
6273
+ --pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6274
+ --pf-v6-c-expandable-section__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
6275
+ --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
6276
  --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
6220
6277
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
6221
6278
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
@@ -6407,7 +6464,7 @@ ul) {
6407
6464
  --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
6465
  --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6409
6466
  --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);
6467
+ --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
6411
6468
  --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6412
6469
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
6413
6470
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
@@ -6805,7 +6862,9 @@ ul) {
6805
6862
  display: inline-block;
6806
6863
  min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
6807
6864
  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);
6865
+ transition-timing-function: var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
6866
+ transition-duration: var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration);
6867
+ transition-property: transform;
6809
6868
  transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
6810
6869
  }
6811
6870
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon {
@@ -6879,10 +6938,29 @@ ul) {
6879
6938
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
6880
6939
  --pf-v6-c-form-control--Width: 100%;
6881
6940
  --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);
6941
+ --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
6942
+ --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
6943
+ --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base);
6944
+ --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base);
6945
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6946
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6947
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6948
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6949
+ --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
6950
+ --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
6951
+ --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd);
6952
+ --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6953
+ --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6954
+ --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6955
+ --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6956
+ --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6957
+ --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6958
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6959
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6960
+ --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6961
+ --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6962
+ --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6963
+ --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6886
6964
  --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
6887
6965
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
6888
6966
  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
@@ -6902,25 +6980,33 @@ ul) {
6902
6980
  --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
6903
6981
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
6904
6982
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
6983
+ --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize);
6905
6984
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6906
6985
  --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));
6986
+ --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial;
6987
+ --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial;
6988
+ --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));
6989
+ --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));
6990
+ --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
6991
  --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6909
6992
  --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));
6993
+ --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial;
6994
+ --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial;
6995
+ --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));
6996
+ --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));
6997
+ --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
6998
  --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6912
6999
  --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));
7000
+ --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial;
7001
+ --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial;
6914
7002
  --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));
7003
+ --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));
7004
+ --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));
7005
+ --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));
7006
+ --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
7007
  --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
6917
7008
  --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));
7009
+ --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
7010
  --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
6925
7011
  --pf-v6-c-form-control--textarea--Height: auto;
6926
7012
  --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
@@ -6934,11 +7020,13 @@ ul) {
6934
7020
  --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
6935
7021
  --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
6936
7022
  --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);
7023
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart);
7024
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
7025
+ --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));
7026
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0;
7027
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0;
6941
7028
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7029
+ --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
6942
7030
  --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
6943
7031
  }
6944
7032
 
@@ -6992,6 +7080,14 @@ ul) {
6992
7080
  .pf-v6-c-form-control > :is(input, select) {
6993
7081
  text-overflow: ellipsis;
6994
7082
  }
7083
+ .pf-v6-c-form-control:has(input) {
7084
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
7085
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
7086
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart);
7087
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
7088
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd);
7089
+ }
7090
+
6995
7091
  .pf-v6-c-form-control.pf-m-textarea {
6996
7092
  padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset);
6997
7093
  padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset);
@@ -7001,14 +7097,20 @@ ul) {
7001
7097
  .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
7098
  --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
7099
  }
7100
+ .pf-v6-c-form-control.pf-m-textarea:has(textarea) {
7101
+ --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
7102
+ --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
7103
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
7104
+ --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));
7105
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
7106
+ }
7004
7107
  .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
7108
  outline-offset: 0;
7010
7109
  scrollbar-gutter: stable;
7011
7110
  }
7111
+ .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
7112
+ padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
7113
+ }
7012
7114
  .pf-v6-c-form-control.pf-m-readonly {
7013
7115
  --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
7014
7116
  --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
@@ -7041,37 +7143,58 @@ ul) {
7041
7143
  cursor: not-allowed;
7042
7144
  }
7043
7145
  .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
7146
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
7046
7147
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
7047
7148
  --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
7149
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
7050
7150
  }
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);
7151
+ .pf-v6-c-form-control.pf-m-error > textarea {
7152
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
7153
+ }
7154
+ .pf-v6-c-form-control.pf-m-error > input {
7155
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd));
7156
+ }
7157
+ .pf-v6-c-form-control.pf-m-error > select {
7158
+ 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));
7159
+ }
7160
+ .pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) {
7161
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7053
7162
  }
7054
7163
  .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
7164
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
7057
7165
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
7058
7166
  --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
7167
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
7061
7168
  }
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);
7169
+ .pf-v6-c-form-control.pf-m-success > textarea {
7170
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd));
7171
+ }
7172
+ .pf-v6-c-form-control.pf-m-success > input {
7173
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd));
7174
+ }
7175
+ .pf-v6-c-form-control.pf-m-success > select {
7176
+ 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));
7177
+ }
7178
+ .pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) {
7179
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7064
7180
  }
7065
7181
  .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
7182
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
7068
7183
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
7069
7184
  --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
7185
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
7072
7186
  }
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);
7187
+ .pf-v6-c-form-control.pf-m-warning > textarea {
7188
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd));
7189
+ }
7190
+ .pf-v6-c-form-control.pf-m-warning > input {
7191
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd));
7192
+ }
7193
+ .pf-v6-c-form-control.pf-m-warning > select {
7194
+ 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));
7195
+ }
7196
+ .pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) {
7197
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7075
7198
  }
7076
7199
  .pf-v6-c-form-control:hover {
7077
7200
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
@@ -7080,13 +7203,19 @@ ul) {
7080
7203
  .pf-v6-c-form-control.pf-m-icon {
7081
7204
  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
7082
7205
  }
7083
- .pf-v6-c-form-control > select {
7084
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
7206
+ .pf-v6-c-form-control:has(select) {
7207
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart);
7208
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd);
7085
7209
  --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
7210
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
7211
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7086
7212
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
7087
7213
  }
7214
+ .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
7215
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7216
+ }
7088
7217
  @-moz-document url-prefix() {
7089
- .pf-v6-c-form-control > select {
7218
+ .pf-v6-c-form-control:has(select) {
7090
7219
  --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
7091
7220
  --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
7092
7221
  }
@@ -7132,6 +7261,7 @@ ul) {
7132
7261
  grid-column: 3;
7133
7262
  padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
7134
7263
  padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
7264
+ font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
7135
7265
  color: var(--pf-v6-c-form-control__toggle-icon--Color);
7136
7266
  pointer-events: none;
7137
7267
  }
@@ -7147,10 +7277,6 @@ ul) {
7147
7277
  pointer-events: none;
7148
7278
  }
7149
7279
 
7150
- select ~ .pf-v6-c-form-control__utilities {
7151
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
7152
- }
7153
-
7154
7280
  .pf-v6-c-hint {
7155
7281
  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
7156
7282
  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -7240,6 +7366,8 @@ select ~ .pf-v6-c-form-control__utilities {
7240
7366
  --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
7241
7367
  --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
7242
7368
  --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
7369
+ --pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
7370
+ --pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
7243
7371
  --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
7244
7372
  --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
7245
7373
  --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
@@ -7284,6 +7412,17 @@ select ~ .pf-v6-c-form-control__utilities {
7284
7412
  --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
7285
7413
  --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
7286
7414
  --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
7415
+ animation-name: pf-v6-c-helper-text-item-fade-in;
7416
+ animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
7417
+ animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
7418
+ }
7419
+ @keyframes pf-v6-c-helper-text-item-fade-in {
7420
+ from {
7421
+ opacity: 0;
7422
+ }
7423
+ to {
7424
+ opacity: 1;
7425
+ }
7287
7426
  }
7288
7427
  .pf-v6-c-helper-text__item.pf-m-dynamic {
7289
7428
  --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
@@ -7757,7 +7896,7 @@ label.pf-v6-c-input-group__text {
7757
7896
  --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
7758
7897
  --pf-v6-c-jump-links__toggle--Display: none;
7759
7898
  --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7760
- --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
7899
+ --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
7761
7900
  --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7762
7901
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
7763
7902
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
@@ -7949,7 +8088,9 @@ label.pf-v6-c-input-group__text {
7949
8088
  .pf-v6-c-jump-links__toggle-icon {
7950
8089
  display: inline-block;
7951
8090
  color: var(--pf-v6-c-jump-links__toggle-icon--Color);
7952
- transition: transform var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration) var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
8091
+ transition-timing-function: var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
8092
+ transition-duration: var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration);
8093
+ transition-property: transform;
7953
8094
  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
7954
8095
  }
7955
8096
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
@@ -10020,16 +10161,16 @@ ul.pf-v6-c-list {
10020
10161
  opacity: 0;
10021
10162
  }
10022
10163
 
10023
- .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,
10164
+ .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),
10024
10165
  .pf-v6-c-menu__item-action.pf-m-favorited,
10025
10166
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
10026
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
10167
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
10027
10168
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
10028
10169
  }
10029
- .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),
10170
+ .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),
10030
10171
  .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
10031
10172
  .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
10032
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
10173
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
10033
10174
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
10034
10175
  }
10035
10176
 
@@ -10159,7 +10300,7 @@ ul.pf-v6-c-list {
10159
10300
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
10160
10301
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
10161
10302
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
10162
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-v6-c-menu-toggle--BorderRadius);
10303
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
10163
10304
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
10164
10305
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
10165
10306
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -10174,12 +10315,16 @@ ul.pf-v6-c-list {
10174
10315
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
10175
10316
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
10176
10317
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
10318
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
10319
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
10177
10320
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10178
10321
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
10179
10322
  --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
10180
10323
  --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
10181
10324
  --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
10182
10325
  --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
10326
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
10327
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
10183
10328
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
10184
10329
  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
10185
10330
  }
@@ -10328,6 +10473,28 @@ ul.pf-v6-c-list {
10328
10473
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
10329
10474
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
10330
10475
  }
10476
+ @media screen and (prefers-reduced-motion: no-preference) {
10477
+ .pf-v6-c-menu-toggle.pf-m-danger {
10478
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
10479
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
10480
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
10481
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
10482
+ animation-fill-mode: both;
10483
+ }
10484
+ }
10485
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
10486
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
10487
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
10488
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
10489
+ }
10490
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
10491
+ from {
10492
+ opacity: 0;
10493
+ }
10494
+ to {
10495
+ opacity: 1;
10496
+ }
10497
+ }
10331
10498
  .pf-v6-c-menu-toggle.pf-m-placeholder {
10332
10499
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
10333
10500
  }
@@ -10343,6 +10510,21 @@ ul.pf-v6-c-list {
10343
10510
  pointer-events: none;
10344
10511
  }
10345
10512
 
10513
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
10514
+ syntax: "<length>";
10515
+ inherits: false;
10516
+ initial-value: 0;
10517
+ }
10518
+ @media (prefers-reduced-motion: no-preference) {
10519
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
10520
+ 33% {
10521
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
10522
+ }
10523
+ 66% {
10524
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
10525
+ }
10526
+ }
10527
+ }
10346
10528
  .pf-v6-c-menu-toggle.pf-m-split-button {
10347
10529
  --pf-v6-c-menu-toggle--Gap: 0;
10348
10530
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
@@ -10961,9 +11143,9 @@ ul.pf-v6-c-list {
10961
11143
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
10962
11144
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
10963
11145
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
10964
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: 0s;
10965
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
10966
- --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
11146
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
11147
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
11148
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
10967
11149
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
10968
11150
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
10969
11151
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -10992,12 +11174,6 @@ ul.pf-v6-c-list {
10992
11174
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
10993
11175
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10994
11176
  }
10995
- @media (prefers-reduced-motion: no-preference) {
10996
- .pf-v6-c-nav {
10997
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
10998
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
10999
- }
11000
- }
11001
11177
 
11002
11178
  .pf-v6-c-nav,
11003
11179
  .pf-v6-c-nav__section,
@@ -11049,7 +11225,7 @@ ul.pf-v6-c-list {
11049
11225
  }
11050
11226
 
11051
11227
  [class^=pf-v6-c-nav][hidden] {
11052
- visibility: hidden;
11228
+ display: none;
11053
11229
  }
11054
11230
 
11055
11231
  .pf-v6-c-nav__nav,
@@ -11058,7 +11234,6 @@ ul.pf-v6-c-list {
11058
11234
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
11059
11235
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
11060
11236
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
11061
- visibility: visible;
11062
11237
  }
11063
11238
 
11064
11239
  .pf-v6-c-nav__list {
@@ -11075,15 +11250,19 @@ ul.pf-v6-c-list {
11075
11250
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
11076
11251
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11077
11252
  overflow-y: clip;
11078
- transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
11079
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
11080
- transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
11253
+ 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);
11254
+ transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
11255
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
11256
+ transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
11081
11257
  }
11082
11258
  .pf-v6-c-nav__subnav[hidden] {
11083
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
11259
+ --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
11260
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
11084
11261
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11085
11262
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11263
+ display: grid;
11086
11264
  grid-template-rows: 0fr;
11265
+ visibility: hidden;
11087
11266
  opacity: 0;
11088
11267
  }
11089
11268
 
@@ -11316,7 +11495,9 @@ ul.pf-v6-c-list {
11316
11495
  --pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
11317
11496
  --pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
11318
11497
  --pf-v6-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
11319
- --pf-v6-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
11498
+ --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
11499
+ --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
11500
+ --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);
11320
11501
  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
11321
11502
  }
11322
11503
 
@@ -11598,12 +11779,18 @@ ul.pf-v6-c-list {
11598
11779
  --pf-v6-c-page__main-container--GridArea: main;
11599
11780
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
11600
11781
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
11782
+ --pf-v6-c-page__main-container--AlignSelf: start;
11601
11783
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11602
11784
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
11603
11785
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
11604
11786
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
11605
11787
  --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
11606
11788
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
11789
+ --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
11790
+ --pf-v6-c-page__main-container--xs--BorderRadius: 0;
11791
+ --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
11792
+ --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
11793
+ --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
11607
11794
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11608
11795
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11609
11796
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -11961,7 +12148,7 @@ ul.pf-v6-c-list {
11961
12148
  .pf-v6-c-page__main-container {
11962
12149
  display: flex;
11963
12150
  flex-direction: column;
11964
- align-self: start;
12151
+ align-self: var(--pf-v6-c-page__main-container--AlignSelf);
11965
12152
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
11966
12153
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
11967
12154
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -11969,6 +12156,15 @@ ul.pf-v6-c-list {
11969
12156
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
11970
12157
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
11971
12158
  }
12159
+ @media screen and (max-width: calc(48rem - 1px)) {
12160
+ .pf-v6-c-page__main-container {
12161
+ --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
12162
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
12163
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
12164
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
12165
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
12166
+ }
12167
+ }
11972
12168
 
11973
12169
  .pf-v6-c-page__main-container,
11974
12170
  .pf-v6-c-page__drawer {
@@ -14629,7 +14825,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14629
14825
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
14630
14826
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
14631
14827
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
14632
- --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
14828
+ --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
14829
+ --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
14830
+ --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);
14633
14831
  --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));
14634
14832
  }
14635
14833
 
@@ -14844,7 +15042,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14844
15042
  --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
14845
15043
  --pf-v6-c-table--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl);
14846
15044
  --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));
14847
- --pf-v6-c-table__toggle__icon--Transition: .2s ease-in 0s;
15045
+ --pf-v6-c-table__toggle__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
15046
+ --pf-v6-c-table__toggle__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15047
+ --pf-v6-c-table__toggle__icon--Transition: transform var(--pf-v6-c-table__toggle__icon--TransitionDuration) var(--pf-v6-c-table__toggle__icon--TransitionTimingFunction);
14848
15048
  --pf-v6-c-table__toggle--m-expanded__icon--Rotate: 180deg;
14849
15049
  }
14850
15050
 
@@ -16411,7 +16611,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16411
16611
  --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16412
16612
  --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16413
16613
  --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
16414
- --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
16614
+ --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
16415
16615
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
16416
16616
  --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
16417
16617
  --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -16909,7 +17109,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16909
17109
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
16910
17110
  }
16911
17111
  .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
16912
- transition: transform var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration) var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
17112
+ transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
17113
+ transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
17114
+ transition-property: transform;
16913
17115
  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
16914
17116
  }
16915
17117
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
@@ -16944,13 +17146,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
16944
17146
  vertical-align: baseline;
16945
17147
  }
16946
17148
 
16947
- .pf-v6-c-table__favorite .pf-v6-c-button {
17149
+ .pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
16948
17150
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
16949
17151
  }
16950
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
17152
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
16951
17153
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
16952
17154
  }
16953
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
17155
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
16954
17156
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
16955
17157
  }
16956
17158
 
@@ -18217,7 +18419,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18217
18419
  --pf-v6-c-tabs__item--ScrollSnapAlign: end;
18218
18420
  --pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
18219
18421
  --pf-v6-c-tabs__toggle--Display: flex;
18220
- --pf-v6-c-tabs__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
18422
+ --pf-v6-c-tabs__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18423
+ --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
18424
+ --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
18221
18425
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
18222
18426
  --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
18223
18427
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
@@ -18237,7 +18441,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18237
18441
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
18238
18442
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
18239
18443
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
18240
- --pf-v6-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
18444
+ --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18445
+ --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
18446
+ --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);
18241
18447
  --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
18242
18448
  --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
18243
18449
  --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
@@ -19532,7 +19738,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19532
19738
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19533
19739
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19534
19740
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
19535
- --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
19741
+ --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
19536
19742
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19537
19743
  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
19538
19744
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
@@ -19712,13 +19918,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19712
19918
  }
19713
19919
  .pf-v6-c-toolbar.pf-m-full-height {
19714
19920
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
19715
- --pf-v6-c-toolbar--PaddinkBlockEnd: 0;
19921
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
19716
19922
  }
19717
19923
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
19718
19924
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
19719
19925
  align-items: stretch;
19720
19926
  align-self: stretch;
19721
19927
  }
19928
+ .pf-v6-c-toolbar.pf-m-no-padding {
19929
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
19930
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
19931
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
19932
+ }
19722
19933
  .pf-v6-c-toolbar.pf-m-primary {
19723
19934
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
19724
19935
  }
@@ -19865,7 +20076,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19865
20076
 
19866
20077
  .pf-v6-c-toolbar__expand-all-icon {
19867
20078
  display: inline-flex;
19868
- transition: transform var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration) var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
20079
+ transition-timing-function: var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
20080
+ transition-duration: var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration);
20081
+ transition-property: transform;
19869
20082
  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
19870
20083
  }
19871
20084
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
@@ -22097,7 +22310,7 @@ label.pf-v6-c-tree-view__node-text {
22097
22310
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
22098
22311
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
22099
22312
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
22100
- --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
22313
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
22101
22314
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22102
22315
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
22103
22316
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
@@ -22503,7 +22716,9 @@ label.pf-v6-c-tree-view__node-text {
22503
22716
 
22504
22717
  .pf-v6-c-wizard__nav-link-toggle-icon {
22505
22718
  display: inline-block;
22506
- transition: transform var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration) var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
22719
+ transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
22720
+ transition-duration: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration);
22721
+ transition-property: transform;
22507
22722
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
22508
22723
  }
22509
22724
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {