@patternfly/react-templates 6.2.0-prerelease.21 → 6.2.0-prerelease.22

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.
@@ -671,6 +671,539 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
671
671
  align-items: center;
672
672
  }
673
673
 
674
+ .pf-v6-c-label {
675
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
676
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
677
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
678
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
679
+ --pf-v6-c-label--MaxWidth: 100%;
680
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
681
+ --pf-v6-c-label--BorderWidth: 0;
682
+ --pf-v6-c-label--BorderColor: transparent;
683
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
684
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
685
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
686
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
687
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
688
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
689
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
690
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
691
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
692
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
693
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
694
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
695
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
696
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
697
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
698
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
699
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
700
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
701
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
702
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
703
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
704
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
705
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
706
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
707
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
708
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
709
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
710
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
711
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
712
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
713
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
714
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
715
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
716
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
717
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
718
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
719
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
720
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
721
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
722
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
723
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
724
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
725
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
726
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
727
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
728
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
729
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
730
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
731
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
732
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
733
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
734
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
735
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
736
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
737
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
738
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
739
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
740
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
741
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
742
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
743
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
744
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
745
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
746
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
747
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
748
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
749
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
750
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
751
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
752
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
753
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
754
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
755
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
756
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
757
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
758
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
759
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
760
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
761
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
762
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
763
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
764
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
765
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
766
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
767
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
768
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
769
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
770
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
771
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
772
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
773
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
774
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
775
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
776
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
777
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
778
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
779
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
780
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
781
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
782
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
783
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
784
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
785
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
786
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
787
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
788
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
789
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
790
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
791
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
792
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
793
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
794
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
795
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
796
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
797
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
798
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
799
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
800
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
801
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
802
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
803
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
804
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
805
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
806
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
807
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
808
+ --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
809
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
810
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
811
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
812
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
813
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
814
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
815
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
816
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
817
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
818
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
819
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
820
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
821
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
822
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
823
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
824
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
825
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
826
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
827
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
828
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
829
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
830
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
831
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
832
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
833
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
834
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
835
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
836
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
837
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
838
+ --pf-v6-c-label__content--MaxWidth: 100%;
839
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
840
+ --pf-v6-c-label__content--Cursor: initial;
841
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
842
+ --pf-v6-c-label__text--MaxWidth: 100%;
843
+ --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
844
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
845
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
846
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
847
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
848
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
849
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
850
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
851
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
852
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
853
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
854
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
855
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
856
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
857
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
858
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
859
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
860
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
861
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
862
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
863
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
864
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
865
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
866
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
867
+ }
868
+
869
+ .pf-v6-c-label {
870
+ position: relative;
871
+ min-width: var(--pf-v6-c-label--MinWidth);
872
+ max-width: var(--pf-v6-c-label--MaxWidth);
873
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
874
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
875
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
876
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
877
+ font-size: var(--pf-v6-c-label--FontSize);
878
+ white-space: nowrap;
879
+ background: transparent;
880
+ isolation: isolate;
881
+ border: 0;
882
+ border-radius: var(--pf-v6-c-label--BorderRadius);
883
+ }
884
+
885
+ .pf-v6-c-label.pf-m-blue {
886
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
887
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
888
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
889
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
890
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
891
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
892
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
893
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
894
+ }
895
+
896
+ .pf-v6-c-label.pf-m-red {
897
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
898
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
899
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
900
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
901
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
902
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
903
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
904
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
905
+ }
906
+
907
+ .pf-v6-c-label.pf-m-orange {
908
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
909
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
910
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
911
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
912
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
913
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
914
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
915
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
916
+ }
917
+
918
+ .pf-v6-c-label.pf-m-orangered {
919
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
920
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
921
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
922
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
923
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
924
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
925
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
926
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
927
+ }
928
+
929
+ .pf-v6-c-label.pf-m-yellow {
930
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
931
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
932
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
933
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
934
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
935
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
936
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
937
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
938
+ }
939
+
940
+ .pf-v6-c-label.pf-m-green {
941
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
942
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
943
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
944
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
945
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
946
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
947
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
948
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
949
+ }
950
+
951
+ .pf-v6-c-label.pf-m-teal {
952
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
953
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
954
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
955
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
956
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
957
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
958
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
959
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
960
+ }
961
+
962
+ .pf-v6-c-label.pf-m-purple {
963
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
964
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
965
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
966
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
967
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
968
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
969
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
970
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
971
+ }
972
+
973
+ .pf-v6-c-label.pf-m-success {
974
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
975
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
976
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
977
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
978
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
979
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
980
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
981
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
982
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
983
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
984
+ }
985
+
986
+ .pf-v6-c-label.pf-m-warning {
987
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
988
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
989
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
990
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
991
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
992
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
993
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
994
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
995
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
996
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
997
+ }
998
+
999
+ .pf-v6-c-label.pf-m-danger {
1000
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1001
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1002
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1003
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1004
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1005
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1006
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1007
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1008
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1009
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
1010
+ }
1011
+
1012
+ .pf-v6-c-label.pf-m-info {
1013
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1014
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1015
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1016
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1017
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1018
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1019
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1020
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1021
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1022
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
1023
+ }
1024
+
1025
+ .pf-v6-c-label.pf-m-custom {
1026
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1027
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1028
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1029
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1030
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1031
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1032
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1033
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1034
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1035
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1036
+ }
1037
+
1038
+ .pf-v6-c-label.pf-m-compact {
1039
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1040
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1041
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1042
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1043
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1044
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1045
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1046
+ }
1047
+
1048
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1049
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1050
+ }
1051
+
1052
+ .pf-v6-c-label.pf-m-outline {
1053
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1054
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1055
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1056
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1057
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1058
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1059
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1060
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1061
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1062
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1063
+ }
1064
+
1065
+ .pf-v6-c-label.pf-m-editable {
1066
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1067
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1068
+ }
1069
+
1070
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1071
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1072
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1073
+ }
1074
+
1075
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1076
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1077
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1078
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1079
+ }
1080
+
1081
+ .pf-v6-c-label.pf-m-editable-active {
1082
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1083
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1084
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1085
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1086
+ }
1087
+
1088
+ .pf-v6-c-label.pf-m-overflow {
1089
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1090
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1091
+ }
1092
+
1093
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1094
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1095
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1096
+ }
1097
+
1098
+ .pf-v6-c-label.pf-m-add {
1099
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1100
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1101
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1102
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1103
+ }
1104
+
1105
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1106
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1107
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1108
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1109
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1110
+ }
1111
+
1112
+ .pf-v6-c-label.pf-m-clickable {
1113
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1114
+ }
1115
+
1116
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1117
+ text-decoration-line: none;
1118
+ }
1119
+
1120
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1121
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1122
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1123
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1124
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1125
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1126
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1127
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1128
+ }
1129
+
1130
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1131
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1132
+ }
1133
+
1134
+ .pf-v6-c-label.pf-m-disabled {
1135
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1136
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1137
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1138
+ --pf-v6-c-label--BorderWidth: 0;
1139
+ pointer-events: none;
1140
+ }
1141
+
1142
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1143
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1144
+ }
1145
+
1146
+ .pf-v6-c-label,
1147
+ .pf-v6-c-label__content {
1148
+ display: inline-flex;
1149
+ align-items: center;
1150
+ justify-content: center;
1151
+ }
1152
+
1153
+ .pf-v6-c-label__text {
1154
+ overflow: hidden;
1155
+ text-overflow: ellipsis;
1156
+ white-space: nowrap;
1157
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1158
+ }
1159
+
1160
+ .pf-v6-c-label__content {
1161
+ gap: var(--pf-v6-c-label__content--Gap);
1162
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1163
+ padding: 0;
1164
+ overflow: hidden;
1165
+ color: var(--pf-v6-c-label--Color);
1166
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1167
+ background: transparent;
1168
+ border-width: 0;
1169
+ }
1170
+
1171
+ .pf-v6-c-label__content::before {
1172
+ position: absolute;
1173
+ inset: 0;
1174
+ z-index: -1;
1175
+ pointer-events: none;
1176
+ content: "";
1177
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1178
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1179
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1180
+ }
1181
+
1182
+ input.pf-v6-c-label__content {
1183
+ overflow: hidden;
1184
+ text-overflow: ellipsis;
1185
+ white-space: nowrap;
1186
+ }
1187
+
1188
+ .pf-v6-c-label__icon {
1189
+ color: var(--pf-v6-c-label__icon--Color);
1190
+ }
1191
+
1192
+ .pf-v6-c-label__actions {
1193
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1194
+ }
1195
+
1196
+ .pf-v6-c-label__actions .pf-v6-c-button {
1197
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1198
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1199
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1200
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1201
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1202
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1203
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1204
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1205
+ }
1206
+
674
1207
  .pf-v6-c-menu-toggle {
675
1208
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
676
1209
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -1129,858 +1662,554 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1129
1662
  .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1130
1663
  .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
1131
1664
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1132
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1133
- }
1134
-
1135
- .pf-v6-c-menu-toggle__controls {
1136
- display: flex;
1137
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1138
- align-items: center;
1139
- justify-content: center;
1140
- margin-inline-start: auto;
1141
- }
1142
-
1143
- .pf-v6-c-menu-toggle__toggle-icon {
1144
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1145
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1146
- }
1147
-
1148
- .pf-v6-c-menu-toggle__status-icon {
1149
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1150
- }
1151
-
1152
- .pf-v6-c-text-input-group {
1153
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1154
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1155
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1156
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1157
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1158
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1159
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1160
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1161
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1162
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1163
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1164
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1165
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1166
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1167
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1168
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1169
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1170
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1171
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1172
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1173
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1174
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1175
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1176
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1177
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1178
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1179
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1180
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1181
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1182
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1183
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1184
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1185
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1186
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1187
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1188
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1189
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1190
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1191
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1192
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1193
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1194
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1195
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1196
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1197
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1198
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1199
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1200
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1201
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1202
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1203
- }
1204
-
1205
- .pf-v6-c-text-input-group {
1206
- position: relative;
1207
- display: flex;
1208
- width: 100%;
1209
- font-size: var(--pf-v6-c-text-input-group__FontSize);
1210
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
1211
- color: var(--pf-v6-c-text-input-group--Color, inherit);
1212
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1213
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1214
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1215
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1216
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1217
- }
1218
-
1219
- .pf-v6-c-text-input-group::before {
1220
- position: absolute;
1221
- inset: 0;
1222
- pointer-events: none;
1223
- content: "";
1224
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1225
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1226
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1227
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1228
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1229
- }
1230
-
1231
- .pf-v6-c-text-input-group.pf-m-disabled {
1232
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1233
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1234
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1235
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1236
- pointer-events: none;
1237
- }
1238
-
1239
- .pf-v6-c-text-input-group.pf-m-plain {
1240
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1241
- }
1242
-
1243
- .pf-v6-c-text-input-group.pf-m-plain::before {
1244
- border: 0;
1245
- }
1246
-
1247
- .pf-v6-c-text-input-group.pf-m-success {
1248
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1249
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1250
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1251
- }
1252
-
1253
- .pf-v6-c-text-input-group.pf-m-warning {
1254
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1255
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1256
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1257
- }
1258
-
1259
- .pf-v6-c-text-input-group.pf-m-error {
1260
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1261
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1262
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1263
- }
1264
-
1265
- .pf-v6-c-text-input-group:hover {
1266
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1267
- }
1268
-
1269
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1270
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1271
- }
1272
-
1273
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1274
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1275
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1276
- }
1277
-
1278
- .pf-v6-c-text-input-group__main {
1279
- display: flex;
1280
- flex: 1;
1281
- flex-wrap: wrap;
1282
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1283
- min-width: 0;
1284
- }
1285
-
1286
- .pf-v6-c-text-input-group__main.pf-m-icon {
1287
- --pf-v6-c-text-input-group__text--Position: relative;
1288
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1289
- display: inline-flex;
1290
- align-items: center;
1291
- justify-content: center;
1292
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1293
- }
1294
-
1295
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1296
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1297
- }
1298
-
1299
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1300
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1301
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1302
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1303
- }
1304
-
1305
- .pf-v6-c-text-input-group__text {
1306
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
1307
- display: inline-grid;
1308
- flex: 1;
1309
- grid-template-areas: "text-input";
1310
- grid-template-columns: 1fr;
1311
- }
1312
-
1313
- .pf-v6-c-text-input-group__icon {
1314
- position: absolute;
1315
- inset-block-start: 50%;
1316
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1317
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1318
- color: var(--pf-v6-c-text-input-group__icon--Color);
1319
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1320
- }
1321
-
1322
- .pf-v6-c-text-input-group__icon.pf-m-status {
1323
- inset-inline-start: auto;
1324
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1325
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1326
- }
1327
-
1328
- .pf-v6-c-text-input-group__text-input {
1329
- overflow: hidden;
1330
- text-overflow: ellipsis;
1331
- white-space: nowrap;
1332
- position: relative;
1333
- width: 100%;
1334
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1335
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1336
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1337
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1338
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1339
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1340
- border: 0;
1341
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1342
- }
1343
-
1344
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1345
- grid-area: text-input;
1346
- }
1347
-
1348
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1349
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1350
- }
1351
-
1352
- .pf-v6-c-text-input-group__text-input::placeholder {
1353
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1665
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1354
1666
  }
