@patternfly/react-templates 6.5.0-prerelease.78 → 6.5.0-prerelease.79

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.
@@ -601,330 +601,547 @@
601
601
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
602
602
  }
603
603
 
604
- .pf-v6-c-check {
605
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
606
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
607
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
608
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
609
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
610
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
611
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
612
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
613
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
614
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
615
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
616
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
617
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
618
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
604
+ .pf-v6-c-label {
605
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
606
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
607
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
608
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
609
+ --pf-v6-c-label--MaxWidth: 100%;
610
+ --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)));
611
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
612
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
613
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
614
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
615
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
616
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
617
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
618
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
619
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
620
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
621
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
622
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
623
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
624
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
625
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
626
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
627
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
628
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
629
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
630
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
631
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
632
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
633
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
634
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
635
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
636
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
637
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
638
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
639
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
640
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
641
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
642
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
643
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
644
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
645
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
646
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
647
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
648
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
649
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
650
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
651
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
652
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
653
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
654
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
655
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
656
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
657
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
658
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
659
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
660
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
661
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
662
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
663
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
664
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
665
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
666
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
667
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
668
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
669
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
670
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
671
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
672
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
673
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
674
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
675
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
676
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
677
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
678
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
679
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
680
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
681
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
682
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
683
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
684
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
685
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
686
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
687
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
688
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
689
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
690
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
691
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
692
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
693
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
694
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
695
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
696
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
697
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
698
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
699
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
700
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
701
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
702
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
703
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
704
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
705
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
706
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
707
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
708
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
709
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
710
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
711
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
712
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
713
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
714
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
715
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
716
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
717
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
718
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
719
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
720
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
721
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
722
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
723
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
724
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
725
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
726
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
727
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
728
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
729
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
730
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
731
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
732
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
733
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
734
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
735
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
736
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
737
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
738
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
739
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
740
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
741
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
742
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
743
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
744
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
745
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
746
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
747
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
748
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
749
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
750
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
751
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
752
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
753
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
754
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
755
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
756
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
757
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
758
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
759
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
760
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
761
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
762
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
763
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
764
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
765
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
766
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
767
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
768
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
769
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
770
+ --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)));
771
+ --pf-v6-c-label__content--MaxWidth: 100%;
772
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
773
+ --pf-v6-c-label__content--Cursor: initial;
774
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
775
+ --pf-v6-c-label__text--MaxWidth: 100%;
776
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
777
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
778
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
779
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
780
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
781
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
782
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
783
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
784
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
785
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
786
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
787
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
788
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
789
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
790
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
791
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
792
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
793
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
794
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
795
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
796
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
797
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
798
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
799
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
619
800
  }
620
801
 
621
- .pf-v6-c-check {
622
- display: grid;
623
- grid-template-columns: auto 1fr;
624
- grid-gap: var(--pf-v6-c-check--GridGap);
625
- accent-color: var(--pf-v6-c-check--AccentColor);
802
+ .pf-v6-c-label {
803
+ position: relative;
804
+ gap: var(--pf-v6-c-label--Gap);
805
+ min-width: var(--pf-v6-c-label--MinWidth);
806
+ max-width: var(--pf-v6-c-label--MaxWidth);
807
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
808
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
809
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
810
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
811
+ font-size: var(--pf-v6-c-label--FontSize);
812
+ white-space: nowrap;
813
+ background: transparent;
814
+ isolation: isolate;
815
+ border: 0;
816
+ border-radius: var(--pf-v6-c-label--BorderRadius);
626
817
  }
627
818
 
628
- .pf-v6-c-check.pf-m-standalone {
629
- display: inline-grid;
630
- grid-template-columns: auto;
631
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
819
+ .pf-v6-c-label.pf-m-blue {
820
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
821
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
822
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
823
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
824
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
825
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
826
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
827
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
632
828
  }
633
829
 
634
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
635
- align-self: center;
636
- transform: none;
830
+ .pf-v6-c-label.pf-m-red {
831
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
832
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
833
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
834
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
835
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
836
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
837
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
838
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
637
839
  }
638
840
 
639
- .pf-v6-c-check__input {
640
- align-self: start;
641
- font-size: var(--pf-v6-c-check__label--FontSize);
642
- line-height: var(--pf-v6-c-check__label--LineHeight);
643
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
841
+ .pf-v6-c-label.pf-m-orange {
842
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
843
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
844
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
845
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
846
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
847
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
848
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
849
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
644
850
  }
645
851
 
646
- .pf-v6-c-check__label {
647
- font-size: var(--pf-v6-c-check__label--FontSize);
648
- font-weight: var(--pf-v6-c-check__label--FontWeight);
649
- line-height: var(--pf-v6-c-check__label--LineHeight);
650
- color: var(--pf-v6-c-check__label--Color);
852
+ .pf-v6-c-label.pf-m-orangered {
853
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
854
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
855
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
856
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
857
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
858
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
859
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
860
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
651
861
  }
652
862
 
653
- .pf-v6-c-check__description {
654
- grid-column: 2;
655
- font-size: var(--pf-v6-c-check__description--FontSize);
656
- color: var(--pf-v6-c-check__description--Color);
863
+ .pf-v6-c-label.pf-m-yellow {
864
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
865
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
866
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
867
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
868
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
869
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
870
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
871
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
657
872
  }
658
873
 
659
- .pf-v6-c-check__body {
660
- grid-column: 2;
874
+ .pf-v6-c-label.pf-m-green {
875
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
876
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
877
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
878
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
879
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
880
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
881
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
882
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
661
883
  }
662
884
 
663
- .pf-v6-c-check__label,
664
- .pf-v6-c-check__input {
665
- justify-self: start;
885
+ .pf-v6-c-label.pf-m-teal {
886
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
887
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
888
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
889
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
890
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
891
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
892
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
893
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
666
894
  }
667
895
 
668
- label.pf-v6-c-check, .pf-v6-c-check__label,
669
- .pf-v6-c-check__input {
670
- cursor: pointer;
896
+ .pf-v6-c-label.pf-m-purple {
897
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
898
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
899
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
900
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
901
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
902
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
903
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
904
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
905
+ }
906
+
907
+ .pf-v6-c-label.pf-m-success {
908
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
909
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
910
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
911
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
912
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
913
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
914
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
915
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
916
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
917
+ --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);
918
+ }
919
+
920
+ .pf-v6-c-label.pf-m-warning {
921
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
922
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
923
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
924
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
925
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
926
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
927
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
928
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
929
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
930
+ --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);
931
+ }
932
+
933
+ .pf-v6-c-label.pf-m-danger {
934
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
935
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
936
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
937
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
938
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
939
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
940
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
941
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
942
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
943
+ --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);
944
+ }
945
+
946
+ .pf-v6-c-label.pf-m-info {
947
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
948
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
949
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
950
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
951
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
952
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
953
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
954
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
955
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
956
+ --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);
957
+ }
958
+
959
+ .pf-v6-c-label.pf-m-custom {
960
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
961
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
962
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
963
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
964
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
965
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
966
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
967
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
968
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
969
+ --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);
671
970
  }
672
971
 
673
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
674
- .pf-v6-c-check__input:disabled,
675
- .pf-v6-c-check__input.pf-m-disabled {
676
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
677
- cursor: not-allowed;
972
+ .pf-v6-c-label.pf-m-compact {
973
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
974
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
975
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
976
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
977
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
978
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
979
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
678
980
  }
679
981
 
680
- .pf-v6-c-check__label-required {
681
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
682
- font-size: var(--pf-v6-c-check__label-required--FontSize);
683
- color: var(--pf-v6-c-check__label-required--Color);
982
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
983
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
684
984
  }
685
985
 
686
- .pf-v6-c-text-input-group {
687
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
688
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
689
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
690
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
691
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
692
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
693
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
694
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
695
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
696
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
697
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
698
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
699
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
700
- --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));
701
- --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));
702
- --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));
703
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
704
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
705
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
706
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
707
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
708
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
709
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
710
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
711
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
712
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
713
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
714
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
715
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
716
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
717
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
718
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
719
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
720
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
721
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
722
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
723
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
724
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
725
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
726
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
727
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
728
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
729
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
730
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
731
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
732
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
733
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
734
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
735
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
736
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
737
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
986
+ .pf-v6-c-label.pf-m-outline {
987
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
988
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
989
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
990
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
991
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
992
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
993
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
994
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
995
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
996
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
738
997
  }
