@patternfly/react-templates 1.1.14 → 1.1.15

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 (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-DoQM3C1C.css → output-DHtCDwj4.css} +1860 -1861
  6. package/package.json +3 -3
package/dist/umd/assets/{output-DoQM3C1C.css → output-DHtCDwj4.css} RENAMED
@@ -3,6 +3,142 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
+ .pf-v5-c-badge {
7
+ --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
8
+ --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
9
+ --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
10
+ --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
11
+ --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
12
+ --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
13
+ --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
14
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
15
+ --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
16
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
17
+ --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
18
+ display: inline-block;
19
+ min-width: var(--pf-v5-c-badge--MinWidth);
20
+ padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
21
+ padding-inline-end: var(--pf-v5-c-badge--PaddingRight);
22
+ font-size: var(--pf-v5-c-badge--FontSize);
23
+ font-weight: var(--pf-v5-c-badge--FontWeight);
24
+ color: var(--pf-v5-c-badge--Color);
25
+ text-align: center;
26
+ white-space: nowrap;
27
+ background-color: var(--pf-v5-c-badge--BackgroundColor);
28
+ border-radius: var(--pf-v5-c-badge--BorderRadius);
29
+ }
30
+
31
+ .pf-v5-c-badge.pf-m-read {
32
+ --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
33
+ --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
34
+ }
35
+
36
+ .pf-v5-c-badge.pf-m-unread {
37
+ --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
38
+ --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
39
+ }
40
+
41
+ :where(.pf-v5-theme-dark) .pf-v5-c-badge {
42
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
43
+ --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
44
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
45
+ }
46
+
47
+ .pf-v5-c-chip-group {
48
+ --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
49
+ --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
50
+ --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
51
+ --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
52
+ --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
53
+ --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
54
+ --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
55
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
56
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
57
+ }
58
+
59
+ .pf-v5-c-chip-group {
60
+ color: var(--pf-v5-global--Color--100);
61
+ --pf-v5-c-chip-group--PaddingTop: 0;
62
+ --pf-v5-c-chip-group--PaddingRight: 0;
63
+ --pf-v5-c-chip-group--PaddingBottom: 0;
64
+ --pf-v5-c-chip-group--PaddingLeft: 0;
65
+ --pf-v5-c-chip-group--RowGap: var(--pf-v5-global--spacer--sm);
66
+ --pf-v5-c-chip-group--ColumnGap: 0;
67
+ --pf-v5-c-chip-group__main--RowGap: var(--pf-v5-global--spacer--xs);
68
+ --pf-v5-c-chip-group__main--ColumnGap: var(--pf-v5-global--spacer--sm);
69
+ --pf-v5-c-chip-group__list--RowGap: var(--pf-v5-global--spacer--xs);
70
+ --pf-v5-c-chip-group__list--ColumnGap: var(--pf-v5-global--spacer--xs);
71
+ --pf-v5-c-chip-group--m-category--PaddingTop: var(--pf-v5-global--spacer--xs);
72
+ --pf-v5-c-chip-group--m-category--PaddingRight: var(--pf-v5-global--spacer--xs);
73
+ --pf-v5-c-chip-group--m-category--PaddingBottom: var(--pf-v5-global--spacer--xs);
74
+ --pf-v5-c-chip-group--m-category--PaddingLeft: var(--pf-v5-global--spacer--sm);
75
+ --pf-v5-c-chip-group--m-category--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
76
+ --pf-v5-c-chip-group--m-category--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
77
+ --pf-v5-c-chip-group__label--FontSize: var(--pf-v5-global--FontSize--sm);
78
+ --pf-v5-c-chip-group__label--MaxWidth: 18ch;
79
+ --pf-v5-c-chip-group__close--MarginTop: calc(var(--pf-v5-global--spacer--xs) * -1);
80
+ --pf-v5-c-chip-group__close--MarginBottom: calc(var(--pf-v5-global--spacer--xs) * -1);
81
+ row-gap: var(--pf-v5-c-chip-group--RowGap);
82
+ column-gap: var(--pf-v5-c-chip-group--ColumnGap);
83
+ max-width: 100%;
84
+ padding-block-start: var(--pf-v5-c-chip-group--PaddingTop);
85
+ padding-block-end: var(--pf-v5-c-chip-group--PaddingBottom);
86
+ padding-inline-start: var(--pf-v5-c-chip-group--PaddingLeft);
87
+ padding-inline-end: var(--pf-v5-c-chip-group--PaddingRight);
88
+ }
89
+
90
+ .pf-v5-c-chip-group.pf-m-category {
91
+ --pf-v5-c-chip-group--PaddingTop: var(--pf-v5-c-chip-group--m-category--PaddingTop);
92
+ --pf-v5-c-chip-group--PaddingRight: var(--pf-v5-c-chip-group--m-category--PaddingRight);
93
+ --pf-v5-c-chip-group--PaddingBottom: var(--pf-v5-c-chip-group--m-category--PaddingBottom);
94
+ --pf-v5-c-chip-group--PaddingLeft: var(--pf-v5-c-chip-group--m-category--PaddingLeft);
95
+ background-color: var(--pf-v5-c-chip-group--m-category--BackgroundColor);
96
+ border-radius: var(--pf-v5-c-chip-group--m-category--BorderRadius);
97
+ }
98
+
99
+ .pf-v5-c-chip-group__main {
100
+ display: flex;
101
+ flex: 1;
102
+ flex-wrap: wrap;
103
+ row-gap: var(--pf-v5-c-chip-group__main--RowGap);
104
+ column-gap: var(--pf-v5-c-chip-group__main--ColumnGap);
105
+ align-items: baseline;
106
+ min-width: 0;
107
+ }
108
+
109
+ .pf-v5-c-chip-group,
110
+ .pf-v5-c-chip-group__list {
111
+ display: inline-flex;
112
+ flex-wrap: wrap;
113
+ align-items: center;
114
+ min-width: 0;
115
+ }
116
+
117
+ .pf-v5-c-chip-group__list {
118
+ row-gap: var(--pf-v5-c-chip-group__list--RowGap);
119
+ column-gap: var(--pf-v5-c-chip-group__list--ColumnGap);
120
+ }
121
+
122
+ .pf-v5-c-chip-group__list-item {
123
+ display: inline-flex;
124
+ min-width: 0;
125
+ }
126
+
127
+ .pf-v5-c-chip-group__label {
128
+ overflow: hidden;
129
+ text-overflow: ellipsis;
130
+ white-space: nowrap;
131
+ max-width: var(--pf-v5-c-chip-group__label--MaxWidth);
132
+ font-size: var(--pf-v5-c-chip-group__label--FontSize);
133
+ }
134
+
135
+ .pf-v5-c-chip-group__close {
136
+ display: flex;
137
+ align-self: flex-start;
138
+ margin-block-start: var(--pf-v5-c-chip-group__close--MarginTop);
139
+ margin-block-end: var(--pf-v5-c-chip-group__close--MarginBottom);
140
+ }
141
+
6
142
  .pf-v5-c-menu-toggle {
7
143
  --pf-v5-c-menu-toggle--BorderRadius: 0;
8
144
  --pf-v5-c-menu-toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
@@ -552,181 +688,429 @@
552
688
  background: transparent;
553
689
  }
554
690
 
555
- .pf-v5-c-divider {
556
- --pf-v5-hidden-visible--hidden--Display: none;
557
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
558
- display: var(--pf-v5-hidden-visible--Display);
691
+ .pf-v5-c-check {
692
+ --pf-v5-c-check--GridGap: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--sm);
693
+ --pf-v5-c-check__label--disabled--Color: var(--pf-v5-global--disabled-color--100);
694
+ --pf-v5-c-check__label--Color: var(--pf-v5-global--Color--100);
695
+ --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
696
+ --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
697
+ --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
698
+ --pf-v5-c-check__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%);
699
+ --pf-v5-c-check__input--TranslateY--moz: var(--pf-v5-c-check__input--TranslateY);
700
+ --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
701
+ --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
702
+ --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
703
+ --pf-v5-c-check__label-required--MarginLeft: var(--pf-v5-global--spacer--xs);
704
+ --pf-v5-c-check__label-required--FontSize: var(--pf-v5-global--FontSize--sm);
705
+ --pf-v5-c-check__label-required--Color: var(--pf-v5-global--danger-color--100);
706
+ display: grid;
707
+ grid-template-columns: auto 1fr;
708
+ grid-gap: var(--pf-v5-c-check--GridGap);
709
+ align-items: baseline;
559
710
  }
560
711
 
561
- .pf-m-hidden.pf-v5-c-divider {
562
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
712
+ .pf-v5-c-check.pf-m-standalone {
713
+ --pf-v5-c-check--GridGap: 0;
714
+ --pf-v5-c-check__input--TranslateY: none;
715
+ display: inline-grid;
563
716
  }
564
717
 
565
- @media screen and (min-width: 576px) {
566
- .pf-m-hidden-on-sm.pf-v5-c-divider {
567
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
568
- }
569
- .pf-m-visible-on-sm.pf-v5-c-divider {
570
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
571
- }
572
- }
573
- @media screen and (min-width: 768px) {
574
- .pf-m-hidden-on-md.pf-v5-c-divider {
575
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
576
- }
577
- .pf-m-visible-on-md.pf-v5-c-divider {
578
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
579
- }
580
- }
581
- @media screen and (min-width: 992px) {
582
- .pf-m-hidden-on-lg.pf-v5-c-divider {
583
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
584
- }
585
- .pf-m-visible-on-lg.pf-v5-c-divider {
586
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
587
- }
718
+ .pf-v5-c-check__input {
719
+ align-self: start;
720
+ -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
721
+ transform: translateY(var(--pf-v5-c-check__input--TranslateY));
588
722
  }
589
- @media screen and (min-width: 1200px) {
590
- .pf-m-hidden-on-xl.pf-v5-c-divider {
591
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
592
- }
593
- .pf-m-visible-on-xl.pf-v5-c-divider {
594
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
595
- }
723
+
724
+ .pf-v5-c-check__label {
725
+ font-size: var(--pf-v5-c-check__label--FontSize);
726
+ font-weight: var(--pf-v5-c-check__label--FontWeight);
727
+ line-height: var(--pf-v5-c-check__label--LineHeight);
728
+ color: var(--pf-v5-c-check__label--Color);
596
729
  }
597
- @media screen and (min-width: 1450px) {
598
- .pf-m-hidden-on-2xl.pf-v5-c-divider {
599
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
600
- }
601
- .pf-m-visible-on-2xl.pf-v5-c-divider {
602
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
603
- }
730
+
731
+ .pf-v5-c-check__description {
732
+ grid-column: 2;
733
+ font-size: var(--pf-v5-c-check__description--FontSize);
734
+ color: var(--pf-v5-c-check__description--Color);
604
735
  }
605
- .pf-v5-c-divider {
606
- --pf-v5-c-divider--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
607
- --pf-v5-c-divider--BorderColor--base: var(--pf-v5-c-divider--BackgroundColor);
608
- --pf-v5-c-divider--Height: var(--pf-v5-c-divider--BorderWidth--base);
609
- --pf-v5-c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--100);
610
- --pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-divider--BorderColor--base);
611
- --pf-v5-c-divider--after--FlexBasis: 100%;
612
- --pf-v5-c-divider--after--Inset: 0%;
613
- --pf-v5-c-divider--m-vertical--after--FlexBasis: 100%;
614
- --pf-v5-c-divider--m-horizontal--Display: flex;
615
- --pf-v5-c-divider--m-horizontal--FlexDirection: row;
616
- --pf-v5-c-divider--m-horizontal--after--Height: var(--pf-v5-c-divider--Height);
617
- --pf-v5-c-divider--m-horizontal--after--Width: auto;
618
- --pf-v5-c-divider--m-vertical--Display: inline-flex;
619
- --pf-v5-c-divider--m-vertical--FlexDirection: column;
620
- --pf-v5-c-divider--m-vertical--after--Height: auto;
621
- --pf-v5-c-divider--m-vertical--after--Width: var(--pf-v5-c-divider--BorderWidth--base);
622
- --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
623
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
624
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
625
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
626
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
627
- width: 100%;
628
- height: auto;
629
- flex-direction: var(--pf-v5-c-divider--FlexDirection);
630
- flex-shrink: 0;
631
- align-items: center;
632
- align-self: stretch;
633
- justify-content: center;
634
- border: 0;
736
+
737
+ .pf-v5-c-check__body {
738
+ grid-column: 2;
739
+ margin-block-start: var(--pf-v5-c-check__body--MarginTop);
635
740
  }
636
741
 
637
- .pf-v5-c-divider::after {
638
- flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
742
+ .pf-v5-c-check__label,
743
+ .pf-v5-c-check__input {
744
+ justify-self: start;
639
745
  }
640
746
 
641
- .pf-v5-c-divider::after {
642
- align-self: stretch;
643
- justify-self: center;
644
- width: var(--pf-v5-c-divider--after--Width);
645
- height: var(--pf-v5-c-divider--after--Height);
747
+ label.pf-v5-c-check, .pf-v5-c-check__label,
748
+ .pf-v5-c-check__input {
749
+ cursor: pointer;
750
+ }
751
+
752
+ .pf-v5-c-check__label:disabled, .pf-v5-c-check__label.pf-m-disabled,
753
+ .pf-v5-c-check__input:disabled,
754
+ .pf-v5-c-check__input.pf-m-disabled {
755
+ --pf-v5-c-check__label--Color: var(--pf-v5-c-check__label--disabled--Color);
756
+ cursor: not-allowed;
757
+ }
758
+
759
+ .pf-v5-c-check__label-required {
760
+ margin-inline-start: var(--pf-v5-c-check__label-required--MarginLeft);
761
+ font-size: var(--pf-v5-c-check__label-required--FontSize);
762
+ color: var(--pf-v5-c-check__label-required--Color);
763
+ }
764
+
765
+ .pf-v5-c-text-input-group {
766
+ --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
767
+ --pf-v5-c-text-input-group__text--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
768
+ --pf-v5-c-text-input-group__text--before--BorderColor: var(--pf-v5-global--BorderColor--300);
769
+ --pf-v5-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
770
+ --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
771
+ --pf-v5-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
772
+ --pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
773
+ --pf-v5-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
774
+ --pf-v5-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-v5-global--spacer--sm);
775
+ --pf-v5-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-v5-global--spacer--xl);
776
+ --pf-v5-c-text-input-group__main--RowGap: var(--pf-v5-global--spacer--xs);
777
+ --pf-v5-c-text-input-group__main--ColumnGap: var(--pf-v5-global--spacer--sm);
778
+ --pf-v5-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-v5-global--spacer--xs);
779
+ --pf-v5-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-v5-global--spacer--xs);
780
+ --pf-v5-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-v5-global--spacer--xs);
781
+ --pf-v5-c-text-input-group__text-input--PaddingTop: var(--pf-v5-global--spacer--form-element);
782
+ --pf-v5-c-text-input-group__text-input--PaddingRight: var(--pf-v5-global--spacer--sm);
783
+ --pf-v5-c-text-input-group__text-input--PaddingBottom: var(--pf-v5-global--spacer--form-element);
784
+ --pf-v5-c-text-input-group__text-input--PaddingLeft: var(--pf-v5-global--spacer--sm);
785
+ --pf-v5-c-text-input-group__text-input--MinWidth: 12ch;
786
+ --pf-v5-c-text-input-group__text-input--m-hint--Color: var(--pf-v5-global--Color--200);
787
+ --pf-v5-c-text-input-group__text-input--placeholder--Color: var(--pf-v5-global--Color--200);
788
+ --pf-v5-c-text-input-group__text-input--BackgroundColor: transparent;
789
+ --pf-v5-c-text-input-group__icon--Left: var(--pf-v5-global--spacer--sm);
790
+ --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-global--icon--Color--dark);
791
+ --pf-v5-c-text-input-group__icon--TranslateY: -50%;
792
+ --pf-v5-c-text-input-group__utilities--MarginRight: var(--pf-v5-global--spacer--sm);
793
+ --pf-v5-c-text-input-group__utilities--MarginLeft: var(--pf-v5-global--spacer--xs);
794
+ --pf-v5-c-text-input-group__utilities--child--MarginLeft: var(--pf-v5-global--spacer--xs);
795
+ --pf-v5-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--xs);
796
+ --pf-v5-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-v5-global--spacer--xs);
797
+ --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
798
+ --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
799
+ position: relative;
800
+ display: flex;
801
+ width: 100%;
802
+ color: var(--pf-v5-c-text-input-group--Color, inherit);
803
+ background-color: var(--pf-v5-c-text-input-group--BackgroundColor);
804
+ }
805
+
806
+ .pf-v5-c-text-input-group:hover {
807
+ --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-c-text-input-group--hover__text--after--BorderBottomColor);
808
+ }
809
+
810
+ .pf-v5-c-text-input-group.pf-m-disabled {
811
+ --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
812
+ --pf-v5-c-text-input-group__text--after--BorderBottomWidth: 0;
813
+ --pf-v5-c-text-input-group--Color: var(--pf-v5-c-text-input-group--m-disabled--Color);
814
+ --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-c-text-input-group--m-disabled--Color);
815
+ --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-c-text-input-group--m-disabled--BackgroundColor);
816
+ pointer-events: none;
817
+ }
818
+
819
+ .pf-v5-c-text-input-group.pf-m-plain {
820
+ --pf-v5-c-text-input-group--BackgroundColor: transparent;
821
+ }
822
+
823
+ .pf-v5-c-text-input-group.pf-m-plain .pf-v5-c-text-input-group__text::before, .pf-v5-c-text-input-group.pf-m-plain .pf-v5-c-text-input-group__text::after {
824
+ border: 0;
825
+ }
826
+
827
+ .pf-v5-c-text-input-group__main {
828
+ display: flex;
829
+ flex: 1;
830
+ flex-wrap: wrap;
831
+ gap: var(--pf-v5-c-text-input-group__main--RowGap) var(--pf-v5-c-text-input-group__main--ColumnGap);
832
+ min-width: 0;
833
+ }
834
+
835
+ .pf-v5-c-text-input-group__main.pf-m-icon {
836
+ --pf-v5-c-text-input-group__text-input--PaddingLeft: var(--pf-v5-c-text-input-group__main--m-icon__text-input--PaddingLeft);
837
+ }
838
+
839
+ .pf-v5-c-text-input-group__main > :first-child:not(.pf-v5-c-text-input-group__text) {
840
+ margin-inline-start: var(--pf-v5-c-text-input-group__main--first-child--not--text-input--MarginLeft);
841
+ }
842
+
843
+ .pf-v5-c-text-input-group__main .pf-v5-c-chip-group__main {
844
+ padding-block-start: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingTop);
845
+ padding-block-end: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingBottom);
846
+ padding-inline-end: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingRight);
847
+ }
848
+
849
+ .pf-v5-c-text-input-group__text {
850
+ display: inline-grid;
851
+ flex: 1;
852
+ grid-template-areas: "text-input";
853
+ grid-template-columns: 1fr;
854
+ }
855
+
856
+ .pf-v5-c-text-input-group__text::before, .pf-v5-c-text-input-group__text::after {
857
+ position: absolute;
858
+ inset: 0;
859
+ pointer-events: none;
646
860
  content: "";
647
- background-color: var(--pf-v5-c-divider--after--BackgroundColor);
648
861
  }
649
862
 
