@patternfly/react-table 6.3.0-prerelease.23 → 6.3.0-prerelease.24

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 (11) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/components/package.json +1 -1
  3. package/deprecated/package.json +1 -1
  4. package/dist/dynamic/components/Table/package.json +1 -1
  5. package/dist/dynamic/components/Table/utils/decorators/package.json +1 -1
  6. package/dist/dynamic/components/Table/utils/package.json +1 -1
  7. package/dist/dynamic/deprecated/components/Table/base/package.json +1 -1
  8. package/dist/dynamic/deprecated/components/Table/package.json +1 -1
  9. package/dist/dynamic/deprecated/components/package.json +1 -1
  10. package/dist/umd/assets/{output-BG4xEK-b.css → output-B7KoXseA.css} +2098 -2097
  11. package/package.json +3 -3
package/dist/umd/assets/{output-BG4xEK-b.css → output-B7KoXseA.css} RENAMED
@@ -1,95 +1,3 @@
1
- .pf-v6-c-inline-edit {
2
- --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
3
- --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
4
- --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
5
- --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--plain);
6
- --pf-v6-c-inline-edit__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
7
- --pf-v6-c-inline-edit__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold);
8
- }
9
-
10
- .pf-v6-c-inline-edit__group {
11
- display: flex;
12
- align-items: baseline;
13
- }
14
-
15
- .pf-v6-c-inline-edit__group > * {
16
- margin-inline-end: var(--pf-v6-c-inline-edit__group--item--MarginInlineEnd);
17
- }
18
-
19
- .pf-v6-c-inline-edit__group.pf-m-icon-group {
20
- --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd);
21
- }
22
-
23
- .pf-v6-c-inline-edit__group.pf-m-footer {
24
- margin-block-start: var(--pf-v6-c-inline-edit__group--m-footer--MarginBlockStart);
25
- }
26
-
27
- .pf-v6-c-inline-edit__group.pf-m-column {
28
- --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
29
- flex-direction: column;
30
- }
31
-
32
- .pf-v6-c-inline-edit__group > :last-child {
33
- --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
34
- }
35
-
36
- .pf-v6-c-inline-edit__input {
37
- flex: 1;
38
- }
39
-
40
- .pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain {
41
- --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color);
42
- }
43
-
44
- .pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain:hover {
45
- --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color);
46
- }
47
-
48
- .pf-v6-c-inline-edit__input,
49
- .pf-v6-c-inline-edit__action,
50
- .pf-v6-c-inline-edit__group.pf-m-action-group {
51
- display: none;
52
- }
53
-
54
- .pf-v6-c-inline-edit__action.pf-m-enable-editable {
55
- display: inline-block;
56
- }
57
-
58
- .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__input,
59
- .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__input {
60
- display: block;
61
- }
62
-
63
- .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__action,
64
- .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__action {
65
- display: inline-block;
66
- }
67
-
68
- .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__group.pf-m-action-group,
69
- .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__group.pf-m-action-group {
70
- display: inline-flex;
71
- }
72
-
73
- .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__value,
74
- .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__action.pf-m-enable-editable,
75
- .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__value,
76
- .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__action.pf-m-enable-editable {
77
- display: none;
78
- }
79
-
80
- .pf-v6-c-inline-edit__label + .pf-v6-c-inline-edit__action.pf-m-enable > .pf-v6-c-button {
81
- margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
82
- margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
83
- }
84
-
85
- .pf-v6-c-inline-edit__label.pf-m-bold {
86
- font-weight: var(--pf-v6-c-inline-edit__label--m-bold--FontWeight);
87
- }
88
-
89
- .pf-v6-c-inline-edit__editable-text br {
90
- display: none;
91
- }
92
-
93
1
  .pf-v6-c-table {
94
2
  --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default);
95
3
  --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default);
@@ -1132,6 +1040,74 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
1132
1040
  --pf-v6-c-table--cell--Width: 100%;
1133
1041
  }
1134
1042
 
1043
+ .pf-v6-c-table {
1044
+ --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
1045
+ --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
1046
+ --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
1047
+ --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
1048
+ --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
1049
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
1050
+ --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
1051
+ --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
1052
+ --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
1053
+ --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1054
+ --pf-v6-c-table__sticky-cell--m-right--InsetInlineEnd: 0;
1055
+ --pf-v6-c-table__sticky-cell--m-left--InsetInlineStart: 0;
1056
+ --pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-v6-c-table__sticky-cell--ZIndex) + 1);
1057
+ }
1058
+
1059
+ .pf-v6-c-table .pf-v6-c-table__sticky-cell {
1060
+ position: sticky;
1061
+ inset-inline-start: var(--pf-v6-c-table__sticky-cell--InsetInlineStart);
1062
+ inset-inline-end: var(--pf-v6-c-table__sticky-cell--InsetInlineEnd);
1063
+ z-index: var(--pf-v6-c-table__sticky-cell--ZIndex);
1064
+ min-width: var(--pf-v6-c-table__sticky-cell--MinWidth);
1065
+ }
1066
+
1067
+ .pf-v6-c-table__sticky-cell {
1068
+ --pf-v6-c-table--cell--Overflow: visible;
1069
+ --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex);
1070
+ background-color: var(--pf-v6-c-table__sticky-cell--BackgroundColor);
1071
+ background-clip: padding-box;
1072
+ }
1073
+
1074
+ .pf-v6-c-table__sticky-cell.pf-m-border-right::before {
1075
+ --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndWidth: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth);
1076
+ --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndColor: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor);
1077
+ }
1078
+
1079
+ .pf-v6-c-table__sticky-cell.pf-m-border-left::before {
1080
+ --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartWidth: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth);
1081
+ --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartColor: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartColor);
1082
+ }
1083
+
1084
+ .pf-v6-c-table__sticky-cell.pf-m-right, .pf-v6-c-table__sticky-cell.pf-m-inline-end {
1085
+ --pf-v6-c-table__sticky-cell--InsetInlineEnd: var(--pf-v6-c-table__sticky-cell--m-right--InsetInlineEnd);
1086
+ }
1087
+
1088
+ .pf-v6-c-table__sticky-cell.pf-m-left, .pf-v6-c-table__sticky-cell.pf-m-inline-start {
1089
+ --pf-v6-c-table__sticky-cell--InsetInlineStart: var(--pf-v6-c-table__sticky-cell--m-left--InsetInlineStart);
1090
+ }
1091
+
1092
+ .pf-v6-c-scroll-outer-wrapper {
1093
+ --pf-v6-c-scroll-outer-wrapper--MinHeight: 25rem;
1094
+ --pf-v6-c-scroll-outer-wrapper--MaxHeight: 100%;
1095
+ display: flex;
1096
+ flex-direction: column;
1097
+ max-width: 100%;
1098
+ min-height: var(--pf-v6-c-scroll-outer-wrapper--MinHeight);
1099
+ max-height: var(--pf-v6-c-scroll-outer-wrapper--MaxHeight);
1100
+ overflow: hidden;
1101
+ }
1102
+
1103
+ .pf-v6-c-scroll-inner-wrapper {
1104
+ display: flex;
1105
+ flex-direction: column;
1106
+ max-width: 100%;
1107
+ max-height: 100%;
1108
+ overflow: auto;
1109
+ }
1110
+
1135
1111
  .pf-v6-c-table {
1136
1112
  --pf-v6-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
1137
1113
  --pf-v6-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
@@ -2761,274 +2737,59 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
2761
2737
  }
2762
2738
  }
2763
2739
  .pf-v6-c-table {
2764
- --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
2765
- --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
2766
- --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
2767
- --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
2768
- --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
2769
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2770
- --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
2771
- --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
2772
- --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
2773
- --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
2774
- --pf-v6-c-table__sticky-cell--m-right--InsetInlineEnd: 0;
2775
- --pf-v6-c-table__sticky-cell--m-left--InsetInlineStart: 0;
2776
- --pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-v6-c-table__sticky-cell--ZIndex) + 1);
2740
+ --pf-v6-c-table__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-table__tree-view-icon--MinWidth));
2741
+ --pf-v6-c-table__tree-view-main--nested-indent--base: calc(var(--pf-v6-c-table__tree-view-main--indent--base) - var(--pf-t--global--spacer--md));
2742
+ --pf-v6-c-table__tree-view-main--c-button--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2743
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base);
2744
+ --pf-v6-c-table__tree-view-main--MarginInlineStart: calc(var(--pf-v6-c-table--cell--PaddingInlineStart) * -1);
2745
+ --pf-v6-c-table__tree-view-main--c-table__check--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2746
+ --pf-v6-c-table__tree-view-main--c-table__check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2747
+ --pf-v6-c-table__tree-view-icon--MinWidth: var(--pf-t--global--spacer--md);
2748
+ --pf-v6-c-table__tree-view-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2749
+ --pf-v6-c-table--m-tree-view__toggle--Position: absolute;
2750
+ --pf-v6-c-table--m-tree-view__toggle--InsetInlineStart: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart);
2751
+ --pf-v6-c-table--m-tree-view__toggle--TranslateX: -100%;
2752
+ --pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-t--global--spacer--md);
2753
+ --pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart: 0;
2754
+ --pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart: 0;
2777
2755
  }
2778
2756
 
2779
- .pf-v6-c-table .pf-v6-c-table__sticky-cell {
2780
- position: sticky;
2781
- inset-inline-start: var(--pf-v6-c-table__sticky-cell--InsetInlineStart);
2782
- inset-inline-end: var(--pf-v6-c-table__sticky-cell--InsetInlineEnd);
2783
- z-index: var(--pf-v6-c-table__sticky-cell--ZIndex);
2784
- min-width: var(--pf-v6-c-table__sticky-cell--MinWidth);
2757
+ .pf-v6-c-table.pf-m-tree-view > tbody > tr {
2758
+ --pf-v6-c-table--m-tree-view__toggle--InsetInlineStart: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart);
2785
2759
  }
2786
2760
 
2787
- .pf-v6-c-table__sticky-cell {
2788
- --pf-v6-c-table--cell--Overflow: visible;
2789
- --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex);
2790
- background-color: var(--pf-v6-c-table__sticky-cell--BackgroundColor);
2791
- background-clip: padding-box;
2761
+ .pf-v6-c-table.pf-m-tree-view > tbody > tr.pf-m-no-inset {
2762
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart);
2763
+ --pf-v6-c-table__tree-view-main--MarginInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart);
2792
2764
  }
2793
2765
 
2794
- .pf-v6-c-table__sticky-cell.pf-m-border-right::before {
2795
- --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndWidth: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth);
2796
- --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndColor: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor);
2766
+ .pf-v6-c-table.pf-m-tree-view.pf-m-no-inset {
2767
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart);
2768
+ --pf-v6-c-table__tree-view-main--MarginInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart);
2797
2769
  }
2798
2770
 
2799
- .pf-v6-c-table__sticky-cell.pf-m-border-left::before {
2800
- --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartWidth: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth);
2801
- --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartColor: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartColor);
2771
+ .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="2"] {
2772
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base));
2802
2773
  }
2803
2774
 
2804
- .pf-v6-c-table__sticky-cell.pf-m-right, .pf-v6-c-table__sticky-cell.pf-m-inline-end {
2805
- --pf-v6-c-table__sticky-cell--InsetInlineEnd: var(--pf-v6-c-table__sticky-cell--m-right--InsetInlineEnd);
2775
+ .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="3"] {
2776
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base));
2806
2777
  }
2807
2778
 
2808
- .pf-v6-c-table__sticky-cell.pf-m-left, .pf-v6-c-table__sticky-cell.pf-m-inline-start {
2809
- --pf-v6-c-table__sticky-cell--InsetInlineStart: var(--pf-v6-c-table__sticky-cell--m-left--InsetInlineStart);
2779
+ .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="4"] {
2780
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base));
2810
2781
  }
2811
2782
 
2812
- .pf-v6-c-scroll-outer-wrapper {
2813
- --pf-v6-c-scroll-outer-wrapper--MinHeight: 25rem;
2814
- --pf-v6-c-scroll-outer-wrapper--MaxHeight: 100%;
2815
- display: flex;
2816
- flex-direction: column;
2817
- max-width: 100%;
2818
- min-height: var(--pf-v6-c-scroll-outer-wrapper--MinHeight);
2819
- max-height: var(--pf-v6-c-scroll-outer-wrapper--MaxHeight);
2820
- overflow: hidden;
2783
+ .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="5"] {
2784
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base));
2821
2785
  }
2822
2786
 
2823
- .pf-v6-c-scroll-inner-wrapper {
2824
- display: flex;
2825
- flex-direction: column;
2826
- max-width: 100%;
2827
- max-height: 100%;
2828
- overflow: auto;
2787
+ .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="6"] {
2788
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base));
2829
2789
  }
2830
2790
 
2831
- .pf-v6-u-screen-reader {
2832
- position: fixed;
2833
- inset-block-start: 0;
2834
- inset-inline-start: 0;
2835
- overflow: hidden;
2836
- clip: rect(0, 0, 0, 0);
2837
- white-space: nowrap;
2838
- border: 0;
2839
- }
2840
-
2841
- .pf-v6-u-visible {
2842
- position: static;
2843
- overflow: visible;
2844
- clip: auto;
2845
- white-space: normal;
2846
- border: inherit;
2847
- }
2848
-
2849
- .pf-v6-u-hidden {
2850
- display: none !important;
2851
- }
2852
-
2853
- @media screen and (min-width: 36rem) {
2854
- .pf-v6-u-screen-reader-on-sm {
2855
- position: fixed;
2856
- inset-block-start: 0;
2857
- inset-inline-start: 0;
2858
- overflow: hidden;
2859
- clip: rect(0, 0, 0, 0);
2860
- white-space: nowrap;
2861
- border: 0;
2862
- }
2863
- }
2864
- @media screen and (min-width: 36rem) {
2865
- .pf-v6-u-visible-on-sm {
2866
- position: static;
2867
- overflow: visible;
2868
- clip: auto;
2869
- white-space: normal;
2870
- border: inherit;
2871
- }
2872
- }
2873
- @media screen and (min-width: 36rem) {
2874
- .pf-v6-u-hidden-on-sm {
2875
- display: none !important;
2876
- }
2877
- }
2878
- @media screen and (min-width: 48rem) {
2879
- .pf-v6-u-screen-reader-on-md {
2880
- position: fixed;
2881
- inset-block-start: 0;
2882
- inset-inline-start: 0;
2883
- overflow: hidden;
2884
- clip: rect(0, 0, 0, 0);
2885
- white-space: nowrap;
2886
- border: 0;
2887
- }
2888
- }
2889
- @media screen and (min-width: 48rem) {
2890
- .pf-v6-u-visible-on-md {
2891
- position: static;
2892
- overflow: visible;
2893
- clip: auto;
2894
- white-space: normal;
2895
- border: inherit;
2896
- }
2897
- }
2898
- @media screen and (min-width: 48rem) {
2899
- .pf-v6-u-hidden-on-md {
2900
- display: none !important;
2901
- }
2902
- }
2903
- @media screen and (min-width: 62rem) {
2904
- .pf-v6-u-screen-reader-on-lg {
2905
- position: fixed;
2906
- inset-block-start: 0;
2907
- inset-inline-start: 0;
2908
- overflow: hidden;
2909
- clip: rect(0, 0, 0, 0);
2910
- white-space: nowrap;
2911
- border: 0;
2912
- }
2913
- }
2914
- @media screen and (min-width: 62rem) {
2915
- .pf-v6-u-visible-on-lg {
2916
- position: static;
2917
- overflow: visible;
2918
- clip: auto;
2919
- white-space: normal;
2920
- border: inherit;
2921
- }
2922
- }
2923
- @media screen and (min-width: 62rem) {
2924
- .pf-v6-u-hidden-on-lg {
2925
- display: none !important;
2926
- }
2927
- }
2928
- @media screen and (min-width: 75rem) {
2929
- .pf-v6-u-screen-reader-on-xl {
2930
- position: fixed;
2931
- inset-block-start: 0;
2932
- inset-inline-start: 0;
2933
- overflow: hidden;
2934
- clip: rect(0, 0, 0, 0);
2935
- white-space: nowrap;
2936
- border: 0;
2937
- }
2938
- }
2939
- @media screen and (min-width: 75rem) {
2940
- .pf-v6-u-visible-on-xl {
2941
- position: static;
2942
- overflow: visible;
2943
- clip: auto;
2944
- white-space: normal;
2945
- border: inherit;
2946
- }
2947
- }
2948
- @media screen and (min-width: 75rem) {
2949
- .pf-v6-u-hidden-on-xl {
2950
- display: none !important;
2951
- }
2952
- }
2953
- @media screen and (min-width: 90.625rem) {
2954
- .pf-v6-u-screen-reader-on-2xl {
2955
- position: fixed;
2956
- inset-block-start: 0;
2957
- inset-inline-start: 0;
2958
- overflow: hidden;
2959
- clip: rect(0, 0, 0, 0);
2960
- white-space: nowrap;
2961
- border: 0;
2962
- }
2963
- }
2964
- @media screen and (min-width: 90.625rem) {
2965
- .pf-v6-u-visible-on-2xl {
2966
- position: static;
2967
- overflow: visible;
2968
- clip: auto;
2969
- white-space: normal;
2970
- border: inherit;
2971
- }
2972
- }
2973
- @media screen and (min-width: 90.625rem) {
2974
- .pf-v6-u-hidden-on-2xl {
2975
- display: none !important;
2976
- }
2977
- }
2978
- .pf-v6-c-table {
2979
- --pf-v6-c-table__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-table__tree-view-icon--MinWidth));
2980
- --pf-v6-c-table__tree-view-main--nested-indent--base: calc(var(--pf-v6-c-table__tree-view-main--indent--base) - var(--pf-t--global--spacer--md));
2981
- --pf-v6-c-table__tree-view-main--c-button--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2982
- --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base);
2983
- --pf-v6-c-table__tree-view-main--MarginInlineStart: calc(var(--pf-v6-c-table--cell--PaddingInlineStart) * -1);
2984
- --pf-v6-c-table__tree-view-main--c-table__check--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2985
- --pf-v6-c-table__tree-view-main--c-table__check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2986
- --pf-v6-c-table__tree-view-icon--MinWidth: var(--pf-t--global--spacer--md);
2987
- --pf-v6-c-table__tree-view-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2988
- --pf-v6-c-table--m-tree-view__toggle--Position: absolute;
2989
- --pf-v6-c-table--m-tree-view__toggle--InsetInlineStart: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart);
2990
- --pf-v6-c-table--m-tree-view__toggle--TranslateX: -100%;
2991
- --pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-t--global--spacer--md);
2992
- --pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart: 0;
2993
- --pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart: 0;
2994
- }
2995
-
2996
- .pf-v6-c-table.pf-m-tree-view > tbody > tr {
2997
- --pf-v6-c-table--m-tree-view__toggle--InsetInlineStart: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart);
2998
- }
2999
-
3000
- .pf-v6-c-table.pf-m-tree-view > tbody > tr.pf-m-no-inset {
3001
- --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart);
3002
- --pf-v6-c-table__tree-view-main--MarginInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart);
3003
- }
3004
-
3005
- .pf-v6-c-table.pf-m-tree-view.pf-m-no-inset {
3006
- --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart);
3007
- --pf-v6-c-table__tree-view-main--MarginInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart);
3008
- }
3009
-
3010
- .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="2"] {
3011
- --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base));
3012
- }
3013
-
3014
- .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="3"] {
3015
- --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base));
3016
- }
3017
-
3018
- .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="4"] {
3019
- --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base));
3020
- }
3021
-
3022
- .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="5"] {
3023
- --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base));
3024
- }
3025
-
3026
- .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="6"] {
3027
- --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base));
3028
- }
3029
-
3030
- .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="7"] {
3031
- --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base));
2791
+ .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="7"] {
2792
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base));
3032
2793
  }
