@patternfly/react-templates 6.2.2 → 6.3.0-prerelease.10

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 (38) hide show
  1. package/CHANGELOG.md +68 -2
  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/esm/components/Dropdown/SimpleDropdown.d.ts +1 -1
  6. package/dist/esm/components/Dropdown/SimpleDropdown.d.ts.map +1 -1
  7. package/dist/esm/components/Select/CheckboxSelect.d.ts +1 -1
  8. package/dist/esm/components/Select/CheckboxSelect.d.ts.map +1 -1
  9. package/dist/esm/components/Select/MultiTypeaheadSelect.d.ts +6 -1
  10. package/dist/esm/components/Select/MultiTypeaheadSelect.d.ts.map +1 -1
  11. package/dist/esm/components/Select/MultiTypeaheadSelect.js +7 -6
  12. package/dist/esm/components/Select/MultiTypeaheadSelect.js.map +1 -1
  13. package/dist/esm/components/Select/SimpleSelect.d.ts +1 -1
  14. package/dist/esm/components/Select/SimpleSelect.d.ts.map +1 -1
  15. package/dist/esm/components/Select/TypeaheadSelect.d.ts +1 -1
  16. package/dist/esm/components/Select/TypeaheadSelect.d.ts.map +1 -1
  17. package/dist/js/components/Dropdown/SimpleDropdown.d.ts +1 -1
  18. package/dist/js/components/Dropdown/SimpleDropdown.d.ts.map +1 -1
  19. package/dist/js/components/Select/CheckboxSelect.d.ts +1 -1
  20. package/dist/js/components/Select/CheckboxSelect.d.ts.map +1 -1
  21. package/dist/js/components/Select/MultiTypeaheadSelect.d.ts +6 -1
  22. package/dist/js/components/Select/MultiTypeaheadSelect.d.ts.map +1 -1
  23. package/dist/js/components/Select/MultiTypeaheadSelect.js +7 -6
  24. package/dist/js/components/Select/MultiTypeaheadSelect.js.map +1 -1
  25. package/dist/js/components/Select/SimpleSelect.d.ts +1 -1
  26. package/dist/js/components/Select/SimpleSelect.d.ts.map +1 -1
  27. package/dist/js/components/Select/TypeaheadSelect.d.ts +1 -1
  28. package/dist/js/components/Select/TypeaheadSelect.d.ts.map +1 -1
  29. package/dist/umd/assets/{output-a09nbBE8.css → output-C0APc5ZR.css} +1389 -1390
  30. package/dist/umd/react-templates.min.js +1 -1
  31. package/package.json +6 -6
  32. package/src/components/Dropdown/SimpleDropdown.tsx +1 -1
  33. package/src/components/Select/CheckboxSelect.tsx +1 -1
  34. package/src/components/Select/MultiTypeaheadSelect.tsx +15 -7
  35. package/src/components/Select/SimpleSelect.tsx +1 -1
  36. package/src/components/Select/TypeaheadSelect.tsx +1 -1
  37. package/src/components/Select/__tests__/MultiTypeaheadSelect.test.tsx +31 -1
  38. package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap +2 -2
package/dist/umd/assets/{output-a09nbBE8.css → output-C0APc5ZR.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);
@@ -605,1074 +523,1084 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
605
523
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
606
524
  }
607
525
 
