@patternfly/react-templates 6.3.1-prerelease.3 → 6.3.1-prerelease.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-BoArLugl.css → output-W-5aODb_.css} +1491 -1491
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +3 -3
package/dist/umd/assets/{output-BoArLugl.css → output-W-5aODb_.css} RENAMED
@@ -558,1400 +558,1164 @@
558
558
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
559
559
  }
560
560
 
561
- .pf-v6-c-check {
562
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
563
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
564
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
565
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
566
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
567
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
568
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
569
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
570
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
571
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
572
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
573
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
574
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
575
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
576
- }
577
-
578
- .pf-v6-c-check {
579
- display: grid;
580
- grid-template-columns: auto 1fr;
581
- grid-gap: var(--pf-v6-c-check--GridGap);
582
- accent-color: var(--pf-v6-c-check--AccentColor);
583
- }
584
-
585
- .pf-v6-c-check.pf-m-standalone {
586
- display: inline-grid;
587
- grid-template-columns: auto;
588
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
589
- }
590
-
591
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
592
- align-self: center;
593
- transform: none;
594
- }
595
-
596
- .pf-v6-c-check__input {
597
- align-self: start;
598
- font-size: var(--pf-v6-c-check__label--FontSize);
599
- line-height: var(--pf-v6-c-check__label--LineHeight);
600
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
601
- }
602
-
603
- .pf-v6-c-check__label {
604
- font-size: var(--pf-v6-c-check__label--FontSize);
605
- font-weight: var(--pf-v6-c-check__label--FontWeight);
606
- line-height: var(--pf-v6-c-check__label--LineHeight);
607
- color: var(--pf-v6-c-check__label--Color);
608
- }
609
-
610
- .pf-v6-c-check__description {
611
- grid-column: 2;
612
- font-size: var(--pf-v6-c-check__description--FontSize);
613
- color: var(--pf-v6-c-check__description--Color);
614
- }
615
-
616
- .pf-v6-c-check__body {
617
- grid-column: 2;
618
- }
619
-
620
- .pf-v6-c-check__label,
621
- .pf-v6-c-check__input {
622
- justify-self: start;
623
- }
624
-
625
- label.pf-v6-c-check, .pf-v6-c-check__label,
626
- .pf-v6-c-check__input {
627
- cursor: pointer;
628
- }
629
-
630
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
631
- .pf-v6-c-check__input:disabled,
632
- .pf-v6-c-check__input.pf-m-disabled {
633
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
634
- cursor: not-allowed;
635
- }
636
-
637
- .pf-v6-c-check__label-required {
638
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
639
- font-size: var(--pf-v6-c-check__label-required--FontSize);
640
- color: var(--pf-v6-c-check__label-required--Color);
641
- }
642
-
643
- .pf-v6-c-badge {
644
- --pf-v6-c-badge--BorderColor: transparent;
645
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
646
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
647
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
648
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
649
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
650
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
651
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
652
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
653
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
654
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
655
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
656
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
657
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
658
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
659
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
660
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
661
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
662
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
663
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
664
- }
665
-
666
- .pf-v6-c-badge {
667
- position: relative;
668
- display: inline-block;
669
- min-width: var(--pf-v6-c-badge--MinWidth);
670
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
671
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
672
- font-size: var(--pf-v6-c-badge--FontSize);
673
- font-weight: var(--pf-v6-c-badge--FontWeight);
674
- color: var(--pf-v6-c-badge--Color);
675
- text-align: center;
676
- white-space: nowrap;
677
- background-color: var(--pf-v6-c-badge--BackgroundColor);
678
- border-radius: var(--pf-v6-c-badge--BorderRadius);
679
- }
680
-
681
- .pf-v6-c-badge::after {
682
- position: absolute;
683
- inset: 0;
684
- pointer-events: none;
685
- content: "";
686
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
687
- border-radius: inherit;
688
- }
689
-
690
- .pf-v6-c-badge.pf-m-read {
691
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
692
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
693
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
694
- }
695
-
696
- .pf-v6-c-badge.pf-m-unread {
697
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
698
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
699
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
700
- }
701
-
702
- .pf-v6-c-badge.pf-m-disabled {
703
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
704
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
705
- }
706
-
707
- .pf-v6-c-badge.pf-m-disabled::after {
708
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
709
- }
710
-
711
- .pf-v6-c-badge__toggle-icon {
712
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
713
- color: var(--pf-v6-c-badge__toggle-icon--Color);
714
- }
715
-
716
- .pf-v6-c-divider {
717
- --pf-v6-c-divider--Display: flex;
718
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
719
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
720
- --pf-v6-c-divider--before--FlexBasis: 100%;
721
- }
722
-
723
- .pf-v6-c-divider {
724
- flex-direction: row;
725
- width: 100%;
726
- height: var(--pf-v6-c-divider--Size);
727
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
728
- --pf-v6-hidden-visible--hidden--Display: none;
729
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
730
- display: var(--pf-v6-hidden-visible--Display);
731
- flex-shrink: 0;
732
- align-items: stretch;
733
- align-self: stretch;
734
- justify-content: center;
735
- border: 0;
736
- }
737
-
738
- .pf-v6-c-divider.pf-m-hidden {
739
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
740
- }
741
-
742
- @media screen and (min-width: 36rem) {
743
- .pf-v6-c-divider.pf-m-hidden-on-sm {
744
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
745
- }
746
- .pf-v6-c-divider.pf-m-visible-on-sm {
747
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
748
- }
749
- }
750
- @media screen and (min-width: 48rem) {
751
- .pf-v6-c-divider.pf-m-hidden-on-md {
752
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
753
- }
754
- .pf-v6-c-divider.pf-m-visible-on-md {
755
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
756
- }
757
- }
758
- @media screen and (min-width: 62rem) {
759
- .pf-v6-c-divider.pf-m-hidden-on-lg {
760
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
761
- }
762
- .pf-v6-c-divider.pf-m-visible-on-lg {
763
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
764
- }
765
- }
766
- @media screen and (min-width: 75rem) {
767
- .pf-v6-c-divider.pf-m-hidden-on-xl {
768
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
769
- }
770
- .pf-v6-c-divider.pf-m-visible-on-xl {
771
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
772
- }
773
- }
774
- @media screen and (min-width: 90.625rem) {
775
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
776
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
777
- }
778
- .pf-v6-c-divider.pf-m-visible-on-2xl {
779
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
780
- }
781
- }
782
- .pf-v6-c-divider::before {
783
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
784
- content: "";
785
- background-color: var(--pf-v6-c-divider--Color);
786
- }
787
-
788
- .pf-v6-c-divider.pf-m-horizontal {
789
- flex-direction: row;
790
- width: 100%;
791
- height: var(--pf-v6-c-divider--Size);
792
- }
793
-
794
- .pf-v6-c-divider.pf-m-vertical {
795
- flex-direction: column;
796
- width: var(--pf-v6-c-divider--Size);
797
- height: inherit;
798
- }
799
-
800
- .pf-v6-c-divider.pf-m-inset-none {
801
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
802
- }
803
-
804
- .pf-v6-c-divider.pf-m-inset-xs {
805
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
806
- }
807
-
808
- .pf-v6-c-divider.pf-m-inset-sm {
809
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
810
- }
811
-
812
- .pf-v6-c-divider.pf-m-inset-md {
813
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
814
- }
815
-
816
- .pf-v6-c-divider.pf-m-inset-lg {
817
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
818
- }
819
-
820
- .pf-v6-c-divider.pf-m-inset-xl {
821
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
822
- }
823
-
824
- .pf-v6-c-divider.pf-m-inset-2xl {
825
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
826
- }
827
-
828
- .pf-v6-c-divider.pf-m-inset-3xl {
829
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
830
- }
831
-
832
- @media (min-width: 36rem) {
833
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
834
- flex-direction: row;
835
- width: 100%;
836
- height: var(--pf-v6-c-divider--Size);
837
- }
838
- }
839
- @media (min-width: 36rem) {
840
- .pf-v6-c-divider.pf-m-vertical-on-sm {
841
- flex-direction: column;
842
- width: var(--pf-v6-c-divider--Size);
843
- height: inherit;
844
- }
845
- }
846
- @media (min-width: 36rem) {
847
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
848
- --pf-v6-c-divider--before--FlexBasis: 100%;
849
- }
850
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
851
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
852
- }
853
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
854
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
855
- }
856
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
857
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
858
- }
859
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
860
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
861
- }
862
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
863
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
864
- }
865
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
866
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
867
- }
868
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
869
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
870
- }
871
- }
872
- @media (min-width: 48rem) {
873
- .pf-v6-c-divider.pf-m-horizontal-on-md {
874
- flex-direction: row;
875
- width: 100%;
876
- height: var(--pf-v6-c-divider--Size);
877
- }
878
- }
879
- @media (min-width: 48rem) {
880
- .pf-v6-c-divider.pf-m-vertical-on-md {
881
- flex-direction: column;
882
- width: var(--pf-v6-c-divider--Size);
883
- height: inherit;
884
- }
885
- }
886
- @media (min-width: 48rem) {
887
- .pf-v6-c-divider.pf-m-inset-none-on-md {
888
- --pf-v6-c-divider--before--FlexBasis: 100%;
889
- }
890
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
891
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
892
- }
893
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
894
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
895
- }
896
- .pf-v6-c-divider.pf-m-inset-md-on-md {
897
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
898
- }
899
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
900
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
901
- }
902
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
903
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
904
- }
905
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
906
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
907
- }
908
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
909
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
910
- }
911
- }
912
- @media (min-width: 62rem) {
913
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
914
- flex-direction: row;
915
- width: 100%;
916
- height: var(--pf-v6-c-divider--Size);
917
- }
918
- }
919
- @media (min-width: 62rem) {
920
- .pf-v6-c-divider.pf-m-vertical-on-lg {
921
- flex-direction: column;
922
- width: var(--pf-v6-c-divider--Size);
923
- height: inherit;
924
- }
925
- }
926
- @media (min-width: 62rem) {
927
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
928
- --pf-v6-c-divider--before--FlexBasis: 100%;
929
- }
930
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
931
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
932
- }
933
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
934
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
935
- }
936
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
937
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
938
- }
939
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
940
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
941
- }
942
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
943
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
944
- }
945
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
946
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
947
- }
948
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
949
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
950
- }
951
- }
952
- @media (min-width: 75rem) {
953
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
954
- flex-direction: row;
955
- width: 100%;
956
- height: var(--pf-v6-c-divider--Size);
957
- }
958
- }
959
- @media (min-width: 75rem) {
960
- .pf-v6-c-divider.pf-m-vertical-on-xl {
961
- flex-direction: column;
962
- width: var(--pf-v6-c-divider--Size);
963
- height: inherit;
964
- }
965
- }
966
- @media (min-width: 75rem) {
967
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
968
- --pf-v6-c-divider--before--FlexBasis: 100%;
969
- }
970
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
971
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
972
- }
973
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
974
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
975
- }
976
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
977
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
978
- }
979
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
980
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
981
- }
982
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
983
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
984
- }
985
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
986
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
987
- }
988
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
989
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
990
- }
991
- }
992
- @media (min-width: 90.625rem) {
993
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
994
- flex-direction: row;
995
- width: 100%;
996
- height: var(--pf-v6-c-divider--Size);
997
- }
998
- }
999
- @media (min-width: 90.625rem) {
1000
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1001
- flex-direction: column;
1002
- width: var(--pf-v6-c-divider--Size);
1003
- height: inherit;
1004
- }
1005
- }
1006
- @media (min-width: 90.625rem) {
1007
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1008
- --pf-v6-c-divider--before--FlexBasis: 100%;
1009
- }
1010
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1011
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1012
- }
1013
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1014
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1015
- }
1016
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1017
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1018
- }
1019
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1020
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1021
- }
1022
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1023
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1024
- }
1025
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1026
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1027
- }
1028
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1029
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1030
- }
1031
- }
1032
- .pf-v6-c-text-input-group {
1033
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1034
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1035
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1036
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1037
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1038
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1039
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1040
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1041
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1042
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1043
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1044
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1045
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1046
- --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));
1047
- --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));
1048
- --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));
1049
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1050
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1051
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1052
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1053
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1054
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1055
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1056
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1057
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1058
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1059
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1060
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1061
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1062
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1063
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1064
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1065
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1066
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1067
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1068
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1069
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1070
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1071
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1072
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1073
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1074
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1075
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1076
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1077
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1078
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1079
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1080
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1081
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1082
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
561
+ .pf-v6-c-label {
562
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
563
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
564
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
565
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
566
+ --pf-v6-c-label--MaxWidth: 100%;
567
+ --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)));
568
+ --pf-v6-c-label--BorderWidth: 0;
569
+ --pf-v6-c-label--BorderColor: transparent;
570
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
571
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
572
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
573
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
574
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
575
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
576
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
577
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
578
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
579
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
580
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
581
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
582
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
583
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
584
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
585
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
586
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
587
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
588
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
589
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
590
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
591
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
592
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
593
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
594
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
595
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
596
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
597
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
598
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
599
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
600
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
601
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
602
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
603
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
604
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
605
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
606
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
607
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
608
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
609
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
610
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
611
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
612
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
613
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
614
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
615
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
616
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
617
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
618
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
619
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
620
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
621
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
622
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
623
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
624
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
625
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
626
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
627
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
628
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
629
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
630
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
631
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
632
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
633
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
634
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
635
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
636
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
637
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
638
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
639
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
640
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
641
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
642
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
643
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
644
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
645
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
646
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
647
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
648
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
649
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
650
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
651
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
652
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
653
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
654
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
655
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
656
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
657
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
658
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
659
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
660
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
661
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
662
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
663
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
664
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
665
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
666
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
667
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
668
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
669
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
670
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
671
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
672
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
673
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
674
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
675
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
676
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
677
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
678
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
679
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
680
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
681
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
682
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
683
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
684
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
685
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
686
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
687
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
688
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
689
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
690
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
691
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
692
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
693
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
694
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
695
+ --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
696
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
697
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
698
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
699
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
700
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
701
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
702
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
703
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
704
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
705
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
706
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
707
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
708
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
709
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
710
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
711
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
712
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
713
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
714
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
715
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
716
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
717
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
718
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
719
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
720
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
721
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
722
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
723
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
724
+ --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)));
725
+ --pf-v6-c-label__content--MaxWidth: 100%;
726
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
727
+ --pf-v6-c-label__content--Cursor: initial;
728
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
729
+ --pf-v6-c-label__text--MaxWidth: 100%;
730
+ --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
731
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
732
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
733
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
734
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
735
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
736
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
737
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
738
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
739
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
740
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
741
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
742
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
743
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
744
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
745
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
746
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
747
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
748
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
749
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
750
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
751
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
752
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
753
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1083
754
  }
