@patternfly/react-templates 6.2.0-prerelease.30 → 6.2.0-prerelease.32

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 (67) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/esm/components/Dropdown/SimpleDropdown.d.ts +2 -2
  6. package/dist/esm/components/Dropdown/SimpleDropdown.d.ts.map +1 -1
  7. package/dist/esm/components/Dropdown/SimpleDropdown.js +3 -3
  8. package/dist/esm/components/Dropdown/SimpleDropdown.js.map +1 -1
  9. package/dist/esm/components/Select/CheckboxSelect.d.ts +2 -2
  10. package/dist/esm/components/Select/CheckboxSelect.d.ts.map +1 -1
  11. package/dist/esm/components/Select/CheckboxSelect.js +5 -5
  12. package/dist/esm/components/Select/CheckboxSelect.js.map +1 -1
  13. package/dist/esm/components/Select/MultiTypeaheadSelect.d.ts +6 -2
  14. package/dist/esm/components/Select/MultiTypeaheadSelect.d.ts.map +1 -1
  15. package/dist/esm/components/Select/MultiTypeaheadSelect.js +22 -13
  16. package/dist/esm/components/Select/MultiTypeaheadSelect.js.map +1 -1
  17. package/dist/esm/components/Select/SimpleSelect.d.ts +2 -2
  18. package/dist/esm/components/Select/SimpleSelect.d.ts.map +1 -1
  19. package/dist/esm/components/Select/SimpleSelect.js +5 -5
  20. package/dist/esm/components/Select/SimpleSelect.js.map +1 -1
  21. package/dist/esm/components/Select/TypeaheadSelect.d.ts +6 -2
  22. package/dist/esm/components/Select/TypeaheadSelect.d.ts.map +1 -1
  23. package/dist/esm/components/Select/TypeaheadSelect.js +23 -14
  24. package/dist/esm/components/Select/TypeaheadSelect.js.map +1 -1
  25. package/dist/js/components/Dropdown/SimpleDropdown.d.ts +2 -2
  26. package/dist/js/components/Dropdown/SimpleDropdown.d.ts.map +1 -1
  27. package/dist/js/components/Dropdown/SimpleDropdown.js +3 -3
  28. package/dist/js/components/Dropdown/SimpleDropdown.js.map +1 -1
  29. package/dist/js/components/Select/CheckboxSelect.d.ts +2 -2
  30. package/dist/js/components/Select/CheckboxSelect.d.ts.map +1 -1
  31. package/dist/js/components/Select/CheckboxSelect.js +5 -5
  32. package/dist/js/components/Select/CheckboxSelect.js.map +1 -1
  33. package/dist/js/components/Select/MultiTypeaheadSelect.d.ts +6 -2
  34. package/dist/js/components/Select/MultiTypeaheadSelect.d.ts.map +1 -1
  35. package/dist/js/components/Select/MultiTypeaheadSelect.js +22 -13
  36. package/dist/js/components/Select/MultiTypeaheadSelect.js.map +1 -1
  37. package/dist/js/components/Select/SimpleSelect.d.ts +2 -2
  38. package/dist/js/components/Select/SimpleSelect.d.ts.map +1 -1
  39. package/dist/js/components/Select/SimpleSelect.js +5 -5
  40. package/dist/js/components/Select/SimpleSelect.js.map +1 -1
  41. package/dist/js/components/Select/TypeaheadSelect.d.ts +6 -2
  42. package/dist/js/components/Select/TypeaheadSelect.d.ts.map +1 -1
  43. package/dist/js/components/Select/TypeaheadSelect.js +23 -14
  44. package/dist/js/components/Select/TypeaheadSelect.js.map +1 -1
  45. package/dist/umd/assets/{output-CSWL0Hin.css → output-B01SRspr.css} +1114 -1071
  46. package/dist/umd/react-templates.min.js +1 -1
  47. package/package.json +6 -6
  48. package/src/components/Dropdown/SimpleDropdown.tsx +3 -3
  49. package/src/components/Dropdown/__tests__/SimpleDropdown.test.tsx +0 -1
  50. package/src/components/Dropdown/examples/DropdownTemplates.md +1 -0
  51. package/src/components/Dropdown/examples/SimpleDropdownExample.tsx +4 -4
  52. package/src/components/Select/CheckboxSelect.tsx +5 -5
  53. package/src/components/Select/MultiTypeaheadSelect.tsx +26 -15
  54. package/src/components/Select/SimpleSelect.tsx +5 -5
  55. package/src/components/Select/TypeaheadSelect.tsx +27 -15
  56. package/src/components/Select/__tests__/CheckboxSelect.test.tsx +0 -1
  57. package/src/components/Select/__tests__/CheckboxSelectSnapshots.test.tsx +0 -1
  58. package/src/components/Select/__tests__/MultiTypeaheadSelect.test.tsx +19 -1
  59. package/src/components/Select/__tests__/SimpleSelect.test.tsx +0 -1
  60. package/src/components/Select/__tests__/TypeaheadSelect.test.tsx +19 -1
  61. package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap +2 -2
  62. package/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap +2 -2
  63. package/src/components/Select/examples/CheckboxSelectDemo.tsx +3 -3
  64. package/src/components/Select/examples/MultiTypeaheadSelectDemo.tsx +3 -3
  65. package/src/components/Select/examples/SelectTemplates.md +1 -0
  66. package/src/components/Select/examples/SimpleSelectDemo.tsx +6 -6
  67. package/src/components/Select/examples/TypeaheadSelectDemo.tsx +7 -7
@@ -687,322 +687,526 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
687
687
  transform: rotate(-60deg);
688
688
  }
689
689
  }
690
- .pf-v6-c-divider {
691
- --pf-v6-c-divider--Display: flex;
692
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
693
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
694
- --pf-v6-c-divider--before--FlexBasis: 100%;
690
+ .pf-v6-c-menu-toggle {
691
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
692
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
693
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
694
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
695
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
696
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
697
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
698
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
699
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
700
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
701
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
702
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
703
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
704
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
705
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
706
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
707
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
708
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
709
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
710
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
711
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
712
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
713
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
714
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
715
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
716
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
717
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
718
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
719
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
720
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
721
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
722
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
723
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
724
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
725
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
726
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
727
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
728
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
729
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
730
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
731
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
732
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
733
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
734
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
735
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
736
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
737
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
738
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
739
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
740
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
741
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
742
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
743
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
744
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
745
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
746
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
747
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
748
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
749
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
750
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
751
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
752
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
753
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
754
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
755
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
756
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
757
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
758
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
759
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
760
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
761
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
762
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
763
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
764
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
765
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
766
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
767
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
768
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
769
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
770
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
771
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
772
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
773
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
774
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
775
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
776
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
777
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
778
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
779
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
780
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
781
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
782
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
783
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
784
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
785
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
786
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
787
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
788
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
789
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
790
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
791
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
792
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
793
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
794
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
795
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-v6-c-menu-toggle--BorderRadius);
796
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
797
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
798
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
799
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
800
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
801
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
802
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
803
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
804
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
805
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
806
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
807
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
808
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
809
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
810
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
811
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
812
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
813
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
814
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
815
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
816
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
817
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
818
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
819
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
820
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
821
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
695
822
  }