608
- .pf-v6-c-text-input-group {
609
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
610
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
611
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
612
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
613
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
614
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
615
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
616
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
617
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
618
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
619
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
620
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
621
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
622
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
623
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
624
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
625
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
626
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
627
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
628
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
629
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
630
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
631
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
632
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
633
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
634
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
635
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
636
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
637
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
638
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
639
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
640
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
641
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
642
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
643
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
644
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
645
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
646
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
647
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
648
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
649
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
650
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
651
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
652
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
653
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
654
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
655
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
656
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
657
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
658
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
526
+ .pf-v6-c-badge {
527
+ --pf-v6-c-badge--BorderColor: transparent;
528
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
529
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
530
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
531
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
532
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
533
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
534
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
535
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
536
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
537
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
538
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
539
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
540
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
541
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
542
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
543
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
544
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
545
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
546
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
659
547
  }
660
548
 
661
- .pf-v6-c-text-input-group {
549
+ .pf-v6-c-badge {
662
550
  position: relative;
663
- display: flex;
664
- width: 100%;
665
- font-size: var(--pf-v6-c-text-input-group__FontSize);
666
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
667
- color: var(--pf-v6-c-text-input-group--Color, inherit);
668
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
669
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
670
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
671
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
672
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
551
+ display: inline-block;
552
+ min-width: var(--pf-v6-c-badge--MinWidth);
553
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
554
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
555
+ font-size: var(--pf-v6-c-badge--FontSize);
556
+ font-weight: var(--pf-v6-c-badge--FontWeight);
557
+ color: var(--pf-v6-c-badge--Color);
558
+ text-align: center;
559
+ white-space: nowrap;
560
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
561
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
673
562
  }
674
563
 
675
- .pf-v6-c-text-input-group::before {
564
+ .pf-v6-c-badge::after {
676
565
  position: absolute;
677
566
  inset: 0;
678
567
  pointer-events: none;
679
568
  content: "";
680
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
681
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
682
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
683
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
684
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
685
- }
686
-
687
- .pf-v6-c-text-input-group.pf-m-disabled {
688
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
689
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
690
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
691
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
692
- pointer-events: none;
569
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
570
+ border-radius: inherit;
693
571
  }
694
572
 
695
- .pf-v6-c-text-input-group.pf-m-plain {
696
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
573
+ .pf-v6-c-badge.pf-m-read {
574
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
575
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
576
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
697
577
  }
698
578
 
699
- .pf-v6-c-text-input-group.pf-m-plain::before {
700
- border: 0;
579
+ .pf-v6-c-badge.pf-m-unread {
580
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
581
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
582
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
701
583
  }
702
584
 
703
- .pf-v6-c-text-input-group.pf-m-success {
704
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
705
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
706
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
585
+ .pf-v6-c-badge.pf-m-disabled {
586
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
587
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
707
588
  }
708
589
 
709
- .pf-v6-c-text-input-group.pf-m-warning {
710
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
711
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
712
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
590
+ .pf-v6-c-badge.pf-m-disabled::after {
591
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
713
592
  }
714
593
 
715
- .pf-v6-c-text-input-group.pf-m-error {
716
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
717
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
718
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
594
+ .pf-v6-c-badge__toggle-icon {
595
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
596
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
719
597
  }
720
598
 
721
- .pf-v6-c-text-input-group:hover {
722
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
599
+ .pf-v6-c-divider {
600
+ --pf-v6-c-divider--Display: flex;
601
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
602
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
603
+ --pf-v6-c-divider--before--FlexBasis: 100%;
723
604
  }
724
605
 
725
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
726
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
606
+ .pf-v6-c-divider {
607
+ flex-direction: row;
608
+ width: 100%;
609
+ height: var(--pf-v6-c-divider--Size);
610
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
611
+ --pf-v6-hidden-visible--hidden--Display: none;
612
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
613
+ display: var(--pf-v6-hidden-visible--Display);
614
+ flex-shrink: 0;
615
+ align-items: stretch;
616
+ align-self: stretch;
617
+ justify-content: center;
618
+ border: 0;
727
619
  }
728
620
 
729
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
730
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
731
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
621
+ .pf-v6-c-divider.pf-m-hidden {
622
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
732
623
  }
733
624
 
734
- .pf-v6-c-text-input-group__main {
735
- display: flex;
736
- flex: 1;
737
- flex-wrap: wrap;
738
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
739
- min-width: 0;
625
+ @media screen and (min-width: 36rem) {
626
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
627
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
628
+ }
629
+ .pf-v6-c-divider.pf-m-visible-on-sm {
630
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
631
+ }
740
632
  }
741
-
742
- .pf-v6-c-text-input-group__main.pf-m-icon {
743
- --pf-v6-c-text-input-group__text--Position: relative;
744
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
745
- display: inline-flex;
746
- align-items: center;
747
- justify-content: center;
748
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
633
+ @media screen and (min-width: 48rem) {
634
+ .pf-v6-c-divider.pf-m-hidden-on-md {
635
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
636
+ }
637
+ .pf-v6-c-divider.pf-m-visible-on-md {
638
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
639
+ }
749
640
  }
750
-
751
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
752
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
641
+ @media screen and (min-width: 62rem) {
642
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
643
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
644
+ }
645
+ .pf-v6-c-divider.pf-m-visible-on-lg {
646
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
647
+ }
753
648
  }
754
-
755
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
756
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
757
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
758
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
649
+ @media screen and (min-width: 75rem) {
650
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
651
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
652
+ }
653
+ .pf-v6-c-divider.pf-m-visible-on-xl {
654
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
655
+ }
656
+ }
657
+ @media screen and (min-width: 90.625rem) {
658
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
659
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
660
+ }
661
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
662
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
663
+ }
664
+ }
665
+ .pf-v6-c-divider::before {
666
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
667
+ content: "";
668
+ background-color: var(--pf-v6-c-divider--Color);
759
669
  }
760
670
 
761
- .pf-v6-c-text-input-group__text {
762
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
763
- display: inline-grid;
764
- flex: 1;
765
- grid-template-areas: "text-input";
766
- grid-template-columns: 1fr;
671
+ .pf-v6-c-divider.pf-m-horizontal {
672
+ flex-direction: row;
673
+ width: 100%;
674
+ height: var(--pf-v6-c-divider--Size);
767
675
  }
768
676
 
769
- .pf-v6-c-text-input-group__icon {
770
- position: absolute;
771
- inset-block-start: 50%;
772
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
773
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
774
- color: var(--pf-v6-c-text-input-group__icon--Color);
775
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
677
+ .pf-v6-c-divider.pf-m-vertical {
678
+ flex-direction: column;
679
+ width: var(--pf-v6-c-divider--Size);
680
+ height: inherit;
776
681
  }
777
682
 
778
- .pf-v6-c-text-input-group__icon.pf-m-status {
779
- inset-inline-start: auto;
780
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
781
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
683
+ .pf-v6-c-divider.pf-m-inset-none {
684
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
782
685
  }
783
686
 
784
- .pf-v6-c-text-input-group__text-input {
785
- overflow: hidden;
786
- text-overflow: ellipsis;
787
- white-space: nowrap;
788
- position: relative;
789
- width: 100%;
790
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
791
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
792
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
793
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
794
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
795
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
796
- border: 0;
797
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
687
+ .pf-v6-c-divider.pf-m-inset-xs {
688
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
798
689
  }
799
690
 
800
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
801
- grid-area: text-input;
691
+ .pf-v6-c-divider.pf-m-inset-sm {
692
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
802
693
  }
803
694
 
804
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
805
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
695
+ .pf-v6-c-divider.pf-m-inset-md {
696
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
806
697
  }
807
698
 
808
- .pf-v6-c-text-input-group__text-input::placeholder {
809
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
699
+ .pf-v6-c-divider.pf-m-inset-lg {
700
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
810
701
  }
811
702
 
812
- .pf-v6-c-text-input-group__utilities {
813
- display: flex;
814
- align-items: center;
815
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
816
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
703
+ .pf-v6-c-divider.pf-m-inset-xl {
704
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
817
705
  }
818
706
 
819
- .pf-v6-c-text-input-group__utilities > * + * {
820
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
707
+ .pf-v6-c-divider.pf-m-inset-2xl {
708
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
821
709
  }
822
710
 
823
- .pf-v6-c-text-input-group__group {
824
- display: flex;
711
+ .pf-v6-c-divider.pf-m-inset-3xl {
712
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
825
713
  }
826
714
 
827
- .pf-v6-c-label {
828
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
829
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
830
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
831
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
832
- --pf-v6-c-label--MaxWidth: 100%;
833
- --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)));
834
- --pf-v6-c-label--BorderWidth: 0;
835
- --pf-v6-c-label--BorderColor: transparent;
836
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
837
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
838
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
839
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
840
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
841
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
842
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
843
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
844
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
845
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
846
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
847
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
848
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
849
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
850
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
851
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
852
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
853
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
854
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
855
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
856
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
857
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
858
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
859
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
860
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
861
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
862
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
863
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
864
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
865
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
866
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
867
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
868
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
869
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
870
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
871
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
872
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
873
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
874
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
875
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
876
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
877
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
878
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
879
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
880
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
881
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
882
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
883
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
884
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
885
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
886
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
887
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
888
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
889
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
890
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
891
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
892
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
893
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
894
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
895
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
896
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
897
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
898
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
899
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
900
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
901
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
902
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
903
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
904
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
905
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
906
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
907
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
908
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
909
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
910
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
911
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
912
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
913
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
914
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
915
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
916
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
917
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
918
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
919
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
920
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
921
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
922
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
923
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
924
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
925
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
926
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
927
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
928
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
929
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
930
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
931
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
932
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
933
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
934
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
935
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
936
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
937
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
938
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
939
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
940
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
941
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
942
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
943
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
944
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
945
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
946
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
947
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
948
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
949
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
950
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
951
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
952
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
953
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
954
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
955
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
956
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
957
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
958
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
959
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
960
- --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
961
- --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
962
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
963
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
964
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
965
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
966
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
967
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
968
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
969
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
970
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
971
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
972
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
973
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
974
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
975
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
976
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
977
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
978
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
979
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
980
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
981
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
982
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
983
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
984
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
985
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
986
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
987
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
988
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
989
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
990
- --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)));
991
- --pf-v6-c-label__content--MaxWidth: 100%;
992
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
993
- --pf-v6-c-label__content--Cursor: initial;
994
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
995
- --pf-v6-c-label__text--MaxWidth: 100%;
996
- --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
997
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
998
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
999
- --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
1000
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
1001
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1002
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1003
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1004
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1005
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1006
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1007
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1008
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1009
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1010
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1011
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
1012
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1013
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1014
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1015
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1016
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1017
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1018
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1019
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1020
- }
1021
-
1022
- .pf-v6-c-label {
1023
- position: relative;
1024
- min-width: var(--pf-v6-c-label--MinWidth);
1025
- max-width: var(--pf-v6-c-label--MaxWidth);
1026
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1027
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1028
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1029
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1030
- font-size: var(--pf-v6-c-label--FontSize);
1031
- white-space: nowrap;
1032
- background: transparent;
1033
- isolation: isolate;
1034
- border: 0;
1035
- border-radius: var(--pf-v6-c-label--BorderRadius);
715
+ @media (min-width: 36rem) {
716
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
717
+ flex-direction: row;
718
+ width: 100%;
719
+ height: var(--pf-v6-c-divider--Size);
720
+ }
1036
721
  }
1037
-
1038
- .pf-v6-c-label.pf-m-blue {
1039
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1040
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1041
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1042
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1043
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1044
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1045
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1046
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
722
+ @media (min-width: 36rem) {
723
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
724
+ flex-direction: column;
725
+ width: var(--pf-v6-c-divider--Size);
726
+ height: inherit;
727
+ }
1047
728
  }
1048
-
1049
- .pf-v6-c-label.pf-m-red {
1050
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1051
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1052
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1053
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1054
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1055
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1056
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1057
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
729
+ @media (min-width: 36rem) {
730
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
731
+ --pf-v6-c-divider--before--FlexBasis: 100%;
732
+ }
733
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
734
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
735
+ }
736
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
737
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
738
+ }
739
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
740
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
741
+ }
742
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
743
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
744
+ }
745
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
746
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
747
+ }
748
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
749
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
750
+ }
751
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
752
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
753
+ }
1058
754
  }
1059
-
1060
- .pf-v6-c-label.pf-m-orange {
1061
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1062
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1063
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1064
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1065
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1066
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1067
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1068
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
755
+ @media (min-width: 48rem) {
756
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
757
+ flex-direction: row;
758
+ width: 100%;
759
+ height: var(--pf-v6-c-divider--Size);
760
+ }
1069
761
  }
1070
-
1071
- .pf-v6-c-label.pf-m-orangered {
1072
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1073
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1074
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1075
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1076
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1077
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1078
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1079
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
762
+ @media (min-width: 48rem) {
763
+ .pf-v6-c-divider.pf-m-vertical-on-md {
764
+ flex-direction: column;
765
+ width: var(--pf-v6-c-divider--Size);
766
+ height: inherit;
767
+ }
1080
768
  }
1081
-
1082
- .pf-v6-c-label.pf-m-yellow {
1083
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1084
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1085
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1086
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1087
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1088
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1089
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1090
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
769
+ @media (min-width: 48rem) {
770
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
771
+ --pf-v6-c-divider--before--FlexBasis: 100%;
772
+ }
773
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
774
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
775
+ }
776
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
777
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
778
+ }
779
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
780
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
781
+ }
782
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
783
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
784
+ }
785
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
786
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
787
+ }
788
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
789
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
790
+ }
791
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
792
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
793
+ }
1091
794
  }