1355
1667
 
1356
- .pf-v6-c-text-input-group__utilities {
1668
+ .pf-v6-c-menu-toggle__controls {
1357
1669
  display: flex;
1670
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1358
1671
  align-items: center;
1359
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1360
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1672
+ justify-content: center;
1673
+ margin-inline-start: auto;
1361
1674
  }
1362
1675
 
1363
- .pf-v6-c-text-input-group__utilities > * + * {
1364
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1676
+ .pf-v6-c-menu-toggle__toggle-icon {
1677
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1678
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1365
1679
  }
1366
1680
 
1367
- .pf-v6-c-text-input-group__group {
1368
- display: flex;
1681
+ .pf-v6-c-menu-toggle__status-icon {
1682
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1369
1683
  }
1370
1684
 
1371
- .pf-v6-c-label {
1372
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1373
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1374
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1375
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1376
- --pf-v6-c-label--MaxWidth: 100%;
1377
- --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
1378
- --pf-v6-c-label--BorderWidth: 0;
1379
- --pf-v6-c-label--BorderColor: transparent;
1380
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1381
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1382
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1383
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1384
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1385
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1386
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1387
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1388
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1389
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1390
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1391
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1392
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1393
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1394
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1395
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1396
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1397
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1398
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1399
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1400
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1401
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1402
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1403
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1404
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1405
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1406
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1407
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1408
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1409
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1410
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1411
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1412
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1413
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1414
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1415
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1416
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1417
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1418
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1419
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1420
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1421
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1422
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1423
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1424
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1425
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1426
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1427
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1428
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1429
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1430
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1431
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1432
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1433
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1434
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1435
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1436
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1437
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1438
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1439
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1440
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1441
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1442
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1443
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1444
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1445
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1446
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1447
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1448
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1449
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1450
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1451
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1452
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1453
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1454
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1455
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1456
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1457
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1458
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1459
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1460
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1461
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1462
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1463
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1464
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1465
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1466
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1467
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1468
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1469
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1470
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1471
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1472
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1473
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1474
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1475
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1476
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1477
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1478
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1479
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1480
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1481
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1482
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1483
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1484
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1485
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1486
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1487
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1488
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1489
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1490
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1491
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1492
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1493
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1494
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1495
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1496
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1497
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1498
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1499
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1500
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1501
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1502
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1503
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1504
- --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
1505
- --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
1506
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1507
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1508
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1509
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1510
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1511
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1512
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1513
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1514
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1515
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1516
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1517
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1518
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1519
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1520
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1521
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
1522
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1523
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1524
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1525
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1526
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1527
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1528
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1529
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1530
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1531
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1532
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1533
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1534
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
1535
- --pf-v6-c-label__content--MaxWidth: 100%;
1536
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1537
- --pf-v6-c-label__content--Cursor: initial;
1538
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1539
- --pf-v6-c-label__text--MaxWidth: 100%;
1540
- --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
1541
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1542
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1543
- --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
1544
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
1545
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1546
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1547
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1548
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1549
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1550
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1551
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1552
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1553
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1554
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1555
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
1556
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1557
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1558
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1559
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1560
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1561
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1562
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1563
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1685
+ .pf-v6-c-text-input-group {
1686
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1687
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1688
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1689
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1690
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1691
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1692
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1693
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1694
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1695
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1696
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1697
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1698
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1699
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1700
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1701
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1702
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1703
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1704
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1705
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1706
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1707
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1708
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1709
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1710
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1711
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1712
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1713
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1714
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1715
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1716
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1717
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1718
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1719
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1720
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1721
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1722
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1723
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1724
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1725
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1726
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1727
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1728
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1729
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1730
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1731
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1732
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1733
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1734
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1735
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1564
1736
  }
1565
1737
 
1566
- .pf-v6-c-label {
1738
+ .pf-v6-c-text-input-group {
1567
1739
  position: relative;
1568
- min-width: var(--pf-v6-c-label--MinWidth);
1569
- max-width: var(--pf-v6-c-label--MaxWidth);
1570
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1571
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1572
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1573
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1574
- font-size: var(--pf-v6-c-label--FontSize);
1575
- white-space: nowrap;
1576
- background: transparent;
1577
- isolation: isolate;
1740
+ display: flex;
1741
+ width: 100%;
1742
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
1743
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
1744
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
1745
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1746
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1747
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1748
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1749
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1750
+ }
1751
+
1752
+ .pf-v6-c-text-input-group::before {
1753
+ position: absolute;
1754
+ inset: 0;
1755
+ pointer-events: none;
1756
+ content: "";
1757
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1758
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1759
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1760
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1761
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1762
+ }
1763
+
1764
+ .pf-v6-c-text-input-group.pf-m-disabled {
1765
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1766
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1767
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1768
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1769
+ pointer-events: none;
1770
+ }
1771
+
1772
+ .pf-v6-c-text-input-group.pf-m-plain {
1773
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1774
+ }
1775
+
1776
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1578
1777
  border: 0;
1579
- border-radius: var(--pf-v6-c-label--BorderRadius);
1580
1778
  }
1581
1779
 
1582
- .pf-v6-c-label.pf-m-blue {
1583
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1584
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1585
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1586
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1587
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1588
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1589
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1590
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1780
+ .pf-v6-c-text-input-group.pf-m-success {
1781
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1782
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1783
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1591
1784
  }
1592
1785
 
1593
- .pf-v6-c-label.pf-m-red {
1594
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1595
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1596
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1597
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1598
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1599
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1600
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1601
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1786
+ .pf-v6-c-text-input-group.pf-m-warning {
1787
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1788
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1789
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1602
1790
  }
1603
1791
 
1604
- .pf-v6-c-label.pf-m-orange {
1605
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1606
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1607
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1608
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1609
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1610
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1611
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1612
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1792
+ .pf-v6-c-text-input-group.pf-m-error {
1793
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1794
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1795
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1613
1796
  }
1614
1797
 
1615
- .pf-v6-c-label.pf-m-orangered {
1616
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1617
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1618
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1619
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1620
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1621
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1622
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1623
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1798
+ .pf-v6-c-text-input-group:hover {
1799
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1624
1800
  }
1625
1801
 
1626
- .pf-v6-c-label.pf-m-yellow {
1627
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1628
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1629
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1630
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1631
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1632
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1633
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1634
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1802
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1803
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1635
1804
  }
1636
1805
 
1637
- .pf-v6-c-label.pf-m-green {
1638
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1639
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1640
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1641
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1642
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1643
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1644
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1645
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1806
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1807
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1808
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1646
1809
  }
1647
1810
 
1648
- .pf-v6-c-label.pf-m-teal {
1649
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1650
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1651
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1652
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1653
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1654
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1655
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1656
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1811
+ .pf-v6-c-text-input-group__main {
1812
+ display: flex;
1813
+ flex: 1;
1814
+ flex-wrap: wrap;
1815
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1816
+ min-width: 0;
1657
1817
  }
1658
1818
 
1659
- .pf-v6-c-label.pf-m-purple {
1660
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1661
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1662
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1663
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1664
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1665
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1666
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1667
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1819
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1820
+ --pf-v6-c-text-input-group__text--Position: relative;
1821
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1822
+ display: inline-flex;
1823
+ align-items: center;
1824
+ justify-content: center;
1825
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1668
1826
  }
1669
1827
 
1670
- .pf-v6-c-label.pf-m-success {
1671
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1672
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1673
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1674
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1675
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1676
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1677
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1678
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1679
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1680
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1828
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1829
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1681
1830
  }
1682
1831
 
1683
- .pf-v6-c-label.pf-m-warning {
1684
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1685
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1686
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1687
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1688
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1689
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1690
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1691
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1692
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1693
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
1832
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1833
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1834
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1835
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1694
1836
  }
1695
1837
 
1696
- .pf-v6-c-label.pf-m-danger {
1697
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1698
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1699
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1700
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1701
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1702
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1703
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1704
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1705
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1706
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
1838
+ .pf-v6-c-text-input-group__text {
1839
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1840
+ display: inline-grid;
1841
+ flex: 1;
1842
+ grid-template-areas: "text-input";
1843
+ grid-template-columns: 1fr;
1707
1844
  }
1708
1845
 
1709
- .pf-v6-c-label.pf-m-info {
1710
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1711
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1712
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1713
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1714
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1715
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1716
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1717
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1718
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1719
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
1846
+ .pf-v6-c-text-input-group__icon {
1847
+ position: absolute;
1848
+ inset-block-start: 50%;
1849
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1850
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1851
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1852
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1720
1853
  }
1721
1854
 
1722
- .pf-v6-c-label.pf-m-custom {
1723
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1724
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1725
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1726
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1727
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1728
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1729
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1730
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1731
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1732
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1855
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1856
+ inset-inline-start: auto;
1857
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1858
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1859
+ }
1860
+
1861
+ .pf-v6-c-text-input-group__text-input {
1862
+ overflow: hidden;
1863
+ text-overflow: ellipsis;
1864
+ white-space: nowrap;
1865
+ position: relative;
1866
+ width: 100%;
1867
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1868
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1869
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1870
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1871
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1872
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1873
+ border: 0;
1874
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1875
+ }
1876
+
1877
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1878
+ grid-area: text-input;
1733
1879
  }
1734
1880
 
1735
- .pf-v6-c-label.pf-m-compact {
1736
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1737
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1738
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1739
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1740
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1741
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1742
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1881
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1882
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1743
1883
  }
1744
1884
 
1745
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1746
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1885
+ .pf-v6-c-text-input-group__text-input::placeholder {
1886
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1747
1887
  }
1748
1888
 
1749
- .pf-v6-c-label.pf-m-outline {
1750
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1751
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1752
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1753
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1754
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1755
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1756
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1757
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1758
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1759
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1889
+ .pf-v6-c-text-input-group__utilities {
1890
+ display: flex;
1891
+ align-items: center;
1892
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1893
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1760
1894
  }
1761
1895
 
1762
- .pf-v6-c-label.pf-m-editable {
1763
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1764
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1896
+ .pf-v6-c-text-input-group__utilities > * + * {
1897
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1765
1898
  }
1766
1899
 
1767
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1768
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1769
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1900
+ .pf-v6-c-text-input-group__group {
1901
+ display: flex;
1770
1902
  }
1771
1903
 
1772
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1773
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1774
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1775
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1904
+ .pf-v6-c-check {
1905
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1906
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1907
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1908
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1909
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1910
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1911
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1912
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1913
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1914
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1915
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1916
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1917
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1918
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1776
1919
  }
1777
1920
 
1778
- .pf-v6-c-label.pf-m-editable-active {
1779
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1780
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1781
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1782
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1921
+ .pf-v6-c-check {
1922
+ display: grid;
1923
+ grid-template-columns: auto 1fr;
1924
+ grid-gap: var(--pf-v6-c-check--GridGap);
1925
+ accent-color: var(--pf-v6-c-check--AccentColor);
1783
1926
  }
1784
1927
 
1785
- .pf-v6-c-label.pf-m-overflow {
1786
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1787
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1928
+ .pf-v6-c-check.pf-m-standalone {
1929
+ display: inline-grid;
1930
+ grid-template-columns: auto;
1931
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1788
1932
  }
1789
1933
 
1790
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1791
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1792
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1934
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1935
+ align-self: center;
1936
+ transform: none;
1793
1937
  }
1794
1938
 
1795
- .pf-v6-c-label.pf-m-add {
1796
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1797
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1798
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1799
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1939
+ .pf-v6-c-check__input {
1940
+ align-self: start;
1941
+ font-size: var(--pf-v6-c-check__label--FontSize);
1942
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1943
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1800
1944
  }
1801
1945
 
1802
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1803
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1804
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1805
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1806
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1946
+ .pf-v6-c-check__label {
1947
+ font-size: var(--pf-v6-c-check__label--FontSize);
1948
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
1949
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1950
+ color: var(--pf-v6-c-check__label--Color);
1807
1951
  }
1808
1952
 
1809
- .pf-v6-c-label.pf-m-clickable {
1810
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1953
+ .pf-v6-c-check__description {
1954
+ grid-column: 2;
1955
+ font-size: var(--pf-v6-c-check__description--FontSize);
1956
+ color: var(--pf-v6-c-check__description--Color);
1811
1957
  }
1812
1958
 
1813
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1814
- text-decoration-line: none;
1959
+ .pf-v6-c-check__body {
1960
+ grid-column: 2;
1815
1961
  }
1816
1962
 
1817
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1818
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1819
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1820
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1821
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1822
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1823
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1824
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1963
+ .pf-v6-c-check__label,
1964
+ .pf-v6-c-check__input {
1965
+ justify-self: start;
1825
1966
  }
1826
1967
 
1827
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1828
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1968
+ label.pf-v6-c-check, .pf-v6-c-check__label,
1969
+ .pf-v6-c-check__input {
1970
+ cursor: pointer;
1829
1971
  }
1830
1972
 
1831
- .pf-v6-c-label.pf-m-disabled {
1832
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1833
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1834
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1835
- --pf-v6-c-label--BorderWidth: 0;
1836
- pointer-events: none;
1973
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1974
+ .pf-v6-c-check__input:disabled,
1975
+ .pf-v6-c-check__input.pf-m-disabled {
1976
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1977
+ cursor: not-allowed;
1837
1978
  }
1838
1979
 
1839
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1840
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1980
+ .pf-v6-c-check__label-required {
1981
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1982
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1983
+ color: var(--pf-v6-c-check__label-required--Color);
1841
1984
  }
1842
1985
 
1843
- .pf-v6-c-label,
1844
- .pf-v6-c-label__content {
1845
- display: inline-flex;
1846
- align-items: center;
1847
- justify-content: center;
1986
+ .pf-v6-c-badge {
1987
+ --pf-v6-c-badge--BorderColor: transparent;
1988
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1989
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1990
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1991
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1992
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1993
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1994
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1995
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1996
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1997
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1998
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1999
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2000
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2001
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2002
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2003
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2004
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2005
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2006
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1848
2007
  }
1849
2008
 
1850
- .pf-v6-c-label__text {
1851
- overflow: hidden;
1852
- text-overflow: ellipsis;
2009
+ .pf-v6-c-badge {
2010
+ position: relative;
2011
+ display: inline-block;
2012
+ min-width: var(--pf-v6-c-badge--MinWidth);
2013
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2014
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2015
+ font-size: var(--pf-v6-c-badge--FontSize);
2016
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2017
+ color: var(--pf-v6-c-badge--Color);
2018
+ text-align: center;
1853
2019
  white-space: nowrap;
1854
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1855
- }
1856
-
1857
- .pf-v6-c-label__content {
1858
- gap: var(--pf-v6-c-label__content--Gap);
1859
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1860
- padding: 0;
1861
- overflow: hidden;
1862
- color: var(--pf-v6-c-label--Color);
1863
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1864
- background: transparent;
1865
- border-width: 0;
2020
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2021
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1866
2022
  }
1867
2023
 
1868
- .pf-v6-c-label__content::before {
2024
+ .pf-v6-c-badge::after {
1869
2025
  position: absolute;
1870
2026
  inset: 0;
1871
- z-index: -1;
1872
2027
  pointer-events: none;
1873
2028
  content: "";
1874
- background-color: var(--pf-v6-c-label--BackgroundColor);
1875
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1876
- border-radius: var(--pf-v6-c-label--BorderRadius);
2029
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2030
+ border-radius: inherit;
2031
+ }
2032
+
2033
+ .pf-v6-c-badge.pf-m-read {
2034
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2035
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2036
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2037
+ }
2038
+
2039
+ .pf-v6-c-badge.pf-m-unread {
2040
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2041
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2042
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2043
+ }
2044
+
2045
+ .pf-v6-c-badge.pf-m-disabled {
2046
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2047
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2048
+ }
2049
+
2050
+ .pf-v6-c-badge.pf-m-disabled::after {
2051
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2052
+ }
2053
+
2054
+ .pf-v6-c-badge__toggle-icon {
2055
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2056
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2057
+ }
2058
+
2059
+ .pf-v6-c-label-group {
2060
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2061
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2062
+ --pf-v6-c-label-group--MaxWidth: 100%;
2063
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2064
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2065
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2066
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2067
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2068
+ --pf-v6-c-label-group__main--MinWidth: 0;
2069
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2070
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2071
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2072
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2073
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2074
+ --pf-v6-c-label-group__list--MinWidth: 0;
2075
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2076
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2077
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2078
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2079
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2080
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2081
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2082
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2083
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2084
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2085
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2086
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2087
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2088
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2089
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2090
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2091
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2092
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2093
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2094
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2095
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2096
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1877
2097
  }
1878
2098
 
1879
- input.pf-v6-c-label__content {
1880
- overflow: hidden;
1881
- text-overflow: ellipsis;
1882
- white-space: nowrap;
2099
+ .pf-v6-c-label-group {
2100
+ display: inline-flex;
2101
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2102
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2103
+ align-items: center;
2104
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1883
2105
  }
1884
2106
 
1885
- .pf-v6-c-label__icon {
1886
- color: var(--pf-v6-c-label__icon--Color);
2107
+ .pf-v6-c-label-group.pf-m-category {
2108
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2109
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2110
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2111
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2112
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2113
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2114
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1887
2115
  }
1888
2116
 
1889
- .pf-v6-c-label__actions {
1890
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2117
+ .pf-v6-c-label-group.pf-m-vertical {
2118
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2119
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2120
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2121
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2122
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2123
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2124
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1891
2125
  }
1892
2126
 
1893
- .pf-v6-c-label__actions .pf-v6-c-button {
1894
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1895
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1896
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1897
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1898
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1899
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1900
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1901
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2127
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2128
+ align-items: flex-start;
1902
2129
  }
1903
2130
 
1904
- .pf-v6-c-check {
1905
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1906
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1907
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1908
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1909
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1910
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1911
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1912
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1913
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1914
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1915
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1916
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1917
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1918
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2131
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2132
+ flex-direction: column;
2133
+ align-items: flex-start;
2134
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1919
2135
  }
1920
2136
 
1921
- .pf-v6-c-check {
1922
- display: grid;
1923
- grid-template-columns: auto 1fr;
1924
- grid-gap: var(--pf-v6-c-check--GridGap);
1925
- accent-color: var(--pf-v6-c-check--AccentColor);
2137
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2138
+ flex-direction: column;
2139
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1926
2140
  }
1927
2141
 
1928
- .pf-v6-c-check.pf-m-standalone {
1929
- display: inline-grid;
1930
- grid-template-columns: auto;
1931
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2142
+ .pf-v6-c-label-group.pf-m-editable,
2143
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2144
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2145
+ display: flex;
1932
2146
  }
1933
2147
 
1934
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1935
- align-self: center;
1936
- transform: none;
2148
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2149
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2150
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2151
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2152
+ flex: 1;
1937
2153
  }
1938
2154
 
1939
- .pf-v6-c-check__input {
1940
- align-self: start;
1941
- font-size: var(--pf-v6-c-check__label--FontSize);
1942
- line-height: var(--pf-v6-c-check__label--LineHeight);
1943
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2155
+ .pf-v6-c-label-group__main {
2156
+ display: flex;
2157
+ flex: 1;
2158
+ flex-wrap: wrap;
2159
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2160
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2161
+ align-items: baseline;
2162
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1944
2163
  }
1945
2164
 
1946
- .pf-v6-c-check__label {
1947
- font-size: var(--pf-v6-c-check__label--FontSize);
1948
- font-weight: var(--pf-v6-c-check__label--FontWeight);
1949
- line-height: var(--pf-v6-c-check__label--LineHeight);
1950
- color: var(--pf-v6-c-check__label--Color);
2165
+ .pf-v6-c-label-group__list {
2166
+ display: inline-flex;
2167
+ flex-wrap: wrap;
2168
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2169
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2170
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1951
2171
  }
1952
2172
 
1953
- .pf-v6-c-check__description {
1954
- grid-column: 2;
1955
- font-size: var(--pf-v6-c-check__description--FontSize);
1956
- color: var(--pf-v6-c-check__description--Color);
2173
+ .pf-v6-c-label-group__list-item {
2174
+ display: inline-flex;
2175
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1957
2176
  }
1958
2177
 
1959
- .pf-v6-c-check__body {
1960
- grid-column: 2;
2178
+ .pf-v6-c-label-group__label {
2179
+ overflow: hidden;
2180
+ text-overflow: ellipsis;
2181
+ white-space: nowrap;
2182
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1961
2183
  }
1962
2184
 
1963
- .pf-v6-c-check__label,
1964
- .pf-v6-c-check__input {
1965
- justify-self: start;
2185
+ .pf-v6-c-label-group__close {
2186
+ display: flex;
2187
+ align-self: flex-start;
1966
2188
  }
1967
2189
 
1968
- label.pf-v6-c-check, .pf-v6-c-check__label,
1969
- .pf-v6-c-check__input {
1970
- cursor: pointer;
2190
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2191
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2192
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2193
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2194
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2195
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1971
2196
  }
1972
2197
 
1973
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1974
- .pf-v6-c-check__input:disabled,
1975
- .pf-v6-c-check__input.pf-m-disabled {
1976
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1977
- cursor: not-allowed;
2198
+ .pf-v6-c-label-group__textarea {
2199
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2200
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2201
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2202
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2203
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2204
+ white-space: nowrap;
2205
+ resize: none;
2206
+ border: 0;
2207
+ -ms-overflow-style: none;
2208
+ scrollbar-width: none;
1978
2209
  }
1979
2210
 
1980
- .pf-v6-c-check__label-required {
1981
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1982
- font-size: var(--pf-v6-c-check__label-required--FontSize);
1983
- color: var(--pf-v6-c-check__label-required--Color);
2211
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2212
+ display: none;
1984
2213
  }
1985
2214
 
1986
2215
  .pf-v6-c-divider {
@@ -2139,395 +2368,166 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2139
2368
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2140
2369
  }
2141
2370
  }
2142
- @media (min-width: 48rem) {
2143
- .pf-v6-c-divider.pf-m-horizontal-on-md {
2144
- flex-direction: row;
2145
- width: 100%;
2146
- height: var(--pf-v6-c-divider--Size);
2147
- }
2148
- }
2149
- @media (min-width: 48rem) {
2150
- .pf-v6-c-divider.pf-m-vertical-on-md {
2151
- flex-direction: column;
2152
- width: var(--pf-v6-c-divider--Size);
2153
- height: inherit;
2154
- }
2155
- }
2156
- @media (min-width: 48rem) {
2157
- .pf-v6-c-divider.pf-m-inset-none-on-md {
2158
- --pf-v6-c-divider--before--FlexBasis: 100%;
2159
- }
2160
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
2161
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2162
- }
2163
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
2164
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2165
- }
2166
- .pf-v6-c-divider.pf-m-inset-md-on-md {
2167
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2168
- }
2169
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
2170
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2171
- }
2172
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
2173
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2174
- }
2175
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2176
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2177
- }
2178
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2179
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2180
- }
2181
- }
2182
- @media (min-width: 62rem) {
2183
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
2184
- flex-direction: row;
2185
- width: 100%;
2186
- height: var(--pf-v6-c-divider--Size);
2187
- }
2188
- }
2189
- @media (min-width: 62rem) {
2190
- .pf-v6-c-divider.pf-m-vertical-on-lg {
2191
- flex-direction: column;
2192
- width: var(--pf-v6-c-divider--Size);
2193
- height: inherit;
2194
- }
2195
- }
2196
- @media (min-width: 62rem) {
2197
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
2198
- --pf-v6-c-divider--before--FlexBasis: 100%;
2199
- }
2200
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2201
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2202
- }
2203
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2204
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2205
- }
2206
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
2207
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2208
- }
2209
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2210
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2211
- }
2212
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2213
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2214
- }
2215
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2216
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2217
- }
2218
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2219
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2220
- }
2221
- }
2222
- @media (min-width: 75rem) {
2223
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
2371
+ @media (min-width: 48rem) {
2372
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2224
2373
  flex-direction: row;
2225
2374
  width: 100%;
2226
2375
  height: var(--pf-v6-c-divider--Size);
2227
2376
  }
2228
2377
  }
2229
- @media (min-width: 75rem) {
2230
- .pf-v6-c-divider.pf-m-vertical-on-xl {
2378
+ @media (min-width: 48rem) {
2379
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2231
2380
  flex-direction: column;
2232
2381
  width: var(--pf-v6-c-divider--Size);
2233
2382
  height: inherit;
2234
2383
  }
2235
2384
  }
2236
- @media (min-width: 75rem) {
2237
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
2385
+ @media (min-width: 48rem) {
2386
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2238
2387
  --pf-v6-c-divider--before--FlexBasis: 100%;
2239
2388
  }
2240
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2389
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2241
2390
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2242
2391
  }
2243
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2392
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2244
2393
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2245
2394
  }
2246
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
2395
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2247
2396
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2248
2397
  }
2249
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2398
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2250
2399
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2251
2400
  }
2252
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2401
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2253
2402
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2254
2403
  }
2255
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2404
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2256
2405
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2257
2406
  }
2258
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2407
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2259
2408
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2260
2409
  }
2261
2410
  }
2262
- @media (min-width: 90.625rem) {
2263
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2411
+ @media (min-width: 62rem) {
2412
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2264
2413
  flex-direction: row;
2265
2414
  width: 100%;
2266
2415
  height: var(--pf-v6-c-divider--Size);
2267
2416
  }
2268
2417
  }
2269
- @media (min-width: 90.625rem) {
2270
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
2418
+ @media (min-width: 62rem) {
2419
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2271
2420
  flex-direction: column;
2272
2421
  width: var(--pf-v6-c-divider--Size);
2273
2422
  height: inherit;
2274
2423
  }
2275
2424
  }
2276
- @media (min-width: 90.625rem) {
2277
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2425
+ @media (min-width: 62rem) {
2426
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2278
2427
  --pf-v6-c-divider--before--FlexBasis: 100%;
2279
2428
  }
2280
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2429
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2281
2430
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2282
2431
  }
2283
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2432
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2284
2433
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2285
2434
  }
2286
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2435
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2287
2436
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2288
2437
  }
2289
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2438
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2290
2439
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2291
2440
  }
2292
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2441
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2293
2442
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2294
2443
  }
2295
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2444
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2296
2445
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2297
2446
  }
