@patternfly/react-templates 6.6.1-prerelease.5 → 6.6.1-prerelease.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-DTqjm7tW.css → output-DP2Lb7a0.css} +1374 -1373
  6. package/package.json +3 -3
package/dist/umd/assets/{output-DTqjm7tW.css → output-DP2Lb7a0.css} RENAMED
@@ -605,406 +605,327 @@
605
605
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
606
606
  }
607
607
 
608
- .pf-v6-c-text-input-group {
609
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
610
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
611
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
612
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
613
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
614
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
615
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
616
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
617
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
618
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
619
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
620
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
621
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
622
- --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));
623
- --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));
624
- --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));
625
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
626
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
627
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
628
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
629
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
630
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
631
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
632
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
633
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
634
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
635
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
636
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
637
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
638
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
639
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
640
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
641
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
642
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
643
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
644
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
645
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
646
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
647
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
648
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
649
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
650
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
651
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
652
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
653
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
654
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
655
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
656
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
657
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
658
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
659
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
608
+ .pf-v6-c-divider {
609
+ --pf-v6-c-divider--Display: flex;
610
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
611
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
612
+ --pf-v6-c-divider--before--FlexBasis: 100%;
660
613
  }
661
614
 
662
- .pf-v6-c-text-input-group {
663
- position: relative;
664
- display: flex;
615
+ .pf-v6-c-divider {
616
+ flex-direction: row;
665
617
  width: 100%;
666
- font-size: var(--pf-v6-c-text-input-group__FontSize);
667
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
668
- color: var(--pf-v6-c-text-input-group--Color, inherit);
669
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
670
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
671
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
672
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
673
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
674
- }
675
-
676
- .pf-v6-c-text-input-group::before {
677
- position: absolute;
678
- inset: 0;
679
- pointer-events: none;
680
- content: "";
681
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
682
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
683
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
684
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
685
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
686
- }
687
-
688
- .pf-v6-c-text-input-group.pf-m-disabled {
689
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
690
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
691
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
692
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
693
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
694
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
695
- pointer-events: none;
618
+ height: var(--pf-v6-c-divider--Size);
619
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
620
+ --pf-v6-hidden-visible--hidden--Display: none;
621
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
622
+ display: var(--pf-v6-hidden-visible--Display);
696
623
  }
697
624
 
698
- .pf-v6-c-text-input-group.pf-m-plain {
699
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
625
+ .pf-v6-c-divider.pf-m-hidden {
626
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
700
627
  }
701
628
 
702
- .pf-v6-c-text-input-group.pf-m-plain::before {
703
- border: 0;
629
+ @media screen and (min-width: 36rem) {
630
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
631
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
632
+ }
633
+ .pf-v6-c-divider.pf-m-visible-on-sm {
634
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
635
+ }
704
636
  }
705
-
706
- .pf-v6-c-text-input-group.pf-m-success {
707
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
708
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
709
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
637
+ @media screen and (min-width: 48rem) {
638
+ .pf-v6-c-divider.pf-m-hidden-on-md {
639
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
640
+ }
641
+ .pf-v6-c-divider.pf-m-visible-on-md {
642
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
643
+ }
710
644
  }
711
-
712
- .pf-v6-c-text-input-group.pf-m-warning {
713
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
714
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
715
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
645
+ @media screen and (min-width: 62rem) {
646
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
647
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
648
+ }
649
+ .pf-v6-c-divider.pf-m-visible-on-lg {
650
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
651
+ }
716
652
  }
717
-
718
- .pf-v6-c-text-input-group.pf-m-error {
719
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
720
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
721
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
653
+ @media screen and (min-width: 75rem) {
654
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
655
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
656
+ }
657
+ .pf-v6-c-divider.pf-m-visible-on-xl {
658
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
659
+ }
722
660
  }
723
-
724
- @media (prefers-reduced-motion: no-preference) {
725
- .pf-v6-c-text-input-group.pf-m-error {
726
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
727
- animation-name: pf-v6-global-danger-jiggle-motion;
728
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
729
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
730
- animation-fill-mode: both;
661
+ @media screen and (min-width: 90.625rem) {
662
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
663
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
664
+ }
665
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
666
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
731
667
  }
732
668
  }
733
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
734
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
735
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
736
- animation-name: pf-v6-global-fade-in;
737
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
738
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
669
+ .pf-v6-c-divider {
670
+ flex-shrink: 0;
671
+ align-items: stretch;
672
+ align-self: stretch;
673
+ justify-content: center;
674
+ border: 0;
739
675
  }
740
676
 
741
- .pf-v6-c-text-input-group:hover {
742
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
677
+ .pf-v6-c-divider::before {
678
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
679
+ content: "";
680
+ background-color: var(--pf-v6-c-divider--Color);
681
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
682
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
743
683
  }
744
684
 
745
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
746
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
685
+ .pf-v6-c-divider.pf-m-horizontal {
686
+ flex-direction: row;
687
+ width: 100%;
688
+ height: var(--pf-v6-c-divider--Size);
747
689
  }
748
690
 
749
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
750
- --pf-v6-c-text-input-group__text--Position: relative;
691
+ .pf-v6-c-divider.pf-m-vertical {
692
+ flex-direction: column;
693
+ width: var(--pf-v6-c-divider--Size);
694
+ height: inherit;
751
695
  }
752
696
 
753
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
754
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
755
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
697
+ .pf-v6-c-divider.pf-m-inset-none {
698
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
756
699
  }
757
700
 
758
- .pf-v6-c-text-input-group__main {
759
- display: flex;
760
- flex: 1;
761
- flex-wrap: wrap;
762
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
763
- min-width: 0;
701
+ .pf-v6-c-divider.pf-m-inset-xs {
702
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
764
703
  }
765
704
 
766
- .pf-v6-c-text-input-group__main.pf-m-icon {
767
- --pf-v6-c-text-input-group__text--Position: relative;
768
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
769
- display: inline-flex;
770
- align-items: center;
771
- justify-content: center;
772
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
705
+ .pf-v6-c-divider.pf-m-inset-sm {
706
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
773
707
  }
774
708
 
775
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
776
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
709
+ .pf-v6-c-divider.pf-m-inset-md {
710
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
777
711
  }
778
712
 
779
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
780
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
781
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
782
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
713
+ .pf-v6-c-divider.pf-m-inset-lg {
714
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
783
715
  }
784
716
 
785
- .pf-v6-c-text-input-group__text {
786
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
787
- display: inline-grid;
788
- flex: 1;
789
- grid-template-areas: "text-input";
790
- grid-template-columns: 1fr;
717
+ .pf-v6-c-divider.pf-m-inset-xl {
718
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
791
719
  }
792
720
 
793
- .pf-v6-c-text-input-group__icon {
794
- position: absolute;
795
- inset-block-start: 50%;
796
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
797
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
798
- color: var(--pf-v6-c-text-input-group__icon--Color);
799
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
721
+ .pf-v6-c-divider.pf-m-inset-2xl {
722
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
800
723
  }
801
724
 
802
- .pf-v6-c-text-input-group__icon.pf-m-status {
803
- inset-inline-start: auto;
804
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
805
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
725
+ .pf-v6-c-divider.pf-m-inset-3xl {
726
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
806
727
  }
807
728
 
808
- .pf-v6-c-text-input-group__text-input {
809
- overflow: hidden;
810
- text-overflow: ellipsis;
811
- white-space: nowrap;
812
- position: relative;
813
- width: 100%;
814
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
815
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
816
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
817
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
818
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
819
- color: var(--pf-v6-c-text-input-group__text-input--Color);
820
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
821
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
822
- border: 0;
729
+ @media (min-width: 36rem) {
730
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
731
+ flex-direction: row;
732
+ width: 100%;
733
+ height: var(--pf-v6-c-divider--Size);
734
+ }
823
735
  }
824
-
825
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
826
- grid-area: text-input;
736
+ @media (min-width: 36rem) {
737
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
738
+ flex-direction: column;
739
+ width: var(--pf-v6-c-divider--Size);
740
+ height: inherit;
741
+ }
827
742
  }
828
-
829
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
830
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
743
+ @media (min-width: 36rem) {
744
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
745
+ --pf-v6-c-divider--before--FlexBasis: 100%;
746
+ }
747
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
748
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
749
+ }
750
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
751
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
752
+ }
753
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
754
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
755
+ }
756
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
757
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
758
+ }
759
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
760
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
761
+ }
762
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
763
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
764
+ }
765
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
766
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
767
+ }
831
768
  }
832
-
833
- .pf-v6-c-text-input-group__text-input::placeholder {
834
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
769
+ @media (min-width: 48rem) {
770
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
771
+ flex-direction: row;
772
+ width: 100%;
773
+ height: var(--pf-v6-c-divider--Size);
774
+ }
835
775
  }