1092
-
1093
- .pf-v6-c-label.pf-m-green {
1094
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1095
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1096
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1097
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1098
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1099
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1100
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1101
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
795
+ @media (min-width: 62rem) {
796
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
797
+ flex-direction: row;
798
+ width: 100%;
799
+ height: var(--pf-v6-c-divider--Size);
800
+ }
1102
801
  }
1103
-
1104
- .pf-v6-c-label.pf-m-teal {
1105
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1106
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1107
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1108
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1109
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1110
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1111
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1112
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
802
+ @media (min-width: 62rem) {
803
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
804
+ flex-direction: column;
805
+ width: var(--pf-v6-c-divider--Size);
806
+ height: inherit;
807
+ }
1113
808
  }
1114
-
1115
- .pf-v6-c-label.pf-m-purple {
1116
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1117
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1118
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1119
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1120
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1121
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1122
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1123
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
809
+ @media (min-width: 62rem) {
810
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
811
+ --pf-v6-c-divider--before--FlexBasis: 100%;
812
+ }
813
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
814
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
815
+ }
816
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
817
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
818
+ }
819
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
820
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
821
+ }
822
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
823
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
824
+ }
825
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
826
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
827
+ }
828
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
829
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
830
+ }
831
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
832
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
833
+ }
1124
834
  }
1125
-
1126
- .pf-v6-c-label.pf-m-success {
1127
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1128
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1129
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1130
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1131
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1132
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1133
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1134
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1135
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1136
- --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);
835
+ @media (min-width: 75rem) {
836
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
837
+ flex-direction: row;
838
+ width: 100%;
839
+ height: var(--pf-v6-c-divider--Size);
840
+ }
1137
841
  }
1138
-
1139
- .pf-v6-c-label.pf-m-warning {
1140
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1141
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1142
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1143
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1144
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1145
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1146
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1147
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1148
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1149
- --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);
842
+ @media (min-width: 75rem) {
843
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
844
+ flex-direction: column;
845
+ width: var(--pf-v6-c-divider--Size);
846
+ height: inherit;
847
+ }
1150
848
  }
1151
-
1152
- .pf-v6-c-label.pf-m-danger {
1153
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1154
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1155
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1156
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1157
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1158
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1159
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1160
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1161
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1162
- --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);
849
+ @media (min-width: 75rem) {
850
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
851
+ --pf-v6-c-divider--before--FlexBasis: 100%;
852
+ }
853
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
854
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
855
+ }
856
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
857
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
858
+ }
859
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
860
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
861
+ }
862
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
863
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
864
+ }
865
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
866
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
867
+ }
868
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
869
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
870
+ }
871
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
872
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
873
+ }
1163
874
  }
1164
-
1165
- .pf-v6-c-label.pf-m-info {
1166
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1167
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1168
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1169
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1170
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1171
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1172
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1173
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1174
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1175
- --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);
875
+ @media (min-width: 90.625rem) {
876
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
877
+ flex-direction: row;
878
+ width: 100%;
879
+ height: var(--pf-v6-c-divider--Size);
880
+ }
1176
881
  }
1177
-
1178
- .pf-v6-c-label.pf-m-custom {
1179
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1180
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1181
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1182
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1183
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1184
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1185
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1186
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1187
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1188
- --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);
882
+ @media (min-width: 90.625rem) {
883
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
884
+ flex-direction: column;
885
+ width: var(--pf-v6-c-divider--Size);
886
+ height: inherit;
887
+ }
1189
888
  }
1190
-
1191
- .pf-v6-c-label.pf-m-compact {
1192
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1193
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1194
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1195
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1196
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1197
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1198
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
889
+ @media (min-width: 90.625rem) {
890
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
891
+ --pf-v6-c-divider--before--FlexBasis: 100%;
892
+ }
893
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
894
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
895
+ }
896
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
897
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
898
+ }
899
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
900
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
901
+ }
902
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
903
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
904
+ }
905
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
906
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
907
+ }
908
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
909
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
910
+ }
911
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
912
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
913
+ }
1199
914
  }
1200
-
1201
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1202
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
915
+ .pf-v6-c-label-group {
916
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
917
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
918
+ --pf-v6-c-label-group--MaxWidth: 100%;
919
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
920
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
921
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
922
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
923
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
924
+ --pf-v6-c-label-group__main--MinWidth: 0;
925
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
926
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
927
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
928
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
929
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
930
+ --pf-v6-c-label-group__list--MinWidth: 0;
931
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
932
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
933
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
934
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
935
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
936
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
937
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
938
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
939
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
940
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
941
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
942
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
943
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
944
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
945
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
946
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
947
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
948
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
949
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
950
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
951
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
952
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1203
953
  }
1204
954
 
1205
- .pf-v6-c-label.pf-m-outline {
1206
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1207
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1208
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1209
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1210
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1211
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1212
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1213
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1214
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1215
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
955
+ .pf-v6-c-label-group {
956
+ display: inline-flex;
957
+ row-gap: var(--pf-v6-c-label-group--RowGap);
958
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
959
+ align-items: center;
960
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1216
961
  }
1217
962
 
1218
- .pf-v6-c-label.pf-m-editable {
1219
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1220
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
963
+ .pf-v6-c-label-group.pf-m-category {
964
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
965
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
966
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
967
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
968
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
969
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
970
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1221
971
  }
1222
972
 
1223
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1224
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1225
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
973
+ .pf-v6-c-label-group.pf-m-vertical {
974
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
975
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
976
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
977
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
978
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
979
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
980
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1226
981
  }
1227
982
 
1228
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1229
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1230
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1231
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
983
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
984
+ align-items: flex-start;
1232
985
  }
1233
986
 
1234
- .pf-v6-c-label.pf-m-editable-active {
1235
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1236
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1237
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1238
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
987
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
988
+ flex-direction: column;
989
+ align-items: flex-start;
990
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1239
991
  }
1240
992
 
1241
- .pf-v6-c-label.pf-m-overflow {
1242
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1243
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
993
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
994
+ flex-direction: column;
995
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1244
996
  }
1245
997
 
1246
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1247
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1248
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
998
+ .pf-v6-c-label-group.pf-m-editable,
999
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1000
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1001
+ display: flex;
1249
1002
  }
1250
1003
 
1251
- .pf-v6-c-label.pf-m-add {
1252
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1253
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1254
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1255
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1004
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1005
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1006
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1007
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1008
+ flex: 1;
1256
1009
  }
1257
1010
 
1258
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1259
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1260
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1261
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1262
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1011
+ .pf-v6-c-label-group__main {
1012
+ display: flex;
1013
+ flex: 1;
1014
+ flex-wrap: wrap;
1015
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1016
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1017
+ align-items: baseline;
1018
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1263
1019
  }
1264
1020
 