696
823
 
697
- .pf-v6-c-divider {
698
- flex-direction: row;
699
- width: 100%;
700
- height: var(--pf-v6-c-divider--Size);
701
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
702
- --pf-v6-hidden-visible--hidden--Display: none;
703
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
704
- display: var(--pf-v6-hidden-visible--Display);
705
- flex-shrink: 0;
706
- align-items: stretch;
707
- align-self: stretch;
824
+ .pf-v6-c-menu-toggle {
825
+ position: relative;
826
+ display: inline-flex;
827
+ gap: var(--pf-v6-c-menu-toggle--Gap);
828
+ align-items: center;
708
829
  justify-content: center;
830
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
831
+ max-width: 100%;
832
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
833
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
834
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
835
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
836
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
837
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
838
+ color: var(--pf-v6-c-menu-toggle--Color);
839
+ cursor: pointer;
840
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
709
841
  border: 0;
842
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
843
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
844
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
710
845
  }
711
846
 
712
- .pf-v6-c-divider.pf-m-hidden {
713
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
847
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
848
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
714
849
  }
715
850
 
716
- @media screen and (min-width: 36rem) {
717
- .pf-v6-c-divider.pf-m-hidden-on-sm {
718
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
719
- }
720
- .pf-v6-c-divider.pf-m-visible-on-sm {
721
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
722
- }
851
+ .pf-v6-c-menu-toggle::before {
852
+ position: absolute;
853
+ inset-block-start: 0;
854
+ inset-block-end: 0;
855
+ inset-inline-start: 0;
856
+ inset-inline-end: 0;
857
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
858
+ pointer-events: none;
859
+ content: "";
860
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
861
+ transition: inherit;
723
862
  }
724
- @media screen and (min-width: 48rem) {
725
- .pf-v6-c-divider.pf-m-hidden-on-md {
726
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
727
- }
728
- .pf-v6-c-divider.pf-m-visible-on-md {
729
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
730
- }
863
+
864
+ .pf-v6-c-menu-toggle.pf-m-primary {
865
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
866
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
867
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
868
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
869
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
870
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
871
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
872
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
873
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
874
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
875
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
876
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
877
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
878
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
879
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
880
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
881
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
731
882
  }
732
- @media screen and (min-width: 62rem) {
733
- .pf-v6-c-divider.pf-m-hidden-on-lg {
734
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
735
- }
736
- .pf-v6-c-divider.pf-m-visible-on-lg {
737
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
883
+
884
+ .pf-v6-c-menu-toggle.pf-m-secondary {
885
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
886
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
887
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
888
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
889
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
890
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
891
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
892
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
893
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
894
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
895
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
896
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
897
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
898
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
899
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
900
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
901
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
902
+ }
903
+
904
+ .pf-v6-c-menu-toggle.pf-m-full-height {
905
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
906
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
907
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
908
+ align-items: center;
909
+ height: 100%;
910
+ }
911
+
912
+ .pf-v6-c-menu-toggle.pf-m-full-width {
913
+ width: 100%;
914
+ }
915
+
916
+ .pf-v6-c-menu-toggle.pf-m-plain {
917
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
918
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
919
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
920
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
921
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
922
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
923
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
924
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
925
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
926
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
927
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
928
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
929
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
930
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
931
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
932
+ }
933
+
934
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
935
+ border: none;
936
+ }
937
+
938
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
939
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
940
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
941
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
942
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
943
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
944
+ }
945
+
946
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
947
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
948
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
949
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
950
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
951
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
952
+ }
953
+
954
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
955
+ border: 0;
956
+ }
957
+
958
+ .pf-v6-c-menu-toggle.pf-m-small {
959
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
960
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
961
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
962
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
963
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
964
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
965
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
966
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
967
+ }
968
+
969
+ .pf-v6-c-menu-toggle.pf-m-success {
970
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
971
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
972
+ }
973
+
974
+ .pf-v6-c-menu-toggle.pf-m-warning {
975
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
976
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
977
+ }
978
+
979
+ .pf-v6-c-menu-toggle.pf-m-danger {
980
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
981
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
982
+ }
983
+
984
+ @media screen and (prefers-reduced-motion: no-preference) {
985
+ .pf-v6-c-menu-toggle.pf-m-danger {
986
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
987
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
988
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
989
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
990
+ animation-fill-mode: both;
738
991
  }
739
992
  }
740
- @media screen and (min-width: 75rem) {
741
- .pf-v6-c-divider.pf-m-hidden-on-xl {
742
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
993
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
994
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
995
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
996
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
997
+ }
998
+
999
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
1000
+ from {
1001
+ opacity: 0;
743
1002
  }
744
- .pf-v6-c-divider.pf-m-visible-on-xl {
745
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1003
+ to {
1004
+ opacity: 1;
746
1005
  }
747
1006
  }
748
- @media screen and (min-width: 90.625rem) {
749
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
750
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
751
- }
752
- .pf-v6-c-divider.pf-m-visible-on-2xl {
753
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1007
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
1008
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1009
+ }
1010
+
1011
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1012
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1013
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1014
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1015
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1016
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
1017
+ }
1018
+
1019
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1020
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1021
+ pointer-events: none;
1022
+ }
1023
+
1024
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
1025
+ syntax: "<length>";
1026
+ inherits: false;
1027
+ initial-value: 0;
1028
+ }
1029
+ @media (prefers-reduced-motion: no-preference) {
1030
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
1031
+ 33% {
1032
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
1033
+ }
1034
+ 66% {
1035
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
1036
+ }
754
1037
  }
755
1038
  }
756
- .pf-v6-c-divider::before {
757
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
758
- content: "";
759
- background-color: var(--pf-v6-c-divider--Color);
1039
+ .pf-v6-c-menu-toggle.pf-m-split-button {
1040
+ --pf-v6-c-menu-toggle--Gap: 0;
1041
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1042
+ padding: 0;
1043
+ }
1044
+
1045
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
1046
+ position: relative;
1047
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1048
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1049
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1050
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
760
1051
  }
761
1052
 
762
- .pf-v6-c-divider.pf-m-horizontal {
763
- flex-direction: row;
764
- width: 100%;
765
- height: var(--pf-v6-c-divider--Size);
1053
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1054
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1055
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
766
1056
  }
767
1057
 
768
- .pf-v6-c-divider.pf-m-vertical {
769
- flex-direction: column;
770
- width: var(--pf-v6-c-divider--Size);
771
- height: inherit;
1058
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1059
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1060
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
772
1061
  }
773
1062
 
774
- .pf-v6-c-divider.pf-m-inset-none {
775
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1063
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1064
+ --pf-v6-c-check__label--Color: currentcolor;
1065
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
1066
+ align-items: center;
1067
+ align-self: stretch;
776
1068
  }
777
1069
 
778
- .pf-v6-c-divider.pf-m-inset-xs {
779
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1070
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1071
+ --pf-v6-c-check__input--TranslateY: 0;
1072
+ align-self: center;
780
1073
  }
781
1074
 
782
- .pf-v6-c-divider.pf-m-inset-sm {
783
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1075
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1076
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
784
1077
  }
785
1078
 