739
998
 
740
- .pf-v6-c-text-input-group {
741
- position: relative;
742
- display: flex;
743
- width: 100%;
744
- font-size: var(--pf-v6-c-text-input-group__FontSize);
745
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
746
- color: var(--pf-v6-c-text-input-group--Color, inherit);
747
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
748
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
749
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
750
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
751
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
999
+ .pf-v6-c-label.pf-m-editable {
1000
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1001
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
752
1002
  }
753
1003
 
754
- .pf-v6-c-text-input-group::before {
755
- position: absolute;
756
- inset: 0;
757
- pointer-events: none;
758
- content: "";
759
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
760
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
761
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
762
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
763
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1004
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1005
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1006
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
764
1007
  }
765
1008
 
766
- .pf-v6-c-text-input-group.pf-m-disabled {
767
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
768
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
769
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
770
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
771
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
772
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
773
- pointer-events: none;
1009
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1010
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1011
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1012
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
774
1013
  }
775
1014
 
776
- .pf-v6-c-text-input-group.pf-m-plain {
777
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1015
+ .pf-v6-c-label.pf-m-editable-active {
1016
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1017
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1018
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1019
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
778
1020
  }
779
1021
 
780
- .pf-v6-c-text-input-group.pf-m-plain::before {
781
- border: 0;
1022
+ .pf-v6-c-label.pf-m-overflow {
1023
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1024
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1025
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
782
1026
  }
783
1027
 
784
- .pf-v6-c-text-input-group.pf-m-success {
785
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
786
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
787
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1028
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1029
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1030
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1031
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
788
1032
  }
789
1033
 
790
- .pf-v6-c-text-input-group.pf-m-warning {
791
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
792
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
793
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1034
+ .pf-v6-c-label.pf-m-add {
1035
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1036
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1037
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1038
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
794
1039
  }
795
1040
 
796
- .pf-v6-c-text-input-group.pf-m-error {
797
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
798
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
799
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1041
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1042
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1043
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1044
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1045
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
800
1046
  }
801
1047
 
802
- @media (prefers-reduced-motion: no-preference) {
803
- .pf-v6-c-text-input-group.pf-m-error {
804
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
805
- animation-name: pf-v6-global-danger-jiggle-motion;
806
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
807
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
808
- animation-fill-mode: both;
809
- }
810
- }
811
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
812
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
813
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
814
- animation-name: pf-v6-global-fade-in;
815
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
816
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1048
+ .pf-v6-c-label.pf-m-clickable {
1049
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
817
1050
  }
818
1051
 
819
- .pf-v6-c-text-input-group:hover {
820
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1052
+ .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) {
1053
+ text-decoration-line: none;
821
1054
  }
822
1055
 
823
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
824
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1056
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1057
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1058
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1059
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1060
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1061
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1062
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1063
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
825
1064
  }
826
1065
 
827
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
828
- --pf-v6-c-text-input-group__text--Position: relative;
1066
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1067
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
829
1068
  }
830
1069
 
831
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
832
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
833
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1070
+ .pf-v6-c-label.pf-m-disabled {
1071
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1072
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1073
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1074
+ --pf-v6-c-label--BorderWidth: 0;
1075
+ pointer-events: none;
834
1076
  }
835
1077
 
836
- .pf-v6-c-text-input-group__main {
837
- display: flex;
838
- flex: 1;
839
- flex-wrap: wrap;
840
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
841
- min-width: 0;
1078
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1079
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
842
1080
  }
843
1081
 
844
- .pf-v6-c-text-input-group__main.pf-m-icon {
845
- --pf-v6-c-text-input-group__text--Position: relative;
846
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1082
+ .pf-v6-c-label,
1083
+ .pf-v6-c-label__content {
847
1084
  display: inline-flex;
848
1085
  align-items: center;
849
1086
  justify-content: center;
850
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
851
- }
852
-
853
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
854
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
855
- }
856
-
857
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
858
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
859
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
860
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
861
1087
  }
862
1088
 
863
- .pf-v6-c-text-input-group__text {
864
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
865
- display: inline-grid;
866
- flex: 1;
867
- grid-template-areas: "text-input";
868
- grid-template-columns: 1fr;
1089
+ .pf-v6-c-label__text {
1090
+ overflow: hidden;
1091
+ text-overflow: ellipsis;
1092
+ white-space: nowrap;
1093
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
869
1094
  }
870
1095
 
871
- .pf-v6-c-text-input-group__icon {
872
- position: absolute;
873
- inset-block-start: 50%;
874
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
875
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
876
- color: var(--pf-v6-c-text-input-group__icon--Color);
877
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1096
+ .pf-v6-c-label__content {
1097
+ gap: var(--pf-v6-c-label__content--Gap);
1098
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1099
+ padding: 0;
1100
+ overflow: hidden;
1101
+ color: var(--pf-v6-c-label--Color);
1102
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1103
+ background: transparent;
1104
+ border-width: 0;
878
1105
  }
879
1106
 
880
- .pf-v6-c-text-input-group__icon.pf-m-status {
881
- inset-inline-start: auto;
882
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
883
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1107
+ .pf-v6-c-label__content::before {
1108
+ position: absolute;
1109
+ inset: 0;
1110
+ z-index: -1;
1111
+ pointer-events: none;
1112
+ content: "";
1113
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1114
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1115
+ border-radius: var(--pf-v6-c-label--BorderRadius);
884
1116
  }
885
1117
 
886
- .pf-v6-c-text-input-group__text-input {
1118
+ input.pf-v6-c-label__content {
887
1119
  overflow: hidden;
888
1120
  text-overflow: ellipsis;
889
1121
  white-space: nowrap;
890
- position: relative;
891
- width: 100%;
892
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
893
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
894
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
895
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
896
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
897
- color: var(--pf-v6-c-text-input-group__text-input--Color);
898
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
899
- border: 0;
900
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
901
- }
902
-
903
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
904
- grid-area: text-input;
905
- }
906
-
907
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
908
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
909
1122
  }
910
1123
 
911
- .pf-v6-c-text-input-group__text-input::placeholder {
912
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1124
+ .pf-v6-c-label__icon {
1125
+ color: var(--pf-v6-c-label__icon--Color);
913
1126
  }
914
1127
 
915
- .pf-v6-c-text-input-group__utilities {
916
- display: flex;
917
- align-items: center;
918
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
919
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1128
+ .pf-v6-c-label__actions {
1129
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
920
1130
  }
921
1131
 
922
- .pf-v6-c-text-input-group__utilities > * + * {
923
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1132
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1133
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
924
1134
  }
925
1135
 
926
- .pf-v6-c-text-input-group__group {
927
- display: flex;
1136
+ .pf-v6-c-label__actions .pf-v6-c-button {
1137
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1138
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1139
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1140
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1141
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1142
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1143
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1144
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
928
1145
  }
929
1146
 
930
1147
  .pf-v6-c-label-group {
@@ -1158,327 +1375,250 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1158
1375
  color: var(--pf-v6-c-badge__toggle-icon--Color);
1159
1376
  }
1160
1377
 
1161
- .pf-v6-c-divider {
1162
- --pf-v6-c-divider--Display: flex;
1163
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1164
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1165
- --pf-v6-c-divider--before--FlexBasis: 100%;
1378
+ .pf-v6-c-text-input-group {
1379
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1380
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
1381
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1382
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1383
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1384
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1385
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1386
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1387
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1388
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1389
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1390
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1391
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1392
+ --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));
1393
+ --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));
1394
+ --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));
1395
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1396
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1397
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
1398
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1399
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1400
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1401
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1402
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1403
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1404
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1405
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1406
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1407
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1408
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1409
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1410
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1411
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1412
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1413
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1414
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1415
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1416
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1417
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1418
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1419
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1420
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1421
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1422
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1423
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1424
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1425
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1426
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1427
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1428
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1429
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1166
1430
  }
1167
1431
 
1168
- .pf-v6-c-divider {
1169
- flex-direction: row;
1432
+ .pf-v6-c-text-input-group {
1433
+ position: relative;
1434
+ display: flex;
1170
1435
  width: 100%;
1171
- height: var(--pf-v6-c-divider--Size);
1172
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1173
- --pf-v6-hidden-visible--hidden--Display: none;
1174
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1175
- display: var(--pf-v6-hidden-visible--Display);
1436
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
1437
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
1438
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
1439
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1440
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1441
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1442
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1443
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1176
1444
  }
1177
1445
 
1178
- .pf-v6-c-divider.pf-m-hidden {
1179
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1446
+ .pf-v6-c-text-input-group::before {
1447
+ position: absolute;
1448
+ inset: 0;
1449
+ pointer-events: none;
1450
+ content: "";
1451
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1452
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1453
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1454
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1455
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1180
1456
  }
1181
1457
 
1182
- @media screen and (min-width: 36rem) {
1183
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1184
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1185
- }
1186
- .pf-v6-c-divider.pf-m-visible-on-sm {
1187
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1188
- }
1189
- }
1190
- @media screen and (min-width: 48rem) {
1191
- .pf-v6-c-divider.pf-m-hidden-on-md {
1192
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1193
- }
1194
- .pf-v6-c-divider.pf-m-visible-on-md {
1195
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1196
- }
1197
- }
1198
- @media screen and (min-width: 62rem) {
1199
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1200
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1201
- }
1202
- .pf-v6-c-divider.pf-m-visible-on-lg {
1203
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1204
- }
1205
- }
1206
- @media screen and (min-width: 75rem) {
1207
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1208
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1209
- }
1210
- .pf-v6-c-divider.pf-m-visible-on-xl {
1211
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1212
- }
1213
- }
1214
- @media screen and (min-width: 90.625rem) {
1215
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1216
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1217
- }
1218
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1219
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1220
- }
1221
- }
1222
- .pf-v6-c-divider {
1223
- flex-shrink: 0;
1224
- align-items: stretch;
1225
- align-self: stretch;
1226
- justify-content: center;
1227
- border: 0;
1458
+ .pf-v6-c-text-input-group.pf-m-disabled {
1459
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1460
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1461
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1462
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1463
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1464
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1465
+ pointer-events: none;
1228
1466
  }
1229
1467
 
1230
- .pf-v6-c-divider::before {
1231
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1232
- content: "";
1233
- background-color: var(--pf-v6-c-divider--Color);
1234
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1235
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1468
+ .pf-v6-c-text-input-group.pf-m-plain {
1469
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1236
1470
  }
1237
1471
 
1238
- .pf-v6-c-divider.pf-m-horizontal {
1239
- flex-direction: row;
1240
- width: 100%;
1241
- height: var(--pf-v6-c-divider--Size);
1472
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1473
+ border: 0;
1242
1474
  }
1243
1475
 
1244
- .pf-v6-c-divider.pf-m-vertical {
1245
- flex-direction: column;
1246
- width: var(--pf-v6-c-divider--Size);
1247
- height: inherit;
1476
+ .pf-v6-c-text-input-group.pf-m-success {
1477
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1478
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1479
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1248
1480
  }
1249
1481
 
1250
- .pf-v6-c-divider.pf-m-inset-none {
1251
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1482
+ .pf-v6-c-text-input-group.pf-m-warning {
1483
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1484
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1485
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1252
1486
  }
1253
1487
 
1254
- .pf-v6-c-divider.pf-m-inset-xs {
1255
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1488
+ .pf-v6-c-text-input-group.pf-m-error {
1489
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1490
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1491
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1256
1492
  }
1257
1493
 
1258
- .pf-v6-c-divider.pf-m-inset-sm {
1259
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1494
+ @media (prefers-reduced-motion: no-preference) {
1495
+ .pf-v6-c-text-input-group.pf-m-error {
1496
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1497
+ animation-name: pf-v6-global-danger-jiggle-motion;
1498
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1499
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1500
+ animation-fill-mode: both;
1501
+ }
1502
+ }
1503
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1504
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1505
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1506
+ animation-name: pf-v6-global-fade-in;
1507
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1508
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1260
1509
  }
1261
1510
 
1262
- .pf-v6-c-divider.pf-m-inset-md {
1263
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1511
+ .pf-v6-c-text-input-group:hover {
1512
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1264
1513
  }
1265
1514
 
1266
- .pf-v6-c-divider.pf-m-inset-lg {
1267
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1515
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1516
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1268
1517
  }
1269
1518
 
1270
- .pf-v6-c-divider.pf-m-inset-xl {
1271
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1519
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1520
+ --pf-v6-c-text-input-group__text--Position: relative;
1272
1521
  }
1273
1522
 
1274
- .pf-v6-c-divider.pf-m-inset-2xl {
1275
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1523
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1524
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1525
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1276
1526
  }
1277
1527
 
1278
- .pf-v6-c-divider.pf-m-inset-3xl {
1279
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1528
+ .pf-v6-c-text-input-group__main {
1529
+ display: flex;
1530
+ flex: 1;
1531
+ flex-wrap: wrap;
1532
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1533
+ min-width: 0;
1280
1534
  }
1281
1535
 
1282
- @media (min-width: 36rem) {
1283
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1284
- flex-direction: row;
1285
- width: 100%;
1286
- height: var(--pf-v6-c-divider--Size);
1287
- }
1288
- }
1289
- @media (min-width: 36rem) {
1290
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1291
- flex-direction: column;
1292
- width: var(--pf-v6-c-divider--Size);
1293
- height: inherit;
1294
- }
1295
- }
1296
- @media (min-width: 36rem) {
1297
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1298
- --pf-v6-c-divider--before--FlexBasis: 100%;
1299
- }
1300
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1301
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1302
- }
1303
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1304
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1305
- }
1306
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1307
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1308
- }
1309
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1310
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1311
- }
1312
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1313
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1314
- }
1315
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1316
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1317
- }
1318
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1319
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1320
- }
1536
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1537
+ --pf-v6-c-text-input-group__text--Position: relative;
1538
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1539
+ display: inline-flex;
1540
+ align-items: center;
1541
+ justify-content: center;
1542
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1321
1543
  }