1084
755
 
1085
- .pf-v6-c-text-input-group {
756
+ .pf-v6-c-label {
1086
757
  position: relative;
1087
- display: flex;
1088
- width: 100%;
1089
- font-size: var(--pf-v6-c-text-input-group__FontSize);
1090
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
1091
- color: var(--pf-v6-c-text-input-group--Color, inherit);
1092
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1093
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1094
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1095
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1096
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1097
- }
1098
-
1099
- .pf-v6-c-text-input-group::before {
1100
- position: absolute;
1101
- inset: 0;
1102
- pointer-events: none;
1103
- content: "";
1104
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1105
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1106
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1107
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1108
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
758
+ min-width: var(--pf-v6-c-label--MinWidth);
759
+ max-width: var(--pf-v6-c-label--MaxWidth);
760
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
761
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
762
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
763
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
764
+ font-size: var(--pf-v6-c-label--FontSize);
765
+ white-space: nowrap;
766
+ background: transparent;
767
+ isolation: isolate;
768
+ border: 0;
769
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1109
770
  }
1110
771
 
1111
- .pf-v6-c-text-input-group.pf-m-disabled {
1112
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1113
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1114
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1115
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1116
- pointer-events: none;
772
+ .pf-v6-c-label.pf-m-blue {
773
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
774
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
775
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
776
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
777
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
778
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
779
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
780
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1117
781
  }
1118
782
 
1119
- .pf-v6-c-text-input-group.pf-m-plain {
1120
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
783
+ .pf-v6-c-label.pf-m-red {
784
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
785
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
786
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
787
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
788
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
789
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
790
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
791
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1121
792
  }
1122
793
 
1123
- .pf-v6-c-text-input-group.pf-m-plain::before {
1124
- border: 0;
794
+ .pf-v6-c-label.pf-m-orange {
795
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
796
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
797
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
798
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
799
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
800
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
801
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
802
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1125
803
  }
1126
804
 
1127
- .pf-v6-c-text-input-group.pf-m-success {
1128
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1129
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1130
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
805
+ .pf-v6-c-label.pf-m-orangered {
806
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
807
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
808
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
809
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
810
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
811
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
812
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
813
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1131
814
  }
1132
815
 
1133
- .pf-v6-c-text-input-group.pf-m-warning {
1134
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1135
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1136
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
816
+ .pf-v6-c-label.pf-m-yellow {
817
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
818
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
819
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
820
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
821
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
822
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
823
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
824
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1137
825
  }
1138
826
 
1139
- .pf-v6-c-text-input-group.pf-m-error {
1140
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1141
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1142
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
827
+ .pf-v6-c-label.pf-m-green {
828
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
829
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
830
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
831
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
832
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
833
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
834
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
835
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1143
836
  }
1144
837
 
1145
- @media (prefers-reduced-motion: no-preference) {
1146
- .pf-v6-c-text-input-group.pf-m-error {
1147
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1148
- animation-name: pf-v6-global-danger-jiggle-motion;
1149
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1150
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1151
- animation-fill-mode: both;
1152
- }
1153
- }
1154
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1155
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1156
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1157
- animation-name: pf-v6-global-fade-in;
1158
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1159
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
838
+ .pf-v6-c-label.pf-m-teal {
839
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
840
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
841
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
842
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
843
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
844
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
845
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
846
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1160
847
  }
1161
848
 
1162
- .pf-v6-c-text-input-group:hover {
1163
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
849
+ .pf-v6-c-label.pf-m-purple {
850
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
851
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
852
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
853
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
854
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
855
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
856
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
857
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1164
858
  }
1165
859
 
1166
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1167
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
860
+ .pf-v6-c-label.pf-m-success {
861
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
862
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
863
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
864
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
865
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
866
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
867
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
868
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
869
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
870
+ --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);
1168
871
  }
1169
872
 
1170
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1171
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1172
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
873
+ .pf-v6-c-label.pf-m-warning {
874
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
875
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
876
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
877
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
878
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
879
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
880
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
881
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
882
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
883
+ --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);
1173
884
  }
1174
885
 
1175
- .pf-v6-c-text-input-group__main {
1176
- display: flex;
1177
- flex: 1;
1178
- flex-wrap: wrap;
1179
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1180
- min-width: 0;
886
+ .pf-v6-c-label.pf-m-danger {
887
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
888
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
889
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
890
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
891
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
892
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
893
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
894
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
895
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
896
+ --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);
1181
897
  }
1182
898
 
1183
- .pf-v6-c-text-input-group__main.pf-m-icon {
1184
- --pf-v6-c-text-input-group__text--Position: relative;
1185
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1186
- display: inline-flex;
1187
- align-items: center;
1188
- justify-content: center;
1189
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
899
+ .pf-v6-c-label.pf-m-info {
900
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
901
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
902
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
903
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
904
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
905
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
906
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
907
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
908
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
909
+ --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);
1190
910
  }
1191
911
 
1192
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1193
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
912
+ .pf-v6-c-label.pf-m-custom {
913
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
914
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
915
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
916
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
917
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
918
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
919
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
920
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
921
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
922
+ --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);
1194
923
  }
1195
924
 
1196
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1197
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1198
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1199
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
925
+ .pf-v6-c-label.pf-m-compact {
926
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
927
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
928
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
929
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
930
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
931
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
932
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1200
933
  }
1201
934
 
1202
- .pf-v6-c-text-input-group__text {
1203
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
1204
- display: inline-grid;
1205
- flex: 1;
1206
- grid-template-areas: "text-input";
1207
- grid-template-columns: 1fr;
935
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
936
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1208
937
  }
1209
938
 
1210
- .pf-v6-c-text-input-group__icon {
1211
- position: absolute;
1212
- inset-block-start: 50%;
1213
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1214
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1215
- color: var(--pf-v6-c-text-input-group__icon--Color);
1216
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
939
+ .pf-v6-c-label.pf-m-outline {
940
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
941
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
942
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
943
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
944
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
945
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
946
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
947
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
948
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
949
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1217
950
  }
1218
951
 
1219
- .pf-v6-c-text-input-group__icon.pf-m-status {
1220
- inset-inline-start: auto;
1221
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1222
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
952
+ .pf-v6-c-label.pf-m-editable {
953
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
954
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1223
955
  }
1224
956
 
1225
- .pf-v6-c-text-input-group__text-input {
1226
- overflow: hidden;
1227
- text-overflow: ellipsis;
1228
- white-space: nowrap;
1229
- position: relative;
1230
- width: 100%;
1231
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1232
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1233
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1234
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1235
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1236
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1237
- border: 0;
1238
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
957
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
958
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
959
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1239
960
  }
1240
961
 
1241
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1242
- grid-area: text-input;
962
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
963
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
964
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
965
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1243
966
  }
1244
967
 
1245
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1246
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
968
+ .pf-v6-c-label.pf-m-editable-active {
969
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
970
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
971
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
972
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1247
973
  }
1248
974
 
1249
- .pf-v6-c-text-input-group__text-input::placeholder {
1250
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
975
+ .pf-v6-c-label.pf-m-overflow {
976
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
977
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1251
978
  }
1252
979
 
1253
- .pf-v6-c-text-input-group__utilities {
1254
- display: flex;
1255
- align-items: center;
1256
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1257
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
980
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
981
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
982
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1258
983
  }
1259
984
 
1260
- .pf-v6-c-text-input-group__utilities > * + * {
1261
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
985
+ .pf-v6-c-label.pf-m-add {
986
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
987
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
988
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
989
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1262
990
  }
1263
991
 
1264
- .pf-v6-c-text-input-group__group {
1265
- display: flex;
992
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
993
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
994
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
995
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
996
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1266
997
  }
1267
998
 
1268
- .pf-v6-c-label-group {
1269
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1270
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1271
- --pf-v6-c-label-group--MaxWidth: 100%;
1272
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1273
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1274
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1275
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1276
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1277
- --pf-v6-c-label-group__main--MinWidth: 0;
1278
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1279
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1280
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1281
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1282
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1283
- --pf-v6-c-label-group__list--MinWidth: 0;
1284
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1285
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1286
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1287
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1288
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1289
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1290
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1291
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1292
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1293
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1294
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1295
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1296
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1297
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1298
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1299
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1300
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1301
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1302
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1303
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1304
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1305
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
999
+ .pf-v6-c-label.pf-m-clickable {
1000
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1306
1001
  }
1307
1002
 
1308
- .pf-v6-c-label-group {
1309
- display: inline-flex;
1310
- row-gap: var(--pf-v6-c-label-group--RowGap);
1311
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1312
- align-items: center;
1313
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1003
+ .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) {
1004
+ text-decoration-line: none;
1314
1005
  }
1315
1006
 
1316
- .pf-v6-c-label-group.pf-m-category {
1317
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1318
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1319
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1320
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1321
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1322
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1323
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1007
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1008
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1009
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1010
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1011
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1012
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1013
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1014
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1324
1015
  }
1325
1016
 
1326
- .pf-v6-c-label-group.pf-m-vertical {
1327
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1328
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1329
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1330
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1331
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1332
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1333
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1017
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1018
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1334
1019
  }
1335
1020
 
1336
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1337
- align-items: flex-start;
1021
+ .pf-v6-c-label.pf-m-disabled {
1022
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1023
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1024
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1025
+ --pf-v6-c-label--BorderWidth: 0;
1026
+ pointer-events: none;
1338
1027
  }
1339
1028
 
1340
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1341
- flex-direction: column;
1342
- align-items: flex-start;
1343
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1029
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1030
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1344
1031
  }
1345
1032
 
1346
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1347
- flex-direction: column;
1348
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1033
+ .pf-v6-c-label,
1034
+ .pf-v6-c-label__content {
1035
+ display: inline-flex;
1036
+ align-items: center;
1037
+ justify-content: center;
1349
1038
  }
1350
1039
 
1351
- .pf-v6-c-label-group.pf-m-editable,
1352
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1353
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1354
- display: flex;
1040
+ .pf-v6-c-label__text {
1041
+ overflow: hidden;
1042
+ text-overflow: ellipsis;
1043
+ white-space: nowrap;
1044
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1355
1045
  }
1356
1046
 
1357
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1358
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1359
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1360
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1361
- flex: 1;
1047
+ .pf-v6-c-label__content {
1048
+ gap: var(--pf-v6-c-label__content--Gap);
1049
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1050
+ padding: 0;
1051
+ overflow: hidden;
1052
+ color: var(--pf-v6-c-label--Color);
1053
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1054
+ background: transparent;
1055
+ border-width: 0;
1362
1056
  }
1363
1057
 
1364
- .pf-v6-c-label-group__main {
1365
- display: flex;
1366
- flex: 1;
1367
- flex-wrap: wrap;
1368
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1369
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1370
- align-items: baseline;
1371
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1058
+ .pf-v6-c-label__content::before {
1059
+ position: absolute;
1060
+ inset: 0;
1061
+ z-index: -1;
1062
+ pointer-events: none;
1063
+ content: "";
1064
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1065
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1066
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1372
1067
  }
1373
1068
 
1374
- .pf-v6-c-label-group__list {
1375
- display: inline-flex;
1376
- flex-wrap: wrap;
1377
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1378
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1379
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1069
+ input.pf-v6-c-label__content {
1070
+ overflow: hidden;
1071
+ text-overflow: ellipsis;
1072
+ white-space: nowrap;
1380
1073
  }
1381
1074
 
1382
- .pf-v6-c-label-group__list-item {
1383
- display: inline-flex;
1384
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1075
+ .pf-v6-c-label__icon {
1076
+ color: var(--pf-v6-c-label__icon--Color);
1385
1077
  }
1386
1078
 
1387
- .pf-v6-c-label-group__label {
1388
- overflow: hidden;
1389
- text-overflow: ellipsis;
1390
- white-space: nowrap;
1391
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1079
+ .pf-v6-c-label__actions {
1080
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1392
1081
  }
1393
1082
 
1394
- .pf-v6-c-label-group__close {
1395
- display: flex;
1396
- align-self: flex-start;
1083
+ .pf-v6-c-label__actions .pf-v6-c-button {
1084
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1085
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1086
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1087
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1088
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1089
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1090
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1091
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1397
1092
  }
1398
1093
 
1399
- .pf-v6-c-label-group__close .pf-v6-c-button {
1400
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1401
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1402
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1403
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1404
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1094
+ .pf-v6-c-check {
1095
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1096
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1097
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1098
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1099
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1100
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1101
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1102
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1103
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1104
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1105
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1106
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1107
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1108
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1405
1109
  }
1406
1110
 
1407
- .pf-v6-c-label-group__textarea {
1408
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1409
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1410
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1411
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1412
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1413
- white-space: nowrap;
1414
- resize: none;
1415
- border: 0;
1416
- -ms-overflow-style: none;
1417
- scrollbar-width: none;
1111
+ .pf-v6-c-check {
1112
+ display: grid;
1113
+ grid-template-columns: auto 1fr;
1114
+ grid-gap: var(--pf-v6-c-check--GridGap);
1115
+ accent-color: var(--pf-v6-c-check--AccentColor);
1418
1116
  }
1419
1117
 
1420
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1421
- display: none;
1118
+ .pf-v6-c-check.pf-m-standalone {
1119
+ display: inline-grid;
1120
+ grid-template-columns: auto;
1121
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1422
1122
  }
1423
1123
 
1424
- .pf-v6-c-label {
1425
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1426
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1427
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1428
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1429
- --pf-v6-c-label--MaxWidth: 100%;
1430
- --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)));
1431
- --pf-v6-c-label--BorderWidth: 0;
1432
- --pf-v6-c-label--BorderColor: transparent;
1433
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1434
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1435
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1436
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1437
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1438
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1439
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1440
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1441
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1442
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1443
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1444
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1445
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1446
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1447
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1448
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1449
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1450
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1451
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1452
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1453
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1454
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1455
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1456
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1457
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1458
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1459
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1460
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1461
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1462
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1463
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1464
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1465
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1466
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1467
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1468
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1469
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1470
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1471
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1472
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1473
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1474
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1475
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1476
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1477
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1478
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1479
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1480
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1481
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1482
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1483
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1484
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1485
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1486
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1487
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1488
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1489
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1490
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1491
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1492
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1493
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1494
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1495
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1496
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1497
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1498
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1499
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1500
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1501
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1502
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1503
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1504
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1505
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1506
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1507
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1508
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1509
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1510
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1511
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1512
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1513
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1514
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1515
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1516
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1517
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1518
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1519
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1520
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1521
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1522
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1523
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1524
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1525
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1526
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1527
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1528
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1529
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1530
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1531
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1532
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1533
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1534
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1535
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1536
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1537
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1538
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1539
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1540
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1541
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1542
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1543
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1544
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1545
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1546
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1547
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1548
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1549
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1550
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1551
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1552
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1553
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1554
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1555
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1556
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1557
- --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
1558
- --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
1559
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1560
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1561
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1562
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1563
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1564
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1565
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1566
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1567
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1568
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1569
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1570
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1571
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1572
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1573
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1574
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
1575
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1576
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1577
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1578
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1579
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1580
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1581
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1582
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1583
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1584
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1585
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1586
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1587
- --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)));
1588
- --pf-v6-c-label__content--MaxWidth: 100%;
1589
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1590
- --pf-v6-c-label__content--Cursor: initial;
1591
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1592
- --pf-v6-c-label__text--MaxWidth: 100%;
1593
- --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
1594
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1595
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1596
- --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
1597
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
1598
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1599
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1600
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1601
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1602
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1603
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1604
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1605
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1606
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1607
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1608
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
1609
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1610
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1611
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1612
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1613
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1614
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1615
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1616
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1124
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1125
+ align-self: center;
1126
+ transform: none;
1617
1127
  }
1618
1128
 
1619
- .pf-v6-c-label {
1620
- position: relative;
1621
- min-width: var(--pf-v6-c-label--MinWidth);
1622
- max-width: var(--pf-v6-c-label--MaxWidth);
1623
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1624
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1625
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1626
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1627
- font-size: var(--pf-v6-c-label--FontSize);
1628
- white-space: nowrap;
1629
- background: transparent;
1630
- isolation: isolate;
1631
- border: 0;
1632
- border-radius: var(--pf-v6-c-label--BorderRadius);
1129
+ .pf-v6-c-check__input {
1130
+ align-self: start;
1131
+ font-size: var(--pf-v6-c-check__label--FontSize);
1132
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1133
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1633
1134
  }
1634
1135
 
1635
- .pf-v6-c-label.pf-m-blue {
1636
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1637
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1638
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1639
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1640
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1641
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1642
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1643
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1136
+ .pf-v6-c-check__label {
1137
+ font-size: var(--pf-v6-c-check__label--FontSize);
1138
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
1139
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1140
+ color: var(--pf-v6-c-check__label--Color);
1644
1141
  }
1645
1142
 
1646
- .pf-v6-c-label.pf-m-red {
1647
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1648
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1649
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1650
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1651
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1652
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1653
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1654
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1143
+ .pf-v6-c-check__description {
1144
+ grid-column: 2;
1145
+ font-size: var(--pf-v6-c-check__description--FontSize);
1146
+ color: var(--pf-v6-c-check__description--Color);
1655
1147
  }
1656
1148
 
1657
- .pf-v6-c-label.pf-m-orange {
1658
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1659
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1660
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1661
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1662
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1663
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1664
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1665
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1149
+ .pf-v6-c-check__body {
1150
+ grid-column: 2;
1666
1151
  }
1667
1152
 
1668
- .pf-v6-c-label.pf-m-orangered {
1669
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1670
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1671
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1672
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1673
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1674
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1675
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1676
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1153
+ .pf-v6-c-check__label,
1154
+ .pf-v6-c-check__input {
1155
+ justify-self: start;
1677
1156
  }
1678
1157
 
1679
- .pf-v6-c-label.pf-m-yellow {
1680
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1681
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1682
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1683
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1684
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1685
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1686
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1687
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1158
+ label.pf-v6-c-check, .pf-v6-c-check__label,
1159
+ .pf-v6-c-check__input {
1160
+ cursor: pointer;
1688
1161
  }
1689
1162
 
1690
- .pf-v6-c-label.pf-m-green {
1691
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1692
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1693
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1694
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1695
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1696
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1697
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1698
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1163
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1164
+ .pf-v6-c-check__input:disabled,
1165
+ .pf-v6-c-check__input.pf-m-disabled {
1166
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1167
+ cursor: not-allowed;
1168
+ }
1169
+
1170
+ .pf-v6-c-check__label-required {
1171
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1172
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1173
+ color: var(--pf-v6-c-check__label-required--Color);
1174
+ }
1175
+
1176
+ .pf-v6-c-label-group {
1177
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1178
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1179
+ --pf-v6-c-label-group--MaxWidth: 100%;
1180
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1181
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1182
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1183
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1184
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1185
+ --pf-v6-c-label-group__main--MinWidth: 0;
1186
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1187
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1188
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1189
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1190
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1191
+ --pf-v6-c-label-group__list--MinWidth: 0;
1192
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1193
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1194
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1195
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1196
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1197
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1198
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1199
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1200
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1201
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1202
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1203
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1204
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1205
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1206
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1207
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1208
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1209
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1210
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1211
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1212
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1213
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1214
+ }
1215
+
1216
+ .pf-v6-c-label-group {
1217
+ display: inline-flex;
1218
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1219
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1220
+ align-items: center;
1221
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1222
+ }
1223
+
1224
+ .pf-v6-c-label-group.pf-m-category {
1225
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1226
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1227
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1228
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1229
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1230
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1231
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1232
+ }
1233
+
1234
+ .pf-v6-c-label-group.pf-m-vertical {
1235
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1236
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1237
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1238
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1239
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1240
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1241
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1242
+ }
1243
+
1244
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1245
+ align-items: flex-start;
1246
+ }
1247
+
1248
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1249
+ flex-direction: column;
1250
+ align-items: flex-start;
1251
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1252
+ }
1253
+
1254
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1255
+ flex-direction: column;
1256
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1257
+ }
1258
+
1259
+ .pf-v6-c-label-group.pf-m-editable,
1260
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1261
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1262
+ display: flex;
1263
+ }
1264
+
1265
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1266
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1267
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1268
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1269
+ flex: 1;
1270
+ }
1271
+
1272
+ .pf-v6-c-label-group__main {
1273
+ display: flex;
1274
+ flex: 1;
1275
+ flex-wrap: wrap;
1276
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1277
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1278
+ align-items: baseline;
1279
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1280
+ }
1281
+
1282
+ .pf-v6-c-label-group__list {
1283
+ display: inline-flex;
1284
+ flex-wrap: wrap;
1285
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1286
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1287
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1288
+ }
1289
+
1290
+ .pf-v6-c-label-group__list-item {
1291
+ display: inline-flex;
1292
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1293
+ }
1294
+
1295
+ .pf-v6-c-label-group__label {
1296
+ overflow: hidden;
1297
+ text-overflow: ellipsis;
1298
+ white-space: nowrap;
1299
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1300
+ }
1301
+
1302
+ .pf-v6-c-label-group__close {
1303
+ display: flex;
1304
+ align-self: flex-start;
1305
+ }
1306
+
1307
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1308
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1309
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1310
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1311
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1312
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1313
+ }
1314
+
1315
+ .pf-v6-c-label-group__textarea {
1316
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1317
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1318
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1319
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1320
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1321
+ white-space: nowrap;
1322
+ resize: none;
1323
+ border: 0;
1324
+ -ms-overflow-style: none;
1325
+ scrollbar-width: none;
1326
+ }
1327
+
1328
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1329
+ display: none;
1699
1330
  }
1700
1331
 
1701
- .pf-v6-c-label.pf-m-teal {
1702
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1703
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1704
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1705
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1706
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1707
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1708
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1709
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1332
+ .pf-v6-c-divider {
1333
+ --pf-v6-c-divider--Display: flex;
1334
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1335
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1336
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1710
1337
  }
1711
1338
 
1712
- .pf-v6-c-label.pf-m-purple {
1713
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1714
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1715
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1716
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1717
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1718
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1719
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1720
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1339
+ .pf-v6-c-divider {
1340
+ flex-direction: row;
1341
+ width: 100%;
1342
+ height: var(--pf-v6-c-divider--Size);
1343
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1344
+ --pf-v6-hidden-visible--hidden--Display: none;
1345
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1346
+ display: var(--pf-v6-hidden-visible--Display);
1347
+ flex-shrink: 0;
1348
+ align-items: stretch;
1349
+ align-self: stretch;
1350
+ justify-content: center;
1351
+ border: 0;
1721
1352
  }
1722
1353
 
1723
- .pf-v6-c-label.pf-m-success {
1724
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1725
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1726
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1727
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1728
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1729
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1730
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1731
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1732
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1733
- --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);
1354
+ .pf-v6-c-divider.pf-m-hidden {
1355
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1734
1356
  }
1735
1357
 
1736
- .pf-v6-c-label.pf-m-warning {
1737
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1738
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1739
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1740
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1741
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1742
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1743
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1744
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1745
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1746
- --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);
1358
+ @media screen and (min-width: 36rem) {
1359
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
1360
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1361
+ }
1362
+ .pf-v6-c-divider.pf-m-visible-on-sm {
1363
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1364
+ }
1365
+ }
1366
+ @media screen and (min-width: 48rem) {
1367
+ .pf-v6-c-divider.pf-m-hidden-on-md {
1368
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1369
+ }
1370
+ .pf-v6-c-divider.pf-m-visible-on-md {
1371
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1372
+ }
1373
+ }
1374
+ @media screen and (min-width: 62rem) {
1375
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
1376
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1377
+ }
1378
+ .pf-v6-c-divider.pf-m-visible-on-lg {
1379
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1380
+ }
1381
+ }
1382
+ @media screen and (min-width: 75rem) {
1383
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
1384
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1385
+ }
1386
+ .pf-v6-c-divider.pf-m-visible-on-xl {
1387
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1388
+ }
1389
+ }
1390
+ @media screen and (min-width: 90.625rem) {
1391
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
1392
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1393
+ }
1394
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
1395
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1396
+ }
1397
+ }
1398
+ .pf-v6-c-divider::before {
1399
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1400
+ content: "";
1401
+ background-color: var(--pf-v6-c-divider--Color);
1747
1402
  }
1748
1403
 
1749
- .pf-v6-c-label.pf-m-danger {
1750
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1751
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1752
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1753
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1754
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1755
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1756
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1757
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1758
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1759
- --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);
1404
+ .pf-v6-c-divider.pf-m-horizontal {
1405
+ flex-direction: row;
1406
+ width: 100%;
1407
+ height: var(--pf-v6-c-divider--Size);
1760
1408
  }
1761
1409
 
1762
- .pf-v6-c-label.pf-m-info {
1763
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1764
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1765
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1766
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1767
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1768
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1769
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1770
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1771
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1772
- --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);
1410
+ .pf-v6-c-divider.pf-m-vertical {
1411
+ flex-direction: column;
1412
+ width: var(--pf-v6-c-divider--Size);
1413
+ height: inherit;
1773
1414
  }
1774
1415
 
1775
- .pf-v6-c-label.pf-m-custom {
1776
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1777
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1778
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1779
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1780
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1781
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1782
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1783
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1784
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1785
- --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);
1416
+ .pf-v6-c-divider.pf-m-inset-none {
1417
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1786
1418
  }
1787
1419
 
1788
- .pf-v6-c-label.pf-m-compact {
1789
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1790
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1791
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1792
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1793
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1794
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1795
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1420
+ .pf-v6-c-divider.pf-m-inset-xs {
1421
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1796
1422
  }
1797
1423
 
1798
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1799
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1424
+ .pf-v6-c-divider.pf-m-inset-sm {
1425
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1800
1426
  }
1801
1427
 
1802
- .pf-v6-c-label.pf-m-outline {
1803
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1804
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1805
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1806
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1807
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1808
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1809
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1810
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1811
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1812
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1428
+ .pf-v6-c-divider.pf-m-inset-md {
1429
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1813
1430
  }
1814
1431
 
1815
- .pf-v6-c-label.pf-m-editable {
1816
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1817
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1432
+ .pf-v6-c-divider.pf-m-inset-lg {
1433
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1818
1434
  }
1819
1435
 
1820
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1821
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1822
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1436
+ .pf-v6-c-divider.pf-m-inset-xl {
1437
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1823
1438
  }
1824
1439
 
1825
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1826
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1827
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1828
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1440
+ .pf-v6-c-divider.pf-m-inset-2xl {
1441
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1829
1442
  }
1830
1443
 
1831
- .pf-v6-c-label.pf-m-editable-active {
1832
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1833
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1834
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1835
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1444
+ .pf-v6-c-divider.pf-m-inset-3xl {
1445
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1836
1446
  }
1837
1447
 
1838
- .pf-v6-c-label.pf-m-overflow {
1839
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1840
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1448
+ @media (min-width: 36rem) {
1449
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
1450
+ flex-direction: row;
1451
+ width: 100%;
1452
+ height: var(--pf-v6-c-divider--Size);
1453
+ }
1454
+ }
1455
+ @media (min-width: 36rem) {
1456
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
1457
+ flex-direction: column;
1458
+ width: var(--pf-v6-c-divider--Size);
1459
+ height: inherit;
1460
+ }
1461
+ }
1462
+ @media (min-width: 36rem) {
1463
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
1464
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1465
+ }
1466
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1467
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1468
+ }
1469
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1470
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1471
+ }
1472
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
1473
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1474
+ }
1475
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1476
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1477
+ }
1478
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1479
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1480
+ }
1481
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1482
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1483
+ }
1484
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1485
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1486
+ }
1487
+ }
1488
+ @media (min-width: 48rem) {
1489
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
1490
+ flex-direction: row;
1491
+ width: 100%;
1492
+ height: var(--pf-v6-c-divider--Size);
1493
+ }
1494
+ }
1495
+ @media (min-width: 48rem) {
1496
+ .pf-v6-c-divider.pf-m-vertical-on-md {
1497
+ flex-direction: column;
1498
+ width: var(--pf-v6-c-divider--Size);
1499
+ height: inherit;
1500
+ }
1841
1501
  }