3033
2794
 
3034
2795
  .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="8"] {
@@ -4413,777 +4174,379 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
4413
4174
  margin-block-end: var(--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd);
4414
4175
  }
4415
4176
 
4416
- .pf-v6-c-tooltip {
4417
- --pf-v6-c-tooltip--MaxWidth: 18.75rem;
4418
- --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
4419
- --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4420
- --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4421
- --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
4422
- --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
4423
- --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
4424
- --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
4425
- --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
4426
- --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
4427
- --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
4428
- --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
4429
- --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
4430
- --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
4431
- --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
4432
- --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
4433
- --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
4434
- --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
4435
- --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
4436
- --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
4437
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
4438
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
4439
- --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
4440
- --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
4441
- --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
4442
- --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
4177
+ .pf-v6-c-inline-edit {
4178
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
4179
+ --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
4180
+ --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
4181
+ --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--plain);
4182
+ --pf-v6-c-inline-edit__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
4183
+ --pf-v6-c-inline-edit__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold);
4443
4184
  }
4444
4185
 
4445
- .pf-v6-c-tooltip {
4446
- position: relative;
4447
- max-width: var(--pf-v6-c-tooltip--MaxWidth);
4448
- box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
4186
+ .pf-v6-c-inline-edit__group {
4187
+ display: flex;
4188
+ align-items: baseline;
4449
4189
  }
4450
4190
 
4451
- .pf-v6-c-tooltip:is(.pf-m-top,
4452
- .pf-m-top-left,
4453
- .pf-m-top-right) {
4454
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
4455
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
4456
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
4457
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
4458
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
4191
+ .pf-v6-c-inline-edit__group > * {
4192
+ margin-inline-end: var(--pf-v6-c-inline-edit__group--item--MarginInlineEnd);
4459
4193
  }
4460
4194
 
4461
- .pf-v6-c-tooltip:is(.pf-m-bottom,
4462
- .pf-m-bottom-left,
4463
- .pf-m-bottom-right) {
4464
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
4465
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
4466
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
4467
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
4468
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
4195
+ .pf-v6-c-inline-edit__group.pf-m-icon-group {
4196
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd);
4469
4197
  }
4470
4198
 
4471
- .pf-v6-c-tooltip:is(.pf-m-left,
4472
- .pf-m-left-top,
4473
- .pf-m-left-bottom) {
4474
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
4475
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
4476
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
4477
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
4478
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
4199
+ .pf-v6-c-inline-edit__group.pf-m-footer {
4200
+ margin-block-start: var(--pf-v6-c-inline-edit__group--m-footer--MarginBlockStart);
4479
4201
  }
4480
4202
 
4481
- .pf-v6-c-tooltip:is(.pf-m-right,
4482
- .pf-m-right-top,
4483
- .pf-m-right-bottom) {
4484
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
4485
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
4486
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
4487
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
4488
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
4203
+ .pf-v6-c-inline-edit__group.pf-m-column {
4204
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
4205
+ flex-direction: column;
4489
4206
  }
4490
4207
 
4491
- .pf-v6-c-tooltip:is(.pf-m-left-top,
4492
- .pf-m-right-top) {
4493
- --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
4494
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
4208
+ .pf-v6-c-inline-edit__group > :last-child {
4209
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
4495
4210
  }
4496
4211
 
4497
- .pf-v6-c-tooltip:is(.pf-m-left-bottom,
4498
- .pf-m-right-bottom) {
4499
- --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
4500
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
4212
+ .pf-v6-c-inline-edit__input {
4213
+ flex: 1;
4501
4214
  }
4502
4215
 
4503
- .pf-v6-c-tooltip:is(.pf-m-top-left,
4504
- .pf-m-bottom-left) {
4505
- --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
4506
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
4216
+ .pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain {
4217
+ --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color);
4507
4218
  }
4508
4219
 
4509
- .pf-v6-c-tooltip:is(.pf-m-top-right,
4510
- .pf-m-bottom-right) {
4511
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
4512
- --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
4220
+ .pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain:hover {
4221
+ --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color);
4513
4222
  }
4514
4223
 
4515
- .pf-v6-c-tooltip__content {
4516
- position: relative;
4517
- padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
4518
- padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
4519
- padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
4520
- padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
4521
- font-size: var(--pf-v6-c-tooltip__content--FontSize);
4522
- color: var(--pf-v6-c-tooltip__content--Color);
4523
- text-align: center;
4524
- word-break: break-word;
4525
- background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
4526
- border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
4224
+ .pf-v6-c-inline-edit__input,
4225
+ .pf-v6-c-inline-edit__action,
4226
+ .pf-v6-c-inline-edit__group.pf-m-action-group {
4227
+ display: none;
4527
4228
  }
4528
4229
 
4529
- .pf-v6-c-tooltip__content.pf-m-text-align-left {
4530
- text-align: start;
4230
+ .pf-v6-c-inline-edit__action.pf-m-enable-editable {
4231
+ display: inline-block;
4531
4232
  }
4532
4233
 
4533
- .pf-v6-c-tooltip__arrow {
4534
- position: absolute;
4535
- top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
4536
- right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
4537
- bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
4538
- left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
4539
- width: var(--pf-v6-c-tooltip__arrow--Width);
4540
- height: var(--pf-v6-c-tooltip__arrow--Height);
4541
- pointer-events: none;
4542
- background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
4543
- box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
4544
- transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
4234
+ .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__input,
4235
+ .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__input {
4236
+ display: block;
4545
4237
  }
4546
4238
 
4547
- .pf-v6-c-popover[data-popper-reference-hidden=true] {
4548
- visibility: hidden;
4549
- pointer-events: none;
4239
+ .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__action,
4240
+ .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__action {
4241
+ display: inline-block;
4550
4242
  }
4551
4243
 
4552
- .pf-v6-c-check {
4553
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
4554
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
4555
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
4556
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
4557
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
4558
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
4559
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
4560
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
4561
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
4562
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
4563
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
4564
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
4565
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
4566
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
4244
+ .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__group.pf-m-action-group,
4245
+ .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__group.pf-m-action-group {
4246
+ display: inline-flex;
4567
4247
  }
4568
4248
 
4569
- .pf-v6-c-check {
4570
- display: grid;
4571
- grid-template-columns: auto 1fr;
4572
- grid-gap: var(--pf-v6-c-check--GridGap);
4573
- accent-color: var(--pf-v6-c-check--AccentColor);
4249
+ .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__value,
4250
+ .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__action.pf-m-enable-editable,
4251
+ .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__value,
4252
+ .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__action.pf-m-enable-editable {
4253
+ display: none;
4574
4254
  }
4575
4255
 
4576
- .pf-v6-c-check.pf-m-standalone {
4577
- display: inline-grid;
4578
- grid-template-columns: auto;
4579
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
4256
+ .pf-v6-c-inline-edit__label + .pf-v6-c-inline-edit__action.pf-m-enable > .pf-v6-c-button {
4257
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
4258
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
4580
4259
  }
4581
4260
 
4582
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
4583
- align-self: center;
4584
- transform: none;
4261
+ .pf-v6-c-inline-edit__label.pf-m-bold {
4262
+ font-weight: var(--pf-v6-c-inline-edit__label--m-bold--FontWeight);
4585
4263
  }
4586
4264
 
4587
- .pf-v6-c-check__input {
4588
- align-self: start;
4589
- font-size: var(--pf-v6-c-check__label--FontSize);
4590
- line-height: var(--pf-v6-c-check__label--LineHeight);
4591
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
4265
+ .pf-v6-c-inline-edit__editable-text br {
4266
+ display: none;
4592
4267
  }
4593
4268
 
4594
- .pf-v6-c-check__label {
4595
- font-size: var(--pf-v6-c-check__label--FontSize);
4596
- font-weight: var(--pf-v6-c-check__label--FontWeight);
4597
- line-height: var(--pf-v6-c-check__label--LineHeight);
4598
- color: var(--pf-v6-c-check__label--Color);
4269
+ .pf-v6-u-screen-reader {
4270
+ position: fixed;
4271
+ inset-block-start: 0;
4272
+ inset-inline-start: 0;
4273
+ overflow: hidden;
4274
+ clip: rect(0, 0, 0, 0);
4275
+ white-space: nowrap;
4276
+ border: 0;
4599
4277
  }
4600
4278
 
4601
- .pf-v6-c-check__description {
4602
- grid-column: 2;
4603
- font-size: var(--pf-v6-c-check__description--FontSize);
4604
- color: var(--pf-v6-c-check__description--Color);
4279
+ .pf-v6-u-visible {
4280
+ position: static;
4281
+ overflow: visible;
4282
+ clip: auto;
4283
+ white-space: normal;
4284
+ border: inherit;
4605
4285
  }
4606
4286
 
4607
- .pf-v6-c-check__body {
4608
- grid-column: 2;
4287
+ .pf-v6-u-hidden {
4288
+ display: none !important;
4609
4289
  }
4610
4290
 
4611
- .pf-v6-c-check__label,
4612
- .pf-v6-c-check__input {
4613
- justify-self: start;
4291
+ @media screen and (min-width: 36rem) {
4292
+ .pf-v6-u-screen-reader-on-sm {
4293
+ position: fixed;
4294
+ inset-block-start: 0;
4295
+ inset-inline-start: 0;
4296
+ overflow: hidden;
4297
+ clip: rect(0, 0, 0, 0);
4298
+ white-space: nowrap;
4299
+ border: 0;
4300
+ }
4614
4301
  }
4615
-
4616
- label.pf-v6-c-check, .pf-v6-c-check__label,
4617
- .pf-v6-c-check__input {
4618
- cursor: pointer;
4302
+ @media screen and (min-width: 36rem) {
4303
+ .pf-v6-u-visible-on-sm {
4304
+ position: static;
4305
+ overflow: visible;
4306
+ clip: auto;
4307
+ white-space: normal;
4308
+ border: inherit;
4309
+ }
4619
4310
  }
4620
-
4621
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
4622
- .pf-v6-c-check__input:disabled,
4623
- .pf-v6-c-check__input.pf-m-disabled {
4624
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
4625
- cursor: not-allowed;
4311
+ @media screen and (min-width: 36rem) {
4312
+ .pf-v6-u-hidden-on-sm {
4313
+ display: none !important;
4314
+ }
4626
4315
  }
4627
-
4628
- .pf-v6-c-check__label-required {
4629
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
4630
- font-size: var(--pf-v6-c-check__label-required--FontSize);
4631
- color: var(--pf-v6-c-check__label-required--Color);
4316
+ @media screen and (min-width: 48rem) {
4317
+ .pf-v6-u-screen-reader-on-md {
4318
+ position: fixed;
4319
+ inset-block-start: 0;
4320
+ inset-inline-start: 0;
4321
+ overflow: hidden;
4322
+ clip: rect(0, 0, 0, 0);
4323
+ white-space: nowrap;
4324
+ border: 0;
4325
+ }
4632
4326
  }
4633
-
4634
- .pf-v6-c-menu-toggle {
4635
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
4636
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
4637
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
4638
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
4639
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
4640
- --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
4641
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
4642
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
4643
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
4644
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
4645
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
4646
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
4647
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
4648
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
4649
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
4650
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
4651
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
4652
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
4653
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
4654
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
4655
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
4656
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
4657
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
4658
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
4659
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
4660
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
4661
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
4662
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
4663
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
4664
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
4665
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
4666
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
4667
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
4668
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
4669
- --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
4670
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
4671
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
4672
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
4673
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
4674
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
4675
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
4676
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
4677
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
4678
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
4679
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
4680
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
4681
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
4682
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
4683
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
4684
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
4685
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
4686
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
4687
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
4688
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
4689
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
4690
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
4691
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
4692
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
4693
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
4694
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
4695
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
4696
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
4697
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
4698
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
4699
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
4700
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
4701
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
4702
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
4703
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
4704
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
4705
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
4706
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
4707
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
4708
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
4709
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
4710
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
4711
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
4712
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
4713
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
4714
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
4715
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
4716
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
4717
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
4718
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
4719
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
4720
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
4721
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
4722
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
4723
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
4724
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
4725
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
4726
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
4727
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
4728
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
4729
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
4730
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
4731
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
4732
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
4733
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
4734
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
4735
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
4736
- --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
4737
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
4738
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
4739
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
4740
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
4741
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
4742
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
4743
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
4744
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
4745
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
4746
- --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
4747
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
4748
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
4749
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
4750
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
4751
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
4752
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
4753
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
4754
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
4755
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
4756
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
4757
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
4758
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
4759
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
4760
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
4761
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
4762
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
4763
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
4764
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
4765
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
4766
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
4767
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
4768
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
4769
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
4770
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
4771
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
4772
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
4773
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
4774
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
4775
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
4776
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
4777
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
4778
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
4779
- }
4780
-
4781
- .pf-v6-c-menu-toggle {
4782
- position: relative;
4783
- display: inline-flex;
4784
- gap: var(--pf-v6-c-menu-toggle--Gap);
4785
- align-items: center;
4786
- justify-content: center;
4787
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
4788
- max-width: 100%;
4789
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
4790
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
4791
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
4792
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
4793
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
4794
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
4795
- color: var(--pf-v6-c-menu-toggle--Color);
4796
- cursor: pointer;
4797
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
4798
- border: 0;
4799
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
4800
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
4801
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
4327
+ @media screen and (min-width: 48rem) {
4328
+ .pf-v6-u-visible-on-md {
4329
+ position: static;
4330
+ overflow: visible;
4331
+ clip: auto;
4332
+ white-space: normal;
4333
+ border: inherit;
4334
+ }
4802
4335
  }
4803
-
4804
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
4805
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
4336
+ @media screen and (min-width: 48rem) {
4337
+ .pf-v6-u-hidden-on-md {
4338
+ display: none !important;
4339
+ }
4806
4340
  }
4807
-
4808
- .pf-v6-c-menu-toggle::before {
4809
- position: absolute;
4810
- inset-block-start: 0;
4811
- inset-block-end: 0;
4812
- inset-inline-start: 0;
4813
- inset-inline-end: 0;
4814
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
4815
- pointer-events: none;
4816
- content: "";
4817
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
4818
- transition: inherit;
4341
+ @media screen and (min-width: 62rem) {
4342
+ .pf-v6-u-screen-reader-on-lg {
4343
+ position: fixed;
4344
+ inset-block-start: 0;
4345
+ inset-inline-start: 0;
4346
+ overflow: hidden;
4347
+ clip: rect(0, 0, 0, 0);
4348
+ white-space: nowrap;
4349
+ border: 0;
4350
+ }
4819
4351
  }
4820
-
4821
- .pf-v6-c-menu-toggle.pf-m-primary {
4822
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
4823
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
4824
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
4825
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
4826
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
4827
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
4828
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
4829
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
4830
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
4831
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
4832
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
4833
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
4834
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
4835
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
4836
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
4837
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
4838
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
4352
+ @media screen and (min-width: 62rem) {
4353
+ .pf-v6-u-visible-on-lg {
4354
+ position: static;
4355
+ overflow: visible;
4356
+ clip: auto;
4357
+ white-space: normal;
4358
+ border: inherit;
4359
+ }
4839
4360
  }
4840
-
4841
- .pf-v6-c-menu-toggle.pf-m-secondary {
4842
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
4843
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
4844
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
4845
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
4846
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
4847
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
4848
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
4849
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
4850
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
4851
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
4852
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
4853
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
4854
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
4855
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
4856
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
4857
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
4858
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
4361
+ @media screen and (min-width: 62rem) {
4362
+ .pf-v6-u-hidden-on-lg {
4363
+ display: none !important;
4364
+ }
4859
4365
  }
4860
-
4861
- .pf-v6-c-menu-toggle.pf-m-full-height {
4862
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
4863
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
4864
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
4865
- align-items: center;
4866
- height: 100%;
4366
+ @media screen and (min-width: 75rem) {
4367
+ .pf-v6-u-screen-reader-on-xl {
4368
+ position: fixed;
4369
+ inset-block-start: 0;
4370
+ inset-inline-start: 0;
4371
+ overflow: hidden;
4372
+ clip: rect(0, 0, 0, 0);
4373
+ white-space: nowrap;
4374
+ border: 0;
4375
+ }
4867
4376
  }
4868
-
4869
- .pf-v6-c-menu-toggle.pf-m-full-width {
4870
- width: 100%;
4377
+ @media screen and (min-width: 75rem) {
4378
+ .pf-v6-u-visible-on-xl {
4379
+ position: static;
4380
+ overflow: visible;
4381
+ clip: auto;
4382
+ white-space: normal;
4383
+ border: inherit;
4384
+ }
4871
4385
  }
4872
-
4873
- .pf-v6-c-menu-toggle.pf-m-plain {
4874
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
4875
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
4876
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
4877
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
4878
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
4879
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
4880
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
4881
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
4882
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
4883
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
4884
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
4885
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
4886
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
4887
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
4888
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
4386
+ @media screen and (min-width: 75rem) {
4387
+ .pf-v6-u-hidden-on-xl {
4388
+ display: none !important;
4389
+ }
4889
4390
  }
4890
-
4891
- .pf-v6-c-menu-toggle.pf-m-plain::before {
4892
- border: none;
4893
- }
4894
-
4895
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
4896
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
4897
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
4898
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
4899
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
4900
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
4901
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
4902
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
4903
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
4904
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
4391
+ @media screen and (min-width: 90.625rem) {
4392
+ .pf-v6-u-screen-reader-on-2xl {
4393
+ position: fixed;
4394
+ inset-block-start: 0;
4395
+ inset-inline-start: 0;
4396
+ overflow: hidden;
4397
+ clip: rect(0, 0, 0, 0);
4398
+ white-space: nowrap;
4399
+ border: 0;
4400
+ }
4905
4401
  }
4906
-
4907
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
4908
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
4909
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
4910
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
4911
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
4912
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
4402
+ @media screen and (min-width: 90.625rem) {
4403
+ .pf-v6-u-visible-on-2xl {
4404
+ position: static;
4405
+ overflow: visible;
4406
+ clip: auto;
4407
+ white-space: normal;
4408
+ border: inherit;
4409
+ }
4913
4410
  }
4914
-
4915
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
4916
- border: 0;
4411
+ @media screen and (min-width: 90.625rem) {
4412
+ .pf-v6-u-hidden-on-2xl {
4413
+ display: none !important;
4414
+ }
4917
4415
  }
4918
-
4919
- .pf-v6-c-menu-toggle.pf-m-small {
4920
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
4921
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
4922
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
4923
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
4924
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
4925
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
4926
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
4927
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
4416
+ .pf-v6-c-tooltip {
4417
+ --pf-v6-c-tooltip--MaxWidth: 18.75rem;
4418
+ --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
4419
+ --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4420
+ --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4421
+ --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
4422
+ --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
4423
+ --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
4424
+ --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
4425
+ --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
4426
+ --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
4427
+ --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
4428
+ --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
4429
+ --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
4430
+ --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
4431
+ --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
4432
+ --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
4433
+ --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
4434
+ --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
4435
+ --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
4436
+ --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
4437
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
4438
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
4439
+ --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
4440
+ --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
4441
+ --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
4442
+ --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
4928
4443
  }
4929
4444
 
4930
- .pf-v6-c-menu-toggle.pf-m-success {
4931
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
4932
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
4445
+ .pf-v6-c-tooltip {
4446
+ position: relative;
4447
+ max-width: var(--pf-v6-c-tooltip--MaxWidth);
4448
+ box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
4933
4449
  }
4934
4450
 
4935
- .pf-v6-c-menu-toggle.pf-m-warning {
4936
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
4937
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
4451
+ .pf-v6-c-tooltip:is(.pf-m-top,
4452
+ .pf-m-top-left,
4453
+ .pf-m-top-right) {
4454
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
4455
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
4456
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
4457
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
4458
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
4938
4459
  }
4939
4460
 
4940
- .pf-v6-c-menu-toggle.pf-m-danger {
4941
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
4942
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
4461
+ .pf-v6-c-tooltip:is(.pf-m-bottom,
4462
+ .pf-m-bottom-left,
4463
+ .pf-m-bottom-right) {
4464
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
4465
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
4466
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
4467
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
4468
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
4943
4469
  }
4944
4470
 
4945
- @media screen and (prefers-reduced-motion: no-preference) {
4946
- .pf-v6-c-menu-toggle.pf-m-danger {
4947
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
4948
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
4949
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
4950
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
4951
- animation-fill-mode: both;
4952
- }
4953
- }
4954
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
4955
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
4956
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
4957
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
4471
+ .pf-v6-c-tooltip:is(.pf-m-left,
4472
+ .pf-m-left-top,
4473
+ .pf-m-left-bottom) {
4474
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
4475
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
4476
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
4477
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
4478
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
4958
4479
  }
4959
4480
 
4960
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
4961
- from {
4962
- opacity: 0;
4963
- }
4964
- to {
4965
- opacity: 1;
4966
- }
4967
- }
4968
- .pf-v6-c-menu-toggle.pf-m-settings {
4969
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
4970
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
4971
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
4972
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
4973
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
4974
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
4975
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
4481
+ .pf-v6-c-tooltip:is(.pf-m-right,
4482
+ .pf-m-right-top,
4483
+ .pf-m-right-bottom) {
4484
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
4485
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
4486
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
4487
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
4488
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
4976
4489
  }
4977
4490
 
4978
- .pf-v6-c-menu-toggle.pf-m-placeholder {
4979
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
4491
+ .pf-v6-c-tooltip:is(.pf-m-left-top,
4492
+ .pf-m-right-top) {
4493
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
4494
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
4980
4495
  }
4981
4496
 
4982
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
4983
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
4984
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
4985
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
4986
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
4987
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
4497
+ .pf-v6-c-tooltip:is(.pf-m-left-bottom,
4498
+ .pf-m-right-bottom) {
4499
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
4500
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
4988
4501
  }
4989
4502
 
4990
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
4991
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
4992
- pointer-events: none;
4503
+ .pf-v6-c-tooltip:is(.pf-m-top-left,
4504
+ .pf-m-bottom-left) {
4505
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
4506
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
4993
4507
  }
4994
4508
 
4995
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
4996
- syntax: "<length>";
4997
- inherits: false;
4998
- initial-value: 0;
4999
- }
5000
- @media (prefers-reduced-motion: no-preference) {
5001
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
5002
- 33% {
5003
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
5004
- }
5005
- 66% {
5006
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
5007
- }
5008
- }
5009
- }
5010
- .pf-v6-c-menu-toggle.pf-m-split-button {
5011
- --pf-v6-c-menu-toggle--Gap: 0;
5012
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
5013
- padding: 0;
4509
+ .pf-v6-c-tooltip:is(.pf-m-top-right,
4510
+ .pf-m-bottom-right) {
4511
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
4512
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
5014
4513
  }
5015
4514
 
5016
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
4515
+ .pf-v6-c-tooltip__content {
5017
4516
  position: relative;
5018
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
5019
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
5020
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
5021
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
5022
- }
5023
-
5024
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
5025
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
5026
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
5027
- }
5028
-
5029
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
5030
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
5031
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
4517
+ padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
4518
+ padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
4519
+ padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
4520
+ padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
4521
+ font-size: var(--pf-v6-c-tooltip__content--FontSize);
4522
+ color: var(--pf-v6-c-tooltip__content--Color);
4523
+ text-align: center;
4524
+ word-break: break-word;
4525
+ background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
4526
+ border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
5032
4527
  }
5033
4528
 
5034
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
5035
- --pf-v6-c-check__label--Color: currentcolor;
5036
- --pf-v6-c-check__label--disabled--Color: currentcolor;
5037
- align-items: center;
5038
- align-self: stretch;
4529
+ .pf-v6-c-tooltip__content.pf-m-text-align-left {
4530
+ text-align: start;
5039
4531
  }
5040
4532
 
5041
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
5042
- --pf-v6-c-check__input--TranslateY: 0;
5043
- align-self: center;
4533
+ .pf-v6-c-tooltip__arrow {
4534
+ position: absolute;
4535
+ top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
4536
+ right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
4537
+ bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
4538
+ left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
4539
+ width: var(--pf-v6-c-tooltip__arrow--Width);
4540
+ height: var(--pf-v6-c-tooltip__arrow--Height);
4541
+ pointer-events: none;
4542
+ background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
4543
+ box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
4544
+ transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
5044
4545
  }
5045
4546
 
5046
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
5047
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
5048
- }
5049
-
5050
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
5051
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
5052
- }
5053
-
5054
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
5055
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
5056
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
5057
- }
5058
-
5059
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
5060
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
5061
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
5062
- }
5063
-
5064
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
5065
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
5066
- }
5067
-
5068
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
5069
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
5070
- }
5071
-
5072
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
5073
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
5074
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
5075
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
5076
- }
5077
-
5078
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
5079
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
5080
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
5081
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
5082
- }
5083
-
5084
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
5085
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
5086
- }
5087
-
5088
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
5089
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
5090
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
5091
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
5092
- }
5093
-
5094
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
5095
- content: none;
5096
- }
5097
-
5098
- .pf-v6-c-menu-toggle.pf-m-typeahead {
5099
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
5100
- --pf-v6-c-menu-toggle--Gap: 0;
5101
- align-items: stretch;
5102
- padding: 0;
5103
- }
5104
-
5105
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
5106
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
5107
- }
5108
-
5109
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
5110
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
5111
- display: flex;
5112
- align-items: stretch;
5113
- }
5114
-
5115
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
5116
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
5117
- flex: 1;
5118
- }
5119
-
5120
- .pf-v6-c-menu-toggle__button {
5121
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
5122
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
5123
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
5124
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
5125
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
5126
- color: inherit;
5127
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
5128
- border: 0;
5129
- }
5130
-
5131
- .pf-v6-c-menu-toggle__button.pf-m-text {
5132
- display: inline-flex;
5133
- align-items: baseline;
5134
- }
5135
-
5136
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
5137
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
5138
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
5139
- }
5140
-
5141
- .pf-v6-c-menu-toggle__text {
5142
- overflow: hidden;
5143
- text-overflow: ellipsis;
5144
- white-space: nowrap;
5145
- min-width: 0;
5146
- }
5147
-
5148
- .pf-v6-c-menu-toggle__count {
5149
- display: flex;
5150
- flex-wrap: nowrap;
5151
- }
5152
-
5153
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
5154
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
5155
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
5156
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
5157
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
5158
- }
5159
-
5160
- .pf-v6-c-menu-toggle__icon {
5161
- flex-shrink: 0;
5162
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
5163
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
5164
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
5165
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
5166
- }
5167
-
5168
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
5169
- vertical-align: middle;
5170
- }
5171
-
5172
- .pf-v6-c-menu-toggle__controls {
5173
- display: flex;
5174
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
5175
- align-items: center;
5176
- justify-content: center;
5177
- margin-inline-start: auto;
5178
- }
5179
-
5180
- .pf-v6-c-menu-toggle__toggle-icon {
5181
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
5182
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
5183
- }
5184
-
5185
- .pf-v6-c-menu-toggle__status-icon {
5186
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
4547
+ .pf-v6-c-popover[data-popper-reference-hidden=true] {
4548
+ visibility: hidden;
4549
+ pointer-events: none;
5187
4550
  }
5188
4551
 
5189
4552
  .pf-v6-c-button {
@@ -5492,565 +4855,983 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
5492
4855
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
5493
4856
  }
5494
4857
 
5495
- .pf-v6-c-button {
5496
- position: relative;
5497
- display: var(--pf-v6-c-button--Display);
5498
- gap: var(--pf-v6-c-button--Gap);
5499
- align-items: var(--pf-v6-c-button--AlignItems);
5500
- justify-content: var(--pf-v6-c-button--JustifyContent);
5501
- min-width: var(--pf-v6-c-button--MinWidth);
5502
- padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
5503
- padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
5504
- padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
5505
- padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd);
5506
- font-size: var(--pf-v6-c-button--FontSize, inherit);
5507
- font-weight: var(--pf-v6-c-button--FontWeight, inherit);
5508
- line-height: var(--pf-v6-c-button--LineHeight, inherit);
5509
- color: var(--pf-v6-c-button--Color);
5510
- text-align: center;
5511
- text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
5512
- text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
5513
- text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
5514
- white-space: nowrap;
5515
- cursor: pointer;
5516
- -webkit-user-select: none;
5517
- user-select: none;
5518
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
5519
- border: 0;
5520
- border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
5521
- border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
5522
- border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
5523
- border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
5524
- transition-delay: var(--pf-v6-c-button--TransitionDelay);
5525
- transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
5526
- transition-duration: var(--pf-v6-c-button--TransitionDuration);
5527
- transition-property: var(--pf-v6-c-button--TransitionProperty);
5528
- scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
4858
+ .pf-v6-c-button {
4859
+ position: relative;
4860
+ display: var(--pf-v6-c-button--Display);
4861
+ gap: var(--pf-v6-c-button--Gap);
4862
+ align-items: var(--pf-v6-c-button--AlignItems);
4863
+ justify-content: var(--pf-v6-c-button--JustifyContent);
4864
+ min-width: var(--pf-v6-c-button--MinWidth);
4865
+ padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
4866
+ padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
4867
+ padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
4868
+ padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd);
4869
+ font-size: var(--pf-v6-c-button--FontSize, inherit);
4870
+ font-weight: var(--pf-v6-c-button--FontWeight, inherit);
4871
+ line-height: var(--pf-v6-c-button--LineHeight, inherit);
4872
+ color: var(--pf-v6-c-button--Color);
4873
+ text-align: center;
4874
+ text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
4875
+ text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
4876
+ text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
4877
+ white-space: nowrap;
4878
+ cursor: pointer;
4879
+ -webkit-user-select: none;
4880
+ user-select: none;
4881
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
4882
+ border: 0;
4883
+ border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
4884
+ border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
4885
+ border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
4886
+ border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
4887
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
4888
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
4889
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
4890
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
4891
+ scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
4892
+ }
4893
+
4894
+ .pf-v6-c-button::after {
4895
+ position: absolute;
4896
+ inset: 0;
4897
+ pointer-events: none;
4898
+ content: "";
4899
+ border: var(--pf-v6-c-button--BorderWidth) solid;
4900
+ border-color: var(--pf-v6-c-button--BorderColor);
4901
+ border-radius: inherit;
4902
+ transition: inherit;
4903
+ }
4904
+
4905
+ .pf-v6-c-button.pf-m-primary {
4906
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
4907
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-primary--BackgroundColor);
4908
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-primary__icon--Color);
4909
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-primary--hover--Color);
4910
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-primary--hover--BackgroundColor);
4911
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-primary--hover__icon--Color);
4912
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-primary--m-clicked--Color);
4913
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-primary--m-clicked--BackgroundColor);
4914
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
4915
+ }
4916
+
4917
+ .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
4918
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
4919
+ }
4920
+
4921
+ .pf-v6-c-button.pf-m-secondary {
4922
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
4923
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-secondary--BorderColor);
4924
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-secondary--TransitionDuration);
4925
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-secondary__icon--Color);
4926
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-secondary--hover--Color);
4927
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-secondary--hover--BorderColor);
4928
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-secondary--hover__icon--Color);
4929
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-clicked--Color);
4930
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-clicked--BorderColor);
4931
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-clicked__icon--Color);
4932
+ --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-secondary--m-danger--Color);
4933
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger__icon--Color);
4934
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover--Color);
4935
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover__icon--Color);
4936
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--Color);
4937
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color);
4938
+ }
4939
+
4940
+ .pf-v6-c-button.pf-m-secondary.pf-m-danger {
4941
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--BorderColor);
4942
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--hover--BorderColor);
4943
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor);
4944
+ --pf-v6-c-button--m-danger--BackgroundColor: transparent;
4945
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: transparent;
4946
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: transparent;
4947
+ }
4948
+
4949
+ .pf-v6-c-button.pf-m-tertiary {
4950
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-tertiary--Color);
4951
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-tertiary--BorderColor);
4952
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-tertiary--TransitionDuration);
4953
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-tertiary__icon--Color);
4954
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-tertiary--hover--Color);
4955
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-tertiary--hover--BorderColor);
4956
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-tertiary--hover__icon--Color);
4957
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-tertiary--m-clicked--Color);
4958
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-tertiary--m-clicked--BorderColor);
4959
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-tertiary--m-clicked__icon--Color);
4960
+ }
4961
+
4962
+ .pf-v6-c-button.pf-m-link {
4963
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd);
4964
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart);
4965
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color);
4966
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
4967
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
4968
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color);
4969
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-link--hover--Color);
4970
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-link--hover--BackgroundColor);
4971
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-link--hover__icon--Color);
4972
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
4973
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
4974
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
4975
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
4976
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
4977
+ }
4978
+
4979
+ .pf-v6-c-button.pf-m-link.pf-m-inline {
4980
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
4981
+ --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
4982
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
4983
+ --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
4984
+ --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
4985
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockStart);
4986
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
4987
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
4988
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
4989
+ --pf-v6-c-button--BackgroundColor: transparent;
4990
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
4991
+ --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
4992
+ --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
4993
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
4994
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
4995
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
4996
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
4997
+ --pf-v6-c-button--disabled--BackgroundColor: transparent;
4998
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
4999
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
5000
+ --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
5001
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
5002
+ --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
5003
+ --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
5004
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
5005
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
5006
+ text-align: start;
5007
+ white-space: normal;
5008
+ background: transparent;
5009
+ outline-offset: 0.125rem;
5010
+ }
5011
+
5012
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
5013
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
5014
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
5015
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
5016
+ }
5017
+
5018
+ .pf-v6-c-button.pf-m-link.pf-m-danger {
5019
+ --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
5020
+ --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
5021
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-link--m-danger__icon--Color);
5022
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-link--m-danger--hover--Color);
5023
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor);
5024
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-link--m-danger--hover__icon--Color);
5025
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked--Color);
5026
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor);
5027
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color);
5028
+ }
5029
+
5030
+ .pf-v6-c-button.pf-m-link.pf-m-display-lg {
5031
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-display-lg--FontSize);
5032
+ }
5033
+
5034
+ .pf-v6-c-button.pf-m-warning {
5035
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-warning--Color);
5036
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-warning--BackgroundColor);
5037
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-warning__icon--Color);
5038
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-warning--hover--Color);
5039
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-warning--hover--BackgroundColor);
5040
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-warning--hover__icon--Color);
5041
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-warning--m-clicked--Color);
5042
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-warning--m-clicked--BackgroundColor);
5043
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-warning--m-clicked__icon--Color);
5044
+ }
5045
+
5046
+ .pf-v6-c-button.pf-m-danger {
5047
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-danger--Color);
5048
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-danger--BackgroundColor);
5049
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-danger__icon--Color);
5050
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-danger--hover--Color);
5051
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-danger--hover--BackgroundColor);
5052
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-danger--hover__icon--Color);
5053
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-danger--m-clicked--Color);
5054
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-danger--m-clicked--BackgroundColor);
5055
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-danger--m-clicked__icon--Color);
5056
+ }
5057
+
5058
+ .pf-v6-c-button.pf-m-control {
5059
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius);
5060
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-control--PaddingInlineStart);
5061
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-control--PaddingInlineEnd);
5062
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color);
5063
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor);
5064
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor);
5065
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-control--BorderWidth);
5066
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-control__icon--Color);
5067
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-control--hover--Color);
5068
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-control--hover--BackgroundColor);
5069
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-control--hover--BorderColor);
5070
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-control--hover--BorderWidth);
5071
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-control--hover__icon--Color);
5072
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-control--m-clicked--Color);
5073
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-control--m-clicked--BackgroundColor);
5074
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
5075
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
5076
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
5077
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
5078
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
5079
+ }
5080
+
5081
+ .pf-v6-c-button.pf-m-stateful {
5082
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
5083
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
5084
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
5085
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
5086
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
5087
+ }
5088
+
5089
+ .pf-v6-c-button.pf-m-read {
5090
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
5091
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
5092
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
5093
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
5094
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
5095
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
5096
+ }
5097
+
5098
+ .pf-v6-c-button.pf-m-unread {
5099
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
5100
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
5101
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
5102
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
5103
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
5104
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
5105
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
5106
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
5107
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
5108
+ }
5109
+
5110
+ .pf-v6-c-button.pf-m-attention {
5111
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
5112
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
5113
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
5114
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
5115
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
5116
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
5117
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
5118
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
5119
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
5120
+ }
5121
+
5122
+ .pf-v6-c-button.pf-m-plain {
5123
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
5124
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
5125
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
5126
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
5127
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
5128
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
5129
+ --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
5130
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
5131
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
5132
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
5133
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
5134
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
5135
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
5136
+ --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
5137
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
5138
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
5139
+ }
5140
+
5141
+ .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
5142
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
5143
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
5144
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
5145
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
5146
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
5147
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
5148
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
5149
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
5150
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
5151
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
5152
+ min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
5153
+ background: var(--pf-v6-c-button--BackgroundColor);
5154
+ }
5155
+
5156
+ .pf-v6-c-button.pf-m-block {
5157
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
5158
+ width: var(--pf-v6-c-button--m-block--Width);
5159
+ }
5160
+
5161
+ .pf-v6-c-button.pf-m-small {
5162
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
5163
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd);
5164
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd);
5165
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart);
5166
+ }
5167
+
5168
+ .pf-v6-c-button.pf-m-display-lg {
5169
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart);
5170
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd);
5171
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
5172
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
5173
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
5174
+ }
5175
+
5176
+ .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
5177
+ display: grid;
5178
+ transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
5179
+ transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
5180
+ transition-property: color;
5181
+ }
5182
+
5183
+ .pf-v6-c-button.pf-m-favorited {
5184
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
5185
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
5186
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
5187
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
5188
+ --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
5189
+ --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
5190
+ }
5191
+
5192
+ .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
5193
+ animation-name: pf-v6-c-button-icon-favorited;
5194
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
5195
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
5196
+ }
5197
+
5198
+ .pf-v6-c-button.pf-m-settings {
5199
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
5200
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
5201
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
5202
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
5203
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
5204
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
5205
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
5206
+ }
5207
+
5208
+ .pf-v6-c-button.pf-m-hamburger {
5209
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
5210
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
5211
+ --pf-v6-c-button__icon--TransitionProperty: scale;
5212
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
5213
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
5214
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
5215
+ }
5216
+
5217
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
5218
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
5219
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
5220
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
5221
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
5222
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
5223
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
5224
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
5225
+ }
5226
+
5227
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
5228
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
5229
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
5230
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
5231
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
5232
+ --pf-v6-c-button__icon--ScaleX: 1;
5233
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
5234
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
5235
+ }
5236
+
5237
+ .pf-v6-c-button:hover, .pf-v6-c-button:focus {
5238
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
5239
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
5240
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
5241
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
5242
+ --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
5243
+ --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
5244
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
5245
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
5246
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
5247
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
5248
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
5249
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
5250
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
5251
+ --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
5252
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
5253
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
5254
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
5255
+ }
5256
+
5257
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
5258
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
5259
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
5260
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
5261
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
5262
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
5263
+ }
5264
+
5265
+ .pf-v6-c-button:active {
5266
+ background-size: 100%;
5267
+ transition-duration: 0s;
5268
+ }
5269
+
5270
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
5271
+ pointer-events: none;
5272
+ }
5273
+
5274
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
5275
+ color: var(--pf-v6-c-button--disabled--Color);
5276
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
5277
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
5278
+ }
5279
+
5280
+ .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
5281
+ border-color: transparent;
5282
+ }
5283
+
5284
+ .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
5285
+ color: var(--pf-v6-c-button--disabled__icon--Color);
5286
+ }
5287
+
5288
+ .pf-v6-c-button.pf-m-aria-disabled {
5289
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
5290
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
5291
+ cursor: default;
5292
+ }
5293
+
5294
+ .pf-v6-c-button.pf-m-progress {
5295
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
5296
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
5297
+ }
5298
+
5299
+ .pf-v6-c-button.pf-m-in-progress {
5300
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
5301
+ }
5302
+
5303
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
5304
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
5305
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
5306
+ }
5307
+
5308
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
5309
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
5310
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
5311
+ }
5312
+
5313
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
5314
+ opacity: 0;
5315
+ }
5316
+
5317
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
5318
+ animation-name: pf-v6-c-button-icon-notify;
5319
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
5320
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
5321
+ }
5322
+
5323
+ .pf-v6-c-button__icon {
5324
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
5325
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
5326
+ color: var(--pf-v6-c-button__icon--Color);
5327
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
5328
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
5329
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
5330
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
5331
+ rotate: var(--pf-v6-c-button__icon--Rotate);
5332
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
5333
+ }
5334
+
5335
+ .pf-v6-c-button__icon.pf-m-start {
5336
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
5529
5337
  }