786
- .pf-v6-c-divider.pf-m-inset-md {
787
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1079
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1080
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
788
1081
  }
789
1082
 
790
- .pf-v6-c-divider.pf-m-inset-lg {
791
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1083
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1084
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1085
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
792
1086
  }
793
1087
 
794
- .pf-v6-c-divider.pf-m-inset-xl {
795
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1088
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1089
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1090
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
796
1091
  }
797
1092
 
798
- .pf-v6-c-divider.pf-m-inset-2xl {
799
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1093
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1094
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
800
1095
  }
801
1096
 
802
- .pf-v6-c-divider.pf-m-inset-3xl {
803
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1097
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1098
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
804
1099
  }
805
1100
 
806
- @media (min-width: 36rem) {
807
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
808
- flex-direction: row;
809
- width: 100%;
810
- height: var(--pf-v6-c-divider--Size);
811
- }
1101
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1102
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1103
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1104
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
812
1105
  }
813
- @media (min-width: 36rem) {
814
- .pf-v6-c-divider.pf-m-vertical-on-sm {
815
- flex-direction: column;
816
- width: var(--pf-v6-c-divider--Size);
817
- height: inherit;
818
- }
1106
+
1107
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1108
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1109
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1110
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
819
1111
  }
820
- @media (min-width: 36rem) {
821
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
822
- --pf-v6-c-divider--before--FlexBasis: 100%;
823
- }
824
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
825
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
826
- }
827
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
828
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
829
- }
830
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
831
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
832
- }
833
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
834
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
835
- }
836
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
837
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
838
- }
839
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
840
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
841
- }
842
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
843
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
844
- }
1112
+
1113
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1114
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
845
1115
  }
846
- @media (min-width: 48rem) {
847
- .pf-v6-c-divider.pf-m-horizontal-on-md {
848
- flex-direction: row;
849
- width: 100%;
850
- height: var(--pf-v6-c-divider--Size);
851
- }
1116
+
1117
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1118
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1119
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1120
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
852
1121
  }
853
- @media (min-width: 48rem) {
854
- .pf-v6-c-divider.pf-m-vertical-on-md {
855
- flex-direction: column;
856
- width: var(--pf-v6-c-divider--Size);
857
- height: inherit;
858
- }
1122
+
1123
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1124
+ content: none;
859
1125
  }
860
- @media (min-width: 48rem) {
861
- .pf-v6-c-divider.pf-m-inset-none-on-md {
862
- --pf-v6-c-divider--before--FlexBasis: 100%;
863
- }
864
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
865
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
866
- }
867
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
868
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
869
- }
870
- .pf-v6-c-divider.pf-m-inset-md-on-md {
871
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
872
- }
873
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
874
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
875
- }
876
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
877
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
878
- }
879
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
880
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
881
- }
882
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
883
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
884
- }
1126
+
1127
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
1128
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1129
+ --pf-v6-c-menu-toggle--Gap: 0;
1130
+ align-items: stretch;
1131
+ padding: 0;
885
1132
  }
886
- @media (min-width: 62rem) {
887
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
888
- flex-direction: row;
889
- width: 100%;
890
- height: var(--pf-v6-c-divider--Size);
891
- }
1133
+
1134
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1135
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
892
1136
  }
893
- @media (min-width: 62rem) {
894
- .pf-v6-c-divider.pf-m-vertical-on-lg {
895
- flex-direction: column;
896
- width: var(--pf-v6-c-divider--Size);
897
- height: inherit;
898
- }
1137
+
1138
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1139
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1140
+ display: flex;
1141
+ align-items: stretch;
899
1142
  }
900
- @media (min-width: 62rem) {
901
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
902
- --pf-v6-c-divider--before--FlexBasis: 100%;
903
- }
904
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
905
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
906
- }
907
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
908
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
909
- }
910
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
911
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
912
- }
913
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
914
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
915
- }
916
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
917
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
918
- }
919
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
920
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
921
- }
922
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
923
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
924
- }
1143
+
1144
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1145
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1146
+ flex: 1;
925
1147
  }
926
- @media (min-width: 75rem) {
927
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
928
- flex-direction: row;
929
- width: 100%;
930
- height: var(--pf-v6-c-divider--Size);
931
- }
1148
+
1149
+ .pf-v6-c-menu-toggle__button {
1150
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
1151
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1152
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1153
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1154
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1155
+ color: inherit;
1156
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1157
+ border: 0;
932
1158
  }
933
- @media (min-width: 75rem) {
934
- .pf-v6-c-divider.pf-m-vertical-on-xl {
935
- flex-direction: column;
936
- width: var(--pf-v6-c-divider--Size);
937
- height: inherit;
938
- }
1159
+
1160
+ .pf-v6-c-menu-toggle__button.pf-m-text {
1161
+ display: inline-flex;
1162
+ align-items: baseline;
939
1163
  }
940
- @media (min-width: 75rem) {
941
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
942
- --pf-v6-c-divider--before--FlexBasis: 100%;
943
- }
944
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
945
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
946
- }
947
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
948
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
949
- }
950
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
951
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
952
- }
953
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
954
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
955
- }
956
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
957
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
958
- }
959
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
960
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
961
- }
962
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
963
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
964
- }
1164
+
1165
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
1166
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1167
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
965
1168
  }
966
- @media (min-width: 90.625rem) {
967
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
968
- flex-direction: row;
969
- width: 100%;
970
- height: var(--pf-v6-c-divider--Size);
971
- }
1169
+
1170
+ .pf-v6-c-menu-toggle__text {
1171
+ overflow: hidden;
1172
+ text-overflow: ellipsis;
1173
+ white-space: nowrap;
1174
+ min-width: 0;
972
1175
  }
973
- @media (min-width: 90.625rem) {
974
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
975
- flex-direction: column;
976
- width: var(--pf-v6-c-divider--Size);
977
- height: inherit;
978
- }
1176
+
1177
+ .pf-v6-c-menu-toggle__count {
1178
+ display: flex;
1179
+ flex-wrap: nowrap;
979
1180
  }
980
- @media (min-width: 90.625rem) {
981
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
982
- --pf-v6-c-divider--before--FlexBasis: 100%;
983
- }
984
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
985
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
986
- }
987
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
988
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
989
- }
990
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
991
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
992
- }
993
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
994
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
995
- }
996
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
997
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
998
- }
999
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1000
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1001
- }
1002
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1003
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1004
- }
1181
+
1182
+ .pf-v6-c-menu-toggle__icon {
1183
+ flex-shrink: 0;
1184
+ }
1185
+
1186
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1187
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1188
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
1189
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1190
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1191
+ }
1192
+
1193
+ .pf-v6-c-menu-toggle__controls {
1194
+ display: flex;
1195
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1196
+ align-items: center;
1197
+ justify-content: center;
1198
+ margin-inline-start: auto;
1199
+ }
1200
+
1201
+ .pf-v6-c-menu-toggle__toggle-icon {
1202
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1203
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1204
+ }
1205
+
1206
+ .pf-v6-c-menu-toggle__status-icon {
1207
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1005
1208
  }
1209
+
1006
1210
  .pf-v6-c-text-input-group {
1007
1211
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1008
1212
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -1091,771 +1295,609 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1091
1295
  }
1092
1296
 