650
- .pf-v5-c-divider.pf-m-vertical {
651
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
652
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
653
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
654
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
655
- width: auto;
656
- height: inherit;
863
+ .pf-v5-c-text-input-group__text::before {
864
+ border: var(--pf-v5-c-text-input-group__text--before--BorderWidth) solid var(--pf-v5-c-text-input-group__text--before--BorderColor);
657
865
  }
658
866
 
659
- .pf-v5-c-divider.pf-m-vertical::after {
660
- flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
867
+ .pf-v5-c-text-input-group__text::after {
868
+ border-block-end: var(--pf-v5-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-v5-c-text-input-group__text--after--BorderBottomColor);
661
869
  }
662
870
 
663
- .pf-v5-c-divider.pf-m-inset-none {
664
- --pf-v5-c-divider--after--Inset: 0%;
871
+ .pf-v5-c-text-input-group__text:focus-within {
872
+ --pf-v5-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth);
873
+ --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomColor);
665
874
  }
666
875
 
667
- .pf-v5-c-divider.pf-m-inset-xs {
668
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
876
+ .pf-v5-c-text-input-group__icon {
877
+ position: absolute;
878
+ inset-block-start: 50%;
879
+ inset-inline-start: var(--pf-v5-c-text-input-group__icon--Left);
880
+ color: var(--pf-v5-c-text-input-group__icon--Color);
881
+ transform: translateY(var(--pf-v5-c-text-input-group__icon--TranslateY));
669
882
  }
670
883
 
671
- .pf-v5-c-divider.pf-m-inset-sm {
672
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
884
+ .pf-v5-c-text-input-group__text-input {
885
+ overflow: hidden;
886
+ text-overflow: ellipsis;
887
+ white-space: nowrap;
888
+ position: relative;
889
+ width: 100%;
890
+ min-width: var(--pf-v5-c-text-input-group__text-input--MinWidth);
891
+ padding-block-start: var(--pf-v5-c-text-input-group__text-input--PaddingTop);
892
+ padding-block-end: var(--pf-v5-c-text-input-group__text-input--PaddingBottom);
893
+ padding-inline-start: var(--pf-v5-c-text-input-group__text-input--PaddingLeft);
894
+ padding-inline-end: var(--pf-v5-c-text-input-group__text-input--PaddingRight);
895
+ background-color: var(--pf-v5-c-text-input-group__text-input--BackgroundColor);
896
+ border: 0;
673
897
  }
674
898
 
675
- .pf-v5-c-divider.pf-m-inset-md {
676
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
899
+ .pf-v5-c-text-input-group__text-input, .pf-v5-c-text-input-group__text-input.pf-m-hint {
900
+ grid-area: text-input;
677
901
  }
678
902
 
679
- .pf-v5-c-divider.pf-m-inset-lg {
680
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
903
+ .pf-v5-c-text-input-group__text-input.pf-m-hint {
904
+ color: var(--pf-v5-c-text-input-group__text-input--m-hint--Color);
681
905
  }
682
906
 
683
- .pf-v5-c-divider.pf-m-inset-xl {
684
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
907
+ .pf-v5-c-text-input-group__text-input::placeholder {
908
+ color: var(--pf-v5-c-text-input-group__text-input--placeholder--Color);
685
909
  }
686
910
 
687
- .pf-v5-c-divider.pf-m-inset-2xl {
688
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
911
+ .pf-v5-c-text-input-group__utilities {
912
+ display: flex;
913
+ align-items: center;
914
+ margin-inline-start: var(--pf-v5-c-text-input-group__utilities--MarginLeft);
915
+ margin-inline-end: var(--pf-v5-c-text-input-group__utilities--MarginRight);
689
916
  }
690
917
 
691
- .pf-v5-c-divider.pf-m-inset-3xl {
692
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
918
+ .pf-v5-c-text-input-group__utilities > * + * {
919
+ margin-inline-start: var(--pf-v5-c-text-input-group__utilities--child--MarginLeft);
693
920
  }
694
921
 
695
- @media (min-width: 576px) {
696
- .pf-v5-c-divider.pf-m-horizontal-on-sm {
697
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
698
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
699
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
700
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
701
- width: 100%;
702
- height: auto;
922
+ .pf-v5-c-text-input-group__utilities .pf-v5-c-button {
923
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-text-input-group__utilities--c-button--PaddingRight);
924
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-text-input-group__utilities--c-button--PaddingLeft);
925
+ }
926
+
927
+ .pf-v5-c-text-input-group__group {
928
+ display: flex;
929
+ }
930
+
931
+ :where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
932
+ --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
933
+ --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
934
+ --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
935
+ --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
936
+ --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
937
+ }
938
+
939
+ .pf-v5-c-divider {
940
+ --pf-v5-hidden-visible--hidden--Display: none;
941
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
942
+ display: var(--pf-v5-hidden-visible--Display);
943
+ }
944
+
945
+ .pf-m-hidden.pf-v5-c-divider {
946
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
947
+ }
948
+
949
+ @media screen and (min-width: 576px) {
950
+ .pf-m-hidden-on-sm.pf-v5-c-divider {
951
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
703
952
  }
704
- .pf-v5-c-divider.pf-m-horizontal-on-sm::after {
705
- flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
953
+ .pf-m-visible-on-sm.pf-v5-c-divider {
954
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
706
955
  }
707
956
  }
708
- @media (min-width: 576px) {
709
- .pf-v5-c-divider.pf-m-vertical-on-sm {
710
- --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
711
- --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
712
- --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
713
- --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
714
- width: auto;
715
- height: inherit;
957
+ @media screen and (min-width: 768px) {
958
+ .pf-m-hidden-on-md.pf-v5-c-divider {
959
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
716
960
  }
717
- .pf-v5-c-divider.pf-m-vertical-on-sm::after {
718
- flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
961
+ .pf-m-visible-on-md.pf-v5-c-divider {
962
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
719
963
  }
720
964
  }
721
- @media (min-width: 576px) {
722
- .pf-v5-c-divider.pf-m-inset-none-on-sm {
723
- --pf-v5-c-divider--after--Inset: 0%;
965
+ @media screen and (min-width: 992px) {
966
+ .pf-m-hidden-on-lg.pf-v5-c-divider {
967
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
724
968
  }
725
- .pf-v5-c-divider.pf-m-inset-xs-on-sm {
726
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
969
+ .pf-m-visible-on-lg.pf-v5-c-divider {
970
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
727
971
  }
728
- .pf-v5-c-divider.pf-m-inset-sm-on-sm {
729
- --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
972
+ }
973
+ @media screen and (min-width: 1200px) {
974
+ .pf-m-hidden-on-xl.pf-v5-c-divider {
975
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
976
+ }
977
+ .pf-m-visible-on-xl.pf-v5-c-divider {
978
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
979
+ }
980
+ }
981
+ @media screen and (min-width: 1450px) {
982
+ .pf-m-hidden-on-2xl.pf-v5-c-divider {
983
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
984
+ }
985
+ .pf-m-visible-on-2xl.pf-v5-c-divider {
986
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
987
+ }
988
+ }
989
+ .pf-v5-c-divider {
990
+ --pf-v5-c-divider--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
991
+ --pf-v5-c-divider--BorderColor--base: var(--pf-v5-c-divider--BackgroundColor);
992
+ --pf-v5-c-divider--Height: var(--pf-v5-c-divider--BorderWidth--base);
993
+ --pf-v5-c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--100);
994
+ --pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-divider--BorderColor--base);
995
+ --pf-v5-c-divider--after--FlexBasis: 100%;
996
+ --pf-v5-c-divider--after--Inset: 0%;
997
+ --pf-v5-c-divider--m-vertical--after--FlexBasis: 100%;
998
+ --pf-v5-c-divider--m-horizontal--Display: flex;
999
+ --pf-v5-c-divider--m-horizontal--FlexDirection: row;
1000
+ --pf-v5-c-divider--m-horizontal--after--Height: var(--pf-v5-c-divider--Height);
1001
+ --pf-v5-c-divider--m-horizontal--after--Width: auto;
1002
+ --pf-v5-c-divider--m-vertical--Display: inline-flex;
1003
+ --pf-v5-c-divider--m-vertical--FlexDirection: column;
1004
+ --pf-v5-c-divider--m-vertical--after--Height: auto;
1005
+ --pf-v5-c-divider--m-vertical--after--Width: var(--pf-v5-c-divider--BorderWidth--base);
1006
+ --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
1007
+ --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
1008
+ --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
1009
+ --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
1010
+ --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
1011
+ width: 100%;
1012
+ height: auto;
1013
+ flex-direction: var(--pf-v5-c-divider--FlexDirection);
1014
+ flex-shrink: 0;
1015
+ align-items: center;
1016
+ align-self: stretch;
1017
+ justify-content: center;
1018
+ border: 0;
1019
+ }
1020
+
1021
+ .pf-v5-c-divider::after {
1022
+ flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
1023
+ }
1024
+
1025
+ .pf-v5-c-divider::after {
1026
+ align-self: stretch;
1027
+ justify-self: center;
1028
+ width: var(--pf-v5-c-divider--after--Width);
1029
+ height: var(--pf-v5-c-divider--after--Height);
1030
+ content: "";
1031
+ background-color: var(--pf-v5-c-divider--after--BackgroundColor);
1032
+ }
1033
+
1034
+ .pf-v5-c-divider.pf-m-vertical {
1035
+ --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
1036
+ --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
1037
+ --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
1038
+ --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
1039
+ width: auto;
1040
+ height: inherit;
1041
+ }
1042
+
1043
+ .pf-v5-c-divider.pf-m-vertical::after {
1044
+ flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
1045
+ }
1046
+
1047
+ .pf-v5-c-divider.pf-m-inset-none {
1048
+ --pf-v5-c-divider--after--Inset: 0%;
1049
+ }
1050
+
1051
+ .pf-v5-c-divider.pf-m-inset-xs {
1052
+ --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
1053
+ }
1054
+
1055
+ .pf-v5-c-divider.pf-m-inset-sm {
1056
+ --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
1057
+ }
1058
+
1059
+ .pf-v5-c-divider.pf-m-inset-md {
1060
+ --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
1061
+ }
1062
+
1063
+ .pf-v5-c-divider.pf-m-inset-lg {
1064
+ --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
1065
+ }
1066
+
1067
+ .pf-v5-c-divider.pf-m-inset-xl {
1068
+ --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
1069
+ }
1070
+
1071
+ .pf-v5-c-divider.pf-m-inset-2xl {
1072
+ --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
1073
+ }
1074
+
1075
+ .pf-v5-c-divider.pf-m-inset-3xl {
1076
+ --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
1077
+ }
1078
+
1079
+ @media (min-width: 576px) {
1080
+ .pf-v5-c-divider.pf-m-horizontal-on-sm {
1081
+ --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
1082
+ --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
1083
+ --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
1084
+ --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
1085
+ width: 100%;
1086
+ height: auto;
1087
+ }
1088
+ .pf-v5-c-divider.pf-m-horizontal-on-sm::after {
1089
+ flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
1090
+ }
1091
+ }
1092
+ @media (min-width: 576px) {
1093
+ .pf-v5-c-divider.pf-m-vertical-on-sm {
1094
+ --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
1095
+ --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
1096
+ --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
1097
+ --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
1098
+ width: auto;
1099
+ height: inherit;
1100
+ }
1101
+ .pf-v5-c-divider.pf-m-vertical-on-sm::after {
1102
+ flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
1103
+ }
1104
+ }
1105
+ @media (min-width: 576px) {
1106
+ .pf-v5-c-divider.pf-m-inset-none-on-sm {
1107
+ --pf-v5-c-divider--after--Inset: 0%;
1108
+ }
1109
+ .pf-v5-c-divider.pf-m-inset-xs-on-sm {
1110
+ --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
1111
+ }
1112
+ .pf-v5-c-divider.pf-m-inset-sm-on-sm {
1113
+ --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
730
1114
  }
731
1115
  .pf-v5-c-divider.pf-m-inset-md-on-sm {
732
1116
  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
@@ -952,173 +1336,134 @@
952
1336
  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
953
1337
  }
954
1338
  }
955
- .pf-v5-c-check {
956
- --pf-v5-c-check--GridGap: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--sm);
957
- --pf-v5-c-check__label--disabled--Color: var(--pf-v5-global--disabled-color--100);
958
- --pf-v5-c-check__label--Color: var(--pf-v5-global--Color--100);
959
- --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
960
- --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
961
- --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
962
- --pf-v5-c-check__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%);
963
- --pf-v5-c-check__input--TranslateY--moz: var(--pf-v5-c-check__input--TranslateY);
964
- --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
965
- --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
966
- --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
967
- --pf-v5-c-check__label-required--MarginLeft: var(--pf-v5-global--spacer--xs);
968
- --pf-v5-c-check__label-required--FontSize: var(--pf-v5-global--FontSize--sm);
969
- --pf-v5-c-check__label-required--Color: var(--pf-v5-global--danger-color--100);
970
- display: grid;
971
- grid-template-columns: auto 1fr;
972
- grid-gap: var(--pf-v5-c-check--GridGap);
973
- align-items: baseline;
974
- }
975
-
976
- .pf-v5-c-check.pf-m-standalone {
977
- --pf-v5-c-check--GridGap: 0;
978
- --pf-v5-c-check__input--TranslateY: none;
979
- display: inline-grid;
1339
+ .pf-v5-c-chip {
1340
+ --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
1341
+ --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
1342
+ --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
1343
+ --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
1344
+ --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
1345
+ --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
1346
+ --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
1347
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
1348
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
980
1349
  }
981
1350
 
982
- .pf-v5-c-check__input {
983
- align-self: start;
984
- -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
985
- transform: translateY(var(--pf-v5-c-check__input--TranslateY));
1351
+ .pf-v5-c-chip {
1352
+ --pf-v5-c-chip--PaddingTop: var(--pf-v5-global--spacer--xs);
1353
+ --pf-v5-c-chip--PaddingRight: var(--pf-v5-global--spacer--sm);
1354
+ --pf-v5-c-chip--PaddingBottom: var(--pf-v5-global--spacer--xs);
1355
+ --pf-v5-c-chip--PaddingLeft: var(--pf-v5-global--spacer--sm);
1356
+ --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--Color--light-100);
1357
+ --pf-v5-c-chip--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
1358
+ --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--300);
1359
+ --pf-v5-c-chip--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
1360
+ --pf-v5-c-chip--before--BorderRadius: var(--pf-v5-c-chip--BorderRadius);
1361
+ --pf-v5-c-chip--m-overflow__text--Color: var(--pf-v5-global--primary-color--100);
1362
+ --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
1363
+ --pf-v5-c-chip--m-draggable--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
1364
+ --pf-v5-c-chip--m-draggable__icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
1365
+ --pf-v5-c-chip__content--FontSize: var(--pf-v5-global--FontSize--xs);
1366
+ --pf-v5-c-chip__content--ColumnGap: var(--pf-v5-global--spacer--xs);
1367
+ --pf-v5-c-chip__text--Color: var(--pf-v5-global--Color--100);
1368
+ --pf-v5-c-chip__text--MaxWidth: 16ch;
1369
+ --pf-v5-c-chip__c-badge--MarginLeft: var(--pf-v5-global--spacer--xs);
1370
+ --pf-v5-c-chip__actions--FontSize: var(--pf-v5-global--FontSize--xs);
1371
+ --pf-v5-c-chip__actions--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
1372
+ --pf-v5-c-chip__actions--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
1373
+ --pf-v5-c-chip__actions--c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
1374
+ --pf-v5-c-chip__actions--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
1375
+ --pf-v5-c-chip__actions--c-button--MarginTop: calc(var(--pf-v5-c-chip--PaddingTop) * -1);
1376
+ --pf-v5-c-chip__actions--c-button--MarginRight: calc(var(--pf-v5-c-chip--PaddingRight) / 2 * -1);
1377
+ --pf-v5-c-chip__actions--c-button--MarginBottom: calc(var(--pf-v5-c-chip--PaddingBottom) * -1);
1378
+ --pf-v5-c-chip__actions--c-button--FontSize: var(--pf-v5-global--FontSize--xs);
1379
+ --pf-v5-c-chip__icon--MarginLeft: var(--pf-v5-global--spacer--sm);
1380
+ color: var(--pf-v5-global--Color--100);
1381
+ position: relative;
1382
+ display: inline-flex;
1383
+ align-items: center;
1384
+ min-width: 0;
1385
+ padding-block-start: var(--pf-v5-c-chip--PaddingTop);
1386
+ padding-block-end: var(--pf-v5-c-chip--PaddingBottom);
1387
+ padding-inline-start: var(--pf-v5-c-chip--PaddingLeft);
1388
+ padding-inline-end: var(--pf-v5-c-chip--PaddingRight);
1389
+ list-style: none;
1390
+ background-color: var(--pf-v5-c-chip--BackgroundColor);
1391
+ border-radius: var(--pf-v5-c-chip--BorderRadius);
986
1392
  }
987
1393
 
988
- .pf-v5-c-check__label {
989
- font-size: var(--pf-v5-c-check__label--FontSize);
990
- font-weight: var(--pf-v5-c-check__label--FontWeight);
991
- line-height: var(--pf-v5-c-check__label--LineHeight);
992
- color: var(--pf-v5-c-check__label--Color);
1394
+ .pf-v5-c-chip::before {
1395
+ position: absolute;
1396
+ inset-block-start: 0;
1397
+ inset-block-end: 0;
1398
+ inset-inline-start: 0;
1399
+ inset-inline-end: 0;
1400
+ content: "";
1401
+ border: var(--pf-v5-c-chip--before--BorderWidth) solid var(--pf-v5-c-chip--before--BorderColor);
1402
+ border-radius: var(--pf-v5-c-chip--before--BorderRadius);
993
1403
  }
994
1404
 
995
- .pf-v5-c-check__description {
996
- grid-column: 2;
997
- font-size: var(--pf-v5-c-check__description--FontSize);
998
- color: var(--pf-v5-c-check__description--Color);
1405
+ .pf-v5-c-chip.pf-m-overflow {
1406
+ border: 0;
999
1407
  }
1000
1408
 
1001
- .pf-v5-c-check__body {
1002
- grid-column: 2;
1003
- margin-block-start: var(--pf-v5-c-check__body--MarginTop);
1409
+ .pf-v5-c-chip.pf-m-overflow .pf-v5-c-chip__text {
1410
+ color: var(--pf-v5-c-chip--m-overflow__text--Color);
1004
1411
  }
1005
1412
 
1006
- .pf-v5-c-check__label,
1007
- .pf-v5-c-check__input {
1008
- justify-self: start;
1413
+ .pf-v5-c-chip.pf-m-draggable {
1414
+ --pf-v5-c-chip--BackgroundColor: var(--pf-v5-c-chip--m-draggable--BackgroundColor);
1415
+ box-shadow: var(--pf-v5-c-chip--m-draggable--BoxShadow);
1009
1416
  }
1010
1417
 
1011
- label.pf-v5-c-check, .pf-v5-c-check__label,
1012
- .pf-v5-c-check__input {
1013
- cursor: pointer;
1418
+ .pf-v5-c-chip.pf-m-draggable .pf-v5-c-chip__icon {
1419
+ font-size: var(--pf-v5-c-chip--m-draggable__icon--FontSize);
1014
1420
  }
1015
1421
 
1016
- .pf-v5-c-check__label:disabled, .pf-v5-c-check__label.pf-m-disabled,
1017
- .pf-v5-c-check__input:disabled,
1018
- .pf-v5-c-check__input.pf-m-disabled {
1019
- --pf-v5-c-check__label--Color: var(--pf-v5-c-check__label--disabled--Color);
1020
- cursor: not-allowed;
1021
- }
1022
-
1023
- .pf-v5-c-check__label-required {
1024
- margin-inline-start: var(--pf-v5-c-check__label-required--MarginLeft);
1025
- font-size: var(--pf-v5-c-check__label-required--FontSize);
1026
- color: var(--pf-v5-c-check__label-required--Color);
1027
- }
1028
-
1029
- .pf-v5-c-chip-group {
1030
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
1031
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
1032
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
1033
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
1034
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
1035
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
1036
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
1037
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
1038
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
1422
+ .pf-v5-c-chip__text {
1423
+ overflow: hidden;
1424
+ text-overflow: ellipsis;
1425
+ white-space: nowrap;
1426
+ position: relative;
1427
+ max-width: var(--pf-v5-c-chip__text--MaxWidth);
1428
+ color: var(--pf-v5-c-chip__text--Color);
1039
1429
  }
1040
1430
 
1041
- .pf-v5-c-chip-group {
1042
- color: var(--pf-v5-global--Color--100);
1043
- --pf-v5-c-chip-group--PaddingTop: 0;
1044
- --pf-v5-c-chip-group--PaddingRight: 0;
1045
- --pf-v5-c-chip-group--PaddingBottom: 0;
1046
- --pf-v5-c-chip-group--PaddingLeft: 0;
1047
- --pf-v5-c-chip-group--RowGap: var(--pf-v5-global--spacer--sm);
1048
- --pf-v5-c-chip-group--ColumnGap: 0;
1049
- --pf-v5-c-chip-group__main--RowGap: var(--pf-v5-global--spacer--xs);
1050
- --pf-v5-c-chip-group__main--ColumnGap: var(--pf-v5-global--spacer--sm);
1051
- --pf-v5-c-chip-group__list--RowGap: var(--pf-v5-global--spacer--xs);
1052
- --pf-v5-c-chip-group__list--ColumnGap: var(--pf-v5-global--spacer--xs);
1053
- --pf-v5-c-chip-group--m-category--PaddingTop: var(--pf-v5-global--spacer--xs);
1054
- --pf-v5-c-chip-group--m-category--PaddingRight: var(--pf-v5-global--spacer--xs);
1055
- --pf-v5-c-chip-group--m-category--PaddingBottom: var(--pf-v5-global--spacer--xs);
1056
- --pf-v5-c-chip-group--m-category--PaddingLeft: var(--pf-v5-global--spacer--sm);
1057
- --pf-v5-c-chip-group--m-category--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
1058
- --pf-v5-c-chip-group--m-category--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
1059
- --pf-v5-c-chip-group__label--FontSize: var(--pf-v5-global--FontSize--sm);
1060
- --pf-v5-c-chip-group__label--MaxWidth: 18ch;
1061
- --pf-v5-c-chip-group__close--MarginTop: calc(var(--pf-v5-global--spacer--xs) * -1);
1062
- --pf-v5-c-chip-group__close--MarginBottom: calc(var(--pf-v5-global--spacer--xs) * -1);
1063
- row-gap: var(--pf-v5-c-chip-group--RowGap);
1064
- column-gap: var(--pf-v5-c-chip-group--ColumnGap);
1065
- max-width: 100%;
1066
- padding-block-start: var(--pf-v5-c-chip-group--PaddingTop);
1067
- padding-block-end: var(--pf-v5-c-chip-group--PaddingBottom);
1068
- padding-inline-start: var(--pf-v5-c-chip-group--PaddingLeft);
1069
- padding-inline-end: var(--pf-v5-c-chip-group--PaddingRight);
1431
+ .pf-v5-c-chip__text .pf-v5-c-badge {
1432
+ margin-inline-start: var(--pf-v5-c-chip__c-badge--MarginLeft);
1070
1433
  }
1071
1434
 
1072
- .pf-v5-c-chip-group.pf-m-category {
1073
- --pf-v5-c-chip-group--PaddingTop: var(--pf-v5-c-chip-group--m-category--PaddingTop);
1074
- --pf-v5-c-chip-group--PaddingRight: var(--pf-v5-c-chip-group--m-category--PaddingRight);
1075
- --pf-v5-c-chip-group--PaddingBottom: var(--pf-v5-c-chip-group--m-category--PaddingBottom);
1076
- --pf-v5-c-chip-group--PaddingLeft: var(--pf-v5-c-chip-group--m-category--PaddingLeft);
1077
- background-color: var(--pf-v5-c-chip-group--m-category--BackgroundColor);
1078
- border-radius: var(--pf-v5-c-chip-group--m-category--BorderRadius);
1435
+ .pf-v5-c-chip__icon + .pf-v5-c-chip__text,
1436
+ .pf-v5-c-chip__text + .pf-v5-c-chip__icon {
1437
+ margin-inline-start: var(--pf-v5-c-chip__icon--MarginLeft);
1079
1438
  }
1080
1439
 
1081
- .pf-v5-c-chip-group__main {
1440
+ .pf-v5-c-chip__content {
1082
1441
  display: flex;
1083
- flex: 1;
1084
- flex-wrap: wrap;
1085
- row-gap: var(--pf-v5-c-chip-group__main--RowGap);
1086
- column-gap: var(--pf-v5-c-chip-group__main--ColumnGap);
1087
- align-items: baseline;
1088
- min-width: 0;
1089
- }
1090
-
1091
- .pf-v5-c-chip-group,
1092
- .pf-v5-c-chip-group__list {
1093
- display: inline-flex;
1094
- flex-wrap: wrap;
1442
+ column-gap: var(--pf-v5-c-chip__content--ColumnGap);
1095
1443
  align-items: center;
1096
- min-width: 0;
1097
- }
1098
-
1099
- .pf-v5-c-chip-group__list {
1100
- row-gap: var(--pf-v5-c-chip-group__list--RowGap);
1101
- column-gap: var(--pf-v5-c-chip-group__list--ColumnGap);
1444
+ font-size: var(--pf-v5-c-chip__content--FontSize);
1102
1445
  }
1103
1446
 
1104
- .pf-v5-c-chip-group__list-item {
1105
- display: inline-flex;
1106
- min-width: 0;
1447
+ .pf-v5-c-chip__actions {
1448
+ font-size: var(--pf-v5-c-chip__actions--FontSize);
1107
1449
  }
1108
1450
 
1109
- .pf-v5-c-chip-group__label {
1110
- overflow: hidden;
1111
- text-overflow: ellipsis;
1112
- white-space: nowrap;
1113
- max-width: var(--pf-v5-c-chip-group__label--MaxWidth);
1114
- font-size: var(--pf-v5-c-chip-group__label--FontSize);
1451
+ .pf-v5-c-chip__actions .pf-v5-c-button {
1452
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-chip__actions--c-button--PaddingTop);
1453
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-chip__actions--c-button--PaddingRight);
1454
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-chip__actions--c-button--PaddingBottom);
1455
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-chip__actions--c-button--PaddingLeft);
1456
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-chip__actions--c-button--FontSize);
1457
+ margin-block-start: var(--pf-v5-c-chip__actions--c-button--MarginTop);
1458
+ margin-block-end: var(--pf-v5-c-chip__actions--c-button--MarginBottom);
1459
+ margin-inline-end: var(--pf-v5-c-chip__actions--c-button--MarginRight);
1460
+ line-height: 1;
1115
1461
  }
1116
1462
 
1117
- .pf-v5-c-chip-group__close {
1118
- display: flex;
1119
- align-self: flex-start;
1120
- margin-block-start: var(--pf-v5-c-chip-group__close--MarginTop);
1121
- margin-block-end: var(--pf-v5-c-chip-group__close--MarginBottom);
1463
+ :where(.pf-v5-theme-dark) .pf-v5-c-chip {
1464
+ --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
1465
+ --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--100);
1466
+ --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--palette--black-600);
1122
1467
  }
1123
1468
 
1124
1469
  .pf-v5-c-button {
@@ -1751,222 +2096,216 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
1751
2096
  border-block-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-700);
1752
2097
  }
1753
2098
 
1754
- .pf-v5-c-text-input-group {
1755
- --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
1756
- --pf-v5-c-text-input-group__text--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
1757
- --pf-v5-c-text-input-group__text--before--BorderColor: var(--pf-v5-global--BorderColor--300);
1758
- --pf-v5-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
1759
- --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
1760
- --pf-v5-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
1761
- --pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
1762
- --pf-v5-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
1763
- --pf-v5-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-v5-global--spacer--sm);
1764
- --pf-v5-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-v5-global--spacer--xl);
1765
- --pf-v5-c-text-input-group__main--RowGap: var(--pf-v5-global--spacer--xs);
1766
- --pf-v5-c-text-input-group__main--ColumnGap: var(--pf-v5-global--spacer--sm);
1767
- --pf-v5-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-v5-global--spacer--xs);
1768
- --pf-v5-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-v5-global--spacer--xs);
1769
- --pf-v5-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-v5-global--spacer--xs);
1770
- --pf-v5-c-text-input-group__text-input--PaddingTop: var(--pf-v5-global--spacer--form-element);
1771
- --pf-v5-c-text-input-group__text-input--PaddingRight: var(--pf-v5-global--spacer--sm);
1772
- --pf-v5-c-text-input-group__text-input--PaddingBottom: var(--pf-v5-global--spacer--form-element);
1773
- --pf-v5-c-text-input-group__text-input--PaddingLeft: var(--pf-v5-global--spacer--sm);
1774
- --pf-v5-c-text-input-group__text-input--MinWidth: 12ch;
1775
- --pf-v5-c-text-input-group__text-input--m-hint--Color: var(--pf-v5-global--Color--200);
1776
- --pf-v5-c-text-input-group__text-input--placeholder--Color: var(--pf-v5-global--Color--200);
1777
- --pf-v5-c-text-input-group__text-input--BackgroundColor: transparent;
1778
- --pf-v5-c-text-input-group__icon--Left: var(--pf-v5-global--spacer--sm);
1779
- --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-global--icon--Color--dark);
1780
- --pf-v5-c-text-input-group__icon--TranslateY: -50%;
1781
- --pf-v5-c-text-input-group__utilities--MarginRight: var(--pf-v5-global--spacer--sm);
1782
- --pf-v5-c-text-input-group__utilities--MarginLeft: var(--pf-v5-global--spacer--xs);
1783
- --pf-v5-c-text-input-group__utilities--child--MarginLeft: var(--pf-v5-global--spacer--xs);
1784
- --pf-v5-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--xs);
1785
- --pf-v5-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-v5-global--spacer--xs);
1786
- --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
1787
- --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
1788
- position: relative;
1789
- display: flex;
1790
- width: 100%;
1791
- color: var(--pf-v5-c-text-input-group--Color, inherit);
1792
- background-color: var(--pf-v5-c-text-input-group--BackgroundColor);
2099
+ .pf-v5-c-spinner {
2100
+ --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
2101
+ --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
2102
+ --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
2103
+ --pf-v5-c-spinner--Color: var(--pf-v5-global--primary-color--100);
2104
+ --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
2105
+ --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
2106
+ --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
2107
+ --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
2108
+ --pf-v5-c-spinner--m-inline--diameter: 1em;
2109
+ width: var(--pf-v5-c-spinner--Width);
2110
+ height: var(--pf-v5-c-spinner--Height);
2111
+ overflow: hidden;
1793
2112
  }
1794
2113
 
1795
- .pf-v5-c-text-input-group:hover {
1796
- --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-c-text-input-group--hover__text--after--BorderBottomColor);
2114
+ .pf-v5-c-spinner.pf-m-inline {
2115
+ --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
1797
2116
  }
1798
2117
 
1799
- .pf-v5-c-text-input-group.pf-m-disabled {
1800
- --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
1801
- --pf-v5-c-text-input-group__text--after--BorderBottomWidth: 0;
1802
- --pf-v5-c-text-input-group--Color: var(--pf-v5-c-text-input-group--m-disabled--Color);
1803
- --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-c-text-input-group--m-disabled--Color);
1804
- --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-c-text-input-group--m-disabled--BackgroundColor);
1805
- pointer-events: none;
2118
+ .pf-v5-c-spinner.pf-m-sm {
2119
+ --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
1806
2120
  }
1807
2121
 
1808
- .pf-v5-c-text-input-group.pf-m-plain {
1809
- --pf-v5-c-text-input-group--BackgroundColor: transparent;
2122
+ .pf-v5-c-spinner.pf-m-md {
2123
+ --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
1810
2124
  }
1811
2125
 
1812
- .pf-v5-c-text-input-group.pf-m-plain .pf-v5-c-text-input-group__text::before, .pf-v5-c-text-input-group.pf-m-plain .pf-v5-c-text-input-group__text::after {
1813
- border: 0;
2126
+ .pf-v5-c-spinner.pf-m-lg {
2127
+ --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
1814
2128
  }
1815
2129
 
1816
- .pf-v5-c-text-input-group__main {
1817
- display: flex;
1818
- flex: 1;
1819
- flex-wrap: wrap;
1820
- gap: var(--pf-v5-c-text-input-group__main--RowGap) var(--pf-v5-c-text-input-group__main--ColumnGap);
1821
- min-width: 0;
2130
+ .pf-v5-c-spinner.pf-m-xl {
2131
+ --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
1822
2132
  }
1823
2133
 
1824
- .pf-v5-c-text-input-group__main.pf-m-icon {
1825
- --pf-v5-c-text-input-group__text-input--PaddingLeft: var(--pf-v5-c-text-input-group__main--m-icon__text-input--PaddingLeft);
2134
+ svg.pf-v5-c-spinner {
2135
+ --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
2136
+ --pf-v5-c-spinner--AnimationDuration: 1.4s;
2137
+ --pf-v5-c-spinner--AnimationTimingFunction: linear;
2138
+ --pf-v5-c-spinner--stroke-width: 10;
2139
+ --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
2140
+ --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
2141
+ --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
2142
+ --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
2143
+ --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
2144
+ --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
2145
+ --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
2146
+ animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
1826
2147
  }
1827
2148
 
1828
- .pf-v5-c-text-input-group__main > :first-child:not(.pf-v5-c-text-input-group__text) {
1829
- margin-inline-start: var(--pf-v5-c-text-input-group__main--first-child--not--text-input--MarginLeft);
2149
+ svg.pf-v5-c-spinner.pf-m-sm {
2150
+ --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
1830
2151
  }
1831
2152
 
1832
- .pf-v5-c-text-input-group__main .pf-v5-c-chip-group__main {
1833
- padding-block-start: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingTop);
1834
- padding-block-end: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingBottom);
1835
- padding-inline-end: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingRight);
2153
+ svg.pf-v5-c-spinner.pf-m-md {
2154
+ --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
1836
2155
  }
1837
2156
 
1838
- .pf-v5-c-text-input-group__text {
1839
- display: inline-grid;
1840
- flex: 1;
1841
- grid-template-areas: "text-input";
1842
- grid-template-columns: 1fr;
2157
+ svg.pf-v5-c-spinner.pf-m-lg {
2158
+ --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
1843
2159
  }
1844
2160
 
1845
- .pf-v5-c-text-input-group__text::before, .pf-v5-c-text-input-group__text::after {
1846
- position: absolute;
1847
- inset: 0;
1848
- pointer-events: none;
1849
- content: "";
2161
+ svg.pf-v5-c-spinner.pf-m-xl {
2162
+ --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
1850
2163
  }
1851
2164
 
1852
- .pf-v5-c-text-input-group__text::before {
1853
- border: var(--pf-v5-c-text-input-group__text--before--BorderWidth) solid var(--pf-v5-c-text-input-group__text--before--BorderColor);
2165
+ .pf-v5-c-spinner__path {
2166
+ width: 100%;
2167
+ height: 100%;
2168
+ stroke: var(--pf-v5-c-spinner--Color);
2169
+ stroke-dasharray: 283;
2170
+ stroke-dashoffset: 280;
2171
+ stroke-linecap: round;
2172
+ stroke-width: var(--pf-v5-c-spinner--stroke-width);
2173
+ transform-origin: 50% 50%;
2174
+ animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
1854
2175
  }
1855
2176
 
1856
- .pf-v5-c-text-input-group__text::after {
1857
- border-block-end: var(--pf-v5-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-v5-c-text-input-group__text--after--BorderBottomColor);
1858
- }
1859
-
1860
- .pf-v5-c-text-input-group__text:focus-within {
1861
- --pf-v5-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth);
1862
- --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomColor);
2177
+ @keyframes pf-v5-c-spinner-animation-rotate {
2178
+ 0% {
2179
+ transform: rotate(0deg);
2180
+ }
2181
+ 100% {
2182
+ transform: rotate(360deg);
2183
+ }
2184
+ }
2185
+ @keyframes pf-v5-c-spinner-animation-dash {
2186
+ 0% {
2187
+ stroke-dashoffset: 280;
2188
+ transform: rotate(0);
2189
+ }
2190
+ 15% {
2191
+ stroke-width: calc(var(--pf-v5-c-spinner__path--StrokeWidth) - 4);
2192
+ }
2193
+ 40% {
2194
+ stroke-dasharray: 220;
2195
+ stroke-dashoffset: 150;
2196
+ }
2197
+ 100% {
2198
+ stroke-dashoffset: 280;
2199
+ transform: rotate(720deg);
2200
+ }
2201
+ }
2202
+ .pf-v5-c-breadcrumb {
2203
+ --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--sm);
2204
+ --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-v5-global--LineHeight--sm);
2205
+ --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-v5-global--spacer--sm);
2206
+ --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--icon--Color--dark);
2207
+ --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-v5-global--spacer--sm);
2208
+ --pf-v5-c-breadcrumb__item-divider--FontSize: var(--pf-v5-global--FontSize--sm);
2209
+ --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-global--link--Color);
2210
+ --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-global--link--TextDecoration);
2211
+ --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-v5-global--link--Color--hover);
2212
+ --pf-v5-c-breadcrumb__link--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
2213
+ --pf-v5-c-breadcrumb__link--m-current--Color: var(--pf-v5-global--Color--100);
2214
+ --pf-v5-c-breadcrumb__link--BackgroundColor: transparent;
2215
+ --pf-v5-c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--sm);
2216
+ --pf-v5-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
2217
+ --pf-v5-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v5-c-breadcrumb__item--MarginRight) * -1);
2218
+ --pf-v5-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
2219
+ --pf-v5-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v5-c-breadcrumb__item-divider--MarginRight) * -1);
2220
+ --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-v5-global--LineHeight--sm);
2221
+ display: inline-flex;
1863
2222
  }
1864
2223
 