5530
5338
 
5531
- .pf-v6-c-button::after {
5532
- position: absolute;
5533
- inset: 0;
5534
- pointer-events: none;
5535
- content: "";
5536
- border: var(--pf-v6-c-button--BorderWidth) solid;
5537
- border-color: var(--pf-v6-c-button--BorderColor);
5538
- border-radius: inherit;
5539
- transition: inherit;
5339
+ .pf-v6-c-button__icon.pf-m-end {
5340
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
5540
5341
  }
5541
5342
 
5542
- .pf-v6-c-button.pf-m-primary {
5543
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
5544
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-primary--BackgroundColor);
5545
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-primary__icon--Color);
5546
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-primary--hover--Color);
5547
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-primary--hover--BackgroundColor);
5548
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-primary--hover__icon--Color);
5549
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-primary--m-clicked--Color);
5550
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-primary--m-clicked--BackgroundColor);
5551
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
5343
+ .pf-v6-c-button__icon-favorite,
5344
+ .pf-v6-c-button__icon-favorited {
5345
+ grid-area: 1/1/1/1;
5346
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
5347
+ transition-property: opacity;
5552
5348
  }
5553
5349
 
5554
- .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
5555
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
5350
+ .pf-v6-c-button__icon-favorite {
5351
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
5556
5352
  }
