@patternfly/react-templates 6.6.0-prerelease.9 → 6.6.1

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.
@@ -605,386 +605,620 @@
605
605
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
606
606
  }
607
607
 
608
- .pf-v6-c-text-input-group {
609
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
610
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
611
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
612
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
613
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
614
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
615
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
616
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
617
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
618
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
619
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
620
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
621
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
622
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
623
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
624
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
625
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
626
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
627
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
628
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
629
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
630
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
631
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
632
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
633
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
634
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
635
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
636
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
637
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
638
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
639
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
640
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
641
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
642
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
643
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
644
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
645
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
646
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
647
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
648
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
649
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
650
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
651
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
652
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
653
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
654
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
655
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
656
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
657
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
658
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
659
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
608
+ .pf-v6-c-badge {
609
+ --pf-v6-c-badge--BorderColor: transparent;
610
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
611
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
612
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
613
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
614
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
615
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
616
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
617
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
618
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
619
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
620
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
621
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
622
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
623
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
624
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
625
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
626
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
627
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
628
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
629
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
660
630
  }
661
631
 
662
- .pf-v6-c-text-input-group {
632
+ .pf-v6-c-badge {
663
633
  position: relative;
664
- display: flex;
665
- width: 100%;
666
- font-size: var(--pf-v6-c-text-input-group__FontSize);
667
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
668
- color: var(--pf-v6-c-text-input-group--Color, inherit);
669
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
670
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
671
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
672
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
673
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
634
+ display: inline-block;
635
+ min-width: var(--pf-v6-c-badge--MinWidth);
636
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
637
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
638
+ font-size: var(--pf-v6-c-badge--FontSize);
639
+ font-weight: var(--pf-v6-c-badge--FontWeight);
640
+ color: var(--pf-v6-c-badge--Color);
641
+ text-align: center;
642
+ white-space: nowrap;
643
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
644
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
674
645
  }
675
646
 
676
- .pf-v6-c-text-input-group::before {
647
+ .pf-v6-c-badge::after {
677
648
  position: absolute;
678
649
  inset: 0;
679
650
  pointer-events: none;
680
651
  content: "";
681
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
682
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
683
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
684
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
685
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
652
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
653
+ border-radius: inherit;
686
654
  }
687
655
 
688
- .pf-v6-c-text-input-group.pf-m-disabled {
689
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
690
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
691
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
692
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
693
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
694
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
695
- pointer-events: none;
656
+ .pf-v6-c-badge.pf-m-read {
657
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
658
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
659
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
660
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
696
661
  }
697
662
 
698
- .pf-v6-c-text-input-group.pf-m-plain {
699
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
663
+ .pf-v6-c-badge.pf-m-unread {
664
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
665
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
666
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
700
667
  }
701
668
 
702
- .pf-v6-c-text-input-group.pf-m-plain::before {
703
- border: 0;
669
+ .pf-v6-c-badge.pf-m-disabled {
670
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
671
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
704
672
  }
705
673
 
706
- .pf-v6-c-text-input-group.pf-m-success {
707
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
708
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
709
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
674
+ .pf-v6-c-badge.pf-m-disabled::after {
675
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
710
676
  }
711
677
 
712
- .pf-v6-c-text-input-group.pf-m-warning {
713
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
714
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
715
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
678
+ .pf-v6-c-badge__toggle-icon {
679
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
680
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
716
681
  }
717
682
 
718
- .pf-v6-c-text-input-group.pf-m-error {
719
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
720
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
721
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
683
+ .pf-v6-c-check {
684
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
685
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
686
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
687
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
688
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
689
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
690
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
691
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
692
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
693
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
694
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
695
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
696
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
697
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
722
698
  }
723
699
 
724
- @media (prefers-reduced-motion: no-preference) {
725
- .pf-v6-c-text-input-group.pf-m-error {
726
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
727
- animation-name: pf-v6-global-danger-jiggle-motion;
728
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
729
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
730
- animation-fill-mode: both;
731
- }
700
+ .pf-v6-c-check {
701
+ display: grid;
702
+ grid-template-columns: auto 1fr;
703
+ gap: var(--pf-v6-c-check--GridGap);
704
+ accent-color: var(--pf-v6-c-check--AccentColor);
732
705
  }
733
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
734
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
735
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
736
- animation-name: pf-v6-global-fade-in;
737
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
738
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
706
+
707
+ .pf-v6-c-check.pf-m-standalone {
708
+ display: inline-grid;
709
+ grid-template-columns: auto;
710
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
739
711
  }
740
712
 
741
- .pf-v6-c-text-input-group:hover {
742
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
713
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
714
+ align-self: center;
715
+ transform: none;
743
716
  }
744
717
 
745
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
746
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
718
+ .pf-v6-c-check__input {
719
+ align-self: start;
720
+ font-size: var(--pf-v6-c-check__label--FontSize);
721
+ line-height: var(--pf-v6-c-check__label--LineHeight);
722
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
747
723
  }
748
724
 
749
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
750
- --pf-v6-c-text-input-group__text--Position: relative;
725
+ .pf-v6-c-check__label {
726
+ font-size: var(--pf-v6-c-check__label--FontSize);
727
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
728
+ line-height: var(--pf-v6-c-check__label--LineHeight);
729
+ color: var(--pf-v6-c-check__label--Color);
751
730
  }
752
731
 
753
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
754
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
755
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
732
+ .pf-v6-c-check__description {
733
+ grid-column: 2;
734
+ font-size: var(--pf-v6-c-check__description--FontSize);
735
+ color: var(--pf-v6-c-check__description--Color);
756
736
  }
757
737
 
758
- .pf-v6-c-text-input-group__main {
759
- display: flex;
760
- flex: 1;
761
- flex-wrap: wrap;
762
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
763
- min-width: 0;
738
+ .pf-v6-c-check__body {
739
+ grid-column: 2;
764
740
  }
765
741
 
766
- .pf-v6-c-text-input-group__main.pf-m-icon {
767
- --pf-v6-c-text-input-group__text--Position: relative;
768
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
769
- display: inline-flex;
770
- align-items: center;
771
- justify-content: center;
772
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
742
+ .pf-v6-c-check__label,
743
+ .pf-v6-c-check__input {
744
+ justify-self: start;
773
745
  }
774
746
 
775
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
776
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
747
+ label.pf-v6-c-check, .pf-v6-c-check__label,
748
+ .pf-v6-c-check__input {
749
+ cursor: pointer;
777
750
  }
778
751
 
779
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
780
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
781
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
782
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
752
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
753
+ .pf-v6-c-check__input:disabled,
754
+ .pf-v6-c-check__input.pf-m-disabled {
755
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
756
+ cursor: not-allowed;
783
757
  }
784
758
 
785
- .pf-v6-c-text-input-group__text {
786
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
787
- display: inline-grid;
788
- flex: 1;
789
- grid-template-areas: "text-input";
790
- grid-template-columns: 1fr;
759
+ .pf-v6-c-check__label-required {
760
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
761
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
762
+ color: var(--pf-v6-c-check__label-required--Color);
791
763
  }
792
764
 
793
- .pf-v6-c-text-input-group__icon {
794
- position: absolute;
795
- inset-block-start: 50%;
796
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
797
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
798
- color: var(--pf-v6-c-text-input-group__icon--Color);
799
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
765
+ .pf-v6-c-divider {
766
+ --pf-v6-c-divider--Display: flex;
767
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
768
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
769
+ --pf-v6-c-divider--before--FlexBasis: 100%;
800
770
  }
801
771
 
802
- .pf-v6-c-text-input-group__icon.pf-m-status {
803
- inset-inline-start: auto;
804
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
805
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
772
+ .pf-v6-c-divider {
773
+ flex-direction: row;
774
+ width: 100%;
775
+ height: var(--pf-v6-c-divider--Size);
776
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
777
+ --pf-v6-hidden-visible--hidden--Display: none;
778
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
779
+ display: var(--pf-v6-hidden-visible--Display);
806
780
  }
807
781
 
808
- .pf-v6-c-text-input-group__text-input {
809
- overflow: hidden;
810
- text-overflow: ellipsis;
811
- white-space: nowrap;
812
- position: relative;
813
- width: 100%;
814
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
815
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
816
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
817
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
818
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
819
- color: var(--pf-v6-c-text-input-group__text-input--Color);
820
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
821
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
782
+ .pf-v6-c-divider.pf-m-hidden {
783
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
784
+ }
785
+
786
+ @media screen and (min-width: 36rem) {
787
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
788
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
789
+ }
790
+ .pf-v6-c-divider.pf-m-visible-on-sm {
791
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
792
+ }
793
+ }
794
+ @media screen and (min-width: 48rem) {
795
+ .pf-v6-c-divider.pf-m-hidden-on-md {
796
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
797
+ }
798
+ .pf-v6-c-divider.pf-m-visible-on-md {
799
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
800
+ }
801
+ }
802
+ @media screen and (min-width: 62rem) {
803
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
804
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
805
+ }
806
+ .pf-v6-c-divider.pf-m-visible-on-lg {
807
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
808
+ }
809
+ }
810
+ @media screen and (min-width: 75rem) {
811
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
812
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
813
+ }
814
+ .pf-v6-c-divider.pf-m-visible-on-xl {
815
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
816
+ }
817
+ }
818
+ @media screen and (min-width: 90.625rem) {
819
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
820
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
821
+ }
822
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
823
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
824
+ }
825
+ }
826
+ .pf-v6-c-divider {
827
+ flex-shrink: 0;
828
+ align-items: stretch;
829
+ align-self: stretch;
830
+ justify-content: center;
822
831
  border: 0;
823
832
  }
824
833
 
825
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
826
- grid-area: text-input;
834
+ .pf-v6-c-divider::before {
835
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
836
+ content: "";
837
+ background-color: var(--pf-v6-c-divider--Color);
838
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
839
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
827
840
  }
828
841
 
829
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
830
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
842
+ .pf-v6-c-divider.pf-m-horizontal {
843
+ flex-direction: row;
844
+ width: 100%;
845
+ height: var(--pf-v6-c-divider--Size);
831
846
  }
832
847
 
833
- .pf-v6-c-text-input-group__text-input::placeholder {
834
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
848
+ .pf-v6-c-divider.pf-m-vertical {
849
+ flex-direction: column;
850
+ width: var(--pf-v6-c-divider--Size);
851
+ height: inherit;
835
852
  }
836
853
 
837
- .pf-v6-c-text-input-group__utilities {
838
- display: flex;
839
- align-items: center;
840
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
841
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
854
+ .pf-v6-c-divider.pf-m-inset-none {
855
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
842
856
  }
843
857
 
844
- .pf-v6-c-text-input-group__utilities > * + * {
845
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
858
+ .pf-v6-c-divider.pf-m-inset-xs {
859
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
846
860
  }
847
861
 
848
- .pf-v6-c-text-input-group__group {
849
- display: flex;
862
+ .pf-v6-c-divider.pf-m-inset-sm {
863
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
850
864
  }
851
865
 
852
- .pf-v6-c-button {
853
- --pf-v6-c-button--Display: inline-flex;
854
- --pf-v6-c-button--AlignItems: baseline;
855
- --pf-v6-c-button--JustifyContent: center;
856
- --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
857
- --pf-v6-c-button--MinWidth: calc(1lh + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
858
- --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
859
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
860
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
861
- --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
862
- --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
863
- --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
864
- --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
865
- --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
866
- --pf-v6-c-button--BackgroundColor: transparent;
867
- --pf-v6-c-button--BorderColor: transparent;
868
- --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
869
- --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
870
- --pf-v6-c-button--TextDecorationLine: none;
871
- --pf-v6-c-button--TextDecorationStyle: none;
872
- --pf-v6-c-button--TextDecorationColor: currentcolor;
873
- --pf-v6-c-button--TransitionDelay: 0s;
874
- --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
875
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
876
- --pf-v6-c-button--TransitionProperty: color, background, border-color;
877
- --pf-v6-c-button--ScaleX: 1;
878
- --pf-v6-c-button--ScaleY: 1;
879
- --pf-v6-c-button--border--offset: 0;
880
- --pf-v6-c-button--hover--BackgroundColor: transparent;
881
- --pf-v6-c-button--hover--BorderColor: transparent;
882
- --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
883
- --pf-v6-c-button--hover--TextDecorationLine: none;
884
- --pf-v6-c-button--hover--TextDecorationStyle: none;
885
- --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
886
- --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
887
- --pf-v6-c-button--hover--ScaleX: 1;
888
- --pf-v6-c-button--hover--ScaleY: 1;
889
- --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
890
- --pf-v6-c-button--m-clicked--BorderColor: transparent;
891
- --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
892
- --pf-v6-c-button--m-clicked--TextDecorationLine: none;
893
- --pf-v6-c-button--m-clicked--TextDecorationStyle: none;
894
- --pf-v6-c-button--m-clicked--TextDecorationColor: currentcolor;
895
- --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
896
- --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
897
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
898
- --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
899
- --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
900
- --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
901
- --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
902
- --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
903
- --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
904
- --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
905
- --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
906
- --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
907
- --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
908
- --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
909
- --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
910
- --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
911
- --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
912
- --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
913
- --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
914
- --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
915
- --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
916
- --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
917
- --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
918
- --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
919
- --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
920
- --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
921
- --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
922
- --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
923
- --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
924
- --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
925
- --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
926
- --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
927
- --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
928
- --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
929
- --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
930
- --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
931
- --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
932
- --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
933
- --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
934
- --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
935
- --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
936
- --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
937
- --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
938
- --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
939
- --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
940
- --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
941
- --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
942
- --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
943
- --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
944
- --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
945
- --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
946
- --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
947
- --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
948
- --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
949
- --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
950
- --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
951
- --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
952
- --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
953
- --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
954
- --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
955
- --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
956
- --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
957
- --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
958
- --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
959
- --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
960
- --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
961
- --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
962
- --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
963
- --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
964
- --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
965
- --pf-v6-c-button--m-link--m-inline--FontSize: initial;
966
- --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
967
- --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
968
- --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0;
969
- --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
970
- --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
971
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
972
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
973
- --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
974
- --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
975
- --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
976
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
977
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
978
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
979
- --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
980
- --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
981
- --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
982
- --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
983
- --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
984
- --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
985
- --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
986
- --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
987
- --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
866
+ .pf-v6-c-divider.pf-m-inset-md {
867
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
868
+ }
869
+
870
+ .pf-v6-c-divider.pf-m-inset-lg {
871
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
872
+ }
873
+
874
+ .pf-v6-c-divider.pf-m-inset-xl {
875
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
876
+ }
877
+
878
+ .pf-v6-c-divider.pf-m-inset-2xl {
879
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
880
+ }
881
+
882
+ .pf-v6-c-divider.pf-m-inset-3xl {
883
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
884
+ }
885
+
886
+ @media (min-width: 36rem) {
887
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
888
+ flex-direction: row;
889
+ width: 100%;
890
+ height: var(--pf-v6-c-divider--Size);
891
+ }
892
+ }
893
+ @media (min-width: 36rem) {
894
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
895
+ flex-direction: column;
896
+ width: var(--pf-v6-c-divider--Size);
897
+ height: inherit;
898
+ }
899
+ }
900
+ @media (min-width: 36rem) {
901
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
902
+ --pf-v6-c-divider--before--FlexBasis: 100%;
903
+ }
904
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
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-sm {
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-sm {
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-sm {
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-sm {
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-sm {
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-sm {
923
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
924
+ }
925
+ }
926
+ @media (min-width: 48rem) {
927
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
928
+ flex-direction: row;
929
+ width: 100%;
930
+ height: var(--pf-v6-c-divider--Size);
931
+ }
932
+ }
933
+ @media (min-width: 48rem) {
934
+ .pf-v6-c-divider.pf-m-vertical-on-md {
935
+ flex-direction: column;
936
+ width: var(--pf-v6-c-divider--Size);
937
+ height: inherit;
938
+ }
939
+ }
940
+ @media (min-width: 48rem) {
941
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
942
+ --pf-v6-c-divider--before--FlexBasis: 100%;
943
+ }
944
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
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-md {
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-md {
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-md {
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-md {
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-md {
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-md {
963
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
964
+ }
965
+ }
966
+ @media (min-width: 62rem) {
967
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
968
+ flex-direction: row;
969
+ width: 100%;
970
+ height: var(--pf-v6-c-divider--Size);
971
+ }
972
+ }
973
+ @media (min-width: 62rem) {
974
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
975
+ flex-direction: column;
976
+ width: var(--pf-v6-c-divider--Size);
977
+ height: inherit;
978
+ }
979
+ }
980
+ @media (min-width: 62rem) {
981
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
982
+ --pf-v6-c-divider--before--FlexBasis: 100%;
983
+ }
984
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
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-lg {
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-lg {
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-lg {
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-lg {
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-lg {
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-lg {
1003
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1004
+ }
1005
+ }
1006
+ @media (min-width: 75rem) {
1007
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
1008
+ flex-direction: row;
1009
+ width: 100%;
1010
+ height: var(--pf-v6-c-divider--Size);
1011
+ }
1012
+ }
1013
+ @media (min-width: 75rem) {
1014
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
1015
+ flex-direction: column;
1016
+ width: var(--pf-v6-c-divider--Size);
1017
+ height: inherit;
1018
+ }
1019
+ }
1020
+ @media (min-width: 75rem) {
1021
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
1022
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1023
+ }
1024
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1025
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1026
+ }
1027
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1028
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1029
+ }
1030
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
1031
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1032
+ }
1033
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1034
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1035
+ }
1036
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1037
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1038
+ }
1039
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1040
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1041
+ }
1042
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1043
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1044
+ }
1045
+ }
1046
+ @media (min-width: 90.625rem) {
1047
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1048
+ flex-direction: row;
1049
+ width: 100%;
1050
+ height: var(--pf-v6-c-divider--Size);
1051
+ }
1052
+ }
1053
+ @media (min-width: 90.625rem) {
1054
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1055
+ flex-direction: column;
1056
+ width: var(--pf-v6-c-divider--Size);
1057
+ height: inherit;
1058
+ }
1059
+ }
1060
+ @media (min-width: 90.625rem) {
1061
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1062
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1063
+ }
1064
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1065
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1066
+ }
1067
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1068
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1069
+ }
1070
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1071
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1072
+ }
1073
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1074
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1075
+ }
1076
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1077
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1078
+ }
1079
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1080
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1081
+ }
1082
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1083
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1084
+ }
1085
+ }
1086
+ .pf-v6-c-button {
1087
+ --pf-v6-c-button--Display: inline-flex;
1088
+ --pf-v6-c-button--AlignItems: baseline;
1089
+ --pf-v6-c-button--JustifyContent: center;
1090
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1091
+ --pf-v6-c-button--MinWidth: calc(1lh + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1092
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1093
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1094
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1095
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1096
+ --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
1097
+ --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
1098
+ --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1099
+ --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1100
+ --pf-v6-c-button--BackgroundColor: transparent;
1101
+ --pf-v6-c-button--BorderColor: transparent;
1102
+ --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
1103
+ --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1104
+ --pf-v6-c-button--TextDecorationLine: none;
1105
+ --pf-v6-c-button--TextDecorationStyle: none;
1106
+ --pf-v6-c-button--TextDecorationColor: currentcolor;
1107
+ --pf-v6-c-button--TransitionDelay: 0s;
1108
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1109
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1110
+ --pf-v6-c-button--TransitionProperty: color, background, border-color;
1111
+ --pf-v6-c-button--ScaleX: 1;
1112
+ --pf-v6-c-button--ScaleY: 1;
1113
+ --pf-v6-c-button--border--offset: 0;
1114
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
1115
+ --pf-v6-c-button--hover--BorderColor: transparent;
1116
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1117
+ --pf-v6-c-button--hover--TextDecorationLine: none;
1118
+ --pf-v6-c-button--hover--TextDecorationStyle: none;
1119
+ --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
1120
+ --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1121
+ --pf-v6-c-button--hover--ScaleX: 1;
1122
+ --pf-v6-c-button--hover--ScaleY: 1;
1123
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1124
+ --pf-v6-c-button--m-clicked--BorderColor: transparent;
1125
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1126
+ --pf-v6-c-button--m-clicked--TextDecorationLine: none;
1127
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: none;
1128
+ --pf-v6-c-button--m-clicked--TextDecorationColor: currentcolor;
1129
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1130
+ --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1131
+ --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1132
+ --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1133
+ --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1134
+ --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1135
+ --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1136
+ --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
1137
+ --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1138
+ --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1139
+ --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1140
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1141
+ --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1142
+ --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1143
+ --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1144
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1145
+ --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1146
+ --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1147
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1148
+ --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1149
+ --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1150
+ --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1151
+ --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1152
+ --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
1153
+ --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1154
+ --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1155
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
1156
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
1157
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
1158
+ --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
1159
+ --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
1160
+ --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1161
+ --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1162
+ --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1163
+ --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
1164
+ --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1165
+ --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1166
+ --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1167
+ --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1168
+ --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1169
+ --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1170
+ --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1171
+ --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
1172
+ --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1173
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
1174
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
1175
+ --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1176
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
1177
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1178
+ --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1179
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
1180
+ --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1181
+ --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1182
+ --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1183
+ --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1184
+ --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1185
+ --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
1186
+ --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
1187
+ --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1188
+ --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1189
+ --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1190
+ --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
1191
+ --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
1192
+ --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1193
+ --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
1194
+ --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
1195
+ --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1196
+ --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
1197
+ --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
1198
+ --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
1199
+ --pf-v6-c-button--m-link--m-inline--FontSize: initial;
1200
+ --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
1201
+ --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
1202
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0;
1203
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1204
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1205
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1206
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1207
+ --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1208
+ --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1209
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1210
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1211
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1212
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1213
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1214
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1215
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1216
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1217
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1218
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1219
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1220
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
1221
+ --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
988
1222
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
989
1223
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
990
1224
  --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
@@ -2045,79 +2279,248 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2045
2279
  display: none;
2046
2280
  }
2047
2281
 
2048
- .pf-v6-c-badge {
2049
- --pf-v6-c-badge--BorderColor: transparent;
2050
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2051
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2052
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2053
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2054
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2055
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2056
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2057
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2058
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2059
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2060
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2061
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2062
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2063
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2064
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2065
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2066
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2067
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2068
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2069
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2282
+ .pf-v6-c-text-input-group {
2283
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2284
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
2285
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2286
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2287
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2288
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2289
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2290
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2291
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2292
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2293
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2294
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2295
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2296
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2297
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2298
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2299
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2300
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2301
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
2302
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2303
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2304
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2305
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2306
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2307
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2308
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2309
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2310
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2311
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2312
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2313
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2314
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2315
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2316
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2317
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2318
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2319
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2320
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2321
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2322
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2323
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2324
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2325
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2326
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2327
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2328
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2329
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2330
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2331
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2332
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2333
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2070
2334
  }
2071
2335
 
2072
- .pf-v6-c-badge {
2336
+ .pf-v6-c-text-input-group {
2073
2337
  position: relative;
2074
- display: inline-block;
2075
- min-width: var(--pf-v6-c-badge--MinWidth);
2076
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2077
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2078
- font-size: var(--pf-v6-c-badge--FontSize);
2079
- font-weight: var(--pf-v6-c-badge--FontWeight);
2080
- color: var(--pf-v6-c-badge--Color);
2081
- text-align: center;
2082
- white-space: nowrap;
2083
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2084
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2338
+ display: flex;
2339
+ width: 100%;
2340
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2341
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2342
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2343
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2344
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2345
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2346
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2347
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2085
2348
  }
2086
2349
 
2087
- .pf-v6-c-badge::after {
2350
+ .pf-v6-c-text-input-group::before {
2088
2351
  position: absolute;
2089
2352
  inset: 0;
2090
2353
  pointer-events: none;
2091
2354
  content: "";
2092
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2093
- border-radius: inherit;
2355
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2356
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2357
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2358
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2359
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2094
2360
  }
2095
2361
 
2096
- .pf-v6-c-badge.pf-m-read {
2097
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2098
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2099
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2100
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2362
+ .pf-v6-c-text-input-group.pf-m-disabled {
2363
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2364
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2365
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2366
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2367
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2368
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2369
+ pointer-events: none;
2370
+ }
2371
+
2372
+ .pf-v6-c-text-input-group.pf-m-plain {
2373
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2374
+ }
2375
+
2376
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2377
+ border: 0;
2378
+ }
2379
+
2380
+ .pf-v6-c-text-input-group.pf-m-success {
2381
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2382
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2383
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2384
+ }
2385
+
2386
+ .pf-v6-c-text-input-group.pf-m-warning {
2387
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2388
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2389
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2390
+ }
2391
+
2392
+ .pf-v6-c-text-input-group.pf-m-error {
2393
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2394
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2395
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2396
+ }
2397
+
2398
+ @media (prefers-reduced-motion: no-preference) {
2399
+ .pf-v6-c-text-input-group.pf-m-error {
2400
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2401
+ animation-name: pf-v6-global-danger-jiggle-motion;
2402
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2403
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2404
+ animation-fill-mode: both;
2405
+ }
2406
+ }
2407
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2408
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2409
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2410
+ animation-name: pf-v6-global-fade-in;
2411
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2412
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2413
+ }
2414
+
2415
+ .pf-v6-c-text-input-group:hover {
2416
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2417
+ }
2418
+
2419
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2420
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2421
+ }
2422
+
2423
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2424
+ --pf-v6-c-text-input-group__text--Position: relative;
2425
+ }
2426
+
2427
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2428
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2429
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2430
+ }
2431
+
2432
+ .pf-v6-c-text-input-group__main {
2433
+ display: flex;
2434
+ flex: 1;
2435
+ flex-wrap: wrap;
2436
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2437
+ min-width: 0;
2438
+ }
2439
+
2440
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2441
+ --pf-v6-c-text-input-group__text--Position: relative;
2442
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2443
+ display: inline-flex;
2444
+ align-items: center;
2445
+ justify-content: center;
2446
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2447
+ }
2448
+
2449
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2450
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2451
+ }
2452
+
2453
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2454
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2455
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2456
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2457
+ }
2458
+
2459
+ .pf-v6-c-text-input-group__text {
2460
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2461
+ display: inline-grid;
2462
+ flex: 1;
2463
+ grid-template-areas: "text-input";
2464
+ grid-template-columns: 1fr;
2465
+ }
2466
+
2467
+ .pf-v6-c-text-input-group__icon {
2468
+ position: absolute;
2469
+ inset-block-start: 50%;
2470
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2471
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2472
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2473
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2474
+ }
2475
+
2476
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2477
+ inset-inline-start: auto;
2478
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2479
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2480
+ }
2481
+
2482
+ .pf-v6-c-text-input-group__text-input {
2483
+ overflow: hidden;
2484
+ text-overflow: ellipsis;
2485
+ white-space: nowrap;
2486
+ position: relative;
2487
+ width: 100%;
2488
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2489
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2490
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2491
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2492
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2493
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
2494
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2495
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2496
+ border: 0;
2497
+ }
2498
+
2499
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2500
+ grid-area: text-input;
2501
+ }
2502
+
2503
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2504
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2101
2505
  }