1265
- .pf-v6-c-label.pf-m-clickable {
1266
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1021
+ .pf-v6-c-label-group__list {
1022
+ display: inline-flex;
1023
+ flex-wrap: wrap;
1024
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1025
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1026
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1267
1027
  }
1268
1028
 
1269
- .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) {
1270
- text-decoration-line: none;
1029
+ .pf-v6-c-label-group__list-item {
1030
+ display: inline-flex;
1031
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1271
1032
  }
1272
1033
 
1273
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1274
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1275
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1276
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1277
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1278
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1279
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1280
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1034
+ .pf-v6-c-label-group__label {
1035
+ overflow: hidden;
1036
+ text-overflow: ellipsis;
1037
+ white-space: nowrap;
1038
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1281
1039
  }
1282
1040
 
1283
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1284
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1041
+ .pf-v6-c-label-group__close {
1042
+ display: flex;
1043
+ align-self: flex-start;
1285
1044
  }
1286
1045
 
1287
- .pf-v6-c-label.pf-m-disabled {
1288
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1289
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1290
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1291
- --pf-v6-c-label--BorderWidth: 0;
1292
- pointer-events: none;
1046
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1047
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1048
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1049
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1050
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1051
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1293
1052
  }
1294
1053
 
1295
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1296
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1054
+ .pf-v6-c-label-group__textarea {
1055
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1056
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1057
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1058
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1059
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1060
+ white-space: nowrap;
1061
+ resize: none;
1062
+ border: 0;
1063
+ -ms-overflow-style: none;
1064
+ scrollbar-width: none;
1297
1065
  }
1298
1066
 
1299
- .pf-v6-c-label,
1300
- .pf-v6-c-label__content {
1301
- display: inline-flex;
1302
- align-items: center;
1303
- justify-content: center;
1067
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1068
+ display: none;
1069
+ }
1070
+
1071
+ .pf-v6-c-label {
1072
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1073
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1074
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1075
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1076
+ --pf-v6-c-label--MaxWidth: 100%;
1077
+ --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)));
1078
+ --pf-v6-c-label--BorderWidth: 0;
1079
+ --pf-v6-c-label--BorderColor: transparent;
1080
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1081
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1082
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1083
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1084
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1085
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1086
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1087
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1088
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1089
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1090
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1091
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1092
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1093
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1094
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1095
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1096
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1097
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1098
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1099
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1100
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1101
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1102
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1103
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1104
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1105
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1106
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1107
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1108
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1109
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1110
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1111
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1112
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1113
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1114
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1115
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1116
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1117
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1118
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1119
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1120
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1121
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1122
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1123
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1124
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1125
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1126
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1127
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1128
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1129
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1130
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1131
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1132
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1133
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1134
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1135
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1136
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1137
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1138
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1139
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1140
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1141
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1142
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1143
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1144
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1145
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1146
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1147
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1148
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1149
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1150
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1151
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1152
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1153
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1154
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1155
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1156
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1157
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1158
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1159
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1160
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1161
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1162
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1163
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1164
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1165
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1166
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1167
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1168
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1169
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1170
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1171
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1172
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1173
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1174
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1175
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1176
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1177
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1178
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1179
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1180
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1181
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1182
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1183
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1184
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1185
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1186
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1187
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1188
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1189
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1190
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1191
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1192
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1193
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1194
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1195
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1196
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1197
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1198
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1199
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1200
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1201
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1202
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1203
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1204
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
1205
+ --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
1206
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1207
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1208
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1209
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1210
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1211
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1212
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1213
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1214
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1215
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1216
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1217
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1218
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1219
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1220
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1221
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
1222
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1223
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1224
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1225
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1226
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1227
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1228
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1229
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1230
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1231
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1232
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1233
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1234
+ --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)));
1235
+ --pf-v6-c-label__content--MaxWidth: 100%;
1236
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1237
+ --pf-v6-c-label__content--Cursor: initial;
1238
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1239
+ --pf-v6-c-label__text--MaxWidth: 100%;
1240
+ --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
1241
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1242
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1243
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
1244
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
1245
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1246
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1247
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1248
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1249
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1250
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1251
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1252
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1253
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1254
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1255
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
1256
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1257
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1258
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1259
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1260
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1261
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1262
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1263
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1304
1264
  }
1305
1265
 
1306
- .pf-v6-c-label__text {
1307
- overflow: hidden;
1308
- text-overflow: ellipsis;
1266
+ .pf-v6-c-label {
1267
+ position: relative;
1268
+ min-width: var(--pf-v6-c-label--MinWidth);
1269
+ max-width: var(--pf-v6-c-label--MaxWidth);
1270
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1271
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1272
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1273
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1274
+ font-size: var(--pf-v6-c-label--FontSize);
1309
1275
  white-space: nowrap;
1310
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1311
- }
1312
-
1313
- .pf-v6-c-label__content {
1314
- gap: var(--pf-v6-c-label__content--Gap);
1315
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1316
- padding: 0;
1317
- overflow: hidden;
1318
- color: var(--pf-v6-c-label--Color);
1319
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1320
1276
  background: transparent;
1321
- border-width: 0;
1322
- }
1323
-
1324
- .pf-v6-c-label__content::before {
1325
- position: absolute;
1326
- inset: 0;
1327
- z-index: -1;
1328
- pointer-events: none;
1329
- content: "";
1330
- background-color: var(--pf-v6-c-label--BackgroundColor);
1331
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1277
+ isolation: isolate;
1278
+ border: 0;
1332
1279
  border-radius: var(--pf-v6-c-label--BorderRadius);
1333
1280
  }
1334
1281
 
1335
- input.pf-v6-c-label__content {
1336
- overflow: hidden;
1337
- text-overflow: ellipsis;
1338
- white-space: nowrap;
1282
+ .pf-v6-c-label.pf-m-blue {
1283
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1284
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1285
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1286
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1287
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1288
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1289
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1290
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1339
1291
  }
1340
1292
 
1341
- .pf-v6-c-label__icon {
1342
- color: var(--pf-v6-c-label__icon--Color);
1293
+ .pf-v6-c-label.pf-m-red {
1294
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1295
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1296
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1297
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1298
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1299
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1300
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1301
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1343
1302
  }
1344
1303
 
1345
- .pf-v6-c-label__actions {
1346
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1304
+ .pf-v6-c-label.pf-m-orange {
1305
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1306
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1307
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1308
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1309
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1310
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1311
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1312
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1347
1313
  }
1348
1314
 
1349
- .pf-v6-c-label__actions .pf-v6-c-button {
1350
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1351
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1352
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1353
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1354
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1355
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1356
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1357
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1315
+ .pf-v6-c-label.pf-m-orangered {
1316
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1317
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1318
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1319
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1320
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1321
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1322
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1323
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1358
1324
  }
1359
1325
 
1360
- .pf-v6-c-divider {
1361
- --pf-v6-c-divider--Display: flex;
1362
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1363
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1364
- --pf-v6-c-divider--before--FlexBasis: 100%;
1326
+ .pf-v6-c-label.pf-m-yellow {
1327
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1328
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1329
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1330
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1331
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1332
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1333
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1334
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1365
1335
  }
1366
1336
 
1367
- .pf-v6-c-divider {
1368
- flex-direction: row;
1369
- width: 100%;
1370
- height: var(--pf-v6-c-divider--Size);
1371
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1372
- --pf-v6-hidden-visible--hidden--Display: none;
1373
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1374
- display: var(--pf-v6-hidden-visible--Display);
1375
- flex-shrink: 0;
1376
- align-items: stretch;
1377
- align-self: stretch;
1378
- justify-content: center;
1379
- border: 0;
1337
+ .pf-v6-c-label.pf-m-green {
1338
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1339
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1340
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1341
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1342
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1343
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1344
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1345
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1380
1346
  }
1381
1347
 
1382
- .pf-v6-c-divider.pf-m-hidden {
1383
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1348
+ .pf-v6-c-label.pf-m-teal {
1349
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1350
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1351
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1352
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1353
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1354
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1355
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1356
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1384
1357
  }
1385
1358
 
1386
- @media screen and (min-width: 36rem) {
1387
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1388
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1389
- }
1390
- .pf-v6-c-divider.pf-m-visible-on-sm {
1391
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1392
- }
1359
+ .pf-v6-c-label.pf-m-purple {
1360
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1361
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1362
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1363
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1364
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1365
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1366
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1367
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1393
1368
  }
1394
- @media screen and (min-width: 48rem) {
1395
- .pf-v6-c-divider.pf-m-hidden-on-md {
1396
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1397
- }
1398
- .pf-v6-c-divider.pf-m-visible-on-md {
1399
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1400
- }
1369
+
1370
+ .pf-v6-c-label.pf-m-success {
1371
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1372
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1373
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1374
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1375
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1376
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1377
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1378
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1379
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1380
+ --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);
1401
1381
  }
1402
- @media screen and (min-width: 62rem) {
1403
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1404
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1405
- }
1406
- .pf-v6-c-divider.pf-m-visible-on-lg {
1407
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1408
- }
1382
+
1383
+ .pf-v6-c-label.pf-m-warning {
1384
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1385
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1386
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1387
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1388
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1389
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1390
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1391
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1392
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1393
+ --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);
1409
1394
  }
1410
- @media screen and (min-width: 75rem) {
1411
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1412
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1413
- }
1414
- .pf-v6-c-divider.pf-m-visible-on-xl {
1415
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1416
- }
1395
+
1396
+ .pf-v6-c-label.pf-m-danger {
1397
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1398
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1399
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1400
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1401
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1402
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1403
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1404
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1405
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1406
+ --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);
1417
1407
  }
1418
- @media screen and (min-width: 90.625rem) {
1419
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1420
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1421
- }
1422
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1423
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1424
- }
1408
+
1409
+ .pf-v6-c-label.pf-m-info {
1410
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1411
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1412
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1413
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1414
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1415
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1416
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1417
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1418
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1419
+ --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);
1425
1420
  }
1426
- .pf-v6-c-divider::before {
1427
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1428
- content: "";
1429
- background-color: var(--pf-v6-c-divider--Color);
1421
+
1422
+ .pf-v6-c-label.pf-m-custom {
1423
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1424
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1425
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1426
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1427
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1428
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1429
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1430
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1431
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1432
+ --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);
1430
1433
  }
1431
1434
 
1432
- .pf-v6-c-divider.pf-m-horizontal {
1433
- flex-direction: row;
1434
- width: 100%;
1435
- height: var(--pf-v6-c-divider--Size);
1435
+ .pf-v6-c-label.pf-m-compact {
1436
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1437
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1438
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1439
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1440
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1441
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1442
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1436
1443
  }
1437
1444
 
1438
- .pf-v6-c-divider.pf-m-vertical {
1439
- flex-direction: column;
1440
- width: var(--pf-v6-c-divider--Size);
1441
- height: inherit;
1445
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1446
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1442
1447
  }
1443
1448
 
1444
- .pf-v6-c-divider.pf-m-inset-none {
1445
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1449
+ .pf-v6-c-label.pf-m-outline {
1450
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1451
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1452
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1453
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1454
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1455
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1456
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1457
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1458
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1459
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1446
1460
  }
1447
1461
 
1448
- .pf-v6-c-divider.pf-m-inset-xs {
1449
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1462
+ .pf-v6-c-label.pf-m-editable {
1463
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1464
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1450
1465
  }
1451
1466
 
1452
- .pf-v6-c-divider.pf-m-inset-sm {
1453
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1467
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1468
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1469
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1454
1470
  }
1455
1471
 
1456
- .pf-v6-c-divider.pf-m-inset-md {
1457
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1472
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1473
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1474
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1475
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1458
1476
  }
1459
1477
 
1460
- .pf-v6-c-divider.pf-m-inset-lg {
1461
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1478
+ .pf-v6-c-label.pf-m-editable-active {
1479
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1480
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1481
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1482
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1462
1483
  }
1463
1484
 
1464
- .pf-v6-c-divider.pf-m-inset-xl {
1465
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1485
+ .pf-v6-c-label.pf-m-overflow {
1486
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1487
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1466
1488
  }
1467
1489
 
1468
- .pf-v6-c-divider.pf-m-inset-2xl {
1469
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1490
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1491
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1492
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1470
1493
  }
1471
1494
 
1472
- .pf-v6-c-divider.pf-m-inset-3xl {
1473
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1495
+ .pf-v6-c-label.pf-m-add {
1496
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1497
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1498
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1499
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1474
1500
  }
1475
1501
 
1476
- @media (min-width: 36rem) {
1477
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1478
- flex-direction: row;
1479
- width: 100%;
1480
- height: var(--pf-v6-c-divider--Size);
1481
- }
1502
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1503
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1504
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1505
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1506
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1482
1507
  }
1483
- @media (min-width: 36rem) {
1484
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1485
- flex-direction: column;
1486
- width: var(--pf-v6-c-divider--Size);
1487
- height: inherit;
1488
- }
1508
+
1509
+ .pf-v6-c-label.pf-m-clickable {
1510
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1489
1511
  }
1490
- @media (min-width: 36rem) {
1491
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1492
- --pf-v6-c-divider--before--FlexBasis: 100%;
1493
- }
1494
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1495
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1496
- }
1497
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1498
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1499
- }
1500
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1501
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1502
- }
1503
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1504
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1505
- }
1506
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1507
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1508
- }
1509
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1510
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1511
- }
1512
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1513
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1514
- }
1512
+
1513
+ .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) {
1514
+ text-decoration-line: none;
1515
1515
  }
1516
- @media (min-width: 48rem) {
1517
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1518
- flex-direction: row;
1519
- width: 100%;
1520
- height: var(--pf-v6-c-divider--Size);
1521
- }
1516
+
1517
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1518
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1519
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1520
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1521
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1522
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1523
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1524
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1522
1525
  }