5557
5353
 
5558
- .pf-v6-c-button.pf-m-secondary {
5559
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
5560
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-secondary--BorderColor);
5561
- --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-secondary--TransitionDuration);
5562
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-secondary__icon--Color);
5563
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-secondary--hover--Color);
5564
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-secondary--hover--BorderColor);
5565
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-secondary--hover__icon--Color);
5566
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-clicked--Color);
5567
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-clicked--BorderColor);
5568
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-clicked__icon--Color);
5569
- --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-secondary--m-danger--Color);
5570
- --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger__icon--Color);
5571
- --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover--Color);
5572
- --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover__icon--Color);
5573
- --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--Color);
5574
- --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color);
5354
+ .pf-v6-c-button__icon-favorited {
5355
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
5575
5356
  }
5576
5357
 
5577
- .pf-v6-c-button.pf-m-secondary.pf-m-danger {
5578
- --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--BorderColor);
5579
- --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--hover--BorderColor);
5580
- --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor);
5581
- --pf-v6-c-button--m-danger--BackgroundColor: transparent;
5582
- --pf-v6-c-button--m-danger--hover--BackgroundColor: transparent;
5583
- --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: transparent;
5358
+ .pf-v6-c-button__progress {
5359
+ position: absolute;
5360
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
5361
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
5362
+ line-height: 1;
5363
+ color: var(--pf-v6-c-button__progress--Color);
5364
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
5584
5365
  }
5585
5366
 
5586
- .pf-v6-c-button.pf-m-tertiary {
5587
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-tertiary--Color);
5588
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-tertiary--BorderColor);
5589
- --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-tertiary--TransitionDuration);
5590
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-tertiary__icon--Color);
5591
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-tertiary--hover--Color);
5592
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-tertiary--hover--BorderColor);
5593
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-tertiary--hover__icon--Color);
5594
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-tertiary--m-clicked--Color);
5595
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-tertiary--m-clicked--BorderColor);
5596
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-tertiary--m-clicked__icon--Color);
5367
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
5368
+ --pf-v6-c-spinner--Color: currentcolor;
5597
5369
  }
5598
5370
 
5599
- .pf-v6-c-button.pf-m-link {
5600
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd);
5601
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart);
5602
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color);
5603
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
5604
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
5605
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color);
5606
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-link--hover--Color);
5607
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-link--hover--BackgroundColor);
5608
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-link--hover__icon--Color);
5609
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
5610
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
5611
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
5612
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
5613
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
5371
+ .pf-v6-c-button__text {
5372
+ text-decoration: inherit;
5614
5373
  }
5615
5374
 
5616
- .pf-v6-c-button.pf-m-link.pf-m-inline {
5617
- --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
5618
- --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
5619
- --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
5620
- --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
5621
- --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
5622
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockStart);
5623
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
5624
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
5625
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
5626
- --pf-v6-c-button--BackgroundColor: transparent;
5627
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
5628
- --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
5629
- --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
5630
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
5631
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
5632
- --pf-v6-c-button--hover--BackgroundColor: transparent;
5633
- --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
5634
- --pf-v6-c-button--disabled--BackgroundColor: transparent;
5635
- --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
5636
- --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
5637
- --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
5638
- --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
5639
- --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
5640
- --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
5641
- --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
5642
- --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
5643
- text-align: start;
5644
- white-space: normal;
5645
- background: transparent;
5646
- outline-offset: 0.125rem;
5375
+ .pf-v6-c-button__count {
5376
+ display: inline-flex;
5377
+ align-items: center;
5647
5378
  }
5648
5379
 
5649
- span.pf-v6-c-button.pf-m-link.pf-m-inline {
5650
- --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
5651
- --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
5652
- --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
5380
+ .pf-v6-c-button--hamburger-icon path {
5381
+ fill: none;
5382
+ stroke: currentcolor;
5383
+ stroke-linecap: round;
5384
+ stroke-linejoin: round;
5385
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
5653
5386
  }
5654
5387
 
5655
- .pf-v6-c-button.pf-m-link.pf-m-danger {
5656
- --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
5657
- --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
5658
- --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-link--m-danger__icon--Color);
5659
- --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-link--m-danger--hover--Color);
5660
- --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor);
5661
- --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-link--m-danger--hover__icon--Color);
5662
- --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked--Color);
5663
- --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor);
5664
- --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color);
5388
+ .pf-v6-c-button--hamburger-icon--top {
5389
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
5665
5390
  }
5666
5391
 
5667
- .pf-v6-c-button.pf-m-link.pf-m-display-lg {
5668
- --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-display-lg--FontSize);
5392
+ .pf-v6-c-button--hamburger-icon--middle {
5393
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
5394
+ }
5395
+
5396
+ .pf-v6-c-button--hamburger-icon--arrow {
5397
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
5398
+ }
5399
+
5400
+ .pf-v6-c-button--hamburger-icon--bottom {
5401
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
5402
+ }
5403
+
5404
+ @keyframes pf-v6-c-button-icon-notify {
5405
+ 33% {
5406
+ transform: rotate(30deg);
5407
+ }
5408
+ 66% {
5409
+ transform: rotate(-60deg);
5410
+ }
5411
+ }
5412
+ @keyframes pf-v6-c-button-icon-favorited {
5413
+ 50% {
5414
+ scale: 1.5;
5415
+ }
5416
+ }
5417
+ .pf-v6-c-form-control {
5418
+ --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
5419
+ --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular);
5420
+ --pf-v6-c-form-control--FontSize: var(--pf-t--global--font--size--body--default);
5421
+ --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
5422
+ --pf-v6-c-form-control--Resize: none;
5423
+ --pf-v6-c-form-control--OutlineOffset: -6px;
5424
+ --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
5425
+ --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
5426
+ --pf-v6-c-form-control--before--BorderStyle: solid;
5427
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
5428
+ --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
5429
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
5430
+ --pf-v6-c-form-control--after--BorderStyle: solid;
5431
+ --pf-v6-c-form-control--after--BorderColor: transparent;
5432
+ --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
5433
+ --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
5434
+ --pf-v6-c-form-control--Width: 100%;
5435
+ --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
5436
+ --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
5437
+ --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
5438
+ --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base);
5439
+ --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base);
5440
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
5441
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
5442
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
5443
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
5444
+ --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
5445
+ --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
5446
+ --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd);
5447
+ --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
5448
+ --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
5449
+ --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
5450
+ --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
5451
+ --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
5452
+ --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
5453
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
5454
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
5455
+ --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
5456
+ --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
5457
+ --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
5458
+ --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
5459
+ --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
5460
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
5461
+ --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
5462
+ --pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
5463
+ --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
5464
+ --pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
5465
+ --pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
5466
+ --pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
5467
+ --pf-v6-c-form-control--m-placeholder--child--Color: var(--pf-t--global--text--color--regular);
5468
+ --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
5469
+ --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
5470
+ --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent;
5471
+ --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
5472
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
5473
+ --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
5474
+ --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
5475
+ --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
5476
+ --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
5477
+ --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
5478
+ --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize);
5479
+ --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
5480
+ --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
5481
+ --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial;
5482
+ --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial;
5483
+ --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));
5484
+ --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));
5485
+ --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));
5486
+ --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
5487
+ --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
5488
+ --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial;
5489
+ --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial;
5490
+ --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));
5491
+ --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));
5492
+ --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));
5493
+ --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
5494
+ --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
5495
+ --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial;
5496
+ --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial;
5497
+ --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
5498
+ --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));
5499
+ --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));
5500
+ --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));
5501
+ --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));
5502
+ --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
5503
+ --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
5504
+ --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));
5505
+ --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
5506
+ --pf-v6-c-form-control--textarea--Height: auto;
5507
+ --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
5508
+ --pf-v6-c-form-control--textarea--PaddingBlockEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
5509
+ --pf-v6-c-form-control--textarea--PaddingInlineEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
5510
+ --pf-v6-c-form-control--textarea--PaddingInlineStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
5511
+ --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
5512
+ --pf-v6-c-form-control__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
5513
+ --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
5514
+ --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
5515
+ --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
5516
+ --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
5517
+ --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
5518
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart);
5519
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
5520
+ --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));
5521
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0;
5522
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0;
5523
+ --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
5524
+ --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
5525
+ --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
5669
5526
  }
5670
5527
 
5671
- .pf-v6-c-button.pf-m-warning {
5672
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-warning--Color);
5673
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-warning--BackgroundColor);
5674
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-warning__icon--Color);
5675
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-warning--hover--Color);
5676
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-warning--hover--BackgroundColor);
5677
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-warning--hover__icon--Color);
5678
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-warning--m-clicked--Color);
5679
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-warning--m-clicked--BackgroundColor);
5680
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-warning--m-clicked__icon--Color);
5528
+ .pf-v6-c-form-control {
5529
+ position: relative;
5530
+ display: grid;
5531
+ grid-template-columns: 1fr auto;
5532
+ column-gap: var(--pf-v6-c-form-control--ColumnGap);
5533
+ align-items: start;
5534
+ width: var(--pf-v6-c-form-control--Width);
5535
+ font-size: var(--pf-v6-c-form-control--FontSize);
5536
+ line-height: var(--pf-v6-c-form-control--LineHeight);
5537
+ resize: var(--pf-v6-c-form-control--Resize);
5538
+ background-color: var(--pf-v6-c-form-control--BackgroundColor);
5539
+ border-radius: var(--pf-v6-c-form-control--BorderRadius);
5681
5540
  }