1322
- @media (min-width: 48rem) {
1323
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1324
- flex-direction: row;
1325
- width: 100%;
1326
- height: var(--pf-v6-c-divider--Size);
1327
- }
1544
+
1545
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1546
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1328
1547
  }
1329
- @media (min-width: 48rem) {
1330
- .pf-v6-c-divider.pf-m-vertical-on-md {
1331
- flex-direction: column;
1332
- width: var(--pf-v6-c-divider--Size);
1333
- height: inherit;
1334
- }
1548
+
1549
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1550
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1551
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1552
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1335
1553
  }
1336
- @media (min-width: 48rem) {
1337
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1338
- --pf-v6-c-divider--before--FlexBasis: 100%;
1339
- }
1340
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1341
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1342
- }
1343
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1344
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1345
- }
1346
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1347
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1348
- }
1349
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1350
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1351
- }
1352
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1353
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1354
- }
1355
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1356
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1357
- }
1358
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1359
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1360
- }
1554
+
1555
+ .pf-v6-c-text-input-group__text {
1556
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1557
+ display: inline-grid;
1558
+ flex: 1;
1559
+ grid-template-areas: "text-input";
1560
+ grid-template-columns: 1fr;
1361
1561
  }
1362
- @media (min-width: 62rem) {
1363
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1364
- flex-direction: row;
1365
- width: 100%;
1366
- height: var(--pf-v6-c-divider--Size);
1367
- }
1562
+
1563
+ .pf-v6-c-text-input-group__icon {
1564
+ position: absolute;
1565
+ inset-block-start: 50%;
1566
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1567
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1568
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1569
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1368
1570
  }