836
-
837
- .pf-v6-c-text-input-group__utilities {
838
- display: flex;
839
- align-items: center;
840
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
841
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
776
+ @media (min-width: 48rem) {
777
+ .pf-v6-c-divider.pf-m-vertical-on-md {
778
+ flex-direction: column;
779
+ width: var(--pf-v6-c-divider--Size);
780
+ height: inherit;
781
+ }
842
782
  }
843
-
844
- .pf-v6-c-text-input-group__utilities > * + * {
845
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
783
+ @media (min-width: 48rem) {
784
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
785
+ --pf-v6-c-divider--before--FlexBasis: 100%;
786
+ }
787
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
788
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
789
+ }
790
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
791
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
792
+ }
793
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
794
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
795
+ }
796
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
797
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
798
+ }
799
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
800
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
801
+ }
802
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
803
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
804
+ }
805
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
806
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
807
+ }
846
808
  }
847
-
848
- .pf-v6-c-text-input-group__group {
849
- display: flex;
809
+ @media (min-width: 62rem) {
810
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
811
+ flex-direction: row;
812
+ width: 100%;
813
+ height: var(--pf-v6-c-divider--Size);
814
+ }
850
815
  }
851
-
852
- .pf-v6-c-label-group {
853
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
854
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
855
- --pf-v6-c-label-group--MaxWidth: 100%;
856
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
857
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
858
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
859
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
860
- --pf-v6-c-label-group__main--MaxWidth: 100%;
861
- --pf-v6-c-label-group__main--MinWidth: 0;
862
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
863
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
864
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
865
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
866
- --pf-v6-c-label-group__list--MaxWidth: 100%;
867
- --pf-v6-c-label-group__list--MinWidth: 0;
868
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
869
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
870
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
871
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
872
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
873
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
874
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
875
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
876
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
877
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
878
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
879
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
880
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
881
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
882
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
883
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
884
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
885
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
886
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
887
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
888
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
889
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
816
+ @media (min-width: 62rem) {
817
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
818
+ flex-direction: column;
819
+ width: var(--pf-v6-c-divider--Size);
820
+ height: inherit;
821
+ }
890
822
  }
891
-
892
- .pf-v6-c-label-group {
893
- display: inline-flex;
894
- row-gap: var(--pf-v6-c-label-group--RowGap);
895
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
896
- align-items: center;
897
- max-width: var(--pf-v6-c-label-group--MaxWidth);
823
+ @media (min-width: 62rem) {
824
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
825
+ --pf-v6-c-divider--before--FlexBasis: 100%;
826
+ }
827
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
828
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
829
+ }
830
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
831
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
832
+ }
833
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
834
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
835
+ }
836
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
837
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
838
+ }
839
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
840
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
841
+ }
842
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
843
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
844
+ }
845
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
846
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
847
+ }
898
848
  }
899
-
900
- .pf-v6-c-label-group.pf-m-category {
901
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
902
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
903
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
904
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
905
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
906
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
907
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
849
+ @media (min-width: 75rem) {
850
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
851
+ flex-direction: row;
852
+ width: 100%;
853
+ height: var(--pf-v6-c-divider--Size);
854
+ }
908
855
  }
909
-
910
- .pf-v6-c-label-group.pf-m-vertical {
911
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
912
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
913
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
914
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
915
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
916
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
917
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
856
+ @media (min-width: 75rem) {
857
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
858
+ flex-direction: column;
859
+ width: var(--pf-v6-c-divider--Size);
860
+ height: inherit;
861
+ }
918
862
  }
919
-
920
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
921
- align-items: flex-start;
863
+ @media (min-width: 75rem) {
864
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
865
+ --pf-v6-c-divider--before--FlexBasis: 100%;
866
+ }
867
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
868
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
869
+ }
870
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
871
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
872
+ }
873
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
874
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
875
+ }
876
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
877
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
878
+ }
879
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
880
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
881
+ }
882
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
883
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
884
+ }
885
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
886
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
887
+ }
922
888
  }
923
-
924
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
925
- flex-direction: column;
926
- align-items: flex-start;
927
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
889
+ @media (min-width: 90.625rem) {
890
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
891
+ flex-direction: row;
892
+ width: 100%;
893
+ height: var(--pf-v6-c-divider--Size);
894
+ }
928
895
  }
929
-
930
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
931
- flex-direction: column;
932
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
933
- }
934
-
935
- .pf-v6-c-label-group.pf-m-editable,
936
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
937
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
938
- display: flex;
939
- }
940
-
941
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
942
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
943
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
944
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
945
- flex: 1;
946
- }
947
-
948
- .pf-v6-c-label-group__main {
949
- display: flex;
950
- flex: 1;
951
- flex-wrap: wrap;
952
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
953
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
954
- align-items: baseline;
955
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
956
- }
957
-
958
- .pf-v6-c-label-group__list {
959
- display: inline-flex;
960
- flex-wrap: wrap;
961
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
962
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
963
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
964
- }
965
-
966
- .pf-v6-c-label-group__list-item {
967
- display: inline-flex;
968
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
969
- }
970
-
971
- .pf-v6-c-label-group__label {
972
- overflow: hidden;
973
- text-overflow: ellipsis;
974
- white-space: nowrap;
975
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
976
- }
977
-
978
- .pf-v6-c-label-group__close {
979
- display: flex;
980
- align-self: flex-start;
981
- }
982
-
983
- .pf-v6-c-label-group__close .pf-v6-c-button {
984
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
985
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
986
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
987
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
988
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
989
- }
990
-
991
- .pf-v6-c-label-group__textarea {
992
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
993
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
994
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
995
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
996
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
997
- white-space: nowrap;
998
- resize: none;
999
- scrollbar-width: none;
1000
- -ms-overflow-style: none;
1001
- border: 0;
896
+ @media (min-width: 90.625rem) {
897
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
898
+ flex-direction: column;
899
+ width: var(--pf-v6-c-divider--Size);
900
+ height: inherit;
901
+ }
1002
902
  }
1003
-
1004
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1005
- display: none;
903
+ @media (min-width: 90.625rem) {
904
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
905
+ --pf-v6-c-divider--before--FlexBasis: 100%;
906
+ }
907
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
908
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
909
+ }
910
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
911
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
912
+ }
913
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
914
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
915
+ }
916
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
917
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
918
+ }
919
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
920
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
921
+ }
922
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
923
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
924
+ }
925
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
926
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
927
+ }
1006
928
  }