1865
- .pf-v5-c-text-input-group__icon {
1866
- position: absolute;
1867
- inset-block-start: 50%;
1868
- inset-inline-start: var(--pf-v5-c-text-input-group__icon--Left);
1869
- color: var(--pf-v5-c-text-input-group__icon--Color);
1870
- transform: translateY(var(--pf-v5-c-text-input-group__icon--TranslateY));
2224
+ .pf-v5-c-breadcrumb__list {
2225
+ display: flex;
2226
+ flex-wrap: wrap;
2227
+ align-items: center;
1871
2228
  }
1872
2229
 
1873
- .pf-v5-c-text-input-group__text-input {
1874
- overflow: hidden;
1875
- text-overflow: ellipsis;
2230
+ .pf-v5-c-breadcrumb__item {
2231
+ display: flex;
2232
+ align-items: baseline;
2233
+ font-size: var(--pf-v5-c-breadcrumb__item--FontSize);
2234
+ font-weight: var(--pf-v5-c-breadcrumb__item--FontWeight);
2235
+ line-height: var(--pf-v5-c-breadcrumb__item--LineHeight);
1876
2236
  white-space: nowrap;
1877
- position: relative;
1878
- width: 100%;
1879
- min-width: var(--pf-v5-c-text-input-group__text-input--MinWidth);
1880
- padding-block-start: var(--pf-v5-c-text-input-group__text-input--PaddingTop);
1881
- padding-block-end: var(--pf-v5-c-text-input-group__text-input--PaddingBottom);
1882
- padding-inline-start: var(--pf-v5-c-text-input-group__text-input--PaddingLeft);
1883
- padding-inline-end: var(--pf-v5-c-text-input-group__text-input--PaddingRight);
1884
- background-color: var(--pf-v5-c-text-input-group__text-input--BackgroundColor);
1885
- border: 0;
2237
+ list-style: none;
1886
2238
  }
1887
2239
 
1888
- .pf-v5-c-text-input-group__text-input, .pf-v5-c-text-input-group__text-input.pf-m-hint {
1889
- grid-area: text-input;
2240
+ .pf-v5-c-breadcrumb__item:not(:last-child) {
2241
+ margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
1890
2242
  }
1891
2243
 
1892
- .pf-v5-c-text-input-group__text-input.pf-m-hint {
1893
- color: var(--pf-v5-c-text-input-group__text-input--m-hint--Color);
2244
+ .pf-v5-c-breadcrumb__item-divider {
2245
+ margin-inline-end: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
2246
+ font-size: var(--pf-v5-c-breadcrumb__item-divider--FontSize);
2247
+ line-height: 1;
2248
+ color: var(--pf-v5-c-breadcrumb__item-divider--Color);
1894
2249
  }
1895
2250
 
1896
- .pf-v5-c-text-input-group__text-input::placeholder {
1897
- color: var(--pf-v5-c-text-input-group__text-input--placeholder--Color);
2251
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
2252
+ scale: -1 1;
1898
2253
  }
1899
2254
 
1900
- .pf-v5-c-text-input-group__utilities {
1901
- display: flex;
1902
- align-items: center;
1903
- margin-inline-start: var(--pf-v5-c-text-input-group__utilities--MarginLeft);
1904
- margin-inline-end: var(--pf-v5-c-text-input-group__utilities--MarginRight);
2255
+ .pf-v5-c-breadcrumb__link {
2256
+ font-size: inherit;
2257
+ font-weight: var(--pf-v5-c-breadcrumb__link--FontWeight);
2258
+ line-height: inherit;
2259
+ color: var(--pf-v5-c-breadcrumb__link--Color);
2260
+ text-decoration: var(--pf-v5-c-breadcrumb__link--TextDecoration);
2261
+ word-break: break-word;
2262
+ background-color: var(--pf-v5-c-breadcrumb__link--BackgroundColor);
1905
2263
  }
1906
2264
 
1907
- .pf-v5-c-text-input-group__utilities > * + * {
1908
- margin-inline-start: var(--pf-v5-c-text-input-group__utilities--child--MarginLeft);
2265
+ .pf-v5-c-breadcrumb__link:hover {
2266
+ --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-c-breadcrumb__link--hover--Color);
2267
+ --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-c-breadcrumb__link--hover--TextDecoration);
1909
2268
  }
1910
2269
 
1911
- .pf-v5-c-text-input-group__utilities .pf-v5-c-button {
1912
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-text-input-group__utilities--c-button--PaddingRight);
1913
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-text-input-group__utilities--c-button--PaddingLeft);
2270
+ .pf-v5-c-breadcrumb__link.pf-m-current {
2271
+ cursor: default;
1914
2272
  }
1915
2273
 
1916
- .pf-v5-c-text-input-group__group {
1917
- display: flex;
2274
+ .pf-v5-c-breadcrumb__link.pf-m-current, .pf-v5-c-breadcrumb__link.pf-m-current:hover {
2275
+ color: var(--pf-v5-c-breadcrumb__link--m-current--Color);
2276
+ text-decoration: none;
1918
2277
  }
1919
2278
 
1920
- :where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
1921
- --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
1922
- --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
1923
- --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
1924
- --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
1925
- --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
2279
+ button.pf-v5-c-breadcrumb__link {
2280
+ border: none;
1926
2281
  }
1927
2282
 
1928
- .pf-v5-c-badge {
1929
- --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
1930
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
1931
- --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
1932
- --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
1933
- --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
1934
- --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
1935
- --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
1936
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
1937
- --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
1938
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
1939
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
1940
- display: inline-block;
1941
- min-width: var(--pf-v5-c-badge--MinWidth);
1942
- padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
1943
- padding-inline-end: var(--pf-v5-c-badge--PaddingRight);
1944
- font-size: var(--pf-v5-c-badge--FontSize);
1945
- font-weight: var(--pf-v5-c-badge--FontWeight);
1946
- color: var(--pf-v5-c-badge--Color);
1947
- text-align: center;
1948
- white-space: nowrap;
1949
- background-color: var(--pf-v5-c-badge--BackgroundColor);
1950
- border-radius: var(--pf-v5-c-badge--BorderRadius);
2283
+ .pf-v5-c-breadcrumb__dropdown {
2284
+ margin-block-start: var(--pf-v5-c-breadcrumb__dropdown--MarginTop);
2285
+ margin-block-end: var(--pf-v5-c-breadcrumb__dropdown--MarginBottom);
2286
+ margin-inline-start: var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
2287
+ margin-inline-end: var(--pf-v5-c-breadcrumb__dropdown--MarginRight);
1951
2288
  }
1952
2289
 
1953
- .pf-v5-c-badge.pf-m-read {
1954
- --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
1955
- --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
2290
+ .pf-v5-c-breadcrumb__dropdown .pf-v5-c-dropdown__toggle {
2291
+ line-height: var(--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
1956
2292
  }
1957
2293
 
1958
- .pf-v5-c-badge.pf-m-unread {
1959
- --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
1960
- --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
2294
+ .pf-v5-c-breadcrumb__heading {
2295
+ display: inline;
2296
+ font-size: var(--pf-v5-c-breadcrumb__heading--FontSize);
1961
2297
  }
1962
2298
 
1963
- :where(.pf-v5-theme-dark) .pf-v5-c-badge {
1964
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
1965
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
1966
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
2299
+ .pf-v5-c-breadcrumb__link,
2300
+ .pf-v5-c-breadcrumb__heading {
2301
+ white-space: normal;
1967
2302
  }
1968
2303
 
1969
- .pf-v5-c-chip {
2304
+ .pf-v5-c-breadcrumb__list > :first-child .pf-v5-c-breadcrumb__item-divider {
2305
+ display: none;
2306
+ }
2307
+
2308
+ .pf-v5-c-menu {
1970
2309
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
1971
2310
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
1972
2311
  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
@@ -1978,1722 +2317,1486 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
1978
2317
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
1979
2318
  }
1980
2319
 
1981
- .pf-v5-c-chip {
1982
- --pf-v5-c-chip--PaddingTop: var(--pf-v5-global--spacer--xs);
1983
- --pf-v5-c-chip--PaddingRight: var(--pf-v5-global--spacer--sm);
1984
- --pf-v5-c-chip--PaddingBottom: var(--pf-v5-global--spacer--xs);
1985
- --pf-v5-c-chip--PaddingLeft: var(--pf-v5-global--spacer--sm);
1986
- --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--Color--light-100);
1987
- --pf-v5-c-chip--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
1988
- --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--300);
1989
- --pf-v5-c-chip--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
1990
- --pf-v5-c-chip--before--BorderRadius: var(--pf-v5-c-chip--BorderRadius);
1991
- --pf-v5-c-chip--m-overflow__text--Color: var(--pf-v5-global--primary-color--100);
1992
- --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
1993
- --pf-v5-c-chip--m-draggable--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
1994
- --pf-v5-c-chip--m-draggable__icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
1995
- --pf-v5-c-chip__content--FontSize: var(--pf-v5-global--FontSize--xs);
1996
- --pf-v5-c-chip__content--ColumnGap: var(--pf-v5-global--spacer--xs);
1997
- --pf-v5-c-chip__text--Color: var(--pf-v5-global--Color--100);
1998
- --pf-v5-c-chip__text--MaxWidth: 16ch;
1999
- --pf-v5-c-chip__c-badge--MarginLeft: var(--pf-v5-global--spacer--xs);
2000
- --pf-v5-c-chip__actions--FontSize: var(--pf-v5-global--FontSize--xs);
2001
- --pf-v5-c-chip__actions--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
2002
- --pf-v5-c-chip__actions--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
2003
- --pf-v5-c-chip__actions--c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
2004
- --pf-v5-c-chip__actions--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
2005
- --pf-v5-c-chip__actions--c-button--MarginTop: calc(var(--pf-v5-c-chip--PaddingTop) * -1);
2006
- --pf-v5-c-chip__actions--c-button--MarginRight: calc(var(--pf-v5-c-chip--PaddingRight) / 2 * -1);
2007
- --pf-v5-c-chip__actions--c-button--MarginBottom: calc(var(--pf-v5-c-chip--PaddingBottom) * -1);
2008
- --pf-v5-c-chip__actions--c-button--FontSize: var(--pf-v5-global--FontSize--xs);
2009
- --pf-v5-c-chip__icon--MarginLeft: var(--pf-v5-global--spacer--sm);
2010
- color: var(--pf-v5-global--Color--100);
2011
- position: relative;
2012
- display: inline-flex;
2013
- align-items: center;
2014
- min-width: 0;
2015
- padding-block-start: var(--pf-v5-c-chip--PaddingTop);
2016
- padding-block-end: var(--pf-v5-c-chip--PaddingBottom);
2017
- padding-inline-start: var(--pf-v5-c-chip--PaddingLeft);
2018
- padding-inline-end: var(--pf-v5-c-chip--PaddingRight);
2019
- list-style: none;
2020
- background-color: var(--pf-v5-c-chip--BackgroundColor);
2021
- border-radius: var(--pf-v5-c-chip--BorderRadius);
2320
+ .pf-v5-c-menu__group, .pf-v5-c-menu__list-item, .pf-v5-c-menu__list {
2321
+ --pf-v5-hidden-visible--hidden--Display: none;
2322
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
2323
+ display: var(--pf-v5-hidden-visible--Display);
2022
2324
  }
2023
2325
 
2024
- .pf-v5-c-chip::before {
2025
- position: absolute;
2026
- inset-block-start: 0;
2027
- inset-block-end: 0;
2028
- inset-inline-start: 0;
2029
- inset-inline-end: 0;
2030
- content: "";
2031
- border: var(--pf-v5-c-chip--before--BorderWidth) solid var(--pf-v5-c-chip--before--BorderColor);
2032
- border-radius: var(--pf-v5-c-chip--before--BorderRadius);
2326
+ .pf-m-hidden.pf-v5-c-menu__group, .pf-m-hidden.pf-v5-c-menu__list-item, .pf-m-hidden.pf-v5-c-menu__list {
2327
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
2033
2328
  }
2034
2329
 
2035
- .pf-v5-c-chip.pf-m-overflow {
2036
- border: 0;
2330
+ @media screen and (min-width: 576px) {
2331
+ .pf-m-hidden-on-sm.pf-v5-c-menu__group, .pf-m-hidden-on-sm.pf-v5-c-menu__list-item, .pf-m-hidden-on-sm.pf-v5-c-menu__list {
2332
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
2333
+ }
2334
+ .pf-m-visible-on-sm.pf-v5-c-menu__group, .pf-m-visible-on-sm.pf-v5-c-menu__list-item, .pf-m-visible-on-sm.pf-v5-c-menu__list {
2335
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
2336
+ }
2037
2337
  }
2038
-
2039
- .pf-v5-c-chip.pf-m-overflow .pf-v5-c-chip__text {
2040
- color: var(--pf-v5-c-chip--m-overflow__text--Color);
2338
+ @media screen and (min-width: 768px) {
2339
+ .pf-m-hidden-on-md.pf-v5-c-menu__group, .pf-m-hidden-on-md.pf-v5-c-menu__list-item, .pf-m-hidden-on-md.pf-v5-c-menu__list {
2340
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
2341
+ }
2342
+ .pf-m-visible-on-md.pf-v5-c-menu__group, .pf-m-visible-on-md.pf-v5-c-menu__list-item, .pf-m-visible-on-md.pf-v5-c-menu__list {
2343
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
2344
+ }
2345
+ }
2346
+ @media screen and (min-width: 992px) {
2347
+ .pf-m-hidden-on-lg.pf-v5-c-menu__group, .pf-m-hidden-on-lg.pf-v5-c-menu__list-item, .pf-m-hidden-on-lg.pf-v5-c-menu__list {
2348
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
2349
+ }
2350
+ .pf-m-visible-on-lg.pf-v5-c-menu__group, .pf-m-visible-on-lg.pf-v5-c-menu__list-item, .pf-m-visible-on-lg.pf-v5-c-menu__list {
2351
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
2352
+ }
2353
+ }
2354
+ @media screen and (min-width: 1200px) {
2355
+ .pf-m-hidden-on-xl.pf-v5-c-menu__group, .pf-m-hidden-on-xl.pf-v5-c-menu__list-item, .pf-m-hidden-on-xl.pf-v5-c-menu__list {
2356
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
2357
+ }
2358
+ .pf-m-visible-on-xl.pf-v5-c-menu__group, .pf-m-visible-on-xl.pf-v5-c-menu__list-item, .pf-m-visible-on-xl.pf-v5-c-menu__list {
2359
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
2360
+ }
2361
+ }
2362
+ @media screen and (min-width: 1450px) {
2363
+ .pf-m-hidden-on-2xl.pf-v5-c-menu__group, .pf-m-hidden-on-2xl.pf-v5-c-menu__list-item, .pf-m-hidden-on-2xl.pf-v5-c-menu__list {
2364
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
2365
+ }
2366
+ .pf-m-visible-on-2xl.pf-v5-c-menu__group, .pf-m-visible-on-2xl.pf-v5-c-menu__list-item, .pf-m-visible-on-2xl.pf-v5-c-menu__list {
2367
+ --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
2368
+ }
2369
+ }
2370
+ .pf-v5-c-menu {
2371
+ color: var(--pf-v5-global--Color--100);
2372
+ --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2373
+ --pf-v5-c-menu--BoxShadow: var(--pf-v5-global--BoxShadow--md);
2374
+ --pf-v5-c-menu--MinWidth: auto;
2375
+ --pf-v5-c-menu--Width: auto;
2376
+ --pf-v5-c-menu--ZIndex: var(--pf-v5-global--ZIndex--sm);
2377
+ --pf-v5-c-menu--Top: auto;
2378
+ --pf-v5-c-menu--m-flyout__menu--Top: calc(var(--pf-v5-c-menu__list--PaddingTop) * -1 + var(--pf-v5-c-menu--m-flyout__menu--top-offset));
2379
+ --pf-v5-c-menu--m-flyout__menu--Right: auto;
2380
+ --pf-v5-c-menu--m-flyout__menu--Bottom: auto;
2381
+ --pf-v5-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-v5-c-menu--m-flyout__menu--left-offset));
2382
+ --pf-v5-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-v5-c-menu__list--PaddingTop) * -1);
2383
+ --pf-v5-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-v5-c-menu--m-flyout__menu--m-left--right-offset));
2384
+ --pf-v5-c-menu--m-plain--BoxShadow: none;
2385
+ --pf-v5-c-menu--m-flyout__menu--top-offset: 0px;
2386
+ --pf-v5-c-menu--m-flyout__menu--left-offset: 0px;
2387
+ --pf-v5-c-menu--m-flyout__menu--m-left--right-offset: 0px;
2388
+ --pf-v5-c-menu__content--Height: auto;
2389
+ --pf-v5-c-menu__content--MaxHeight: none;
2390
+ --pf-v5-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
2391
+ --pf-v5-c-menu--c-divider--MarginTop: 0;
2392
+ --pf-v5-c-menu--c-divider--MarginBottom: 0;
2393
+ --pf-v5-c-menu__list--c-divider--MarginTop: var(--pf-v5-global--spacer--sm);
2394
+ --pf-v5-c-menu__list--c-divider--MarginBottom: var(--pf-v5-global--spacer--sm);
2395
+ --pf-v5-c-menu__header--PaddingTop: var(--pf-v5-global--spacer--md);
2396
+ --pf-v5-c-menu__header--PaddingRight: var(--pf-v5-global--spacer--md);
2397
+ --pf-v5-c-menu__header--PaddingBottom: var(--pf-v5-global--spacer--md);
2398
+ --pf-v5-c-menu__header--PaddingLeft: var(--pf-v5-global--spacer--md);
2399
+ --pf-v5-c-menu__header--c-menu__item--MarginTop: calc(var(--pf-v5-c-menu__header--PaddingTop) * -1 / 2);
2400
+ --pf-v5-c-menu__header--c-menu__item--MarginRight: calc(var(--pf-v5-c-menu__header--PaddingRight) * -1 / 2);
2401
+ --pf-v5-c-menu__header--c-menu__item--MarginBottom: calc(var(--pf-v5-c-menu__header--PaddingBottom) * -1 / 2);
2402
+ --pf-v5-c-menu__header--c-menu__item--MarginLeft: calc(var(--pf-v5-c-menu__header--PaddingLeft) * -1 / 2);
2403
+ --pf-v5-c-menu__header--c-menu__item--PaddingTop: var(--pf-v5-global--spacer--sm);
2404
+ --pf-v5-c-menu__header--c-menu__item--PaddingRight: var(--pf-v5-global--spacer--md);
2405
+ --pf-v5-c-menu__header--c-menu__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
2406
+ --pf-v5-c-menu__header--c-menu__item--PaddingLeft: var(--pf-v5-global--spacer--md);
2407
+ --pf-v5-c-menu__header--c-menu__item--BackgroundColor: transparent;
2408
+ --pf-v5-c-menu__header--c-menu__item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
2409
+ --pf-v5-c-menu__header--c-menu__item--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
2410
+ --pf-v5-c-menu__search--PaddingTop: var(--pf-v5-global--spacer--md);
2411
+ --pf-v5-c-menu__search--PaddingRight: var(--pf-v5-global--spacer--md);
2412
+ --pf-v5-c-menu__search--PaddingBottom: var(--pf-v5-global--spacer--md);
2413
+ --pf-v5-c-menu__search--PaddingLeft: var(--pf-v5-global--spacer--md);
2414
+ --pf-v5-c-menu__header__search--PaddingTop: 0;
2415
+ --pf-v5-c-menu__list--Display: block;
2416
+ --pf-v5-c-menu__list--PaddingTop: var(--pf-v5-global--spacer--sm);
2417
+ --pf-v5-c-menu__list--PaddingBottom: var(--pf-v5-global--spacer--sm);
2418
+ --pf-v5-c-menu__list-item--Display: flex;
2419
+ --pf-v5-c-menu__list-item--Color: var(--pf-v5-global--Color--100);
2420
+ --pf-v5-c-menu__list-item--BackgroundColor: transparent;
2421
+ --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
2422
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
2423
+ --pf-v5-c-menu__list-item--m-loading--PaddingTop: var(--pf-v5-global--spacer--sm);
2424
+ --pf-v5-c-menu__item--PaddingTop: var(--pf-v5-global--spacer--sm);
2425
+ --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-global--spacer--md);
2426
+ --pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
2427
+ --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-global--spacer--md);
2428
+ --pf-v5-c-menu__item--OutlineOffset: calc(0.125rem * -1);
2429
+ --pf-v5-c-menu__item--FontSize: var(--pf-v5-global--FontSize--md);
2430
+ --pf-v5-c-menu__item--FontWeight: var(--pf-v5-global--FontWeight--normal);
2431
+ --pf-v5-c-menu__item--LineHeight: var(--pf-v5-global--LineHeight--md);
2432
+ --pf-v5-c-menu__list-item--m-disabled__item--Color: var(--pf-v5-global--disabled-color--100);
2433
+ --pf-v5-c-menu__list-item--m-danger__item--Color: var(--pf-v5-global--danger-color--100);
2434
+ --pf-v5-c-menu__list-item--m-load__item--Color: var(--pf-v5-global--link--Color);
2435
+ --pf-v5-c-menu__group--Display: block;
2436
+ --pf-v5-c-menu__group-title--PaddingTop: var(--pf-v5-global--spacer--md);
2437
+ --pf-v5-c-menu__group-title--PaddingRight: var(--pf-v5-c-menu__item--PaddingRight);
2438
+ --pf-v5-c-menu__group-title--PaddingLeft: var(--pf-v5-c-menu__item--PaddingLeft);
2439
+ --pf-v5-c-menu__group-title--FontSize: var(--pf-v5-global--FontSize--xs);
2440
+ --pf-v5-c-menu__group-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
2441
+ --pf-v5-c-menu__group-title--Color: var(--pf-v5-global--Color--200);
2442
+ --pf-v5-c-menu__item-description--FontSize: var(--pf-v5-global--FontSize--xs);
2443
+ --pf-v5-c-menu__item-description--Color: var(--pf-v5-global--Color--200);
2444
+ --pf-v5-c-menu__item-icon--MarginRight: var(--pf-v5-global--spacer--sm);
2445
+ --pf-v5-c-menu__item-check--MarginRight: var(--pf-v5-global--spacer--sm);
2446
+ --pf-v5-c-menu__item-toggle-icon--PaddingRight: var(--pf-v5-global--spacer--sm);
2447
+ --pf-v5-c-menu__item-toggle-icon--PaddingLeft: var(--pf-v5-global--spacer--sm);
2448
+ --pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-v5-global--disabled-color--200);
2449
+ --pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft: var(--pf-v5-global--spacer--sm);
2450
+ --pf-v5-c-menu__item-toggle-icon--item-text--MarginLeft: var(--pf-v5-global--spacer--sm);
2451
+ --pf-v5-c-menu__item-select-icon--MarginLeft: var(--pf-v5-global--spacer--sm);
2452
+ --pf-v5-c-menu__item-select-icon--Color: var(--pf-v5-global--active-color--100);
2453
+ --pf-v5-c-menu__item-select-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
2454
+ --pf-v5-c-menu__item-external-icon--MarginLeft: var(--pf-v5-global--spacer--sm);
2455
+ --pf-v5-c-menu__item-external-icon--Color: var(--pf-v5-global--link--Color);
2456
+ --pf-v5-c-menu__item-external-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
2457
+ --pf-v5-c-menu__item-external-icon--Opacity: 0;
2458
+ --pf-v5-c-menu__item-action--PaddingTop: var(--pf-v5-global--spacer--sm);
2459
+ --pf-v5-c-menu__item-action--PaddingRight: var(--pf-v5-global--spacer--md);
2460
+ --pf-v5-c-menu__item-action--PaddingBottom: var(--pf-v5-global--spacer--sm);
2461
+ --pf-v5-c-menu__item-action--PaddingLeft: var(--pf-v5-global--spacer--md);
2462
+ --pf-v5-c-menu__item-action--Color: var(--pf-v5-global--Color--200);
2463
+ --pf-v5-c-menu__item-action--BackgroundColor: transparent;
2464
+ --pf-v5-c-menu__item-action--hover--Color: var(--pf-v5-global--Color--100);
2465
+ --pf-v5-c-menu__item-action--disabled--Color: var(--pf-v5-global--disabled-color--200);
2466
+ --pf-v5-c-menu__item-action--m-favorited--Color: var(--pf-v5-global--palette--gold-400);
2467
+ --pf-v5-c-menu__item-action--m-favorited--hover--Color: var(--pf-v5-global--palette--gold-500);
2468
+ --pf-v5-c-menu__item-action-icon--Height: calc(var(--pf-v5-c-menu__item--FontSize) * var(--pf-v5-c-menu__item--LineHeight));
2469
+ --pf-v5-c-menu__item-action--m-favorite__icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
2470
+ --pf-v5-c-menu__breadcrumb--PaddingTop: var(--pf-v5-global--spacer--md);
2471
+ --pf-v5-c-menu__breadcrumb--PaddingRight: var(--pf-v5-global--spacer--md);
2472
+ --pf-v5-c-menu__breadcrumb--PaddingBottom: var(--pf-v5-global--spacer--md);
2473
+ --pf-v5-c-menu__breadcrumb--PaddingLeft: var(--pf-v5-global--spacer--md);
2474
+ --pf-v5-c-menu__breadcrumb--c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--md);
2475
+ --pf-v5-c-menu__breadcrumb--c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--md);
2476
+ --pf-v5-c-menu--m-drilldown--c-menu--Top: 0;
2477
+ --pf-v5-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-v5-global--TransitionDuration);
2478
+ --pf-v5-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v5-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
2479
+ --pf-v5-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-v5-global--TransitionDuration);
2480
+ --pf-v5-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-v5-global--TransitionDuration);
2481
+ --pf-v5-c-menu--m-drilldown__content--Transition: transform var(--pf-v5-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v5-c-menu--m-drilldown__content--TransitionDuration--height);
2482
+ --pf-v5-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-v5-global--TransitionDuration);
2483
+ --pf-v5-c-menu--m-drilldown__list--Transition: transform var(--pf-v5-c-menu--m-drilldown__list--TransitionDuration--transform);
2484
+ --pf-v5-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-v5-global--ZIndex--xs);
2485
+ --pf-v5-c-menu__footer--PaddingTop: var(--pf-v5-global--spacer--md);
2486
+ --pf-v5-c-menu__footer--PaddingRight: var(--pf-v5-global--spacer--md);
2487
+ --pf-v5-c-menu__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
2488
+ --pf-v5-c-menu__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
2489
+ --pf-v5-c-menu__footer--BoxShadow: none;
2490
+ --pf-v5-c-menu__footer--after--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
2491
+ --pf-v5-c-menu__footer--after--BorderTopColor: var(--pf-v5-global--BorderColor--100);
2492
+ --pf-v5-c-menu--m-scrollable__footer--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
2493
+ --pf-v5-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
2494
+ --pf-v5-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
2495
+ --pf-v5-c-menu--m-nav--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
2496
+ --pf-v5-c-menu--m-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
2497
+ --pf-v5-c-menu--m-nav__list--PaddingTop: 0;
2498
+ --pf-v5-c-menu--m-nav__list--PaddingBottom: 0;
2499
+ --pf-v5-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
2500
+ --pf-v5-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
2501
+ --pf-v5-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
2502
+ --pf-v5-c-menu--m-nav__item--PaddingRight: var(--pf-v5-global--spacer--lg);
2503
+ --pf-v5-c-menu--m-nav__item--PaddingLeft: var(--pf-v5-global--spacer--lg);
2504
+ --pf-v5-c-menu--m-nav__item--Color: var(--pf-v5-global--Color--light-100);
2505
+ --pf-v5-c-menu--m-nav__item--FontSize: var(--pf-v5-global--FontSize--sm);
2506
+ --pf-v5-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
2507
+ --pf-v5-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
2508
+ --pf-v5-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
2509
+ --pf-v5-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-v5-global--BorderColor--200);
2510
+ --pf-v5-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
2511
+ --pf-v5-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-v5-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
2512
+ --pf-v5-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
2513
+ --pf-v5-c-menu--m-nav__item-description--Color: var(--pf-v5-global--Color--light-200);
2514
+ --pf-v5-c-menu--m-nav--c-menu--left-offset: 0.25rem;
2515
+ --pf-v5-c-menu--m-nav--c-menu--m-top--bottom-offset: 0;
2516
+ --pf-v5-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
2517
+ --pf-v5-c-menu--m-nav--c-menu--Top: calc(var(--pf-v5-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
2518
+ --pf-v5-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-v5-c-menu--m-nav--c-menu--left-offset));
2519
+ --pf-v5-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-v5-c-menu--m-nav--c-menu--m-left--right-offset));
2520
+ --pf-v5-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-v5-c-menu--m-nav--c-menu--m-top--bottom-offset));
2521
+ --pf-v5-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
2522
+ inset-block-start: var(--pf-v5-c-menu--Top);
2523
+ z-index: var(--pf-v5-c-menu--ZIndex);
2524
+ width: var(--pf-v5-c-menu--Width);
2525
+ min-width: var(--pf-v5-c-menu--MinWidth);
2526
+ background-color: var(--pf-v5-c-menu--BackgroundColor);
2527
+ box-shadow: var(--pf-v5-c-menu--BoxShadow);
2041
2528
  }
2042
2529
 