2102
2506
 
2103
- .pf-v6-c-badge.pf-m-unread {
2104
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2105
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2106
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2507
+ .pf-v6-c-text-input-group__text-input::placeholder {
2508
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2107
2509
  }
2108
2510
 
2109
- .pf-v6-c-badge.pf-m-disabled {
2110
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2111
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2511
+ .pf-v6-c-text-input-group__utilities {
2512
+ display: flex;
2513
+ align-items: center;
2514
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2515
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2112
2516
  }
2113
2517
 
2114
- .pf-v6-c-badge.pf-m-disabled::after {
2115
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2518
+ .pf-v6-c-text-input-group__utilities > * + * {
2519
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2116
2520
  }
2117
2521
 
2118
- .pf-v6-c-badge__toggle-icon {
2119
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2120
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2522
+ .pf-v6-c-text-input-group__group {
2523
+ display: flex;
2121
2524
  }
2122
2525
 
2123
2526
  .pf-v6-c-label {
@@ -2605,467 +3008,64 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2605
3008
  justify-content: center;
2606
3009
  }
2607
3010
 
2608
- .pf-v6-c-label__text {
2609
- overflow: hidden;
2610
- text-overflow: ellipsis;
2611
- white-space: nowrap;
2612
- max-width: var(--pf-v6-c-label__text--MaxWidth);
2613
- }
2614
-
2615
- .pf-v6-c-label__content {
2616
- gap: var(--pf-v6-c-label__content--Gap);
2617
- max-width: var(--pf-v6-c-label__content--MaxWidth);
2618
- padding: 0;
2619
- overflow: hidden;
2620
- color: var(--pf-v6-c-label--Color);
2621
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
2622
- background: transparent;
2623
- border-width: 0;
2624
- }
2625
-
2626
- .pf-v6-c-label__content::before {
2627
- position: absolute;
2628
- inset: 0;
2629
- z-index: -1;
2630
- pointer-events: none;
2631
- content: "";
2632
- background-color: var(--pf-v6-c-label--BackgroundColor);
2633
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2634
- border-radius: var(--pf-v6-c-label--BorderRadius);
2635
- }
2636
-
2637
- input.pf-v6-c-label__content {
2638
- overflow: hidden;
2639
- text-overflow: ellipsis;
2640
- white-space: nowrap;
2641
- }
2642
-
2643
- .pf-v6-c-label__icon {
2644
- color: var(--pf-v6-c-label__icon--Color);
2645
- }
2646
-
2647
- .pf-v6-c-label__actions {
2648
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2649
- }
2650
-
2651
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2652
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2653
- }
2654
-
2655
- .pf-v6-c-label__actions .pf-v6-c-button {
2656
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2657
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2658
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2659
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2660
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2661
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2662
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2663
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2664
- }
2665
-
2666
- .pf-v6-c-check {
2667
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2668
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2669
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2670
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2671
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2672
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2673
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2674
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2675
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2676
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2677
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2678
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2679
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2680
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2681
- }
2682
-
2683
- .pf-v6-c-check {
2684
- display: grid;
2685
- grid-template-columns: auto 1fr;
2686
- gap: var(--pf-v6-c-check--GridGap);
2687
- accent-color: var(--pf-v6-c-check--AccentColor);
2688
- }
2689
-
2690
- .pf-v6-c-check.pf-m-standalone {
2691
- display: inline-grid;
2692
- grid-template-columns: auto;
2693
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2694
- }
2695
-
2696
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2697
- align-self: center;
2698
- transform: none;
2699
- }
2700
-
2701
- .pf-v6-c-check__input {
2702
- align-self: start;
2703
- font-size: var(--pf-v6-c-check__label--FontSize);
2704
- line-height: var(--pf-v6-c-check__label--LineHeight);
2705
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2706
- }
2707
-
2708
- .pf-v6-c-check__label {
2709
- font-size: var(--pf-v6-c-check__label--FontSize);
2710
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2711
- line-height: var(--pf-v6-c-check__label--LineHeight);
2712
- color: var(--pf-v6-c-check__label--Color);
2713
- }
2714
-
2715
- .pf-v6-c-check__description {
2716
- grid-column: 2;
2717
- font-size: var(--pf-v6-c-check__description--FontSize);
2718
- color: var(--pf-v6-c-check__description--Color);
2719
- }
2720
-
2721
- .pf-v6-c-check__body {
2722
- grid-column: 2;
2723
- }
2724
-
2725
- .pf-v6-c-check__label,
2726
- .pf-v6-c-check__input {
2727
- justify-self: start;
2728
- }
2729
-
2730
- label.pf-v6-c-check, .pf-v6-c-check__label,
2731
- .pf-v6-c-check__input {
2732
- cursor: pointer;
2733
- }
2734
-
2735
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2736
- .pf-v6-c-check__input:disabled,
2737
- .pf-v6-c-check__input.pf-m-disabled {
2738
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2739
- cursor: not-allowed;
2740
- }
2741
-
2742
- .pf-v6-c-check__label-required {
2743
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2744
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2745
- color: var(--pf-v6-c-check__label-required--Color);
2746
- }
2747
-
2748
- .pf-v6-c-divider {
2749
- --pf-v6-c-divider--Display: flex;
2750
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2751
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2752
- --pf-v6-c-divider--before--FlexBasis: 100%;
2753
- }
2754
-
2755
- .pf-v6-c-divider {
2756
- flex-direction: row;
2757
- width: 100%;
2758
- height: var(--pf-v6-c-divider--Size);
2759
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2760
- --pf-v6-hidden-visible--hidden--Display: none;
2761
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2762
- display: var(--pf-v6-hidden-visible--Display);
2763
- }
2764
-
2765
- .pf-v6-c-divider.pf-m-hidden {
2766
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2767
- }
2768
-
2769
- @media screen and (min-width: 36rem) {
2770
- .pf-v6-c-divider.pf-m-hidden-on-sm {
2771
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2772
- }
2773
- .pf-v6-c-divider.pf-m-visible-on-sm {
2774
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2775
- }
2776
- }
2777
- @media screen and (min-width: 48rem) {
2778
- .pf-v6-c-divider.pf-m-hidden-on-md {
2779
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2780
- }
2781
- .pf-v6-c-divider.pf-m-visible-on-md {
2782
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2783
- }
2784
- }
2785
- @media screen and (min-width: 62rem) {
2786
- .pf-v6-c-divider.pf-m-hidden-on-lg {
2787
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2788
- }
2789
- .pf-v6-c-divider.pf-m-visible-on-lg {
2790
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2791
- }
2792
- }
2793
- @media screen and (min-width: 75rem) {
2794
- .pf-v6-c-divider.pf-m-hidden-on-xl {
2795
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2796
- }
2797
- .pf-v6-c-divider.pf-m-visible-on-xl {
2798
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2799
- }
2800
- }
2801
- @media screen and (min-width: 90.625rem) {
2802
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
2803
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2804
- }
2805
- .pf-v6-c-divider.pf-m-visible-on-2xl {
2806
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2807
- }
2808
- }
2809
- .pf-v6-c-divider {
2810
- flex-shrink: 0;
2811
- align-items: stretch;
2812
- align-self: stretch;
2813
- justify-content: center;
2814
- border: 0;
2815
- }
2816
-
2817
- .pf-v6-c-divider::before {
2818
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2819
- content: "";
2820
- background-color: var(--pf-v6-c-divider--Color);
2821
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2822
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2823
- }
2824
-
2825
- .pf-v6-c-divider.pf-m-horizontal {
2826
- flex-direction: row;
2827
- width: 100%;
2828
- height: var(--pf-v6-c-divider--Size);
2829
- }
2830
-
2831
- .pf-v6-c-divider.pf-m-vertical {
2832
- flex-direction: column;
2833
- width: var(--pf-v6-c-divider--Size);
2834
- height: inherit;
2835
- }
2836
-
2837
- .pf-v6-c-divider.pf-m-inset-none {
2838
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2839
- }
2840
-
2841
- .pf-v6-c-divider.pf-m-inset-xs {
2842
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
3011
+ .pf-v6-c-label__text {
3012
+ overflow: hidden;
3013
+ text-overflow: ellipsis;
3014
+ white-space: nowrap;
3015
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
2843
3016
  }
2844
3017
 
2845
- .pf-v6-c-divider.pf-m-inset-sm {
2846
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
3018
+ .pf-v6-c-label__content {
3019
+ gap: var(--pf-v6-c-label__content--Gap);
3020
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
3021
+ padding: 0;
3022
+ overflow: hidden;
3023
+ color: var(--pf-v6-c-label--Color);
3024
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
3025
+ background: transparent;
3026
+ border-width: 0;
2847
3027
  }
2848
3028
 
2849
- .pf-v6-c-divider.pf-m-inset-md {
2850
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3029
+ .pf-v6-c-label__content::before {
3030
+ position: absolute;
3031
+ inset: 0;
3032
+ z-index: -1;
3033
+ pointer-events: none;
3034
+ content: "";
3035
+ background-color: var(--pf-v6-c-label--BackgroundColor);
3036
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
3037
+ border-radius: var(--pf-v6-c-label--BorderRadius);
2851
3038
  }
2852
3039
 
2853
- .pf-v6-c-divider.pf-m-inset-lg {
2854
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3040
+ input.pf-v6-c-label__content {
3041
+ overflow: hidden;
3042
+ text-overflow: ellipsis;
3043
+ white-space: nowrap;
2855
3044
  }
2856
3045
 
2857
- .pf-v6-c-divider.pf-m-inset-xl {
2858
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3046
+ .pf-v6-c-label__icon {
3047
+ color: var(--pf-v6-c-label__icon--Color);
2859
3048
  }
2860
3049
 
2861
- .pf-v6-c-divider.pf-m-inset-2xl {
2862
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3050
+ .pf-v6-c-label__actions {
3051
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2863
3052
  }
2864
3053
 
2865
- .pf-v6-c-divider.pf-m-inset-3xl {
2866
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3054
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
3055
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2867
3056
  }
2868
3057
 
2869
- @media (min-width: 36rem) {
2870
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
2871
- flex-direction: row;
2872
- width: 100%;
2873
- height: var(--pf-v6-c-divider--Size);
2874
- }
2875
- }
2876
- @media (min-width: 36rem) {
2877
- .pf-v6-c-divider.pf-m-vertical-on-sm {
2878
- flex-direction: column;
2879
- width: var(--pf-v6-c-divider--Size);
2880
- height: inherit;
2881
- }
2882
- }
2883
- @media (min-width: 36rem) {
2884
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
2885
- --pf-v6-c-divider--before--FlexBasis: 100%;
2886
- }
2887
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2888
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2889
- }
2890
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2891
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2892
- }
2893
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
2894
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2895
- }
2896
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2897
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2898
- }
2899
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2900
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2901
- }
2902
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2903
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2904
- }
2905
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2906
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2907
- }
2908
- }
2909
- @media (min-width: 48rem) {
2910
- .pf-v6-c-divider.pf-m-horizontal-on-md {
2911
- flex-direction: row;
2912
- width: 100%;
2913
- height: var(--pf-v6-c-divider--Size);
2914
- }
2915
- }
2916
- @media (min-width: 48rem) {
2917
- .pf-v6-c-divider.pf-m-vertical-on-md {
2918
- flex-direction: column;
2919
- width: var(--pf-v6-c-divider--Size);
2920
- height: inherit;
2921
- }
2922
- }
2923
- @media (min-width: 48rem) {
2924
- .pf-v6-c-divider.pf-m-inset-none-on-md {
2925
- --pf-v6-c-divider--before--FlexBasis: 100%;
2926
- }
2927
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
2928
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2929
- }
2930
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
2931
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2932
- }
2933
- .pf-v6-c-divider.pf-m-inset-md-on-md {
2934
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2935
- }
2936
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
2937
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2938
- }
2939
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
2940
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2941
- }
2942
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2943
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2944
- }
2945
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2946
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2947
- }
2948
- }
2949
- @media (min-width: 62rem) {
2950
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
2951
- flex-direction: row;
2952
- width: 100%;
2953
- height: var(--pf-v6-c-divider--Size);
2954
- }
2955
- }
2956
- @media (min-width: 62rem) {
2957
- .pf-v6-c-divider.pf-m-vertical-on-lg {
2958
- flex-direction: column;
2959
- width: var(--pf-v6-c-divider--Size);
2960
- height: inherit;
2961
- }
2962
- }
2963
- @media (min-width: 62rem) {
2964
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
2965
- --pf-v6-c-divider--before--FlexBasis: 100%;
2966
- }
2967
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2968
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2969
- }
2970
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2971
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2972
- }
2973
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
2974
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2975
- }
2976
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2977
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2978
- }
2979
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2980
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2981
- }
2982
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2983
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2984
- }
2985
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2986
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2987
- }
2988
- }
2989
- @media (min-width: 75rem) {
2990
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
2991
- flex-direction: row;
2992
- width: 100%;
2993
- height: var(--pf-v6-c-divider--Size);
2994
- }
2995
- }
2996
- @media (min-width: 75rem) {
2997
- .pf-v6-c-divider.pf-m-vertical-on-xl {
2998
- flex-direction: column;
2999
- width: var(--pf-v6-c-divider--Size);
3000
- height: inherit;
3001
- }
3002
- }
3003
- @media (min-width: 75rem) {
3004
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
3005
- --pf-v6-c-divider--before--FlexBasis: 100%;
3006
- }
3007
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
3008
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
3009
- }
3010
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
3011
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
3012
- }
3013
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
3014
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3015
- }
3016
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
3017
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3018
- }
3019
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
3020
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3021
- }
3022
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
3023
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3024
- }
3025
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
3026
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3027
- }
3028
- }
3029
- @media (min-width: 90.625rem) {
3030
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
3031
- flex-direction: row;
3032
- width: 100%;
3033
- height: var(--pf-v6-c-divider--Size);
3034
- }
3035
- }
3036
- @media (min-width: 90.625rem) {
3037
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
3038
- flex-direction: column;
3039
- width: var(--pf-v6-c-divider--Size);
3040
- height: inherit;
3041
- }
3042
- }
3043
- @media (min-width: 90.625rem) {
3044
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
3045
- --pf-v6-c-divider--before--FlexBasis: 100%;
3046
- }
3047
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
3048
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
3049
- }
3050
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
3051
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
3052
- }
3053
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
3054
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3055
- }
3056
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
3057
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3058
- }
3059
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
3060
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3061
- }
3062
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
3063
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3064
- }
3065
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
3066
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3067
- }
3058
+ .pf-v6-c-label__actions .pf-v6-c-button {
3059
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
3060
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
3061
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
3062
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
3063
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
3064
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
3065
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
3066
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
3068
3067
  }