2298
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2447
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2299
2448
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2300
2449
  }
2301
2450
  }
2302
- .pf-v6-c-badge {
2303
- --pf-v6-c-badge--BorderColor: transparent;
2304
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2305
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2306
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2307
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2308
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2309
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2310
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2311
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2312
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2313
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2314
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2315
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2316
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2317
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2318
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2319
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2320
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2321
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2322
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2323
- }
2324
-
2325
- .pf-v6-c-badge {
2326
- position: relative;
2327
- display: inline-block;
2328
- min-width: var(--pf-v6-c-badge--MinWidth);
2329
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2330
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2331
- font-size: var(--pf-v6-c-badge--FontSize);
2332
- font-weight: var(--pf-v6-c-badge--FontWeight);
2333
- color: var(--pf-v6-c-badge--Color);
2334
- text-align: center;
2335
- white-space: nowrap;
2336
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2337
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2338
- }
2339
-
2340
- .pf-v6-c-badge::after {
2341
- position: absolute;
2342
- inset: 0;
2343
- pointer-events: none;
2344
- content: "";
2345
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2346
- border-radius: inherit;
2347
- }
2348
-
2349
- .pf-v6-c-badge.pf-m-read {
2350
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2351
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2352
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2353
- }
2354
-
2355
- .pf-v6-c-badge.pf-m-unread {
2356
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2357
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2358
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2359
- }
2360
-
2361
- .pf-v6-c-badge.pf-m-disabled {
2362
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2363
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2364
- }
2365
-
2366
- .pf-v6-c-badge.pf-m-disabled::after {
2367
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2368
- }
2369
-
2370
- .pf-v6-c-badge__toggle-icon {
2371
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2372
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2373
- }
2374
-
2375
- .pf-v6-c-label-group {
2376
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2377
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2378
- --pf-v6-c-label-group--MaxWidth: 100%;
2379
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2380
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2381
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2382
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2383
- --pf-v6-c-label-group__main--MaxWidth: 100%;
2384
- --pf-v6-c-label-group__main--MinWidth: 0;
2385
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2386
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2387
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2388
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2389
- --pf-v6-c-label-group__list--MaxWidth: 100%;
2390
- --pf-v6-c-label-group__list--MinWidth: 0;
2391
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2392
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2393
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2394
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2395
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2396
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2397
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2398
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2399
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2400
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2401
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2402
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
2403
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2404
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2405
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2406
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2407
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2408
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2409
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2410
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2411
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2412
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2413
- }
2414
-
2415
- .pf-v6-c-label-group {
2416
- display: inline-flex;
2417
- row-gap: var(--pf-v6-c-label-group--RowGap);
2418
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
2419
- align-items: center;
2420
- max-width: var(--pf-v6-c-label-group--MaxWidth);
2421
- }
2422
-
2423
- .pf-v6-c-label-group.pf-m-category {
2424
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2425
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2426
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2427
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2428
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2429
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2430
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2431
- }
2432
-
2433
- .pf-v6-c-label-group.pf-m-vertical {
2434
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2435
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2436
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2437
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2438
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2439
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2440
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2441
- }
2442
-
2443
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2444
- align-items: flex-start;
2445
- }
2446
-
2447
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2448
- flex-direction: column;
2449
- align-items: flex-start;
2450
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2451
- }
2452
-
2453
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2454
- flex-direction: column;
2455
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2456
- }
2457
-
2458
- .pf-v6-c-label-group.pf-m-editable,
2459
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2460
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2461
- display: flex;
2462
- }
2463
-
2464
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2465
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2466
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2467
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2468
- flex: 1;
2469
- }
2470
-
2471
- .pf-v6-c-label-group__main {
2472
- display: flex;
2473
- flex: 1;
2474
- flex-wrap: wrap;
2475
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
2476
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2477
- align-items: baseline;
2478
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2479
- }
2480
-
2481
- .pf-v6-c-label-group__list {
2482
- display: inline-flex;
2483
- flex-wrap: wrap;
2484
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
2485
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2486
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
2487
- }
2488
-
2489
- .pf-v6-c-label-group__list-item {
2490
- display: inline-flex;
2491
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2451
+ @media (min-width: 75rem) {
2452
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2453
+ flex-direction: row;
2454
+ width: 100%;
2455
+ height: var(--pf-v6-c-divider--Size);
2456
+ }
2492
2457
  }