1842
-
1843
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1844
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1845
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1502
+ @media (min-width: 48rem) {
1503
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
1504
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1505
+ }
1506
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
1507
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1508
+ }
1509
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
1510
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1511
+ }
1512
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
1513
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1514
+ }
1515
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
1516
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1517
+ }
1518
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
1519
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1520
+ }
1521
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1522
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1523
+ }
1524
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1525
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1526
+ }
1846
1527
  }
1847
-
1848
- .pf-v6-c-label.pf-m-add {
1849
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1850
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1851
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1852
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1528
+ @media (min-width: 62rem) {
1529
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
1530
+ flex-direction: row;
1531
+ width: 100%;
1532
+ height: var(--pf-v6-c-divider--Size);
1533
+ }
1853
1534
  }
1854
-
1855
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1856
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1857
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1858
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1859
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1535
+ @media (min-width: 62rem) {
1536
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
1537
+ flex-direction: column;
1538
+ width: var(--pf-v6-c-divider--Size);
1539
+ height: inherit;
1540
+ }
1860
1541
  }
1861
-
1862
- .pf-v6-c-label.pf-m-clickable {
1863
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1542
+ @media (min-width: 62rem) {
1543
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
1544
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1545
+ }
1546
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1547
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1548
+ }
1549
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1550
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1551
+ }
1552
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
1553
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1554
+ }
1555
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1556
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1557
+ }
1558
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1559
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1560
+ }
1561
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1562
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1563
+ }
1564
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1565
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1566
+ }
1864
1567
  }