1007
-
1008
929
  .pf-v6-c-label {
1009
930
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1010
931
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -1192,844 +1113,522 @@
1192
1113
  --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1193
1114
  --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1194
1115
  --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1195
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
1196
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1197
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1198
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1199
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1200
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1201
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1202
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1203
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1204
- }
1205
-
1206
- .pf-v6-c-label {
1207
- position: relative;
1208
- gap: var(--pf-v6-c-label--Gap);
1209
- min-width: var(--pf-v6-c-label--MinWidth);
1210
- max-width: var(--pf-v6-c-label--MaxWidth);
1211
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1212
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1213
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1214
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1215
- font-size: var(--pf-v6-c-label--FontSize);
1216
- white-space: nowrap;
1217
- background: transparent;
1218
- border: 0;
1219
- border-radius: var(--pf-v6-c-label--BorderRadius);
1220
- isolation: isolate;
1221
- }
1222
-
1223
- .pf-v6-c-label.pf-m-blue {
1224
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1225
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1226
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1227
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1228
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1229
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1230
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1231
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1232
- }
1233
-
1234
- .pf-v6-c-label.pf-m-red {
1235
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1236
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1237
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1238
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1239
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1240
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1241
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1242
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1243
- }
1244
-
1245
- .pf-v6-c-label.pf-m-orange {
1246
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1247
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1248
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1249
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1250
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1251
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1252
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1253
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1254
- }
1255
-
1256
- .pf-v6-c-label.pf-m-orangered {
1257
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1258
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1259
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1260
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1261
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1262
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1263
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1264
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1265
- }
1266
-
1267
- .pf-v6-c-label.pf-m-yellow {
1268
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1269
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1270
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1271
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1272
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1273
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1274
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1275
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1276
- }
1277
-
1278
- .pf-v6-c-label.pf-m-green {
1279
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1280
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1281
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1282
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1283
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1284
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1285
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1286
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1287
- }
1288
-
1289
- .pf-v6-c-label.pf-m-teal {
1290
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1291
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1292
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1293
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1294
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1295
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1296
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1297
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1298
- }
1299
-
1300
- .pf-v6-c-label.pf-m-purple {
1301
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1302
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1303
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1304
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1305
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1306
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1307
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1308
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1309
- }
1310
-
1311
- .pf-v6-c-label.pf-m-success {
1312
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1313
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1314
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1315
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1316
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1317
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1318
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1319
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1320
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1321
- --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);
1322
- }
1323
-
1324
- .pf-v6-c-label.pf-m-warning {
1325
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1326
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1327
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1328
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1329
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1330
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1331
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1332
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1333
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1334
- --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);
1335
- }
1336
-
1337
- .pf-v6-c-label.pf-m-danger {
1338
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1339
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1340
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1341
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1342
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1343
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1344
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1345
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1346
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1347
- --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);
1348
- }
1349
-
1350
- .pf-v6-c-label.pf-m-info {
1351
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1352
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1353
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1354
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1355
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1356
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1357
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1358
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1359
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1360
- --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);
1361
- }
1362
-
1363
- .pf-v6-c-label.pf-m-custom {
1364
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1365
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1366
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1367
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1368
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1369
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1370
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1371
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1372
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1373
- --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);
1374
- }
1375
-
1376
- .pf-v6-c-label.pf-m-compact {
1377
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1378
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1379
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1380
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1381
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1382
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1383
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1384
- }
1385
-
1386
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1387
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1388
- }
1389
-
1390
- .pf-v6-c-label.pf-m-outline {
1391
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1392
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1393
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1394
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1395
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1396
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1397
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1398
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1399
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1400
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1401
- }
1402
-
1403
- .pf-v6-c-label.pf-m-editable {
1404
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1405
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1406
- }
1407
-
1408
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1409
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1410
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1411
- }
1412
-
1413
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1414
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1415
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1416
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1417
- }
1418
-
1419
- .pf-v6-c-label.pf-m-editable-active {
1420
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1421
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1422
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1423
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1424
- }
1425
-
1426
- .pf-v6-c-label.pf-m-overflow {
1427
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1428
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1429
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1430
- }
1431
-
1432
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1433
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1434
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1435
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1436
- }
1437
-
1438
- .pf-v6-c-label.pf-m-add {
1439
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1440
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1441
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1442
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1443
- }
1444
-
1445
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1446
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1447
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1448
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1449
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1450
- }
1451
-
1452
- .pf-v6-c-label.pf-m-clickable {
1453
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1454
- }
1455
-
1456
- .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) {
1457
- text-decoration-line: none;
1458
- }
1459
-
1460
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1461
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1462
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1463
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1464
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1465
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1466
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1467
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1468
- }
1469
-
1470
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1471
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1472
- }
1473
-
1474
- .pf-v6-c-label.pf-m-disabled {
1475
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1476
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1477
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1478
- --pf-v6-c-label--BorderWidth: 0;
1479
- pointer-events: none;
1480
- }
1481
-
1482
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1483
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1484
- }
1485
-
1486
- .pf-v6-c-label,
1487
- .pf-v6-c-label__content {
1488
- display: inline-flex;
1489
- align-items: center;
1490
- justify-content: center;
1491
- }
1492
-
1493
- .pf-v6-c-label__text {
1494
- overflow: hidden;
1495
- text-overflow: ellipsis;
1496
- white-space: nowrap;
1497
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1498
- }
1499
-
1500
- .pf-v6-c-label__content {
1501
- gap: var(--pf-v6-c-label__content--Gap);
1502
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1503
- padding: 0;
1504
- overflow: hidden;
1505
- color: var(--pf-v6-c-label--Color);
1506
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1507
- background: transparent;
1508
- border-width: 0;
1509
- }
1510
-
1511
- .pf-v6-c-label__content::before {
1512
- position: absolute;
1513
- inset: 0;
1514
- z-index: -1;
1515
- content: "";
1516
- background-color: var(--pf-v6-c-label--BackgroundColor);
1517
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1518
- border-radius: var(--pf-v6-c-label--BorderRadius);
1519
- }
1520
-
1521
- input.pf-v6-c-label__content {
1522
- overflow: hidden;
1523
- text-overflow: ellipsis;
1524
- white-space: nowrap;
1525
- }
1526
-
1527
- .pf-v6-c-label__icon {
1528
- color: var(--pf-v6-c-label__icon--Color);
1529
- }
1530
-
1531
- .pf-v6-c-label__actions {
1532
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1116
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
1117
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1118
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1119
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1120
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1121
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1122
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1123
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1124
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1533
1125
  }
1534
1126
 
