@patternfly/react-templates 6.5.0-prerelease.3 → 6.5.0-prerelease.5

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.5.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-templates@6.5.0-prerelease.4...@patternfly/react-templates@6.5.0-prerelease.5) (2025-11-05)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-templates
9
+
10
+ # [6.5.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-templates@6.5.0-prerelease.3...@patternfly/react-templates@6.5.0-prerelease.4) (2025-11-03)
11
+
12
+ **Note:** Version bump only for package @patternfly/react-templates
13
+
6
14
  # [6.5.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-templates@6.5.0-prerelease.2...@patternfly/react-templates@6.5.0-prerelease.3) (2025-11-03)
7
15
 
8
16
  **Note:** Version bump only for package @patternfly/react-templates
@@ -1 +1 @@
1
- {"name":"@patternfly/react-templates-components","main":"../dist/js/components/index.js","module":"../dist/esm/components/index.js","typings":"../dist/esm/components/index.d.ts","version":"6.5.0-prerelease.2","private":true}
1
+ {"name":"@patternfly/react-templates-components","main":"../dist/js/components/index.js","module":"../dist/esm/components/index.js","typings":"../dist/esm/components/index.d.ts","version":"6.5.0-prerelease.4","private":true}
@@ -1 +1 @@
1
- {"name":"@patternfly/react-templates-dropdown-dynamic","main":"../../../js/components/Dropdown/index.js","module":"../../../esm/components/Dropdown/index.js","typings":"../../../esm/components/Dropdown/index.d.ts","version":"6.5.0-prerelease.2","private":true}
1
+ {"name":"@patternfly/react-templates-dropdown-dynamic","main":"../../../js/components/Dropdown/index.js","module":"../../../esm/components/Dropdown/index.js","typings":"../../../esm/components/Dropdown/index.d.ts","version":"6.5.0-prerelease.4","private":true}
@@ -1 +1 @@
1
- {"name":"@patternfly/react-templates-select-dynamic","main":"../../../js/components/Select/index.js","module":"../../../esm/components/Select/index.js","typings":"../../../esm/components/Select/index.d.ts","version":"6.5.0-prerelease.2","private":true}
1
+ {"name":"@patternfly/react-templates-select-dynamic","main":"../../../js/components/Select/index.js","module":"../../../esm/components/Select/index.js","typings":"../../../esm/components/Select/index.d.ts","version":"6.5.0-prerelease.4","private":true}
@@ -570,6 +570,250 @@
570
570
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
571
571
  }
572
572
 