1369
- @media (min-width: 62rem) {
1370
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1371
- flex-direction: column;
1372
- width: var(--pf-v6-c-divider--Size);
1373
- height: inherit;
1374
- }
1571
+
1572
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1573
+ inset-inline-start: auto;
1574
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1575
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1375
1576
  }
1376
- @media (min-width: 62rem) {
1377
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1378
- --pf-v6-c-divider--before--FlexBasis: 100%;
1379
- }
1380
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1381
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1382
- }
1383
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1384
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1385
- }
1386
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1387
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1388
- }
1389
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1390
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1391
- }
1392
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1393
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1394
- }
1395
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1396
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1397
- }
1398
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1399
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1400
- }
1577
+
1578
+ .pf-v6-c-text-input-group__text-input {
1579
+ overflow: hidden;
1580
+ text-overflow: ellipsis;
1581
+ white-space: nowrap;
1582
+ position: relative;
1583
+ width: 100%;
1584
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1585
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1586
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1587
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1588
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1589
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
1590
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1591
+ border: 0;
1592
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1401
1593
  }
1402
- @media (min-width: 75rem) {
1403
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1404
- flex-direction: row;
1405
- width: 100%;
1406
- height: var(--pf-v6-c-divider--Size);
1407
- }
1594
+
1595
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1596
+ grid-area: text-input;
1408
1597
  }
1409
- @media (min-width: 75rem) {
1410
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1411
- flex-direction: column;
1412
- width: var(--pf-v6-c-divider--Size);
1413
- height: inherit;
1414
- }
1598
+
1599
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1600
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1415
1601
  }