1093
1297
  .pf-v6-c-text-input-group.pf-m-plain {
1094
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1095
- }
1096
-
1097
- .pf-v6-c-text-input-group.pf-m-plain::before {
1098
- border: 0;
1099
- }
1100
-
1101
- .pf-v6-c-text-input-group.pf-m-success {
1102
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1103
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1104
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1105
- }
1106
-
1107
- .pf-v6-c-text-input-group.pf-m-warning {
1108
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1109
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1110
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1111
- }
1112
-
1113
- .pf-v6-c-text-input-group.pf-m-error {
1114
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1115
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1116
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1117
- }
1118
-
1119
- .pf-v6-c-text-input-group:hover {
1120
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1121
- }
1122
-
1123
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1124
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1125
- }
1126
-
1127
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1128
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1129
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1130
- }
1131
-
1132
- .pf-v6-c-text-input-group__main {
1133
- display: flex;
1134
- flex: 1;
1135
- flex-wrap: wrap;
1136
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1137
- min-width: 0;
1138
- }
1139
-
1140
- .pf-v6-c-text-input-group__main.pf-m-icon {
1141
- --pf-v6-c-text-input-group__text--Position: relative;
1142
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1143
- display: inline-flex;
1144
- align-items: center;
1145
- justify-content: center;
1146
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1147
- }
1148
-
1149
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1150
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1151
- }
1152
-
1153
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1154
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1155
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1156
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1157
- }
1158
-
1159
- .pf-v6-c-text-input-group__text {
1160
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
1161
- display: inline-grid;
1162
- flex: 1;
1163
- grid-template-areas: "text-input";
1164
- grid-template-columns: 1fr;
1165
- }
1166
-
1167
- .pf-v6-c-text-input-group__icon {
1168
- position: absolute;
1169
- inset-block-start: 50%;
1170
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1171
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1172
- color: var(--pf-v6-c-text-input-group__icon--Color);
1173
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1174
- }
1175
-
1176
- .pf-v6-c-text-input-group__icon.pf-m-status {
1177
- inset-inline-start: auto;
1178
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1179
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1180
- }
1181
-
1182
- .pf-v6-c-text-input-group__text-input {
1183
- overflow: hidden;
1184
- text-overflow: ellipsis;
1185
- white-space: nowrap;
1186
- position: relative;
1187
- width: 100%;
1188
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1189
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1190
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1191
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1192
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1193
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1194
- border: 0;
1195
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1196
- }
1197
-
1198
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1199
- grid-area: text-input;
1200
- }
1201
-
1202
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1203
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1204
- }
1205
-
1206
- .pf-v6-c-text-input-group__text-input::placeholder {
1207
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1208
- }
1209
-
1210
- .pf-v6-c-text-input-group__utilities {
1211
- display: flex;
1212
- align-items: center;
1213
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1214
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1215
- }
1216
-
1217
- .pf-v6-c-text-input-group__utilities > * + * {
1218
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1219
- }
1220
-
1221
- .pf-v6-c-text-input-group__group {
1222
- display: flex;
1223
- }
1224
-
1225
- .pf-v6-c-label-group {
1226
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1227
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1228
- --pf-v6-c-label-group--MaxWidth: 100%;
1229
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1230
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1231
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1232
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1233
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1234
- --pf-v6-c-label-group__main--MinWidth: 0;
1235
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1236
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1237
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1238
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1239
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1240
- --pf-v6-c-label-group__list--MinWidth: 0;
1241
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1242
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1243
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1244
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1245
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1246
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1247
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1248
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1249
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1250
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1251
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1252
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1253
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1254
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1255
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1256
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1257
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1258
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1259
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1260
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1261
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1262
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1263
- }
1264
-
1265
- .pf-v6-c-label-group {
1266
- display: inline-flex;
1267
- row-gap: var(--pf-v6-c-label-group--RowGap);
1268
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1269
- align-items: center;
1270
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1298
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1271
1299
  }
1272
1300
 
1273
- .pf-v6-c-label-group.pf-m-category {
1274
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1275
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1276
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1277
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1278
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1279
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1280
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1301
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1302
+ border: 0;
1281
1303
  }
1282
1304
 
1283
- .pf-v6-c-label-group.pf-m-vertical {
1284
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1285
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1286
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1287
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1288
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1289
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1290
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1305
+ .pf-v6-c-text-input-group.pf-m-success {
1306
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1307
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1308
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1291
1309
  }
1292
1310
 
1293
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1294
- align-items: flex-start;
1311
+ .pf-v6-c-text-input-group.pf-m-warning {
1312
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1313
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1314
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1295
1315
  }
1296
1316
 
1297
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1298
- flex-direction: column;
1299
- align-items: flex-start;
1300
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1317
+ .pf-v6-c-text-input-group.pf-m-error {
1318
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1319
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1320
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1301
1321
  }
1302
1322
 
1303
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1304
- flex-direction: column;
1305
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1323
+ .pf-v6-c-text-input-group:hover {
1324
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1306
1325
  }
1307
1326
 
1308
- .pf-v6-c-label-group.pf-m-editable,
1309
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1310
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1311
- display: flex;
1327
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1328
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1312
1329
  }
1313
1330
 
1314
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1315
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1316
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1317
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1318
- flex: 1;
1331
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1332
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1333
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1319
1334
  }
1320
1335
 