573
+ .pf-v6-c-text-input-group {
574
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
575
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
576
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
577
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
578
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
579
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
580
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
581
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
582
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
583
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
584
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
585
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
586
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
587
+ --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));
588
+ --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));
589
+ --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));
590
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
591
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
592
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
593
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
594
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
595
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
596
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
597
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
598
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
599
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
600
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
601
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
602
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
603
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
604
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
605
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
606
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
607
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
608
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
609
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
610
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
611
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
612
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
613
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
614
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
615
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
616
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
617
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
618
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
619
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
620
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
621
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
622
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
623
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
624
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
625
+ }
626
+
627
+ .pf-v6-c-text-input-group {
628
+ position: relative;
629
+ display: flex;
630
+ width: 100%;
631
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
632
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
633
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
634
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
635
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
636
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
637
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
638
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
639
+ }
640
+
641
+ .pf-v6-c-text-input-group::before {
642
+ position: absolute;
643
+ inset: 0;
644
+ pointer-events: none;
645
+ content: "";
646
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
647
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
648
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
649
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
650
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
651
+ }
652
+
653
+ .pf-v6-c-text-input-group.pf-m-disabled {
654
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
655
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
656
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
657
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
658
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
659
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
660
+ pointer-events: none;
661
+ }
662
+
663
+ .pf-v6-c-text-input-group.pf-m-plain {
664
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
665
+ }
666
+
667
+ .pf-v6-c-text-input-group.pf-m-plain::before {
668
+ border: 0;
669
+ }
670
+
671
+ .pf-v6-c-text-input-group.pf-m-success {
672
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
673
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
674
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
675
+ }
676
+
677
+ .pf-v6-c-text-input-group.pf-m-warning {
678
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
679
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
680
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
681
+ }
682
+
683
+ .pf-v6-c-text-input-group.pf-m-error {
684
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
685
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
686
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
687
+ }
688
+
689
+ @media (prefers-reduced-motion: no-preference) {
690
+ .pf-v6-c-text-input-group.pf-m-error {
691
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
692
+ animation-name: pf-v6-global-danger-jiggle-motion;
693
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
694
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
695
+ animation-fill-mode: both;
696
+ }
697
+ }
698
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
699
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
700
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
701
+ animation-name: pf-v6-global-fade-in;
702
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
703
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
704
+ }
705
+
706
+ .pf-v6-c-text-input-group:hover {
707
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
708
+ }
709
+
710
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
711
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
712
+ }
713
+
714
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
715
+ --pf-v6-c-text-input-group__text--Position: relative;
716
+ }
717
+
718
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
719
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
720
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
721
+ }
722
+
723
+ .pf-v6-c-text-input-group__main {
724
+ display: flex;
725
+ flex: 1;
726
+ flex-wrap: wrap;
727
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
728
+ min-width: 0;
729
+ }
730
+
731
+ .pf-v6-c-text-input-group__main.pf-m-icon {
732
+ --pf-v6-c-text-input-group__text--Position: relative;
733
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
734
+ display: inline-flex;
735
+ align-items: center;
736
+ justify-content: center;
737
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
738
+ }
739
+
740
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
741
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
742
+ }
743
+
744
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
745
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
746
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
747
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
748
+ }
749
+
750
+ .pf-v6-c-text-input-group__text {
751
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
752
+ display: inline-grid;
753
+ flex: 1;
754
+ grid-template-areas: "text-input";
755
+ grid-template-columns: 1fr;
756
+ }
757
+
758
+ .pf-v6-c-text-input-group__icon {
759
+ position: absolute;
760
+ inset-block-start: 50%;
761
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
762
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
763
+ color: var(--pf-v6-c-text-input-group__icon--Color);
764
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
765
+ }
766
+
767
+ .pf-v6-c-text-input-group__icon.pf-m-status {
768
+ inset-inline-start: auto;
769
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
770
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
771
+ }
772
+
773
+ .pf-v6-c-text-input-group__text-input {
774
+ overflow: hidden;
775
+ text-overflow: ellipsis;
776
+ white-space: nowrap;
777
+ position: relative;
778
+ width: 100%;
779
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
780
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
781
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
782
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
783
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
784
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
785
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
786
+ border: 0;
787
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
788
+ }
789
+
790
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
791
+ grid-area: text-input;
792
+ }
793
+
794
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
795
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
796
+ }
797
+
798
+ .pf-v6-c-text-input-group__text-input::placeholder {
799
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
800
+ }
801
+
802
+ .pf-v6-c-text-input-group__utilities {
803
+ display: flex;
804
+ align-items: center;
805
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
806
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
807
+ }
808
+
809
+ .pf-v6-c-text-input-group__utilities > * + * {
810
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
811
+ }
812
+
813
+ .pf-v6-c-text-input-group__group {
814
+ display: flex;
815
+ }
816
+
573
817
  .pf-v6-c-label {
574
818
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
575
819
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -1113,18 +1357,175 @@ input.pf-v6-c-label__content {
1113
1357
  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1114
1358
  }
1115
1359
 
1116
- .pf-v6-c-button {
1117
- --pf-v6-c-button--Display: inline-flex;
1118
- --pf-v6-c-button--AlignItems: baseline;
1119
- --pf-v6-c-button--JustifyContent: center;
1120
- --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1121
- --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1122
- --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1123
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1124
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1125
- --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1126
- --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
1127
- --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
1360
+ .pf-v6-c-check {
1361
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1362
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1363
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1364
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1365
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1366
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1367
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1368
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1369
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1370
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1371
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1372
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1373
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1374
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1375
+ }
1376
+
1377
+ .pf-v6-c-check {
1378
+ display: grid;
1379
+ grid-template-columns: auto 1fr;
1380
+ grid-gap: var(--pf-v6-c-check--GridGap);
1381
+ accent-color: var(--pf-v6-c-check--AccentColor);
1382
+ }
1383
+
1384
+ .pf-v6-c-check.pf-m-standalone {
1385
+ display: inline-grid;
1386
+ grid-template-columns: auto;
1387
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1388
+ }
1389
+
1390
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1391
+ align-self: center;
1392
+ transform: none;
1393
+ }
1394
+
1395
+ .pf-v6-c-check__input {
1396
+ align-self: start;
1397
+ font-size: var(--pf-v6-c-check__label--FontSize);
1398
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1399
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1400
+ }
1401
+
1402
+ .pf-v6-c-check__label {
1403
+ font-size: var(--pf-v6-c-check__label--FontSize);
1404
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
1405
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1406
+ color: var(--pf-v6-c-check__label--Color);
1407
+ }
1408
+
1409
+ .pf-v6-c-check__description {
1410
+ grid-column: 2;
1411
+ font-size: var(--pf-v6-c-check__description--FontSize);
1412
+ color: var(--pf-v6-c-check__description--Color);
1413
+ }
1414
+
1415
+ .pf-v6-c-check__body {
1416
+ grid-column: 2;
1417
+ }
1418
+
1419
+ .pf-v6-c-check__label,
1420
+ .pf-v6-c-check__input {
1421
+ justify-self: start;
1422
+ }
1423
+
1424
+ label.pf-v6-c-check, .pf-v6-c-check__label,
1425
+ .pf-v6-c-check__input {
1426
+ cursor: pointer;
1427
+ }
1428
+
1429
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1430
+ .pf-v6-c-check__input:disabled,
1431
+ .pf-v6-c-check__input.pf-m-disabled {
1432
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1433
+ cursor: not-allowed;
1434
+ }
1435
+
1436
+ .pf-v6-c-check__label-required {
1437
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1438
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1439
+ color: var(--pf-v6-c-check__label-required--Color);
1440
+ }
1441
+
1442
+ .pf-v6-c-badge {
1443
+ --pf-v6-c-badge--BorderColor: transparent;
1444
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1445
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1446
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1447
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1448
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1449
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1450
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1451
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1452
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1453
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1454
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1455
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1456
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1457
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1458
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1459
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1460
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1461
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1462
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1463
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1464
+ }
1465
+
1466
+ .pf-v6-c-badge {
1467
+ position: relative;
1468
+ display: inline-block;
1469
+ min-width: var(--pf-v6-c-badge--MinWidth);
1470
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1471
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1472
+ font-size: var(--pf-v6-c-badge--FontSize);
1473
+ font-weight: var(--pf-v6-c-badge--FontWeight);
1474
+ color: var(--pf-v6-c-badge--Color);
1475
+ text-align: center;
1476
+ white-space: nowrap;
1477
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
1478
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1479
+ }
1480
+
1481
+ .pf-v6-c-badge::after {
1482
+ position: absolute;
1483
+ inset: 0;
1484
+ pointer-events: none;
1485
+ content: "";
1486
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1487
+ border-radius: inherit;
1488
+ }
1489
+
1490
+ .pf-v6-c-badge.pf-m-read {
1491
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
1492
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1493
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1494
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1495
+ }
1496
+
1497
+ .pf-v6-c-badge.pf-m-unread {
1498
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1499
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1500
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1501
+ }
1502
+
1503
+ .pf-v6-c-badge.pf-m-disabled {
1504
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1505
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1506
+ }
1507
+
1508
+ .pf-v6-c-badge.pf-m-disabled::after {
1509
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1510
+ }
1511
+
1512
+ .pf-v6-c-badge__toggle-icon {
1513
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1514
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1515
+ }
1516
+
1517
+ .pf-v6-c-button {
1518
+ --pf-v6-c-button--Display: inline-flex;
1519
+ --pf-v6-c-button--AlignItems: baseline;
1520
+ --pf-v6-c-button--JustifyContent: center;
1521
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1522
+ --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1523
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1524
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1525
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1526
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1527
+ --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
1528
+ --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
1128
1529
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1129
1530
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1130
1531
  --pf-v6-c-button--BackgroundColor: transparent;
@@ -2184,270 +2585,26 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2184
2585
  display: none;
2185
2586
  }
2186
2587
 
2187
- .pf-v6-c-text-input-group {
2188
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2189
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
2190
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2191
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2192
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2193
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2194
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2195
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2196
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2197
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2198
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2199
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2200
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2201
- --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));
2202
- --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));
2203
- --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));
2204
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2205
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2206
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
2207
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2208
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2209
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2210
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2211
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2212
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2213
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2214
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2215
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2216
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2217
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2218
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2219
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2220
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2221
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2222
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2223
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2224
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2225
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2226
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2227
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2228
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2229
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2230
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2231
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2232
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2233
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2234
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2235
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2236
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2237
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2238
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2588
+ .pf-v6-c-divider {
2589
+ --pf-v6-c-divider--Display: flex;
2590
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2591
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2592
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2239
2593
  }