1865
-
1866
- .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) {
1867
- text-decoration-line: none;
1568
+ @media (min-width: 75rem) {
1569
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
1570
+ flex-direction: row;
1571
+ width: 100%;
1572
+ height: var(--pf-v6-c-divider--Size);
1573
+ }
1868
1574
  }
1869
-
1870
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1871
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1872
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1873
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1874
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1875
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1876
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1877
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1575
+ @media (min-width: 75rem) {
1576
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
1577
+ flex-direction: column;
1578
+ width: var(--pf-v6-c-divider--Size);
1579
+ height: inherit;
1580
+ }
1878
1581
  }
1879
-
1880
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1881
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1582
+ @media (min-width: 75rem) {
1583
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
1584
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1585
+ }
1586
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1587
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1588
+ }
1589
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1590
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1591
+ }
1592
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
1593
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1594
+ }
1595
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1596
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1597
+ }
1598
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1599
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1600
+ }
1601
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1602
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1603
+ }
1604
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1605
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1606
+ }
1882
1607
  }
1883
-
1884
- .pf-v6-c-label.pf-m-disabled {
1885
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1886
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1887
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1888
- --pf-v6-c-label--BorderWidth: 0;
1889
- pointer-events: none;
1608
+ @media (min-width: 90.625rem) {
1609
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1610
+ flex-direction: row;
1611
+ width: 100%;
1612
+ height: var(--pf-v6-c-divider--Size);
1613
+ }
1890
1614
  }