1321
- .pf-v6-c-label-group__main {
1336
+ .pf-v6-c-text-input-group__main {
1322
1337
  display: flex;
1323
1338
  flex: 1;
1324
1339
  flex-wrap: wrap;
1325
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1326
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1327
- align-items: baseline;
1328
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1329
- }
1330
-
1331
- .pf-v6-c-label-group__list {
1332
- display: inline-flex;
1333
- flex-wrap: wrap;
1334
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1335
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1336
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1340
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1341
+ min-width: 0;
1337
1342
  }
1338
1343
 
1339
- .pf-v6-c-label-group__list-item {
1344
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1345
+ --pf-v6-c-text-input-group__text--Position: relative;
1346
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1340
1347
  display: inline-flex;
1341
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1342
- }
1343
-
1344
- .pf-v6-c-label-group__label {
1345
- overflow: hidden;
1346
- text-overflow: ellipsis;
1347
- white-space: nowrap;
1348
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1349
- }
1350
-
1351
- .pf-v6-c-label-group__close {
1352
- display: flex;
1353
- align-self: flex-start;
1348
+ align-items: center;
1349
+ justify-content: center;
1350
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1354
1351
  }
1355
1352
 
1356
- .pf-v6-c-label-group__close .pf-v6-c-button {
1357
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1358
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1359
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1360
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1361
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1353
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1354
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1362
1355
  }
1363
1356
 
1364
- .pf-v6-c-label-group__textarea {
1365
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1366
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1367
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1368
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1369
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1370
- white-space: nowrap;
1371
- resize: none;
1372
- border: 0;
1373
- -ms-overflow-style: none;
1374
- scrollbar-width: none;
1357
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1358
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1359
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1360
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1375
1361
  }
1376
1362
 
1377
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1378
- display: none;
1363
+ .pf-v6-c-text-input-group__text {
1364
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1365
+ display: inline-grid;
1366
+ flex: 1;
1367
+ grid-template-areas: "text-input";
1368
+ grid-template-columns: 1fr;
1379
1369
  }
1380
1370
 
1381
- .pf-v6-c-menu-toggle {
1382
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1383
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1384
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1385
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1386
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1387
- --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1388
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
1389
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
1390
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1391
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
1392
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
1393
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
1394
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
1395
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
1396
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1397
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1398
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
1399
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
1400
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1401
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
1402
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
1403
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1404
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
1405
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
1406
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1407
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
1408
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1409
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1410
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1411
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1412
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1413
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1414
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1415
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
1416
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1417
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1418
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1419
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1420
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1421
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1422
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
1423
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
1424
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1425
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1426
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
1427
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
1428
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1429
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
1430
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1431
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1432
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1433
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1434
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1435
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1436
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1437
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
1438
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1439
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1440
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
1441
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1442
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1443
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1444
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
1445
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
1446
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1447
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1448
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
1449
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
1450
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1451
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1452
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1453
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
1454
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
1455
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1456
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1457
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
1458
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1459
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
1460
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
1461
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
1462
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
1463
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1464
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1465
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
1466
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1467
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1468
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1469
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
1470
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
1471
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1472
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
1473
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
1474
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
1475
- --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1476
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1477
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1478
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1479
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1480
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1481
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1482
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1483
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
1484
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1485
- --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
1486
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-v6-c-menu-toggle--BorderRadius);
1487
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1488
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1489
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1490
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1491
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
1492
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
1493
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1494
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1495
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
1496
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
1497
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
1498
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1499
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1500
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
1501
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1502
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
1503
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1504
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1505
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1506
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1507
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
1508
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
1371
+ .pf-v6-c-text-input-group__icon {
1372
+ position: absolute;
1373
+ inset-block-start: 50%;
1374
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1375
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1376
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1377
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1509
1378
  }
1510
1379
 
1511
- .pf-v6-c-menu-toggle {
1380
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1381
+ inset-inline-start: auto;
1382
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1383
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1384
+ }
1385
+
1386
+ .pf-v6-c-text-input-group__text-input {
1387
+ overflow: hidden;
1388
+ text-overflow: ellipsis;
1389
+ white-space: nowrap;
1512
1390
  position: relative;
1513
- display: inline-flex;
1514
- gap: var(--pf-v6-c-menu-toggle--Gap);
1515
- align-items: center;
1516
- justify-content: center;
1517
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
1518
- max-width: 100%;
1519
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1520
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1521
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1522
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1523
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
1524
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
1525
- color: var(--pf-v6-c-menu-toggle--Color);
1526
- cursor: pointer;
1527
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
1391
+ width: 100%;
1392
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1393
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1394
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1395
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1396
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1397
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1528
1398
  border: 0;
1529
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
1530
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
1531
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
1399
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1532
1400
  }
1533
1401
 
1534
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
1535
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1402
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1403
+ grid-area: text-input;
1536
1404
  }
1537
1405
 
1538
- .pf-v6-c-menu-toggle::before {
1539
- position: absolute;
1540
- inset-block-start: 0;
1541
- inset-block-end: 0;
1542
- inset-inline-start: 0;
1543
- inset-inline-end: 0;
1544
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
1545
- pointer-events: none;
1546
- content: "";
1547
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
1548
- transition: inherit;
1406
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1407
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1549
1408
  }
1550
1409
 