2043
- .pf-v5-c-chip.pf-m-draggable {
2044
- --pf-v5-c-chip--BackgroundColor: var(--pf-v5-c-chip--m-draggable--BackgroundColor);
2045
- box-shadow: var(--pf-v5-c-chip--m-draggable--BoxShadow);
2530
+ .pf-v5-c-menu .pf-v5-c-menu__content .pf-v5-c-menu .pf-v5-c-menu__content {
2531
+ overflow: visible;
2046
2532
  }
2047
2533
 
2048
- .pf-v5-c-chip.pf-m-draggable .pf-v5-c-chip__icon {
2049
- font-size: var(--pf-v5-c-chip--m-draggable__icon--FontSize);
2534
+ .pf-v5-c-menu .pf-v5-c-divider {
2535
+ margin-block-start: var(--pf-v5-c-menu--c-divider--MarginTop);
2536
+ margin-block-end: var(--pf-v5-c-menu--c-divider--MarginBottom);
2050
2537
  }
2051
2538
 
2052
- .pf-v5-c-chip__text {
2053
- overflow: hidden;
2054
- text-overflow: ellipsis;
2055
- white-space: nowrap;
2056
- position: relative;
2057
- max-width: var(--pf-v5-c-chip__text--MaxWidth);
2058
- color: var(--pf-v5-c-chip__text--Color);
2539
+ .pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu {
2540
+ position: absolute;
2541
+ inset-block-start: var(--pf-v5-c-menu--m-flyout__menu--Top);
2542
+ inset-block-end: var(--pf-v5-c-menu--m-flyout__menu--Bottom);
2543
+ inset-inline-start: var(--pf-v5-c-menu--m-flyout__menu--Left);
2544
+ inset-inline-end: var(--pf-v5-c-menu--m-flyout__menu--Right);
2059
2545
  }
2060
2546
 
2061
- .pf-v5-c-chip__text .pf-v5-c-badge {
2062
- margin-inline-start: var(--pf-v5-c-chip__c-badge--MarginLeft);
2547
+ .pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__content, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__content {
2548
+ overflow-y: visible;
2063
2549
  }
2064
2550
 
2065
- .pf-v5-c-chip__icon + .pf-v5-c-chip__text,
2066
- .pf-v5-c-chip__text + .pf-v5-c-chip__icon {
2067
- margin-inline-start: var(--pf-v5-c-chip__icon--MarginLeft);
2551
+ .pf-v5-c-menu.pf-m-top {
2552
+ --pf-v5-c-menu--m-flyout__menu--Top: auto;
2553
+ --pf-v5-c-menu--m-flyout__menu--Bottom: var(--pf-v5-c-menu--m-flyout__menu--m-top--Bottom);
2068
2554
  }
2069
2555
 
2070
- .pf-v5-c-chip__content {
2556
+ .pf-v5-c-menu.pf-m-left {
2557
+ --pf-v5-c-menu--m-flyout__menu--Right: var(--pf-v5-c-menu--m-flyout__menu--m-left--Right);
2558
+ --pf-v5-c-menu--m-flyout__menu--Left: auto;
2559
+ }
2560
+
2561
+ .pf-v5-c-menu.pf-m-drilldown {
2071
2562
  display: flex;
2072
- column-gap: var(--pf-v5-c-chip__content--ColumnGap);
2073
- align-items: center;
2074
- font-size: var(--pf-v5-c-chip__content--FontSize);
2563
+ flex-direction: column;
2075
2564
  }
2076
2565
 
2077
- .pf-v5-c-chip__actions {
2078
- font-size: var(--pf-v5-c-chip__actions--FontSize);
2566
+ .pf-v5-c-menu.pf-m-drilldown[hidden] {
2567
+ display: none;
2079
2568
  }
2080
2569
 
2081
- .pf-v5-c-chip__actions .pf-v5-c-button {
2082
- --pf-v5-c-button--PaddingTop: var(--pf-v5-c-chip__actions--c-button--PaddingTop);
2083
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-chip__actions--c-button--PaddingRight);
2084
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-chip__actions--c-button--PaddingBottom);
2085
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-chip__actions--c-button--PaddingLeft);
2086
- --pf-v5-c-button--FontSize: var(--pf-v5-c-chip__actions--c-button--FontSize);
2087
- margin-block-start: var(--pf-v5-c-chip__actions--c-button--MarginTop);
2088
- margin-block-end: var(--pf-v5-c-chip__actions--c-button--MarginBottom);
2089
- margin-inline-end: var(--pf-v5-c-chip__actions--c-button--MarginRight);
2090
- line-height: 1;
2570
+ .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content {
2571
+ flex-grow: 1;
2572
+ overflow: hidden;
2573
+ transition: var(--pf-v5-c-menu--m-drilldown__content--Transition);
2091
2574
  }
2092
2575
 
2093
- :where(.pf-v5-theme-dark) .pf-v5-c-chip {
2094
- --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2095
- --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--100);
2096
- --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--palette--black-600);
2576
+ .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list,
2577
+ .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
2578
+ transform: translateX(-100%);
2097
2579
  }
2098
2580
 
2099
- .pf-v5-c-dropdown {
2100
- --pf-v5-c-dropdown__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
2101
- --pf-v5-c-dropdown__toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
2102
- --pf-v5-c-dropdown__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
2103
- --pf-v5-c-dropdown__toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
2104
- --pf-v5-c-dropdown__toggle--ColumnGap: var(--pf-v5-global--spacer--sm);
2105
- --pf-v5-c-dropdown__toggle--MinWidth: 0;
2106
- --pf-v5-c-dropdown__toggle--FontSize: var(--pf-v5-global--FontSize--md);
2107
- --pf-v5-c-dropdown__toggle--FontWeight: var(--pf-v5-global--FontWeight--normal);
2108
- --pf-v5-c-dropdown__toggle--Color: var(--pf-v5-global--Color--100);
2109
- --pf-v5-c-dropdown__toggle--LineHeight: var(--pf-v5-global--LineHeight--md);
2110
- --pf-v5-c-dropdown__toggle--BackgroundColor: transparent;
2111
- --pf-v5-c-dropdown__toggle--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
2112
- --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-global--BorderColor--300);
2113
- --pf-v5-c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-global--BorderColor--300);
2114
- --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
2115
- --pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
2116
- --pf-v5-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-v5-global--active-color--100);
2117
- --pf-v5-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2118
- --pf-v5-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-v5-global--active-color--100);
2119
- --pf-v5-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2120
- --pf-v5-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-v5-global--active-color--100);
2121
- --pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2122
- --pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-v5-global--active-color--100);
2123
- --pf-v5-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
2124
- --pf-v5-c-dropdown__toggle--m-plain--Color: var(--pf-v5-global--Color--200);
2125
- --pf-v5-c-dropdown__toggle--m-plain--hover--Color: var(--pf-v5-global--Color--100);
2126
- --pf-v5-c-dropdown__toggle--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
2127
- --pf-v5-c-dropdown__toggle--m-plain--PaddingRight: var(--pf-v5-global--spacer--md);
2128
- --pf-v5-c-dropdown__toggle--m-plain--PaddingLeft: var(--pf-v5-global--spacer--md);
2129
- --pf-v5-c-dropdown__toggle--m-plain--child--LineHeight: normal;
2130
- --pf-v5-c-dropdown__toggle--m-primary--Color: var(--pf-v5-global--Color--light-100);
2131
- --pf-v5-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
2132
- --pf-v5-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
2133
- --pf-v5-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
2134
- --pf-v5-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
2135
- --pf-v5-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-v5-global--primary-color--200);
2136
- --pf-v5-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--200);
2137
- --pf-v5-c-dropdown__toggle--m-primary--disabled--Color: var(--pf-v5-global--Color--100);
2138
- --pf-v5-c-dropdown__toggle--m-secondary--Color: var(--pf-v5-global--primary-color--100);
2139
- --pf-v5-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
2140
- --pf-v5-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
2141
- --pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
2142
- --pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2143
- --pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2144
- --pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2145
- --pf-v5-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-v5-global--primary-color--100);
2146
- --pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
2147
- --pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-v5-global--primary-color--100);
2148
- --pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-v5-global--primary-color--100);
2149
- --pf-v5-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2150
- --pf-v5-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-v5-global--primary-color--100);
2151
- --pf-v5-c-dropdown__toggle-button--Color: var(--pf-v5-global--Color--100);
2152
- --pf-v5-c-dropdown__toggle-button--BackgroundColor: transparent;
2153
- --pf-v5-c-dropdown__toggle-progress--Visibility: hidden;
2154
- --pf-v5-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-v5-global--FontSize--sm);
2155
- --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-v5-global--spacer--form-element);
2156
- --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-v5-global--spacer--xs);
2157
- --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingBottom: var(--pf-v5-global--spacer--form-element);
2158
- --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-v5-global--spacer--xs);
2159
- --pf-v5-c-dropdown__toggle--m-split-button--child--BackgroundColor: transparent;
2160
- --pf-v5-c-dropdown__toggle--m-split-button--first-child--PaddingLeft: var(--pf-v5-global--spacer--sm);
2161
- --pf-v5-c-dropdown__toggle--m-split-button--last-child--PaddingRight: var(--pf-v5-global--spacer--sm);
2162
- --pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft: var(--pf-v5-global--spacer--sm);
2163
- --pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight: var(--pf-v5-global--spacer--sm);
2164
- --pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
2165
- --pf-v5-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-v5-global--spacer--sm);
2166
- --pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
2167
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
2168
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-global--primary-color--100);
2169
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
2170
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
2171
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-v5-global--primary-color--200);
2172
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-v5-global--primary-color--200);
2173
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-v5-global--primary-color--200);
2174
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
2175
- --pf-v5-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2176
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-v5-global--primary-color--100);
2177
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2178
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2179
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2180
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
2181
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-v5-global--primary-color--100);
2182
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
2183
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
2184
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2185
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2186
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2187
- --pf-v5-c-dropdown__toggle-icon--LineHeight: var(--pf-v5-global--LineHeight--md);
2188
- --pf-v5-c-dropdown__toggle-icon--PaddingRight: var(--pf-v5-global--spacer--sm);
2189
- --pf-v5-c-dropdown__toggle-icon--PaddingLeft: var(--pf-v5-global--spacer--sm);
2190
- --pf-v5-c-dropdown__toggle-icon--MarginLeft: 0;
2191
- --pf-v5-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
2192
- --pf-v5-c-dropdown--m-plain__toggle-icon--Color: var(--pf-v5-global--Color--200);
2193
- --pf-v5-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-v5-global--Color--100);
2194
- --pf-v5-c-dropdown__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
2195
- --pf-v5-c-dropdown__menu--BoxShadow: var(--pf-v5-global--BoxShadow--md);
2196
- --pf-v5-c-dropdown__menu--PaddingTop: var(--pf-v5-global--spacer--sm);
2197
- --pf-v5-c-dropdown__menu--PaddingBottom: var(--pf-v5-global--spacer--sm);
2198
- --pf-v5-c-dropdown__menu--Top: calc(100% + var(--pf-v5-global--spacer--xs));
2199
- --pf-v5-c-dropdown__menu--ZIndex: var(--pf-v5-global--ZIndex--sm);
2200
- --pf-v5-c-dropdown--m-top__menu--Top: 0;
2201
- --pf-v5-c-dropdown--m-top__menu--TranslateY: calc(-100% - var(--pf-v5-global--spacer--xs));
2202
- --pf-v5-c-dropdown__menu-item--BackgroundColor: transparent;
2203
- --pf-v5-c-dropdown__menu-item--PaddingTop: var(--pf-v5-global--spacer--sm);
2204
- --pf-v5-c-dropdown__menu-item--PaddingRight: var(--pf-v5-global--spacer--md);
2205
- --pf-v5-c-dropdown__menu-item--PaddingBottom: var(--pf-v5-global--spacer--sm);
2206
- --pf-v5-c-dropdown__menu-item--PaddingLeft: var(--pf-v5-global--spacer--md);
2207
- --pf-v5-c-dropdown__menu-item--FontSize: var(--pf-v5-global--FontSize--md);
2208
- --pf-v5-c-dropdown__menu-item--FontWeight: var(--pf-v5-global--FontWeight--normal);
2209
- --pf-v5-c-dropdown__menu-item--LineHeight: var(--pf-v5-global--LineHeight--md);
2210
- --pf-v5-c-dropdown__menu-item--Color: var(--pf-v5-global--Color--dark-100);
2211
- --pf-v5-c-dropdown__menu-item--hover--Color: var(--pf-v5-global--Color--dark-100);
2212
- --pf-v5-c-dropdown__menu-item--disabled--Color: var(--pf-v5-global--Color--dark-200);
2213
- --pf-v5-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
2214
- --pf-v5-c-dropdown__menu-item--disabled--BackgroundColor: transparent;
2215
- --pf-v5-c-dropdown__menu-item--m-text--Color: var(--pf-v5-global--Color--dark-200);
2216
- --pf-v5-c-dropdown__menu-item-icon--MarginRight: var(--pf-v5-global--spacer--sm);
2217
- --pf-v5-c-dropdown__menu-item-icon--Width: var(--pf-v5-global--icon--FontSize--lg);
2218
- --pf-v5-c-dropdown__menu-item-icon--Height: var(--pf-v5-global--icon--FontSize--lg);
2219
- --pf-v5-c-dropdown__menu-item-description--FontSize: var(--pf-v5-global--FontSize--xs);
2220
- --pf-v5-c-dropdown__menu-item-description--Color: var(--pf-v5-global--Color--dark-200);
2221
- --pf-v5-c-dropdown__group--group--PaddingTop: var(--pf-v5-global--spacer--sm);
2222
- --pf-v5-c-dropdown__group-title--PaddingTop: var(--pf-v5-global--spacer--sm);
2223
- --pf-v5-c-dropdown__group-title--PaddingRight: var(--pf-v5-c-dropdown__menu-item--PaddingRight);
2224
- --pf-v5-c-dropdown__group-title--PaddingBottom: var(--pf-v5-c-dropdown__menu-item--PaddingBottom);
2225
- --pf-v5-c-dropdown__group-title--PaddingLeft: var(--pf-v5-c-dropdown__menu-item--PaddingLeft);
2226
- --pf-v5-c-dropdown__group-title--FontSize: var(--pf-v5-global--FontSize--xs);
2227
- --pf-v5-c-dropdown__group-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
2228
- --pf-v5-c-dropdown__group-title--Color: var(--pf-v5-global--Color--dark-200);
2229
- --pf-v5-c-dropdown--c-divider--MarginTop: var(--pf-v5-global--spacer--sm);
2230
- --pf-v5-c-dropdown--c-divider--MarginBottom: var(--pf-v5-global--spacer--sm);
2231
- --pf-v5-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0;
2232
- --pf-v5-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0;
2233
- --pf-v5-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-v5-global--spacer--xs);
2234
- --pf-v5-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
2235
- --pf-v5-c-dropdown--c-menu--Top: calc(100% + var(--pf-v5-global--spacer--xs));
2236
- --pf-v5-c-dropdown--c-menu--ZIndex: var(--pf-v5-global--ZIndex--sm);
2237
- --pf-v5-c-dropdown--m-top--c-menu--Top: 0;
2238
- --pf-v5-c-dropdown--m-top--c-menu--TranslateY: calc(-100% - var(--pf-v5-global--spacer--xs));
2239
- --pf-v5-c-dropdown--m-full-height__toggle--before--BorderTopWidth: 0;
2240
- --pf-v5-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
2241
- --pf-v5-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
2242
- --pf-v5-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
2243
- --pf-v5-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
2244
- --pf-v5-c-dropdown--m-full-height__toggle--PaddingRight: var(--pf-v5-global--spacer--lg);
2245
- --pf-v5-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-v5-global--spacer--lg);
2246
- position: relative;
2247
- display: inline-flex;
2248
- align-items: flex-start;
2249
- max-width: 100%;
2581
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list, .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
2582
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
2250
2583
  }
2251
2584
 
2252
- .pf-v5-c-dropdown .pf-v5-c-divider {
2253
- margin-block-start: var(--pf-v5-c-dropdown--c-divider--MarginTop);
2254
- margin-block-end: var(--pf-v5-c-dropdown--c-divider--MarginBottom);
2585
+ .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
2586
+ --pf-v5-c-menu--BoxShadow: none;
2587
+ position: absolute;
2588
+ inset-block-start: var(--pf-v5-c-menu--m-drilldown--c-menu--Top);
2589
+ inset-inline-start: 100%;
2590
+ width: 100%;
2591
+ transition: var(--pf-v5-c-menu--m-drilldown--c-menu--Transition);
2255
2592
  }
2256
2593
 
2257
- .pf-v5-c-dropdown .pf-v5-c-divider:last-child {
2258
- --pf-v5-c-dropdown--c-divider--MarginBottom: 0;
2594
+ .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
2595
+ transform: translateX(-100%);
2259
2596
  }
2260
2597
 
2261
- .pf-v5-c-dropdown > .pf-v5-c-menu {
2262
- position: absolute;
2263
- inset-block-start: var(--pf-v5-c-dropdown--c-menu--Top);
2264
- z-index: var(--pf-v5-c-dropdown--c-menu--ZIndex);
2598
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
2599
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
2265
2600
  }
2266
2601
 
2267
- .pf-v5-c-dropdown.pf-m-full-height {
2268
- --pf-v5-c-dropdown__toggle--PaddingRight: var(--pf-v5-c-dropdown--m-full-height__toggle--PaddingRight);
2269
- --pf-v5-c-dropdown__toggle--PaddingLeft: var(--pf-v5-c-dropdown--m-full-height__toggle--PaddingLeft);
2270
- --pf-v5-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-v5-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth);
2271
- --pf-v5-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-v5-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth);
2272
- --pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-v5-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth);
2273
- display: inline-flex;
2274
- align-items: center;
2275
- height: 100%;
2602
+ .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
2603
+ position: relative;
2604
+ overflow: hidden;
2605
+ visibility: visible;
2606
+ transition: var(--pf-v5-c-menu--m-drilldown__list--Transition);
2276
2607
  }
2277
2608
 
2278
- .pf-v5-c-dropdown.pf-m-full-height .pf-v5-c-dropdown__toggle {
2279
- align-self: stretch;
2609
+ .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list .pf-v5-c-menu__list {
2610
+ --pf-v5-c-menu__list--PaddingTop: 0;
2611
+ --pf-v5-c-menu__list--PaddingBottom: 0;
2280
2612
  }
2281
2613
 
2282
- .pf-v5-c-dropdown.pf-m-full-height .pf-v5-c-dropdown__toggle::before {
2283
- border-block-start-width: var(--pf-v5-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
2614
+ .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item.pf-m-current-path .pf-v5-c-menu {
2615
+ z-index: var(--pf-v5-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
2284
2616
  }
2285
2617
 
2286
- .pf-v5-c-dropdown.pf-m-full-height:hover .pf-v5-c-dropdown__toggle::before {
2287
- border-block-end-width: var(--pf-v5-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
2618
+ .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item.pf-m-current-path > .pf-v5-c-menu {
2619
+ overflow: visible;
2288
2620
  }
2289
2621
 
2290
- .pf-v5-c-dropdown.pf-m-expanded {
2291
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
2292
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
2622
+ .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item.pf-m-static > .pf-v5-c-menu {
2623
+ position: static;
2293
2624
  }
2294
2625
 
2295
- .pf-v5-c-dropdown__toggle {
2296
- position: relative;
2297
- display: inline-flex;
2298
- column-gap: var(--pf-v5-c-dropdown__toggle--ColumnGap);
2299
- align-items: center;
2300
- min-width: var(--pf-v5-c-dropdown__toggle--MinWidth);
2301
- max-width: 100%;
2302
- padding-block-start: var(--pf-v5-c-dropdown__toggle--PaddingTop);
2303
- padding-block-end: var(--pf-v5-c-dropdown__toggle--PaddingBottom);
2304
- padding-inline-start: var(--pf-v5-c-dropdown__toggle--PaddingLeft);
2305
- padding-inline-end: var(--pf-v5-c-dropdown__toggle--PaddingRight);
2306
- font-size: var(--pf-v5-c-dropdown__toggle--FontSize);
2307
- font-weight: var(--pf-v5-c-dropdown__toggle--FontWeight);
2308
- line-height: var(--pf-v5-c-dropdown__toggle--LineHeight);
2309
- color: var(--pf-v5-c-dropdown__toggle--Color);
2310
- background-color: var(--pf-v5-c-dropdown__toggle--BackgroundColor);
2311
- border: none;
2626
+ .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item.pf-m-static:hover {
2627
+ background-color: transparent;
2312
2628
  }
2313
2629
 
2314
- .pf-v5-c-dropdown__toggle::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button::before {
2315
- position: absolute;
2316
- inset-block-start: 0;
2317
- inset-block-end: 0;
2318
- inset-inline-start: 0;
2319
- inset-inline-end: 0;
2320
- content: "";
2321
- border: var(--pf-v5-c-dropdown__toggle--before--BorderWidth) solid;
2322
- border-block-start-color: var(--pf-v5-c-dropdown__toggle--before--BorderTopColor);
2323
- border-block-end-color: var(--pf-v5-c-dropdown__toggle--before--BorderBottomColor);
2324
- border-inline-start-color: var(--pf-v5-c-dropdown__toggle--before--BorderLeftColor);
2325
- border-inline-end-color: var(--pf-v5-c-dropdown__toggle--before--BorderRightColor);
2630
+ .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item:not(.pf-m-current-path) .pf-v5-c-menu {
2631
+ display: none;
2326
2632
  }
2327
2633
 
2328
- .pf-v5-c-dropdown__toggle.pf-m-disabled, .pf-v5-c-dropdown__toggle:disabled {
2329
- --pf-v5-c-dropdown__toggle--m-primary--Color: var(--pf-v5-c-dropdown__toggle--m-primary--disabled--Color);
2330
- --pf-v5-c-dropdown__toggle--before--BorderBottomColor: transparent;
2331
- pointer-events: none;
2634
+ .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__item {
2635
+ outline-offset: var(--pf-v5-c-menu__item--OutlineOffset);
2332
2636
  }
2333
2637
 
2334
- .pf-v5-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-v5-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-v5-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-v5-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
2335
- --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--disabled--BackgroundColor);
2638
+ .pf-v5-c-menu.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list {
2639
+ overflow: visible;
2640
+ visibility: hidden;
2336
2641
  }
2337
2642
 
2338
- .pf-v5-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-v5-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-v5-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-v5-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
2339
- border: 0;
2643
+ .pf-v5-c-menu.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list > .pf-v5-c-divider,
2644
+ .pf-v5-c-menu.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list > .pf-v5-c-menu__list-item:not(.pf-m-current-path) {
2645
+ display: none;
2340
2646
  }
2341
2647
 
2342
- .pf-v5-c-dropdown__toggle.pf-m-split-button {
2343
- --pf-v5-c-dropdown__toggle--ColumnGap: 0;
2344
- padding: 0;
2648
+ .pf-v5-c-menu.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list > .pf-v5-c-menu__list-item.pf-m-current-path {
2649
+ visibility: hidden;
2345
2650
  }
2346
2651
 
2347
- .pf-v5-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
2348
- background-color: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BackgroundColor);
2652
+ .pf-v5-c-menu.pf-m-plain {
2653
+ --pf-v5-c-menu--BoxShadow: var(--pf-v5-c-menu--m-plain--BoxShadow);
2349
2654
  }
2350
2655
 
2351
- .pf-v5-c-dropdown__toggle.pf-m-split-button > * {
2352
- position: relative;
2353
- padding-block-start: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingTop);
2354
- padding-block-end: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingBottom);
2355
- padding-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
2356
- padding-inline-end: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight);
2656
+ .pf-v5-c-menu.pf-m-scrollable {
2657
+ --pf-v5-c-menu__content--MaxHeight: var(--pf-v5-c-menu--m-scrollable__content--MaxHeight);
2658
+ --pf-v5-c-menu__footer--BoxShadow: var(--pf-v5-c-menu--m-scrollable__footer--BoxShadow);
2659
+ --pf-v5-c-menu__footer--after--BorderTopWidth: var(--pf-v5-c-menu--m-scrollable__footer--after--BorderTopWidth);
2357
2660
  }
2358
2661
 
2359
- .pf-v5-c-dropdown__toggle.pf-m-split-button > *:first-child {
2360
- --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-v5-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
2662
+ .pf-v5-c-menu.pf-m-scrollable .pf-v5-c-menu__content {
2663
+ overflow-y: auto;
2361
2664
  }
2362
2665
 
2363
- .pf-v5-c-dropdown__toggle.pf-m-split-button > *:last-child {
2364
- --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-v5-c-dropdown__toggle--m-split-button--last-child--PaddingRight);
2666
+ .pf-v5-c-menu.pf-m-nav, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu {
2667
+ --pf-v5-c-menu--BackgroundColor: var(--pf-v5-c-menu--m-nav--BackgroundColor);
2668
+ --pf-v5-c-menu__list--PaddingTop: var(--pf-v5-c-menu--m-nav__list--PaddingTop);
2669
+ --pf-v5-c-menu__list--PaddingBottom: var(--pf-v5-c-menu--m-nav__list--PaddingBottom);
2670
+ --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-c-menu--m-nav__list-item--hover--BackgroundColor);
2671
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-c-menu--m-nav__list-item--focus-within--BackgroundColor);
2672
+ --pf-v5-c-menu__list-item--active--BackgroundColor: var(--pf-v5-c-menu--m-nav__list-item--active--BackgroundColor);
2673
+ --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu--m-nav__item--Color);
2674
+ --pf-v5-c-menu__item--FontSize: var(--pf-v5-c-menu--m-nav__item--FontSize);
2675
+ --pf-v5-c-menu__item--OutlineOffset: var(--pf-v5-c-menu--m-nav__item--OutlineOffset);
2676
+ --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-menu--m-nav__item--PaddingRight);
2677
+ --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-menu--m-nav__item--PaddingLeft);
2678
+ --pf-v5-c-menu__item-description--Color: var(--pf-v5-c-menu--m-nav__item-description--Color);
2679
+ box-shadow: var(--pf-v5-c-menu--m-nav--BoxShadow);
2365
2680
  }
2366
2681
 
2367
- .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action {
2368
- --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight);
2369
- --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft);
2682
+ .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item {
2683
+ position: relative;
2684
+ outline-offset: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
2370
2685
  }
2371
2686
 
2372
- .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-v5-c-dropdown__toggle-button {
2373
- margin-inline-end: var(--pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight);
2687
+ .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item::before, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item::before {
2688
+ position: absolute;
2689
+ inset-block-end: 0;
2690
+ inset-inline-start: 0;
2691
+ inset-inline-end: 0;
2692
+ content: "";
2693
+ border-block-end: var(--pf-v5-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-v5-c-menu--m-nav__item--before--BorderBottomColor);
2374
2694
  }
2375
2695
 
2376
- .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-v5-c-dropdown__toggle-button::before {
2377
- border-inline-start: 0;
2696
+ .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item:hover::after, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item:hover::after {
2697
+ position: absolute;
2698
+ inset-block-start: var(--pf-v5-c-menu--m-nav__item--hover--after--Top);
2699
+ inset-block-end: 0;
2700
+ inset-inline-start: 0;
2701
+ content: "";
2702
+ border-inline-start: var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftColor);
2378
2703
  }
2379
2704
 
2380
- .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-v5-c-dropdown__toggle-button:last-child {
2381
- --pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
2705
+ .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu {
2706
+ width: 100%;
2382
2707
  }
2383
2708
 
2384
- .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
2385
- border-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
2709
+ .pf-v5-c-menu.pf-m-flyout.pf-m-nav, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu {
2710
+ inset-block-start: var(--pf-v5-c-menu--m-nav--c-menu--Top);
2711
+ inset-inline-start: var(--pf-v5-c-menu--m-nav--c-menu--Left);
2386
2712
  }
2387
2713
 
2388
- .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled, .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary[disabled] {
2389
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
2714
+ .pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu.pf-m-top {
2715
+ --pf-v5-c-menu--m-nav--c-menu--Top: auto;
2716
+ inset-block-end: var(--pf-v5-c-menu--m-nav--c-menu--m-top--Bottom);
2390
2717
  }
2391
2718
 
2392
- .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check {
2393
- display: flex;
2394
- align-items: center;
2395
- overflow: hidden;
2396
- cursor: pointer;
2719
+ .pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu.pf-m-left {
2720
+ --pf-v5-c-menu--m-nav--c-menu--Left: auto;
2721
+ inset-inline-end: var(--pf-v5-c-menu--m-nav--c-menu--m-left--Right);
2397
2722
  }
2398
2723
 
2399
- .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check.pf-m-in-progress {
2400
- --pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility: hidden;
2401
- --pf-v5-c-dropdown__toggle-progress--Visibility: visible;
2724
+ .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu__list-item:first-child, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__list-item:first-child {
2725
+ --pf-v5-c-menu--m-nav__item--hover--after--Top: var(--pf-v5-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
2402
2726
  }
2403
2727
 
2404
- .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check > input,
2405
- .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check {
2406
- --pf-v5-c-check__input--TranslateY: none;
2407
- align-self: revert;
2408
- width: auto;
2409
- cursor: pointer;
2410
- visibility: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
2728
+ .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu__list-item:first-child .pf-v5-c-menu, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__list-item:first-child .pf-v5-c-menu {
2729
+ --pf-v5-c-menu--m-nav--c-menu--Top: var(--pf-v5-c-menu--m-nav__list-item--first-child--c-menu--Top);
2411
2730
  }
2412
2731
 
2413
- .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-button {
2414
- color: var(--pf-v5-c-dropdown__toggle-button--Color);
2415
- background-color: var(--pf-v5-c-dropdown__toggle-button--BackgroundColor);
2416
- border: 0;
2732
+ .pf-v5-c-menu__breadcrumb {
2733
+ display: flex;
2734
+ align-items: center;
2735
+ min-height: var(--pf-v5-c-menu__breadcrumb--MinHeight);
2736
+ padding-block-start: var(--pf-v5-c-menu__breadcrumb--PaddingTop);
2737
+ padding-block-end: var(--pf-v5-c-menu__breadcrumb--PaddingBottom);
2738
+ padding-inline-start: var(--pf-v5-c-menu__breadcrumb--PaddingLeft);
2739
+ padding-inline-end: var(--pf-v5-c-menu__breadcrumb--PaddingRight);
2417
2740
  }
2418
2741
 
2419
- .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-text {
2420
- margin-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
2742
+ .pf-v5-c-menu__breadcrumb .pf-v5-c-breadcrumb {
2743
+ --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-c-menu__breadcrumb--c-breadcrumb__item--FontSize);
2744
+ --pf-v5-c-breadcrumb__heading--FontSize: var(--pf-v5-c-menu__breadcrumb--c-breadcrumb__heading--FontSize);
2421
2745
  }
2422
2746
 
2423
- .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
2424
- --pf-v5-c-dropdown__toggle--before--BorderWidth: 0;
2425
- --pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
2747
+ .pf-v5-c-menu__content {
2748
+ height: var(--pf-v5-c-menu__content--Height);
2749
+ max-height: var(--pf-v5-c-menu__content--MaxHeight);
2426
2750
  }
2427
2751
 
2428
- .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
2429
- background-color: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
2430
- border: 0;
2752
+ .pf-v5-c-menu__content .pf-v5-c-menu__content {
2753
+ --pf-v5-c-menu__content--Height: auto;
2431
2754
  }
2432
2755
 
2433
- .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
2434
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
2756
+ .pf-v5-c-menu__header {
2757
+ --pf-v5-c-menu__item--PaddingTop: var(--pf-v5-c-menu__header--c-menu__item--PaddingTop);
2758
+ --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-menu__header--c-menu__item--PaddingRight);
2759
+ --pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-menu__header--c-menu__item--PaddingBottom);
2760
+ --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-menu__header--c-menu__item--PaddingLeft);
2761
+ padding-block-start: var(--pf-v5-c-menu__header--PaddingTop);
2762
+ padding-block-end: var(--pf-v5-c-menu__header--PaddingBottom);
2763
+ padding-inline-start: var(--pf-v5-c-menu__header--PaddingLeft);
2764
+ padding-inline-end: var(--pf-v5-c-menu__header--PaddingRight);
2435
2765
  }
2436
2766
 
2437
- .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
2438
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
2767
+ .pf-v5-c-menu__header > .pf-v5-c-menu__item {
2768
+ --pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--BackgroundColor);
2769
+ margin-block-start: var(--pf-v5-c-menu__header--c-menu__item--MarginTop);
2770
+ margin-block-end: var(--pf-v5-c-menu__header--c-menu__item--MarginBottom);
2771
+ margin-inline-start: var(--pf-v5-c-menu__header--c-menu__item--MarginLeft);
2772
+ margin-inline-end: var(--pf-v5-c-menu__header--c-menu__item--MarginRight);
2439
2773
  }
2440
2774
 
2441
- .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
2442
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
2775
+ .pf-v5-c-menu__header > .pf-v5-c-menu__item:hover {
2776
+ --pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--hover--BackgroundColor);
2443
2777
  }
2444
2778
 
2445
- .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
2446
- border-start-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
2447
- border-end-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
2779
+ .pf-v5-c-menu__header > .pf-v5-c-menu__item:focus {
2780
+ --pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--focus--BackgroundColor);
2448
2781
  }
2449
2782
 
2450
- .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
2451
- border-start-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
2452
- border-end-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
2783
+ .pf-v5-c-menu__header + .pf-v5-c-menu__search {
2784
+ --pf-v5-c-menu__search--PaddingTop: var(--pf-v5-c-menu__header__search--PaddingTop);
2453
2785
  }
2454
2786
 
2455
- .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button:hover::before {
2456
- --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown__toggle--hover--before--BorderBottomColor);
2787
+ .pf-v5-c-menu__search {
2788
+ padding-block-start: var(--pf-v5-c-menu__search--PaddingTop);
2789
+ padding-block-end: var(--pf-v5-c-menu__search--PaddingBottom);
2790
+ padding-inline-start: var(--pf-v5-c-menu__search--PaddingLeft);
2791
+ padding-inline-end: var(--pf-v5-c-menu__search--PaddingRight);
2457
2792
  }
2458
2793
 
2459
- .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button:focus::before {
2460
- --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown__toggle--focus--before--BorderBottomColor);
2461
- border-block-end-width: var(--pf-v5-c-dropdown__toggle--focus--before--BorderBottomWidth);
2794
+ .pf-v5-c-menu__list {
2795
+ --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-menu__list--Display);
2796
+ padding-block-start: var(--pf-v5-c-menu__list--PaddingTop);
2797
+ padding-block-end: var(--pf-v5-c-menu__list--PaddingBottom);
2462
2798
  }
2463
2799
 
2464
- .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button:active::before {
2465
- --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown__toggle--active--before--BorderBottomColor);
2466
- border-block-end-width: var(--pf-v5-c-dropdown__toggle--active--before--BorderBottomWidth);
2800
+ .pf-v5-c-menu__list > .pf-v5-c-divider {
2801
+ margin-block-start: var(--pf-v5-c-menu__list--c-divider--MarginTop);
2802
+ margin-block-end: var(--pf-v5-c-menu__list--c-divider--MarginBottom);
2467
2803
  }
2468
2804
 
2469
- .pf-m-expanded > .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button::before {
2470
- --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
2471
- border-block-end-width: var(--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
2805
+ .pf-v5-c-menu__list-item {
2806
+ --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-menu__list-item--Display);
2807
+ position: relative;
2808
+ color: var(--pf-v5-c-menu__list-item--Color);
2809
+ background-color: var(--pf-v5-c-menu__list-item--BackgroundColor);
2472
2810
  }
2473
2811
 
2474
- .pf-v5-c-dropdown__toggle.pf-m-plain {
2475
- --pf-v5-c-dropdown__toggle-icon--Color: var(--pf-v5-c-dropdown--m-plain__toggle-icon--Color);
2812
+ .pf-v5-c-menu__list-item:hover {
2813
+ --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--hover--BackgroundColor);
2814
+ --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--hover--Color, inherit);
2476
2815
  }
2477
2816
 
2478
- .pf-v5-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
2479
- --pf-v5-c-dropdown__toggle--PaddingRight: var(--pf-v5-c-dropdown__toggle--m-plain--PaddingRight);
2480
- --pf-v5-c-dropdown__toggle--PaddingLeft: var(--pf-v5-c-dropdown__toggle--m-plain--PaddingLeft);
2481
- display: inline-block;
2482
- color: var(--pf-v5-c-dropdown__toggle--m-plain--Color);
2817
+ .pf-v5-c-menu__list-item:focus-within, .pf-v5-c-menu__list-item.pf-m-focus {
2818
+ --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--focus-within--BackgroundColor);
2819
+ --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--focus-within--Color, inherit);
2483
2820
  }
2484
2821
 
2485
- .pf-v5-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
2486
- line-height: var(--pf-v5-c-dropdown__toggle--m-plain--child--LineHeight);
2822
+ .pf-v5-c-menu__list-item.pf-m-disabled, .pf-v5-c-menu__list-item.pf-m-aria-disabled {
2823
+ --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
2824
+ --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color);
2825
+ --pf-v5-c-menu__item-toggle-icon: var(--pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color);
2487
2826
  }