1416
- @media (min-width: 75rem) {
1417
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1418
- --pf-v6-c-divider--before--FlexBasis: 100%;
1419
- }
1420
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1421
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1422
- }
1423
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1424
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1425
- }
1426
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1427
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1428
- }
1429
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1430
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1431
- }
1432
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1433
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1434
- }
1435
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1436
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1437
- }
1438
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1439
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1440
- }
1602
+
1603
+ .pf-v6-c-text-input-group__text-input::placeholder {
1604
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1441
1605
  }
1442
- @media (min-width: 90.625rem) {
1443
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1444
- flex-direction: row;
1445
- width: 100%;
1446
- height: var(--pf-v6-c-divider--Size);
1447
- }
1606
+
1607
+ .pf-v6-c-text-input-group__utilities {
1608
+ display: flex;
1609
+ align-items: center;
1610
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1611
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1448
1612
  }
1449
- @media (min-width: 90.625rem) {
1450
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1451
- flex-direction: column;
1452
- width: var(--pf-v6-c-divider--Size);
1453
- height: inherit;
1454
- }
1613
+
1614
+ .pf-v6-c-text-input-group__utilities > * + * {
1615
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1455
1616
  }
1456
- @media (min-width: 90.625rem) {
1457
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1458
- --pf-v6-c-divider--before--FlexBasis: 100%;
1459
- }
1460
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1461
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1462
- }
1463
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1464
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1465
- }
1466
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1467
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1468
- }
1469
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1470
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1471
- }
1472
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1473
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1474
- }
1475
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1476
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1477
- }
1478
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1479
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1480
- }
1617
+
1618
+ .pf-v6-c-text-input-group__group {
1619
+ display: flex;
1481
1620
  }
1621
+
1482
1622
  .pf-v6-c-button {
1483
1623
  --pf-v6-c-button--Display: inline-flex;
1484
1624
  --pf-v6-c-button--AlignItems: baseline;
@@ -2500,549 +2640,409 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2500
2640
  scale: 1.5;
2501
2641
  }
2502
2642
  }