1551
- .pf-v6-c-menu-toggle.pf-m-primary {
1552
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
1553
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
1554
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
1555
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
1556
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
1557
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
1558
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
1559
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
1560
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
1561
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
1562
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
1563
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
1564
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
1565
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
1566
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
1567
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
1568
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
1410
+ .pf-v6-c-text-input-group__text-input::placeholder {
1411
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1569
1412
  }
1570
1413
 
1571
- .pf-v6-c-menu-toggle.pf-m-secondary {
1572
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
1573
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
1574
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
1575
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
1576
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
1577
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
1578
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
1579
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
1580
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
1581
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
1582
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
1583
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
1584
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
1585
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
1586
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
1587
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
1588
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
1414
+ .pf-v6-c-text-input-group__utilities {
1415
+ display: flex;
1416
+ align-items: center;
1417
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1418
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1589
1419
  }
1590
1420
 
1591
- .pf-v6-c-menu-toggle.pf-m-full-height {
1592
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
1593
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
1594
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
1595
- align-items: center;
1596
- height: 100%;
1421
+ .pf-v6-c-text-input-group__utilities > * + * {
1422
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1597
1423
  }
1598
1424
 
1599
- .pf-v6-c-menu-toggle.pf-m-full-width {
1600
- width: 100%;
1425
+ .pf-v6-c-text-input-group__group {
1426
+ display: flex;
1601
1427
  }
1602
1428
 
1603
- .pf-v6-c-menu-toggle.pf-m-plain {
1604
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
1605
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
1606
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
1607
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1608
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1609
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
1610
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1611
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
1612
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
1613
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
1614
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1615
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1616
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
1617
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
1618
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
1429
+ .pf-v6-c-label-group {
1430
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1431
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1432
+ --pf-v6-c-label-group--MaxWidth: 100%;
1433
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1434
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1435
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1436
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1437
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1438
+ --pf-v6-c-label-group__main--MinWidth: 0;
1439
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1440
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1441
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1442
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1443
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1444
+ --pf-v6-c-label-group__list--MinWidth: 0;
1445
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1446
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1447
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1448
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1449
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1450
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1451
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1452
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1453
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1454
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1455
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1456
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1457
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1458
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1459
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1460
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1461
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1462
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1463
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1464
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1465
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1466
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1619
1467
  }
1620
1468
 
1621
- .pf-v6-c-menu-toggle.pf-m-plain::before {
1622
- border: none;
1469
+ .pf-v6-c-label-group {
1470
+ display: inline-flex;
1471
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1472
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1473
+ align-items: center;
1474
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1623
1475
  }
1624
1476
 
1625
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
1626
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
1627
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
1628
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
1629
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
1630
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
1477
+ .pf-v6-c-label-group.pf-m-category {
1478
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1479
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1480
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1481
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1482
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1483
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1484
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1631
1485
  }
1632
1486
 
1633
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
1634
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
1635
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
1636
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
1637
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
1638
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
1487
+ .pf-v6-c-label-group.pf-m-vertical {
1488
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1489
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1490
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1491
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1492
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1493
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1494
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1639
1495
  }
1640
1496
 
1641
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
1642
- border: 0;
1497
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1498
+ align-items: flex-start;
1643
1499
  }
1644
1500
 
1645
- .pf-v6-c-menu-toggle.pf-m-small {
1646
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1647
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1648
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1649
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1650
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1651
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1652
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
1653
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
1501
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1502
+ flex-direction: column;
1503
+ align-items: flex-start;
1504
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1654
1505
  }
1655
1506
 
1656
- .pf-v6-c-menu-toggle.pf-m-success {
1657
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1658
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
1507
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1508
+ flex-direction: column;
1509
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1659
1510
  }
1660
1511
 
1661
- .pf-v6-c-menu-toggle.pf-m-warning {
1662
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1663
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
1512
+ .pf-v6-c-label-group.pf-m-editable,
1513
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1514
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1515
+ display: flex;
1664
1516
  }
1665
1517
 
1666
- .pf-v6-c-menu-toggle.pf-m-danger {
1667
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1668
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
1518
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1519
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1520
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1521
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1522
+ flex: 1;
1523
+ }
1524
+
1525
+ .pf-v6-c-label-group__main {
1526
+ display: flex;
1527
+ flex: 1;
1528
+ flex-wrap: wrap;
1529
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1530
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1531
+ align-items: baseline;
1532
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1533
+ }
1534
+
1535
+ .pf-v6-c-label-group__list {
1536
+ display: inline-flex;
1537
+ flex-wrap: wrap;
1538
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1539
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1540
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1669
1541
  }
1670
1542
 
1671
- .pf-v6-c-menu-toggle.pf-m-placeholder {
1672
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1543
+ .pf-v6-c-label-group__list-item {
1544
+ display: inline-flex;
1545
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1673
1546
  }
1674
1547
 
1675
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1676
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1677
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1678
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1679
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1680
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
1548
+ .pf-v6-c-label-group__label {
1549
+ overflow: hidden;
1550
+ text-overflow: ellipsis;
1551
+ white-space: nowrap;
1552
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1681
1553
  }
1682
1554
 
1683
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1684
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1685
- pointer-events: none;
1555
+ .pf-v6-c-label-group__close {
1556
+ display: flex;
1557
+ align-self: flex-start;
1686
1558
  }
1687
1559
 
1688
- .pf-v6-c-menu-toggle.pf-m-split-button {
1689
- --pf-v6-c-menu-toggle--Gap: 0;
1690
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1691
- padding: 0;
1560
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1561
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1562
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1563
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1564
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1565
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1692
1566
  }
1693
1567
 
1694
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
1695
- position: relative;
1696
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1697
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1698
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1699
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1568
+ .pf-v6-c-label-group__textarea {
1569
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1570
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1571
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1572
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1573
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1574
+ white-space: nowrap;
1575
+ resize: none;
1576
+ border: 0;
1577
+ -ms-overflow-style: none;
1578
+ scrollbar-width: none;
1700
1579
  }
1701
1580
 
1702
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1703
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1704
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1581
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1582
+ display: none;
1705
1583
  }
1706
1584
 
1707
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1708
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1709
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1585
+ .pf-v6-c-divider {
1586
+ --pf-v6-c-divider--Display: flex;
1587
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1588
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1589
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1710
1590
  }
1711
1591
 
1712
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1713
- --pf-v6-c-check__label--Color: currentcolor;
1714
- --pf-v6-c-check__label--disabled--Color: currentcolor;
1715
- align-items: center;
1592
+ .pf-v6-c-divider {
1593
+ flex-direction: row;
1594
+ width: 100%;
1595
+ height: var(--pf-v6-c-divider--Size);
1596
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1597
+ --pf-v6-hidden-visible--hidden--Display: none;
1598
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1599
+ display: var(--pf-v6-hidden-visible--Display);
1600
+ flex-shrink: 0;
1601
+ align-items: stretch;
1716
1602
  align-self: stretch;
1603
+ justify-content: center;
1604
+ border: 0;
1717
1605
  }
1718
1606
 
1719
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1720
- --pf-v6-c-check__input--TranslateY: 0;
1721
- align-self: center;
1607
+ .pf-v6-c-divider.pf-m-hidden {
1608
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1722
1609
  }
1723
1610
 
1724
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1725
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
1611
+ @media screen and (min-width: 36rem) {
1612
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
1613
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1614
+ }
1615
+ .pf-v6-c-divider.pf-m-visible-on-sm {
1616
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1617
+ }
1726
1618
  }
1727
-
1728
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1729
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1619
+ @media screen and (min-width: 48rem) {
1620
+ .pf-v6-c-divider.pf-m-hidden-on-md {
1621
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1622
+ }
1623
+ .pf-v6-c-divider.pf-m-visible-on-md {
1624
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1625
+ }
1730
1626
  }
1731
-
1732
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1733
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1734
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1627
+ @media screen and (min-width: 62rem) {
1628
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
1629
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1630
+ }
1631
+ .pf-v6-c-divider.pf-m-visible-on-lg {
1632
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1633
+ }
1735
1634
  }
1736
-
1737
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1738
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1739
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
1635
+ @media screen and (min-width: 75rem) {
1636
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
1637
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1638
+ }
1639
+ .pf-v6-c-divider.pf-m-visible-on-xl {
1640
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1641
+ }
1740
1642
  }
1741
-
1742
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1743
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
1643
+ @media screen and (min-width: 90.625rem) {
1644
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
1645
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1646
+ }
1647
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
1648
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1649
+ }
1650
+ }
1651
+ .pf-v6-c-divider::before {
1652
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1653
+ content: "";
1654
+ background-color: var(--pf-v6-c-divider--Color);
1744
1655
  }
1745
1656
 
1746
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1747
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1657
+ .pf-v6-c-divider.pf-m-horizontal {
1658
+ flex-direction: row;
1659
+ width: 100%;
1660
+ height: var(--pf-v6-c-divider--Size);
1748
1661
  }
1749
1662
 
1750
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1751
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1752
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1753
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1663
+ .pf-v6-c-divider.pf-m-vertical {
1664
+ flex-direction: column;
1665
+ width: var(--pf-v6-c-divider--Size);
1666
+ height: inherit;
1754
1667
  }
1755
1668
 
1756
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1757
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1758
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1759
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1669
+ .pf-v6-c-divider.pf-m-inset-none {
1670
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1760
1671
  }
1761
1672
 
1762
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1763
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1673
+ .pf-v6-c-divider.pf-m-inset-xs {
1674
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1764
1675
  }
1765
1676
 
1766
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1767
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1768
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1769
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1677
+ .pf-v6-c-divider.pf-m-inset-sm {
1678
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1770
1679
  }
1771
1680
 
1772
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1773
- content: none;
1681
+ .pf-v6-c-divider.pf-m-inset-md {
1682
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1774
1683
  }
1775
1684
 