2493
-
2494
- .pf-v6-c-label-group__label {
2495
- overflow: hidden;
2496
- text-overflow: ellipsis;
2497
- white-space: nowrap;
2498
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2458
+ @media (min-width: 75rem) {
2459
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2460
+ flex-direction: column;
2461
+ width: var(--pf-v6-c-divider--Size);
2462
+ height: inherit;
2463
+ }
2499
2464
  }
2500
-
2501
- .pf-v6-c-label-group__close {
2502
- display: flex;
2503
- align-self: flex-start;
2465
+ @media (min-width: 75rem) {
2466
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2467
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2468
+ }
2469
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2470
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2471
+ }
2472
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2473
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2474
+ }
2475
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2476
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2477
+ }
2478
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2479
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2480
+ }
2481
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2482
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2483
+ }
2484
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2485
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2486
+ }
2487
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2488
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2489
+ }
2504
2490
  }
2505
-
2506
- .pf-v6-c-label-group__close .pf-v6-c-button {
2507
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2508
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2509
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2510
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2511
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2491
+ @media (min-width: 90.625rem) {
2492
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2493
+ flex-direction: row;
2494
+ width: 100%;
2495
+ height: var(--pf-v6-c-divider--Size);
2496
+ }
2512
2497
  }
2513
-
2514
- .pf-v6-c-label-group__textarea {
2515
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2516
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2517
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2518
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2519
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2520
- white-space: nowrap;
2521
- resize: none;
2522
- border: 0;
2523
- -ms-overflow-style: none;
2524
- scrollbar-width: none;
2498
+ @media (min-width: 90.625rem) {
2499
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2500
+ flex-direction: column;
2501
+ width: var(--pf-v6-c-divider--Size);
2502
+ height: inherit;
2503
+ }
2525
2504
  }