2503
- .pf-v6-c-label {
2504
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2505
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2506
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2507
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2508
- --pf-v6-c-label--MaxWidth: 100%;
2509
- --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)));
2510
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2511
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
2512
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
2513
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
2514
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2515
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2516
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2517
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2518
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
2519
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
2520
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
2521
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
2522
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
2523
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
2524
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
2525
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
2526
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
2527
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
2528
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
2529
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
2530
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
2531
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
2532
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
2533
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
2534
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
2535
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
2536
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
2537
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
2538
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
2539
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
2540
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
2541
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
2542
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
2543
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
2544
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
2545
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
2546
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
2547
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
2548
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
2549
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
2550
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
2551
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
2552
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
2553
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
2554
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
2555
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
2556
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
2557
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
2558
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
2559
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
2560
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
2561
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
2562
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
2563
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
2564
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
2565
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
2566
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
2567
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
2568
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
2569
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
2570
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
2571
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
2572
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
2573
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
2574
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
2575
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
2576
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
2577
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
2578
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
2579
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
2580
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
2581
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
2582
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
2583
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
2584
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
2585
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
2586
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
2587
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
2588
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
2589
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
2590
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
2591
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
2592
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
2593
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
2594
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
2595
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2596
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
2597
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
2598
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
2599
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
2600
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
2601
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
2602
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
2603
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2604
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2605
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2606
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
2607
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
2608
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
2609
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
2610
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
2611
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
2612
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
2613
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2614
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2615
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2616
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
2617
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
2618
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
2619
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
2620
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
2621
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
2622
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
2623
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
2624
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
2625
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
2626
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
2627
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
2628
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
2629
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
2630
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
2631
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
2632
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
2633
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
2634
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
2635
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
2636
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
2637
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2638
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
2639
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
2640
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
2641
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
2642
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
2643
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
2644
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
2645
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
2646
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2647
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
2648
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2649
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
2650
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2651
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2652
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
2653
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2654
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2655
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
2656
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
2657
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
2658
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
2659
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
2660
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
2661
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
2662
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2663
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
2664
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2665
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
2666
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2667
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
2668
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
2669
- --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)));
2670
- --pf-v6-c-label__content--MaxWidth: 100%;
2671
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2672
- --pf-v6-c-label__content--Cursor: initial;
2673
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2674
- --pf-v6-c-label__text--MaxWidth: 100%;
2675
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
2676
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2677
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
2678
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
2679
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
2680
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
2681
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
2682
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
2683
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
2684
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
2685
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
2686
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
2687
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
2688
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
2689
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
2690
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
2691
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
2692
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
2693
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
2694
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
2695
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2696
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2697
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2698
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2699
- }
2700
-
2701
- .pf-v6-c-label {
2702
- position: relative;
2703
- gap: var(--pf-v6-c-label--Gap);
2704
- min-width: var(--pf-v6-c-label--MinWidth);
2705
- max-width: var(--pf-v6-c-label--MaxWidth);
2706
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2707
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2708
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2709
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2710
- font-size: var(--pf-v6-c-label--FontSize);
2711
- white-space: nowrap;
2712
- background: transparent;
2713
- isolation: isolate;
2714
- border: 0;
2715
- border-radius: var(--pf-v6-c-label--BorderRadius);
2643
+ .pf-v6-c-check {
2644
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2645
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2646
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2647
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2648
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2649
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2650
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2651
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2652
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2653
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2654
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2655
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2656
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2657
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2716
2658
  }
2717
2659
 
2718
- .pf-v6-c-label.pf-m-blue {
2719
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2720
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2721
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2722
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2723
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2724
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2725
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2726
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2660
+ .pf-v6-c-check {
2661
+ display: grid;
2662
+ grid-template-columns: auto 1fr;
2663
+ grid-gap: var(--pf-v6-c-check--GridGap);
2664
+ accent-color: var(--pf-v6-c-check--AccentColor);
2727
2665
  }
2728
2666
 
2729
- .pf-v6-c-label.pf-m-red {
2730
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2731
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2732
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2733
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2734
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2735
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2736
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2737
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2667
+ .pf-v6-c-check.pf-m-standalone {
2668
+ display: inline-grid;
2669
+ grid-template-columns: auto;
2670
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2738
2671
  }
2739
2672
 
2740
- .pf-v6-c-label.pf-m-orange {
2741
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2742
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2743
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2744
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2745
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2746
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2747
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2748
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2673
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2674
+ align-self: center;
2675
+ transform: none;
2749
2676
  }
2750
2677
 
2751
- .pf-v6-c-label.pf-m-orangered {
2752
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2753
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2754
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2755
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2756
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2757
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2758
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2759
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2678
+ .pf-v6-c-check__input {
2679
+ align-self: start;
2680
+ font-size: var(--pf-v6-c-check__label--FontSize);
2681
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2682
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2760
2683
  }
2761
2684
 
2762
- .pf-v6-c-label.pf-m-yellow {
2763
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2764
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2765
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2766
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2767
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2768
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2769
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2770
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2685
+ .pf-v6-c-check__label {
2686
+ font-size: var(--pf-v6-c-check__label--FontSize);
2687
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2688
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2689
+ color: var(--pf-v6-c-check__label--Color);
2771
2690
  }
2772
2691
 
2773
- .pf-v6-c-label.pf-m-green {
2774
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2775
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2776
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2777
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2778
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2779
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2780
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2781
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2692
+ .pf-v6-c-check__description {
2693
+ grid-column: 2;
2694
+ font-size: var(--pf-v6-c-check__description--FontSize);
2695
+ color: var(--pf-v6-c-check__description--Color);
2782
2696
  }
2783
2697
 
2784
- .pf-v6-c-label.pf-m-teal {
2785
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2786
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2787
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2788
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2789
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2790
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2791
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2792
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2698
+ .pf-v6-c-check__body {
2699
+ grid-column: 2;
2793
2700
  }
2794
2701
 
2795
- .pf-v6-c-label.pf-m-purple {
2796
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2797
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2798
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2799
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2800
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2801
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2802
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2803
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2702
+ .pf-v6-c-check__label,
2703
+ .pf-v6-c-check__input {
2704
+ justify-self: start;
2804
2705
  }
2805
2706
 
2806
- .pf-v6-c-label.pf-m-success {
2807
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2808
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2809
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2810
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2811
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2812
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2813
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2814
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2815
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2816
- --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);
2707
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2708
+ .pf-v6-c-check__input {
2709
+ cursor: pointer;
2817
2710
  }
2818
2711
 
2819
- .pf-v6-c-label.pf-m-warning {
2820
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2821
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2822
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2823
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2824
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2825
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2826
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2827
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2828
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2829
- --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);
2712
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2713
+ .pf-v6-c-check__input:disabled,
2714
+ .pf-v6-c-check__input.pf-m-disabled {
2715
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2716
+ cursor: not-allowed;
2830
2717
  }
2831
2718
 
2832
- .pf-v6-c-label.pf-m-danger {
2833
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2834
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2835
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2836
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2837
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2838
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2839
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2840
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2841
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2842
- --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);
2719
+ .pf-v6-c-check__label-required {
2720
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2721
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2722
+ color: var(--pf-v6-c-check__label-required--Color);
2843
2723
  }
2844
2724
 
2845
- .pf-v6-c-label.pf-m-info {
2846
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2847
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2848
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2849
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2850
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2851
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2852
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2853
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2854
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2855
- --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);
2725
+ .pf-v6-c-divider {
2726
+ --pf-v6-c-divider--Display: flex;
2727
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2728
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2729
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2856
2730
  }
2857
2731
 
2858
- .pf-v6-c-label.pf-m-custom {
2859
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2860
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2861
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2862
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2863
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2864
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2865
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2866
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2867
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2868
- --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);
2732
+ .pf-v6-c-divider {
2733
+ flex-direction: row;
2734
+ width: 100%;
2735
+ height: var(--pf-v6-c-divider--Size);
2736
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2737
+ --pf-v6-hidden-visible--hidden--Display: none;
2738
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2739
+ display: var(--pf-v6-hidden-visible--Display);
2869
2740
  }
2870
2741
 
2871
- .pf-v6-c-label.pf-m-compact {
2872
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2873
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2874
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2875
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2876
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2877
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2878
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2742
+ .pf-v6-c-divider.pf-m-hidden {
2743
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2879
2744
  }
2880
2745
 
2881
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2882
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2746
+ @media screen and (min-width: 36rem) {
2747
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2748
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2749
+ }
2750
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2751
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2752
+ }
2883
2753
  }
2884
-
2885
- .pf-v6-c-label.pf-m-outline {
2886
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2887
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2888
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2889
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2890
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2891
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2892
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2893
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2894
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2895
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2754
+ @media screen and (min-width: 48rem) {
2755
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2756
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2757
+ }
2758
+ .pf-v6-c-divider.pf-m-visible-on-md {
2759
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2760
+ }
2896
2761
  }
2897
-
2898
- .pf-v6-c-label.pf-m-editable {
2899
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2900
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2762
+ @media screen and (min-width: 62rem) {
2763
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2764
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2765
+ }
2766
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2767
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2768
+ }
2769
+ }
2770
+ @media screen and (min-width: 75rem) {
2771
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2772
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2773
+ }
2774
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2775
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2776
+ }
2777
+ }
2778
+ @media screen and (min-width: 90.625rem) {
2779
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2780
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2781
+ }
2782
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2783
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2784
+ }
2785
+ }
2786
+ .pf-v6-c-divider {
2787
+ flex-shrink: 0;
2788
+ align-items: stretch;
2789
+ align-self: stretch;
2790
+ justify-content: center;
2791
+ border: 0;
2901
2792
  }
2902
2793
 
2903
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2904
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2905
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2794
+ .pf-v6-c-divider::before {
2795
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2796
+ content: "";
2797
+ background-color: var(--pf-v6-c-divider--Color);
2798
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2799
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2906
2800
  }
2907
2801
 
2908
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2909
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2910
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2911
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2802
+ .pf-v6-c-divider.pf-m-horizontal {
2803
+ flex-direction: row;
2804
+ width: 100%;
2805
+ height: var(--pf-v6-c-divider--Size);
2912
2806
  }
2913
2807
 
2914
- .pf-v6-c-label.pf-m-editable-active {
2915
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2916
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2917
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2918
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2808
+ .pf-v6-c-divider.pf-m-vertical {
2809
+ flex-direction: column;
2810
+ width: var(--pf-v6-c-divider--Size);
2811
+ height: inherit;
2919
2812
  }
2920
2813
 
2921
- .pf-v6-c-label.pf-m-overflow {
2922
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2923
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2924
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
2814
+ .pf-v6-c-divider.pf-m-inset-none {
2815
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2925
2816
  }
2926
2817
 
2927
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2928
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2929
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2930
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
2818
+ .pf-v6-c-divider.pf-m-inset-xs {
2819
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2931
2820
  }
2932
2821
 
2933
- .pf-v6-c-label.pf-m-add {
2934
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2935
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2936
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2937
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2822
+ .pf-v6-c-divider.pf-m-inset-sm {
2823
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2938
2824
  }
2939
2825
 
2940
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2941
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2942
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2943
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2944
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2826
+ .pf-v6-c-divider.pf-m-inset-md {
2827
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2945
2828
  }
2946
2829
 
2947
- .pf-v6-c-label.pf-m-clickable {
2948
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2830
+ .pf-v6-c-divider.pf-m-inset-lg {
2831
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2949
2832
  }
2950
2833
 
2951
- .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) {
2952
- text-decoration-line: none;
2834
+ .pf-v6-c-divider.pf-m-inset-xl {
2835
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2953
2836
  }
2954
2837
 
2955
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2956
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2957
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2958
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2959
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2960
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2961
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2962
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2838
+ .pf-v6-c-divider.pf-m-inset-2xl {
2839
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2963
2840
  }
2964
2841
 
2965
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2966
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2842
+ .pf-v6-c-divider.pf-m-inset-3xl {
2843
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2967
2844
  }
2968
2845
 
2969
- .pf-v6-c-label.pf-m-disabled {
2970
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2971
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2972
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2973
- --pf-v6-c-label--BorderWidth: 0;
2974
- pointer-events: none;
2846
+ @media (min-width: 36rem) {
2847
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2848
+ flex-direction: row;
2849
+ width: 100%;
2850
+ height: var(--pf-v6-c-divider--Size);
2851
+ }
2975
2852
  }
2976
-
2977
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2978
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2853
+ @media (min-width: 36rem) {
2854
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2855
+ flex-direction: column;
2856
+ width: var(--pf-v6-c-divider--Size);
2857
+ height: inherit;
2858
+ }
2979
2859
  }
2980
-
2981
- .pf-v6-c-label,
2982
- .pf-v6-c-label__content {
2983
- display: inline-flex;
2984
- align-items: center;
2985
- justify-content: center;
2860
+ @media (min-width: 36rem) {
2861
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2862
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2863
+ }
2864
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2865
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2866
+ }
2867
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2868
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2869
+ }
2870
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2871
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2872
+ }
2873
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2874
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2875
+ }
2876
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2877
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2878
+ }
2879
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2880
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2881
+ }
2882
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2883
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2884
+ }
2986
2885
  }