2488
2827
 
2489
- .pf-v5-c-dropdown__toggle.pf-m-plain::before {
2490
- border: 0;
2828
+ .pf-v5-c-menu__list-item.pf-m-disabled {
2829
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
2830
+ pointer-events: none;
2491
2831
  }
2492
2832
 
2493
- .pf-v5-c-dropdown__toggle.pf-m-plain:hover, .pf-v5-c-dropdown__toggle.pf-m-plain:focus, .pf-v5-c-dropdown__toggle.pf-m-plain:active, .pf-v5-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-plain {
2494
- --pf-v5-c-dropdown__toggle--m-plain--Color: var(--pf-v5-c-dropdown__toggle--m-plain--hover--Color);
2495
- --pf-v5-c-dropdown--m-plain__toggle-icon--Color: var(--pf-v5-c-dropdown--m-plain--hover__toggle-icon--Color);
2833
+ .pf-v5-c-menu__list-item.pf-m-aria-disabled .pf-v5-c-menu__item {
2834
+ cursor: default;
2496
2835
  }
2497
2836
 
2498
- .pf-v5-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-v5-c-dropdown__toggle.pf-m-plain:disabled {
2499
- --pf-v5-c-dropdown__toggle--m-plain--Color: var(--pf-v5-c-dropdown__toggle--m-plain--disabled--Color);
2837
+ .pf-v5-c-menu__list-item.pf-m-load {
2838
+ --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
2839
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
2840
+ --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-load__item--Color);
2500
2841
  }
2501
2842
 
2502
- .pf-v5-c-dropdown__toggle.pf-m-primary {
2503
- --pf-v5-c-dropdown__toggle--Color: var(--pf-v5-c-dropdown__toggle--m-primary--Color);
2504
- --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-primary--BackgroundColor);
2505
- --pf-v5-c-dropdown__toggle-button--Color: var(--pf-v5-c-dropdown__toggle--m-primary--Color);
2506
- border-radius: var(--pf-v5-c-dropdown__toggle--m-primary--BorderRadius);
2843
+ .pf-v5-c-menu__list-item.pf-m-loading {
2844
+ --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
2845
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
2846
+ justify-content: center;
2847
+ padding-block-start: var(--pf-v5-c-menu__list-item--m-loading--PaddingTop);
2848
+ overflow: hidden;
2507
2849
  }
2508
2850
 
2509
- .pf-v5-c-dropdown__toggle.pf-m-primary::before,
2510
- .pf-v5-c-dropdown__toggle.pf-m-primary .pf-v5-c-dropdown__toggle-button::before {
2511
- border: 0;
2851
+ .pf-v5-c-menu__list-item.pf-m-danger {
2852
+ --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-danger__item--Color, inherit);
2512
2853
  }
2513
2854
 
2514
- .pf-v5-c-dropdown__toggle.pf-m-primary:hover {
2515
- --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-primary--hover--BackgroundColor);
2855
+ .pf-v5-c-menu__item {
2856
+ display: flex;
2857
+ flex-basis: 100%;
2858
+ flex-direction: column;
2859
+ min-width: 0;
2860
+ padding-block-start: var(--pf-v5-c-menu__item--PaddingTop);
2861
+ padding-block-end: var(--pf-v5-c-menu__item--PaddingBottom);
2862
+ padding-inline-start: var(--pf-v5-c-menu__item--PaddingLeft);
2863
+ padding-inline-end: var(--pf-v5-c-menu__item--PaddingRight);
2864
+ font-size: var(--pf-v5-c-menu__item--FontSize);
2865
+ font-weight: var(--pf-v5-c-menu__item--FontWeight);
2866
+ line-height: var(--pf-v5-c-menu__item--LineHeight);
2867
+ color: var(--pf-v5-c-menu__item--Color);
2868
+ text-align: start;
2869
+ background-color: var(--pf-v5-c-menu__item--BackgroundColor);
2870
+ border: none;
2516
2871
  }
2517
2872
 
2518
- .pf-v5-c-dropdown__toggle.pf-m-primary:focus {
2519
- --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-primary--focus--BackgroundColor);
2873
+ .pf-v5-c-menu__item:hover {
2874
+ text-decoration: none;
2520
2875
  }
2521
2876
 
2522
- .pf-v5-c-dropdown__toggle.pf-m-primary:active, .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-active {
2523
- --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-primary--active--BackgroundColor);
2524
- }
2525
-
2526
- .pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-primary {
2527
- --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
2528
- }
2529
-
2530
- .pf-v5-c-dropdown__toggle.pf-m-secondary {
2531
- border-radius: var(--pf-v5-c-dropdown__toggle--m-secondary--BorderRadius);
2532
- }
2533
-
2534
- .pf-v5-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) {
2535
- --pf-v5-c-dropdown__toggle--Color: var(--pf-v5-c-dropdown__toggle--m-secondary--Color);
2536
- --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-secondary--BackgroundColor);
2537
- }
2538
-
2539
- .pf-v5-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])::before {
2540
- border: var(--pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-v5-c-dropdown__toggle--m-secondary--before--BorderColor);
2541
- border-radius: var(--pf-v5-c-dropdown__toggle--m-secondary--BorderRadius);
2542
- }
2543
-
2544
- .pf-v5-c-dropdown__toggle.pf-m-secondary:hover {
2545
- --pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
2546
- }
2547
-
2548
- .pf-v5-c-dropdown__toggle.pf-m-secondary:focus {
2549
- --pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
2550
- }
2551
-
2552
- .pf-v5-c-dropdown__toggle.pf-m-secondary:active, .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-active {
2553
- --pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
2877
+ .pf-v5-c-menu__item:hover, .pf-v5-c-menu__item:focus {
2878
+ --pf-v5-c-menu__item-external-icon--Opacity: 1;
2554
2879
  }
2555
2880
 
2556
- .pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-secondary {
2557
- --pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
2558
- --pf-v5-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-v5-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
2881
+ .pf-v5-c-menu__item.pf-m-selected .pf-v5-c-menu__item-select-icon {
2882
+ opacity: 1;
2559
2883
  }
2560
2884
 
2561
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
2562
- --pf-v5-c-dropdown__toggle-button--Color: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--Color);
2885
+ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disabled)) {
2886
+ cursor: pointer;
2563
2887
  }
2564
2888
 
2565
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
2566
- --pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
2889
+ .pf-v5-c-menu__item-main {
2890
+ display: flex;
2891
+ align-items: center;
2892
+ width: 100%;
2567
2893
  }
2568
2894
 
2569
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
2570
- --pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
2895
+ .pf-v5-c-menu__item-external-icon {
2896
+ margin-inline-start: var(--pf-v5-c-menu__item-external-icon--MarginLeft);
2897
+ font-size: var(--pf-v5-c-menu__item-external-icon--FontSize);
2898
+ color: var(--pf-v5-c-menu__item-external-icon--Color);
2899
+ opacity: var(--pf-v5-c-menu__item-external-icon--Opacity);
2571
2900
  }
2572
2901
 
2573
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
2574
- --pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
2902
+ .pf-v5-c-menu__item-text {
2903
+ overflow: hidden;
2904
+ text-overflow: ellipsis;
2905
+ white-space: nowrap;
2906
+ flex-grow: 1;
2575
2907
  }
2576
2908
 
2577
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
2578
- border: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
2909
+ .pf-v5-c-menu__group {
2910
+ --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-menu__group--Display);
2579
2911
  }
2580
2912
 
2581
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
2582
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
2913
+ .pf-v5-c-menu__group-title {
2914
+ padding-block-start: var(--pf-v5-c-menu__group-title--PaddingTop);
2915
+ padding-inline-start: var(--pf-v5-c-menu__group-title--PaddingLeft);
2916
+ padding-inline-end: var(--pf-v5-c-menu__group-title--PaddingRight);
2917
+ font-size: var(--pf-v5-c-menu__group-title--FontSize);
2918
+ font-weight: var(--pf-v5-c-menu__group-title--FontWeight);
2919
+ color: var(--pf-v5-c-menu__group-title--Color);
2583
2920
  }
2584
2921
 
2585
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
2586
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
2922
+ .pf-v5-c-menu__item-description {
2923
+ font-size: var(--pf-v5-c-menu__item-description--FontSize);
2924
+ color: var(--pf-v5-c-menu__item-description--Color);
2925
+ word-break: break-word;
2587
2926
  }
2588
2927
 
2589
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
2590
- --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
2928
+ .pf-v5-c-menu__item-icon {
2929
+ margin-inline-end: var(--pf-v5-c-menu__item-icon--MarginRight);
2591
2930
  }
2592
2931
 
2593
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
2594
- border-start-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
2595
- border-end-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
2932
+ .pf-v5-c-menu__item-check {
2933
+ display: flex;
2934
+ align-items: center;
2935
+ margin-inline-end: var(--pf-v5-c-menu__item-check--MarginRight);
2596
2936
  }
2597
2937
 
2598
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
2599
- border-start-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
2600
- border-end-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
2938
+ .pf-v5-c-menu__item-check .pf-v5-c-check {
2939
+ --pf-v5-c-check__input--TranslateY: none;
2601
2940
  }
2602
2941
 
2603
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
2604
- border-inline-start: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
2942
+ .pf-v5-c-menu__item-toggle-icon {
2943
+ padding-inline-start: var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft);
2944
+ padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
2945
+ color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
2605
2946
  }
2606
2947
 
2607
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
2608
- border-inline-end: 0;
2948
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
2949
+ scale: -1 1;
2609
2950
  }
2610
2951
 
2611
- .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
2612
- border: 0;
2952
+ .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
2953
+ margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
2613
2954
  }
2614
2955
 
2615
- .pf-v5-c-dropdown__toggle > .pf-v5-c-badge {
2616
- --pf-v5-c-dropdown__toggle-icon--PaddingRight: var(--pf-v5-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight);
2617
- --pf-v5-c-dropdown__toggle-icon--PaddingLeft: var(--pf-v5-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft);
2618
- --pf-v5-c-dropdown__toggle-icon--MarginLeft: var(--pf-v5-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
2956
+ .pf-v5-c-menu__item-toggle-icon + .pf-v5-c-menu__item-text {
2957
+ margin-inline-start: var(--pf-v5-c-menu__item-toggle-icon--item-text--MarginLeft);
2619
2958
  }
2620
2959
 
2621
- .pf-v5-c-dropdown__toggle .pf-v5-c-dropdown__toggle-text {
2622
- overflow: hidden;
2623
- text-overflow: ellipsis;
2624
- white-space: nowrap;
2960
+ .pf-v5-c-menu__item-select-icon {
2961
+ margin-inline-start: var(--pf-v5-c-menu__item-select-icon--MarginLeft);
2962
+ font-size: var(--pf-v5-c-menu__item-select-icon--FontSize);
2963
+ color: var(--pf-v5-c-menu__item-select-icon--Color);
2964
+ opacity: 0;
2625
2965
  }
2626
2966
 
2627
- .pf-v5-c-dropdown__toggle-button {
2628
- align-self: baseline;
2967
+ .pf-v5-c-menu__item-action {
2968
+ display: flex;
2969
+ padding-block-start: var(--pf-v5-c-menu__item-action--PaddingTop);
2970
+ padding-block-end: var(--pf-v5-c-menu__item-action--PaddingBottom);
2971
+ padding-inline-start: var(--pf-v5-c-menu__item-action--PaddingLeft);
2972
+ padding-inline-end: var(--pf-v5-c-menu__item-action--PaddingRight);
2973
+ color: var(--pf-v5-c-menu__item-action--Color);
2974
+ background-color: var(--pf-v5-c-menu__item-action--BackgroundColor);
2975
+ border: none;
2629
2976
  }
2630
2977
 
2631
- .pf-v5-c-dropdown__toggle-text {
2632
- flex: 1 1 auto;
2633
- text-align: start;
2978
+ .pf-v5-c-menu__item-action.pf-m-favorite .pf-v5-c-menu__item-action-icon {
2979
+ font-size: var(--pf-v5-c-menu__item-action--m-favorite__icon--FontSize);
2634
2980
  }
2635
2981
 
2636
- .pf-v5-c-dropdown__toggle-icon {
2637
- padding-inline-start: var(--pf-v5-c-dropdown__toggle-icon--PaddingLeft);
2638
- padding-inline-end: var(--pf-v5-c-dropdown__toggle-icon--PaddingRight);
2639
- margin-inline-start: var(--pf-v5-c-dropdown__toggle-icon--MarginLeft);
2640
- line-height: var(--pf-v5-c-dropdown__toggle-icon--LineHeight);
2641
- color: var(--pf-v5-c-dropdown__toggle-icon--Color, inherit);
2982
+ .pf-v5-c-menu__item-action.pf-m-favorited {
2983
+ --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--m-favorited--Color);
2984
+ --pf-v5-c-menu__item-action--hover--Color: var(--pf-v5-c-menu__item-action--m-favorited--hover--Color);
2642
2985
  }
2643
2986
 
2644
- .pf-v5-c-dropdown.pf-m-top.pf-m-expanded .pf-v5-c-dropdown__toggle-icon {
2645
- transform: rotate(var(--pf-v5-c-dropdown--m-top--m-expanded__toggle-icon--Rotate));
2987
+ .pf-v5-c-menu__item-action:hover, .pf-v5-c-menu__item-action:focus {
2988
+ --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--hover--Color);
2646
2989
  }
2647
2990
 
2648
- .pf-v5-c-dropdown__toggle-image {
2649
- display: inline-flex;
2650
- flex-shrink: 0;
2651
- line-height: 1;
2991
+ .pf-v5-c-menu__item-action:disabled, .pf-v5-c-menu__item-action.pf-m-disabled, .pf-v5-c-menu__item-action.pf-m-aria-disabled {
2992
+ --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--disabled--Color);
2652
2993
  }
2653
2994
 
2654
- .pf-v5-c-dropdown__toggle-progress {
2655
- position: absolute;
2656
- inset-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
2657
- visibility: var(--pf-v5-c-dropdown__toggle-progress--Visibility);
2995
+ .pf-v5-c-menu__item-action-icon {
2996
+ display: flex;
2997
+ align-items: center;
2998
+ height: var(--pf-v5-c-menu__item-action-icon--Height);
2658
2999
  }
2659
3000
 
2660
- .pf-v5-c-dropdown__toggle-progress .pf-v5-c-spinner {
2661
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-dropdown__toggle-progress--c-spinner--diameter);
3001
+ .pf-v5-c-menu__footer {
3002
+ position: relative;
3003
+ padding-block-start: var(--pf-v5-c-menu__footer--PaddingTop);
3004
+ padding-block-end: var(--pf-v5-c-menu__footer--PaddingBottom);
3005
+ padding-inline-start: var(--pf-v5-c-menu__footer--PaddingLeft);
3006
+ padding-inline-end: var(--pf-v5-c-menu__footer--PaddingRight);
3007
+ box-shadow: var(--pf-v5-c-menu__footer--BoxShadow);
2662
3008
  }
2663
3009
 
2664
- .pf-v5-c-dropdown__menu {
3010
+ .pf-v5-c-menu__footer::after {
2665
3011
  position: absolute;
2666
- inset-block-start: var(--pf-v5-c-dropdown__menu--Top);
2667
- z-index: var(--pf-v5-c-dropdown__menu--ZIndex);
2668
- padding-block-start: var(--pf-v5-c-dropdown__menu--PaddingTop);
2669
- padding-block-end: var(--pf-v5-c-dropdown__menu--PaddingBottom);
2670
- background: var(--pf-v5-c-dropdown__menu--BackgroundColor);
2671
- background-clip: padding-box;
2672
- box-shadow: var(--pf-v5-c-dropdown__menu--BoxShadow);
2673
- }
2674
-
2675
- .pf-v5-c-dropdown__menu.pf-m-static {
2676
- --pf-v5-c-dropdown--m-top__menu--TranslateY: 0;
2677
- position: static;
2678
- inset-block-start: auto;
2679
- inset-block-end: auto;
2680
- inset-inline-start: auto;
2681
- inset-inline-end: auto;
2682
- z-index: auto;
2683
- min-width: min-content;
2684
- }
2685
-
2686
- .pf-v5-c-dropdown .pf-v5-c-menu,
2687
- .pf-v5-c-dropdown__menu {
2688
- min-width: 100%;
2689
- }
2690
-
2691
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right,
2692
- .pf-v5-c-dropdown__menu.pf-m-align-right {
2693
- inset-inline-end: 0;
3012
+ inset: 0;
3013
+ pointer-events: none;
3014
+ content: "";
3015
+ border-block-start: var(--pf-v5-c-menu__footer--after--BorderTopWidth) solid var(--pf-v5-c-menu__footer--after--BorderTopColor);
2694
3016
  }
2695
3017
 
2696
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left,
2697
- .pf-v5-c-dropdown__menu.pf-m-align-left {
2698
- inset-inline-end: auto;
3018
+ :where(.pf-v5-theme-dark) .pf-v5-c-menu {
3019
+ --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
3020
+ --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
3021
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
2699
3022
  }
2700
3023
 
2701
- @media (min-width: 576px) {
2702
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-sm,
2703
- .pf-v5-c-dropdown__menu.pf-m-align-right-on-sm {
2704
- inset-inline-end: 0;
2705
- }
2706
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-sm,
2707
- .pf-v5-c-dropdown__menu.pf-m-align-left-on-sm {
2708
- inset-inline-end: auto;
2709
- }
2710
- }
2711
- @media (min-width: 768px) {
2712
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-md,
2713
- .pf-v5-c-dropdown__menu.pf-m-align-right-on-md {
2714
- inset-inline-end: 0;
2715
- }
2716
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-md,
2717
- .pf-v5-c-dropdown__menu.pf-m-align-left-on-md {
2718
- inset-inline-end: auto;
2719
- }
2720
- }
2721
- @media (min-width: 992px) {
2722
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-lg,
2723
- .pf-v5-c-dropdown__menu.pf-m-align-right-on-lg {
2724
- inset-inline-end: 0;
2725
- }
2726
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-lg,
2727
- .pf-v5-c-dropdown__menu.pf-m-align-left-on-lg {
2728
- inset-inline-end: auto;
2729
- }
2730
- }
2731
- @media (min-width: 1200px) {
2732
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-xl,
2733
- .pf-v5-c-dropdown__menu.pf-m-align-right-on-xl {
2734
- inset-inline-end: 0;
2735
- }
2736
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-xl,
2737
- .pf-v5-c-dropdown__menu.pf-m-align-left-on-xl {
2738
- inset-inline-end: auto;
2739
- }
2740
- }
2741
- @media (min-width: 1450px) {
2742
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-2xl,
2743
- .pf-v5-c-dropdown__menu.pf-m-align-right-on-2xl {
2744
- inset-inline-end: 0;
2745
- }
2746
- .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-2xl,
2747
- .pf-v5-c-dropdown__menu.pf-m-align-left-on-2xl {
2748
- inset-inline-end: auto;
2749
- }
2750
- }
2751
- .pf-v5-c-dropdown.pf-m-top .pf-v5-c-dropdown__menu {
2752
- --pf-v5-c-dropdown__menu--Top: var(--pf-v5-c-dropdown--m-top__menu--Top);
2753
- transform: translateY(var(--pf-v5-c-dropdown--m-top__menu--TranslateY));
2754
- }
2755
-
2756
- .pf-v5-c-dropdown.pf-m-top > .pf-v5-c-menu {
2757
- --pf-v5-c-dropdown--c-menu--Top: var(--pf-v5-c-dropdown--m-top--c-menu--Top);
2758
- transform: translateY(var(--pf-v5-c-dropdown--m-top--c-menu--TranslateY));
2759
- }
2760
-
2761
- .pf-v5-c-dropdown__menu-item {
2762
- display: block;
2763
- width: 100%;
2764
- padding-block-start: var(--pf-v5-c-dropdown__menu-item--PaddingTop);
2765
- padding-block-end: var(--pf-v5-c-dropdown__menu-item--PaddingBottom);
2766
- padding-inline-start: var(--pf-v5-c-dropdown__menu-item--PaddingLeft);
2767
- padding-inline-end: var(--pf-v5-c-dropdown__menu-item--PaddingRight);
2768
- font-size: var(--pf-v5-c-dropdown__menu-item--FontSize);
2769
- font-weight: var(--pf-v5-c-dropdown__menu-item--FontWeight);
2770
- line-height: var(--pf-v5-c-dropdown__menu-item--LineHeight);
2771
- color: var(--pf-v5-c-dropdown__menu-item--Color);
2772
- text-align: start;
2773
- white-space: nowrap;
2774
- background-color: var(--pf-v5-c-dropdown__menu-item--BackgroundColor);
2775
- border: none;
2776
- }
2777
-
2778
- .pf-v5-c-dropdown__menu-item:hover, .pf-v5-c-dropdown__menu-item:focus {
2779
- --pf-v5-c-dropdown__menu-item--Color: var(--pf-v5-c-dropdown__menu-item--hover--Color);
2780
- --pf-v5-c-dropdown__menu-item--BackgroundColor: var(--pf-v5-c-dropdown__menu-item--hover--BackgroundColor);
2781
- text-decoration: none;
3024
+ .pf-v5-c-dropdown {
3025
+ --pf-v5-c-dropdown__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
3026
+ --pf-v5-c-dropdown__toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
3027
+ --pf-v5-c-dropdown__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
3028
+ --pf-v5-c-dropdown__toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
3029
+ --pf-v5-c-dropdown__toggle--ColumnGap: var(--pf-v5-global--spacer--sm);
3030
+ --pf-v5-c-dropdown__toggle--MinWidth: 0;
3031
+ --pf-v5-c-dropdown__toggle--FontSize: var(--pf-v5-global--FontSize--md);
3032
+ --pf-v5-c-dropdown__toggle--FontWeight: var(--pf-v5-global--FontWeight--normal);
3033
+ --pf-v5-c-dropdown__toggle--Color: var(--pf-v5-global--Color--100);
3034
+ --pf-v5-c-dropdown__toggle--LineHeight: var(--pf-v5-global--LineHeight--md);
3035
+ --pf-v5-c-dropdown__toggle--BackgroundColor: transparent;
3036
+ --pf-v5-c-dropdown__toggle--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
3037
+ --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-global--BorderColor--300);
3038
+ --pf-v5-c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-global--BorderColor--300);
3039
+ --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
3040
+ --pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
3041
+ --pf-v5-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-v5-global--active-color--100);
3042
+ --pf-v5-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
3043
+ --pf-v5-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-v5-global--active-color--100);
3044
+ --pf-v5-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
3045
+ --pf-v5-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-v5-global--active-color--100);
3046
+ --pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
3047
+ --pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-v5-global--active-color--100);
3048
+ --pf-v5-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
3049
+ --pf-v5-c-dropdown__toggle--m-plain--Color: var(--pf-v5-global--Color--200);
3050
+ --pf-v5-c-dropdown__toggle--m-plain--hover--Color: var(--pf-v5-global--Color--100);
3051
+ --pf-v5-c-dropdown__toggle--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
3052
+ --pf-v5-c-dropdown__toggle--m-plain--PaddingRight: var(--pf-v5-global--spacer--md);
3053
+ --pf-v5-c-dropdown__toggle--m-plain--PaddingLeft: var(--pf-v5-global--spacer--md);
3054
+ --pf-v5-c-dropdown__toggle--m-plain--child--LineHeight: normal;
3055
+ --pf-v5-c-dropdown__toggle--m-primary--Color: var(--pf-v5-global--Color--light-100);
3056
+ --pf-v5-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
3057
+ --pf-v5-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
3058
+ --pf-v5-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
3059
+ --pf-v5-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
3060
+ --pf-v5-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-v5-global--primary-color--200);
3061
+ --pf-v5-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--200);
3062
+ --pf-v5-c-dropdown__toggle--m-primary--disabled--Color: var(--pf-v5-global--Color--100);
3063
+ --pf-v5-c-dropdown__toggle--m-secondary--Color: var(--pf-v5-global--primary-color--100);
3064
+ --pf-v5-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
3065
+ --pf-v5-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
3066
+ --pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
3067
+ --pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3068
+ --pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3069
+ --pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3070
+ --pf-v5-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-v5-global--primary-color--100);
3071
+ --pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
3072
+ --pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-v5-global--primary-color--100);
3073
+ --pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-v5-global--primary-color--100);
3074
+ --pf-v5-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3075
+ --pf-v5-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-v5-global--primary-color--100);
3076
+ --pf-v5-c-dropdown__toggle-button--Color: var(--pf-v5-global--Color--100);
3077
+ --pf-v5-c-dropdown__toggle-button--BackgroundColor: transparent;
3078
+ --pf-v5-c-dropdown__toggle-progress--Visibility: hidden;
3079
+ --pf-v5-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-v5-global--FontSize--sm);
3080
+ --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-v5-global--spacer--form-element);
3081
+ --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-v5-global--spacer--xs);
3082
+ --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingBottom: var(--pf-v5-global--spacer--form-element);
3083
+ --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-v5-global--spacer--xs);
3084
+ --pf-v5-c-dropdown__toggle--m-split-button--child--BackgroundColor: transparent;
3085
+ --pf-v5-c-dropdown__toggle--m-split-button--first-child--PaddingLeft: var(--pf-v5-global--spacer--sm);
3086
+ --pf-v5-c-dropdown__toggle--m-split-button--last-child--PaddingRight: var(--pf-v5-global--spacer--sm);
3087
+ --pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft: var(--pf-v5-global--spacer--sm);
3088
+ --pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight: var(--pf-v5-global--spacer--sm);
3089
+ --pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
3090
+ --pf-v5-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-v5-global--spacer--sm);
3091
+ --pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
3092
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
3093
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-global--primary-color--100);
3094
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
3095
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
3096
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-v5-global--primary-color--200);
3097
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-v5-global--primary-color--200);
3098
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-v5-global--primary-color--200);
3099
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
3100
+ --pf-v5-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3101
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-v5-global--primary-color--100);
3102
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3103
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3104
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3105
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
3106
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-v5-global--primary-color--100);
3107
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
3108
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
3109
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3110
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3111
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-v5-global--BorderWidth--md);
3112
+ --pf-v5-c-dropdown__toggle-icon--LineHeight: var(--pf-v5-global--LineHeight--md);
3113
+ --pf-v5-c-dropdown__toggle-icon--PaddingRight: var(--pf-v5-global--spacer--sm);
3114
+ --pf-v5-c-dropdown__toggle-icon--PaddingLeft: var(--pf-v5-global--spacer--sm);
3115
+ --pf-v5-c-dropdown__toggle-icon--MarginLeft: 0;
3116
+ --pf-v5-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
3117
+ --pf-v5-c-dropdown--m-plain__toggle-icon--Color: var(--pf-v5-global--Color--200);
3118
+ --pf-v5-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-v5-global--Color--100);
3119
+ --pf-v5-c-dropdown__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
3120
+ --pf-v5-c-dropdown__menu--BoxShadow: var(--pf-v5-global--BoxShadow--md);
3121
+ --pf-v5-c-dropdown__menu--PaddingTop: var(--pf-v5-global--spacer--sm);
3122
+ --pf-v5-c-dropdown__menu--PaddingBottom: var(--pf-v5-global--spacer--sm);
3123
+ --pf-v5-c-dropdown__menu--Top: calc(100% + var(--pf-v5-global--spacer--xs));
3124
+ --pf-v5-c-dropdown__menu--ZIndex: var(--pf-v5-global--ZIndex--sm);
3125
+ --pf-v5-c-dropdown--m-top__menu--Top: 0;
3126
+ --pf-v5-c-dropdown--m-top__menu--TranslateY: calc(-100% - var(--pf-v5-global--spacer--xs));
3127
+ --pf-v5-c-dropdown__menu-item--BackgroundColor: transparent;
3128
+ --pf-v5-c-dropdown__menu-item--PaddingTop: var(--pf-v5-global--spacer--sm);
3129
+ --pf-v5-c-dropdown__menu-item--PaddingRight: var(--pf-v5-global--spacer--md);
3130
+ --pf-v5-c-dropdown__menu-item--PaddingBottom: var(--pf-v5-global--spacer--sm);
3131
+ --pf-v5-c-dropdown__menu-item--PaddingLeft: var(--pf-v5-global--spacer--md);
3132
+ --pf-v5-c-dropdown__menu-item--FontSize: var(--pf-v5-global--FontSize--md);
3133
+ --pf-v5-c-dropdown__menu-item--FontWeight: var(--pf-v5-global--FontWeight--normal);
3134
+ --pf-v5-c-dropdown__menu-item--LineHeight: var(--pf-v5-global--LineHeight--md);
3135
+ --pf-v5-c-dropdown__menu-item--Color: var(--pf-v5-global--Color--dark-100);
3136
+ --pf-v5-c-dropdown__menu-item--hover--Color: var(--pf-v5-global--Color--dark-100);
3137
+ --pf-v5-c-dropdown__menu-item--disabled--Color: var(--pf-v5-global--Color--dark-200);
3138
+ --pf-v5-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
3139
+ --pf-v5-c-dropdown__menu-item--disabled--BackgroundColor: transparent;
3140
+ --pf-v5-c-dropdown__menu-item--m-text--Color: var(--pf-v5-global--Color--dark-200);
3141
+ --pf-v5-c-dropdown__menu-item-icon--MarginRight: var(--pf-v5-global--spacer--sm);
3142
+ --pf-v5-c-dropdown__menu-item-icon--Width: var(--pf-v5-global--icon--FontSize--lg);
3143
+ --pf-v5-c-dropdown__menu-item-icon--Height: var(--pf-v5-global--icon--FontSize--lg);
3144
+ --pf-v5-c-dropdown__menu-item-description--FontSize: var(--pf-v5-global--FontSize--xs);
3145
+ --pf-v5-c-dropdown__menu-item-description--Color: var(--pf-v5-global--Color--dark-200);
3146
+ --pf-v5-c-dropdown__group--group--PaddingTop: var(--pf-v5-global--spacer--sm);
3147
+ --pf-v5-c-dropdown__group-title--PaddingTop: var(--pf-v5-global--spacer--sm);
3148
+ --pf-v5-c-dropdown__group-title--PaddingRight: var(--pf-v5-c-dropdown__menu-item--PaddingRight);
3149
+ --pf-v5-c-dropdown__group-title--PaddingBottom: var(--pf-v5-c-dropdown__menu-item--PaddingBottom);
3150
+ --pf-v5-c-dropdown__group-title--PaddingLeft: var(--pf-v5-c-dropdown__menu-item--PaddingLeft);
3151
+ --pf-v5-c-dropdown__group-title--FontSize: var(--pf-v5-global--FontSize--xs);
3152
+ --pf-v5-c-dropdown__group-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
3153
+ --pf-v5-c-dropdown__group-title--Color: var(--pf-v5-global--Color--dark-200);
3154
+ --pf-v5-c-dropdown--c-divider--MarginTop: var(--pf-v5-global--spacer--sm);
3155
+ --pf-v5-c-dropdown--c-divider--MarginBottom: var(--pf-v5-global--spacer--sm);
3156
+ --pf-v5-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0;
3157
+ --pf-v5-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0;
3158
+ --pf-v5-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-v5-global--spacer--xs);
3159
+ --pf-v5-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
3160
+ --pf-v5-c-dropdown--c-menu--Top: calc(100% + var(--pf-v5-global--spacer--xs));
3161
+ --pf-v5-c-dropdown--c-menu--ZIndex: var(--pf-v5-global--ZIndex--sm);
3162
+ --pf-v5-c-dropdown--m-top--c-menu--Top: 0;
3163
+ --pf-v5-c-dropdown--m-top--c-menu--TranslateY: calc(-100% - var(--pf-v5-global--spacer--xs));
3164
+ --pf-v5-c-dropdown--m-full-height__toggle--before--BorderTopWidth: 0;
3165
+ --pf-v5-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
3166
+ --pf-v5-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
3167
+ --pf-v5-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
3168
+ --pf-v5-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
3169
+ --pf-v5-c-dropdown--m-full-height__toggle--PaddingRight: var(--pf-v5-global--spacer--lg);
3170
+ --pf-v5-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-v5-global--spacer--lg);
3171
+ position: relative;
3172
+ display: inline-flex;
3173
+ align-items: flex-start;
3174
+ max-width: 100%;
2782
3175
  }