1535
- .pf-v6-c-label .pf-v6-c-label__actions .pf-v6-c-button {
1127
+ .pf-v6-c-label {
1128
+ position: relative;
1129
+ gap: var(--pf-v6-c-label--Gap);
1130
+ min-width: var(--pf-v6-c-label--MinWidth);
1131
+ max-width: var(--pf-v6-c-label--MaxWidth);
1536
1132
  padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1537
1133
  padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1134
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1538
1135
  padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1539
- margin-block-start: calc(var(--pf-v6-c-label--PaddingBlockStart) * -1);
1540
- margin-block-end: calc(var(--pf-v6-c-label--PaddingBlockEnd) * -1);
1541
- margin-inline-end: calc(var(--pf-v6-c-label--PaddingInlineEnd) * -1);
1542
- border-start-end-radius: var(--pf-v6-c-label--BorderRadius);
1543
- border-end-end-radius: var(--pf-v6-c-label--BorderRadius);
1136
+ font-size: var(--pf-v6-c-label--FontSize);
1137
+ white-space: nowrap;
1138
+ background: transparent;
1139
+ border: 0;
1140
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1141
+ isolation: isolate;
1544
1142
  }
1545
1143
 
1546
- .pf-v6-c-label__actions .pf-v6-c-button {
1547
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1548
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1549
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1550
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1551
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1552
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1553
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1554
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1144
+ .pf-v6-c-label.pf-m-blue {
1145
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1146
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1147
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1148
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1149
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1150
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1151
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1152
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1555
1153
  }
1556
1154
 
1557
- .pf-v6-c-badge {
1558
- --pf-v6-c-badge--BorderColor: transparent;
1559
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1560
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1561
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1562
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1563
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1564
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1565
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1566
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1567
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1568
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1569
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1570
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1571
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1572
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1573
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1574
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1575
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1576
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1577
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1578
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1155
+ .pf-v6-c-label.pf-m-red {
1156
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1157
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1158
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1159
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1160
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1161
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1162
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1163
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1579
1164
  }
1580
1165
 
1581
- .pf-v6-c-badge {
1582
- position: relative;
1583
- display: inline-block;
1584
- min-width: var(--pf-v6-c-badge--MinWidth);
1585
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1586
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1587
- font-size: var(--pf-v6-c-badge--FontSize);
1588
- font-weight: var(--pf-v6-c-badge--FontWeight);
1589
- color: var(--pf-v6-c-badge--Color);
1590
- text-align: center;
1591
- white-space: nowrap;
1592
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1593
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1166
+ .pf-v6-c-label.pf-m-orange {
1167
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1168
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1169
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1170
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1171
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1172
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1173
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1174
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1594
1175
  }
1595
1176
 
1596
- .pf-v6-c-badge::after {
1597
- position: absolute;
1598
- inset: 0;
1599
- pointer-events: none;
1600
- content: "";
1601
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1602
- border-radius: inherit;
1177
+ .pf-v6-c-label.pf-m-orangered {
1178
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1179
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1180
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1181
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1182
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1183
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1184
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1185
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1603
1186
  }
1604
1187
 
1605
- .pf-v6-c-badge.pf-m-read {
1606
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
1607
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1608
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1609
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1188
+ .pf-v6-c-label.pf-m-yellow {
1189
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1190
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1191
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1192
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1193
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1194
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1195
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1196
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1610
1197
  }
1611
1198
 
1612
- .pf-v6-c-badge.pf-m-unread {
1613
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1614
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1615
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1199
+ .pf-v6-c-label.pf-m-green {
1200
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1201
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1202
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1203
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1204
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1205
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1206
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1207
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1616
1208
  }
1617
1209
 
1618
- .pf-v6-c-badge.pf-m-disabled {
1619
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1620
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1210
+ .pf-v6-c-label.pf-m-teal {
1211
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1212
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1213
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1214
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1215
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1216
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1217
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1218
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1621
1219
  }
1622
1220
 
1623
- .pf-v6-c-badge.pf-m-disabled::after {
1624
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1221
+ .pf-v6-c-label.pf-m-purple {
1222
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1223
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1224
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1225
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1226
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1227
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1228
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1229
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1625
1230
  }
1626
1231
 
1627
- .pf-v6-c-badge__toggle-icon {
1628
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1629
- color: var(--pf-v6-c-badge__toggle-icon--Color);
1232
+ .pf-v6-c-label.pf-m-success {
1233
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1234
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1235
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1236
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1237
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1238
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1239
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1240
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1241
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1242
+ --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);
1630
1243
  }
1631
1244
 
1632
- .pf-v6-c-divider {
1633
- --pf-v6-c-divider--Display: flex;
1634
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1635
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1636
- --pf-v6-c-divider--before--FlexBasis: 100%;
1245
+ .pf-v6-c-label.pf-m-warning {
1246
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1247
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1248
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1249
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1250
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1251
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1252
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1253
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1254
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1255
+ --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);
1637
1256
  }
1638
1257
 
1639
- .pf-v6-c-divider {
1640
- flex-direction: row;
1641
- width: 100%;
1642
- height: var(--pf-v6-c-divider--Size);
1643
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1644
- --pf-v6-hidden-visible--hidden--Display: none;
1645
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1646
- display: var(--pf-v6-hidden-visible--Display);
1258
+ .pf-v6-c-label.pf-m-danger {
1259
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1260
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1261
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1262
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1263
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1264
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1265
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1266
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1267
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1268
+ --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);
1647
1269
  }
1648
1270
 
1649
- .pf-v6-c-divider.pf-m-hidden {
1650
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1271
+ .pf-v6-c-label.pf-m-info {
1272
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1273
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1274
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1275
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1276
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1277
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1278
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1279
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1280
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1281
+ --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);
1651
1282
  }
1652
1283
 
1653
- @media screen and (min-width: 36rem) {
1654
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1655
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1656
- }
1657
- .pf-v6-c-divider.pf-m-visible-on-sm {
1658
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1659
- }
1660
- }
1661
- @media screen and (min-width: 48rem) {
1662
- .pf-v6-c-divider.pf-m-hidden-on-md {
1663
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1664
- }
1665
- .pf-v6-c-divider.pf-m-visible-on-md {
1666
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1667
- }
1668
- }
1669
- @media screen and (min-width: 62rem) {
1670
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1671
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1672
- }
1673
- .pf-v6-c-divider.pf-m-visible-on-lg {
1674
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1675
- }
1284
+ .pf-v6-c-label.pf-m-custom {
1285
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1286
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1287
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1288
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1289
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1290
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1291
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1292
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1293
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1294
+ --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);
1676
1295
  }
1677
- @media screen and (min-width: 75rem) {
1678
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1679
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1680
- }
1681
- .pf-v6-c-divider.pf-m-visible-on-xl {
1682
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1683
- }
1296
+
1297
+ .pf-v6-c-label.pf-m-compact {
1298
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1299
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1300
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1301
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1302
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1303
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1304
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1684
1305
  }
1685
- @media screen and (min-width: 90.625rem) {
1686
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1687
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1688
- }
1689
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1690
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1691
- }
1306
+
1307
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1308
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1692
1309
  }
1693
- .pf-v6-c-divider {
1694
- flex-shrink: 0;
1695
- align-items: stretch;
1696
- align-self: stretch;
1697
- justify-content: center;
1698
- border: 0;
1310
+
1311
+ .pf-v6-c-label.pf-m-outline {
1312
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1313
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1314
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1315
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1316
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1317
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1318
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1319
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1320
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1321
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1699
1322
  }
1700
1323
 
1701
- .pf-v6-c-divider::before {
1702
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1703
- content: "";
1704
- background-color: var(--pf-v6-c-divider--Color);
1705
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1706
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1324
+ .pf-v6-c-label.pf-m-editable {
1325
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1326
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1707
1327
  }
1708
1328
 
1709
- .pf-v6-c-divider.pf-m-horizontal {
1710
- flex-direction: row;
1711
- width: 100%;
1712
- height: var(--pf-v6-c-divider--Size);
1329
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1330
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1331
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1713
1332
  }
1714
1333
 
1715
- .pf-v6-c-divider.pf-m-vertical {
1716
- flex-direction: column;
1717
- width: var(--pf-v6-c-divider--Size);
1718
- height: inherit;
1334
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1335
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1336
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1337
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1719
1338
  }
1720
1339
 
1721
- .pf-v6-c-divider.pf-m-inset-none {
1722
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1340
+ .pf-v6-c-label.pf-m-editable-active {
1341
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1342
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1343
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1344
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1723
1345
  }
1724
1346
 
1725
- .pf-v6-c-divider.pf-m-inset-xs {
1726
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1347
+ .pf-v6-c-label.pf-m-overflow {
1348
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1349
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1350
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1727
1351
  }
1728
1352
 
1729
- .pf-v6-c-divider.pf-m-inset-sm {
1730
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1353
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1354
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1355
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1356
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1731
1357
  }
1732
1358
 
1733
- .pf-v6-c-divider.pf-m-inset-md {
1734
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1359
+ .pf-v6-c-label.pf-m-add {
1360
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1361
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1362
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1363
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1735
1364
  }
1736
1365
 
1737
- .pf-v6-c-divider.pf-m-inset-lg {
1738
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1366
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1367
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1368
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1369
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1370
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1739
1371
  }
1740
1372
 
1741
- .pf-v6-c-divider.pf-m-inset-xl {
1742
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1373
+ .pf-v6-c-label.pf-m-clickable {
1374
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1743
1375
  }
1744
1376
 
1745
- .pf-v6-c-divider.pf-m-inset-2xl {
1746
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1377
+ .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) {
1378
+ text-decoration-line: none;
1747
1379
  }
1748
1380
 
1749
- .pf-v6-c-divider.pf-m-inset-3xl {
1750
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1381
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1382
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1383
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1384
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1385
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1386
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1387
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1388
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1751
1389
  }
1752
1390
 
1753
- @media (min-width: 36rem) {
1754
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1755
- flex-direction: row;
1756
- width: 100%;
1757
- height: var(--pf-v6-c-divider--Size);
1758
- }
1391
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1392
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1759
1393
  }
1760
- @media (min-width: 36rem) {
1761
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1762
- flex-direction: column;
1763
- width: var(--pf-v6-c-divider--Size);
1764
- height: inherit;
1765
- }
1394
+
1395
+ .pf-v6-c-label.pf-m-disabled {
1396
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1397
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1398
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1399
+ --pf-v6-c-label--BorderWidth: 0;
1400
+ pointer-events: none;
1766
1401
  }
1767
- @media (min-width: 36rem) {
1768
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1769
- --pf-v6-c-divider--before--FlexBasis: 100%;
1770
- }
1771
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1772
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1773
- }
1774
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1775
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1776
- }
1777
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1778
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1779
- }
1780
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1781
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1782
- }
1783
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1784
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1785
- }
1786
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1787
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1788
- }
1789
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1790
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1791
- }
1402
+
1403
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1404
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1792
1405
  }
1793
- @media (min-width: 48rem) {
1794
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1795
- flex-direction: row;
1796
- width: 100%;
1797
- height: var(--pf-v6-c-divider--Size);
1798
- }
1406
+
1407
+ .pf-v6-c-label,
1408
+ .pf-v6-c-label__content {
1409
+ display: inline-flex;
1410
+ align-items: center;
1411
+ justify-content: center;
1799
1412
  }
1800
- @media (min-width: 48rem) {
1801
- .pf-v6-c-divider.pf-m-vertical-on-md {
1802
- flex-direction: column;
1803
- width: var(--pf-v6-c-divider--Size);
1804
- height: inherit;
1805
- }
1413
+
1414
+ .pf-v6-c-label__text {
1415
+ overflow: hidden;
1416
+ text-overflow: ellipsis;
1417
+ white-space: nowrap;
1418
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1806
1419
  }
1807
- @media (min-width: 48rem) {
1808
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1809
- --pf-v6-c-divider--before--FlexBasis: 100%;
1810
- }
1811
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1812
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1813
- }
1814
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1815
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1816
- }
1817
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1818
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1819
- }
1820
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1821
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1822
- }
1823
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1824
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1825
- }
1826
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1827
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1828
- }
1829
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1830
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1831
- }
1420
+
1421
+ .pf-v6-c-label__content {
1422
+ gap: var(--pf-v6-c-label__content--Gap);
1423
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1424
+ padding: 0;
1425
+ overflow: hidden;
1426
+ color: var(--pf-v6-c-label--Color);
1427
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1428
+ background: transparent;
1429
+ border-width: 0;
1832
1430
  }
1833
- @media (min-width: 62rem) {
1834
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1835
- flex-direction: row;
1836
- width: 100%;
1837
- height: var(--pf-v6-c-divider--Size);
1838
- }
1431
+
1432
+ .pf-v6-c-label__content::before {
1433
+ position: absolute;
1434
+ inset: 0;
1435
+ z-index: -1;
1436
+ content: "";
1437
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1438
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1439
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1839
1440
  }
1840
- @media (min-width: 62rem) {
1841
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1842
- flex-direction: column;
1843
- width: var(--pf-v6-c-divider--Size);
1844
- height: inherit;
1845
- }
1441
+
1442
+ input.pf-v6-c-label__content {
1443
+ overflow: hidden;
1444
+ text-overflow: ellipsis;
1445
+ white-space: nowrap;
1846
1446
  }
1847
- @media (min-width: 62rem) {
1848
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1849
- --pf-v6-c-divider--before--FlexBasis: 100%;
1850
- }
1851
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1852
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1853
- }
1854
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1855
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1856
- }
1857
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1858
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1859
- }
1860
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1861
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1862
- }
1863
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1864
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1865
- }
1866
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1867
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1868
- }
1869
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1870
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1871
- }
1447
+
1448
+ .pf-v6-c-label__icon {
1449
+ color: var(--pf-v6-c-label__icon--Color);
1872
1450
  }
1873
- @media (min-width: 75rem) {
1874
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1875
- flex-direction: row;
1876
- width: 100%;
1877
- height: var(--pf-v6-c-divider--Size);
1878
- }
1451
+
1452
+ .pf-v6-c-label__actions {
1453
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1879
1454
  }