1523
- @media (min-width: 48rem) {
1524
- .pf-v6-c-divider.pf-m-vertical-on-md {
1525
- flex-direction: column;
1526
- width: var(--pf-v6-c-divider--Size);
1527
- height: inherit;
1528
- }
1526
+
1527
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1528
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1529
1529
  }
1530
- @media (min-width: 48rem) {
1531
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1532
- --pf-v6-c-divider--before--FlexBasis: 100%;
1533
- }
1534
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1535
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1536
- }
1537
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1538
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1539
- }
1540
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1541
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1542
- }
1543
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1544
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1545
- }
1546
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1547
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1548
- }
1549
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1550
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1551
- }
1552
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1553
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1554
- }
1530
+
1531
+ .pf-v6-c-label.pf-m-disabled {
1532
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1533
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1534
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1535
+ --pf-v6-c-label--BorderWidth: 0;
1536
+ pointer-events: none;
1555
1537
  }
1556
- @media (min-width: 62rem) {
1557
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1558
- flex-direction: row;
1559
- width: 100%;
1560
- height: var(--pf-v6-c-divider--Size);
1561
- }
1538
+
1539
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1540
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1562
1541
  }
1563
- @media (min-width: 62rem) {
1564
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1565
- flex-direction: column;
1566
- width: var(--pf-v6-c-divider--Size);
1567
- height: inherit;
1568
- }
1542
+
1543
+ .pf-v6-c-label,
1544
+ .pf-v6-c-label__content {
1545
+ display: inline-flex;
1546
+ align-items: center;
1547
+ justify-content: center;
1569
1548
  }
1570
- @media (min-width: 62rem) {
1571
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1572
- --pf-v6-c-divider--before--FlexBasis: 100%;
1573
- }
1574
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1575
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1576
- }
1577
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1578
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1579
- }
1580
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1581
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1582
- }
1583
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1584
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1585
- }
1586
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1587
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1588
- }
1589
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1590
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1591
- }
1592
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1593
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1594
- }
1549
+
1550
+ .pf-v6-c-label__text {
1551
+ overflow: hidden;
1552
+ text-overflow: ellipsis;
1553
+ white-space: nowrap;
1554
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1595
1555
  }
1596
- @media (min-width: 75rem) {
1597
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1598
- flex-direction: row;
1599
- width: 100%;
1600
- height: var(--pf-v6-c-divider--Size);
1601
- }
1556
+
1557
+ .pf-v6-c-label__content {
1558
+ gap: var(--pf-v6-c-label__content--Gap);
1559
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1560
+ padding: 0;
1561
+ overflow: hidden;
1562
+ color: var(--pf-v6-c-label--Color);
1563
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1564
+ background: transparent;
1565
+ border-width: 0;
1602
1566
  }
1603
- @media (min-width: 75rem) {
1604
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1605
- flex-direction: column;
1606
- width: var(--pf-v6-c-divider--Size);
1607
- height: inherit;
1608
- }
1567
+
1568
+ .pf-v6-c-label__content::before {
1569
+ position: absolute;
1570
+ inset: 0;
1571
+ z-index: -1;
1572
+ pointer-events: none;
1573
+ content: "";
1574
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1575
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1576
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1609
1577
  }
1610
- @media (min-width: 75rem) {
1611
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1612
- --pf-v6-c-divider--before--FlexBasis: 100%;
1613
- }
1614
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1615
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1616
- }
1617
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1618
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1619
- }
1620
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1621
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1622
- }
1623
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1624
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1625
- }
1626
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1627
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1628
- }
1629
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1630
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1631
- }
1632
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1633
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1634
- }
1578
+
1579
+ input.pf-v6-c-label__content {
1580
+ overflow: hidden;
1581
+ text-overflow: ellipsis;
1582
+ white-space: nowrap;
1635
1583
  }
1636
- @media (min-width: 90.625rem) {
1637
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1638
- flex-direction: row;
1639
- width: 100%;
1640
- height: var(--pf-v6-c-divider--Size);
1641
- }
1584
+
1585
+ .pf-v6-c-label__icon {
1586
+ color: var(--pf-v6-c-label__icon--Color);
1642
1587
  }
1643
- @media (min-width: 90.625rem) {
1644
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1645
- flex-direction: column;
1646
- width: var(--pf-v6-c-divider--Size);
1647
- height: inherit;
1648
- }
1588
+
1589
+ .pf-v6-c-label__actions {
1590
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1649
1591
  }