1776
- .pf-v6-c-menu-toggle.pf-m-typeahead {
1777
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1778
- --pf-v6-c-menu-toggle--Gap: 0;
1779
- align-items: stretch;
1780
- padding: 0;
1685
+ .pf-v6-c-divider.pf-m-inset-lg {
1686
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1781
1687
  }
1782
1688
 
1783
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1784
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1689
+ .pf-v6-c-divider.pf-m-inset-xl {
1690
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1785
1691
  }
1786
1692
 
1787
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1788
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1789
- display: flex;
1790
- align-items: stretch;
1693
+ .pf-v6-c-divider.pf-m-inset-2xl {
1694
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1791
1695
  }
1792
1696
 
1793
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1794
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1795
- flex: 1;
1697
+ .pf-v6-c-divider.pf-m-inset-3xl {
1698
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1796
1699
  }
1797
1700
 
1798
- .pf-v6-c-menu-toggle__button {
1799
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
1800
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1801
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1802
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1803
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1804
- color: inherit;
1805
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1806
- border: 0;
1701
+ @media (min-width: 36rem) {
1702
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
1703
+ flex-direction: row;
1704
+ width: 100%;
1705
+ height: var(--pf-v6-c-divider--Size);
1706
+ }
1707
+ }
1708
+ @media (min-width: 36rem) {
1709
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
1710
+ flex-direction: column;
1711
+ width: var(--pf-v6-c-divider--Size);
1712
+ height: inherit;
1713
+ }
1714
+ }
1715
+ @media (min-width: 36rem) {
1716
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
1717
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1718
+ }
1719
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1720
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1721
+ }
1722
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1723
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1724
+ }
1725
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
1726
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1727
+ }
1728
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1729
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1730
+ }
1731
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1732
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1733
+ }
1734
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1735
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1736
+ }
1737
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1738
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1739
+ }
1740
+ }
1741
+ @media (min-width: 48rem) {
1742
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
1743
+ flex-direction: row;
1744
+ width: 100%;
1745
+ height: var(--pf-v6-c-divider--Size);
1746
+ }
1747
+ }
1748
+ @media (min-width: 48rem) {
1749
+ .pf-v6-c-divider.pf-m-vertical-on-md {
1750
+ flex-direction: column;
1751
+ width: var(--pf-v6-c-divider--Size);
1752
+ height: inherit;
1753
+ }
1807
1754
  }
1808
-
1809
- .pf-v6-c-menu-toggle__button.pf-m-text {
1810
- display: inline-flex;
1811
- align-items: baseline;
1755
+ @media (min-width: 48rem) {
1756
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
1757
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1758
+ }
1759
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
1760
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1761
+ }
1762
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
1763
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1764
+ }
1765
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
1766
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1767
+ }
1768
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
1769
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1770
+ }
1771
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
1772
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1773
+ }
1774
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1775
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1776
+ }
1777
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1778
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1779
+ }
1812
1780
  }
1813
-
1814
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
1815
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1816
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1781
+ @media (min-width: 62rem) {
1782
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
1783
+ flex-direction: row;
1784
+ width: 100%;
1785
+ height: var(--pf-v6-c-divider--Size);
1786
+ }
1817
1787
  }
1818
-
1819
- .pf-v6-c-menu-toggle__text {
1820
- overflow: hidden;
1821
- text-overflow: ellipsis;
1822
- white-space: nowrap;
1823
- min-width: 0;
1788
+ @media (min-width: 62rem) {
1789
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
1790
+ flex-direction: column;
1791
+ width: var(--pf-v6-c-divider--Size);
1792
+ height: inherit;
1793
+ }
1824
1794
  }
1825
-
1826
- .pf-v6-c-menu-toggle__count {
1827
- display: flex;
1828
- flex-wrap: nowrap;
1795
+ @media (min-width: 62rem) {
1796
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
1797
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1798
+ }
1799
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1800
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1801
+ }
1802
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1803
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1804
+ }
1805
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
1806
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1807
+ }
1808
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1809
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1810
+ }
1811
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1812
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1813
+ }
1814
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1815
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1816
+ }
1817
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1818
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1819
+ }
1829
1820
  }
1830
-
1831
- .pf-v6-c-menu-toggle__icon {
1832
- flex-shrink: 0;
1821
+ @media (min-width: 75rem) {
1822
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
1823
+ flex-direction: row;
1824
+ width: 100%;
1825
+ height: var(--pf-v6-c-divider--Size);
1826
+ }
1833
1827
  }
1834
-
1835
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1836
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1837
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
1838
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1839
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1828
+ @media (min-width: 75rem) {
1829
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
1830
+ flex-direction: column;
1831
+ width: var(--pf-v6-c-divider--Size);
1832
+ height: inherit;
1833
+ }
1840
1834
  }
1841
-
1842
- .pf-v6-c-menu-toggle__controls {
1843
- display: flex;
1844
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1845
- align-items: center;
1846
- justify-content: center;
1847
- margin-inline-start: auto;
1835
+ @media (min-width: 75rem) {
1836
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
1837
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1838
+ }
1839
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1840
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1841
+ }
1842
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1843
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1844
+ }
1845
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
1846
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1847
+ }
1848
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1849
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1850
+ }
1851
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1852
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1853
+ }
1854
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1855
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1856
+ }
1857
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1858
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1859
+ }
1848
1860
  }
1849
-
1850
- .pf-v6-c-menu-toggle__toggle-icon {
1851
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1852
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1861
+ @media (min-width: 90.625rem) {
1862
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1863
+ flex-direction: row;
1864
+ width: 100%;
1865
+ height: var(--pf-v6-c-divider--Size);
1866
+ }
1853
1867
  }
1854
-
1855
- .pf-v6-c-menu-toggle__status-icon {
1856
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1868
+ @media (min-width: 90.625rem) {
1869
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1870
+ flex-direction: column;
1871
+ width: var(--pf-v6-c-divider--Size);
1872
+ height: inherit;
1873
+ }
1874
+ }
1875
+ @media (min-width: 90.625rem) {
1876
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1877
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1878
+ }
1879
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1880
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1881
+ }
1882
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1883
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1884
+ }
1885
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1886
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1887
+ }
1888
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1889
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1890
+ }
1891
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1892
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1893
+ }
1894
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1895
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1896
+ }
1897
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1898
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1899
+ }
1857
1900
  }