1880
- @media (min-width: 75rem) {
1881
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1882
- flex-direction: column;
1883
- width: var(--pf-v6-c-divider--Size);
1884
- height: inherit;
1885
- }
1455
+
1456
+ .pf-v6-c-label .pf-v6-c-label__actions .pf-v6-c-button {
1457
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1458
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1459
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1460
+ margin-block-start: calc(var(--pf-v6-c-label--PaddingBlockStart) * -1);
1461
+ margin-block-end: calc(var(--pf-v6-c-label--PaddingBlockEnd) * -1);
1462
+ margin-inline-end: calc(var(--pf-v6-c-label--PaddingInlineEnd) * -1);
1463
+ border-start-end-radius: var(--pf-v6-c-label--BorderRadius);
1464
+ border-end-end-radius: var(--pf-v6-c-label--BorderRadius);
1886
1465
  }
1887
- @media (min-width: 75rem) {
1888
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1889
- --pf-v6-c-divider--before--FlexBasis: 100%;
1890
- }
1891
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1892
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1893
- }
1894
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1895
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1896
- }
1897
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1898
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1899
- }
1900
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1901
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1902
- }
1903
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1904
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1905
- }
1906
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1907
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1908
- }
1909
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1910
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1911
- }
1466
+
1467
+ .pf-v6-c-label__actions .pf-v6-c-button {
1468
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1469
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1470
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1471
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1472
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1473
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1474
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1475
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1912
1476
  }
1913
- @media (min-width: 90.625rem) {
1914
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1915
- flex-direction: row;
1916
- width: 100%;
1917
- height: var(--pf-v6-c-divider--Size);
1918
- }
1477
+
1478
+ .pf-v6-c-label-group {
1479
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1480
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1481
+ --pf-v6-c-label-group--MaxWidth: 100%;
1482
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1483
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1484
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1485
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1486
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1487
+ --pf-v6-c-label-group__main--MinWidth: 0;
1488
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1489
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1490
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1491
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1492
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1493
+ --pf-v6-c-label-group__list--MinWidth: 0;
1494
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1495
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1496
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1497
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1498
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1499
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1500
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1501
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1502
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1503
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1504
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1505
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1506
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1507
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1508
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1509
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1510
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1511
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1512
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1513
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1514
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1515
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1919
1516
  }
1920
- @media (min-width: 90.625rem) {
1921
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1922
- flex-direction: column;
1923
- width: var(--pf-v6-c-divider--Size);
1924
- height: inherit;
1925
- }
1517
+
1518
+ .pf-v6-c-label-group {
1519
+ display: inline-flex;
1520
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1521
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1522
+ align-items: center;
1523
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1926
1524
  }
1927
- @media (min-width: 90.625rem) {
1928
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1929
- --pf-v6-c-divider--before--FlexBasis: 100%;
1930
- }
1931
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1932
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1933
- }
1934
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1935
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1936
- }
1937
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1938
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1939
- }
1940
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1941
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1942
- }
1943
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1944
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1945
- }
1946
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1947
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1948
- }
1949
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1950
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1951
- }
1525
+
1526
+ .pf-v6-c-label-group.pf-m-category {
1527
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1528
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1529
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1530
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1531
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1532
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1533
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1952
1534
  }
1953
- .pf-v6-c-check {
1954
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1955
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1956
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1957
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1958
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1959
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1960
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1961
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1962
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1963
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1964
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1965
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1966
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1967
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1535
+
1536
+ .pf-v6-c-label-group.pf-m-vertical {
1537
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1538
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1539
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1540
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1541
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1542
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1543
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1968
1544
  }
1969
1545
 
1970
- .pf-v6-c-check {
1971
- display: grid;
1972
- grid-template-columns: auto 1fr;
1973
- gap: var(--pf-v6-c-check--GridGap);
1974
- accent-color: var(--pf-v6-c-check--AccentColor);
1546
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1547
+ align-items: flex-start;
1975
1548
  }
1976
1549
 
1977
- .pf-v6-c-check.pf-m-standalone {
1978
- display: inline-grid;
1979
- grid-template-columns: auto;
1980
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1550
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1551
+ flex-direction: column;
1552
+ align-items: flex-start;
1553
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1981
1554
  }
1982
1555
 
1983
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1984
- align-self: center;
1985
- transform: none;
1556
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1557
+ flex-direction: column;
1558
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1986
1559
  }
1987
1560
 
1988
- .pf-v6-c-check__input {
1989
- align-self: start;
1990
- font-size: var(--pf-v6-c-check__label--FontSize);
1991
- line-height: var(--pf-v6-c-check__label--LineHeight);
1992
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1561
+ .pf-v6-c-label-group.pf-m-editable,
1562
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1563
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1564
+ display: flex;
1993
1565
  }
1994
1566
 
1995
- .pf-v6-c-check__label {
1996
- font-size: var(--pf-v6-c-check__label--FontSize);
1997
- font-weight: var(--pf-v6-c-check__label--FontWeight);
1998
- line-height: var(--pf-v6-c-check__label--LineHeight);
1999
- color: var(--pf-v6-c-check__label--Color);
1567
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1568
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1569
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1570
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1571
+ flex: 1;
1572
+ }
1573
+
1574
+ .pf-v6-c-label-group__main {
1575
+ display: flex;
1576
+ flex: 1;
1577
+ flex-wrap: wrap;
1578
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1579
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1580
+ align-items: baseline;
1581
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1582
+ }
1583
+
1584
+ .pf-v6-c-label-group__list {
1585
+ display: inline-flex;
1586
+ flex-wrap: wrap;
1587
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1588
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1589
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2000
1590
  }
2001
1591
 