3068
+
3069
3069
  .pf-v6-c-menu {
3070
3070
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs);
3071
3071
  --pf-v6-c-menu--Width: auto;
@@ -3293,7 +3293,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3293
3293
  --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
3294
3294
  --pf-v6-c-menu__item-external--Color: transparent;
3295
3295
  --pf-v6-c-menu__item-select-icon--Color: transparent;
3296
- --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
3296
+ --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
3297
3297
  --pf-v6-c-menu__list-item--BackgroundColor: transparent;
3298
3298
  --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
3299
3299
  --pf-v6-c-menu__list-item--hover--BorderColor: transparent;
@@ -3707,7 +3707,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3707
3707
  .pf-v6-c-menu__item-description {
3708
3708
  font-size: var(--pf-v6-c-menu__item-description--FontSize);
3709
3709
  color: var(--pf-v6-c-menu__item-description--Color);
3710
- overflow-wrap: break-word;
3710
+ overflow-wrap: anywhere;
3711
3711
  }
3712
3712
 
3713
3713
  .pf-v6-c-menu__item-check .pf-v6-c-check {
@@ -3789,9 +3789,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3789
3789
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3790
3790
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3791
3791
  --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3792
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3792
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3793
3793
  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3794
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3794
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3795
3795
  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3796
3796
  }
3797
3797
 
@@ -3841,7 +3841,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3841
3841
  font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3842
3842
  line-height: inherit;
3843
3843
  color: var(--pf-v6-c-breadcrumb__link--Color);
3844
- overflow-wrap: break-word;
3844
+ overflow-wrap: anywhere;
3845
3845
  text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3846
3846
  text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3847
3847
  text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
@@ -4088,7 +4088,7 @@ button.pf-v6-c-breadcrumb__link {
4088
4088
  font-size: var(--pf-v6-c-tooltip__content--FontSize);
4089
4089
  color: var(--pf-v6-c-tooltip__content--Color);
4090
4090
  text-align: center;
4091
- overflow-wrap: break-word;
4091
+ overflow-wrap: anywhere;
4092
4092
  background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
4093
4093
  border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
4094
4094
  }