2240
2594
 
2241
- .pf-v6-c-text-input-group {
2242
- position: relative;
2243
- display: flex;
2595
+ .pf-v6-c-divider {
2596
+ flex-direction: row;
2244
2597
  width: 100%;
2245
- font-size: var(--pf-v6-c-text-input-group__FontSize);
2246
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
2247
- color: var(--pf-v6-c-text-input-group--Color, inherit);
2248
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2249
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2250
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2251
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2252
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2253
- }
2254
-
2255
- .pf-v6-c-text-input-group::before {
2256
- position: absolute;
2257
- inset: 0;
2258
- pointer-events: none;
2259
- content: "";
2260
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2261
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2262
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2263
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2264
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2265
- }
2266
-
2267
- .pf-v6-c-text-input-group.pf-m-disabled {
2268
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2269
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2270
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2271
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2272
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2273
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2274
- pointer-events: none;
2275
- }
2276
-
2277
- .pf-v6-c-text-input-group.pf-m-plain {
2278
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
2279
- }
2280
-
2281
- .pf-v6-c-text-input-group.pf-m-plain::before {
2282
- border: 0;
2283
- }
2284
-
2285
- .pf-v6-c-text-input-group.pf-m-success {
2286
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2287
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2288
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2289
- }
2290
-
2291
- .pf-v6-c-text-input-group.pf-m-warning {
2292
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2293
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2294
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2295
- }
2296
-
2297
- .pf-v6-c-text-input-group.pf-m-error {
2298
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2299
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2300
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2301
- }
2302
-
2303
- @media (prefers-reduced-motion: no-preference) {
2304
- .pf-v6-c-text-input-group.pf-m-error {
2305
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2306
- animation-name: pf-v6-global-danger-jiggle-motion;
2307
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2308
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2309
- animation-fill-mode: both;
2310
- }
2311
- }
2312
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2313
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2314
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2315
- animation-name: pf-v6-global-fade-in;
2316
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2317
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2318
- }
2319
-
2320
- .pf-v6-c-text-input-group:hover {
2321
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2322
- }
2323
-
2324
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2325
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2326
- }
2327
-
2328
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2329
- --pf-v6-c-text-input-group__text--Position: relative;
2330
- }
2331
-
2332
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2333
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2334
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2335
- }
2336
-
2337
- .pf-v6-c-text-input-group__main {
2338
- display: flex;
2339
- flex: 1;
2340
- flex-wrap: wrap;
2341
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2342
- min-width: 0;
2343
- }
2344
-
2345
- .pf-v6-c-text-input-group__main.pf-m-icon {
2346
- --pf-v6-c-text-input-group__text--Position: relative;
2347
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2348
- display: inline-flex;
2349
- align-items: center;
2350
- justify-content: center;
2351
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2352
- }
2353
-
2354
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2355
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2356
- }
2357
-
2358
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2359
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2360
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2361
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2362
- }
2363
-
2364
- .pf-v6-c-text-input-group__text {
2365
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
2366
- display: inline-grid;
2367
- flex: 1;
2368
- grid-template-areas: "text-input";
2369
- grid-template-columns: 1fr;
2370
- }
2371
-
2372
- .pf-v6-c-text-input-group__icon {
2373
- position: absolute;
2374
- inset-block-start: 50%;
2375
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2376
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2377
- color: var(--pf-v6-c-text-input-group__icon--Color);
2378
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2379
- }
2380
-
2381
- .pf-v6-c-text-input-group__icon.pf-m-status {
2382
- inset-inline-start: auto;
2383
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2384
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2385
- }
2386
-
2387
- .pf-v6-c-text-input-group__text-input {
2388
- overflow: hidden;
2389
- text-overflow: ellipsis;
2390
- white-space: nowrap;
2391
- position: relative;
2392
- width: 100%;
2393
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2394
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2395
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2396
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2397
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2398
- color: var(--pf-v6-c-text-input-group__text-input--Color);
2399
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2400
- border: 0;
2401
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2402
- }
2403
-
2404
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2405
- grid-area: text-input;
2406
- }
2407
-
2408
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
2409
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2410
- }
2411
-
2412
- .pf-v6-c-text-input-group__text-input::placeholder {
2413
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2414
- }
2415
-
2416
- .pf-v6-c-text-input-group__utilities {
2417
- display: flex;
2418
- align-items: center;
2419
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2420
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2421
- }
2422
-
2423
- .pf-v6-c-text-input-group__utilities > * + * {
2424
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2425
- }
2426
-
2427
- .pf-v6-c-text-input-group__group {
2428
- display: flex;
2429
- }
2430
-
2431
- .pf-v6-c-divider {
2432
- --pf-v6-c-divider--Display: flex;
2433
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2434
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2435
- --pf-v6-c-divider--before--FlexBasis: 100%;
2436
- }
2437
-
2438
- .pf-v6-c-divider {
2439
- flex-direction: row;
2440
- width: 100%;
2441
- height: var(--pf-v6-c-divider--Size);
2442
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2443
- --pf-v6-hidden-visible--hidden--Display: none;
2444
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2445
- display: var(--pf-v6-hidden-visible--Display);
2446
- flex-shrink: 0;
2447
- align-items: stretch;
2448
- align-self: stretch;
2449
- justify-content: center;
2450
- border: 0;
2598
+ height: var(--pf-v6-c-divider--Size);
2599
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2600
+ --pf-v6-hidden-visible--hidden--Display: none;
2601
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2602
+ display: var(--pf-v6-hidden-visible--Display);
2603
+ flex-shrink: 0;
2604
+ align-items: stretch;
2605
+ align-self: stretch;
2606
+ justify-content: center;
2607
+ border: 0;
2451
2608
  }