2783
3176
 
2784
- .pf-v5-c-dropdown__menu-item:disabled, .pf-v5-c-dropdown__menu-item.pf-m-disabled, .pf-v5-c-dropdown__menu-item.pf-m-aria-disabled {
2785
- --pf-v5-c-dropdown__menu-item--Color: var(--pf-v5-c-dropdown__menu-item--disabled--Color);
2786
- --pf-v5-c-dropdown__menu-item--BackgroundColor: var(--pf-v5-c-dropdown__menu-item--disabled--BackgroundColor);
3177
+ .pf-v5-c-dropdown .pf-v5-c-divider {
3178
+ margin-block-start: var(--pf-v5-c-dropdown--c-divider--MarginTop);
3179
+ margin-block-end: var(--pf-v5-c-dropdown--c-divider--MarginBottom);
2787
3180
  }
2788
3181
 
2789
- .pf-v5-c-dropdown__menu-item:disabled, .pf-v5-c-dropdown__menu-item.pf-m-disabled {
2790
- pointer-events: none;
3182
+ .pf-v5-c-dropdown .pf-v5-c-divider:last-child {
3183
+ --pf-v5-c-dropdown--c-divider--MarginBottom: 0;
2791
3184
  }
2792
3185
 
2793
- .pf-v5-c-dropdown__menu-item.pf-m-aria-disabled {
2794
- cursor: default;
3186
+ .pf-v5-c-dropdown > .pf-v5-c-menu {
3187
+ position: absolute;
3188
+ inset-block-start: var(--pf-v5-c-dropdown--c-menu--Top);
3189
+ z-index: var(--pf-v5-c-dropdown--c-menu--ZIndex);
2795
3190
  }
2796
3191
 
2797
- .pf-v5-c-dropdown__menu-item.pf-m-icon {
2798
- display: flex;
3192
+ .pf-v5-c-dropdown.pf-m-full-height {
3193
+ --pf-v5-c-dropdown__toggle--PaddingRight: var(--pf-v5-c-dropdown--m-full-height__toggle--PaddingRight);
3194
+ --pf-v5-c-dropdown__toggle--PaddingLeft: var(--pf-v5-c-dropdown--m-full-height__toggle--PaddingLeft);
3195
+ --pf-v5-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-v5-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth);
3196
+ --pf-v5-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-v5-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth);
3197
+ --pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-v5-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth);
3198
+ display: inline-flex;
2799
3199
  align-items: center;
3200
+ height: 100%;
2800
3201
  }
2801
3202
 
2802
- .pf-v5-c-dropdown__menu-item.pf-m-icon.pf-m-description {
2803
- flex-direction: column;
2804
- align-items: flex-start;
3203
+ .pf-v5-c-dropdown.pf-m-full-height .pf-v5-c-dropdown__toggle {
3204
+ align-self: stretch;
2805
3205
  }
2806
3206
 
2807
- .pf-v5-c-dropdown__menu-item.pf-m-icon .pf-v5-c-dropdown__menu-item-main {
2808
- display: flex;
2809
- align-items: center;
3207
+ .pf-v5-c-dropdown.pf-m-full-height .pf-v5-c-dropdown__toggle::before {
3208
+ border-block-start-width: var(--pf-v5-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
2810
3209
  }
2811
3210
 
2812
- .pf-v5-c-dropdown__menu-item.pf-m-text {
2813
- --pf-v5-c-dropdown__menu-item--Color: var(--pf-v5-c-dropdown__menu-item--m-text--Color);
3211
+ .pf-v5-c-dropdown.pf-m-full-height:hover .pf-v5-c-dropdown__toggle::before {
3212
+ border-block-end-width: var(--pf-v5-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
2814
3213
  }
2815
3214
 
2816
- .pf-v5-c-dropdown__menu-item.pf-m-text:hover, .pf-v5-c-dropdown__menu-item.pf-m-text:focus {
2817
- --pf-v5-c-dropdown__menu-item--BackgroundColor: transparent;
3215
+ .pf-v5-c-dropdown.pf-m-expanded {
3216
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
3217
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
2818
3218
  }
2819
3219
 
2820
- .pf-v5-c-dropdown__menu-item-icon {
3220
+ .pf-v5-c-dropdown__toggle {
3221
+ position: relative;
2821
3222
  display: inline-flex;
3223
+ column-gap: var(--pf-v5-c-dropdown__toggle--ColumnGap);
2822
3224
  align-items: center;
2823
- justify-content: center;
2824
- width: var(--pf-v5-c-dropdown__menu-item-icon--Width);
2825
- height: var(--pf-v5-c-dropdown__menu-item-icon--Height);
2826
- margin-inline-end: var(--pf-v5-c-dropdown__menu-item-icon--MarginRight);
2827
- }
2828
-
2829
- .pf-v5-c-dropdown__menu-item-icon > * {
3225
+ min-width: var(--pf-v5-c-dropdown__toggle--MinWidth);
2830
3226
  max-width: 100%;
2831
- max-height: 100%;
2832
- }
2833
-
2834
- .pf-v5-c-dropdown__menu-item-description {
2835
- font-size: var(--pf-v5-c-dropdown__menu-item-description--FontSize);
2836
- color: var(--pf-v5-c-dropdown__menu-item-description--Color);
2837
- }
2838
-
2839
- .pf-v5-c-dropdown__group + .pf-v5-c-dropdown__group {
2840
- padding-block-start: var(--pf-v5-c-dropdown__group--group--PaddingTop);
2841
- }
2842
-
2843
- .pf-v5-c-dropdown__group-title {
2844
- padding-block-start: var(--pf-v5-c-dropdown__group-title--PaddingTop);
2845
- padding-block-end: var(--pf-v5-c-dropdown__group-title--PaddingBottom);
2846
- padding-inline-start: var(--pf-v5-c-dropdown__group-title--PaddingLeft);
2847
- padding-inline-end: var(--pf-v5-c-dropdown__group-title--PaddingRight);
2848
- font-size: var(--pf-v5-c-dropdown__group-title--FontSize);
2849
- font-weight: var(--pf-v5-c-dropdown__group-title--FontWeight);
2850
- color: var(--pf-v5-c-dropdown__group-title--Color);
2851
- }
2852
-
2853
- :where(.pf-v5-theme-dark) .pf-v5-c-dropdown {
2854
- --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
2855
- --pf-v5-c-dropdown__toggle--before--BorderTopColor: transparent;
2856
- --pf-v5-c-dropdown__toggle--before--BorderRightColor: transparent;
2857
- --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
2858
- --pf-v5-c-dropdown__toggle--before--BorderLeftColor: transparent;
2859
- --pf-v5-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-v5-global--palette--black-500);
2860
- --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-global--primary-color--300);
2861
- --pf-v5-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
2862
- --pf-v5-c-dropdown__toggle--m-primary--Color: var(--pf-v5-global--primary-color--400);
2863
- --pf-v5-c-dropdown__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
2864
- --pf-v5-c-dropdown__menu--Top: 100%;
2865
- --pf-v5-c-dropdown--m-top__menu--TranslateY: -100%;
2866
- --pf-v5-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
2867
- }
2868
-
2869
- :where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
2870
- color: var(--pf-v5-global--palette--black-100);
2871
- }
2872
-
2873
- :where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle.pf-m-plain {
2874
- background: transparent;
2875
- }
2876
-
2877
- .pf-v5-c-breadcrumb {
2878
- --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--sm);
2879
- --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-v5-global--LineHeight--sm);
2880
- --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-v5-global--spacer--sm);
2881
- --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--icon--Color--dark);
2882
- --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-v5-global--spacer--sm);
2883
- --pf-v5-c-breadcrumb__item-divider--FontSize: var(--pf-v5-global--FontSize--sm);
2884
- --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-global--link--Color);
2885
- --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-global--link--TextDecoration);
2886
- --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-v5-global--link--Color--hover);
2887
- --pf-v5-c-breadcrumb__link--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
2888
- --pf-v5-c-breadcrumb__link--m-current--Color: var(--pf-v5-global--Color--100);
2889
- --pf-v5-c-breadcrumb__link--BackgroundColor: transparent;
2890
- --pf-v5-c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--sm);
2891
- --pf-v5-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
2892
- --pf-v5-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v5-c-breadcrumb__item--MarginRight) * -1);
2893
- --pf-v5-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
2894
- --pf-v5-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v5-c-breadcrumb__item-divider--MarginRight) * -1);
2895
- --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-v5-global--LineHeight--sm);
2896
- display: inline-flex;
2897
- }
2898
-
2899
- .pf-v5-c-breadcrumb__list {
2900
- display: flex;
2901
- flex-wrap: wrap;
2902
- align-items: center;
2903
- }
2904
-
2905
- .pf-v5-c-breadcrumb__item {
2906
- display: flex;
2907
- align-items: baseline;
2908
- font-size: var(--pf-v5-c-breadcrumb__item--FontSize);
2909
- font-weight: var(--pf-v5-c-breadcrumb__item--FontWeight);
2910
- line-height: var(--pf-v5-c-breadcrumb__item--LineHeight);
2911
- white-space: nowrap;
2912
- list-style: none;
2913
- }
2914
-
2915
- .pf-v5-c-breadcrumb__item:not(:last-child) {
2916
- margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
2917
- }
2918
-
2919
- .pf-v5-c-breadcrumb__item-divider {
2920
- margin-inline-end: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
2921
- font-size: var(--pf-v5-c-breadcrumb__item-divider--FontSize);
2922
- line-height: 1;
2923
- color: var(--pf-v5-c-breadcrumb__item-divider--Color);
2924
- }
2925
-
2926
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
2927
- scale: -1 1;
2928
- }
2929
-
2930
- .pf-v5-c-breadcrumb__link {
2931
- font-size: inherit;
2932
- font-weight: var(--pf-v5-c-breadcrumb__link--FontWeight);
2933
- line-height: inherit;
2934
- color: var(--pf-v5-c-breadcrumb__link--Color);
2935
- text-decoration: var(--pf-v5-c-breadcrumb__link--TextDecoration);
2936
- word-break: break-word;
2937
- background-color: var(--pf-v5-c-breadcrumb__link--BackgroundColor);
2938
- }
2939
-
2940
- .pf-v5-c-breadcrumb__link:hover {
2941
- --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-c-breadcrumb__link--hover--Color);
2942
- --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-c-breadcrumb__link--hover--TextDecoration);
2943
- }
2944
-
2945
- .pf-v5-c-breadcrumb__link.pf-m-current {
2946
- cursor: default;
2947
- }
2948
-
2949
- .pf-v5-c-breadcrumb__link.pf-m-current, .pf-v5-c-breadcrumb__link.pf-m-current:hover {
2950
- color: var(--pf-v5-c-breadcrumb__link--m-current--Color);
2951
- text-decoration: none;
2952
- }
2953
-
2954
- button.pf-v5-c-breadcrumb__link {
3227
+ padding-block-start: var(--pf-v5-c-dropdown__toggle--PaddingTop);
3228
+ padding-block-end: var(--pf-v5-c-dropdown__toggle--PaddingBottom);
3229
+ padding-inline-start: var(--pf-v5-c-dropdown__toggle--PaddingLeft);
3230
+ padding-inline-end: var(--pf-v5-c-dropdown__toggle--PaddingRight);
3231
+ font-size: var(--pf-v5-c-dropdown__toggle--FontSize);
3232
+ font-weight: var(--pf-v5-c-dropdown__toggle--FontWeight);
3233
+ line-height: var(--pf-v5-c-dropdown__toggle--LineHeight);
3234
+ color: var(--pf-v5-c-dropdown__toggle--Color);
3235
+ background-color: var(--pf-v5-c-dropdown__toggle--BackgroundColor);
2955
3236
  border: none;
2956
3237
  }
2957
3238
 
2958
- .pf-v5-c-breadcrumb__dropdown {
2959
- margin-block-start: var(--pf-v5-c-breadcrumb__dropdown--MarginTop);
2960
- margin-block-end: var(--pf-v5-c-breadcrumb__dropdown--MarginBottom);
2961
- margin-inline-start: var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
2962
- margin-inline-end: var(--pf-v5-c-breadcrumb__dropdown--MarginRight);
2963
- }
2964
-
2965
- .pf-v5-c-breadcrumb__dropdown .pf-v5-c-dropdown__toggle {
2966
- line-height: var(--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
3239
+ .pf-v5-c-dropdown__toggle::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button::before {
3240
+ position: absolute;
3241
+ inset-block-start: 0;
3242
+ inset-block-end: 0;
3243
+ inset-inline-start: 0;
3244
+ inset-inline-end: 0;
3245
+ content: "";
3246
+ border: var(--pf-v5-c-dropdown__toggle--before--BorderWidth) solid;
3247
+ border-block-start-color: var(--pf-v5-c-dropdown__toggle--before--BorderTopColor);
3248
+ border-block-end-color: var(--pf-v5-c-dropdown__toggle--before--BorderBottomColor);
3249
+ border-inline-start-color: var(--pf-v5-c-dropdown__toggle--before--BorderLeftColor);
3250
+ border-inline-end-color: var(--pf-v5-c-dropdown__toggle--before--BorderRightColor);
2967
3251
  }
2968
3252
 
2969
- .pf-v5-c-breadcrumb__heading {
2970
- display: inline;
2971
- font-size: var(--pf-v5-c-breadcrumb__heading--FontSize);
3253
+ .pf-v5-c-dropdown__toggle.pf-m-disabled, .pf-v5-c-dropdown__toggle:disabled {
3254
+ --pf-v5-c-dropdown__toggle--m-primary--Color: var(--pf-v5-c-dropdown__toggle--m-primary--disabled--Color);
3255
+ --pf-v5-c-dropdown__toggle--before--BorderBottomColor: transparent;
3256
+ pointer-events: none;
2972
3257
  }
2973
3258
 
2974
- .pf-v5-c-breadcrumb__link,
2975
- .pf-v5-c-breadcrumb__heading {
2976
- white-space: normal;
3259
+ .pf-v5-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-v5-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-v5-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-v5-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
3260
+ --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--disabled--BackgroundColor);
2977
3261
  }
2978
3262
 
2979
- .pf-v5-c-breadcrumb__list > :first-child .pf-v5-c-breadcrumb__item-divider {
2980
- display: none;
3263
+ .pf-v5-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-v5-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-v5-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-v5-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
3264
+ border: 0;
2981
3265
  }
2982
3266
 
2983
- .pf-v5-c-menu {
2984
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
2985
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
2986
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
2987
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
2988
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
2989
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
2990
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
2991
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
2992
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
3267
+ .pf-v5-c-dropdown__toggle.pf-m-split-button {
3268
+ --pf-v5-c-dropdown__toggle--ColumnGap: 0;
3269
+ padding: 0;
2993
3270
  }
2994
3271
 
2995
- .pf-v5-c-menu__group, .pf-v5-c-menu__list-item, .pf-v5-c-menu__list {
2996
- --pf-v5-hidden-visible--hidden--Display: none;
2997
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
2998
- display: var(--pf-v5-hidden-visible--Display);
3272
+ .pf-v5-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
3273
+ background-color: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BackgroundColor);
2999
3274
  }
3000
3275
 
3001
- .pf-m-hidden.pf-v5-c-menu__group, .pf-m-hidden.pf-v5-c-menu__list-item, .pf-m-hidden.pf-v5-c-menu__list {
3002
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
3276
+ .pf-v5-c-dropdown__toggle.pf-m-split-button > * {
3277
+ position: relative;
3278
+ padding-block-start: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingTop);
3279
+ padding-block-end: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingBottom);
3280
+ padding-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
3281
+ padding-inline-end: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight);
3003
3282
  }
3004
3283
 