1650
- @media (min-width: 90.625rem) {
1651
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1652
- --pf-v6-c-divider--before--FlexBasis: 100%;
1653
- }
1654
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1655
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1656
- }
1657
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1658
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1659
- }
1660
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1661
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1662
- }
1663
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1664
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1665
- }
1666
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1667
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1668
- }
1669
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1670
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1671
- }
1672
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1673
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1674
- }
1592
+
1593
+ .pf-v6-c-label__actions .pf-v6-c-button {
1594
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1595
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1596
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1597
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1598
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1599
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1600
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1601
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1675
1602
  }
1603
+
1676
1604
  .pf-v6-c-button {
1677
1605
  --pf-v6-c-button--Display: inline-flex;
1678
1606
  --pf-v6-c-button--AlignItems: baseline;
@@ -2316,302 +2244,374 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2316
2244
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2317
2245
  }
2318
2246
 
2319
- .pf-v6-c-button.pf-m-in-progress {
2320
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2247
+ .pf-v6-c-button.pf-m-in-progress {
2248
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2249
+ }
2250
+
2251
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2252
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2253
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2254
+ }
2255
+
2256
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2257
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2258
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2259
+ }
2260
+
2261
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2262
+ opacity: 0;
2263
+ }
2264
+
2265
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2266
+ animation-name: pf-v6-c-button-icon-notify;
2267
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2268
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2269
+ }
2270
+
2271
+ .pf-v6-c-button__icon {
2272
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2273
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2274
+ color: var(--pf-v6-c-button__icon--Color);
2275
+ }
2276
+
2277
+ .pf-v6-c-button__icon.pf-m-start {
2278
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2279
+ }
2280
+
2281
+ .pf-v6-c-button__icon.pf-m-end {
2282
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2283
+ }
2284
+
2285
+ .pf-v6-c-button__progress {
2286
+ position: absolute;
2287
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2288
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2289
+ line-height: 1;
2290
+ color: var(--pf-v6-c-button__progress--Color);
2291
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2292
+ }
2293
+
2294
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2295
+ --pf-v6-c-spinner--Color: currentcolor;
2296
+ }
2297
+
2298
+ .pf-v6-c-button__count {
2299
+ display: inline-flex;
2300
+ align-items: center;
2301
+ }
2302
+
2303
+ @keyframes pf-v6-c-button-icon-notify {
2304
+ 33% {
2305
+ transform: rotate(30deg);
2306
+ }
2307
+ 66% {
2308
+ transform: rotate(-60deg);
2309
+ }
2310
+ }
2311
+ @keyframes pf-v6-c-button-icon-favorited {
2312
+ 50% {
2313
+ transform: scale(1.5);
2314
+ }
2315
+ }
2316
+ .pf-v6-c-text-input-group {
2317
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2318
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
2319
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2320
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2321
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2322
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2323
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2324
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2325
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2326
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2327
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2328
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2329
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2330
+ --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));
2331
+ --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));
2332
+ --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));
2333
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2334
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2335
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
2336
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2337
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2338
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2339
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2340
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2341
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2342
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2343
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2344
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2345
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2346
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2347
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2348
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2349
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2350
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2351
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2352
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2353
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2354
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2355
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2356
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2357
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2358
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2359
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2360
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2361
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2362
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2363
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2364
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2365
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2366
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2367
+ }
2368
+
2369
+ .pf-v6-c-text-input-group {
2370
+ position: relative;
2371
+ display: flex;
2372
+ width: 100%;
2373
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2374
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2375
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2376
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2377
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2378
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2379
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2380
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2321
2381
  }
2322
2382
 
2323
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2324
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2325
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2383
+ .pf-v6-c-text-input-group::before {
2384
+ position: absolute;
2385
+ inset: 0;
2386
+ pointer-events: none;
2387
+ content: "";
2388
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2389
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2390
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2391
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2392
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2326
2393
  }
2327
2394
 
2328
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2329
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2330
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2395
+ .pf-v6-c-text-input-group.pf-m-disabled {
2396
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2397
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2398
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2399
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2400
+ pointer-events: none;
2331
2401
  }
2332
2402
 
2333
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2334
- opacity: 0;
2403
+ .pf-v6-c-text-input-group.pf-m-plain {
2404
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2335
2405
  }
2336
2406
 
2337
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2338
- animation-name: pf-v6-c-button-icon-notify;
2339
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2340
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2407
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2408
+ border: 0;
2341
2409
  }
2342
2410
 