2002
- .pf-v6-c-check__description {
2003
- grid-column: 2;
2004
- font-size: var(--pf-v6-c-check__description--FontSize);
2005
- color: var(--pf-v6-c-check__description--Color);
1592
+ .pf-v6-c-label-group__list-item {
1593
+ display: inline-flex;
1594
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2006
1595
  }
2007
1596
 
2008
- .pf-v6-c-check__body {
2009
- grid-column: 2;
1597
+ .pf-v6-c-label-group__label {
1598
+ overflow: hidden;
1599
+ text-overflow: ellipsis;
1600
+ white-space: nowrap;
1601
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2010
1602
  }
2011
1603
 
2012
- .pf-v6-c-check__label,
2013
- .pf-v6-c-check__input {
2014
- justify-self: start;
1604
+ .pf-v6-c-label-group__close {
1605
+ display: flex;
1606
+ align-self: flex-start;
2015
1607
  }
2016
1608
 
2017
- label.pf-v6-c-check, .pf-v6-c-check__label,
2018
- .pf-v6-c-check__input {
2019
- cursor: pointer;
1609
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1610
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1611
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1612
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1613
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1614
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2020
1615
  }
2021
1616
 
2022
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2023
- .pf-v6-c-check__input:disabled,
2024
- .pf-v6-c-check__input.pf-m-disabled {
2025
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2026
- cursor: not-allowed;
1617
+ .pf-v6-c-label-group__textarea {
1618
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1619
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1620
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1621
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1622
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1623
+ white-space: nowrap;
1624
+ resize: none;
1625
+ scrollbar-width: none;
1626
+ -ms-overflow-style: none;
1627
+ border: 0;
2027
1628
  }
2028
1629
 
2029
- .pf-v6-c-check__label-required {
2030
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2031
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2032
- color: var(--pf-v6-c-check__label-required--Color);
1630
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1631
+ display: none;
2033
1632
  }
2034
1633
 
2035
1634
  .pf-v6-c-button {
@@ -2930,279 +2529,560 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2930
2529
  color: var(--pf-v6-c-button--disabled__icon--Color);
2931
2530
  }
2932
2531
 
2933
- .pf-v6-c-button.pf-m-aria-disabled {
2934
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2935
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2936
- cursor: default;
2532
+ .pf-v6-c-button.pf-m-aria-disabled {
2533
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2534
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2535
+ cursor: default;
2536
+ }
2537
+
2538
+ .pf-v6-c-button.pf-m-progress {
2539
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2540
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2541
+ }
2542
+
2543
+ .pf-v6-c-button.pf-m-in-progress {
2544
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2545
+ }
2546
+
2547
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2548
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2549
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2550
+ }
2551
+
2552
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2553
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2554
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2555
+ }
2556
+
2557
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2558
+ opacity: 0;
2559
+ }
2560
+
2561
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2562
+ animation-name: pf-v6-c-button-icon-notify;
2563
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2564
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2565
+ }
2566
+
2567
+ .pf-v6-c-button.pf-m-docked {
2568
+ justify-content: flex-start;
2569
+ width: 100%;
2570
+ }
2571
+
2572
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon {
2573
+ min-width: 1lh;
2574
+ }
2575
+
2576
+ @media (min-width: 62rem) {
2577
+ .pf-v6-c-button.pf-m-docked {
2578
+ justify-content: center;
2579
+ }
2580
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text {
2581
+ display: none;
2582
+ }
2583
+ }
2584
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button.pf-m-docked, .pf-v6-c-button:is(.pf-m-text-expanded, .pf-m-expandable-expanded) {
2585
+ justify-content: flex-start;
2586
+ width: 100%;
2587
+ }
2588
+
2589
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button:is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button__text {
2590
+ display: revert;
2591
+ }
2592
+
2593
+ .pf-v6-c-button__icon {
2594
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2595
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2596
+ color: var(--pf-v6-c-button__icon--Color);
2597
+ rotate: var(--pf-v6-c-button__icon--Rotate);
2598
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2599
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2600
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2601
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2602
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2603
+ }
2604
+
2605
+ .pf-v6-c-button__icon.pf-m-start {
2606
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2607
+ }
2608
+
2609
+ .pf-v6-c-button__icon.pf-m-end {
2610
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2611
+ }
2612
+
2613
+ .pf-v6-c-button__icon-favorite,
2614
+ .pf-v6-c-button__icon-favorited {
2615
+ grid-area: 1/1/1/1;
2616
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2617
+ transition-property: opacity;
2618
+ }
2619
+
2620
+ .pf-v6-c-button__icon-favorite {
2621
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2622
+ }
2623
+
2624
+ .pf-v6-c-button__icon-favorited {
2625
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2626
+ }
2627
+
2628
+ .pf-v6-c-button__progress {
2629
+ position: var(--pf-v6-c-button__progress--Position);
2630
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2631
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2632
+ line-height: 1;
2633
+ color: var(--pf-v6-c-button__progress--Color);
2634
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2635
+ }
2636
+
2637
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2638
+ --pf-v6-c-spinner--Color: currentcolor;
2639
+ }
2640
+
2641
+ .pf-v6-c-button__text {
2642
+ text-decoration: inherit;
2643
+ }
2644
+
2645
+ .pf-v6-c-button__count {
2646
+ display: inline-flex;
2647
+ align-items: center;
2648
+ }
2649
+
2650
+ .pf-v6-c-button--hamburger-icon path {
2651
+ fill: none;
2652
+ stroke: currentcolor;
2653
+ stroke-linecap: round;
2654
+ stroke-linejoin: round;
2655
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2656
+ }
2657
+
2658
+ .pf-v6-c-button--hamburger-icon--top {
2659
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2660
+ }
2661
+
2662
+ .pf-v6-c-button--hamburger-icon--middle {
2663
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2664
+ }
2665
+
2666
+ .pf-v6-c-button--hamburger-icon--arrow {
2667
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2668
+ }
2669
+
2670
+ .pf-v6-c-button--hamburger-icon--bottom {
2671
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2672
+ }
2673
+
2674
+ @keyframes pf-v6-c-button-icon-notify {
2675
+ 33% {
2676
+ transform: rotate(30deg);
2677
+ }
2678
+ 66% {
2679
+ transform: rotate(-60deg);
2680
+ }
2681
+ }
2682
+ @keyframes pf-v6-c-button-icon-favorited {
2683
+ 50% {
2684
+ scale: 1.5;
2685
+ }
2686
+ }
2687
+ .pf-v6-c-badge {
2688
+ --pf-v6-c-badge--BorderColor: transparent;
2689
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2690
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2691
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2692
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2693
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2694
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2695
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2696
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2697
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2698
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2699
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2700
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2701
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2702
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2703
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2704
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2705
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2706
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2707
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2708
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2709
+ }
2710
+
2711
+ .pf-v6-c-badge {
2712
+ position: relative;
2713
+ display: inline-block;
2714
+ min-width: var(--pf-v6-c-badge--MinWidth);
2715
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2716
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2717
+ font-size: var(--pf-v6-c-badge--FontSize);
2718
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2719
+ color: var(--pf-v6-c-badge--Color);
2720
+ text-align: center;
2721
+ white-space: nowrap;
2722
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2723
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2724
+ }
2725
+
2726
+ .pf-v6-c-badge::after {
2727
+ position: absolute;
2728
+ inset: 0;
2729
+ pointer-events: none;
2730
+ content: "";
2731
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2732
+ border-radius: inherit;
2733
+ }
2734
+
2735
+ .pf-v6-c-badge.pf-m-read {
2736
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2737
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2738
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2739
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2937
2740
  }
2938
2741
 