3005
- @media screen and (min-width: 576px) {
3006
- .pf-m-hidden-on-sm.pf-v5-c-menu__group, .pf-m-hidden-on-sm.pf-v5-c-menu__list-item, .pf-m-hidden-on-sm.pf-v5-c-menu__list {
3007
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
3008
- }
3009
- .pf-m-visible-on-sm.pf-v5-c-menu__group, .pf-m-visible-on-sm.pf-v5-c-menu__list-item, .pf-m-visible-on-sm.pf-v5-c-menu__list {
3010
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
3011
- }
3012
- }
3013
- @media screen and (min-width: 768px) {
3014
- .pf-m-hidden-on-md.pf-v5-c-menu__group, .pf-m-hidden-on-md.pf-v5-c-menu__list-item, .pf-m-hidden-on-md.pf-v5-c-menu__list {
3015
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
3016
- }
3017
- .pf-m-visible-on-md.pf-v5-c-menu__group, .pf-m-visible-on-md.pf-v5-c-menu__list-item, .pf-m-visible-on-md.pf-v5-c-menu__list {
3018
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
3019
- }
3020
- }
3021
- @media screen and (min-width: 992px) {
3022
- .pf-m-hidden-on-lg.pf-v5-c-menu__group, .pf-m-hidden-on-lg.pf-v5-c-menu__list-item, .pf-m-hidden-on-lg.pf-v5-c-menu__list {
3023
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
3024
- }
3025
- .pf-m-visible-on-lg.pf-v5-c-menu__group, .pf-m-visible-on-lg.pf-v5-c-menu__list-item, .pf-m-visible-on-lg.pf-v5-c-menu__list {
3026
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
3027
- }
3028
- }
3029
- @media screen and (min-width: 1200px) {
3030
- .pf-m-hidden-on-xl.pf-v5-c-menu__group, .pf-m-hidden-on-xl.pf-v5-c-menu__list-item, .pf-m-hidden-on-xl.pf-v5-c-menu__list {
3031
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
3032
- }
3033
- .pf-m-visible-on-xl.pf-v5-c-menu__group, .pf-m-visible-on-xl.pf-v5-c-menu__list-item, .pf-m-visible-on-xl.pf-v5-c-menu__list {
3034
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
3035
- }
3036
- }
3037
- @media screen and (min-width: 1450px) {
3038
- .pf-m-hidden-on-2xl.pf-v5-c-menu__group, .pf-m-hidden-on-2xl.pf-v5-c-menu__list-item, .pf-m-hidden-on-2xl.pf-v5-c-menu__list {
3039
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
3040
- }
3041
- .pf-m-visible-on-2xl.pf-v5-c-menu__group, .pf-m-visible-on-2xl.pf-v5-c-menu__list-item, .pf-m-visible-on-2xl.pf-v5-c-menu__list {
3042
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
3043
- }
3044
- }
3045
- .pf-v5-c-menu {
3046
- color: var(--pf-v5-global--Color--100);
3047
- --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
3048
- --pf-v5-c-menu--BoxShadow: var(--pf-v5-global--BoxShadow--md);
3049
- --pf-v5-c-menu--MinWidth: auto;
3050
- --pf-v5-c-menu--Width: auto;
3051
- --pf-v5-c-menu--ZIndex: var(--pf-v5-global--ZIndex--sm);
3052
- --pf-v5-c-menu--Top: auto;
3053
- --pf-v5-c-menu--m-flyout__menu--Top: calc(var(--pf-v5-c-menu__list--PaddingTop) * -1 + var(--pf-v5-c-menu--m-flyout__menu--top-offset));
3054
- --pf-v5-c-menu--m-flyout__menu--Right: auto;
3055
- --pf-v5-c-menu--m-flyout__menu--Bottom: auto;
3056
- --pf-v5-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-v5-c-menu--m-flyout__menu--left-offset));
3057
- --pf-v5-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-v5-c-menu__list--PaddingTop) * -1);
3058
- --pf-v5-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-v5-c-menu--m-flyout__menu--m-left--right-offset));
3059
- --pf-v5-c-menu--m-plain--BoxShadow: none;
3060
- --pf-v5-c-menu--m-flyout__menu--top-offset: 0px;
3061
- --pf-v5-c-menu--m-flyout__menu--left-offset: 0px;
3062
- --pf-v5-c-menu--m-flyout__menu--m-left--right-offset: 0px;
3063
- --pf-v5-c-menu__content--Height: auto;
3064
- --pf-v5-c-menu__content--MaxHeight: none;
3065
- --pf-v5-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
3066
- --pf-v5-c-menu--c-divider--MarginTop: 0;
3067
- --pf-v5-c-menu--c-divider--MarginBottom: 0;
3068
- --pf-v5-c-menu__list--c-divider--MarginTop: var(--pf-v5-global--spacer--sm);
3069
- --pf-v5-c-menu__list--c-divider--MarginBottom: var(--pf-v5-global--spacer--sm);
3070
- --pf-v5-c-menu__header--PaddingTop: var(--pf-v5-global--spacer--md);
3071
- --pf-v5-c-menu__header--PaddingRight: var(--pf-v5-global--spacer--md);
3072
- --pf-v5-c-menu__header--PaddingBottom: var(--pf-v5-global--spacer--md);
3073
- --pf-v5-c-menu__header--PaddingLeft: var(--pf-v5-global--spacer--md);
3074
- --pf-v5-c-menu__header--c-menu__item--MarginTop: calc(var(--pf-v5-c-menu__header--PaddingTop) * -1 / 2);
3075
- --pf-v5-c-menu__header--c-menu__item--MarginRight: calc(var(--pf-v5-c-menu__header--PaddingRight) * -1 / 2);
3076
- --pf-v5-c-menu__header--c-menu__item--MarginBottom: calc(var(--pf-v5-c-menu__header--PaddingBottom) * -1 / 2);
3077
- --pf-v5-c-menu__header--c-menu__item--MarginLeft: calc(var(--pf-v5-c-menu__header--PaddingLeft) * -1 / 2);
3078
- --pf-v5-c-menu__header--c-menu__item--PaddingTop: var(--pf-v5-global--spacer--sm);
3079
- --pf-v5-c-menu__header--c-menu__item--PaddingRight: var(--pf-v5-global--spacer--md);
3080
- --pf-v5-c-menu__header--c-menu__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
3081
- --pf-v5-c-menu__header--c-menu__item--PaddingLeft: var(--pf-v5-global--spacer--md);
3082
- --pf-v5-c-menu__header--c-menu__item--BackgroundColor: transparent;
3083
- --pf-v5-c-menu__header--c-menu__item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
3084
- --pf-v5-c-menu__header--c-menu__item--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
3085
- --pf-v5-c-menu__search--PaddingTop: var(--pf-v5-global--spacer--md);
3086
- --pf-v5-c-menu__search--PaddingRight: var(--pf-v5-global--spacer--md);
3087
- --pf-v5-c-menu__search--PaddingBottom: var(--pf-v5-global--spacer--md);
3088
- --pf-v5-c-menu__search--PaddingLeft: var(--pf-v5-global--spacer--md);
3089
- --pf-v5-c-menu__header__search--PaddingTop: 0;
3090
- --pf-v5-c-menu__list--Display: block;
3091
- --pf-v5-c-menu__list--PaddingTop: var(--pf-v5-global--spacer--sm);
3092
- --pf-v5-c-menu__list--PaddingBottom: var(--pf-v5-global--spacer--sm);
3093
- --pf-v5-c-menu__list-item--Display: flex;
3094
- --pf-v5-c-menu__list-item--Color: var(--pf-v5-global--Color--100);
3095
- --pf-v5-c-menu__list-item--BackgroundColor: transparent;
3096
- --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
3097
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
3098
- --pf-v5-c-menu__list-item--m-loading--PaddingTop: var(--pf-v5-global--spacer--sm);
3099
- --pf-v5-c-menu__item--PaddingTop: var(--pf-v5-global--spacer--sm);
3100
- --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-global--spacer--md);
3101
- --pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
3102
- --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-global--spacer--md);
3103
- --pf-v5-c-menu__item--OutlineOffset: calc(0.125rem * -1);
3104
- --pf-v5-c-menu__item--FontSize: var(--pf-v5-global--FontSize--md);
3105
- --pf-v5-c-menu__item--FontWeight: var(--pf-v5-global--FontWeight--normal);
3106
- --pf-v5-c-menu__item--LineHeight: var(--pf-v5-global--LineHeight--md);
3107
- --pf-v5-c-menu__list-item--m-disabled__item--Color: var(--pf-v5-global--disabled-color--100);
3108
- --pf-v5-c-menu__list-item--m-danger__item--Color: var(--pf-v5-global--danger-color--100);
3109
- --pf-v5-c-menu__list-item--m-load__item--Color: var(--pf-v5-global--link--Color);
3110
- --pf-v5-c-menu__group--Display: block;
3111
- --pf-v5-c-menu__group-title--PaddingTop: var(--pf-v5-global--spacer--md);
3112
- --pf-v5-c-menu__group-title--PaddingRight: var(--pf-v5-c-menu__item--PaddingRight);
3113
- --pf-v5-c-menu__group-title--PaddingLeft: var(--pf-v5-c-menu__item--PaddingLeft);
3114
- --pf-v5-c-menu__group-title--FontSize: var(--pf-v5-global--FontSize--xs);
3115
- --pf-v5-c-menu__group-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
3116
- --pf-v5-c-menu__group-title--Color: var(--pf-v5-global--Color--200);
3117
- --pf-v5-c-menu__item-description--FontSize: var(--pf-v5-global--FontSize--xs);
3118
- --pf-v5-c-menu__item-description--Color: var(--pf-v5-global--Color--200);
3119
- --pf-v5-c-menu__item-icon--MarginRight: var(--pf-v5-global--spacer--sm);
3120
- --pf-v5-c-menu__item-check--MarginRight: var(--pf-v5-global--spacer--sm);
3121
- --pf-v5-c-menu__item-toggle-icon--PaddingRight: var(--pf-v5-global--spacer--sm);
3122
- --pf-v5-c-menu__item-toggle-icon--PaddingLeft: var(--pf-v5-global--spacer--sm);
3123
- --pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-v5-global--disabled-color--200);
3124
- --pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft: var(--pf-v5-global--spacer--sm);
3125
- --pf-v5-c-menu__item-toggle-icon--item-text--MarginLeft: var(--pf-v5-global--spacer--sm);
3126
- --pf-v5-c-menu__item-select-icon--MarginLeft: var(--pf-v5-global--spacer--sm);
3127
- --pf-v5-c-menu__item-select-icon--Color: var(--pf-v5-global--active-color--100);
3128
- --pf-v5-c-menu__item-select-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
3129
- --pf-v5-c-menu__item-external-icon--MarginLeft: var(--pf-v5-global--spacer--sm);
3130
- --pf-v5-c-menu__item-external-icon--Color: var(--pf-v5-global--link--Color);
3131
- --pf-v5-c-menu__item-external-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
3132
- --pf-v5-c-menu__item-external-icon--Opacity: 0;
3133
- --pf-v5-c-menu__item-action--PaddingTop: var(--pf-v5-global--spacer--sm);
3134
- --pf-v5-c-menu__item-action--PaddingRight: var(--pf-v5-global--spacer--md);
3135
- --pf-v5-c-menu__item-action--PaddingBottom: var(--pf-v5-global--spacer--sm);
3136
- --pf-v5-c-menu__item-action--PaddingLeft: var(--pf-v5-global--spacer--md);
3137
- --pf-v5-c-menu__item-action--Color: var(--pf-v5-global--Color--200);
3138
- --pf-v5-c-menu__item-action--BackgroundColor: transparent;
3139
- --pf-v5-c-menu__item-action--hover--Color: var(--pf-v5-global--Color--100);
3140
- --pf-v5-c-menu__item-action--disabled--Color: var(--pf-v5-global--disabled-color--200);
3141
- --pf-v5-c-menu__item-action--m-favorited--Color: var(--pf-v5-global--palette--gold-400);
3142
- --pf-v5-c-menu__item-action--m-favorited--hover--Color: var(--pf-v5-global--palette--gold-500);
3143
- --pf-v5-c-menu__item-action-icon--Height: calc(var(--pf-v5-c-menu__item--FontSize) * var(--pf-v5-c-menu__item--LineHeight));
3144
- --pf-v5-c-menu__item-action--m-favorite__icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
3145
- --pf-v5-c-menu__breadcrumb--PaddingTop: var(--pf-v5-global--spacer--md);
3146
- --pf-v5-c-menu__breadcrumb--PaddingRight: var(--pf-v5-global--spacer--md);
3147
- --pf-v5-c-menu__breadcrumb--PaddingBottom: var(--pf-v5-global--spacer--md);
3148
- --pf-v5-c-menu__breadcrumb--PaddingLeft: var(--pf-v5-global--spacer--md);
3149
- --pf-v5-c-menu__breadcrumb--c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--md);
3150
- --pf-v5-c-menu__breadcrumb--c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--md);
3151
- --pf-v5-c-menu--m-drilldown--c-menu--Top: 0;
3152
- --pf-v5-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-v5-global--TransitionDuration);
3153
- --pf-v5-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v5-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
3154
- --pf-v5-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-v5-global--TransitionDuration);
3155
- --pf-v5-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-v5-global--TransitionDuration);
3156
- --pf-v5-c-menu--m-drilldown__content--Transition: transform var(--pf-v5-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v5-c-menu--m-drilldown__content--TransitionDuration--height);
3157
- --pf-v5-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-v5-global--TransitionDuration);
3158
- --pf-v5-c-menu--m-drilldown__list--Transition: transform var(--pf-v5-c-menu--m-drilldown__list--TransitionDuration--transform);
3159
- --pf-v5-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-v5-global--ZIndex--xs);
3160
- --pf-v5-c-menu__footer--PaddingTop: var(--pf-v5-global--spacer--md);
3161
- --pf-v5-c-menu__footer--PaddingRight: var(--pf-v5-global--spacer--md);
3162
- --pf-v5-c-menu__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
3163
- --pf-v5-c-menu__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
3164
- --pf-v5-c-menu__footer--BoxShadow: none;
3165
- --pf-v5-c-menu__footer--after--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
3166
- --pf-v5-c-menu__footer--after--BorderTopColor: var(--pf-v5-global--BorderColor--100);
3167
- --pf-v5-c-menu--m-scrollable__footer--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
3168
- --pf-v5-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
3169
- --pf-v5-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
3170
- --pf-v5-c-menu--m-nav--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
3171
- --pf-v5-c-menu--m-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
3172
- --pf-v5-c-menu--m-nav__list--PaddingTop: 0;
3173
- --pf-v5-c-menu--m-nav__list--PaddingBottom: 0;
3174
- --pf-v5-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
3175
- --pf-v5-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
3176
- --pf-v5-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
3177
- --pf-v5-c-menu--m-nav__item--PaddingRight: var(--pf-v5-global--spacer--lg);
3178
- --pf-v5-c-menu--m-nav__item--PaddingLeft: var(--pf-v5-global--spacer--lg);
3179
- --pf-v5-c-menu--m-nav__item--Color: var(--pf-v5-global--Color--light-100);
3180
- --pf-v5-c-menu--m-nav__item--FontSize: var(--pf-v5-global--FontSize--sm);
3181
- --pf-v5-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
3182
- --pf-v5-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
3183
- --pf-v5-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
3184
- --pf-v5-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-v5-global--BorderColor--200);
3185
- --pf-v5-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
3186
- --pf-v5-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-v5-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
3187
- --pf-v5-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
3188
- --pf-v5-c-menu--m-nav__item-description--Color: var(--pf-v5-global--Color--light-200);
3189
- --pf-v5-c-menu--m-nav--c-menu--left-offset: 0.25rem;
3190
- --pf-v5-c-menu--m-nav--c-menu--m-top--bottom-offset: 0;
3191
- --pf-v5-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
3192
- --pf-v5-c-menu--m-nav--c-menu--Top: calc(var(--pf-v5-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
3193
- --pf-v5-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-v5-c-menu--m-nav--c-menu--left-offset));
3194
- --pf-v5-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-v5-c-menu--m-nav--c-menu--m-left--right-offset));
3195
- --pf-v5-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-v5-c-menu--m-nav--c-menu--m-top--bottom-offset));
3196
- --pf-v5-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
3197
- inset-block-start: var(--pf-v5-c-menu--Top);
3198
- z-index: var(--pf-v5-c-menu--ZIndex);
3199
- width: var(--pf-v5-c-menu--Width);
3200
- min-width: var(--pf-v5-c-menu--MinWidth);
3201
- background-color: var(--pf-v5-c-menu--BackgroundColor);
3202
- box-shadow: var(--pf-v5-c-menu--BoxShadow);
3284
+ .pf-v5-c-dropdown__toggle.pf-m-split-button > *:first-child {
3285
+ --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-v5-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
3203
3286
  }
3204
3287
 
3205
- .pf-v5-c-menu .pf-v5-c-menu__content .pf-v5-c-menu .pf-v5-c-menu__content {
3206
- overflow: visible;
3288
+ .pf-v5-c-dropdown__toggle.pf-m-split-button > *:last-child {
3289
+ --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-v5-c-dropdown__toggle--m-split-button--last-child--PaddingRight);
3207
3290
  }
3208
3291
 
3209
- .pf-v5-c-menu .pf-v5-c-divider {
3210
- margin-block-start: var(--pf-v5-c-menu--c-divider--MarginTop);
3211
- margin-block-end: var(--pf-v5-c-menu--c-divider--MarginBottom);
3292
+ .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action {
3293
+ --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight);
3294
+ --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft);
3212
3295
  }
3213
3296
 
3214
- .pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu {
3215
- position: absolute;
3216
- inset-block-start: var(--pf-v5-c-menu--m-flyout__menu--Top);
3217
- inset-block-end: var(--pf-v5-c-menu--m-flyout__menu--Bottom);
3218
- inset-inline-start: var(--pf-v5-c-menu--m-flyout__menu--Left);
3219
- inset-inline-end: var(--pf-v5-c-menu--m-flyout__menu--Right);
3297
+ .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-v5-c-dropdown__toggle-button {
3298
+ margin-inline-end: var(--pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight);
3220
3299
  }
3221
3300
 
3222
- .pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__content, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__content {
3223
- overflow-y: visible;
3301
+ .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-v5-c-dropdown__toggle-button::before {
3302
+ border-inline-start: 0;
3224
3303
  }
3225
3304
 
3226
- .pf-v5-c-menu.pf-m-top {
3227
- --pf-v5-c-menu--m-flyout__menu--Top: auto;
3228
- --pf-v5-c-menu--m-flyout__menu--Bottom: var(--pf-v5-c-menu--m-flyout__menu--m-top--Bottom);
3305
+ .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-v5-c-dropdown__toggle-button:last-child {
3306
+ --pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
3229
3307
  }
3230
3308
 
3231
- .pf-v5-c-menu.pf-m-left {
3232
- --pf-v5-c-menu--m-flyout__menu--Right: var(--pf-v5-c-menu--m-flyout__menu--m-left--Right);
3233
- --pf-v5-c-menu--m-flyout__menu--Left: auto;
3309
+ .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
3310
+ border-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
3234
3311
  }
3235
3312
 
3236
- .pf-v5-c-menu.pf-m-drilldown {
3313
+ .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled, .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary[disabled] {
3314
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
3315
+ }
3316
+
3317
+ .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check {
3237
3318
  display: flex;
3238
- flex-direction: column;
3319
+ align-items: center;
3320
+ overflow: hidden;
3321
+ cursor: pointer;
3239
3322
  }
3240
3323
 
3241
- .pf-v5-c-menu.pf-m-drilldown[hidden] {
3242
- display: none;
3324
+ .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check.pf-m-in-progress {
3325
+ --pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility: hidden;
3326
+ --pf-v5-c-dropdown__toggle-progress--Visibility: visible;
3243
3327
  }
3244
3328
 
3245
- .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content {
3246
- flex-grow: 1;
3247
- overflow: hidden;
3248
- transition: var(--pf-v5-c-menu--m-drilldown__content--Transition);
3329
+ .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check > input,
3330
+ .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check {
3331
+ --pf-v5-c-check__input--TranslateY: none;
3332
+ align-self: revert;
3333
+ width: auto;
3334
+ cursor: pointer;
3335
+ visibility: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
3249
3336
  }
3250
3337
 
3251
- .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list,
3252
- .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
3253
- transform: translateX(-100%);
3338
+ .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-button {
3339
+ color: var(--pf-v5-c-dropdown__toggle-button--Color);
3340
+ background-color: var(--pf-v5-c-dropdown__toggle-button--BackgroundColor);
3341
+ border: 0;
3254
3342
  }
3255
3343
 
3256
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list, .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
3257
- transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
3344
+ .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-text {
3345
+ margin-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
3258
3346
  }
3259
3347
 
3260
- .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
3261
- --pf-v5-c-menu--BoxShadow: none;
3262
- position: absolute;
3263
- inset-block-start: var(--pf-v5-c-menu--m-drilldown--c-menu--Top);
3264
- inset-inline-start: 100%;
3265
- width: 100%;
3266
- transition: var(--pf-v5-c-menu--m-drilldown--c-menu--Transition);
3348
+ .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
3349
+ --pf-v5-c-dropdown__toggle--before--BorderWidth: 0;
3350
+ --pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
3267
3351
  }
3268
3352
 
3269
- .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
3270
- transform: translateX(-100%);
3353
+ .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
3354
+ background-color: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
3355
+ border: 0;
3271
3356
  }
3272
3357
 
3273
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
3274
- transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
3358
+ .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
3359
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
3275
3360
  }
3276
3361
 
3277
- .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
3278
- position: relative;
3279
- overflow: hidden;
3280
- visibility: visible;
3281
- transition: var(--pf-v5-c-menu--m-drilldown__list--Transition);
3362
+ .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
3363
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
3282
3364
  }
3283
3365
 
3284
- .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list .pf-v5-c-menu__list {
3285
- --pf-v5-c-menu__list--PaddingTop: 0;
3286
- --pf-v5-c-menu__list--PaddingBottom: 0;
3366
+ .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
3367
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
3287
3368
  }
3288
3369
 
3289
- .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item.pf-m-current-path .pf-v5-c-menu {
3290
- z-index: var(--pf-v5-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
3370
+ .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
3371
+ border-start-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
3372
+ border-end-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
3291
3373
  }
3292
3374
 
3293
- .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item.pf-m-current-path > .pf-v5-c-menu {
3294
- overflow: visible;
3375
+ .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
3376
+ border-start-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
3377
+ border-end-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
3295
3378
  }
3296
3379
 
3297
- .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item.pf-m-static > .pf-v5-c-menu {
3298
- position: static;
3380
+ .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button:hover::before {
3381
+ --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown__toggle--hover--before--BorderBottomColor);
3299
3382
  }
3300
3383
 
3301
- .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item.pf-m-static:hover {
3302
- background-color: transparent;
3384
+ .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button:focus::before {
3385
+ --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown__toggle--focus--before--BorderBottomColor);
3386
+ border-block-end-width: var(--pf-v5-c-dropdown__toggle--focus--before--BorderBottomWidth);
3303
3387
  }
3304
3388
 
3305
- .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item:not(.pf-m-current-path) .pf-v5-c-menu {
3306
- display: none;
3389
+ .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button:active::before {
3390
+ --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown__toggle--active--before--BorderBottomColor);
3391
+ border-block-end-width: var(--pf-v5-c-dropdown__toggle--active--before--BorderBottomWidth);
3307
3392
  }
3308
3393
 
3309
- .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__item {
3310
- outline-offset: var(--pf-v5-c-menu__item--OutlineOffset);
3394
+ .pf-m-expanded > .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button::before {
3395
+ --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
3396
+ border-block-end-width: var(--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
3311
3397
  }
3312
3398
 
3313
- .pf-v5-c-menu.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list {
3314
- overflow: visible;
3315
- visibility: hidden;
3399
+ .pf-v5-c-dropdown__toggle.pf-m-plain {
3400
+ --pf-v5-c-dropdown__toggle-icon--Color: var(--pf-v5-c-dropdown--m-plain__toggle-icon--Color);
3316
3401
  }
3317
3402
 
3318
- .pf-v5-c-menu.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list > .pf-v5-c-divider,
3319
- .pf-v5-c-menu.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list > .pf-v5-c-menu__list-item:not(.pf-m-current-path) {
3320
- display: none;
3403
+ .pf-v5-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
3404
+ --pf-v5-c-dropdown__toggle--PaddingRight: var(--pf-v5-c-dropdown__toggle--m-plain--PaddingRight);
3405
+ --pf-v5-c-dropdown__toggle--PaddingLeft: var(--pf-v5-c-dropdown__toggle--m-plain--PaddingLeft);
3406
+ display: inline-block;
3407
+ color: var(--pf-v5-c-dropdown__toggle--m-plain--Color);
3321
3408
  }
3322
3409
 
3323
- .pf-v5-c-menu.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list > .pf-v5-c-menu__list-item.pf-m-current-path {
3324
- visibility: hidden;
3410
+ .pf-v5-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
3411
+ line-height: var(--pf-v5-c-dropdown__toggle--m-plain--child--LineHeight);
3325
3412
  }
3326
3413
 
3327
- .pf-v5-c-menu.pf-m-plain {
3328
- --pf-v5-c-menu--BoxShadow: var(--pf-v5-c-menu--m-plain--BoxShadow);
3414
+ .pf-v5-c-dropdown__toggle.pf-m-plain::before {
3415
+ border: 0;
3329
3416
  }
3330
3417
 
3331
- .pf-v5-c-menu.pf-m-scrollable {
3332
- --pf-v5-c-menu__content--MaxHeight: var(--pf-v5-c-menu--m-scrollable__content--MaxHeight);
3333
- --pf-v5-c-menu__footer--BoxShadow: var(--pf-v5-c-menu--m-scrollable__footer--BoxShadow);
3334
- --pf-v5-c-menu__footer--after--BorderTopWidth: var(--pf-v5-c-menu--m-scrollable__footer--after--BorderTopWidth);
3418
+ .pf-v5-c-dropdown__toggle.pf-m-plain:hover, .pf-v5-c-dropdown__toggle.pf-m-plain:focus, .pf-v5-c-dropdown__toggle.pf-m-plain:active, .pf-v5-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-plain {
3419
+ --pf-v5-c-dropdown__toggle--m-plain--Color: var(--pf-v5-c-dropdown__toggle--m-plain--hover--Color);
3420
+ --pf-v5-c-dropdown--m-plain__toggle-icon--Color: var(--pf-v5-c-dropdown--m-plain--hover__toggle-icon--Color);
3335
3421
  }
3336
3422
 
3337
- .pf-v5-c-menu.pf-m-scrollable .pf-v5-c-menu__content {
3338
- overflow-y: auto;
3423
+ .pf-v5-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-v5-c-dropdown__toggle.pf-m-plain:disabled {
3424
+ --pf-v5-c-dropdown__toggle--m-plain--Color: var(--pf-v5-c-dropdown__toggle--m-plain--disabled--Color);
3339
3425
  }
3340
3426
 
3341
- .pf-v5-c-menu.pf-m-nav, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu {
3342
- --pf-v5-c-menu--BackgroundColor: var(--pf-v5-c-menu--m-nav--BackgroundColor);
3343
- --pf-v5-c-menu__list--PaddingTop: var(--pf-v5-c-menu--m-nav__list--PaddingTop);
3344
- --pf-v5-c-menu__list--PaddingBottom: var(--pf-v5-c-menu--m-nav__list--PaddingBottom);
3345
- --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-c-menu--m-nav__list-item--hover--BackgroundColor);
3346
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-c-menu--m-nav__list-item--focus-within--BackgroundColor);
3347
- --pf-v5-c-menu__list-item--active--BackgroundColor: var(--pf-v5-c-menu--m-nav__list-item--active--BackgroundColor);
3348
- --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu--m-nav__item--Color);
3349
- --pf-v5-c-menu__item--FontSize: var(--pf-v5-c-menu--m-nav__item--FontSize);
3350
- --pf-v5-c-menu__item--OutlineOffset: var(--pf-v5-c-menu--m-nav__item--OutlineOffset);
3351
- --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-menu--m-nav__item--PaddingRight);
3352
- --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-menu--m-nav__item--PaddingLeft);
3353
- --pf-v5-c-menu__item-description--Color: var(--pf-v5-c-menu--m-nav__item-description--Color);
3354
- box-shadow: var(--pf-v5-c-menu--m-nav--BoxShadow);
3427
+ .pf-v5-c-dropdown__toggle.pf-m-primary {
3428
+ --pf-v5-c-dropdown__toggle--Color: var(--pf-v5-c-dropdown__toggle--m-primary--Color);
3429
+ --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-primary--BackgroundColor);
3430
+ --pf-v5-c-dropdown__toggle-button--Color: var(--pf-v5-c-dropdown__toggle--m-primary--Color);
3431
+ border-radius: var(--pf-v5-c-dropdown__toggle--m-primary--BorderRadius);
3355
3432
  }
3356
3433
 
3357
- .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item {
3358
- position: relative;
3359
- outline-offset: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
3434
+ .pf-v5-c-dropdown__toggle.pf-m-primary::before,
3435
+ .pf-v5-c-dropdown__toggle.pf-m-primary .pf-v5-c-dropdown__toggle-button::before {
3436
+ border: 0;
3360
3437
  }
3361
3438
 
3362
- .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item::before, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item::before {
3363
- position: absolute;
3364
- inset-block-end: 0;
3365
- inset-inline-start: 0;
3366
- inset-inline-end: 0;
3367
- content: "";
3368
- border-block-end: var(--pf-v5-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-v5-c-menu--m-nav__item--before--BorderBottomColor);
3439
+ .pf-v5-c-dropdown__toggle.pf-m-primary:hover {
3440
+ --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-primary--hover--BackgroundColor);
3369
3441
  }
3370
3442
 
3371
- .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item:hover::after, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item:hover::after {
3372
- position: absolute;
3373
- inset-block-start: var(--pf-v5-c-menu--m-nav__item--hover--after--Top);
3374
- inset-block-end: 0;
3375
- inset-inline-start: 0;
3376
- content: "";
3377
- border-inline-start: var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftColor);
3443
+ .pf-v5-c-dropdown__toggle.pf-m-primary:focus {
3444
+ --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-primary--focus--BackgroundColor);
3378
3445
  }
3379
3446
 
3380
- .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu {
3381
- width: 100%;
3447
+ .pf-v5-c-dropdown__toggle.pf-m-primary:active, .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-active {
3448
+ --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-primary--active--BackgroundColor);
3382
3449
  }
3383
3450
 
3384
- .pf-v5-c-menu.pf-m-flyout.pf-m-nav, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu {
3385
- inset-block-start: var(--pf-v5-c-menu--m-nav--c-menu--Top);
3386
- inset-inline-start: var(--pf-v5-c-menu--m-nav--c-menu--Left);
3451
+ .pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-primary {
3452
+ --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
3387
3453
  }
3388
3454
 
3389
- .pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu.pf-m-top {
3390
- --pf-v5-c-menu--m-nav--c-menu--Top: auto;
3391
- inset-block-end: var(--pf-v5-c-menu--m-nav--c-menu--m-top--Bottom);
3455
+ .pf-v5-c-dropdown__toggle.pf-m-secondary {
3456
+ border-radius: var(--pf-v5-c-dropdown__toggle--m-secondary--BorderRadius);
3392
3457
  }
3393
3458
 
3394
- .pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu.pf-m-left {
3395
- --pf-v5-c-menu--m-nav--c-menu--Left: auto;
3396
- inset-inline-end: var(--pf-v5-c-menu--m-nav--c-menu--m-left--Right);
3459
+ .pf-v5-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) {
3460
+ --pf-v5-c-dropdown__toggle--Color: var(--pf-v5-c-dropdown__toggle--m-secondary--Color);
3461
+ --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-secondary--BackgroundColor);
3397
3462
  }
3398
3463
 
3399
- .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu__list-item:first-child, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__list-item:first-child {
3400
- --pf-v5-c-menu--m-nav__item--hover--after--Top: var(--pf-v5-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
3464
+ .pf-v5-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])::before {
3465
+ border: var(--pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-v5-c-dropdown__toggle--m-secondary--before--BorderColor);
3466
+ border-radius: var(--pf-v5-c-dropdown__toggle--m-secondary--BorderRadius);
3401
3467
  }
3402
3468
 
3403
- .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu__list-item:first-child .pf-v5-c-menu, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__list-item:first-child .pf-v5-c-menu {
3404
- --pf-v5-c-menu--m-nav--c-menu--Top: var(--pf-v5-c-menu--m-nav__list-item--first-child--c-menu--Top);
3469
+ .pf-v5-c-dropdown__toggle.pf-m-secondary:hover {
3470
+ --pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
3405
3471
  }
3406
3472
 
3407
- .pf-v5-c-menu__breadcrumb {
3408
- display: flex;
3409
- align-items: center;
3410
- min-height: var(--pf-v5-c-menu__breadcrumb--MinHeight);
3411
- padding-block-start: var(--pf-v5-c-menu__breadcrumb--PaddingTop);
3412
- padding-block-end: var(--pf-v5-c-menu__breadcrumb--PaddingBottom);
3413
- padding-inline-start: var(--pf-v5-c-menu__breadcrumb--PaddingLeft);
3414
- padding-inline-end: var(--pf-v5-c-menu__breadcrumb--PaddingRight);
3473
+ .pf-v5-c-dropdown__toggle.pf-m-secondary:focus {
3474
+ --pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
3475
+ }
3476
+
3477
+ .pf-v5-c-dropdown__toggle.pf-m-secondary:active, .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-active {
3478
+ --pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
3479
+ }
3480
+
3481
+ .pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-secondary {
3482
+ --pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
3483
+ --pf-v5-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-v5-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
3484
+ }
3485
+
3486
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
3487
+ --pf-v5-c-dropdown__toggle-button--Color: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--Color);
3415
3488
  }
3416
3489
 
3417
- .pf-v5-c-menu__breadcrumb .pf-v5-c-breadcrumb {
3418
- --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-c-menu__breadcrumb--c-breadcrumb__item--FontSize);
3419
- --pf-v5-c-breadcrumb__heading--FontSize: var(--pf-v5-c-menu__breadcrumb--c-breadcrumb__heading--FontSize);
3490
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
3491
+ --pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
3420
3492
  }
3421
3493
 
3422
- .pf-v5-c-menu__content {
3423
- height: var(--pf-v5-c-menu__content--Height);
3424
- max-height: var(--pf-v5-c-menu__content--MaxHeight);
3494
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
3495
+ --pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
3425
3496
  }
3426
3497
 
3427
- .pf-v5-c-menu__content .pf-v5-c-menu__content {
3428
- --pf-v5-c-menu__content--Height: auto;
3498
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
3499
+ --pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
3429
3500
  }
3430
3501
 
3431
- .pf-v5-c-menu__header {
3432
- --pf-v5-c-menu__item--PaddingTop: var(--pf-v5-c-menu__header--c-menu__item--PaddingTop);
3433
- --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-menu__header--c-menu__item--PaddingRight);
3434
- --pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-menu__header--c-menu__item--PaddingBottom);
3435
- --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-menu__header--c-menu__item--PaddingLeft);
3436
- padding-block-start: var(--pf-v5-c-menu__header--PaddingTop);
3437
- padding-block-end: var(--pf-v5-c-menu__header--PaddingBottom);
3438
- padding-inline-start: var(--pf-v5-c-menu__header--PaddingLeft);
3439
- padding-inline-end: var(--pf-v5-c-menu__header--PaddingRight);
3502
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
3503
+ border: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
3440
3504
  }
3441
3505
 
3442
- .pf-v5-c-menu__header > .pf-v5-c-menu__item {
3443
- --pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--BackgroundColor);
3444
- margin-block-start: var(--pf-v5-c-menu__header--c-menu__item--MarginTop);
3445
- margin-block-end: var(--pf-v5-c-menu__header--c-menu__item--MarginBottom);
3446
- margin-inline-start: var(--pf-v5-c-menu__header--c-menu__item--MarginLeft);
3447
- margin-inline-end: var(--pf-v5-c-menu__header--c-menu__item--MarginRight);
3506
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
3507
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
3448
3508
  }