2343
- .pf-v6-c-button__icon {
2344
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2345
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2346
- color: var(--pf-v6-c-button__icon--Color);
2411
+ .pf-v6-c-text-input-group.pf-m-success {
2412
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2413
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2414
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2347
2415
  }
2348
2416
 
2349
- .pf-v6-c-button__icon.pf-m-start {
2350
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2417
+ .pf-v6-c-text-input-group.pf-m-warning {
2418
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2419
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2420
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2351
2421
  }
2352
2422
 
2353
- .pf-v6-c-button__icon.pf-m-end {
2354
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2423
+ .pf-v6-c-text-input-group.pf-m-error {
2424
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2425
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2426
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2355
2427
  }
2356
2428
 
2357
- .pf-v6-c-button__progress {
2358
- position: absolute;
2359
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2360
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2361
- line-height: 1;
2362
- color: var(--pf-v6-c-button__progress--Color);
2363
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2429
+ .pf-v6-c-text-input-group:hover {
2430
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2364
2431
  }
2365
2432
 
2366
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2367
- --pf-v6-c-spinner--Color: currentcolor;
2433
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2434
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2368
2435
  }
2369
2436
 
2370
- .pf-v6-c-button__count {
2371
- display: inline-flex;
2372
- align-items: center;
2437
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2438
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2439
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2373
2440
  }
2374
2441
 
2375
- @keyframes pf-v6-c-button-icon-notify {
2376
- 33% {
2377
- transform: rotate(30deg);
2378
- }
2379
- 66% {
2380
- transform: rotate(-60deg);
2381
- }
2382
- }
2383
- @keyframes pf-v6-c-button-icon-favorited {
2384
- 50% {
2385
- transform: scale(1.5);
2386
- }
2387
- }
2388
- .pf-v6-c-label-group {
2389
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2390
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2391
- --pf-v6-c-label-group--MaxWidth: 100%;
2392
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2393
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2394
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2395
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2396
- --pf-v6-c-label-group__main--MaxWidth: 100%;
2397
- --pf-v6-c-label-group__main--MinWidth: 0;
2398
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2399
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2400
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2401
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2402
- --pf-v6-c-label-group__list--MaxWidth: 100%;
2403
- --pf-v6-c-label-group__list--MinWidth: 0;
2404
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2405
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2406
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2407
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2408
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2409
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2410
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2411
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2412
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2413
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2414
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2415
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
2416
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2417
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2418
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2419
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2420
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2421
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2422
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2423
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2424
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2425
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2442
+ .pf-v6-c-text-input-group__main {
2443
+ display: flex;
2444
+ flex: 1;
2445
+ flex-wrap: wrap;
2446
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2447
+ min-width: 0;
2426
2448
  }
2427
2449
 
2428
- .pf-v6-c-label-group {
2450
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2451
+ --pf-v6-c-text-input-group__text--Position: relative;
2452
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2429
2453
  display: inline-flex;
2430
- row-gap: var(--pf-v6-c-label-group--RowGap);
2431
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
2432
2454
  align-items: center;
2433
- max-width: var(--pf-v6-c-label-group--MaxWidth);
2455
+ justify-content: center;
2456
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2434
2457
  }
2435
2458
 
2436
- .pf-v6-c-label-group.pf-m-category {
2437
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2438
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2439
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2440
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2441
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2442
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2443
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2459
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2460
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2444
2461
  }
2445
2462
 
2446
- .pf-v6-c-label-group.pf-m-vertical {
2447
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2448
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2449
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2450
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2451
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2452
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2453
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2463
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2464
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2465
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2466
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2454
2467
  }
2455
2468
 
2456
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2457
- align-items: flex-start;
2469
+ .pf-v6-c-text-input-group__text {
2470
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2471
+ display: inline-grid;
2472
+ flex: 1;
2473
+ grid-template-areas: "text-input";
2474
+ grid-template-columns: 1fr;
2458
2475
  }
2459
2476
 
2460
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2461
- flex-direction: column;
2462
- align-items: flex-start;
2463
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2477
+ .pf-v6-c-text-input-group__icon {
2478
+ position: absolute;
2479
+ inset-block-start: 50%;
2480
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2481
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2482
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2483
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2464
2484
  }
2465
2485
 
2466
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2467
- flex-direction: column;
2468
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2486
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2487
+ inset-inline-start: auto;
2488
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2489
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2469
2490
  }
2470
2491
 
2471
- .pf-v6-c-label-group.pf-m-editable,
2472
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2473
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2474
- display: flex;
2492
+ .pf-v6-c-text-input-group__text-input {
2493
+ overflow: hidden;
2494
+ text-overflow: ellipsis;
2495
+ white-space: nowrap;
2496
+ position: relative;
2497
+ width: 100%;
2498
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2499
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2500
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2501
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2502
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2503
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2504
+ border: 0;
2505
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2475
2506
  }
2476
2507
 
2477
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2478
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2479
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2480
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2481
- flex: 1;
2508
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2509
+ grid-area: text-input;
2482
2510
  }
2483
2511
 
2484
- .pf-v6-c-label-group__main {
2485
- display: flex;
2486
- flex: 1;
2487
- flex-wrap: wrap;
2488
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
2489
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2490
- align-items: baseline;
2491
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2512
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2513
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2492
2514
  }
2493
2515
 
2494
- .pf-v6-c-label-group__list {
2495
- display: inline-flex;
2496
- flex-wrap: wrap;
2497
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
2498
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2499
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
2516
+ .pf-v6-c-text-input-group__text-input::placeholder {
2517
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2500
2518
  }
2501
2519
 
2502
- .pf-v6-c-label-group__list-item {
2503
- display: inline-flex;
2504
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2520
+ .pf-v6-c-text-input-group__utilities {
2521
+ display: flex;
2522
+ align-items: center;
2523
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2524
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2505
2525
  }
2506
2526
 
2507
- .pf-v6-c-label-group__label {
2508
- overflow: hidden;
2509
- text-overflow: ellipsis;
2510
- white-space: nowrap;
2511
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2527
+ .pf-v6-c-text-input-group__utilities > * + * {
2528
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2512
2529
  }
2513
2530
 
2514
- .pf-v6-c-label-group__close {
2531
+ .pf-v6-c-text-input-group__group {
2515
2532
  display: flex;
2516
- align-self: flex-start;
2517
2533
  }
2518
2534
 
2519
- .pf-v6-c-label-group__close .pf-v6-c-button {
2520
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2521
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2522
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2523
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2524
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2535
+ .pf-v6-c-check {
2536
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2537
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2538
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2539
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2540
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2541
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2542
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2543
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2544
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2545
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2546
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2547
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2548
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2549
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2525
2550
  }
2526
2551
 
2527
- .pf-v6-c-label-group__textarea {
2528
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2529
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2530
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2531
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2532
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2533
- white-space: nowrap;
2534
- resize: none;
2535
- border: 0;
2536
- -ms-overflow-style: none;
2537
- scrollbar-width: none;
2552
+ .pf-v6-c-check {
2553
+ display: grid;
2554
+ grid-template-columns: auto 1fr;
2555
+ grid-gap: var(--pf-v6-c-check--GridGap);
2556
+ accent-color: var(--pf-v6-c-check--AccentColor);
2538
2557
  }
2539
2558
 
2540
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2541
- display: none;
2559
+ .pf-v6-c-check.pf-m-standalone {
2560
+ display: inline-grid;
2561
+ grid-template-columns: auto;
2562
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2542
2563
  }
2543
2564
 
2544
- .pf-v6-c-badge {
2545
- --pf-v6-c-badge--BorderColor: transparent;
2546
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2547
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2548
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2549
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2550
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2551
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2552
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2553
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2554
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2555
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2556
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2557
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2558
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2559
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2560
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2561
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2562
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2563
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2564
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2565
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2566
+ align-self: center;
2567
+ transform: none;
2565
2568
  }
2566
2569
 
2567
- .pf-v6-c-badge {
2568
- position: relative;
2569
- display: inline-block;
2570
- min-width: var(--pf-v6-c-badge--MinWidth);
2571
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2572
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2573
- font-size: var(--pf-v6-c-badge--FontSize);
2574
- font-weight: var(--pf-v6-c-badge--FontWeight);
2575
- color: var(--pf-v6-c-badge--Color);
2576
- text-align: center;
2577
- white-space: nowrap;
2578
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2579
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2570
+ .pf-v6-c-check__input {
2571
+ align-self: start;
2572
+ font-size: var(--pf-v6-c-check__label--FontSize);
2573
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2574
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2580
2575
  }
2581
2576
 
2582
- .pf-v6-c-badge::after {
2583
- position: absolute;
2584
- inset: 0;
2585
- pointer-events: none;
2586
- content: "";
2587
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2588
- border-radius: inherit;
2577
+ .pf-v6-c-check__label {
2578
+ font-size: var(--pf-v6-c-check__label--FontSize);
2579
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2580
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2581
+ color: var(--pf-v6-c-check__label--Color);
2589
2582
  }
2590
2583
 
2591
- .pf-v6-c-badge.pf-m-read {
2592
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2593
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2594
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2584
+ .pf-v6-c-check__description {
2585
+ grid-column: 2;
2586
+ font-size: var(--pf-v6-c-check__description--FontSize);
2587
+ color: var(--pf-v6-c-check__description--Color);
2595
2588
  }
2596
2589
 
2597
- .pf-v6-c-badge.pf-m-unread {
2598
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2599
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2600
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2590
+ .pf-v6-c-check__body {
2591
+ grid-column: 2;
2601
2592
  }
2602
2593
 
2603
- .pf-v6-c-badge.pf-m-disabled {
2604
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2605
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2594
+ .pf-v6-c-check__label,
2595
+ .pf-v6-c-check__input {
2596
+ justify-self: start;
2606
2597
  }
2607
2598
 
2608
- .pf-v6-c-badge.pf-m-disabled::after {
2609
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2599
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2600
+ .pf-v6-c-check__input {
2601
+ cursor: pointer;
2610
2602
  }
2611
2603
 
2612
- .pf-v6-c-badge__toggle-icon {
2613
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2614
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2604
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2605
+ .pf-v6-c-check__input:disabled,
2606
+ .pf-v6-c-check__input.pf-m-disabled {
2607
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2608
+ cursor: not-allowed;
2609
+ }
2610
+
2611
+ .pf-v6-c-check__label-required {
2612
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2613
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2614
+ color: var(--pf-v6-c-check__label-required--Color);
2615
2615
  }
2616
2616
 
2617
2617
  .pf-v6-c-menu {
@@ -3186,209 +3186,78 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3186
3186
  }
3187
3187
 
3188
3188
  .pf-v6-c-menu__group-title {
3189
- padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3190
- padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3191
- padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3192
- padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3193
- font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3194
- font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3195
- color: var(--pf-v6-c-menu__group-title--Color);
3196
- }
3197
-
3198
- .pf-v6-c-menu__item-description {
3199
- font-size: var(--pf-v6-c-menu__item-description--FontSize);
3200
- color: var(--pf-v6-c-menu__item-description--Color);
3201
- word-break: break-word;
3202
- }
3203
-
3204
- .pf-v6-c-menu__item-check .pf-v6-c-check {
3205
- --pf-v6-c-check__input--TranslateY: none;
3206
- }
3207
-
3208
- .pf-v6-c-menu__item-toggle-icon {
3209
- color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3210
- }
3211
-
3212
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3213
- scale: -1 1;
3214
- }
3215
-
3216
- .pf-v6-c-menu__item-icon {
3217
- color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3218
- }
3219
-
3220
- .pf-v6-c-menu__item-select-icon,
3221
- .pf-v6-c-menu__item-external-icon {
3222
- opacity: 0;
3223
- }
3224
-
3225
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3226
- .pf-v6-c-menu__item-action.pf-m-favorited,
3227
- .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3228
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3229
- --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3230
- }
3231
-
3232
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3233
- .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3234
- .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3235
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3236
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3237
- }
3238
-
3239
- .pf-v6-c-menu__breadcrumb {
3240
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3241
- padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3242
- padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3243
- padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3244
- padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3245
- }
3246
-
3247
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3248
- min-width: auto;
3249
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3250
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3251
- }
3252
-
3253
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3254
- height: auto;
3255
- }
3256
-
3257
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3258
- --pf-v6-c-menu-toggle--BorderWidth: 0;
3259
- --pf-v6-c-menu-toggle--BorderColor: transparent;
3260
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3261
- }
3262
-
3263
- .pf-v6-c-tooltip {
3264
- --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3265
- --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3266
- --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3267
- --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3268
- --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3269
- --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3270
- --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3271
- --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3272
- --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3273
- --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3274
- --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3275
- --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3276
- --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3277
- --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3278
- --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3279
- --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3280
- --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3281
- --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3282
- --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3283
- --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3284
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3285
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3286
- --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3287
- --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3288
- --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3289
- --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
3189
+ padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3190
+ padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3191
+ padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3192
+ padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3193
+ font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3194
+ font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3195
+ color: var(--pf-v6-c-menu__group-title--Color);
3290
3196
  }
3291
3197
 
3292
- .pf-v6-c-tooltip {
3293
- position: relative;
3294
- max-width: var(--pf-v6-c-tooltip--MaxWidth);
3295
- box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
3198
+ .pf-v6-c-menu__item-description {
3199
+ font-size: var(--pf-v6-c-menu__item-description--FontSize);
3200
+ color: var(--pf-v6-c-menu__item-description--Color);
3201
+ word-break: break-word;
3296
3202
  }
3297
3203
 
3298
- .pf-v6-c-tooltip:is(.pf-m-top,
3299
- .pf-m-top-left,
3300
- .pf-m-top-right) {
3301
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3302
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3303
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3304
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3305
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
3204
+ .pf-v6-c-menu__item-check .pf-v6-c-check {
3205
+ --pf-v6-c-check__input--TranslateY: none;
3306
3206
  }
3307
3207
 
3308
- .pf-v6-c-tooltip:is(.pf-m-bottom,
3309
- .pf-m-bottom-left,
3310
- .pf-m-bottom-right) {
3311
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3312
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3313
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
3314
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
3315
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
3208
+ .pf-v6-c-menu__item-toggle-icon {
3209
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3316
3210
  }
3317
3211
 
3318
- .pf-v6-c-tooltip:is(.pf-m-left,
3319
- .pf-m-left-top,
3320
- .pf-m-left-bottom) {
3321
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
3322
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
3323
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3324
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
3325
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
3212
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3213
+ scale: -1 1;
3326
3214
  }
3327
3215
 
3328
- .pf-v6-c-tooltip:is(.pf-m-right,
3329
- .pf-m-right-top,
3330
- .pf-m-right-bottom) {
3331
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
3332
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
3333
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
3334
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
3335
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
3216
+ .pf-v6-c-menu__item-icon {
3217
+ color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3336
3218
  }
3337
3219
 
3338
- .pf-v6-c-tooltip:is(.pf-m-left-top,
3339
- .pf-m-right-top) {
3340
- --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
3341
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3220
+ .pf-v6-c-menu__item-select-icon,
3221
+ .pf-v6-c-menu__item-external-icon {
3222
+ opacity: 0;
3342
3223
  }
3343
3224
 
3344
- .pf-v6-c-tooltip:is(.pf-m-left-bottom,
3345
- .pf-m-right-bottom) {
3346
- --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
3347
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
3225
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3226
+ .pf-v6-c-menu__item-action.pf-m-favorited,
3227
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3228
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3229
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3348
3230
  }
3349
3231
 
3350
- .pf-v6-c-tooltip:is(.pf-m-top-left,
3351
- .pf-m-bottom-left) {
3352
- --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
3353
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3232
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3233
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3234
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3235
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3236
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3354
3237
  }
3355
3238
 
3356
- .pf-v6-c-tooltip:is(.pf-m-top-right,
3357
- .pf-m-bottom-right) {
3358
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
3359
- --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
3239
+ .pf-v6-c-menu__breadcrumb {
3240
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3241
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3242
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3243
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3244
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3360
3245
  }
3361
3246
 
3362
- .pf-v6-c-tooltip__content {
3363
- position: relative;
3364
- padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
3365
- padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
3366
- padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
3367
- padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
3368
- font-size: var(--pf-v6-c-tooltip__content--FontSize);
3369
- color: var(--pf-v6-c-tooltip__content--Color);
3370
- text-align: center;
3371
- word-break: break-word;
3372
- background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
3373
- border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
3247
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3248
+ min-width: auto;
3249
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3250
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3374
3251
  }
3375
3252
 
3376
- .pf-v6-c-tooltip__content.pf-m-text-align-left {
3377
- text-align: start;
3253
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3254
+ height: auto;
3378
3255
  }
3379
3256
 
3380
- .pf-v6-c-tooltip__arrow {
3381
- position: absolute;
3382
- top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
3383
- right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
3384
- bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
3385
- left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
3386
- width: var(--pf-v6-c-tooltip__arrow--Width);
3387
- height: var(--pf-v6-c-tooltip__arrow--Height);
3388
- pointer-events: none;
3389
- background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3390
- box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3391
- transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3257
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3258
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3259
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3260
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3392
3261
  }
3393
3262
 
3394
3263
  .pf-v6-c-breadcrumb {
@@ -3587,4 +3456,134 @@ button.pf-v6-c-breadcrumb__link {
3587
3456
  stroke-dashoffset: 280;
3588
3457
  transform: rotate(720deg);
3589
3458
  }
3459
+ }
3460
+ .pf-v6-c-tooltip {
3461
+ --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3462
+ --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3463
+ --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3464
+ --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3465
+ --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3466
+ --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3467
+ --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3468
+ --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3469
+ --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3470
+ --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3471
+ --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3472
+ --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3473
+ --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3474
+ --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3475
+ --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3476
+ --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3477
+ --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3478
+ --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3479
+ --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3480
+ --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3481
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3482
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3483
+ --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3484
+ --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3485
+ --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3486
+ --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
3487
+ }
3488
+
3489
+ .pf-v6-c-tooltip {
3490
+ position: relative;
3491
+ max-width: var(--pf-v6-c-tooltip--MaxWidth);
3492
+ box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
3493
+ }
3494
+
3495
+ .pf-v6-c-tooltip:is(.pf-m-top,
3496
+ .pf-m-top-left,
3497
+ .pf-m-top-right) {
3498
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3499
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3500
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3501
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3502
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
3503
+ }
3504
+
3505
+ .pf-v6-c-tooltip:is(.pf-m-bottom,
3506
+ .pf-m-bottom-left,
3507
+ .pf-m-bottom-right) {
3508
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3509
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3510
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
3511
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
3512
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
3513
+ }
3514
+
3515
+ .pf-v6-c-tooltip:is(.pf-m-left,
3516
+ .pf-m-left-top,
3517
+ .pf-m-left-bottom) {
3518
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
3519
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
3520
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3521
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
3522
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
3523
+ }
3524
+
3525
+ .pf-v6-c-tooltip:is(.pf-m-right,
3526
+ .pf-m-right-top,
3527
+ .pf-m-right-bottom) {
3528
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
3529
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
3530
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
3531
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
3532
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
3533
+ }
3534
+
3535
+ .pf-v6-c-tooltip:is(.pf-m-left-top,
3536
+ .pf-m-right-top) {
3537
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
3538
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3539
+ }
3540
+
3541
+ .pf-v6-c-tooltip:is(.pf-m-left-bottom,
3542
+ .pf-m-right-bottom) {
3543
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
3544
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
3545
+ }
3546
+
3547
+ .pf-v6-c-tooltip:is(.pf-m-top-left,
3548
+ .pf-m-bottom-left) {
3549
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
3550
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3551
+ }
3552
+
3553
+ .pf-v6-c-tooltip:is(.pf-m-top-right,
3554
+ .pf-m-bottom-right) {
3555
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
3556
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
3557
+ }
3558
+
3559
+ .pf-v6-c-tooltip__content {
3560
+ position: relative;
3561
+ padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
3562
+ padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
3563
+ padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
3564
+ padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
3565
+ font-size: var(--pf-v6-c-tooltip__content--FontSize);
3566
+ color: var(--pf-v6-c-tooltip__content--Color);
3567
+ text-align: center;
3568
+ word-break: break-word;
3569
+ background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
3570
+ border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
3571
+ }
3572
+
3573
+ .pf-v6-c-tooltip__content.pf-m-text-align-left {
3574
+ text-align: start;
3575
+ }
3576
+
3577
+ .pf-v6-c-tooltip__arrow {
3578
+ position: absolute;
3579
+ top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
3580
+ right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
3581
+ bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
3582
+ left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
3583
+ width: var(--pf-v6-c-tooltip__arrow--Width);
3584
+ height: var(--pf-v6-c-tooltip__arrow--Height);
3585
+ pointer-events: none;
3586
+ background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3587
+ box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3588
+ transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3590
3589
  }