2987
-
2988
- .pf-v6-c-label__text {
2989
- overflow: hidden;
2990
- text-overflow: ellipsis;
2991
- white-space: nowrap;
2992
- max-width: var(--pf-v6-c-label__text--MaxWidth);
2886
+ @media (min-width: 48rem) {
2887
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2888
+ flex-direction: row;
2889
+ width: 100%;
2890
+ height: var(--pf-v6-c-divider--Size);
2891
+ }
2993
2892
  }
2994
-
2995
- .pf-v6-c-label__content {
2996
- gap: var(--pf-v6-c-label__content--Gap);
2997
- max-width: var(--pf-v6-c-label__content--MaxWidth);
2998
- padding: 0;
2999
- overflow: hidden;
3000
- color: var(--pf-v6-c-label--Color);
3001
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
3002
- background: transparent;
3003
- border-width: 0;
2893
+ @media (min-width: 48rem) {
2894
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2895
+ flex-direction: column;
2896
+ width: var(--pf-v6-c-divider--Size);
2897
+ height: inherit;
2898
+ }
3004
2899
  }
3005
-
3006
- .pf-v6-c-label__content::before {
3007
- position: absolute;
3008
- inset: 0;
3009
- z-index: -1;
3010
- pointer-events: none;
3011
- content: "";
3012
- background-color: var(--pf-v6-c-label--BackgroundColor);
3013
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
3014
- border-radius: var(--pf-v6-c-label--BorderRadius);
2900
+ @media (min-width: 48rem) {
2901
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2902
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2903
+ }
2904
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2905
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2906
+ }
2907
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2908
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2909
+ }
2910
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2911
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2912
+ }
2913
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2914
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2915
+ }
2916
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2917
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2918
+ }
2919
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2920
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2921
+ }
2922
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2923
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2924
+ }
3015
2925
  }
3016
-
3017
- input.pf-v6-c-label__content {
3018
- overflow: hidden;
3019
- text-overflow: ellipsis;
3020
- white-space: nowrap;
2926
+ @media (min-width: 62rem) {
2927
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2928
+ flex-direction: row;
2929
+ width: 100%;
2930
+ height: var(--pf-v6-c-divider--Size);
2931
+ }
3021
2932
  }
3022
-
3023
- .pf-v6-c-label__icon {
3024
- color: var(--pf-v6-c-label__icon--Color);
2933
+ @media (min-width: 62rem) {
2934
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2935
+ flex-direction: column;
2936
+ width: var(--pf-v6-c-divider--Size);
2937
+ height: inherit;
2938
+ }
2939
+ }
2940
+ @media (min-width: 62rem) {
2941
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2942
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2943
+ }
2944
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2945
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2946
+ }
2947
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2948
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2949
+ }
2950
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2951
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2952
+ }
2953
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2954
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2955
+ }
2956
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2957
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2958
+ }
2959
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2960
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2961
+ }
2962
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2963
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2964
+ }
2965
+ }
2966
+ @media (min-width: 75rem) {
2967
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2968
+ flex-direction: row;
2969
+ width: 100%;
2970
+ height: var(--pf-v6-c-divider--Size);
2971
+ }
2972
+ }
2973
+ @media (min-width: 75rem) {
2974
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2975
+ flex-direction: column;
2976
+ width: var(--pf-v6-c-divider--Size);
2977
+ height: inherit;
2978
+ }
2979
+ }
2980
+ @media (min-width: 75rem) {
2981
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2982
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2983
+ }
2984
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2985
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2986
+ }
2987
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2988
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2989
+ }
2990
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2991
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2992
+ }
2993
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2994
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2995
+ }
2996
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2997
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2998
+ }
2999
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
3000
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3001
+ }
3002
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
3003
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3004
+ }
3025
3005
  }
3026
-
3027
- .pf-v6-c-label__actions {
3028
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
3006
+ @media (min-width: 90.625rem) {
3007
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
3008
+ flex-direction: row;
3009
+ width: 100%;
3010
+ height: var(--pf-v6-c-divider--Size);
3011
+ }
3029
3012
  }
3030
-
3031
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
3032
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
3013
+ @media (min-width: 90.625rem) {
3014
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
3015
+ flex-direction: column;
3016
+ width: var(--pf-v6-c-divider--Size);
3017
+ height: inherit;
3018
+ }
3033
3019
  }