5682
5541
 
5683
- .pf-v6-c-button.pf-m-danger {
5684
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-danger--Color);
5685
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-danger--BackgroundColor);
5686
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-danger__icon--Color);
5687
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-danger--hover--Color);
5688
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-danger--hover--BackgroundColor);
5689
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-danger--hover__icon--Color);
5690
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-danger--m-clicked--Color);
5691
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-danger--m-clicked--BackgroundColor);
5692
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-danger--m-clicked__icon--Color);
5542
+ .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
5543
+ position: absolute;
5544
+ inset: 0;
5545
+ pointer-events: none;
5546
+ content: "";
5693
5547
  }
5694
5548
 
5695
- .pf-v6-c-button.pf-m-control {
5696
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius);
5697
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-control--PaddingInlineStart);
5698
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-control--PaddingInlineEnd);
5699
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color);
5700
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor);
5701
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor);
5702
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-control--BorderWidth);
5703
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-control__icon--Color);
5704
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-control--hover--Color);
5705
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-control--hover--BackgroundColor);
5706
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-control--hover--BorderColor);
5707
- --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-control--hover--BorderWidth);
5708
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-control--hover__icon--Color);
5709
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-control--m-clicked--Color);
5710
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-control--m-clicked--BackgroundColor);
5711
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
5712
- --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
5713
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
5714
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
5715
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
5549
+ .pf-v6-c-form-control::before {
5550
+ border-color: var(--pf-v6-c-form-control--before--BorderColor);
5551
+ border-style: var(--pf-v6-c-form-control--before--BorderStyle);
5552
+ border-width: var(--pf-v6-c-form-control--before--BorderWidth);
5553
+ border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
5716
5554
  }
5717
5555
 
5718
- .pf-v6-c-button.pf-m-stateful {
5719
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
5720
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
5721
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
5722
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
5723
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
5556
+ .pf-v6-c-form-control::after {
5557
+ border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle) var(--pf-v6-c-form-control--after--BorderColor);
5558
+ border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
5724
5559
  }
5725
5560
 
5726
- .pf-v6-c-button.pf-m-read {
5727
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
5728
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
5729
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
5730
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
5731
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
5732
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
5561
+ .pf-v6-c-form-control > :is(input, select, textarea) {
5562
+ grid-row: 1/2;
5563
+ grid-column: 1/-1;
5564
+ padding-block-start: var(--pf-v6-c-form-control--PaddingBlockStart);
5565
+ padding-block-end: var(--pf-v6-c-form-control--PaddingBlockEnd);
5566
+ padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
5567
+ padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
5568
+ color: var(--pf-v6-c-form-control--Color);
5569
+ appearance: none;
5570
+ background-color: transparent;
5571
+ border: none;
5572
+ border-radius: var(--pf-v6-c-form-control--BorderRadius);
5573
+ outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
5733
5574
  }
5734
5575
 
5735
- .pf-v6-c-button.pf-m-unread {
5736
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
5737
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
5738
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
5739
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
5740
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
5741
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
5742
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
5743
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
5744
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
5576
+ .pf-v6-c-form-control > ::placeholder {
5577
+ color: var(--pf-v6-c-form-control--m-placeholder--Color);
5745
5578
  }
5746
5579
 
5747
- .pf-v6-c-button.pf-m-attention {
5748
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
5749
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
5750
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
5751
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
5752
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
5753
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
5754
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
5755
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
5756
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
5580
+ .pf-v6-c-form-control > :is(input, select) {
5581
+ text-overflow: ellipsis;
5757
5582
  }
5758
5583
 
5759
- .pf-v6-c-button.pf-m-plain {
5760
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
5761
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
5762
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
5763
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
5764
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
5765
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
5766
- --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
5767
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
5768
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
5769
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
5770
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
5771
- --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
5772
- --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
5773
- --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
5774
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
5775
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
5584
+ .pf-v6-c-form-control:has(input) {
5585
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
5586
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
5587
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart);
5588
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
5589
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd);
5776
5590
  }
5777
5591
 
5778
- .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
5779
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
5780
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
5781
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
5782
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
5783
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
5784
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
5785
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
5786
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
5787
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
5788
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
5789
- min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
5790
- background: var(--pf-v6-c-button--BackgroundColor);
5592
+ .pf-v6-c-form-control.pf-m-textarea {
5593
+ padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset);
5594
+ padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset);
5595
+ padding-inline-start: var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset);
5596
+ padding-inline-end: var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset);
5791
5597
  }
5792
5598
 
5793
- .pf-v6-c-button.pf-m-block {
5794
- --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
5795
- width: var(--pf-v6-c-button--m-block--Width);
5599
+ .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 {
5600
+ --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));
5796
5601
  }
5797
5602
 
5798
- .pf-v6-c-button.pf-m-small {
5799
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
5800
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd);
5801
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd);
5802
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart);
5603
+ .pf-v6-c-form-control.pf-m-textarea:has(textarea) {
5604
+ --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
5605
+ --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
5606
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
5607
+ --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));
5608
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
5803
5609
  }
5804
5610
 
5805
- .pf-v6-c-button.pf-m-display-lg {
5806
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart);
5807
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd);
5808
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
5809
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
5810
- --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
5611
+ .pf-v6-c-form-control.pf-m-textarea > textarea {
5612
+ outline-offset: 0;
5613
+ scrollbar-gutter: stable;
5811
5614
  }
5812
5615
 
5813
- .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
5814
- display: grid;
5815
- transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
5816
- transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
5817
- transition-property: color;
5616
+ .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
5617
+ padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
5818
5618
  }
5819
5619
 
5820
- .pf-v6-c-button.pf-m-favorited {
5821
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
5822
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
5823
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
5824
- --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
5825
- --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
5826
- --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
5620
+ .pf-v6-c-form-control.pf-m-readonly {
5621
+ --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
5622
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
5827
5623
  }
5828
5624
 
5829
- .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
5830
- animation-name: pf-v6-c-button-icon-favorited;
5831
- animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
5832
- animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
5625
+ .pf-v6-c-form-control.pf-m-readonly:hover {
5626
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
5833
5627
  }
5834
5628
 
5835
- .pf-v6-c-button.pf-m-settings {
5836
- --pf-v6-c-button__icon--TransitionProperty: rotate;
5837
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
5838
- --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
5839
- --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
5840
- --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
5841
- --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
5842
- --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
5629
+ .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
5630
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
5843
5631
  }
5844
5632
 
5845
- .pf-v6-c-button.pf-m-hamburger {
5846
- --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
5847
- --pf-v6-c-button__icon--TransitionDuration: 0s;
5848
- --pf-v6-c-button__icon--TransitionProperty: scale;
5849
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
5850
- --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
5851
- --pf-v6-c-button--hover__icon--TransitionProperty: scale;
5633
+ .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
5634
+ --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
5635
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
5636
+ --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
5637
+ --pf-v6-c-form-control--before--BorderStyle: none;
5638
+ --pf-v6-c-form-control--after--BorderStyle: none;
5639
+ --pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset);
5852
5640
  }
5853
5641
 
5854
- .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
5855
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
5856
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
5857
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
5858
- --pf-v6-c-button__icon--TransitionDelay: 0s;
5859
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
5860
- --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
5861
- --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
5642
+ .pf-v6-c-form-control.pf-m-expanded {
5643
+ --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
5644
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth);
5862
5645
  }
5863
5646
 
5864
- .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
5865
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
5866
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
5867
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
5868
- --pf-v6-c-button__icon--TransitionDelay: 0s;
5869
- --pf-v6-c-button__icon--ScaleX: 1;
5870
- --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
5871
- --pf-v6-c-button--hover__icon--ScaleX: 1;
5647
+ .pf-v6-c-form-control.pf-m-disabled {
5648
+ --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-disabled--BackgroundColor);
5649
+ --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
5650
+ --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
5651
+ --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
5652
+ --pf-v6-c-form-control--before--BorderStyle: none;
5653
+ --pf-v6-c-form-control--after--BorderStyle: none;
5654
+ cursor: not-allowed;
5872
5655
  }
5873
5656
 
5874
- .pf-v6-c-button:hover, .pf-v6-c-button:focus {
5875
- --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
5876
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
5877
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
5878
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
5879
- --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
5880
- --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
5881
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
5882
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
5883
- --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
5884
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
5885
- --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
5886
- --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
5887
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
5888
- --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
5889
- text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
5890
- text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
5891
- text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
5657
+ .pf-v6-c-form-control.pf-m-error {
5658
+ --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
5659
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
5660
+ --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
5661
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
5892
5662
  }
5893
5663
 
5894
- .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
5895
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
5896
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
5897
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
5898
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
5899
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
5664
+ @media (prefers-reduced-motion: no-preference) {
5665
+ .pf-v6-c-form-control.pf-m-error {
5666
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
5667
+ animation-name: pf-v6-global-danger-jiggle-motion;
5668
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
5669
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
5670
+ animation-fill-mode: both;
5671
+ }
5672
+ }
5673
+ .pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
5674
+ --pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
5675
+ --pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
5676
+ animation-name: pf-v6-global-fade-in;
5677
+ animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
5678
+ animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
5900
5679
  }
5901
5680
 
5902
- .pf-v6-c-button:active {
5903
- background-size: 100%;
5904
- transition-duration: 0s;
5681
+ .pf-v6-c-form-control.pf-m-error > textarea {
5682
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
5905
5683
  }
5906
5684
 
5907
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
5908
- pointer-events: none;
5685
+ .pf-v6-c-form-control.pf-m-error > input {
5686
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd));
5909
5687
  }
5910
5688
 
5911
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
5912
- color: var(--pf-v6-c-button--disabled--Color);
5913
- text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
5914
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
5689
+ .pf-v6-c-form-control.pf-m-error > select {
5690
+ 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));
5915
5691
  }
5916
5692
 
5917
- .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
5918
- border-color: transparent;
5693
+ .pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) {
5694
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
5919
5695
  }
5920
5696
 
5921
- .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
5922
- color: var(--pf-v6-c-button--disabled__icon--Color);
5697
+ .pf-v6-c-form-control.pf-m-success {
5698
+ --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
5699
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
5700
+ --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
5701
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
5923
5702
  }
5924
5703
 
5925
- .pf-v6-c-button.pf-m-aria-disabled {
5926
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
5927
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
5928
- cursor: default;
5704
+ .pf-v6-c-form-control.pf-m-success > textarea {
5705
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd));
5929
5706
  }
5930
5707
 
5931
- .pf-v6-c-button.pf-m-progress {
5932
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
5933
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
5708
+ .pf-v6-c-form-control.pf-m-success > input {
5709
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd));
5934
5710
  }
5935
5711
 
5936
- .pf-v6-c-button.pf-m-in-progress {
5937
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
5712
+ .pf-v6-c-form-control.pf-m-success > select {
5713
+ 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));
5938
5714
  }
5939
5715
 
5940
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
5941
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
5942
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
5716
+ .pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) {
5717
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
5943
5718
  }
5944
5719
 
5945
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
5946
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
5947
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
5720
+ .pf-v6-c-form-control.pf-m-warning {
5721
+ --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
5722
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
5723
+ --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
5724
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
5948
5725
  }
5949
5726
 
5950
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
5951
- opacity: 0;
5727
+ .pf-v6-c-form-control.pf-m-warning > textarea {
5728
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd));
5952
5729
  }
5953
5730
 
5954
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
5955
- animation-name: pf-v6-c-button-icon-notify;
5956
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
5957
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
5731
+ .pf-v6-c-form-control.pf-m-warning > input {
5732
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd));
5958
5733
  }
5959
5734
 
5960
- .pf-v6-c-button__icon {
5961
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
5962
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
5963
- color: var(--pf-v6-c-button__icon--Color);
5964
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
5965
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
5966
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
5967
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
5968
- rotate: var(--pf-v6-c-button__icon--Rotate);
5969
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
5735
+ .pf-v6-c-form-control.pf-m-warning > select {
5736
+ 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));
5970
5737
  }
5971
5738
 
5972
- .pf-v6-c-button__icon.pf-m-start {
5973
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
5739
+ .pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) {
5740
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
5974
5741
  }
5975
5742
 
5976
- .pf-v6-c-button__icon.pf-m-end {
5977
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
5743
+ .pf-v6-c-form-control:hover {
5744
+ --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
5745
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
5978
5746
  }
5979
5747
 
5980
- .pf-v6-c-button__icon-favorite,
5981
- .pf-v6-c-button__icon-favorited {
5982
- grid-area: 1/1/1/1;
5983
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
5984
- transition-property: opacity;
5748
+ .pf-v6-c-form-control.pf-m-icon {
5749
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
5985
5750
  }
5986
5751
 
5987
- .pf-v6-c-button__icon-favorite {
5988
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
5752
+ .pf-v6-c-form-control:has(select) {
5753
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart);
5754
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd);
5755
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
5756
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
5757
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
5758
+ background-color: var(--pf-v6-c-form-control--BackgroundColor);
5989
5759
  }
5990
5760
 
5991
- .pf-v6-c-button__icon-favorited {
5992
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
5761
+ .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
5762
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
5993
5763
  }
5994
5764
 
5995
- .pf-v6-c-button__progress {
5996
- position: absolute;
5997
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
5998
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
5999
- line-height: 1;
6000
- color: var(--pf-v6-c-button__progress--Color);
6001
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
5765
+ @-moz-document url-prefix() {
5766
+ .pf-v6-c-form-control:has(select) {
5767
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
5768
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
5769
+ }
5770
+ }
5771
+ .pf-v6-c-form-control.pf-m-placeholder > select {
5772
+ --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
6002
5773
  }
6003
5774
 
6004
- .pf-v6-c-button__progress .pf-v6-c-spinner {
6005
- --pf-v6-c-spinner--Color: currentcolor;
5775
+ .pf-v6-c-form-control.pf-m-placeholder > select * {
5776
+ color: var(--pf-v6-c-form-control--m-placeholder--child--Color);
6006
5777
  }
6007
5778
 
6008
- .pf-v6-c-button__text {
6009
- text-decoration: inherit;
5779
+ .pf-v6-c-form-control.pf-m-placeholder > select *:disabled {
5780
+ color: revert;
6010
5781
  }
6011
5782
 
6012
- .pf-v6-c-button__count {
6013
- display: inline-flex;
6014
- align-items: center;
5783
+ .pf-v6-c-form-control > textarea {
5784
+ width: 100%;
5785
+ height: 100%;
5786
+ vertical-align: bottom;
5787
+ resize: none;
6015
5788
  }
6016
5789
 
6017
- .pf-v6-c-button--hamburger-icon path {
6018
- fill: none;
6019
- stroke: currentcolor;
6020
- stroke-linecap: round;
6021
- stroke-linejoin: round;
6022
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
5790
+ .pf-v6-c-form-control.pf-m-resize-vertical {
5791
+ --pf-v6-c-form-control--Resize: vertical;
5792
+ overflow: auto;
6023
5793
  }
6024
5794
 
6025
- .pf-v6-c-button--hamburger-icon--top {
6026
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
5795
+ .pf-v6-c-form-control.pf-m-resize-horizontal {
5796
+ --pf-v6-c-form-control--Resize: horizontal;
5797
+ overflow: auto;
6027
5798
  }
6028
5799
 
6029
- .pf-v6-c-button--hamburger-icon--middle {
6030
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
5800
+ .pf-v6-c-form-control.pf-m-resize-both {
5801
+ --pf-v6-c-form-control--Resize: both;
5802
+ overflow: auto;
6031
5803
  }
6032
5804
 
6033
- .pf-v6-c-button--hamburger-icon--arrow {
6034
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
5805
+ .pf-v6-c-form-control__icon {
5806
+ font-size: var(--pf-v6-c-form-control__icon--FontSize);
5807
+ color: var(--pf-v6-c-form-control__icon--Color);
6035
5808
  }
6036
5809
 
6037
- .pf-v6-c-button--hamburger-icon--bottom {
6038
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
5810
+ .pf-v6-c-form-control__icon.pf-m-status {
5811
+ --pf-v6-c-form-control__icon--Color: var(--pf-v6-c-form-control__icon--m-status--Color);
6039
5812
  }
6040
5813
 
6041
- @keyframes pf-v6-c-button-icon-notify {
6042
- 33% {
6043
- transform: rotate(30deg);
6044
- }
6045
- 66% {
6046
- transform: rotate(-60deg);
6047
- }
5814
+ .pf-v6-c-form-control__toggle-icon {
5815
+ grid-row: 1/2;
5816
+ grid-column: 3;
5817
+ padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
5818
+ padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
5819
+ font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
5820
+ color: var(--pf-v6-c-form-control__toggle-icon--Color);
5821
+ pointer-events: none;
6048
5822
  }
6049
- @keyframes pf-v6-c-button-icon-favorited {
6050
- 50% {
6051
- scale: 1.5;
6052
- }
5823
+
5824
+ .pf-v6-c-form-control__utilities {
5825
+ display: flex;
5826
+ flex-wrap: nowrap;
5827
+ grid-row: 1/2;
5828
+ grid-column: 2;
5829
+ gap: var(--pf-v6-c-form-control__utilities--Gap);
5830
+ padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
5831
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
5832
+ pointer-events: none;
6053
5833
  }
5834
+
6054
5835
  .pf-v6-c-divider {
6055
5836
  --pf-v6-c-divider--Display: flex;
6056
5837
  --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
@@ -6367,834 +6148,893 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
6367
6148
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
6368
6149
  }
6369
6150
  }
6370
- .pf-v6-c-form-control {
6371
- --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
6372
- --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular);
6373
- --pf-v6-c-form-control--FontSize: var(--pf-t--global--font--size--body--default);
6374
- --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
6375
- --pf-v6-c-form-control--Resize: none;
6376
- --pf-v6-c-form-control--OutlineOffset: -6px;
6377
- --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
6378
- --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
6379
- --pf-v6-c-form-control--before--BorderStyle: solid;
6380
- --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
6381
- --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
6382
- --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6383
- --pf-v6-c-form-control--after--BorderStyle: solid;
6384
- --pf-v6-c-form-control--after--BorderColor: transparent;
6385
- --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
6386
- --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
6387
- --pf-v6-c-form-control--Width: 100%;
6388
- --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
6389
- --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
6390
- --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
6391
- --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base);
6392
- --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base);
6393
- --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6394
- --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6395
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6396
- --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6397
- --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
6398
- --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
6399
- --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd);
6400
- --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6401
- --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6402
- --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6403
- --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6404
- --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6405
- --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6406
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6407
- --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6408
- --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6409
- --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6410
- --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6411
- --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6412
- --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
6413
- --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
6414
- --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
6415
- --pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
6416
- --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
6417
- --pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
6418
- --pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
6419
- --pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
6420
- --pf-v6-c-form-control--m-placeholder--child--Color: var(--pf-t--global--text--color--regular);
6421
- --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
6422
- --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
6423
- --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent;
6424
- --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
6425
- --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
6426
- --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
6427
- --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
6428
- --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
6429
- --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
6430
- --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
6431
- --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize);
6432
- --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6433
- --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
6434
- --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial;
6435
- --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial;
6436
- --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));
6437
- --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));
6438
- --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));
6439
- --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6440
- --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
6441
- --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial;
6442
- --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial;
6443
- --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));
6444
- --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));
6445
- --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));
6446
- --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6447
- --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
6448
- --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial;
6449
- --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial;
6450
- --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
6451
- --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));
6452
- --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));
6453
- --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));
6454
- --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));
6455
- --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
6456
- --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
6457
- --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));
6458
- --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
6459
- --pf-v6-c-form-control--textarea--Height: auto;
6460
- --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
6461
- --pf-v6-c-form-control--textarea--PaddingBlockEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
6462
- --pf-v6-c-form-control--textarea--PaddingInlineEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
6463
- --pf-v6-c-form-control--textarea--PaddingInlineStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
6464
- --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
6465
- --pf-v6-c-form-control__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
6466
- --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
6467
- --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
6468
- --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
6469
- --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
6470
- --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
6471
- --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart);
6472
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6473
- --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));
6474
- --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0;
6475
- --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0;
6476
- --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
6477
- --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
6478
- --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
6151
+ .pf-v6-c-popover {
6152
+ --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
6153
+ --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
6154
+ --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
6155
+ --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
6156
+ --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
6157
+ --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
6158
+ --pf-v6-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
6159
+ --pf-v6-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
6160
+ --pf-v6-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
6161
+ --pf-v6-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
6162
+ --pf-v6-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
6163
+ --pf-v6-c-popover__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
6164
+ --pf-v6-c-popover__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
6165
+ --pf-v6-c-popover__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6166
+ --pf-v6-c-popover__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
6167
+ --pf-v6-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
6168
+ --pf-v6-c-popover__arrow--Width: 0.9375rem;
6169
+ --pf-v6-c-popover__arrow--Height: 0.9375rem;
6170
+ --pf-v6-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
6171
+ --pf-v6-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
6172
+ --pf-v6-c-popover__arrow--m-top--TranslateX: -50%;
6173
+ --pf-v6-c-popover__arrow--m-top--TranslateY: 50%;
6174
+ --pf-v6-c-popover__arrow--m-top--Rotate: 45deg;
6175
+ --pf-v6-c-popover__arrow--m-right--TranslateX: -50%;
6176
+ --pf-v6-c-popover__arrow--m-right--TranslateY: -50%;
6177
+ --pf-v6-c-popover__arrow--m-right--Rotate: 45deg;
6178
+ --pf-v6-c-popover__arrow--m-bottom--TranslateX: -50%;
6179
+ --pf-v6-c-popover__arrow--m-bottom--TranslateY: -50%;
6180
+ --pf-v6-c-popover__arrow--m-bottom--Rotate: 45deg;
6181
+ --pf-v6-c-popover__arrow--m-left--TranslateX: 50%;
6182
+ --pf-v6-c-popover__arrow--m-left--TranslateY: -50%;
6183
+ --pf-v6-c-popover__arrow--m-left--Rotate: 45deg;
6184
+ --pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart: var(--pf-t--global--border--radius--medium);
6185
+ --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium);
6186
+ --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium);
6187
+ --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
6188
+ --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default));
6189
+ --pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd);
6190
+ --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
6191
+ --pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
6192
+ --pf-v6-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
6193
+ --pf-v6-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
6194
+ --pf-v6-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--default);
6195
+ --pf-v6-c-popover__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
6196
+ --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
6197
+ --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
6198
+ --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
6479
6199
  }