2939
- .pf-v6-c-button.pf-m-progress {
2940
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2941
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2742
+ .pf-v6-c-badge.pf-m-unread {
2743
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2744
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2745
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2942
2746
  }
2943
2747
 
2944
- .pf-v6-c-button.pf-m-in-progress {
2945
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2748
+ .pf-v6-c-badge.pf-m-disabled {
2749
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2750
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2946
2751
  }
2947
2752
 
2948
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2949
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2950
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2753
+ .pf-v6-c-badge.pf-m-disabled::after {
2754
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2951
2755
  }
2952
2756
 
2953
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2954
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2955
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2757
+ .pf-v6-c-badge__toggle-icon {
2758
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2759
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2956
2760
  }
2957
2761
 
2958
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2959
- opacity: 0;
2762
+ .pf-v6-c-check {
2763
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2764
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2765
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2766
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2767
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2768
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2769
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2770
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2771
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2772
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2773
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2774
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2775
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2776
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2960
2777
  }
2961
2778
 
2962
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2963
- animation-name: pf-v6-c-button-icon-notify;
2964
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2965
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2779
+ .pf-v6-c-check {
2780
+ display: grid;
2781
+ grid-template-columns: auto 1fr;
2782
+ gap: var(--pf-v6-c-check--GridGap);
2783
+ accent-color: var(--pf-v6-c-check--AccentColor);
2966
2784
  }
2967
2785
 
2968
- .pf-v6-c-button.pf-m-docked {
2969
- justify-content: flex-start;
2970
- width: 100%;
2786
+ .pf-v6-c-check.pf-m-standalone {
2787
+ display: inline-grid;
2788
+ grid-template-columns: auto;
2789
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2971
2790
  }
2972
2791
 
2973
- .pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon {
2974
- min-width: 1lh;
2792
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2793
+ align-self: center;
2794
+ transform: none;
2975
2795
  }
2976
2796
 
2977
- @media (min-width: 62rem) {
2978
- .pf-v6-c-button.pf-m-docked {
2979
- justify-content: center;
2980
- }
2981
- .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text {
2982
- display: none;
2983
- }
2984
- }
2985
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button.pf-m-docked, .pf-v6-c-button:is(.pf-m-text-expanded, .pf-m-expandable-expanded) {
2986
- justify-content: flex-start;
2987
- width: 100%;
2797
+ .pf-v6-c-check__input {
2798
+ align-self: start;
2799
+ font-size: var(--pf-v6-c-check__label--FontSize);
2800
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2801
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2988
2802
  }
2989
2803
 
2990
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button:is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button__text {
2991
- display: revert;
2804
+ .pf-v6-c-check__label {
2805
+ font-size: var(--pf-v6-c-check__label--FontSize);
2806
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2807
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2808
+ color: var(--pf-v6-c-check__label--Color);
2992
2809
  }
2993
2810
 
2994
- .pf-v6-c-button__icon {
2995
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2996
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2997
- color: var(--pf-v6-c-button__icon--Color);
2998
- rotate: var(--pf-v6-c-button__icon--Rotate);
2999
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
3000
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
3001
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
3002
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
3003
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2811
+ .pf-v6-c-check__description {
2812
+ grid-column: 2;
2813
+ font-size: var(--pf-v6-c-check__description--FontSize);
2814
+ color: var(--pf-v6-c-check__description--Color);
3004
2815
  }
3005
2816
 
3006
- .pf-v6-c-button__icon.pf-m-start {
3007
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2817
+ .pf-v6-c-check__body {
2818
+ grid-column: 2;
3008
2819
  }
3009
2820
 
3010
- .pf-v6-c-button__icon.pf-m-end {
3011
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2821
+ .pf-v6-c-check__label,
2822
+ .pf-v6-c-check__input {
2823
+ justify-self: start;
3012
2824
  }
3013
2825
 
3014
- .pf-v6-c-button__icon-favorite,
3015
- .pf-v6-c-button__icon-favorited {
3016
- grid-area: 1/1/1/1;
3017
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
3018
- transition-property: opacity;
2826
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2827
+ .pf-v6-c-check__input {
2828
+ cursor: pointer;
3019
2829
  }
3020
2830
 
3021
- .pf-v6-c-button__icon-favorite {
3022
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2831
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2832
+ .pf-v6-c-check__input:disabled,
2833
+ .pf-v6-c-check__input.pf-m-disabled {
2834
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2835
+ cursor: not-allowed;
3023
2836
  }
3024
2837
 
3025
- .pf-v6-c-button__icon-favorited {
3026
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2838
+ .pf-v6-c-check__label-required {
2839
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2840
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2841
+ color: var(--pf-v6-c-check__label-required--Color);
3027
2842
  }
3028
2843
 
3029
- .pf-v6-c-button__progress {
3030
- position: var(--pf-v6-c-button__progress--Position);
3031
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
3032
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
3033
- line-height: 1;
3034
- color: var(--pf-v6-c-button__progress--Color);
3035
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2844
+ .pf-v6-c-text-input-group {
2845
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2846
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
2847
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2848
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2849
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2850
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2851
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2852
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2853
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2854
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2855
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2856
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2857
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2858
+ --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));
2859
+ --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));
2860
+ --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));
2861
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2862
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2863
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
2864
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2865
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2866
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2867
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2868
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2869
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2870
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2871
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2872
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2873
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2874
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2875
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2876
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2877
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2878
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2879
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2880
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2881
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2882
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2883
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2884
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2885
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2886
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2887
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2888
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2889
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2890
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2891
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2892
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2893
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2894
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2895
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
3036
2896
  }
3037
2897
 
3038
- .pf-v6-c-button__progress .pf-v6-c-spinner {
3039
- --pf-v6-c-spinner--Color: currentcolor;
2898
+ .pf-v6-c-text-input-group {
2899
+ position: relative;
2900
+ display: flex;
2901
+ width: 100%;
2902
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2903
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2904
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2905
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2906
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2907
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2908
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2909
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
3040
2910
  }
3041
2911
 
3042
- .pf-v6-c-button__text {
3043
- text-decoration: inherit;
2912
+ .pf-v6-c-text-input-group::before {
2913
+ position: absolute;
2914
+ inset: 0;
2915
+ pointer-events: none;
2916
+ content: "";
2917
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2918
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2919
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2920
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2921
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
3044
2922
  }
3045
2923
 
3046
- .pf-v6-c-button__count {
3047
- display: inline-flex;
3048
- align-items: center;
2924
+ .pf-v6-c-text-input-group.pf-m-disabled {
2925
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2926
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2927
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2928
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2929
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2930
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2931
+ pointer-events: none;
3049
2932
  }
3050
2933
 
3051
- .pf-v6-c-button--hamburger-icon path {
3052
- fill: none;
3053
- stroke: currentcolor;
3054
- stroke-linecap: round;
3055
- stroke-linejoin: round;
3056
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2934
+ .pf-v6-c-text-input-group.pf-m-plain {
2935
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
3057
2936
  }
3058
2937
 
3059
- .pf-v6-c-button--hamburger-icon--top {
3060
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2938
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2939
+ border: 0;
3061
2940
  }
3062
2941
 
3063
- .pf-v6-c-button--hamburger-icon--middle {
3064
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2942
+ .pf-v6-c-text-input-group.pf-m-success {
2943
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2944
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2945
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
3065
2946
  }
3066
2947
 
3067
- .pf-v6-c-button--hamburger-icon--arrow {
3068
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2948
+ .pf-v6-c-text-input-group.pf-m-warning {
2949
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2950
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2951
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
3069
2952
  }
3070
2953
 
3071
- .pf-v6-c-button--hamburger-icon--bottom {
3072
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2954
+ .pf-v6-c-text-input-group.pf-m-error {
2955
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2956
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2957
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
3073
2958
  }
3074
2959
 
3075
- @keyframes pf-v6-c-button-icon-notify {
3076
- 33% {
3077
- transform: rotate(30deg);
3078
- }
3079
- 66% {
3080
- transform: rotate(-60deg);
2960
+ @media (prefers-reduced-motion: no-preference) {
2961
+ .pf-v6-c-text-input-group.pf-m-error {
2962
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2963
+ animation-name: pf-v6-global-danger-jiggle-motion;
2964
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2965
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2966
+ animation-fill-mode: both;
3081
2967
  }
3082
2968
  }
3083
- @keyframes pf-v6-c-button-icon-favorited {
3084
- 50% {
3085
- scale: 1.5;
3086
- }
2969
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2970
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2971
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2972
+ animation-name: pf-v6-global-fade-in;
2973
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2974
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
3087
2975
  }
3088
- .pf-v6-c-breadcrumb {
3089
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3090
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3091
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3092
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3093
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3094
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3095
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3096
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3097
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3098
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3099
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3100
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3101
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3102
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3103
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3104
- --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3105
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3106
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3107
- --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3108
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3109
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3110
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3111
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2976
+
2977
+ .pf-v6-c-text-input-group:hover {
2978
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
3112
2979
  }
3113
2980
 
3114
- .pf-v6-c-breadcrumb {
3115
- display: inline-flex;
2981
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2982
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
3116
2983
  }
3117
2984
 
3118
- .pf-v6-c-breadcrumb__list {
3119
- display: flex;
3120
- flex-wrap: wrap;
3121
- align-items: center;
2985
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2986
+ --pf-v6-c-text-input-group__text--Position: relative;
3122
2987
  }
3123
2988
 
3124
- .pf-v6-c-breadcrumb__item {
2989
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2990
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2991
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2992
+ }
2993
+
2994
+ .pf-v6-c-text-input-group__main {
3125
2995
  display: flex;
3126
- align-items: baseline;
3127
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3128
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3129
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3130
- white-space: nowrap;
3131
- list-style: none;
2996
+ flex: 1;
2997
+ flex-wrap: wrap;
2998
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2999
+ min-width: 0;
3132
3000
  }
3133
3001
 
3134
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3135
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3002
+ .pf-v6-c-text-input-group__main.pf-m-icon {
3003
+ --pf-v6-c-text-input-group__text--Position: relative;
3004
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
3005
+ display: inline-flex;
3006
+ align-items: center;
3007
+ justify-content: center;
3008
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
3136
3009
  }
3137
3010
 
3138
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3139
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3011
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
3012
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
3140
3013
  }
3141
3014
 
3142
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3143
- scale: -1 1;
3015
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
3016
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
3017
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
3018
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
3144
3019
  }
3145
3020
 
3146
- .pf-v6-c-breadcrumb__item-divider {
3147
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3148
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3149
- line-height: 1;
3150
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3021
+ .pf-v6-c-text-input-group__text {
3022
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
3023
+ display: inline-grid;
3024
+ flex: 1;
3025
+ grid-template-areas: "text-input";
3026
+ grid-template-columns: 1fr;
3151
3027
  }
3152
3028
 
3153
- .pf-v6-c-breadcrumb__link {
3154
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3155
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3156
- font-size: inherit;
3157
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3158
- line-height: inherit;
3159
- color: var(--pf-v6-c-breadcrumb__link--Color);
3160
- overflow-wrap: anywhere;
3161
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3162
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3163
- text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3164
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3029
+ .pf-v6-c-text-input-group__icon {
3030
+ position: absolute;
3031
+ inset-block-start: 50%;
3032
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
3033
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
3034
+ color: var(--pf-v6-c-text-input-group__icon--Color);
3035
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
3165
3036
  }
3166
3037
 
3167
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3168
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3169
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3170
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3171
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
3038
+ .pf-v6-c-text-input-group__icon.pf-m-status {
3039
+ inset-inline-start: auto;
3040
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
3041
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
3172
3042
  }
3173
3043
 
3174
- .pf-v6-c-breadcrumb__link.pf-m-current {
3175
- cursor: default;
3044
+ .pf-v6-c-text-input-group__text-input {
3045
+ overflow: hidden;
3046
+ text-overflow: ellipsis;
3047
+ white-space: nowrap;
3048
+ position: relative;
3049
+ width: 100%;
3050
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
3051
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
3052
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
3053
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
3054
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
3055
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
3056
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
3057
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
3058
+ border: 0;
3176
3059
  }
3177
3060
 
3178
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3179
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3180
- text-decoration-line: none;
3061
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
3062
+ grid-area: text-input;
3181
3063
  }
3182
3064
 
3183
- button.pf-v6-c-breadcrumb__link {
3184
- border: none;
3065
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
3066
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
3185
3067
  }
3186
3068
 
3187
- .pf-v6-c-breadcrumb__dropdown {
3188
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3189
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3190
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3191
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3069
+ .pf-v6-c-text-input-group__text-input::placeholder {
3070
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
3192
3071
  }
3193
3072
 
3194
- .pf-v6-c-breadcrumb__heading {
3195
- display: inline;
3196
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3073
+ .pf-v6-c-text-input-group__utilities {
3074
+ display: flex;
3075
+ align-items: center;
3076
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
3077
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
3197
3078
  }
3198
3079
 
3199
- .pf-v6-c-breadcrumb__link,
3200
- .pf-v6-c-breadcrumb__heading {
3201
- white-space: normal;
3080
+ .pf-v6-c-text-input-group__utilities > * + * {
3081
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
3202
3082
  }
3203
3083
 
3204
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3205
- display: none;
3084
+ .pf-v6-c-text-input-group__group {
3085
+ display: flex;
3206
3086
  }
3207
3087
 
3208
3088
  .pf-v6-c-menu {
@@ -3870,135 +3750,164 @@ button.pf-v6-c-breadcrumb__link {
3870
3750
  opacity: 0;
3871
3751
  }
3872
3752
 
3873
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3874
- .pf-v6-c-menu__item-action.pf-m-favorited,
3875
- .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3876
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3877
- --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3753
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3754
+ .pf-v6-c-menu__item-action.pf-m-favorited,
3755
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3756
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3757
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3758
+ }
3759
+
3760
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3761
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3762
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3763
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3764
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3765
+ }
3766
+
3767
+ .pf-v6-c-menu__breadcrumb {
3768
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3769
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3770
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3771
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3772
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3773
+ }
3774
+
3775
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3776
+ min-width: auto;
3777
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3778
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3779
+ }
3780
+
3781
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3782
+ height: auto;
3783
+ }
3784
+
3785
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3786
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3787
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3788
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3789
+ }
3790
+
3791
+ .pf-v6-c-breadcrumb {
3792
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3793
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3794
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3795
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3796
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3797
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3798
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3799
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3800
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3801
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3802
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3803
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3804
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3805
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3806
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3807
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3808
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3809
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3810
+ --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3811
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3812
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3813
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3814
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3815
+ }
3816
+
3817
+ .pf-v6-c-breadcrumb {
3818
+ display: inline-flex;
3878
3819
  }
3879
3820
 
3880
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3881
- .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3882
- .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3883
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3884
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3821
+ .pf-v6-c-breadcrumb__list {
3822
+ display: flex;
3823
+ flex-wrap: wrap;
3824
+ align-items: center;
3885
3825
  }
3886
3826
 
3887
- .pf-v6-c-menu__breadcrumb {
3888
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3889
- padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3890
- padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3891
- padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3892
- padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3827
+ .pf-v6-c-breadcrumb__item {
3828
+ display: flex;
3829
+ align-items: baseline;
3830
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3831
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3832
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3833
+ white-space: nowrap;
3834
+ list-style: none;
3893
3835
  }
3894
3836
 
3895
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3896
- min-width: auto;
3897
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3898
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3837
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3838
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3899
3839
  }
3900
3840
 
3901
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3902
- height: auto;
3841
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3842
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3903
3843
  }
3904
3844
 
3905
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3906
- --pf-v6-c-menu-toggle--BorderWidth: 0;
3907
- --pf-v6-c-menu-toggle--BorderColor: transparent;
3908
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3845
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3846
+ scale: -1 1;
3909
3847
  }
3910
3848
 
3911
- .pf-v6-c-spinner {
3912
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3913
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3914
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3915
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3916
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3917
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3918
- --pf-v6-c-spinner--StrokeWidth: 10;
3919
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3920
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3921
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3922
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3923
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3924
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3925
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3926
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3849
+ .pf-v6-c-breadcrumb__item-divider {
3850
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3851
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3852
+ line-height: 1;
3853
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3927
3854
  }
3928
3855
 
3929
- .pf-v6-c-spinner {
3930
- width: var(--pf-v6-c-spinner--Width);
3931
- height: var(--pf-v6-c-spinner--Height);
3932
- overflow: hidden;
3933
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3856
+ .pf-v6-c-breadcrumb__link {
3857
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3858
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3859
+ font-size: inherit;
3860
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3861
+ line-height: inherit;
3862
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3863
+ overflow-wrap: anywhere;
3864
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3865
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3866
+ text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3867
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3934
3868
  }
3935
3869
 
3936
- .pf-v6-c-spinner.pf-m-inline {
3937
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3870
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3871
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3872
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3873
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3874
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
3938
3875
  }
3939
3876
 
3940
- .pf-v6-c-spinner.pf-m-xs {
3941
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3942
- --pf-v6-c-spinner--StrokeWidth: 15;
3877
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3878
+ cursor: default;
3943
3879
  }
3944
3880
 
3945
- .pf-v6-c-spinner.pf-m-sm {
3946
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3881
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3882
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3883
+ text-decoration-line: none;
3947
3884
  }
3948
3885
 
3949
- .pf-v6-c-spinner.pf-m-md {
3950
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3886
+ button.pf-v6-c-breadcrumb__link {
3887
+ border: none;
3951
3888
  }
3952
3889
 
3953
- .pf-v6-c-spinner.pf-m-lg {
3954
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3890
+ .pf-v6-c-breadcrumb__dropdown {
3891
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3892
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3893
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3894
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3955
3895
  }
3956
3896
 
3957
- .pf-v6-c-spinner.pf-m-xl {
3958
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3897
+ .pf-v6-c-breadcrumb__heading {
3898
+ display: inline;
3899
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3959
3900
  }
3960
3901
 
3961
- .pf-v6-m-no-motion .pf-v6-c-spinner {
3962
- --pf-v6-c-spinner--AnimationDuration: 0s;
3902
+ .pf-v6-c-breadcrumb__link,
3903
+ .pf-v6-c-breadcrumb__heading {
3904
+ white-space: normal;
3963
3905
  }
3964
3906
 
3965
- .pf-v6-c-spinner__path {
3966
- width: 100%;
3967
- height: 100%;
3968
- stroke: var(--pf-v6-c-spinner--Color);
3969
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3970
- stroke-linecap: round;
3971
- stroke-dasharray: 283;
3972
- stroke-dashoffset: 280;
3973
- transform-origin: 50% 50%;
3974
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3907
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3908
+ display: none;
3975
3909
  }
3976
3910
 
3977
- @keyframes pf-v6-c-spinner-animation-rotate {
3978
- 0% {
3979
- transform: rotate(0deg);
3980
- }
3981
- 100% {
3982
- transform: rotate(360deg);
3983
- }
3984
- }
3985
- @keyframes pf-v6-c-spinner-animation-dash {
3986
- 0% {
3987
- stroke-dashoffset: 280;
3988
- transform: rotate(0);
3989
- }
3990
- 15% {
3991
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3992
- }
3993
- 40% {
3994
- stroke-dasharray: 220;
3995
- stroke-dashoffset: 150;
3996
- }
3997
- 100% {
3998
- stroke-dashoffset: 280;
3999
- transform: rotate(720deg);
4000
- }
4001
- }
4002
3911
  .pf-v6-c-tooltip {
4003
3912
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
4004
3913
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -4128,4 +4037,96 @@ button.pf-v6-c-breadcrumb__link {
4128
4037
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
4129
4038
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
4130
4039
  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));
4040
+ }
4041
+
4042
+ .pf-v6-c-spinner {
4043
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
4044
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
4045
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
4046
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
4047
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
4048
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
4049
+ --pf-v6-c-spinner--StrokeWidth: 10;
4050
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
4051
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
4052
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
4053
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
4054
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
4055
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
4056
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
4057
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
4058
+ }
4059
+
4060
+ .pf-v6-c-spinner {
4061
+ width: var(--pf-v6-c-spinner--Width);
4062
+ height: var(--pf-v6-c-spinner--Height);
4063
+ overflow: hidden;
4064
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
4065
+ }
4066
+
4067
+ .pf-v6-c-spinner.pf-m-inline {
4068
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
4069
+ }
4070
+
4071
+ .pf-v6-c-spinner.pf-m-xs {
4072
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
4073
+ --pf-v6-c-spinner--StrokeWidth: 15;
4074
+ }
4075
+
4076
+ .pf-v6-c-spinner.pf-m-sm {
4077
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
4078
+ }
4079
+
4080
+ .pf-v6-c-spinner.pf-m-md {
4081
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
4082
+ }
4083
+
4084
+ .pf-v6-c-spinner.pf-m-lg {
4085
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
4086
+ }
4087
+
4088
+ .pf-v6-c-spinner.pf-m-xl {
4089
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
4090
+ }
4091
+
4092
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
4093
+ --pf-v6-c-spinner--AnimationDuration: 0s;
4094
+ }
4095
+
4096
+ .pf-v6-c-spinner__path {
4097
+ width: 100%;
4098
+ height: 100%;
4099
+ stroke: var(--pf-v6-c-spinner--Color);
4100
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
4101
+ stroke-linecap: round;
4102
+ stroke-dasharray: 283;
4103
+ stroke-dashoffset: 280;
4104
+ transform-origin: 50% 50%;
4105
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
4106
+ }
4107
+
4108
+ @keyframes pf-v6-c-spinner-animation-rotate {
4109
+ 0% {
4110
+ transform: rotate(0deg);
4111
+ }
4112
+ 100% {
4113
+ transform: rotate(360deg);
4114
+ }
4115
+ }
4116
+ @keyframes pf-v6-c-spinner-animation-dash {
4117
+ 0% {
4118
+ stroke-dashoffset: 280;
4119
+ transform: rotate(0);
4120
+ }
4121
+ 15% {
4122
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
4123
+ }
4124
+ 40% {
4125
+ stroke-dasharray: 220;
4126
+ stroke-dashoffset: 150;
4127
+ }
4128
+ 100% {
4129
+ stroke-dashoffset: 280;
4130
+ transform: rotate(720deg);
4131
+ }
4131
4132
  }