2526
-
2527
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2528
- display: none;
2505
+ @media (min-width: 90.625rem) {
2506
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2507
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2508
+ }
2509
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2510
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2511
+ }
2512
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2513
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2514
+ }
2515
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2516
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2517
+ }
2518
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2519
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2520
+ }
2521
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2522
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2523
+ }
2524
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2525
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2526
+ }
2527
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2528
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2529
+ }
2529
2530
  }
2530
-
2531
2531
  .pf-v6-c-menu {
2532
2532
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2533
2533
  --pf-v6-c-menu--Width: auto;
@@ -3291,87 +3291,6 @@ button.pf-v6-c-breadcrumb__link {
3291
3291
  display: none;
3292
3292
  }
3293
3293
 
3294
- .pf-v6-c-spinner {
3295
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3296
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3297
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3298
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3299
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3300
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3301
- --pf-v6-c-spinner--StrokeWidth: 10;
3302
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3303
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3304
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3305
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3306
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3307
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3308
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3309
- }
3310
-
3311
- .pf-v6-c-spinner {
3312
- width: var(--pf-v6-c-spinner--Width);
3313
- height: var(--pf-v6-c-spinner--Height);
3314
- overflow: hidden;
3315
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3316
- }
3317
-
3318
- .pf-v6-c-spinner.pf-m-inline {
3319
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3320
- }
3321
-
3322
- .pf-v6-c-spinner.pf-m-sm {
3323
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3324
- }
3325
-
3326
- .pf-v6-c-spinner.pf-m-md {
3327
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3328
- }
3329
-
3330
- .pf-v6-c-spinner.pf-m-lg {
3331
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3332
- }
3333
-
3334
- .pf-v6-c-spinner.pf-m-xl {
3335
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3336
- }
3337
-
3338
- .pf-v6-c-spinner__path {
3339
- width: 100%;
3340
- height: 100%;
3341
- stroke: var(--pf-v6-c-spinner--Color);
3342
- stroke-dasharray: 283;
3343
- stroke-dashoffset: 280;
3344
- stroke-linecap: round;
3345
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3346
- transform-origin: 50% 50%;
3347
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3348
- }
3349
-
3350
- @keyframes pf-v6-c-spinner-animation-rotate {
3351
- 0% {
3352
- transform: rotate(0deg);
3353
- }
3354
- 100% {
3355
- transform: rotate(360deg);
3356
- }
3357
- }
3358
- @keyframes pf-v6-c-spinner-animation-dash {
3359
- 0% {
3360
- stroke-dashoffset: 280;
3361
- transform: rotate(0);
3362
- }
3363
- 15% {
3364
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3365
- }
3366
- 40% {
3367
- stroke-dasharray: 220;
3368
- stroke-dashoffset: 150;
3369
- }
3370
- 100% {
3371
- stroke-dashoffset: 280;
3372
- transform: rotate(720deg);
3373
- }
3374
- }
3375
3294
  .pf-v6-c-tooltip {
3376
3295
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3377
3296
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3501,4 +3420,86 @@ button.pf-v6-c-breadcrumb__link {
3501
3420
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3502
3421
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3503
3422
  transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3423
+ }
3424
+
3425
+ .pf-v6-c-spinner {
3426
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3427
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3428
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3429
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3430
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3431
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3432
+ --pf-v6-c-spinner--StrokeWidth: 10;
3433
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3434
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3435
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3436
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3437
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3438
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3439
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3440
+ }
3441
+
3442
+ .pf-v6-c-spinner {
3443
+ width: var(--pf-v6-c-spinner--Width);
3444
+ height: var(--pf-v6-c-spinner--Height);
3445
+ overflow: hidden;
3446
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3447
+ }
3448
+
3449
+ .pf-v6-c-spinner.pf-m-inline {
3450
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3451
+ }
3452
+
3453
+ .pf-v6-c-spinner.pf-m-sm {
3454
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3455
+ }
3456
+
3457
+ .pf-v6-c-spinner.pf-m-md {
3458
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3459
+ }
3460
+
3461
+ .pf-v6-c-spinner.pf-m-lg {
3462
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3463
+ }
3464
+
3465
+ .pf-v6-c-spinner.pf-m-xl {
3466
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3467
+ }
3468
+
3469
+ .pf-v6-c-spinner__path {
3470
+ width: 100%;
3471
+ height: 100%;
3472
+ stroke: var(--pf-v6-c-spinner--Color);
3473
+ stroke-dasharray: 283;
3474
+ stroke-dashoffset: 280;
3475
+ stroke-linecap: round;
3476
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3477
+ transform-origin: 50% 50%;
3478
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3479
+ }
3480
+
3481
+ @keyframes pf-v6-c-spinner-animation-rotate {
3482
+ 0% {
3483
+ transform: rotate(0deg);
3484
+ }
3485
+ 100% {
3486
+ transform: rotate(360deg);
3487
+ }
3488
+ }
3489
+ @keyframes pf-v6-c-spinner-animation-dash {
3490
+ 0% {
3491
+ stroke-dashoffset: 280;
3492
+ transform: rotate(0);
3493
+ }
3494
+ 15% {
3495
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3496
+ }
3497
+ 40% {
3498
+ stroke-dasharray: 220;
3499
+ stroke-dashoffset: 150;
3500
+ }
3501
+ 100% {
3502
+ stroke-dashoffset: 280;
3503
+ transform: rotate(720deg);
3504
+ }
3504
3505
  }