@patternfly/react-templates 6.3.0-prerelease.13 → 6.3.0-prerelease.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +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-DUFOCIpG.css → output-DFF6O52l.css} +1076 -1070
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +6 -6
package/dist/umd/assets/{output-DUFOCIpG.css → output-DFF6O52l.css} RENAMED
@@ -3,88 +3,6 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-check {
7
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
8
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
9
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
11
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
12
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
13
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
14
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
15
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
16
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
17
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
19
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
20
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
21
- }
22
-
23
- .pf-v6-c-check {
24
- display: grid;
25
- grid-template-columns: auto 1fr;
26
- grid-gap: var(--pf-v6-c-check--GridGap);
27
- accent-color: var(--pf-v6-c-check--AccentColor);
28
- }
29
-
30
- .pf-v6-c-check.pf-m-standalone {
31
- display: inline-grid;
32
- grid-template-columns: auto;
33
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
34
- }
35
-
36
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
37
- align-self: center;
38
- transform: none;
39
- }
40
-
41
- .pf-v6-c-check__input {
42
- align-self: start;
43
- font-size: var(--pf-v6-c-check__label--FontSize);
44
- line-height: var(--pf-v6-c-check__label--LineHeight);
45
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
46
- }
47
-
48
- .pf-v6-c-check__label {
49
- font-size: var(--pf-v6-c-check__label--FontSize);
50
- font-weight: var(--pf-v6-c-check__label--FontWeight);
51
- line-height: var(--pf-v6-c-check__label--LineHeight);
52
- color: var(--pf-v6-c-check__label--Color);
53
- }
54
-
55
- .pf-v6-c-check__description {
56
- grid-column: 2;
57
- font-size: var(--pf-v6-c-check__description--FontSize);
58
- color: var(--pf-v6-c-check__description--Color);
59
- }
60
-
61
- .pf-v6-c-check__body {
62
- grid-column: 2;
63
- }
64
-
65
- .pf-v6-c-check__label,
66
- .pf-v6-c-check__input {
67
- justify-self: start;
68
- }
69
-
70
- label.pf-v6-c-check, .pf-v6-c-check__label,
71
- .pf-v6-c-check__input {
72
- cursor: pointer;
73
- }
74
-
75
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
76
- .pf-v6-c-check__input:disabled,
77
- .pf-v6-c-check__input.pf-m-disabled {
78
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
79
- cursor: not-allowed;
80
- }
81
-
82
- .pf-v6-c-check__label-required {
83
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
84
- font-size: var(--pf-v6-c-check__label-required--FontSize);
85
- color: var(--pf-v6-c-check__label-required--Color);
86
- }
87
-
88
6
  .pf-v6-c-menu-toggle {
89
7
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
90
8
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -609,610 +527,379 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
609
527
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
610
528
  }
611
529
 
612
- .pf-v6-c-label {
613
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
614
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
615
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
616
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
617
- --pf-v6-c-label--MaxWidth: 100%;
618
- --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
619
- --pf-v6-c-label--BorderWidth: 0;
620
- --pf-v6-c-label--BorderColor: transparent;
621
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
622
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
623
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
624
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
625
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
626
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
627
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
628
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
629
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
630
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
631
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
632
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
633
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
634
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
635
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
636
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
637
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
638
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
639
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
640
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
641
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
642
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
643
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
644
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
645
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
646
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
647
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
648
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
649
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
650
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
651
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
652
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
653
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
654
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
655
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
656
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
657
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
658
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
659
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
660
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
661
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
662
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
663
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
664
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
665
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
666
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
667
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
668
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
669
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
670
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
671
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
672
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
673
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
674
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
675
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
676
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
677
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
678
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
679
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
680
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
681
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
682
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
683
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
684
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
685
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
686
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
687
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
688
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
689
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
690
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
691
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
692
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
693
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
694
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
695
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
696
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
697
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
698
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
699
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
700
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
701
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
702
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
703
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
704
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
705
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
706
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
707
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
708
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
709
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
710
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
711
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
712
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
713
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
714
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
715
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
716
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
717
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
718
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
719
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
720
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
721
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
722
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
723
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
724
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
725
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
726
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
727
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
728
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
729
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
730
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
731
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
732
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
733
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
734
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
735
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
736
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
737
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
738
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
739
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
740
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
741
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
742
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
743
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
744
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
745
- --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
746
- --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
747
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
748
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
749
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
750
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
751
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
752
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
753
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
754
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
755
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
756
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
757
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
758
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
759
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
760
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
761
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
762
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
763
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
764
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
765
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
766
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
767
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
768
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
769
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
770
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
771
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
772
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
773
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
774
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
775
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
776
- --pf-v6-c-label__content--MaxWidth: 100%;
777
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
778
- --pf-v6-c-label__content--Cursor: initial;
779
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
780
- --pf-v6-c-label__text--MaxWidth: 100%;
781
- --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
782
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
783
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
784
- --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
785
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
786
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
787
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
788
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
789
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
790
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
791
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
792
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
793
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
794
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
795
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
796
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
797
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
798
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
799
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
800
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
801
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
802
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
803
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
804
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
530
+ .pf-v6-c-text-input-group {
531
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
532
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
533
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
534
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
535
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
536
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
537
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
538
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
539
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
540
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
541
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
542
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
543
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
544
+ --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));
545
+ --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));
546
+ --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));
547
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
548
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
549
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
550
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
551
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
552
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
553
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
554
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
555
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
556
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
557
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
558
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
559
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
560
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
561
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
562
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
563
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
564
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
565
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
566
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
567
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
568
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
569
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
570
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
571
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
572
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
573
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
574
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
575
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
576
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
577
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
578
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
579
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
580
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
805
581
  }
806
582
 