6480
6200
 
6481
- .pf-v6-c-form-control {
6201
+ .pf-v6-c-popover {
6482
6202
  position: relative;
6483
- display: grid;
6484
- grid-template-columns: 1fr auto;
6485
- column-gap: var(--pf-v6-c-form-control--ColumnGap);
6486
- align-items: start;
6487
- width: var(--pf-v6-c-form-control--Width);
6488
- font-size: var(--pf-v6-c-form-control--FontSize);
6489
- line-height: var(--pf-v6-c-form-control--LineHeight);
6490
- resize: var(--pf-v6-c-form-control--Resize);
6491
- background-color: var(--pf-v6-c-form-control--BackgroundColor);
6492
- border-radius: var(--pf-v6-c-form-control--BorderRadius);
6493
- }
6494
-
6495
- .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
6496
- position: absolute;
6497
- inset: 0;
6498
- pointer-events: none;
6499
- content: "";
6500
- }
6501
-
6502
- .pf-v6-c-form-control::before {
6503
- border-color: var(--pf-v6-c-form-control--before--BorderColor);
6504
- border-style: var(--pf-v6-c-form-control--before--BorderStyle);
6505
- border-width: var(--pf-v6-c-form-control--before--BorderWidth);
6506
- border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
6507
- }
6508
-
6509
- .pf-v6-c-form-control::after {
6510
- border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle) var(--pf-v6-c-form-control--after--BorderColor);
6511
- border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
6203
+ min-width: var(--pf-v6-c-popover--MinWidth);
6204
+ max-width: var(--pf-v6-c-popover--MaxWidth);
6205
+ font-size: var(--pf-v6-c-popover--FontSize);
6206
+ border-radius: var(--pf-v6-c-popover--BorderRadius);
6207
+ box-shadow: var(--pf-v6-c-popover--BoxShadow);
6512
6208
  }
6513
6209
 
6514
- .pf-v6-c-form-control > :is(input, select, textarea) {
6515
- grid-row: 1/2;
6516
- grid-column: 1/-1;
6517
- padding-block-start: var(--pf-v6-c-form-control--PaddingBlockStart);
6518
- padding-block-end: var(--pf-v6-c-form-control--PaddingBlockEnd);
6519
- padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
6520
- padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
6521
- color: var(--pf-v6-c-form-control--Color);
6522
- appearance: none;
6523
- background-color: transparent;
6524
- border: none;
6525
- border-radius: var(--pf-v6-c-form-control--BorderRadius);
6526
- outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
6210
+ .pf-v6-c-popover.pf-m-no-padding {
6211
+ --pf-v6-c-popover__content--PaddingBlockStart: 0px;
6212
+ --pf-v6-c-popover__content--PaddingInlineEnd: 0px;
6213
+ --pf-v6-c-popover__content--PaddingBlockEnd: 0px;
6214
+ --pf-v6-c-popover__content--PaddingInlineStart: 0px;
6527
6215
  }
6528
6216
 
6529
- .pf-v6-c-form-control > ::placeholder {
6530
- color: var(--pf-v6-c-form-control--m-placeholder--Color);
6217
+ .pf-v6-c-popover.pf-m-width-auto {
6218
+ --pf-v6-c-popover--MinWidth: auto;
6219
+ --pf-v6-c-popover--MaxWidth: none;
6531
6220
  }
6532
6221
 
6533
- .pf-v6-c-form-control > :is(input, select) {
6534
- text-overflow: ellipsis;
6222
+ .pf-v6-c-popover:is(.pf-m-top,
6223
+ .pf-m-top-left,
6224
+ .pf-m-top-right) {
6225
+ --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover--m-top--InsetBlockEnd, 0);
6226
+ --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-top--InsetInlineStart, 50%);
6227
+ --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-top--TranslateX);
6228
+ --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY);
6229
+ --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-top--Rotate);
6535
6230
  }
6536
6231
 
6537
- .pf-v6-c-form-control:has(input) {
6538
- --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
6539
- --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
6540
- --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart);
6541
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
6542
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd);
6232
+ .pf-v6-c-popover:is(.pf-m-bottom,
6233
+ .pf-m-bottom-left,
6234
+ .pf-m-bottom-right) {
6235
+ --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-bottom--InsetBlockStart, 0);
6236
+ --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-bottom--InsetInlineStart, 50%);
6237
+ --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-bottom--TranslateX);
6238
+ --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-bottom--TranslateY);
6239
+ --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-bottom--Rotate);
6543
6240
  }
6544
6241
 
6545
- .pf-v6-c-form-control.pf-m-textarea {
6546
- padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset);
6547
- padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset);
6548
- padding-inline-start: var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset);
6549
- padding-inline-end: var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset);
6242
+ .pf-v6-c-popover:is(.pf-m-left,
6243
+ .pf-m-left-top,
6244
+ .pf-m-left-bottom) {
6245
+ --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-left--InsetBlockStart, 50%);
6246
+ --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover--m-left--InsetInlineEnd, 0);
6247
+ --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX);
6248
+ --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-left--TranslateY);
6249
+ --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-left--Rotate);
6550
6250
  }
6551
6251
 
6552
- .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 {
6553
- --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));
6252
+ .pf-v6-c-popover:is(.pf-m-right,
6253
+ .pf-m-right-top,
6254
+ .pf-m-right-bottom) {
6255
+ --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-right--InsetBlockStart, 50%);
6256
+ --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-right--InsetInlineStart, 0);
6257
+ --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-right--TranslateX);
6258
+ --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-right--TranslateY);
6259
+ --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-right--Rotate);
6554
6260
  }
6555
6261
 
6556
- .pf-v6-c-form-control.pf-m-textarea:has(textarea) {
6557
- --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
6558
- --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
6559
- --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
6560
- --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));
6561
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
6262
+ .pf-v6-c-popover:is(.pf-m-left-top,
6263
+ .pf-m-right-top) {
6264
+ --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart);
6265
+ --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY);
6562
6266
  }
6563
6267
 
6564
- .pf-v6-c-form-control.pf-m-textarea > textarea {
6565
- outline-offset: 0;
6566
- scrollbar-gutter: stable;
6268
+ .pf-v6-c-popover:is(.pf-m-left-bottom,
6269
+ .pf-m-right-bottom) {
6270
+ --pf-v6-c-popover__arrow--InsetBlockStart: auto;
6271
+ --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd);
6567
6272
  }
6568
6273
 
6569
- .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
6570
- padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
6274
+ .pf-v6-c-popover:is(.pf-m-top-left,
6275
+ .pf-m-bottom-left) {
6276
+ --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover__arrow--m-block-left--InsetInlineStart);
6277
+ --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX);
6571
6278
  }
6572
6279
 
6573
- .pf-v6-c-form-control.pf-m-readonly {
6574
- --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
6575
- --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
6280
+ .pf-v6-c-popover:is(.pf-m-top-right,
6281
+ .pf-m-bottom-right) {
6282
+ --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd);
6283
+ --pf-v6-c-popover__arrow--InsetInlineStart: auto;
6576
6284
  }
6577
6285
 
6578
- .pf-v6-c-form-control.pf-m-readonly:hover {
6579
- --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
6286
+ .pf-v6-c-popover.pf-m-danger {
6287
+ --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-danger__title-icon--Color);
6580
6288
  }
6581
6289
 
6582
- .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
6583
- --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
6290
+ .pf-v6-c-popover.pf-m-warning {
6291
+ --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-warning__title-icon--Color);
6584
6292
  }
6585
6293
 
6586
- .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
6587
- --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
6588
- --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
6589
- --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
6590
- --pf-v6-c-form-control--before--BorderStyle: none;
6591
- --pf-v6-c-form-control--after--BorderStyle: none;
6592
- --pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset);
6294
+ .pf-v6-c-popover.pf-m-success {
6295
+ --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-success__title-icon--Color);
6593
6296
  }
6594
6297
 
6595
- .pf-v6-c-form-control.pf-m-expanded {
6596
- --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
6597
- --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth);
6298
+ .pf-v6-c-popover.pf-m-custom {
6299
+ --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-custom__title-icon--Color);
6598
6300
  }
6599
6301
 
6600
- .pf-v6-c-form-control.pf-m-disabled {
6601
- --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-disabled--BackgroundColor);
6602
- --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
6603
- --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
6604
- --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
6605
- --pf-v6-c-form-control--before--BorderStyle: none;
6606
- --pf-v6-c-form-control--after--BorderStyle: none;
6607
- cursor: not-allowed;
6302
+ .pf-v6-c-popover.pf-m-info {
6303
+ --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-info__title-icon--Color);
6608
6304
  }
6609
6305
 
6610
- .pf-v6-c-form-control.pf-m-error {
6611
- --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
6612
- --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
6613
- --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
6614
- --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
6306
+ .pf-v6-c-popover__content {
6307
+ position: relative;
6308
+ padding-block-start: var(--pf-v6-c-popover__content--PaddingBlockStart);
6309
+ padding-block-end: var(--pf-v6-c-popover__content--PaddingBlockEnd);
6310
+ padding-inline-start: var(--pf-v6-c-popover__content--PaddingInlineStart);
6311
+ padding-inline-end: var(--pf-v6-c-popover__content--PaddingInlineEnd);
6312
+ background-color: var(--pf-v6-c-popover__content--BackgroundColor);
6313
+ border-radius: var(--pf-v6-c-popover__content--BorderRadius);
6615
6314
  }
6616
6315
 
6617
- @media (prefers-reduced-motion: no-preference) {
6618
- .pf-v6-c-form-control.pf-m-error {
6619
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
6620
- animation-name: pf-v6-global-danger-jiggle-motion;
6621
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
6622
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
6623
- animation-fill-mode: both;
6624
- }
6316
+ .pf-v6-c-popover__close {
6317
+ position: absolute;
6318
+ inset-block-start: var(--pf-v6-c-popover__close--InsetBlockStart);
6319
+ inset-inline-end: var(--pf-v6-c-popover__close--InsetInlineEnd);
6625
6320
  }
6626
- .pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
6627
- --pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
6628
- --pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
6629
- animation-name: pf-v6-global-fade-in;
6630
- animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
6631
- animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
6321
+
6322
+ .pf-v6-c-popover__close + * {
6323
+ padding-inline-end: var(--pf-v6-c-popover__close--sibling--PaddingInlineEnd);
6632
6324
  }
6633
6325
 
6634
- .pf-v6-c-form-control.pf-m-error > textarea {
6635
- padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
6326
+ .pf-v6-c-popover__arrow {
6327
+ position: absolute;
6328
+ top: var(--pf-v6-c-popover__arrow--InsetBlockStart, auto);
6329
+ right: var(--pf-v6-c-popover__arrow--InsetInlineEnd, auto);
6330
+ bottom: var(--pf-v6-c-popover__arrow--InsetBlockEnd, auto);
6331
+ left: var(--pf-v6-c-popover__arrow--InsetInlineStart, auto);
6332
+ width: var(--pf-v6-c-popover__arrow--Width);
6333
+ height: var(--pf-v6-c-popover__arrow--Height);
6334
+ pointer-events: none;
6335
+ background-color: var(--pf-v6-c-popover__arrow--BackgroundColor);
6336
+ box-shadow: var(--pf-v6-c-popover__arrow--BoxShadow);
6337
+ transform: translateX(var(--pf-v6-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-popover__arrow--Rotate, 0));
6636
6338
  }
6637
6339
 
6638
- .pf-v6-c-form-control.pf-m-error > input {
6639
- padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd));
6340
+ .pf-v6-c-popover__header {
6341
+ margin-block-end: var(--pf-v6-c-popover__header--MarginBlockEnd);
6640
6342
  }
6641
6343
 
6642
- .pf-v6-c-form-control.pf-m-error > select {
6643
- 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));
6344
+ .pf-v6-c-popover__title {
6345
+ display: flex;
6346
+ flex: 0 0 auto;
6644
6347
  }
6645
6348
 
6646
- .pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) {
6647
- padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
6349
+ .pf-v6-c-popover__title-icon {
6350
+ margin-inline-end: var(--pf-v6-c-popover__title-icon--MarginInlineEnd);
6351
+ font-size: var(--pf-v6-c-popover__title-icon--FontSize);
6352
+ color: var(--pf-v6-c-popover__title-icon--Color);
6648
6353
  }
6649
6354
 
6650
- .pf-v6-c-form-control.pf-m-success {
6651
- --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
6652
- --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
6653
- --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
6654
- --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
6355
+ .pf-v6-c-popover__title-text {
6356
+ min-width: 0;
6357
+ font-size: var(--pf-v6-c-popover__title-text--FontSize);
6358
+ font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
6359
+ color: var(--pf-v6-c-popover__title-text--Color);
6360
+ overflow-wrap: break-word;
6655
6361
  }
6656
6362
 
6657
- .pf-v6-c-form-control.pf-m-success > textarea {
6658
- padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd));
6363
+ .pf-v6-c-popover__body {
6364
+ word-wrap: break-word;
6659
6365
  }
6660
6366
 
6661
- .pf-v6-c-form-control.pf-m-success > input {
6662
- padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd));
6367
+ .pf-v6-c-popover__footer {
6368
+ margin-block-start: var(--pf-v6-c-popover__footer--MarginBlockStart);
6663
6369
  }