3034
-
3035
- .pf-v6-c-label__actions .pf-v6-c-button {
3036
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
3037
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
3038
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
3039
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
3040
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
3041
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
3042
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
3043
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
3020
+ @media (min-width: 90.625rem) {
3021
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
3022
+ --pf-v6-c-divider--before--FlexBasis: 100%;
3023
+ }
3024
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
3025
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
3026
+ }
3027
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
3028
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
3029
+ }
3030
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
3031
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3032
+ }
3033
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
3034
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3035
+ }
3036
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
3037
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3038
+ }
3039
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
3040
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3041
+ }
3042
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
3043
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3044
+ }
3044
3045
  }
3045
-
3046
3046
  .pf-v6-c-menu {
3047
3047
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs);
3048
3048
  --pf-v6-c-menu--Width: auto;
@@ -3866,97 +3866,6 @@ button.pf-v6-c-breadcrumb__link {
3866
3866
  display: none;
3867
3867
  }
3868
3868
 
3869
- .pf-v6-c-spinner {
3870
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3871
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3872
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3873
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3874
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3875
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3876
- --pf-v6-c-spinner--StrokeWidth: 10;
3877
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3878
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3879
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3880
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3881
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3882
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3883
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3884
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3885
- }
3886
-
3887
- .pf-v6-c-spinner {
3888
- width: var(--pf-v6-c-spinner--Width);
3889
- height: var(--pf-v6-c-spinner--Height);
3890
- overflow: hidden;
3891
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3892
- }
3893
-
3894
- .pf-v6-c-spinner.pf-m-inline {
3895
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3896
- }
3897
-
3898
- .pf-v6-c-spinner.pf-m-xs {
3899
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3900
- --pf-v6-c-spinner--StrokeWidth: 15;
3901
- }
3902
-
3903
- .pf-v6-c-spinner.pf-m-sm {
3904
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3905
- }
3906
-
3907
- .pf-v6-c-spinner.pf-m-md {
3908
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3909
- }
3910
-
3911
- .pf-v6-c-spinner.pf-m-lg {
3912
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3913
- }
3914
-
3915
- .pf-v6-c-spinner.pf-m-xl {
3916
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3917
- }
3918
-
3919
- .pf-v6-m-no-motion .pf-v6-c-spinner {
3920
- --pf-v6-c-spinner--AnimationDuration: 0s;
3921
- }
3922
-
3923
- .pf-v6-c-spinner__path {
3924
- width: 100%;
3925
- height: 100%;
3926
- stroke: var(--pf-v6-c-spinner--Color);
3927
- stroke-dasharray: 283;
3928
- stroke-dashoffset: 280;
3929
- stroke-linecap: round;
3930
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3931
- transform-origin: 50% 50%;
3932
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3933
- }
3934
-
3935
- @keyframes pf-v6-c-spinner-animation-rotate {
3936
- 0% {
3937
- transform: rotate(0deg);
3938
- }
3939
- 100% {
3940
- transform: rotate(360deg);
3941
- }
3942
- }
3943
- @keyframes pf-v6-c-spinner-animation-dash {
3944
- 0% {
3945
- stroke-dashoffset: 280;
3946
- transform: rotate(0);
3947
- }
3948
- 15% {
3949
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3950
- }
3951
- 40% {
3952
- stroke-dasharray: 220;
3953
- stroke-dashoffset: 150;
3954
- }
3955
- 100% {
3956
- stroke-dashoffset: 280;
3957
- transform: rotate(720deg);
3958
- }
3959
- }
3960
3869
  .pf-v6-c-tooltip {
3961
3870
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3962
3871
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -4086,4 +3995,96 @@ button.pf-v6-c-breadcrumb__link {
4086
3995
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
4087
3996
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
4088
3997
  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));
3998
+ }
3999
+
4000
+ .pf-v6-c-spinner {
4001
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
4002
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
4003
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
4004
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
4005
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
4006
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
4007
+ --pf-v6-c-spinner--StrokeWidth: 10;
4008
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
4009
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
4010
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
4011
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
4012
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
4013
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
4014
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
4015
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
4016
+ }
4017
+
4018
+ .pf-v6-c-spinner {
4019
+ width: var(--pf-v6-c-spinner--Width);
4020
+ height: var(--pf-v6-c-spinner--Height);
4021
+ overflow: hidden;
4022
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
4023
+ }
4024
+
4025
+ .pf-v6-c-spinner.pf-m-inline {
4026
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
4027
+ }
4028
+
4029
+ .pf-v6-c-spinner.pf-m-xs {
4030
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
4031
+ --pf-v6-c-spinner--StrokeWidth: 15;
4032
+ }
4033
+
4034
+ .pf-v6-c-spinner.pf-m-sm {
4035
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
4036
+ }
4037
+
4038
+ .pf-v6-c-spinner.pf-m-md {
4039
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
4040
+ }
4041
+
4042
+ .pf-v6-c-spinner.pf-m-lg {
4043
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
4044
+ }
4045
+
4046
+ .pf-v6-c-spinner.pf-m-xl {
4047
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
4048
+ }
4049
+
4050
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
4051
+ --pf-v6-c-spinner--AnimationDuration: 0s;
4052
+ }
4053
+
4054
+ .pf-v6-c-spinner__path {
4055
+ width: 100%;
4056
+ height: 100%;
4057
+ stroke: var(--pf-v6-c-spinner--Color);
4058
+ stroke-dasharray: 283;
4059
+ stroke-dashoffset: 280;
4060
+ stroke-linecap: round;
4061
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
4062
+ transform-origin: 50% 50%;
4063
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
4064
+ }
4065
+
4066
+ @keyframes pf-v6-c-spinner-animation-rotate {
4067
+ 0% {
4068
+ transform: rotate(0deg);
4069
+ }
4070
+ 100% {
4071
+ transform: rotate(360deg);
4072
+ }
4073
+ }
4074
+ @keyframes pf-v6-c-spinner-animation-dash {
4075
+ 0% {
4076
+ stroke-dashoffset: 280;
4077
+ transform: rotate(0);
4078
+ }
4079
+ 15% {
4080
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
4081
+ }
4082
+ 40% {
4083
+ stroke-dasharray: 220;
4084
+ stroke-dashoffset: 150;
4085
+ }
4086
+ 100% {
4087
+ stroke-dashoffset: 280;
4088
+ transform: rotate(720deg);
4089
+ }
4089
4090
  }