807
- .pf-v6-c-label {
583
+ .pf-v6-c-text-input-group {
808
584
  position: relative;
809
- min-width: var(--pf-v6-c-label--MinWidth);
810
- max-width: var(--pf-v6-c-label--MaxWidth);
811
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
812
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
813
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
814
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
815
- font-size: var(--pf-v6-c-label--FontSize);
816
- white-space: nowrap;
817
- background: transparent;
818
- isolation: isolate;
819
- border: 0;
820
- border-radius: var(--pf-v6-c-label--BorderRadius);
585
+ display: flex;
586
+ width: 100%;
587
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
588
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
589
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
590
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
591
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
592
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
593
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
594
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
821
595
  }
822
596
 
823
- .pf-v6-c-label.pf-m-blue {
824
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
825
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
826
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
827
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
828
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
829
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
830
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
831
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
597
+ .pf-v6-c-text-input-group::before {
598
+ position: absolute;
599
+ inset: 0;
600
+ pointer-events: none;
601
+ content: "";
602
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
603
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
604
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
605
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
606
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
832
607
  }
833
608
 
834
- .pf-v6-c-label.pf-m-red {
835
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
836
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
837
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
838
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
839
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
840
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
841
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
842
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
609
+ .pf-v6-c-text-input-group.pf-m-disabled {
610
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
611
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
612
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
613
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
614
+ pointer-events: none;
843
615
  }
844
616
 
845
- .pf-v6-c-label.pf-m-orange {
846
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
847
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
848
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
849
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
850
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
851
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
852
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
853
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
617
+ .pf-v6-c-text-input-group.pf-m-plain {
618
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
854
619
  }
855
620
 
856
- .pf-v6-c-label.pf-m-orangered {
857
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
858
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
859
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
860
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
861
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
862
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
863
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
864
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
621
+ .pf-v6-c-text-input-group.pf-m-plain::before {
622
+ border: 0;
865
623
  }
866
624
 
867
- .pf-v6-c-label.pf-m-yellow {
868
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
869
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
870
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
871
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
872
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
873
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
874
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
875
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
625
+ .pf-v6-c-text-input-group.pf-m-success {
626
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
627
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
628
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
876
629
  }
877
630
 
878
- .pf-v6-c-label.pf-m-green {
879
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
880
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
881
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
882
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
883
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
884
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
885
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
886
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
631
+ .pf-v6-c-text-input-group.pf-m-warning {
632
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
633
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
634
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
887
635
  }
888
636
 
889
- .pf-v6-c-label.pf-m-teal {
890
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
891
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
892
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
893
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
894
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
895
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
896
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
897
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
637
+ .pf-v6-c-text-input-group.pf-m-error {
638
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
639
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
640
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
898
641
  }
899
642
 
900
- .pf-v6-c-label.pf-m-purple {
901
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
902
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
903
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
904
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
905
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
906
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
907
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
908
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
643
+ .pf-v6-c-text-input-group:hover {
644
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
909
645
  }
910
646
 
911
- .pf-v6-c-label.pf-m-success {
912
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
913
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
914
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
915
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
916
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
917
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
918
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
919
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
920
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
921
- --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);
647
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
648
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
922
649
  }
923
650
 
924
- .pf-v6-c-label.pf-m-warning {
925
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
926
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
927
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
928
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
929
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
930
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
931
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
932
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
933
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
934
- --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);
651
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
652
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
653
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
935
654
  }
936
655
 
937
- .pf-v6-c-label.pf-m-danger {
938
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
939
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
940
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
941
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
942
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
943
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
944
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
945
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
946
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
947
- --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);
656
+ .pf-v6-c-text-input-group__main {
657
+ display: flex;
658
+ flex: 1;
659
+ flex-wrap: wrap;
660
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
661
+ min-width: 0;
948
662
  }
949
663
 
950
- .pf-v6-c-label.pf-m-info {
951
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
952
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
953
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
954
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
955
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
956
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
957
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
958
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
959
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
960
- --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);
961
- }
962
-
963
- .pf-v6-c-label.pf-m-custom {
964
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
965
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
966
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
967
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
968
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
969
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
970
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
971
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
972
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
973
- --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);
664
+ .pf-v6-c-text-input-group__main.pf-m-icon {
665
+ --pf-v6-c-text-input-group__text--Position: relative;
666
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
667
+ display: inline-flex;
668
+ align-items: center;
669
+ justify-content: center;
670
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
974
671
  }
975
672
 
976
- .pf-v6-c-label.pf-m-compact {
977
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
978
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
979
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
980
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
981
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
982
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
983
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
673
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
674
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
984
675
  }
985
676
 
986
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
987
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
677
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
678
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
679
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
680
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
988
681
  }
989
682
 
990
- .pf-v6-c-label.pf-m-outline {
991
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
992
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
993
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
994
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
995
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
996
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
997
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
998
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
999
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1000
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
683
+ .pf-v6-c-text-input-group__text {
684
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
685
+ display: inline-grid;
686
+ flex: 1;
687
+ grid-template-areas: "text-input";
688
+ grid-template-columns: 1fr;
1001
689
  }
1002
690
 
1003
- .pf-v6-c-label.pf-m-editable {
1004
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1005
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
691
+ .pf-v6-c-text-input-group__icon {
692
+ position: absolute;
693
+ inset-block-start: 50%;
694
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
695
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
696
+ color: var(--pf-v6-c-text-input-group__icon--Color);
697
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1006
698
  }
1007
699
 
1008
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1009
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1010
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
700
+ .pf-v6-c-text-input-group__icon.pf-m-status {
701
+ inset-inline-start: auto;
702
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
703
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1011
704
  }
1012
705
 
1013
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1014
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1015
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1016
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
706
+ .pf-v6-c-text-input-group__text-input {
707
+ overflow: hidden;
708
+ text-overflow: ellipsis;
709
+ white-space: nowrap;
710
+ position: relative;
711
+ width: 100%;
712
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
713
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
714
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
715
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
716
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
717
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
718
+ border: 0;
719
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1017
720
  }
1018
721
 
1019
- .pf-v6-c-label.pf-m-editable-active {
1020
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1021
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1022
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1023
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
722
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
723
+ grid-area: text-input;
1024
724
  }
1025
725
 
1026
- .pf-v6-c-label.pf-m-overflow {
1027
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1028
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
726
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
727
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1029
728
  }
1030
729
 
1031
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1032
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1033
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
730
+ .pf-v6-c-text-input-group__text-input::placeholder {
731
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1034
732
  }
1035
733
 
1036
- .pf-v6-c-label.pf-m-add {
1037
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1038
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1039
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1040
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
734
+ .pf-v6-c-text-input-group__utilities {
735
+ display: flex;
736
+ align-items: center;
737
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
738
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1041
739
  }
1042
740
 
1043
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1044
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1045
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1046
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1047
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
741
+ .pf-v6-c-text-input-group__utilities > * + * {
742
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1048
743
  }
1049
744
 
1050
- .pf-v6-c-label.pf-m-clickable {
1051
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
745
+ .pf-v6-c-text-input-group__group {
746
+ display: flex;
1052
747
  }
1053
748
 
1054
- .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) {
1055
- text-decoration-line: none;
749
+ .pf-v6-c-label-group {
750
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
751
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
752
+ --pf-v6-c-label-group--MaxWidth: 100%;
753
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
754
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
755
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
756
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
757
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
758
+ --pf-v6-c-label-group__main--MinWidth: 0;
759
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
760
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
761
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
762
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
763
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
764
+ --pf-v6-c-label-group__list--MinWidth: 0;
765
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
766
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
767
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
768
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
769
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
770
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
771
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
772
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
773
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
774
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
775
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
776
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
777
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
778
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
779
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
780
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
781
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
782
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
783
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
784
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
785
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
786
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1056
787
  }
1057
788
 
1058
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1059
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1060
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1061
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1062
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1063
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1064
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1065
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
789
+ .pf-v6-c-label-group {
790
+ display: inline-flex;
791
+ row-gap: var(--pf-v6-c-label-group--RowGap);
792
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
793
+ align-items: center;
794
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1066
795
  }
1067
796
 
1068
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1069
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
797
+ .pf-v6-c-label-group.pf-m-category {
798
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
799
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
800
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
801
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
802
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
803
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
804
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1070
805
  }
1071
806
 
1072
- .pf-v6-c-label.pf-m-disabled {
1073
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1074
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1075
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1076
- --pf-v6-c-label--BorderWidth: 0;
1077
- pointer-events: none;
807
+ .pf-v6-c-label-group.pf-m-vertical {
808
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
809
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
810
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
811
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
812
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
813
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
814
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1078
815
  }
1079
816
 
1080
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1081
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
817
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
818
+ align-items: flex-start;
1082
819
  }
1083
820
 
1084
- .pf-v6-c-label,
1085
- .pf-v6-c-label__content {
1086
- display: inline-flex;
1087
- align-items: center;
1088
- justify-content: center;
821
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
822
+ flex-direction: column;
823
+ align-items: flex-start;
824
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1089
825
  }
1090
826
 
1091
- .pf-v6-c-label__text {
1092
- overflow: hidden;
1093
- text-overflow: ellipsis;
1094
- white-space: nowrap;
1095
- max-width: var(--pf-v6-c-label__text--MaxWidth);
827
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
828
+ flex-direction: column;
829
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1096
830
  }
1097
831
 
1098
- .pf-v6-c-label__content {
1099
- gap: var(--pf-v6-c-label__content--Gap);
1100
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1101
- padding: 0;
1102
- overflow: hidden;
1103
- color: var(--pf-v6-c-label--Color);
1104
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1105
- background: transparent;
1106
- border-width: 0;
832
+ .pf-v6-c-label-group.pf-m-editable,
833
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
834
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
835
+ display: flex;
1107
836
  }
1108
837
 
1109
- .pf-v6-c-label__content::before {
1110
- position: absolute;
1111
- inset: 0;
1112
- z-index: -1;
1113
- pointer-events: none;
1114
- content: "";
1115
- background-color: var(--pf-v6-c-label--BackgroundColor);
1116
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1117
- border-radius: var(--pf-v6-c-label--BorderRadius);
838
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
839
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
840
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
841
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
842
+ flex: 1;
1118
843
  }
1119
844
 
1120
- input.pf-v6-c-label__content {
1121
- overflow: hidden;
1122
- text-overflow: ellipsis;
1123
- white-space: nowrap;
1124
- }
1125
-
1126
- .pf-v6-c-label__icon {
1127
- color: var(--pf-v6-c-label__icon--Color);
1128
- }
1129
-
1130
- .pf-v6-c-label__actions {
1131
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
845
+ .pf-v6-c-label-group__main {
846
+ display: flex;
847
+ flex: 1;
848
+ flex-wrap: wrap;
849
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
850
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
851
+ align-items: baseline;
852
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1132
853
  }
1133
854
 
1134
- .pf-v6-c-label__actions .pf-v6-c-button {
1135
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1136
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1137
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1138
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1139
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1140
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1141
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1142
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
855
+ .pf-v6-c-label-group__list {
856
+ display: inline-flex;
857
+ flex-wrap: wrap;
858
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
859
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
860
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1143
861
  }
1144
862
 
1145
- .pf-v6-c-badge {
1146
- --pf-v6-c-badge--BorderColor: transparent;
1147
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1148
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1149
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1150
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1151
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1152
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1153
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1154
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1155
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1156
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1157
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1158
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1159
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1160
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1161
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1162
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1163
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1164
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1165
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
863
+ .pf-v6-c-label-group__list-item {
864
+ display: inline-flex;
865
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1166
866
  }
1167
867
 
1168
- .pf-v6-c-badge {
1169
- position: relative;
1170
- display: inline-block;
1171
- min-width: var(--pf-v6-c-badge--MinWidth);
1172
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1173
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1174
- font-size: var(--pf-v6-c-badge--FontSize);
1175
- font-weight: var(--pf-v6-c-badge--FontWeight);
1176
- color: var(--pf-v6-c-badge--Color);
1177
- text-align: center;
868
+ .pf-v6-c-label-group__label {
869
+ overflow: hidden;
870
+ text-overflow: ellipsis;
1178
871
  white-space: nowrap;
1179
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1180
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1181
- }
1182
-
1183
- .pf-v6-c-badge::after {
1184
- position: absolute;
1185
- inset: 0;
1186
- pointer-events: none;
1187
- content: "";
1188
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1189
- border-radius: inherit;
1190
- }
1191
-
1192
- .pf-v6-c-badge.pf-m-read {
1193
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1194
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1195
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
872
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1196
873
  }
1197
874
 
1198
- .pf-v6-c-badge.pf-m-unread {
1199
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1200
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1201
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
875
+ .pf-v6-c-label-group__close {
876
+ display: flex;
877
+ align-self: flex-start;
1202
878
  }
1203
879
 
1204
- .pf-v6-c-badge.pf-m-disabled {
1205
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1206
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
880
+ .pf-v6-c-label-group__close .pf-v6-c-button {
881
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
882
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
883
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
884
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
885
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1207
886
  }
1208
887
 
1209
- .pf-v6-c-badge.pf-m-disabled::after {
1210
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
888
+ .pf-v6-c-label-group__textarea {
889
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
890
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
891
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
892
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
893
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
894
+ white-space: nowrap;
895
+ resize: none;
896
+ border: 0;
897
+ -ms-overflow-style: none;
898
+ scrollbar-width: none;
1211
899
  }
1212
900
 
1213
- .pf-v6-c-badge__toggle-icon {
1214
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1215
- color: var(--pf-v6-c-badge__toggle-icon--Color);
901
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
902
+ display: none;
1216
903
  }
1217
904
 
1218
905
  .pf-v6-c-button {
@@ -1954,282 +1641,63 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1954
1641
  transform: scale(1.5);
1955
1642
  }
1956
1643
  }
1957
- .pf-v6-c-text-input-group {
1958
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1959
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1960
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1961
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1962
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1963
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1964
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1965
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1966
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1967
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1968
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1969
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1970
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1971
- --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));
1972
- --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));
1973
- --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));
1974
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1975
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1976
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1977
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1978
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1979
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1980
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1981
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1982
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1983
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1984
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1985
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1986
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1987
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1988
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1989
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1990
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1991
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1992
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1993
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1994
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1995
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1996
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1997
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1998
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1999
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2000
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2001
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2002
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2003
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2004
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2005
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2006
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2007
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1644
+ .pf-v6-c-divider {
1645
+ --pf-v6-c-divider--Display: flex;
1646
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1647
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1648
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2008
1649
  }
2009
1650
 
2010
- .pf-v6-c-text-input-group {
2011
- position: relative;
2012
- display: flex;
1651
+ .pf-v6-c-divider {
1652
+ flex-direction: row;
2013
1653
  width: 100%;
2014
- font-size: var(--pf-v6-c-text-input-group__FontSize);
2015
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
2016
- color: var(--pf-v6-c-text-input-group--Color, inherit);
2017
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2018
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2019
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2020
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2021
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1654
+ height: var(--pf-v6-c-divider--Size);
1655
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1656
+ --pf-v6-hidden-visible--hidden--Display: none;
1657
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1658
+ display: var(--pf-v6-hidden-visible--Display);
1659
+ flex-shrink: 0;
1660
+ align-items: stretch;
1661
+ align-self: stretch;
1662
+ justify-content: center;
1663
+ border: 0;
2022
1664
  }
2023
1665
 
2024
- .pf-v6-c-text-input-group::before {
2025
- position: absolute;
2026
- inset: 0;
2027
- pointer-events: none;
2028
- content: "";
2029
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2030
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2031
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2032
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2033
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1666
+ .pf-v6-c-divider.pf-m-hidden {
1667
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2034
1668
  }
2035
1669
 
2036
- .pf-v6-c-text-input-group.pf-m-disabled {
2037
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2038
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2039
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2040
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2041
- pointer-events: none;
1670
+ @media screen and (min-width: 36rem) {
1671
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
1672
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1673
+ }
1674
+ .pf-v6-c-divider.pf-m-visible-on-sm {
1675
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1676
+ }
2042
1677
  }
2043
-
2044
- .pf-v6-c-text-input-group.pf-m-plain {
2045
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1678
+ @media screen and (min-width: 48rem) {
1679
+ .pf-v6-c-divider.pf-m-hidden-on-md {
1680
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1681
+ }
1682
+ .pf-v6-c-divider.pf-m-visible-on-md {
1683
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1684
+ }
2046
1685
  }
2047
-
2048
- .pf-v6-c-text-input-group.pf-m-plain::before {
2049
- border: 0;
1686
+ @media screen and (min-width: 62rem) {
1687
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
1688
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1689
+ }
1690
+ .pf-v6-c-divider.pf-m-visible-on-lg {
1691
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1692
+ }
2050
1693
  }
2051
-
2052
- .pf-v6-c-text-input-group.pf-m-success {
2053
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2054
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2055
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2056
- }
2057
-
2058
- .pf-v6-c-text-input-group.pf-m-warning {
2059
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2060
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2061
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2062
- }
2063
-
2064
- .pf-v6-c-text-input-group.pf-m-error {
2065
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2066
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2067
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2068
- }
2069
-
2070
- .pf-v6-c-text-input-group:hover {
2071
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2072
- }
2073
-
2074
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2075
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2076
- }
2077
-
2078
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2079
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2080
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2081
- }
2082
-
2083
- .pf-v6-c-text-input-group__main {
2084
- display: flex;
2085
- flex: 1;
2086
- flex-wrap: wrap;
2087
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2088
- min-width: 0;
2089
- }
2090
-
2091
- .pf-v6-c-text-input-group__main.pf-m-icon {
2092
- --pf-v6-c-text-input-group__text--Position: relative;
2093
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2094
- display: inline-flex;
2095
- align-items: center;
2096
- justify-content: center;
2097
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2098
- }
2099
-
2100
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2101
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2102
- }
2103
-
2104
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2105
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2106
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2107
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2108
- }
2109
-
2110
- .pf-v6-c-text-input-group__text {
2111
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
2112
- display: inline-grid;
2113
- flex: 1;
2114
- grid-template-areas: "text-input";
2115
- grid-template-columns: 1fr;
2116
- }
2117
-
2118
- .pf-v6-c-text-input-group__icon {
2119
- position: absolute;
2120
- inset-block-start: 50%;
2121
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2122
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2123
- color: var(--pf-v6-c-text-input-group__icon--Color);
2124
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2125
- }
2126
-
2127
- .pf-v6-c-text-input-group__icon.pf-m-status {
2128
- inset-inline-start: auto;
2129
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2130
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2131
- }
2132
-
2133
- .pf-v6-c-text-input-group__text-input {
2134
- overflow: hidden;
2135
- text-overflow: ellipsis;
2136
- white-space: nowrap;
2137
- position: relative;
2138
- width: 100%;
2139
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2140
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2141
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2142
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2143
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2144
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2145
- border: 0;
2146
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2147
- }
2148
-
2149
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2150
- grid-area: text-input;
2151
- }
2152
-
2153
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
2154
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2155
- }
2156
-
2157
- .pf-v6-c-text-input-group__text-input::placeholder {
2158
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2159
- }
2160
-
2161
- .pf-v6-c-text-input-group__utilities {
2162
- display: flex;
2163
- align-items: center;
2164
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2165
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2166
- }
2167
-
2168
- .pf-v6-c-text-input-group__utilities > * + * {
2169
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2170
- }
2171
-
2172
- .pf-v6-c-text-input-group__group {
2173
- display: flex;
2174
- }
2175
-
2176
- .pf-v6-c-divider {
2177
- --pf-v6-c-divider--Display: flex;
2178
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2179
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2180
- --pf-v6-c-divider--before--FlexBasis: 100%;
2181
- }
2182
-
2183
- .pf-v6-c-divider {
2184
- flex-direction: row;
2185
- width: 100%;
2186
- height: var(--pf-v6-c-divider--Size);
2187
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2188
- --pf-v6-hidden-visible--hidden--Display: none;
2189
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2190
- display: var(--pf-v6-hidden-visible--Display);
2191
- flex-shrink: 0;
2192
- align-items: stretch;
2193
- align-self: stretch;
2194
- justify-content: center;
2195
- border: 0;
2196
- }
2197
-
2198
- .pf-v6-c-divider.pf-m-hidden {
2199
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2200
- }
2201
-
2202
- @media screen and (min-width: 36rem) {
2203
- .pf-v6-c-divider.pf-m-hidden-on-sm {
2204
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2205
- }
2206
- .pf-v6-c-divider.pf-m-visible-on-sm {
2207
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2208
- }
2209
- }
2210
- @media screen and (min-width: 48rem) {
2211
- .pf-v6-c-divider.pf-m-hidden-on-md {
2212
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2213
- }
2214
- .pf-v6-c-divider.pf-m-visible-on-md {
2215
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2216
- }
2217
- }
2218
- @media screen and (min-width: 62rem) {
2219
- .pf-v6-c-divider.pf-m-hidden-on-lg {
2220
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2221
- }
2222
- .pf-v6-c-divider.pf-m-visible-on-lg {
2223
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2224
- }
2225
- }
2226
- @media screen and (min-width: 75rem) {
2227
- .pf-v6-c-divider.pf-m-hidden-on-xl {
2228
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2229
- }
2230
- .pf-v6-c-divider.pf-m-visible-on-xl {
2231
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2232
- }
1694
+ @media screen and (min-width: 75rem) {
1695
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
1696
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1697
+ }
1698
+ .pf-v6-c-divider.pf-m-visible-on-xl {
1699
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1700
+ }
2233
1701
  }
2234
1702
  @media screen and (min-width: 90.625rem) {
2235
1703
  .pf-v6-c-divider.pf-m-hidden-on-2xl {
@@ -2489,162 +1957,781 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2489
1957
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2490
1958
  }
2491
1959
  }
2492
- .pf-v6-c-label-group {
2493
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2494
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2495
- --pf-v6-c-label-group--MaxWidth: 100%;
2496
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2497
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2498
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2499
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2500
- --pf-v6-c-label-group__main--MaxWidth: 100%;
2501
- --pf-v6-c-label-group__main--MinWidth: 0;
2502
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2503
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2504
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2505
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2506
- --pf-v6-c-label-group__list--MaxWidth: 100%;
2507
- --pf-v6-c-label-group__list--MinWidth: 0;
2508
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2509
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2510
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2511
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2512
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2513
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2514
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2515
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2516
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2517
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2518
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2519
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
2520
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2521
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2522
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2523
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2524
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2525
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2526
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2527
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2528
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2529
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1960
+ .pf-v6-c-label {
1961
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1962
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1963
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1964
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1965
+ --pf-v6-c-label--MaxWidth: 100%;
1966
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
1967
+ --pf-v6-c-label--BorderWidth: 0;
1968
+ --pf-v6-c-label--BorderColor: transparent;
1969
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1970
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1971
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1972
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1973
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1974
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1975
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1976
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1977
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1978
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1979
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1980
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1981
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1982
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1983
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1984
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1985
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1986
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1987
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1988
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1989
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1990
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1991
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1992
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1993
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1994
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1995
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1996
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1997
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1998
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1999
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
2000
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
2001
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
2002
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
2003
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
2004
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
2005
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
2006
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
2007
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
2008
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
2009
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
2010
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
2011
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
2012
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
2013
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
2014
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
2015
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
2016
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
2017
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
2018
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
2019
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
2020
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
2021
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
2022
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
2023
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
2024
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
2025
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
2026
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
2027
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
2028
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
2029
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
2030
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
2031
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
2032
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
2033
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
2034
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
2035
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
2036
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
2037
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
2038
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
2039
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
2040
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
2041
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
2042
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
2043
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
2044
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
2045
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
2046
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
2047
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
2048
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
2049
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
2050
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
2051
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2052
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
2053
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
2054
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
2055
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
2056
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
2057
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
2058
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
2059
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2060
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2061
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2062
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
2063
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
2064
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
2065
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
2066
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
2067
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
2068
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
2069
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2070
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2071
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2072
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
2073
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
2074
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
2075
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
2076
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
2077
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
2078
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
2079
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
2080
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
2081
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
2082
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
2083
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
2084
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
2085
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
2086
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
2087
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
2088
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
2089
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
2090
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
2091
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
2092
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
2093
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
2094
+ --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
2095
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
2096
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
2097
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
2098
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
2099
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
2100
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
2101
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
2102
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2103
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
2104
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2105
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
2106
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2107
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
2108
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2109
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
2110
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
2111
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
2112
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
2113
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
2114
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
2115
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
2116
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2117
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
2118
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2119
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
2120
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2121
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
2122
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
2123
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
2124
+ --pf-v6-c-label__content--MaxWidth: 100%;
2125
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2126
+ --pf-v6-c-label__content--Cursor: initial;
2127
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2128
+ --pf-v6-c-label__text--MaxWidth: 100%;
2129
+ --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
2130
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2131
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
2132
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
2133
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
2134
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2135
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2136
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2137
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2138
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
2139
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
2140
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
2141
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
2142
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
2143
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
2144
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
2145
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
2146
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
2147
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
2148
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
2149
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2150
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2151
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2152
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2153
+ }
2154
+
2155
+ .pf-v6-c-label {
2156
+ position: relative;
2157
+ min-width: var(--pf-v6-c-label--MinWidth);
2158
+ max-width: var(--pf-v6-c-label--MaxWidth);
2159
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2160
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2161
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2162
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2163
+ font-size: var(--pf-v6-c-label--FontSize);
2164
+ white-space: nowrap;
2165
+ background: transparent;
2166
+ isolation: isolate;
2167
+ border: 0;
2168
+ border-radius: var(--pf-v6-c-label--BorderRadius);
2169
+ }
2170
+
2171
+ .pf-v6-c-label.pf-m-blue {
2172
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2173
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2174
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2175
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2176
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2177
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2178
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2179
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2180
+ }
2181
+
2182
+ .pf-v6-c-label.pf-m-red {
2183
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2184
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2185
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2186
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2187
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2188
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2189
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2190
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2191
+ }
2192
+
2193
+ .pf-v6-c-label.pf-m-orange {
2194
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2195
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2196
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2197
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2198
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2199
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2200
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2201
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2202
+ }
2203
+
2204
+ .pf-v6-c-label.pf-m-orangered {
2205
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2206
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2207
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2208
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2209
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2210
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2211
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2212
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2213
+ }
2214
+
2215
+ .pf-v6-c-label.pf-m-yellow {
2216
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2217
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2218
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2219
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2220
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2221
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2222
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2223
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2224
+ }
2225
+
2226
+ .pf-v6-c-label.pf-m-green {
2227
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2228
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2229
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2230
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2231
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2232
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2233
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2234
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2235
+ }
2236
+
2237
+ .pf-v6-c-label.pf-m-teal {
2238
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2239
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2240
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2241
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2242
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2243
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2244
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2245
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2246
+ }
2247
+
2248
+ .pf-v6-c-label.pf-m-purple {
2249
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2250
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2251
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2252
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2253
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2254
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2255
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2256
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2257
+ }
2258
+
2259
+ .pf-v6-c-label.pf-m-success {
2260
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2261
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2262
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2263
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2264
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2265
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2266
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2267
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2268
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2269
+ --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);
2270
+ }
2271
+
2272
+ .pf-v6-c-label.pf-m-warning {
2273
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2274
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2275
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2276
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2277
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2278
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2279
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2280
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2281
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2282
+ --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);
2283
+ }
2284
+
2285
+ .pf-v6-c-label.pf-m-danger {
2286
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2287
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2288
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2289
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2290
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2291
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2292
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2293
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2294
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2295
+ --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);
2296
+ }
2297
+
2298
+ .pf-v6-c-label.pf-m-info {
2299
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2300
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2301
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2302
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2303
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2304
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2305
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2306
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2307
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2308
+ --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);
2309
+ }
2310
+
2311
+ .pf-v6-c-label.pf-m-custom {
2312
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2313
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2314
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2315
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2316
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2317
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2318
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2319
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2320
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2321
+ --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);
2322
+ }
2323
+
2324
+ .pf-v6-c-label.pf-m-compact {
2325
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2326
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2327
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2328
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2329
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2330
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2331
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2332
+ }
2333
+
2334
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2335
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2336
+ }
2337
+
2338
+ .pf-v6-c-label.pf-m-outline {
2339
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2340
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2341
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2342
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2343
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2344
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2345
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2346
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2347
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2348
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2349
+ }
2350
+
2351
+ .pf-v6-c-label.pf-m-editable {
2352
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2353
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2354
+ }
2355
+
2356
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2357
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2358
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2359
+ }
2360
+
2361
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2362
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2363
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2364
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2365
+ }
2366
+
2367
+ .pf-v6-c-label.pf-m-editable-active {
2368
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2369
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2370
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2371
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2372
+ }
2373
+
2374
+ .pf-v6-c-label.pf-m-overflow {
2375
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2376
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2377
+ }
2378
+
2379
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2380
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2381
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2382
+ }
2383
+
2384
+ .pf-v6-c-label.pf-m-add {
2385
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2386
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2387
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2388
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2389
+ }
2390
+
2391
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2392
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2393
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2394
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2395
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2396
+ }
2397
+
2398
+ .pf-v6-c-label.pf-m-clickable {
2399
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2400
+ }
2401
+
2402
+ .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) {
2403
+ text-decoration-line: none;
2404
+ }
2405
+
2406
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2407
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2408
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2409
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2410
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2411
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2412
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2413
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2414
+ }
2415
+
2416
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2417
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2418
+ }
2419
+
2420
+ .pf-v6-c-label.pf-m-disabled {
2421
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2422
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2423
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2424
+ --pf-v6-c-label--BorderWidth: 0;
2425
+ pointer-events: none;
2426
+ }
2427
+
2428
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2429
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2430
+ }
2431
+
2432
+ .pf-v6-c-label,
2433
+ .pf-v6-c-label__content {
2434
+ display: inline-flex;
2435
+ align-items: center;
2436
+ justify-content: center;
2437
+ }
2438
+
2439
+ .pf-v6-c-label__text {
2440
+ overflow: hidden;
2441
+ text-overflow: ellipsis;
2442
+ white-space: nowrap;
2443
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
2444
+ }
2445
+
2446
+ .pf-v6-c-label__content {
2447
+ gap: var(--pf-v6-c-label__content--Gap);
2448
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
2449
+ padding: 0;
2450
+ overflow: hidden;
2451
+ color: var(--pf-v6-c-label--Color);
2452
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
2453
+ background: transparent;
2454
+ border-width: 0;
2455
+ }
2456
+
2457
+ .pf-v6-c-label__content::before {
2458
+ position: absolute;
2459
+ inset: 0;
2460
+ z-index: -1;
2461
+ pointer-events: none;
2462
+ content: "";
2463
+ background-color: var(--pf-v6-c-label--BackgroundColor);
2464
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2465
+ border-radius: var(--pf-v6-c-label--BorderRadius);
2466
+ }
2467
+
2468
+ input.pf-v6-c-label__content {
2469
+ overflow: hidden;
2470
+ text-overflow: ellipsis;
2471
+ white-space: nowrap;
2472
+ }
2473
+
2474
+ .pf-v6-c-label__icon {
2475
+ color: var(--pf-v6-c-label__icon--Color);
2476
+ }
2477
+
2478
+ .pf-v6-c-label__actions {
2479
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2480
+ }
2481
+
2482
+ .pf-v6-c-label__actions .pf-v6-c-button {
2483
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2484
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2485
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2486
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2487
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2488
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2489
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2490
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2491
+ }
2492
+
2493
+ .pf-v6-c-check {
2494
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2495
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2496
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2497
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2498
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2499
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2500
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2501
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2502
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2503
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2504
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2505
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2506
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2507
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2508
+ }
2509
+
2510
+ .pf-v6-c-check {
2511
+ display: grid;
2512
+ grid-template-columns: auto 1fr;
2513
+ grid-gap: var(--pf-v6-c-check--GridGap);
2514
+ accent-color: var(--pf-v6-c-check--AccentColor);
2515
+ }
2516
+
2517
+ .pf-v6-c-check.pf-m-standalone {
2518
+ display: inline-grid;
2519
+ grid-template-columns: auto;
2520
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2521
+ }
2522
+
2523
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2524
+ align-self: center;
2525
+ transform: none;
2526
+ }
2527
+
2528
+ .pf-v6-c-check__input {
2529
+ align-self: start;
2530
+ font-size: var(--pf-v6-c-check__label--FontSize);
2531
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2532
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2533
+ }
2534
+
2535
+ .pf-v6-c-check__label {
2536
+ font-size: var(--pf-v6-c-check__label--FontSize);
2537
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2538
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2539
+ color: var(--pf-v6-c-check__label--Color);
2540
+ }
2541
+
2542
+ .pf-v6-c-check__description {
2543
+ grid-column: 2;
2544
+ font-size: var(--pf-v6-c-check__description--FontSize);
2545
+ color: var(--pf-v6-c-check__description--Color);
2546
+ }
2547
+
2548
+ .pf-v6-c-check__body {
2549
+ grid-column: 2;
2550
+ }
2551
+
2552
+ .pf-v6-c-check__label,
2553
+ .pf-v6-c-check__input {
2554
+ justify-self: start;
2555
+ }
2556
+
2557
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2558
+ .pf-v6-c-check__input {
2559
+ cursor: pointer;
2560
+ }
2561
+
2562
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2563
+ .pf-v6-c-check__input:disabled,
2564
+ .pf-v6-c-check__input.pf-m-disabled {
2565
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2566
+ cursor: not-allowed;
2567
+ }
2568
+
2569
+ .pf-v6-c-check__label-required {
2570
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2571
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2572
+ color: var(--pf-v6-c-check__label-required--Color);
2573
+ }
2574
+
2575
+ .pf-v6-c-badge {
2576
+ --pf-v6-c-badge--BorderColor: transparent;
2577
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2578
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2579
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2580
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2581
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2582
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2583
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2584
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2585
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2586
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2587
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2588
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2589
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2590
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2591
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2592
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2593
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2594
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2595
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2596
+ }
2597
+
2598
+ .pf-v6-c-badge {
2599
+ position: relative;
2600
+ display: inline-block;
2601
+ min-width: var(--pf-v6-c-badge--MinWidth);
2602
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2603
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2604
+ font-size: var(--pf-v6-c-badge--FontSize);
2605
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2606
+ color: var(--pf-v6-c-badge--Color);
2607
+ text-align: center;
2608
+ white-space: nowrap;
2609
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2610
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2530
2611
  }