3449
3509
 
3450
- .pf-v5-c-menu__header > .pf-v5-c-menu__item:hover {
3451
- --pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--hover--BackgroundColor);
3510
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
3511
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
3452
3512
  }
3453
3513
 
3454
- .pf-v5-c-menu__header > .pf-v5-c-menu__item:focus {
3455
- --pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--focus--BackgroundColor);
3514
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
3515
+ --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
3456
3516
  }
3457
3517
 
3458
- .pf-v5-c-menu__header + .pf-v5-c-menu__search {
3459
- --pf-v5-c-menu__search--PaddingTop: var(--pf-v5-c-menu__header__search--PaddingTop);
3518
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
3519
+ border-start-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
3520
+ border-end-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
3460
3521
  }
3461
3522
 
3462
- .pf-v5-c-menu__search {
3463
- padding-block-start: var(--pf-v5-c-menu__search--PaddingTop);
3464
- padding-block-end: var(--pf-v5-c-menu__search--PaddingBottom);
3465
- padding-inline-start: var(--pf-v5-c-menu__search--PaddingLeft);
3466
- padding-inline-end: var(--pf-v5-c-menu__search--PaddingRight);
3523
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
3524
+ border-start-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
3525
+ border-end-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
3467
3526
  }
3468
3527
 
3469
- .pf-v5-c-menu__list {
3470
- --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-menu__list--Display);
3471
- padding-block-start: var(--pf-v5-c-menu__list--PaddingTop);
3472
- padding-block-end: var(--pf-v5-c-menu__list--PaddingBottom);
3528
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
3529
+ border-inline-start: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
3473
3530
  }
3474
3531
 
3475
- .pf-v5-c-menu__list > .pf-v5-c-divider {
3476
- margin-block-start: var(--pf-v5-c-menu__list--c-divider--MarginTop);
3477
- margin-block-end: var(--pf-v5-c-menu__list--c-divider--MarginBottom);
3532
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
3533
+ border-inline-end: 0;
3478
3534
  }
3479
3535
 
3480
- .pf-v5-c-menu__list-item {
3481
- --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-menu__list-item--Display);
3482
- position: relative;
3483
- color: var(--pf-v5-c-menu__list-item--Color);
3484
- background-color: var(--pf-v5-c-menu__list-item--BackgroundColor);
3536
+ .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
3537
+ border: 0;
3485
3538
  }
3486
3539
 
3487
- .pf-v5-c-menu__list-item:hover {
3488
- --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--hover--BackgroundColor);
3489
- --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--hover--Color, inherit);
3540
+ .pf-v5-c-dropdown__toggle > .pf-v5-c-badge {
3541
+ --pf-v5-c-dropdown__toggle-icon--PaddingRight: var(--pf-v5-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight);
3542
+ --pf-v5-c-dropdown__toggle-icon--PaddingLeft: var(--pf-v5-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft);
3543
+ --pf-v5-c-dropdown__toggle-icon--MarginLeft: var(--pf-v5-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
3490
3544
  }
3491
3545
 
3492
- .pf-v5-c-menu__list-item:focus-within, .pf-v5-c-menu__list-item.pf-m-focus {
3493
- --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--focus-within--BackgroundColor);
3494
- --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--focus-within--Color, inherit);
3546
+ .pf-v5-c-dropdown__toggle .pf-v5-c-dropdown__toggle-text {
3547
+ overflow: hidden;
3548
+ text-overflow: ellipsis;
3549
+ white-space: nowrap;
3495
3550
  }
3496
3551
 
3497
- .pf-v5-c-menu__list-item.pf-m-disabled, .pf-v5-c-menu__list-item.pf-m-aria-disabled {
3498
- --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
3499
- --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color);
3500
- --pf-v5-c-menu__item-toggle-icon: var(--pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color);
3552
+ .pf-v5-c-dropdown__toggle-button {
3553
+ align-self: baseline;
3501
3554
  }
3502
3555
 
3503
- .pf-v5-c-menu__list-item.pf-m-disabled {
3504
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
3505
- pointer-events: none;
3556
+ .pf-v5-c-dropdown__toggle-text {
3557
+ flex: 1 1 auto;
3558
+ text-align: start;
3506
3559
  }
3507
3560
 
3508
- .pf-v5-c-menu__list-item.pf-m-aria-disabled .pf-v5-c-menu__item {
3509
- cursor: default;
3561
+ .pf-v5-c-dropdown__toggle-icon {
3562
+ padding-inline-start: var(--pf-v5-c-dropdown__toggle-icon--PaddingLeft);
3563
+ padding-inline-end: var(--pf-v5-c-dropdown__toggle-icon--PaddingRight);
3564
+ margin-inline-start: var(--pf-v5-c-dropdown__toggle-icon--MarginLeft);
3565
+ line-height: var(--pf-v5-c-dropdown__toggle-icon--LineHeight);
3566
+ color: var(--pf-v5-c-dropdown__toggle-icon--Color, inherit);
3510
3567
  }
3511
3568
 
3512
- .pf-v5-c-menu__list-item.pf-m-load {
3513
- --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
3514
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
3515
- --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-load__item--Color);
3569
+ .pf-v5-c-dropdown.pf-m-top.pf-m-expanded .pf-v5-c-dropdown__toggle-icon {
3570
+ transform: rotate(var(--pf-v5-c-dropdown--m-top--m-expanded__toggle-icon--Rotate));
3516
3571
  }
3517
3572
 
3518
- .pf-v5-c-menu__list-item.pf-m-loading {
3519
- --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
3520
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
3521
- justify-content: center;
3522
- padding-block-start: var(--pf-v5-c-menu__list-item--m-loading--PaddingTop);
3523
- overflow: hidden;
3573
+ .pf-v5-c-dropdown__toggle-image {
3574
+ display: inline-flex;
3575
+ flex-shrink: 0;
3576
+ line-height: 1;
3524
3577
  }
3525
3578
 
3526
- .pf-v5-c-menu__list-item.pf-m-danger {
3527
- --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-danger__item--Color, inherit);
3579
+ .pf-v5-c-dropdown__toggle-progress {
3580
+ position: absolute;
3581
+ inset-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
3582
+ visibility: var(--pf-v5-c-dropdown__toggle-progress--Visibility);
3528
3583
  }
3529
3584
 
3530
- .pf-v5-c-menu__item {
3531
- display: flex;
3532
- flex-basis: 100%;
3533
- flex-direction: column;
3534
- min-width: 0;
3535
- padding-block-start: var(--pf-v5-c-menu__item--PaddingTop);
3536
- padding-block-end: var(--pf-v5-c-menu__item--PaddingBottom);
3537
- padding-inline-start: var(--pf-v5-c-menu__item--PaddingLeft);
3538
- padding-inline-end: var(--pf-v5-c-menu__item--PaddingRight);
3539
- font-size: var(--pf-v5-c-menu__item--FontSize);
3540
- font-weight: var(--pf-v5-c-menu__item--FontWeight);
3541
- line-height: var(--pf-v5-c-menu__item--LineHeight);
3542
- color: var(--pf-v5-c-menu__item--Color);
3543
- text-align: start;
3544
- background-color: var(--pf-v5-c-menu__item--BackgroundColor);
3545
- border: none;
3585
+ .pf-v5-c-dropdown__toggle-progress .pf-v5-c-spinner {
3586
+ --pf-v5-c-spinner--diameter: var(--pf-v5-c-dropdown__toggle-progress--c-spinner--diameter);
3546
3587
  }
3547
3588
 
3548
- .pf-v5-c-menu__item:hover {
3549
- text-decoration: none;
3589
+ .pf-v5-c-dropdown__menu {
3590
+ position: absolute;
3591
+ inset-block-start: var(--pf-v5-c-dropdown__menu--Top);
3592
+ z-index: var(--pf-v5-c-dropdown__menu--ZIndex);
3593
+ padding-block-start: var(--pf-v5-c-dropdown__menu--PaddingTop);
3594
+ padding-block-end: var(--pf-v5-c-dropdown__menu--PaddingBottom);
3595
+ background: var(--pf-v5-c-dropdown__menu--BackgroundColor);
3596
+ background-clip: padding-box;
3597
+ box-shadow: var(--pf-v5-c-dropdown__menu--BoxShadow);
3550
3598
  }
3551
3599
 
3552
- .pf-v5-c-menu__item:hover, .pf-v5-c-menu__item:focus {
3553
- --pf-v5-c-menu__item-external-icon--Opacity: 1;
3600
+ .pf-v5-c-dropdown__menu.pf-m-static {
3601
+ --pf-v5-c-dropdown--m-top__menu--TranslateY: 0;
3602
+ position: static;
3603
+ inset-block-start: auto;
3604
+ inset-block-end: auto;
3605
+ inset-inline-start: auto;
3606
+ inset-inline-end: auto;
3607
+ z-index: auto;
3608
+ min-width: min-content;
3554
3609
  }
3555
3610
 
3556
- .pf-v5-c-menu__item.pf-m-selected .pf-v5-c-menu__item-select-icon {
3557
- opacity: 1;
3611
+ .pf-v5-c-dropdown .pf-v5-c-menu,
3612
+ .pf-v5-c-dropdown__menu {
3613
+ min-width: 100%;
3558
3614
  }
3559
3615
 
3560
- label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disabled)) {
3561
- cursor: pointer;
3616
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right,
3617
+ .pf-v5-c-dropdown__menu.pf-m-align-right {
3618
+ inset-inline-end: 0;
3562
3619
  }
3563
3620
 
3564
- .pf-v5-c-menu__item-main {
3565
- display: flex;
3566
- align-items: center;
3567
- width: 100%;
3621
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left,
3622
+ .pf-v5-c-dropdown__menu.pf-m-align-left {
3623
+ inset-inline-end: auto;
3568
3624
  }
3569
3625
 
3570
- .pf-v5-c-menu__item-external-icon {
3571
- margin-inline-start: var(--pf-v5-c-menu__item-external-icon--MarginLeft);
3572
- font-size: var(--pf-v5-c-menu__item-external-icon--FontSize);
3573
- color: var(--pf-v5-c-menu__item-external-icon--Color);
3574
- opacity: var(--pf-v5-c-menu__item-external-icon--Opacity);
3626
+ @media (min-width: 576px) {
3627
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-sm,
3628
+ .pf-v5-c-dropdown__menu.pf-m-align-right-on-sm {
3629
+ inset-inline-end: 0;
3630
+ }
3631
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-sm,
3632
+ .pf-v5-c-dropdown__menu.pf-m-align-left-on-sm {
3633
+ inset-inline-end: auto;
3634
+ }
3635
+ }
3636
+ @media (min-width: 768px) {
3637
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-md,
3638
+ .pf-v5-c-dropdown__menu.pf-m-align-right-on-md {
3639
+ inset-inline-end: 0;
3640
+ }
3641
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-md,
3642
+ .pf-v5-c-dropdown__menu.pf-m-align-left-on-md {
3643
+ inset-inline-end: auto;
3644
+ }
3645
+ }
3646
+ @media (min-width: 992px) {
3647
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-lg,
3648
+ .pf-v5-c-dropdown__menu.pf-m-align-right-on-lg {
3649
+ inset-inline-end: 0;
3650
+ }
3651
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-lg,
3652
+ .pf-v5-c-dropdown__menu.pf-m-align-left-on-lg {
3653
+ inset-inline-end: auto;
3654
+ }
3655
+ }
3656
+ @media (min-width: 1200px) {
3657
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-xl,
3658
+ .pf-v5-c-dropdown__menu.pf-m-align-right-on-xl {
3659
+ inset-inline-end: 0;
3660
+ }
3661
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-xl,
3662
+ .pf-v5-c-dropdown__menu.pf-m-align-left-on-xl {
3663
+ inset-inline-end: auto;
3664
+ }
3665
+ }
3666
+ @media (min-width: 1450px) {
3667
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-2xl,
3668
+ .pf-v5-c-dropdown__menu.pf-m-align-right-on-2xl {
3669
+ inset-inline-end: 0;
3670
+ }
3671
+ .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-2xl,
3672
+ .pf-v5-c-dropdown__menu.pf-m-align-left-on-2xl {
3673
+ inset-inline-end: auto;
3674
+ }
3675
+ }
3676
+ .pf-v5-c-dropdown.pf-m-top .pf-v5-c-dropdown__menu {
3677
+ --pf-v5-c-dropdown__menu--Top: var(--pf-v5-c-dropdown--m-top__menu--Top);
3678
+ transform: translateY(var(--pf-v5-c-dropdown--m-top__menu--TranslateY));
3575
3679
  }
3576
3680
 
3577
- .pf-v5-c-menu__item-text {
3578
- overflow: hidden;
3579
- text-overflow: ellipsis;
3681
+ .pf-v5-c-dropdown.pf-m-top > .pf-v5-c-menu {
3682
+ --pf-v5-c-dropdown--c-menu--Top: var(--pf-v5-c-dropdown--m-top--c-menu--Top);
3683
+ transform: translateY(var(--pf-v5-c-dropdown--m-top--c-menu--TranslateY));
3684
+ }
3685
+
3686
+ .pf-v5-c-dropdown__menu-item {
3687
+ display: block;
3688
+ width: 100%;
3689
+ padding-block-start: var(--pf-v5-c-dropdown__menu-item--PaddingTop);
3690
+ padding-block-end: var(--pf-v5-c-dropdown__menu-item--PaddingBottom);
3691
+ padding-inline-start: var(--pf-v5-c-dropdown__menu-item--PaddingLeft);
3692
+ padding-inline-end: var(--pf-v5-c-dropdown__menu-item--PaddingRight);
3693
+ font-size: var(--pf-v5-c-dropdown__menu-item--FontSize);
3694
+ font-weight: var(--pf-v5-c-dropdown__menu-item--FontWeight);
3695
+ line-height: var(--pf-v5-c-dropdown__menu-item--LineHeight);
3696
+ color: var(--pf-v5-c-dropdown__menu-item--Color);
3697
+ text-align: start;
3580
3698
  white-space: nowrap;
3581
- flex-grow: 1;
3699
+ background-color: var(--pf-v5-c-dropdown__menu-item--BackgroundColor);
3700
+ border: none;
3582
3701
  }
3583
3702
 
3584
- .pf-v5-c-menu__group {
3585
- --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-menu__group--Display);
3703
+ .pf-v5-c-dropdown__menu-item:hover, .pf-v5-c-dropdown__menu-item:focus {
3704
+ --pf-v5-c-dropdown__menu-item--Color: var(--pf-v5-c-dropdown__menu-item--hover--Color);
3705
+ --pf-v5-c-dropdown__menu-item--BackgroundColor: var(--pf-v5-c-dropdown__menu-item--hover--BackgroundColor);
3706
+ text-decoration: none;
3586
3707
  }
3587
3708
 
3588
- .pf-v5-c-menu__group-title {
3589
- padding-block-start: var(--pf-v5-c-menu__group-title--PaddingTop);
3590
- padding-inline-start: var(--pf-v5-c-menu__group-title--PaddingLeft);
3591
- padding-inline-end: var(--pf-v5-c-menu__group-title--PaddingRight);
3592
- font-size: var(--pf-v5-c-menu__group-title--FontSize);
3593
- font-weight: var(--pf-v5-c-menu__group-title--FontWeight);
3594
- color: var(--pf-v5-c-menu__group-title--Color);
3709
+ .pf-v5-c-dropdown__menu-item:disabled, .pf-v5-c-dropdown__menu-item.pf-m-disabled, .pf-v5-c-dropdown__menu-item.pf-m-aria-disabled {
3710
+ --pf-v5-c-dropdown__menu-item--Color: var(--pf-v5-c-dropdown__menu-item--disabled--Color);
3711
+ --pf-v5-c-dropdown__menu-item--BackgroundColor: var(--pf-v5-c-dropdown__menu-item--disabled--BackgroundColor);
3595
3712
  }
3596
3713
 
3597
- .pf-v5-c-menu__item-description {
3598
- font-size: var(--pf-v5-c-menu__item-description--FontSize);
3599
- color: var(--pf-v5-c-menu__item-description--Color);
3600
- word-break: break-word;
3714
+ .pf-v5-c-dropdown__menu-item:disabled, .pf-v5-c-dropdown__menu-item.pf-m-disabled {
3715
+ pointer-events: none;
3601
3716
  }
3602
3717
 
3603
- .pf-v5-c-menu__item-icon {
3604
- margin-inline-end: var(--pf-v5-c-menu__item-icon--MarginRight);
3718
+ .pf-v5-c-dropdown__menu-item.pf-m-aria-disabled {
3719
+ cursor: default;
3605
3720
  }
3606
3721
 
3607
- .pf-v5-c-menu__item-check {
3722
+ .pf-v5-c-dropdown__menu-item.pf-m-icon {
3608
3723
  display: flex;
3609
3724
  align-items: center;
3610
- margin-inline-end: var(--pf-v5-c-menu__item-check--MarginRight);
3611
- }
3612
-
3613
- .pf-v5-c-menu__item-check .pf-v5-c-check {
3614
- --pf-v5-c-check__input--TranslateY: none;
3615
- }
3616
-
3617
- .pf-v5-c-menu__item-toggle-icon {
3618
- padding-inline-start: var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft);
3619
- padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
3620
- color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
3621
- }
3622
-
3623
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
3624
- scale: -1 1;
3625
3725
  }
3626
3726
 
3627
- .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
3628
- margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
3727
+ .pf-v5-c-dropdown__menu-item.pf-m-icon.pf-m-description {
3728
+ flex-direction: column;
3729
+ align-items: flex-start;
3629
3730
  }
3630
3731
 
3631
- .pf-v5-c-menu__item-toggle-icon + .pf-v5-c-menu__item-text {
3632
- margin-inline-start: var(--pf-v5-c-menu__item-toggle-icon--item-text--MarginLeft);
3732
+ .pf-v5-c-dropdown__menu-item.pf-m-icon .pf-v5-c-dropdown__menu-item-main {
3733
+ display: flex;
3734
+ align-items: center;
3633
3735
  }
3634
3736
 
3635
- .pf-v5-c-menu__item-select-icon {
3636
- margin-inline-start: var(--pf-v5-c-menu__item-select-icon--MarginLeft);
3637
- font-size: var(--pf-v5-c-menu__item-select-icon--FontSize);
3638
- color: var(--pf-v5-c-menu__item-select-icon--Color);
3639
- opacity: 0;
3737
+ .pf-v5-c-dropdown__menu-item.pf-m-text {
3738
+ --pf-v5-c-dropdown__menu-item--Color: var(--pf-v5-c-dropdown__menu-item--m-text--Color);
3640
3739
  }
3641
3740
 
3642
- .pf-v5-c-menu__item-action {
3643
- display: flex;
3644
- padding-block-start: var(--pf-v5-c-menu__item-action--PaddingTop);
3645
- padding-block-end: var(--pf-v5-c-menu__item-action--PaddingBottom);
3646
- padding-inline-start: var(--pf-v5-c-menu__item-action--PaddingLeft);
3647
- padding-inline-end: var(--pf-v5-c-menu__item-action--PaddingRight);
3648
- color: var(--pf-v5-c-menu__item-action--Color);
3649
- background-color: var(--pf-v5-c-menu__item-action--BackgroundColor);
3650
- border: none;
3741
+ .pf-v5-c-dropdown__menu-item.pf-m-text:hover, .pf-v5-c-dropdown__menu-item.pf-m-text:focus {
3742
+ --pf-v5-c-dropdown__menu-item--BackgroundColor: transparent;
3651
3743
  }
3652
3744
 
3653
- .pf-v5-c-menu__item-action.pf-m-favorite .pf-v5-c-menu__item-action-icon {
3654
- font-size: var(--pf-v5-c-menu__item-action--m-favorite__icon--FontSize);
3745
+ .pf-v5-c-dropdown__menu-item-icon {
3746
+ display: inline-flex;
3747
+ align-items: center;
3748
+ justify-content: center;
3749
+ width: var(--pf-v5-c-dropdown__menu-item-icon--Width);
3750
+ height: var(--pf-v5-c-dropdown__menu-item-icon--Height);
3751
+ margin-inline-end: var(--pf-v5-c-dropdown__menu-item-icon--MarginRight);
3655
3752
  }
3656
3753
 
3657
- .pf-v5-c-menu__item-action.pf-m-favorited {
3658
- --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--m-favorited--Color);
3659
- --pf-v5-c-menu__item-action--hover--Color: var(--pf-v5-c-menu__item-action--m-favorited--hover--Color);
3754
+ .pf-v5-c-dropdown__menu-item-icon > * {
3755
+ max-width: 100%;
3756
+ max-height: 100%;
3660
3757
  }
3661
3758
 
3662
- .pf-v5-c-menu__item-action:hover, .pf-v5-c-menu__item-action:focus {
3663
- --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--hover--Color);
3759
+ .pf-v5-c-dropdown__menu-item-description {
3760
+ font-size: var(--pf-v5-c-dropdown__menu-item-description--FontSize);
3761
+ color: var(--pf-v5-c-dropdown__menu-item-description--Color);
3664
3762
  }
3665
3763
 
3666
- .pf-v5-c-menu__item-action:disabled, .pf-v5-c-menu__item-action.pf-m-disabled, .pf-v5-c-menu__item-action.pf-m-aria-disabled {
3667
- --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--disabled--Color);
3764
+ .pf-v5-c-dropdown__group + .pf-v5-c-dropdown__group {
3765
+ padding-block-start: var(--pf-v5-c-dropdown__group--group--PaddingTop);
3668
3766
  }
3669
3767
 
3670
- .pf-v5-c-menu__item-action-icon {
3671
- display: flex;
3672
- align-items: center;
3673
- height: var(--pf-v5-c-menu__item-action-icon--Height);
3768
+ .pf-v5-c-dropdown__group-title {
3769
+ padding-block-start: var(--pf-v5-c-dropdown__group-title--PaddingTop);
3770
+ padding-block-end: var(--pf-v5-c-dropdown__group-title--PaddingBottom);
3771
+ padding-inline-start: var(--pf-v5-c-dropdown__group-title--PaddingLeft);
3772
+ padding-inline-end: var(--pf-v5-c-dropdown__group-title--PaddingRight);
3773
+ font-size: var(--pf-v5-c-dropdown__group-title--FontSize);
3774
+ font-weight: var(--pf-v5-c-dropdown__group-title--FontWeight);
3775
+ color: var(--pf-v5-c-dropdown__group-title--Color);
3674
3776
  }
3675
3777
 
3676
- .pf-v5-c-menu__footer {
3677
- position: relative;
3678
- padding-block-start: var(--pf-v5-c-menu__footer--PaddingTop);
3679
- padding-block-end: var(--pf-v5-c-menu__footer--PaddingBottom);
3680
- padding-inline-start: var(--pf-v5-c-menu__footer--PaddingLeft);
3681
- padding-inline-end: var(--pf-v5-c-menu__footer--PaddingRight);
3682
- box-shadow: var(--pf-v5-c-menu__footer--BoxShadow);
3778
+ :where(.pf-v5-theme-dark) .pf-v5-c-dropdown {
3779
+ --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
3780
+ --pf-v5-c-dropdown__toggle--before--BorderTopColor: transparent;
3781
+ --pf-v5-c-dropdown__toggle--before--BorderRightColor: transparent;
3782
+ --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
3783
+ --pf-v5-c-dropdown__toggle--before--BorderLeftColor: transparent;
3784
+ --pf-v5-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-v5-global--palette--black-500);
3785
+ --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-global--primary-color--300);
3786
+ --pf-v5-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
3787
+ --pf-v5-c-dropdown__toggle--m-primary--Color: var(--pf-v5-global--primary-color--400);
3788
+ --pf-v5-c-dropdown__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
3789
+ --pf-v5-c-dropdown__menu--Top: 100%;
3790
+ --pf-v5-c-dropdown--m-top__menu--TranslateY: -100%;
3791
+ --pf-v5-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
3683
3792
  }
3684
3793
 
3685
- .pf-v5-c-menu__footer::after {
3686
- position: absolute;
3687
- inset: 0;
3688
- pointer-events: none;
3689
- content: "";
3690
- border-block-start: var(--pf-v5-c-menu__footer--after--BorderTopWidth) solid var(--pf-v5-c-menu__footer--after--BorderTopColor);
3794
+ :where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
3795
+ color: var(--pf-v5-global--palette--black-100);
3691
3796
  }
3692
3797
 
3693
- :where(.pf-v5-theme-dark) .pf-v5-c-menu {
3694
- --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
3695
- --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
3696
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
3798
+ :where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle.pf-m-plain {
3799
+ background: transparent;
3697
3800
  }
3698
3801
 
3699
3802
  .pf-v5-c-tooltip {
@@ -3825,108 +3928,4 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
3825
3928
  :where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
3826
3929
  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
3827
3930
  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
3828
- }
3829
-
3830
- .pf-v5-c-spinner {
3831
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
3832
- --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
3833
- --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
3834
- --pf-v5-c-spinner--Color: var(--pf-v5-global--primary-color--100);
3835
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
3836
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
3837
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
3838
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
3839
- --pf-v5-c-spinner--m-inline--diameter: 1em;
3840
- width: var(--pf-v5-c-spinner--Width);
3841
- height: var(--pf-v5-c-spinner--Height);
3842
- overflow: hidden;
3843
- }
3844
-
3845
- .pf-v5-c-spinner.pf-m-inline {
3846
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
3847
- }
3848
-
3849
- .pf-v5-c-spinner.pf-m-sm {
3850
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
3851
- }
3852
-
3853
- .pf-v5-c-spinner.pf-m-md {
3854
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
3855
- }
3856
-
3857
- .pf-v5-c-spinner.pf-m-lg {
3858
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
3859
- }
3860
-
3861
- .pf-v5-c-spinner.pf-m-xl {
3862
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
3863
- }
3864
-
3865
- svg.pf-v5-c-spinner {
3866
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
3867
- --pf-v5-c-spinner--AnimationDuration: 1.4s;
3868
- --pf-v5-c-spinner--AnimationTimingFunction: linear;
3869
- --pf-v5-c-spinner--stroke-width: 10;
3870
- --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
3871
- --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
3872
- --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
3873
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
3874
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
3875
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
3876
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
3877
- animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
3878
- }
3879
-
3880
- svg.pf-v5-c-spinner.pf-m-sm {
3881
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
3882
- }
3883
-
3884
- svg.pf-v5-c-spinner.pf-m-md {
3885
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
3886
- }
3887
-
3888
- svg.pf-v5-c-spinner.pf-m-lg {
3889
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
3890
- }
3891
-
3892
- svg.pf-v5-c-spinner.pf-m-xl {
3893
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
3894
- }
3895
-
3896
- .pf-v5-c-spinner__path {
3897
- width: 100%;
3898
- height: 100%;
3899
- stroke: var(--pf-v5-c-spinner--Color);
3900
- stroke-dasharray: 283;
3901
- stroke-dashoffset: 280;
3902
- stroke-linecap: round;
3903
- stroke-width: var(--pf-v5-c-spinner--stroke-width);
3904
- transform-origin: 50% 50%;
3905
- animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
3906
- }
3907
-
3908
- @keyframes pf-v5-c-spinner-animation-rotate {
3909
- 0% {
3910
- transform: rotate(0deg);
3911
- }
3912
- 100% {
3913
- transform: rotate(360deg);
3914
- }
3915
- }
3916
- @keyframes pf-v5-c-spinner-animation-dash {
3917
- 0% {
3918
- stroke-dashoffset: 280;
3919
- transform: rotate(0);
3920
- }
3921
- 15% {
3922
- stroke-width: calc(var(--pf-v5-c-spinner__path--StrokeWidth) - 4);
3923
- }
3924
- 40% {
3925
- stroke-dasharray: 220;
3926
- stroke-dashoffset: 150;
3927
- }
3928
- 100% {
3929
- stroke-dashoffset: 280;
3930
- transform: rotate(720deg);
3931
- }
3932
3931
  }