1891
-
1892
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1893
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1615
+ @media (min-width: 90.625rem) {
1616
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1617
+ flex-direction: column;
1618
+ width: var(--pf-v6-c-divider--Size);
1619
+ height: inherit;
1620
+ }
1894
1621
  }
1895
-
1896
- .pf-v6-c-label,
1897
- .pf-v6-c-label__content {
1898
- display: inline-flex;
1899
- align-items: center;
1900
- justify-content: center;
1622
+ @media (min-width: 90.625rem) {
1623
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1624
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1625
+ }
1626
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1627
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1628
+ }
1629
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1630
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1631
+ }
1632
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1633
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1634
+ }
1635
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1636
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1637
+ }
1638
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1639
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1640
+ }
1641
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1642
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1643
+ }
1644
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1645
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1646
+ }
1901
1647
  }
1902
-
1903
- .pf-v6-c-label__text {
1904
- overflow: hidden;
1905
- text-overflow: ellipsis;
1906
- white-space: nowrap;
1907
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1648
+ .pf-v6-c-badge {
1649
+ --pf-v6-c-badge--BorderColor: transparent;
1650
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1651
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1652
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1653
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1654
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1655
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1656
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1657
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1658
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1659
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1660
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1661
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1662
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1663
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1664
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1665
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1666
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1667
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1668
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1908
1669
  }
1909
1670
 
1910
- .pf-v6-c-label__content {
1911
- gap: var(--pf-v6-c-label__content--Gap);
1912
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1913
- padding: 0;
1914
- overflow: hidden;
1915
- color: var(--pf-v6-c-label--Color);
1916
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1917
- background: transparent;
1918
- border-width: 0;
1671
+ .pf-v6-c-badge {
1672
+ position: relative;
1673
+ display: inline-block;
1674
+ min-width: var(--pf-v6-c-badge--MinWidth);
1675
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1676
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1677
+ font-size: var(--pf-v6-c-badge--FontSize);
1678
+ font-weight: var(--pf-v6-c-badge--FontWeight);
1679
+ color: var(--pf-v6-c-badge--Color);
1680
+ text-align: center;
1681
+ white-space: nowrap;
1682
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
1683
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1919
1684
  }
1920
1685
 
1921
- .pf-v6-c-label__content::before {
1686
+ .pf-v6-c-badge::after {
1922
1687
  position: absolute;
1923
1688
  inset: 0;
1924
- z-index: -1;
1925
1689
  pointer-events: none;
1926
1690
  content: "";
1927
- background-color: var(--pf-v6-c-label--BackgroundColor);
1928
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1929
- border-radius: var(--pf-v6-c-label--BorderRadius);
1691
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1692
+ border-radius: inherit;
1930
1693
  }
1931
1694
 
1932
- input.pf-v6-c-label__content {
1933
- overflow: hidden;
1934
- text-overflow: ellipsis;
1935
- white-space: nowrap;
1695
+ .pf-v6-c-badge.pf-m-read {
1696
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1697
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1698
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1699
+ }
1700
+
1701
+ .pf-v6-c-badge.pf-m-unread {
1702
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1703
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1704
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1936
1705
  }
1937
1706
 
1938
- .pf-v6-c-label__icon {
1939
- color: var(--pf-v6-c-label__icon--Color);
1707
+ .pf-v6-c-badge.pf-m-disabled {
1708
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1709
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1940
1710
  }
1941
1711
 
1942
- .pf-v6-c-label__actions {
1943
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1712
+ .pf-v6-c-badge.pf-m-disabled::after {
1713
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1944
1714
  }
1945
1715
 
1946
- .pf-v6-c-label__actions .pf-v6-c-button {
1947
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1948
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1949
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1950
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1951
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1952
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1953
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1954
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1716
+ .pf-v6-c-badge__toggle-icon {
1717
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1718
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1955
1719
  }
1956
1720
 
1957
1721
  .pf-v6-c-button {
@@ -2769,56 +2533,292 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2769
2533
  transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2770
2534
  }
2771
2535
 
2772
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2773
- --pf-v6-c-spinner--Color: currentcolor;
2536
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2537
+ --pf-v6-c-spinner--Color: currentcolor;
2538
+ }
2539
+
2540
+ .pf-v6-c-button__text {
2541
+ text-decoration: inherit;
2542
+ }
2543
+
2544
+ .pf-v6-c-button__count {
2545
+ display: inline-flex;
2546
+ align-items: center;
2547
+ }
2548
+
2549
+ .pf-v6-c-button--hamburger-icon path {
2550
+ fill: none;
2551
+ stroke: currentcolor;
2552
+ stroke-linecap: round;
2553
+ stroke-linejoin: round;
2554
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2555
+ }
2556
+
2557
+ .pf-v6-c-button--hamburger-icon--top {
2558
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2559
+ }
2560
+
2561
+ .pf-v6-c-button--hamburger-icon--middle {
2562
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2563
+ }
2564
+
2565
+ .pf-v6-c-button--hamburger-icon--arrow {
2566
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2567
+ }
2568
+
2569
+ .pf-v6-c-button--hamburger-icon--bottom {
2570
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2571
+ }
2572
+
2573
+ @keyframes pf-v6-c-button-icon-notify {
2574
+ 33% {
2575
+ transform: rotate(30deg);
2576
+ }
2577
+ 66% {
2578
+ transform: rotate(-60deg);
2579
+ }
2580
+ }
2581
+ @keyframes pf-v6-c-button-icon-favorited {
2582
+ 50% {
2583
+ scale: 1.5;
2584
+ }
2585
+ }
2586
+ .pf-v6-c-text-input-group {
2587
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2588
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
2589
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2590
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2591
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2592
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2593
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2594
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2595
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2596
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2597
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2598
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2599
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2600
+ --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));
2601
+ --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));
2602
+ --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));
2603
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2604
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2605
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
2606
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2607
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2608
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2609
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2610
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2611
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2612
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2613
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2614
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2615
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2616
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2617
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2618
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2619
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2620
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2621
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2622
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2623
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2624
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2625
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2626
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2627
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2628
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2629
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2630
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2631
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2632
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2633
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2634
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2635
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2636
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2637
+ }
2638
+
2639
+ .pf-v6-c-text-input-group {
2640
+ position: relative;
2641
+ display: flex;
2642
+ width: 100%;
2643
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2644
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2645
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2646
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2647
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2648
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2649
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2650
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2651
+ }
2652
+
2653
+ .pf-v6-c-text-input-group::before {
2654
+ position: absolute;
2655
+ inset: 0;
2656
+ pointer-events: none;
2657
+ content: "";
2658
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2659
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2660
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2661
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2662
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2663
+ }
2664
+
2665
+ .pf-v6-c-text-input-group.pf-m-disabled {
2666
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2667
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2668
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2669
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2670
+ pointer-events: none;
2671
+ }
2672
+
2673
+ .pf-v6-c-text-input-group.pf-m-plain {
2674
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2675
+ }
2676
+
2677
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2678
+ border: 0;
2679
+ }
2680
+
2681
+ .pf-v6-c-text-input-group.pf-m-success {
2682
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2683
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2684
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2685
+ }
2686
+
2687
+ .pf-v6-c-text-input-group.pf-m-warning {
2688
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2689
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2690
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2691
+ }
2692
+
2693
+ .pf-v6-c-text-input-group.pf-m-error {
2694
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2695
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2696
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2697
+ }
2698
+
2699
+ @media (prefers-reduced-motion: no-preference) {
2700
+ .pf-v6-c-text-input-group.pf-m-error {
2701
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2702
+ animation-name: pf-v6-global-danger-jiggle-motion;
2703
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2704
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2705
+ animation-fill-mode: both;
2706
+ }
2707
+ }
2708
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2709
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2710
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2711
+ animation-name: pf-v6-global-fade-in;
2712
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2713
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2714
+ }
2715
+
2716
+ .pf-v6-c-text-input-group:hover {
2717
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2718
+ }
2719
+
2720
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2721
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2722
+ }
2723
+
2724
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2725
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2726
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2727
+ }
2728
+
2729
+ .pf-v6-c-text-input-group__main {
2730
+ display: flex;
2731
+ flex: 1;
2732
+ flex-wrap: wrap;
2733
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2734
+ min-width: 0;
2735
+ }
2736
+
2737
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2738
+ --pf-v6-c-text-input-group__text--Position: relative;
2739
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2740
+ display: inline-flex;
2741
+ align-items: center;
2742
+ justify-content: center;
2743
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2744
+ }
2745
+
2746
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2747
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2748
+ }
2749
+
2750
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2751
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2752
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2753
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2754
+ }
2755
+
2756
+ .pf-v6-c-text-input-group__text {
2757
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2758
+ display: inline-grid;
2759
+ flex: 1;
2760
+ grid-template-areas: "text-input";
2761
+ grid-template-columns: 1fr;
2762
+ }
2763
+
2764
+ .pf-v6-c-text-input-group__icon {
2765
+ position: absolute;
2766
+ inset-block-start: 50%;
2767
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2768
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2769
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2770
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2771
+ }
2772
+
2773
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2774
+ inset-inline-start: auto;
2775
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2776
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2774
2777
  }