2531
2612
 
2532
- .pf-v6-c-label-group {
2533
- display: inline-flex;
2534
- row-gap: var(--pf-v6-c-label-group--RowGap);
2535
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
2536
- align-items: center;
2537
- max-width: var(--pf-v6-c-label-group--MaxWidth);
2613
+ .pf-v6-c-badge::after {
2614
+ position: absolute;
2615
+ inset: 0;
2616
+ pointer-events: none;
2617
+ content: "";
2618
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2619
+ border-radius: inherit;
2538
2620
  }
2539
2621
 
2540
- .pf-v6-c-label-group.pf-m-category {
2541
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2542
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2543
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2544
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2545
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2546
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2547
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2622
+ .pf-v6-c-badge.pf-m-read {
2623
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2624
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2625
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2548
2626
  }
2549
2627
 
2550
- .pf-v6-c-label-group.pf-m-vertical {
2551
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2552
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2553
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2554
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2555
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2556
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2557
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2628
+ .pf-v6-c-badge.pf-m-unread {
2629
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2630
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2631
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2558
2632
  }
2559
2633
 
2560
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2561
- align-items: flex-start;
2634
+ .pf-v6-c-badge.pf-m-disabled {
2635
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2636
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2562
2637
  }
2563
2638
 
2564
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2565
- flex-direction: column;
2566
- align-items: flex-start;
2567
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2639
+ .pf-v6-c-badge.pf-m-disabled::after {
2640
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2568
2641
  }
2569
2642
 
2570
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2571
- flex-direction: column;
2572
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2643
+ .pf-v6-c-badge__toggle-icon {
2644
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2645
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2573
2646
  }
2574
2647
 
2575
- .pf-v6-c-label-group.pf-m-editable,
2576
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2577
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2578
- display: flex;
2648
+ .pf-v6-c-spinner {
2649
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
2650
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
2651
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
2652
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
2653
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
2654
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
2655
+ --pf-v6-c-spinner--StrokeWidth: 10;
2656
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
2657
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
2658
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
2659
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
2660
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
2661
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
2662
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
2663
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
2579
2664
  }
2580
2665
 
2581
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2582
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2583
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2584
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2585
- flex: 1;
2666
+ .pf-v6-c-spinner {
2667
+ width: var(--pf-v6-c-spinner--Width);
2668
+ height: var(--pf-v6-c-spinner--Height);
2669
+ overflow: hidden;
2670
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
2586
2671
  }
2587
2672
 
2588
- .pf-v6-c-label-group__main {
2589
- display: flex;
2590
- flex: 1;
2591
- flex-wrap: wrap;
2592
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
2593
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2594
- align-items: baseline;
2595
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2673
+ .pf-v6-c-spinner.pf-m-inline {
2674
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
2596
2675
  }
2597
2676
 
2598
- .pf-v6-c-label-group__list {
2599
- display: inline-flex;
2600
- flex-wrap: wrap;
2601
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
2602
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2603
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
2677
+ .pf-v6-c-spinner.pf-m-xs {
2678
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
2679
+ --pf-v6-c-spinner--StrokeWidth: 15;
2604
2680
  }
2605
2681
 
2606
- .pf-v6-c-label-group__list-item {
2607
- display: inline-flex;
2608
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2682
+ .pf-v6-c-spinner.pf-m-sm {
2683
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
2609
2684
  }
2610
2685
 
2611
- .pf-v6-c-label-group__label {
2612
- overflow: hidden;
2613
- text-overflow: ellipsis;
2614
- white-space: nowrap;
2615
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2686
+ .pf-v6-c-spinner.pf-m-md {
2687
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
2616
2688
  }
2617
2689
 
2618
- .pf-v6-c-label-group__close {
2619
- display: flex;
2620
- align-self: flex-start;
2690
+ .pf-v6-c-spinner.pf-m-lg {
2691
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
2621
2692
  }
2622
2693
 
2623
- .pf-v6-c-label-group__close .pf-v6-c-button {
2624
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2625
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2626
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2627
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2628
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2694
+ .pf-v6-c-spinner.pf-m-xl {
2695
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
2629
2696
  }
2630
2697
 
2631
- .pf-v6-c-label-group__textarea {
2632
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2633
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2634
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2635
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2636
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2637
- white-space: nowrap;
2638
- resize: none;
2639
- border: 0;
2640
- -ms-overflow-style: none;
2641
- scrollbar-width: none;
2698
+ .pf-v6-c-spinner__path {
2699
+ width: 100%;
2700
+ height: 100%;
2701
+ stroke: var(--pf-v6-c-spinner--Color);
2702
+ stroke-dasharray: 283;
2703
+ stroke-dashoffset: 280;
2704
+ stroke-linecap: round;
2705
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
2706
+ transform-origin: 50% 50%;
2707
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
2642
2708
  }
2643
2709
 
2644
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2645
- display: none;
2710
+ @keyframes pf-v6-c-spinner-animation-rotate {
2711
+ 0% {
2712
+ transform: rotate(0deg);
2713
+ }
2714
+ 100% {
2715
+ transform: rotate(360deg);
2716
+ }
2717
+ }
2718
+ @keyframes pf-v6-c-spinner-animation-dash {
2719
+ 0% {
2720
+ stroke-dashoffset: 280;
2721
+ transform: rotate(0);
2722
+ }
2723
+ 15% {
2724
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
2725
+ }
2726
+ 40% {
2727
+ stroke-dasharray: 220;
2728
+ stroke-dashoffset: 150;
2729
+ }
2730
+ 100% {
2731
+ stroke-dashoffset: 280;
2732
+ transform: rotate(720deg);
2733
+ }
2646
2734
  }
2647
-
2648
2735
  .pf-v6-c-breadcrumb {
2649
2736
  --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2650
2737
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -3407,87 +3494,6 @@ button.pf-v6-c-breadcrumb__link {
3407
3494
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3408
3495
  }
3409
3496
 
3410
- .pf-v6-c-spinner {
3411
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3412
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3413
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3414
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3415
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3416
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3417
- --pf-v6-c-spinner--StrokeWidth: 10;
3418
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3419
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3420
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3421
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3422
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3423
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3424
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3425
- }
3426
-
3427
- .pf-v6-c-spinner {
3428
- width: var(--pf-v6-c-spinner--Width);
3429
- height: var(--pf-v6-c-spinner--Height);
3430
- overflow: hidden;
3431
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3432
- }
3433
-
3434
- .pf-v6-c-spinner.pf-m-inline {
3435
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3436
- }
3437
-
3438
- .pf-v6-c-spinner.pf-m-sm {
3439
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3440
- }
3441
-
3442
- .pf-v6-c-spinner.pf-m-md {
3443
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3444
- }
3445
-
3446
- .pf-v6-c-spinner.pf-m-lg {
3447
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3448
- }
3449
-
3450
- .pf-v6-c-spinner.pf-m-xl {
3451
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3452
- }
3453
-
3454
- .pf-v6-c-spinner__path {
3455
- width: 100%;
3456
- height: 100%;
3457
- stroke: var(--pf-v6-c-spinner--Color);
3458
- stroke-dasharray: 283;
3459
- stroke-dashoffset: 280;
3460
- stroke-linecap: round;
3461
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3462
- transform-origin: 50% 50%;
3463
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3464
- }
3465
-
3466
- @keyframes pf-v6-c-spinner-animation-rotate {
3467
- 0% {
3468
- transform: rotate(0deg);
3469
- }
3470
- 100% {
3471
- transform: rotate(360deg);
3472
- }
3473
- }
3474
- @keyframes pf-v6-c-spinner-animation-dash {
3475
- 0% {
3476
- stroke-dashoffset: 280;
3477
- transform: rotate(0);
3478
- }
3479
- 15% {
3480
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3481
- }
3482
- 40% {
3483
- stroke-dasharray: 220;
3484
- stroke-dashoffset: 150;
3485
- }
3486
- 100% {
3487
- stroke-dashoffset: 280;
3488
- transform: rotate(720deg);
3489
- }
3490
- }
3491
3497
  .pf-v6-c-tooltip {
3492
3498
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3493
3499
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);