2452
2609
 
2453
2610
  .pf-v6-c-divider.pf-m-hidden {
@@ -2746,163 +2903,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2746
2903
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2747
2904
  }
2748
2905
  }
2749
- .pf-v6-c-badge {
2750
- --pf-v6-c-badge--BorderColor: transparent;
2751
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2752
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2753
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2754
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2755
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2756
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2757
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2758
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2759
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2760
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2761
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2762
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2763
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2764
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2765
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2766
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2767
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2768
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2769
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2770
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2771
- }
2772
-
2773
- .pf-v6-c-badge {
2774
- position: relative;
2775
- display: inline-block;
2776
- min-width: var(--pf-v6-c-badge--MinWidth);
2777
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2778
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2779
- font-size: var(--pf-v6-c-badge--FontSize);
2780
- font-weight: var(--pf-v6-c-badge--FontWeight);
2781
- color: var(--pf-v6-c-badge--Color);
2782
- text-align: center;
2783
- white-space: nowrap;
2784
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2785
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2786
- }
2787
-
2788
- .pf-v6-c-badge::after {
2789
- position: absolute;
2790
- inset: 0;
2791
- pointer-events: none;
2792
- content: "";
2793
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2794
- border-radius: inherit;
2795
- }
2796
-
2797
- .pf-v6-c-badge.pf-m-read {
2798
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2799
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2800
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2801
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2802
- }
2803
-
2804
- .pf-v6-c-badge.pf-m-unread {
2805
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2806
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2807
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2808
- }
2809
-
2810
- .pf-v6-c-badge.pf-m-disabled {
2811
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2812
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2813
- }
2814
-
2815
- .pf-v6-c-badge.pf-m-disabled::after {
2816
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2817
- }
2818
-
2819
- .pf-v6-c-badge__toggle-icon {
2820
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2821
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2822
- }
2823
-
2824
- .pf-v6-c-check {
2825
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2826
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2827
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2828
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2829
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2830
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2831
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2832
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2833
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2834
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2835
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2836
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2837
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2838
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2839
- }
2840
-
2841
- .pf-v6-c-check {
2842
- display: grid;
2843
- grid-template-columns: auto 1fr;
2844
- grid-gap: var(--pf-v6-c-check--GridGap);
2845
- accent-color: var(--pf-v6-c-check--AccentColor);
2846
- }
2847
-
2848
- .pf-v6-c-check.pf-m-standalone {
2849
- display: inline-grid;
2850
- grid-template-columns: auto;
2851
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2852
- }
2853
-
2854
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2855
- align-self: center;
2856
- transform: none;
2857
- }
2858
-
2859
- .pf-v6-c-check__input {
2860
- align-self: start;
2861
- font-size: var(--pf-v6-c-check__label--FontSize);
2862
- line-height: var(--pf-v6-c-check__label--LineHeight);
2863
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2864
- }
2865
-
2866
- .pf-v6-c-check__label {
2867
- font-size: var(--pf-v6-c-check__label--FontSize);
2868
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2869
- line-height: var(--pf-v6-c-check__label--LineHeight);
2870
- color: var(--pf-v6-c-check__label--Color);
2871
- }
2872
-
2873
- .pf-v6-c-check__description {
2874
- grid-column: 2;
2875
- font-size: var(--pf-v6-c-check__description--FontSize);
2876
- color: var(--pf-v6-c-check__description--Color);
2877
- }
2878
-
2879
- .pf-v6-c-check__body {
2880
- grid-column: 2;
2881
- }
2882
-
2883
- .pf-v6-c-check__label,
2884
- .pf-v6-c-check__input {
2885
- justify-self: start;
2886
- }
2887
-
2888
- label.pf-v6-c-check, .pf-v6-c-check__label,
2889
- .pf-v6-c-check__input {
2890
- cursor: pointer;
2891
- }
2892
-
2893
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2894
- .pf-v6-c-check__input:disabled,
2895
- .pf-v6-c-check__input.pf-m-disabled {
2896
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2897
- cursor: not-allowed;
2898
- }
2899
-
2900
- .pf-v6-c-check__label-required {
2901
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2902
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2903
- color: var(--pf-v6-c-check__label-required--Color);
2904
- }
2905
-
2906
2906
  .pf-v6-c-menu {
2907
2907
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2908
2908
  --pf-v6-c-menu--Width: auto;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-templates",
3
- "version": "6.5.0-prerelease.3",
3
+ "version": "6.5.0-prerelease.5",
4
4
  "description": "This package provides wrapped component demos for ease of use\n",
5
5
  "main": "dist/js/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -33,7 +33,7 @@
33
33
  "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
34
34
  },
35
35
  "dependencies": {
36
- "@patternfly/react-core": "^6.5.0-prerelease.3",
36
+ "@patternfly/react-core": "^6.5.0-prerelease.5",
37
37
  "@patternfly/react-icons": "^6.5.0-prerelease.2",
38
38
  "@patternfly/react-styles": "^6.5.0-prerelease.2",
39
39
  "@patternfly/react-tokens": "^6.5.0-prerelease.2",
@@ -43,5 +43,5 @@
43
43
  "react": "^17 || ^18 || ^19",
44
44
  "react-dom": "^17 || ^18 || ^19"
45
45
  },
46
- "gitHead": "40a5015cf1eb4730bda9c5c15e328f6d544bc857"
46
+ "gitHead": "0f921f1c919501506e043b7c8b2febc71644b15a"
47
47
  }