2775
2778
 
2776
- .pf-v6-c-button__text {
2777
- text-decoration: inherit;
2779
+ .pf-v6-c-text-input-group__text-input {
2780
+ overflow: hidden;
2781
+ text-overflow: ellipsis;
2782
+ white-space: nowrap;
2783
+ position: relative;
2784
+ width: 100%;
2785
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2786
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2787
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2788
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2789
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2790
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2791
+ border: 0;
2792
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2778
2793
  }
2779
2794
 
2780
- .pf-v6-c-button__count {
2781
- display: inline-flex;
2782
- align-items: center;
2795
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2796
+ grid-area: text-input;
2783
2797
  }
2784
2798
 
2785
- .pf-v6-c-button--hamburger-icon path {
2786
- fill: none;
2787
- stroke: currentcolor;
2788
- stroke-linecap: round;
2789
- stroke-linejoin: round;
2790
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2799
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2800
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2791
2801
  }
2792
2802
 
2793
- .pf-v6-c-button--hamburger-icon--top {
2794
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2803
+ .pf-v6-c-text-input-group__text-input::placeholder {
2804
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2795
2805
  }
2796
2806
 
2797
- .pf-v6-c-button--hamburger-icon--middle {
2798
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2807
+ .pf-v6-c-text-input-group__utilities {
2808
+ display: flex;
2809
+ align-items: center;
2810
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2811
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2799
2812
  }
2800
2813
 
2801
- .pf-v6-c-button--hamburger-icon--arrow {
2802
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2814
+ .pf-v6-c-text-input-group__utilities > * + * {
2815
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2803
2816
  }
2804
2817
 
2805
- .pf-v6-c-button--hamburger-icon--bottom {
2806
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2818
+ .pf-v6-c-text-input-group__group {
2819
+ display: flex;
2807
2820
  }
2808
2821
 
2809
- @keyframes pf-v6-c-button-icon-notify {
2810
- 33% {
2811
- transform: rotate(30deg);
2812
- }
2813
- 66% {
2814
- transform: rotate(-60deg);
2815
- }
2816
- }
2817
- @keyframes pf-v6-c-button-icon-favorited {
2818
- 50% {
2819
- scale: 1.5;
2820
- }
2821
- }
2822
2822
  .pf-v6-c-menu {
2823
2823
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2824
2824
  --pf-v6-c-menu--Width: auto;
@@ -3461,233 +3461,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3461
3461
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3462
3462
  }
3463
3463
 
3464
- .pf-v6-c-menu__breadcrumb {
3465
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3466
- padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3467
- padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3468
- padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3469
- padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3470
- }
3471
-
3472
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3473
- min-width: auto;
3474
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3475
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3476
- }
3477
-
3478
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3479
- height: auto;
3480
- }
3481
-
3482
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3483
- --pf-v6-c-menu-toggle--BorderWidth: 0;
3484
- --pf-v6-c-menu-toggle--BorderColor: transparent;
3485
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3486
- }
3487
-
3488
- .pf-v6-c-breadcrumb {
3489
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3490
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3491
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3492
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3493
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3494
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3495
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3496
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3497
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3498
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3499
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3500
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3501
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3502
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3503
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3504
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3505
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3506
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3507
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3508
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3509
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3510
- }
3511
-
3512
- .pf-v6-c-breadcrumb {
3513
- display: inline-flex;
3514
- }
3515
-
3516
- .pf-v6-c-breadcrumb__list {
3517
- display: flex;
3518
- flex-wrap: wrap;
3519
- align-items: center;
3520
- }
3521
-
3522
- .pf-v6-c-breadcrumb__item {
3523
- display: flex;
3524
- align-items: baseline;
3525
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3526
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3527
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3528
- white-space: nowrap;
3529
- list-style: none;
3530
- }
3531
-
3532
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3533
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3534
- }
3535
-
3536
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3537
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3538
- }
3539
-
3540
- .pf-v6-c-breadcrumb__item-divider {
3541
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3542
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3543
- line-height: 1;
3544
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3545
- }
3546
-
3547
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3548
- scale: -1 1;
3549
- }
3550
-
3551
- .pf-v6-c-breadcrumb__link {
3552
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3553
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3554
- font-size: inherit;
3555
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3556
- line-height: inherit;
3557
- color: var(--pf-v6-c-breadcrumb__link--Color);
3558
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3559
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3560
- word-break: break-word;
3561
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3562
- }
3563
-
3564
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3565
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3566
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3567
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3568
- }
3569
-
3570
- .pf-v6-c-breadcrumb__link.pf-m-current {
3571
- cursor: default;
3572
- }
3573
-
3574
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3575
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3576
- text-decoration-line: none;
3577
- }
3578
-
3579
- button.pf-v6-c-breadcrumb__link {
3580
- border: none;
3581
- }
3582
-
3583
- .pf-v6-c-breadcrumb__dropdown {
3584
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3585
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3586
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3587
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3588
- }
3589
-
3590
- .pf-v6-c-breadcrumb__heading {
3591
- display: inline;
3592
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3593
- }
3594
-
3595
- .pf-v6-c-breadcrumb__link,
3596
- .pf-v6-c-breadcrumb__heading {
3597
- white-space: normal;
3598
- }
3599
-
3600
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3601
- display: none;
3602
- }
3603
-
3604
- .pf-v6-c-spinner {
3605
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3606
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3607
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3608
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3609
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3610
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3611
- --pf-v6-c-spinner--StrokeWidth: 10;
3612
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3613
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3614
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3615
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3616
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3617
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3618
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3619
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3620
- }
3621
-
3622
- .pf-v6-c-spinner {
3623
- width: var(--pf-v6-c-spinner--Width);
3624
- height: var(--pf-v6-c-spinner--Height);
3625
- overflow: hidden;
3626
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3627
- }
3628
-
3629
- .pf-v6-c-spinner.pf-m-inline {
3630
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3631
- }
3632
-
3633
- .pf-v6-c-spinner.pf-m-xs {
3634
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3635
- --pf-v6-c-spinner--StrokeWidth: 15;
3636
- }
3637
-
3638
- .pf-v6-c-spinner.pf-m-sm {
3639
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3640
- }
3641
-
3642
- .pf-v6-c-spinner.pf-m-md {
3643
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3644
- }
3645
-
3646
- .pf-v6-c-spinner.pf-m-lg {
3647
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3648
- }
3649
-
3650
- .pf-v6-c-spinner.pf-m-xl {
3651
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3464
+ .pf-v6-c-menu__breadcrumb {
3465
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3466
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3467
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3468
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3469
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3652
3470
  }
3653
3471
 
3654
- .pf-v6-c-spinner__path {
3655
- width: 100%;
3656
- height: 100%;
3657
- stroke: var(--pf-v6-c-spinner--Color);
3658
- stroke-dasharray: 283;
3659
- stroke-dashoffset: 280;
3660
- stroke-linecap: round;
3661
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3662
- transform-origin: 50% 50%;
3663
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3472
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3473
+ min-width: auto;
3474
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3475
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3664
3476
  }
3665
3477
 
3666
- @keyframes pf-v6-c-spinner-animation-rotate {
3667
- 0% {
3668
- transform: rotate(0deg);
3669
- }
3670
- 100% {
3671
- transform: rotate(360deg);
3672
- }
3478
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3479
+ height: auto;
3673
3480
  }
3674
- @keyframes pf-v6-c-spinner-animation-dash {
3675
- 0% {
3676
- stroke-dashoffset: 280;
3677
- transform: rotate(0);
3678
- }
3679
- 15% {
3680
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3681
- }
3682
- 40% {
3683
- stroke-dasharray: 220;
3684
- stroke-dashoffset: 150;
3685
- }
3686
- 100% {
3687
- stroke-dashoffset: 280;
3688
- transform: rotate(720deg);
3689
- }
3481
+
3482
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3483
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3484
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3485
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3690
3486
  }
3487
+
3691
3488
  .pf-v6-c-tooltip {
3692
3489
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3693
3490
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3817,4 +3614,207 @@ button.pf-v6-c-breadcrumb__link {
3817
3614
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3818
3615
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3819
3616
  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));
3617
+ }
3618
+
3619
+ .pf-v6-c-spinner {
3620
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3621
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3622
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3623
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3624
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3625
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3626
+ --pf-v6-c-spinner--StrokeWidth: 10;
3627
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3628
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3629
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3630
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3631
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3632
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3633
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3634
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3635
+ }
3636
+
3637
+ .pf-v6-c-spinner {
3638
+ width: var(--pf-v6-c-spinner--Width);
3639
+ height: var(--pf-v6-c-spinner--Height);
3640
+ overflow: hidden;
3641
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3642
+ }
3643
+
3644
+ .pf-v6-c-spinner.pf-m-inline {
3645
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3646
+ }
3647
+
3648
+ .pf-v6-c-spinner.pf-m-xs {
3649
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3650
+ --pf-v6-c-spinner--StrokeWidth: 15;
3651
+ }
3652
+
3653
+ .pf-v6-c-spinner.pf-m-sm {
3654
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3655
+ }
3656
+
3657
+ .pf-v6-c-spinner.pf-m-md {
3658
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3659
+ }
3660
+
3661
+ .pf-v6-c-spinner.pf-m-lg {
3662
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3663
+ }
3664
+
3665
+ .pf-v6-c-spinner.pf-m-xl {
3666
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3667
+ }
3668
+
3669
+ .pf-v6-c-spinner__path {
3670
+ width: 100%;
3671
+ height: 100%;
3672
+ stroke: var(--pf-v6-c-spinner--Color);
3673
+ stroke-dasharray: 283;
3674
+ stroke-dashoffset: 280;
3675
+ stroke-linecap: round;
3676
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3677
+ transform-origin: 50% 50%;
3678
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3679
+ }
3680
+
3681
+ @keyframes pf-v6-c-spinner-animation-rotate {
3682
+ 0% {
3683
+ transform: rotate(0deg);
3684
+ }
3685
+ 100% {
3686
+ transform: rotate(360deg);
3687
+ }
3688
+ }
3689
+ @keyframes pf-v6-c-spinner-animation-dash {
3690
+ 0% {
3691
+ stroke-dashoffset: 280;
3692
+ transform: rotate(0);
3693
+ }
3694
+ 15% {
3695
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3696
+ }
3697
+ 40% {
3698
+ stroke-dasharray: 220;
3699
+ stroke-dashoffset: 150;
3700
+ }
3701
+ 100% {
3702
+ stroke-dashoffset: 280;
3703
+ transform: rotate(720deg);
3704
+ }
3705
+ }
3706
+ .pf-v6-c-breadcrumb {
3707
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3708
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3709
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3710
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3711
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3712
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3713
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3714
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3715
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3716
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3717
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3718
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3719
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3720
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3721
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3722
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3723
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3724
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3725
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3726
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3727
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3728
+ }
3729
+
3730
+ .pf-v6-c-breadcrumb {
3731
+ display: inline-flex;
3732
+ }
3733
+
3734
+ .pf-v6-c-breadcrumb__list {
3735
+ display: flex;
3736
+ flex-wrap: wrap;
3737
+ align-items: center;
3738
+ }
3739
+
3740
+ .pf-v6-c-breadcrumb__item {
3741
+ display: flex;
3742
+ align-items: baseline;
3743
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3744
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3745
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3746
+ white-space: nowrap;
3747
+ list-style: none;
3748
+ }
3749
+
3750
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3751
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3752
+ }
3753
+
3754
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3755
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3756
+ }
3757
+
3758
+ .pf-v6-c-breadcrumb__item-divider {
3759
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3760
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3761
+ line-height: 1;
3762
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3763
+ }
3764
+
3765
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3766
+ scale: -1 1;
3767
+ }
3768
+
3769
+ .pf-v6-c-breadcrumb__link {
3770
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3771
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3772
+ font-size: inherit;
3773
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3774
+ line-height: inherit;
3775
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3776
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3777
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3778
+ word-break: break-word;
3779
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3780
+ }
3781
+
3782
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3783
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3784
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3785
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3786
+ }
3787
+
3788
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3789
+ cursor: default;
3790
+ }
3791
+
3792
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3793
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3794
+ text-decoration-line: none;
3795
+ }
3796
+
3797
+ button.pf-v6-c-breadcrumb__link {
3798
+ border: none;
3799
+ }
3800
+
3801
+ .pf-v6-c-breadcrumb__dropdown {
3802
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3803
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3804
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3805
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3806
+ }
3807
+
3808
+ .pf-v6-c-breadcrumb__heading {
3809
+ display: inline;
3810
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3811
+ }
3812
+
3813
+ .pf-v6-c-breadcrumb__link,
3814
+ .pf-v6-c-breadcrumb__heading {
3815
+ white-space: normal;
3816
+ }
3817
+
3818
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3819
+ display: none;
3820
3820
  }