6664
6370
 
6665
- .pf-v6-c-form-control.pf-m-success > select {
6666
- 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));
6371
+ .pf-v6-c-menu-toggle {
6372
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
6373
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
6374
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
6375
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
6376
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
6377
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
6378
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
6379
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
6380
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
6381
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
6382
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
6383
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
6384
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
6385
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
6386
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6387
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
6388
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
6389
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
6390
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
6391
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
6392
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
6393
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
6394
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
6395
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
6396
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
6397
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
6398
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
6399
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
6400
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
6401
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
6402
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
6403
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
6404
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
6405
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
6406
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
6407
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
6408
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
6409
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
6410
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
6411
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
6412
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
6413
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
6414
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
6415
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
6416
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
6417
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
6418
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
6419
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
6420
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
6421
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
6422
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
6423
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
6424
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
6425
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
6426
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
6427
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
6428
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
6429
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
6430
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
6431
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
6432
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
6433
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
6434
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
6435
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
6436
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
6437
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
6438
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
6439
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
6440
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
6441
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
6442
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
6443
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
6444
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
6445
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
6446
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
6447
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
6448
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
6449
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
6450
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
6451
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
6452
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
6453
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
6454
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
6455
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
6456
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
6457
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
6458
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
6459
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
6460
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
6461
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
6462
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
6463
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
6464
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
6465
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
6466
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
6467
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
6468
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
6469
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
6470
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
6471
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
6472
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
6473
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
6474
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
6475
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
6476
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
6477
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
6478
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
6479
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
6480
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
6481
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
6482
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
6483
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
6484
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
6485
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
6486
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
6487
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
6488
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
6489
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
6490
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
6491
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
6492
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
6493
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
6494
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
6495
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
6496
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
6497
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
6498
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
6499
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
6500
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
6501
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
6502
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
6503
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
6504
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
6505
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
6506
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
6507
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
6508
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
6509
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
6510
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
6511
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
6512
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
6513
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
6514
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
6515
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
6667
6516
  }
6668
6517
 
6669
- .pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) {
6670
- padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
6518
+ .pf-v6-c-menu-toggle {
6519
+ position: relative;
6520
+ display: inline-flex;
6521
+ gap: var(--pf-v6-c-menu-toggle--Gap);
6522
+ align-items: center;
6523
+ justify-content: center;
6524
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
6525
+ max-width: 100%;
6526
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
6527
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
6528
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
6529
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
6530
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
6531
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
6532
+ color: var(--pf-v6-c-menu-toggle--Color);
6533
+ cursor: pointer;
6534
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
6535
+ border: 0;
6536
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
6537
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
6538
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
6671
6539
  }
6672
6540
 
6673
- .pf-v6-c-form-control.pf-m-warning {
6674
- --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
6675
- --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
6676
- --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
6677
- --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
6541
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
6542
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
6678
6543
  }
6679
6544
 
6680
- .pf-v6-c-form-control.pf-m-warning > textarea {
6681
- padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd));
6545
+ .pf-v6-c-menu-toggle::before {
6546
+ position: absolute;
6547
+ inset-block-start: 0;
6548
+ inset-block-end: 0;
6549
+ inset-inline-start: 0;
6550
+ inset-inline-end: 0;
6551
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
6552
+ pointer-events: none;
6553
+ content: "";
6554
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
6555
+ transition: inherit;
6682
6556
  }
6683
6557
 
6684
- .pf-v6-c-form-control.pf-m-warning > input {
6685
- padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd));
6558
+ .pf-v6-c-menu-toggle.pf-m-primary {
6559
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
6560
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
6561
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
6562
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
6563
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
6564
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
6565
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
6566
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
6567
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
6568
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
6569
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
6570
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
6571
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
6572
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
6573
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
6574
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
6575
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
6686
6576
  }
6687
6577
 
6688
- .pf-v6-c-form-control.pf-m-warning > select {
6689
- 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));
6578
+ .pf-v6-c-menu-toggle.pf-m-secondary {
6579
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
6580
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
6581
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
6582
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
6583
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
6584
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
6585
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
6586
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
6587
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
6588
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
6589
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
6590
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
6591
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
6592
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
6593
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
6594
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
6595
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
6690
6596
  }
6691
6597
 
6692
- .pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) {
6693
- padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
6598
+ .pf-v6-c-menu-toggle.pf-m-full-height {
6599
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
6600
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
6601
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
6602
+ align-items: center;
6603
+ height: 100%;
6694
6604
  }
6695
6605
 
6696
- .pf-v6-c-form-control:hover {
6697
- --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
6698
- --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
6606
+ .pf-v6-c-menu-toggle.pf-m-full-width {
6607
+ width: 100%;
6699
6608
  }
6700
6609
 
6701
- .pf-v6-c-form-control.pf-m-icon {
6702
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
6610
+ .pf-v6-c-menu-toggle.pf-m-plain {
6611
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
6612
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
6613
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
6614
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
6615
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
6616
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
6617
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
6618
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
6619
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
6620
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
6621
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
6622
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
6623
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
6624
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
6625
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
6703
6626
  }
6704
6627
 
6705
- .pf-v6-c-form-control:has(select) {
6706
- --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart);
6707
- --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd);
6708
- --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
6709
- --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
6710
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
6711
- background-color: var(--pf-v6-c-form-control--BackgroundColor);
6628
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
6629
+ border: none;
6712
6630
  }
6713
6631
 
6714
- .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
6715
- padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
6632
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
6633
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
6634
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
6635
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
6636
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
6637
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
6638
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
6639
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
6640
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
6641
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
6716
6642
  }
6717
6643
 
6718
- @-moz-document url-prefix() {
6719
- .pf-v6-c-form-control:has(select) {
6720
- --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
6721
- --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
6722
- }
6723
- }
6724
- .pf-v6-c-form-control.pf-m-placeholder > select {
6725
- --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
6644
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
6645
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
6646
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
6647
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
6648
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
6649
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
6726
6650
  }
6727
6651
 
6728
- .pf-v6-c-form-control.pf-m-placeholder > select * {
6729
- color: var(--pf-v6-c-form-control--m-placeholder--child--Color);
6652
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
6653
+ border: 0;
6730
6654
  }
6731
6655
 
6732
- .pf-v6-c-form-control.pf-m-placeholder > select *:disabled {
6733
- color: revert;
6656
+ .pf-v6-c-menu-toggle.pf-m-small {
6657
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
6658
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
6659
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
6660
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
6661
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
6662
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
6663
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
6664
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
6734
6665
  }
6735
6666
 
6736
- .pf-v6-c-form-control > textarea {
6737
- width: 100%;
6738
- height: 100%;
6739
- vertical-align: bottom;
6740
- resize: none;
6667
+ .pf-v6-c-menu-toggle.pf-m-success {
6668
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
6669
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
6741
6670
  }
6742
6671
 
6743
- .pf-v6-c-form-control.pf-m-resize-vertical {
6744
- --pf-v6-c-form-control--Resize: vertical;
6745
- overflow: auto;
6672
+ .pf-v6-c-menu-toggle.pf-m-warning {
6673
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
6674
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
6746
6675
  }
6747
6676
 
6748
- .pf-v6-c-form-control.pf-m-resize-horizontal {
6749
- --pf-v6-c-form-control--Resize: horizontal;
6750
- overflow: auto;
6677
+ .pf-v6-c-menu-toggle.pf-m-danger {
6678
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
6679
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
6751
6680
  }
6752
6681
 
6753
- .pf-v6-c-form-control.pf-m-resize-both {
6754
- --pf-v6-c-form-control--Resize: both;
6755
- overflow: auto;
6682
+ @media screen and (prefers-reduced-motion: no-preference) {
6683
+ .pf-v6-c-menu-toggle.pf-m-danger {
6684
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
6685
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
6686
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
6687
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
6688
+ animation-fill-mode: both;
6689
+ }
6756
6690
  }
6757
-
6758
- .pf-v6-c-form-control__icon {
6759
- font-size: var(--pf-v6-c-form-control__icon--FontSize);
6760
- color: var(--pf-v6-c-form-control__icon--Color);
6691
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
6692
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
6693
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
6694
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
6761
6695
  }
6762
6696
 
6763
- .pf-v6-c-form-control__icon.pf-m-status {
6764
- --pf-v6-c-form-control__icon--Color: var(--pf-v6-c-form-control__icon--m-status--Color);
6697
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
6698
+ from {
6699
+ opacity: 0;
6700
+ }
6701
+ to {
6702
+ opacity: 1;
6703
+ }
6765
6704
  }
6766
-
6767
- .pf-v6-c-form-control__toggle-icon {
6768
- grid-row: 1/2;
6769
- grid-column: 3;
6770
- padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
6771
- padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
6772
- font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
6773
- color: var(--pf-v6-c-form-control__toggle-icon--Color);
6774
- pointer-events: none;
6705
+ .pf-v6-c-menu-toggle.pf-m-settings {
6706
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
6707
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
6708
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
6709
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
6710
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
6711
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
6712
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
6775
6713
  }
6776
6714
 
6777
- .pf-v6-c-form-control__utilities {
6778
- display: flex;
6779
- flex-wrap: nowrap;
6780
- grid-row: 1/2;
6781
- grid-column: 2;
6782
- gap: var(--pf-v6-c-form-control__utilities--Gap);
6783
- padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
6784
- padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
6785
- pointer-events: none;
6715
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
6716
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
6786
6717
  }
6787
6718
 
6788
- .pf-v6-c-action-list {
6789
- --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
6790
- --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
6791
- --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
6792
- --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
6719
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
6720
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
6721
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
6722
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
6723
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
6724
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
6793
6725
  }
6794
6726
 
6795
- .pf-v6-c-action-list,
6796
- .pf-v6-c-action-list__group {
6797
- display: flex;
6798
- align-items: start;
6727
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
6728
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
6729
+ pointer-events: none;
6799
6730
  }
6800
6731
 
6801
- .pf-v6-c-action-list {
6802
- row-gap: var(--pf-v6-c-action-list--RowGap);
6803
- column-gap: var(--pf-v6-c-action-list--ColumnGap);
6732
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
6733
+ syntax: "<length>";
6734
+ inherits: false;
6735
+ initial-value: 0;
6804
6736
  }
6805
-
6806
- .pf-v6-c-action-list.pf-m-icons {
6807
- --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
6808
- column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
6737
+ @media (prefers-reduced-motion: no-preference) {
6738
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
6739
+ 33% {
6740
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
6741
+ }
6742
+ 66% {
6743
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
6744
+ }
6745
+ }
6809
6746
  }
6810
-
6811
- .pf-v6-c-action-list__group {
6812
- row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
6813
- column-gap: var(--pf-v6-c-action-list__group--ColumnGap);
6747
+ .pf-v6-c-menu-toggle.pf-m-split-button {
6748
+ --pf-v6-c-menu-toggle--Gap: 0;
6749
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
6750
+ padding: 0;
6814
6751
  }
6815
6752
 
6816
- .pf-v6-c-action-list__group.pf-m-icons {
6817
- column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
6753
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
6754
+ position: relative;
6755
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
6756
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
6757
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
6758
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
6818
6759
  }
6819
6760
 
6820
- .pf-v6-c-popover {
6821
- --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
6822
- --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
6823
- --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
6824
- --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
6825
- --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
6826
- --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
6827
- --pf-v6-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
6828
- --pf-v6-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
6829
- --pf-v6-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
6830
- --pf-v6-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
6831
- --pf-v6-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
6832
- --pf-v6-c-popover__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
6833
- --pf-v6-c-popover__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
6834
- --pf-v6-c-popover__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6835
- --pf-v6-c-popover__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
6836
- --pf-v6-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
6837
- --pf-v6-c-popover__arrow--Width: 0.9375rem;
6838
- --pf-v6-c-popover__arrow--Height: 0.9375rem;
6839
- --pf-v6-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
6840
- --pf-v6-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
6841
- --pf-v6-c-popover__arrow--m-top--TranslateX: -50%;
6842
- --pf-v6-c-popover__arrow--m-top--TranslateY: 50%;
6843
- --pf-v6-c-popover__arrow--m-top--Rotate: 45deg;
6844
- --pf-v6-c-popover__arrow--m-right--TranslateX: -50%;
6845
- --pf-v6-c-popover__arrow--m-right--TranslateY: -50%;
6846
- --pf-v6-c-popover__arrow--m-right--Rotate: 45deg;
6847
- --pf-v6-c-popover__arrow--m-bottom--TranslateX: -50%;
6848
- --pf-v6-c-popover__arrow--m-bottom--TranslateY: -50%;
6849
- --pf-v6-c-popover__arrow--m-bottom--Rotate: 45deg;
6850
- --pf-v6-c-popover__arrow--m-left--TranslateX: 50%;
6851
- --pf-v6-c-popover__arrow--m-left--TranslateY: -50%;
6852
- --pf-v6-c-popover__arrow--m-left--Rotate: 45deg;
6853
- --pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart: var(--pf-t--global--border--radius--medium);
6854
- --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium);
6855
- --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium);
6856
- --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
6857
- --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default));
6858
- --pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd);
6859
- --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
6860
- --pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
6861
- --pf-v6-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
6862
- --pf-v6-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
6863
- --pf-v6-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--default);
6864
- --pf-v6-c-popover__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
6865
- --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
6866
- --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
6867
- --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
6761
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
6762
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
6763
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
6868
6764
  }
6869
6765
 
6870
- .pf-v6-c-popover {
6871
- position: relative;
6872
- min-width: var(--pf-v6-c-popover--MinWidth);
6873
- max-width: var(--pf-v6-c-popover--MaxWidth);
6874
- font-size: var(--pf-v6-c-popover--FontSize);
6875
- border-radius: var(--pf-v6-c-popover--BorderRadius);
6876
- box-shadow: var(--pf-v6-c-popover--BoxShadow);
6766
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
6767
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
6768
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
6877
6769
  }
6878
6770
 
6879
- .pf-v6-c-popover.pf-m-no-padding {
6880
- --pf-v6-c-popover__content--PaddingBlockStart: 0px;
6881
- --pf-v6-c-popover__content--PaddingInlineEnd: 0px;
6882
- --pf-v6-c-popover__content--PaddingBlockEnd: 0px;
6883
- --pf-v6-c-popover__content--PaddingInlineStart: 0px;
6771
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
6772
+ --pf-v6-c-check__label--Color: currentcolor;
6773
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
6774
+ align-items: center;
6775
+ align-self: stretch;
6884
6776
  }
6885
6777
 
6886
- .pf-v6-c-popover.pf-m-width-auto {
6887
- --pf-v6-c-popover--MinWidth: auto;
6888
- --pf-v6-c-popover--MaxWidth: none;
6778
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
6779
+ --pf-v6-c-check__input--TranslateY: 0;
6780
+ align-self: center;
6889
6781
  }
6890
6782
 
6891
- .pf-v6-c-popover:is(.pf-m-top,
6892
- .pf-m-top-left,
6893
- .pf-m-top-right) {
6894
- --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover--m-top--InsetBlockEnd, 0);
6895
- --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-top--InsetInlineStart, 50%);
6896
- --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-top--TranslateX);
6897
- --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY);
6898
- --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-top--Rotate);
6783
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
6784
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
6899
6785
  }
6900
6786
 
6901
- .pf-v6-c-popover:is(.pf-m-bottom,
6902
- .pf-m-bottom-left,
6903
- .pf-m-bottom-right) {
6904
- --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-bottom--InsetBlockStart, 0);
6905
- --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-bottom--InsetInlineStart, 50%);
6906
- --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-bottom--TranslateX);
6907
- --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-bottom--TranslateY);
6908
- --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-bottom--Rotate);
6787
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
6788
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
6909
6789
  }
6910
6790
 
6911
- .pf-v6-c-popover:is(.pf-m-left,
6912
- .pf-m-left-top,
6913
- .pf-m-left-bottom) {
6914
- --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-left--InsetBlockStart, 50%);
6915
- --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover--m-left--InsetInlineEnd, 0);
6916
- --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX);
6917
- --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-left--TranslateY);
6918
- --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-left--Rotate);
6791
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
6792
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
6793
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
6919
6794
  }
6920
6795
 
6921
- .pf-v6-c-popover:is(.pf-m-right,
6922
- .pf-m-right-top,
6923
- .pf-m-right-bottom) {
6924
- --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-right--InsetBlockStart, 50%);
6925
- --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-right--InsetInlineStart, 0);
6926
- --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-right--TranslateX);
6927
- --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-right--TranslateY);
6928
- --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-right--Rotate);
6796
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
6797
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
6798
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
6929
6799
  }
6930
6800
 
6931
- .pf-v6-c-popover:is(.pf-m-left-top,
6932
- .pf-m-right-top) {
6933
- --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart);
6934
- --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY);
6801
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
6802
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
6803
+ }
6804
+
6805
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
6806
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
6935
6807
  }
6936
6808
 
6937
- .pf-v6-c-popover:is(.pf-m-left-bottom,
6938
- .pf-m-right-bottom) {
6939
- --pf-v6-c-popover__arrow--InsetBlockStart: auto;
6940
- --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd);
6809
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
6810
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
6811
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
6812
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
6941
6813
  }
6942
6814
 
6943
- .pf-v6-c-popover:is(.pf-m-top-left,
6944
- .pf-m-bottom-left) {
6945
- --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover__arrow--m-block-left--InsetInlineStart);
6946
- --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX);
6815
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
6816
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
6817
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
6818
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
6947
6819
  }
6948
6820
 
6949
- .pf-v6-c-popover:is(.pf-m-top-right,
6950
- .pf-m-bottom-right) {
6951
- --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd);
6952
- --pf-v6-c-popover__arrow--InsetInlineStart: auto;
6821
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
6822
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
6953
6823
  }
6954
6824
 