1858
-
1859
1901
  .pf-v6-c-label {
1860
1902
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1861
1903
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -2374,19 +2416,92 @@ input.pf-v6-c-label__content {
2374
2416
  color: var(--pf-v6-c-label__icon--Color);
2375
2417
  }
2376
2418
 
2377
- .pf-v6-c-label__actions {
2378
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2419
+ .pf-v6-c-label__actions {
2420
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2421
+ }
2422
+
2423
+ .pf-v6-c-label__actions .pf-v6-c-button {
2424
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2425
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2426
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2427
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2428
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2429
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2430
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2431
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2432
+ }
2433
+
2434
+ .pf-v6-c-badge {
2435
+ --pf-v6-c-badge--BorderColor: transparent;
2436
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2437
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2438
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2439
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2440
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2441
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2442
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2443
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2444
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2445
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2446
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2447
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2448
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2449
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2450
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2451
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2452
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2453
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2454
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2455
+ }
2456
+
2457
+ .pf-v6-c-badge {
2458
+ position: relative;
2459
+ display: inline-block;
2460
+ min-width: var(--pf-v6-c-badge--MinWidth);
2461
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2462
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2463
+ font-size: var(--pf-v6-c-badge--FontSize);
2464
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2465
+ color: var(--pf-v6-c-badge--Color);
2466
+ text-align: center;
2467
+ white-space: nowrap;
2468
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2469
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2470
+ }
2471
+
2472
+ .pf-v6-c-badge::after {
2473
+ position: absolute;
2474
+ inset: 0;
2475
+ pointer-events: none;
2476
+ content: "";
2477
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2478
+ border-radius: inherit;
2479
+ }
2480
+
2481
+ .pf-v6-c-badge.pf-m-read {
2482
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2483
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2484
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2485
+ }
2486
+
2487
+ .pf-v6-c-badge.pf-m-unread {
2488
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2489
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2490
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2491
+ }
2492
+
2493
+ .pf-v6-c-badge.pf-m-disabled {
2494
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2495
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2496
+ }
2497
+
2498
+ .pf-v6-c-badge.pf-m-disabled::after {
2499
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2379
2500
  }
2380
2501
 
2381
- .pf-v6-c-label__actions .pf-v6-c-button {
2382
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2383
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2384
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2385
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2386
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2387
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2388
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2389
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2502
+ .pf-v6-c-badge__toggle-icon {
2503
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2504
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2390
2505
  }
2391
2506
 
2392
2507
  .pf-v6-c-check {
@@ -2471,79 +2586,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2471
2586
  color: var(--pf-v6-c-check__label-required--Color);
2472
2587
  }
2473
2588
 
2474
- .pf-v6-c-badge {
2475
- --pf-v6-c-badge--BorderColor: transparent;
2476
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2477
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2478
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2479
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2480
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2481
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2482
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2483
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2484
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2485
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2486
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2487
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2488
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2489
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2490
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2491
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2492
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2493
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2494
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2495
- }
2496
-
2497
- .pf-v6-c-badge {
2498
- position: relative;
2499
- display: inline-block;
2500
- min-width: var(--pf-v6-c-badge--MinWidth);
2501
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2502
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2503
- font-size: var(--pf-v6-c-badge--FontSize);
2504
- font-weight: var(--pf-v6-c-badge--FontWeight);
2505
- color: var(--pf-v6-c-badge--Color);
2506
- text-align: center;
2507
- white-space: nowrap;
2508
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2509
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2510
- }
2511
-
2512
- .pf-v6-c-badge::after {
2513
- position: absolute;
2514
- inset: 0;
2515
- pointer-events: none;
2516
- content: "";
2517
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2518
- border-radius: inherit;
2519
- }
2520
-
2521
- .pf-v6-c-badge.pf-m-read {
2522
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2523
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2524
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2525
- }
2526
-
2527
- .pf-v6-c-badge.pf-m-unread {
2528
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2529
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2530
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2531
- }
2532
-
2533
- .pf-v6-c-badge.pf-m-disabled {
2534
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2535
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2536
- }
2537
-
2538
- .pf-v6-c-badge.pf-m-disabled::after {
2539
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2540
- }
2541
-
2542
- .pf-v6-c-badge__toggle-icon {
2543
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2544
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2545
- }
2546
-
2547
2589
  .pf-v6-c-menu {
2548
2590
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2549
2591
  --pf-v6-c-menu--Width: auto;
@@ -3306,87 +3348,6 @@ button.pf-v6-c-breadcrumb__link {
3306
3348
  display: none;
3307
3349
  }
3308
3350
 
3309
- .pf-v6-c-spinner {
3310
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3311
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3312
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3313
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3314
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3315
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3316
- --pf-v6-c-spinner--StrokeWidth: 10;
3317
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3318
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3319
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3320
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3321
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3322
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3323
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3324
- }
3325
-
3326
- .pf-v6-c-spinner {
3327
- width: var(--pf-v6-c-spinner--Width);
3328
- height: var(--pf-v6-c-spinner--Height);
3329
- overflow: hidden;
3330
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3331
- }
3332
-
3333
- .pf-v6-c-spinner.pf-m-inline {
3334
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3335
- }
3336
-
3337
- .pf-v6-c-spinner.pf-m-sm {
3338
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3339
- }
3340
-
3341
- .pf-v6-c-spinner.pf-m-md {
3342
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3343
- }
3344
-
3345
- .pf-v6-c-spinner.pf-m-lg {
3346
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3347
- }
3348
-
3349
- .pf-v6-c-spinner.pf-m-xl {
3350
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3351
- }
3352
-
3353
- .pf-v6-c-spinner__path {
3354
- width: 100%;
3355
- height: 100%;
3356
- stroke: var(--pf-v6-c-spinner--Color);
3357
- stroke-dasharray: 283;
3358
- stroke-dashoffset: 280;
3359
- stroke-linecap: round;
3360
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3361
- transform-origin: 50% 50%;
3362
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3363
- }
3364
-
3365
- @keyframes pf-v6-c-spinner-animation-rotate {
3366
- 0% {
3367
- transform: rotate(0deg);
3368
- }
3369
- 100% {
3370
- transform: rotate(360deg);
3371
- }
3372
- }
3373
- @keyframes pf-v6-c-spinner-animation-dash {
3374
- 0% {
3375
- stroke-dashoffset: 280;
3376
- transform: rotate(0);
3377
- }
3378
- 15% {
3379
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3380
- }
3381
- 40% {
3382
- stroke-dasharray: 220;
3383
- stroke-dashoffset: 150;
3384
- }
3385
- 100% {
3386
- stroke-dashoffset: 280;
3387
- transform: rotate(720deg);
3388
- }
3389
- }
3390
3351
  .pf-v6-c-tooltip {
3391
3352
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3392
3353
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3516,4 +3477,86 @@ button.pf-v6-c-breadcrumb__link {
3516
3477
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3517
3478
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3518
3479
  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));
3480
+ }
3481
+
3482
+ .pf-v6-c-spinner {
3483
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3484
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3485
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3486
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3487
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3488
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3489
+ --pf-v6-c-spinner--StrokeWidth: 10;
3490
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3491
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3492
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3493
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3494
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3495
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3496
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3497
+ }
3498
+
3499
+ .pf-v6-c-spinner {
3500
+ width: var(--pf-v6-c-spinner--Width);
3501
+ height: var(--pf-v6-c-spinner--Height);
3502
+ overflow: hidden;
3503
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3504
+ }
3505
+
3506
+ .pf-v6-c-spinner.pf-m-inline {
3507
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3508
+ }
3509
+
3510
+ .pf-v6-c-spinner.pf-m-sm {
3511
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3512
+ }
3513
+
3514
+ .pf-v6-c-spinner.pf-m-md {
3515
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3516
+ }
3517
+
3518
+ .pf-v6-c-spinner.pf-m-lg {
3519
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3520
+ }
3521
+
3522
+ .pf-v6-c-spinner.pf-m-xl {
3523
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3524
+ }
3525
+
3526
+ .pf-v6-c-spinner__path {
3527
+ width: 100%;
3528
+ height: 100%;
3529
+ stroke: var(--pf-v6-c-spinner--Color);
3530
+ stroke-dasharray: 283;
3531
+ stroke-dashoffset: 280;
3532
+ stroke-linecap: round;
3533
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3534
+ transform-origin: 50% 50%;
3535
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3536
+ }
3537
+
3538
+ @keyframes pf-v6-c-spinner-animation-rotate {
3539
+ 0% {
3540
+ transform: rotate(0deg);
3541
+ }
3542
+ 100% {
3543
+ transform: rotate(360deg);
3544
+ }
3545
+ }
3546
+ @keyframes pf-v6-c-spinner-animation-dash {
3547
+ 0% {
3548
+ stroke-dashoffset: 280;
3549
+ transform: rotate(0);
3550
+ }
3551
+ 15% {
3552
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3553
+ }
3554
+ 40% {
3555
+ stroke-dasharray: 220;
3556
+ stroke-dashoffset: 150;
3557
+ }
3558
+ 100% {
3559
+ stroke-dashoffset: 280;
3560
+ transform: rotate(720deg);
3561
+ }
3519
3562
  }