6955
- .pf-v6-c-popover.pf-m-danger {
6956
- --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-danger__title-icon--Color);
6825
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
6826
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
6827
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
6828
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
6957
6829
  }
6958
6830
 
6959
- .pf-v6-c-popover.pf-m-warning {
6960
- --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-warning__title-icon--Color);
6831
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
6832
+ content: none;
6961
6833
  }
6962
6834
 
6963
- .pf-v6-c-popover.pf-m-success {
6964
- --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-success__title-icon--Color);
6835
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
6836
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
6837
+ --pf-v6-c-menu-toggle--Gap: 0;
6838
+ align-items: stretch;
6839
+ padding: 0;
6965
6840
  }
6966
6841
 
6967
- .pf-v6-c-popover.pf-m-custom {
6968
- --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-custom__title-icon--Color);
6842
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
6843
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
6969
6844
  }
6970
6845
 
6971
- .pf-v6-c-popover.pf-m-info {
6972
- --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-info__title-icon--Color);
6846
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
6847
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
6848
+ display: flex;
6849
+ align-items: stretch;
6973
6850
  }
6974
6851
 
6975
- .pf-v6-c-popover__content {
6976
- position: relative;
6977
- padding-block-start: var(--pf-v6-c-popover__content--PaddingBlockStart);
6978
- padding-block-end: var(--pf-v6-c-popover__content--PaddingBlockEnd);
6979
- padding-inline-start: var(--pf-v6-c-popover__content--PaddingInlineStart);
6980
- padding-inline-end: var(--pf-v6-c-popover__content--PaddingInlineEnd);
6981
- background-color: var(--pf-v6-c-popover__content--BackgroundColor);
6982
- border-radius: var(--pf-v6-c-popover__content--BorderRadius);
6852
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
6853
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
6854
+ flex: 1;
6983
6855
  }
6984
6856
 
6985
- .pf-v6-c-popover__close {
6986
- position: absolute;
6987
- inset-block-start: var(--pf-v6-c-popover__close--InsetBlockStart);
6988
- inset-inline-end: var(--pf-v6-c-popover__close--InsetInlineEnd);
6857
+ .pf-v6-c-menu-toggle__button {
6858
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
6859
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
6860
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
6861
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
6862
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
6863
+ color: inherit;
6864
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
6865
+ border: 0;
6989
6866
  }
6990
6867
 
6991
- .pf-v6-c-popover__close + * {
6992
- padding-inline-end: var(--pf-v6-c-popover__close--sibling--PaddingInlineEnd);
6868
+ .pf-v6-c-menu-toggle__button.pf-m-text {
6869
+ display: inline-flex;
6870
+ align-items: baseline;
6993
6871
  }
6994
6872
 
6995
- .pf-v6-c-popover__arrow {
6996
- position: absolute;
6997
- top: var(--pf-v6-c-popover__arrow--InsetBlockStart, auto);
6998
- right: var(--pf-v6-c-popover__arrow--InsetInlineEnd, auto);
6999
- bottom: var(--pf-v6-c-popover__arrow--InsetBlockEnd, auto);
7000
- left: var(--pf-v6-c-popover__arrow--InsetInlineStart, auto);
7001
- width: var(--pf-v6-c-popover__arrow--Width);
7002
- height: var(--pf-v6-c-popover__arrow--Height);
7003
- pointer-events: none;
7004
- background-color: var(--pf-v6-c-popover__arrow--BackgroundColor);
7005
- box-shadow: var(--pf-v6-c-popover__arrow--BoxShadow);
7006
- transform: translateX(var(--pf-v6-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-popover__arrow--Rotate, 0));
6873
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
6874
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
6875
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
7007
6876
  }
7008
6877
 
7009
- .pf-v6-c-popover__header {
7010
- margin-block-end: var(--pf-v6-c-popover__header--MarginBlockEnd);
6878
+ .pf-v6-c-menu-toggle__text {
6879
+ overflow: hidden;
6880
+ text-overflow: ellipsis;
6881
+ white-space: nowrap;
6882
+ min-width: 0;
7011
6883
  }
7012
6884
 
7013
- .pf-v6-c-popover__title {
6885
+ .pf-v6-c-menu-toggle__count {
7014
6886
  display: flex;
7015
- flex: 0 0 auto;
6887
+ flex-wrap: nowrap;
7016
6888
  }
7017
6889
 
7018
- .pf-v6-c-popover__title-icon {
7019
- margin-inline-end: var(--pf-v6-c-popover__title-icon--MarginInlineEnd);
7020
- font-size: var(--pf-v6-c-popover__title-icon--FontSize);
7021
- color: var(--pf-v6-c-popover__title-icon--Color);
6890
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
6891
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
6892
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
6893
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
6894
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
7022
6895
  }
7023
6896
 
7024
- .pf-v6-c-popover__title-text {
7025
- min-width: 0;
7026
- font-size: var(--pf-v6-c-popover__title-text--FontSize);
7027
- font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
7028
- color: var(--pf-v6-c-popover__title-text--Color);
7029
- overflow-wrap: break-word;
6897
+ .pf-v6-c-menu-toggle__icon {
6898
+ flex-shrink: 0;
6899
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
6900
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
6901
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
6902
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
7030
6903
  }
7031
6904
 
7032
- .pf-v6-c-popover__body {
7033
- word-wrap: break-word;
6905
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
6906
+ vertical-align: middle;
7034
6907
  }
7035
6908
 
7036
- .pf-v6-c-popover__footer {
7037
- margin-block-start: var(--pf-v6-c-popover__footer--MarginBlockStart);
6909
+ .pf-v6-c-menu-toggle__controls {
6910
+ display: flex;
6911
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
6912
+ align-items: center;
6913
+ justify-content: center;
6914
+ margin-inline-start: auto;
7038
6915
  }
7039
6916
 
7040
- .pf-v6-c-spinner {
7041
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
7042
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
7043
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
7044
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
7045
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
7046
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
7047
- --pf-v6-c-spinner--StrokeWidth: 10;
7048
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
7049
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
7050
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
7051
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
7052
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
7053
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
7054
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
7055
- --pf-v6-c-spinner--m-inline--diameter: 1em;
6917
+ .pf-v6-c-menu-toggle__toggle-icon {
6918
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
6919
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
7056
6920
  }
7057
6921
 
7058
- .pf-v6-c-spinner {
7059
- width: var(--pf-v6-c-spinner--Width);
7060
- height: var(--pf-v6-c-spinner--Height);
7061
- overflow: hidden;
7062
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
6922
+ .pf-v6-c-menu-toggle__status-icon {
6923
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
7063
6924
  }
7064
6925
 
7065
- .pf-v6-c-spinner.pf-m-inline {
7066
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
6926
+ .pf-v6-c-check {
6927
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
6928
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
6929
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
6930
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
6931
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
6932
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
6933
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
6934
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
6935
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
6936
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
6937
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
6938
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
6939
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
6940
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
7067
6941
  }
7068
6942
 
7069
- .pf-v6-c-spinner.pf-m-xs {
7070
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
7071
- --pf-v6-c-spinner--StrokeWidth: 15;
6943
+ .pf-v6-c-check {
6944
+ display: grid;
6945
+ grid-template-columns: auto 1fr;
6946
+ grid-gap: var(--pf-v6-c-check--GridGap);
6947
+ accent-color: var(--pf-v6-c-check--AccentColor);
7072
6948
  }
7073
6949
 
7074
- .pf-v6-c-spinner.pf-m-sm {
7075
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
6950
+ .pf-v6-c-check.pf-m-standalone {
6951
+ display: inline-grid;
6952
+ grid-template-columns: auto;
6953
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
7076
6954
  }
7077
6955
 
7078
- .pf-v6-c-spinner.pf-m-md {
7079
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
6956
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
6957
+ align-self: center;
6958
+ transform: none;
7080
6959
  }
7081
6960
 
7082
- .pf-v6-c-spinner.pf-m-lg {
7083
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
6961
+ .pf-v6-c-check__input {
6962
+ align-self: start;
6963
+ font-size: var(--pf-v6-c-check__label--FontSize);
6964
+ line-height: var(--pf-v6-c-check__label--LineHeight);
6965
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
7084
6966
  }
7085
6967
 
7086
- .pf-v6-c-spinner.pf-m-xl {
7087
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
6968
+ .pf-v6-c-check__label {
6969
+ font-size: var(--pf-v6-c-check__label--FontSize);
6970
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
6971
+ line-height: var(--pf-v6-c-check__label--LineHeight);
6972
+ color: var(--pf-v6-c-check__label--Color);
7088
6973
  }
7089
6974
 
7090
- .pf-v6-c-spinner__path {
7091
- width: 100%;
7092
- height: 100%;
7093
- stroke: var(--pf-v6-c-spinner--Color);
7094
- stroke-dasharray: 283;
7095
- stroke-dashoffset: 280;
7096
- stroke-linecap: round;
7097
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
7098
- transform-origin: 50% 50%;
7099
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
6975
+ .pf-v6-c-check__description {
6976
+ grid-column: 2;
6977
+ font-size: var(--pf-v6-c-check__description--FontSize);
6978
+ color: var(--pf-v6-c-check__description--Color);
7100
6979
  }
7101
6980
 
7102
- @keyframes pf-v6-c-spinner-animation-rotate {
7103
- 0% {
7104
- transform: rotate(0deg);
7105
- }
7106
- 100% {
7107
- transform: rotate(360deg);
7108
- }
6981
+ .pf-v6-c-check__body {
6982
+ grid-column: 2;
7109
6983
  }
7110
- @keyframes pf-v6-c-spinner-animation-dash {
7111
- 0% {
7112
- stroke-dashoffset: 280;
7113
- transform: rotate(0);
7114
- }
7115
- 15% {
7116
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
7117
- }
7118
- 40% {
7119
- stroke-dasharray: 220;
7120
- stroke-dashoffset: 150;
7121
- }
7122
- 100% {
7123
- stroke-dashoffset: 280;
7124
- transform: rotate(720deg);
7125
- }
6984
+
6985
+ .pf-v6-c-check__label,
6986
+ .pf-v6-c-check__input {
6987
+ justify-self: start;
7126
6988
  }
7127
- .pf-v6-c-badge {
7128
- --pf-v6-c-badge--BorderColor: transparent;
7129
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
7130
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
7131
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
7132
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
7133
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7134
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7135
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7136
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
7137
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
7138
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7139
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
7140
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7141
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7142
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7143
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7144
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7145
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
7146
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
7147
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
6989
+
6990
+ label.pf-v6-c-check, .pf-v6-c-check__label,
6991
+ .pf-v6-c-check__input {
6992
+ cursor: pointer;
7148
6993
  }
7149
6994
 
7150
- .pf-v6-c-badge {
7151
- position: relative;
7152
- display: inline-block;
7153
- min-width: var(--pf-v6-c-badge--MinWidth);
7154
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
7155
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
7156
- font-size: var(--pf-v6-c-badge--FontSize);
7157
- font-weight: var(--pf-v6-c-badge--FontWeight);
7158
- color: var(--pf-v6-c-badge--Color);
7159
- text-align: center;
7160
- white-space: nowrap;
7161
- background-color: var(--pf-v6-c-badge--BackgroundColor);
7162
- border-radius: var(--pf-v6-c-badge--BorderRadius);
6995
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
6996
+ .pf-v6-c-check__input:disabled,
6997
+ .pf-v6-c-check__input.pf-m-disabled {
6998
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
6999
+ cursor: not-allowed;
7163
7000
  }
7164
7001
 
7165
- .pf-v6-c-badge::after {
7166
- position: absolute;
7167
- inset: 0;
7168
- pointer-events: none;
7169
- content: "";
7170
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
7171
- border-radius: inherit;
7002
+ .pf-v6-c-check__label-required {
7003
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
7004
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
7005
+ color: var(--pf-v6-c-check__label-required--Color);
7172
7006
  }
7173
7007
 
7174
- .pf-v6-c-badge.pf-m-read {
7175
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
7176
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
7177
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
7008
+ .pf-v6-c-action-list {
7009
+ --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
7010
+ --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
7011
+ --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
7012
+ --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
7178
7013
  }
7179
7014
 
7180
- .pf-v6-c-badge.pf-m-unread {
7181
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
7182
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
7183
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
7015
+ .pf-v6-c-action-list,
7016
+ .pf-v6-c-action-list__group {
7017
+ display: flex;
7018
+ align-items: start;
7184
7019
  }
7185
7020
 
7186
- .pf-v6-c-badge.pf-m-disabled {
7187
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
7188
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
7021
+ .pf-v6-c-action-list {
7022
+ row-gap: var(--pf-v6-c-action-list--RowGap);
7023
+ column-gap: var(--pf-v6-c-action-list--ColumnGap);
7189
7024
  }
7190
7025
 
7191
- .pf-v6-c-badge.pf-m-disabled::after {
7192
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
7026
+ .pf-v6-c-action-list.pf-m-icons {
7027
+ --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
7028
+ column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
7193
7029
  }
7194
7030
 
7195
- .pf-v6-c-badge__toggle-icon {
7196
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
7197
- color: var(--pf-v6-c-badge__toggle-icon--Color);
7031
+ .pf-v6-c-action-list__group {
7032
+ row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
7033
+ column-gap: var(--pf-v6-c-action-list__group--ColumnGap);
7034
+ }
7035
+
7036
+ .pf-v6-c-action-list__group.pf-m-icons {
7037
+ column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
7198
7038
  }
7199
7039
 
7200
7040
  .pf-v6-c-menu {
@@ -7977,4 +7817,165 @@ button.pf-v6-c-breadcrumb__link {
7977
7817
 
7978
7818
  .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
7979
7819
  display: none;
7820
+ }
7821
+
7822
+ .pf-v6-c-badge {
7823
+ --pf-v6-c-badge--BorderColor: transparent;
7824
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
7825
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
7826
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
7827
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
7828
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7829
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7830
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7831
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
7832
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
7833
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7834
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
7835
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7836
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7837
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7838
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7839
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7840
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
7841
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
7842
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7843
+ }
7844
+
7845
+ .pf-v6-c-badge {
7846
+ position: relative;
7847
+ display: inline-block;
7848
+ min-width: var(--pf-v6-c-badge--MinWidth);
7849
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
7850
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
7851
+ font-size: var(--pf-v6-c-badge--FontSize);
7852
+ font-weight: var(--pf-v6-c-badge--FontWeight);
7853
+ color: var(--pf-v6-c-badge--Color);
7854
+ text-align: center;
7855
+ white-space: nowrap;
7856
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
7857
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
7858
+ }
7859
+
7860
+ .pf-v6-c-badge::after {
7861
+ position: absolute;
7862
+ inset: 0;
7863
+ pointer-events: none;
7864
+ content: "";
7865
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
7866
+ border-radius: inherit;
7867
+ }
7868
+
7869
+ .pf-v6-c-badge.pf-m-read {
7870
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
7871
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
7872
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
7873
+ }
7874
+
7875
+ .pf-v6-c-badge.pf-m-unread {
7876
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
7877
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
7878
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
7879
+ }
7880
+
7881
+ .pf-v6-c-badge.pf-m-disabled {
7882
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
7883
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
7884
+ }
7885
+
7886
+ .pf-v6-c-badge.pf-m-disabled::after {
7887
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
7888
+ }
7889
+
7890
+ .pf-v6-c-badge__toggle-icon {
7891
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
7892
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
7893
+ }
7894
+
7895
+ .pf-v6-c-spinner {
7896
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
7897
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
7898
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
7899
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
7900
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
7901
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
7902
+ --pf-v6-c-spinner--StrokeWidth: 10;
7903
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
7904
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
7905
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
7906
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
7907
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
7908
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
7909
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
7910
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
7911
+ }
7912
+
7913
+ .pf-v6-c-spinner {
7914
+ width: var(--pf-v6-c-spinner--Width);
7915
+ height: var(--pf-v6-c-spinner--Height);
7916
+ overflow: hidden;
7917
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
7918
+ }
7919
+
7920
+ .pf-v6-c-spinner.pf-m-inline {
7921
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
7922
+ }
7923
+
7924
+ .pf-v6-c-spinner.pf-m-xs {
7925
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
7926
+ --pf-v6-c-spinner--StrokeWidth: 15;
7927
+ }
7928
+
7929
+ .pf-v6-c-spinner.pf-m-sm {
7930
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
7931
+ }
7932
+
7933
+ .pf-v6-c-spinner.pf-m-md {
7934
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
7935
+ }
7936
+
7937
+ .pf-v6-c-spinner.pf-m-lg {
7938
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
7939
+ }
7940
+
7941
+ .pf-v6-c-spinner.pf-m-xl {
7942
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
7943
+ }
7944
+
7945
+ .pf-v6-c-spinner__path {
7946
+ width: 100%;
7947
+ height: 100%;
7948
+ stroke: var(--pf-v6-c-spinner--Color);
7949
+ stroke-dasharray: 283;
7950
+ stroke-dashoffset: 280;
7951
+ stroke-linecap: round;
7952
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
7953
+ transform-origin: 50% 50%;
7954
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
7955
+ }
7956
+
7957
+ @keyframes pf-v6-c-spinner-animation-rotate {
7958
+ 0% {
7959
+ transform: rotate(0deg);
7960
+ }
7961
+ 100% {
7962
+ transform: rotate(360deg);
7963
+ }
7964
+ }
7965
+ @keyframes pf-v6-c-spinner-animation-dash {
7966
+ 0% {
7967
+ stroke-dashoffset: 280;
7968
+ transform: rotate(0);
7969
+ }
7970
+ 15% {
7971
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
7972
+ }
7973
+ 40% {
7974
+ stroke-dasharray: 220;
7975
+ stroke-dashoffset: 150;
7976
+ }
7977
+ 100% {
7978
+ stroke-dashoffset: 280;
7979
+ transform: rotate(720deg);
7980
+ }
7980
7981
  }