@planningcenter/tapestry 4.2.0-rc.7 → 4.2.0-rc.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +607 -607
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +607 -607
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,48 +677,80 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- .tds-button-group{
681
- display:inline-flex;
680
+ .tds-checkbox-group{
681
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
682
+ --tds-checkbox-group-line-height:1.4;
683
+ --tds-checkbox-group-gap:var(--t-spacing-1);
684
+
685
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
686
+ --tds-checkbox-group-description-line-height:1.35;
687
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
688
+ --tds-checkbox-group-description-invalid-icon-display:none;
689
+ display:flex;
690
+ flex-direction:column;
691
+ gap:0;
692
+ padding:0;
693
+ margin:0;
694
+
695
+ font-size:var(--tds-checkbox-group-font-size);
696
+ line-height:var(--tds-checkbox-group-line-height);
697
+ border:0;
682
698
  }
683
- .tds-button-group > .tds-btn{
684
- --tds-button-group-item-z-index:1;
685
699
 
686
- position:relative;
687
- z-index:var(--tds-button-group-item-z-index);
688
- border-radius:0;
700
+ .tds-checkbox-group legend{
701
+ float:left;
702
+ padding:0;
703
+ margin:0;
689
704
  }
690
- :is(.tds-button-group > .tds-btn):not(:first-child){
691
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
- }
693
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
- position:absolute;
695
- inset-block:calc(var(--tds-btn-border-width) * -1);
696
- width:var(--tds-btn-border-width);
697
- pointer-events:none;
698
- content:"";
699
- background-color:var(--t-border-color-white);
700
- }
701
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
- }
704
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
- }
707
- :is(.tds-button-group > .tds-btn):hover{
708
- --tds-button-group-item-z-index:2;
705
+
706
+ .tds-checkbox-group[aria-invalid="true"]{
707
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
708
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
709
+ }
710
+
711
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
712
+ margin-left:.25ch;
713
+ color:var(--t-text-color-status-error);
714
+ content:"*";
709
715
  }
710
- :is(.tds-button-group > .tds-btn):focus-visible{
711
- --tds-button-group-item-z-index:5;
716
+
717
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
718
+ content:none;
712
719
  }
713
- .tds-button-group > .tds-btn:first-child{
714
- border-start-start-radius:var(--tds-btn-border-radius);
715
- border-end-start-radius:var(--tds-btn-border-radius);
716
- }
717
- .tds-button-group > .tds-btn:last-child{
718
- border-start-end-radius:var(--tds-btn-border-radius);
719
- border-end-end-radius:var(--tds-btn-border-radius);
720
+
721
+ .tds-checkbox-group-fields{
722
+ display:flex;
723
+ flex-direction:column;
724
+ gap:var(--tds-checkbox-group-gap);
725
+ align-items:flex-start;
726
+ margin-top:var(--t-spacing-1);
727
+ }
728
+
729
+ .tds-checkbox-group-description{
730
+ display:flex;
731
+ gap:var(--t-spacing-half);
732
+ align-items:flex-start;
733
+ margin:var(--t-spacing-fourth) 0 0;
734
+ font-size:var(--tds-checkbox-group-description-font-size);
735
+ line-height:var(--tds-checkbox-group-description-line-height);
736
+ color:var(--tds-checkbox-group-description-color);
737
+ cursor:text;
738
+ }
739
+
740
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
741
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
742
+ flex-shrink:0;
743
+ margin-top:calc(.5lh - .5em);
744
+ line-height:var(--tds-checkbox-group-description-line-height);
720
745
  }
721
746
 
747
+ .tds-checkbox-group--sm{
748
+ --tds-checkbox-group-line-height:1.35;
749
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
750
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
751
+ --tds-checkbox-group-description-line-height:1.3;
752
+ }
753
+
722
754
  .tds-checkbox{
723
755
  --tds-checkbox-font-size:var(--t-font-size-md);
724
756
  --tds-checkbox-cursor:pointer;
@@ -914,102 +946,347 @@
914
946
  --tds-checkbox-description-line-height:1.3;
915
947
  }
916
948
 
917
- .tds-checkbox-group{
918
- --tds-checkbox-group-font-size:var(--t-font-size-md);
919
- --tds-checkbox-group-line-height:1.4;
920
- --tds-checkbox-group-gap:var(--t-spacing-1);
921
-
922
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
923
- --tds-checkbox-group-description-line-height:1.35;
924
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
925
- --tds-checkbox-group-description-invalid-icon-display:none;
926
- display:flex;
927
- flex-direction:column;
928
- gap:0;
929
- padding:0;
930
- margin:0;
931
-
932
- font-size:var(--tds-checkbox-group-font-size);
933
- line-height:var(--tds-checkbox-group-line-height);
934
- border:0;
949
+ .tds-button-group{
950
+ display:inline-flex;
935
951
  }
952
+ .tds-button-group > .tds-btn{
953
+ --tds-button-group-item-z-index:1;
936
954
 
937
- .tds-checkbox-group legend{
938
- float:left;
939
- padding:0;
940
- margin:0;
941
- }
942
-
943
- .tds-checkbox-group[aria-invalid="true"]{
944
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
945
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
955
+ position:relative;
956
+ z-index:var(--tds-button-group-item-z-index);
957
+ border-radius:0;
946
958
  }
947
-
948
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
949
- margin-left:.25ch;
950
- color:var(--t-text-color-status-error);
951
- content:"*";
959
+ :is(.tds-button-group > .tds-btn):not(:first-child){
960
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
952
961
  }
953
-
954
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
955
- content:none;
962
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
963
+ position:absolute;
964
+ inset-block:calc(var(--tds-btn-border-width) * -1);
965
+ width:var(--tds-btn-border-width);
966
+ pointer-events:none;
967
+ content:"";
968
+ background-color:var(--t-border-color-white);
969
+ }
970
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
971
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
972
+ }
973
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
974
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
975
+ }
976
+ :is(.tds-button-group > .tds-btn):hover{
977
+ --tds-button-group-item-z-index:2;
978
+ }
979
+ :is(.tds-button-group > .tds-btn):focus-visible{
980
+ --tds-button-group-item-z-index:5;
956
981
  }
982
+ .tds-button-group > .tds-btn:first-child{
983
+ border-start-start-radius:var(--tds-btn-border-radius);
984
+ border-end-start-radius:var(--tds-btn-border-radius);
985
+ }
986
+ .tds-button-group > .tds-btn:last-child{
987
+ border-start-end-radius:var(--tds-btn-border-radius);
988
+ border-end-end-radius:var(--tds-btn-border-radius);
989
+ }
957
990
 
958
- .tds-checkbox-group-fields{
959
- display:flex;
960
- flex-direction:column;
961
- gap:var(--tds-checkbox-group-gap);
962
- align-items:flex-start;
963
- margin-top:var(--t-spacing-1);
991
+ @layer t-critical{
992
+ tds-page-header:not(.hydrated){
993
+ display:none;
994
+ }
964
995
  }
965
996
 
966
- .tds-checkbox-group-description{
967
- display:flex;
968
- gap:var(--t-spacing-half);
969
- align-items:flex-start;
970
- margin:var(--t-spacing-fourth) 0 0;
971
- font-size:var(--tds-checkbox-group-description-font-size);
972
- line-height:var(--tds-checkbox-group-description-line-height);
973
- color:var(--tds-checkbox-group-description-color);
974
- cursor:text;
975
- }
997
+ @layer t-component{
998
+ .tds-page-header{
999
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1000
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1001
+ --tds-page-header-color:var(--t-text-color);
1002
+ --tds-page-header-bottom-border-color:transparent;
1003
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1004
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1005
+ --tds-page-header-padding-x:var(--t-spacing-2);
1006
+ --tds-page-header-padding-y:var(--t-spacing-2);
1007
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1008
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1009
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1010
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1011
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1012
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1013
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1014
+ --tds-page-header-nav-item-border-width:1px;
976
1015
 
977
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
978
- display:var(--tds-checkbox-group-description-invalid-icon-display);
979
- flex-shrink:0;
980
- margin-top:calc(.5lh - .5em);
981
- line-height:var(--tds-checkbox-group-description-line-height);
982
- }
1016
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1017
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
983
1018
 
984
- .tds-checkbox-group--sm{
985
- --tds-checkbox-group-line-height:1.35;
986
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
987
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
988
- --tds-checkbox-group-description-line-height:1.3;
989
- }
1019
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1020
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1021
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
990
1022
 
991
- .tds-modal-overlay{
992
- --tds-modal-min-margin-block:var(--t-spacing-3);
1023
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1024
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
993
1025
 
994
- position:fixed;
995
- inset:0;
996
- z-index:1000;
997
- display:grid;
998
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
999
- justify-items:center;
1000
- overflow-y:auto;
1001
- background:hsl(0 0% 0% / 40%);
1002
- }
1026
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1027
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1028
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1003
1029
 
1004
- .tds-modal-overlay[data-entering]{
1005
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1030
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1031
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1032
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1033
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1034
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1006
1035
  }
1007
1036
 
1008
- .tds-modal-overlay[data-exiting]{
1009
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1037
+ .tds-page-header--profile{
1038
+ --tds-page-header-padding-y:20px;
1010
1039
  }
1011
1040
 
1012
- @keyframes tds-modal-overlay-fade{
1041
+ @supports (color: light-dark(#fff, #000)){
1042
+ .tds-page-header{
1043
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1044
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1045
+ }
1046
+ }
1047
+
1048
+ @media (min-width: 600px){
1049
+ .tds-page-header{
1050
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1051
+ --tds-page-header-color:var(--t-text-color-secondary);
1052
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1053
+ --tds-page-header-padding-x:var(--t-spacing-3);
1054
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1055
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1056
+ --tds-page-header-nav-background:transparent;
1057
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1058
+ --tds-page-header-nav-item-border-width:1px;
1059
+ --tds-page-header-nav-item-color:var(--t-text-color);
1060
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1061
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1062
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1063
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1064
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1065
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1066
+ }
1067
+ }
1068
+ }
1069
+
1070
+ .tds-page-header{
1071
+ display:flex;
1072
+ flex-direction:column;
1073
+ padding-top:var(--tds-page-header-padding-y);
1074
+ color:var(--tds-page-header-color);
1075
+ background:var(--tds-page-header-background-color);
1076
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1077
+ }
1078
+
1079
+ .tds-page-header:not(.has-nav){
1080
+ padding-bottom:var(--tds-page-header-padding-y);
1081
+ }
1082
+
1083
+ .tds-page-header.inactive{
1084
+ background:var(--tds-page-header-background-color-inactive);
1085
+ }
1086
+
1087
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1088
+ width:100%;
1089
+ }
1090
+
1091
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1092
+ display:flex;
1093
+ flex-flow:row wrap;
1094
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1095
+ align-items:flex-start;
1096
+ justify-content:flex-start;
1097
+ min-width:0;
1098
+ }
1099
+
1100
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1101
+ display:flex;
1102
+ gap:var(--tds-page-header-nav-gap);
1103
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1104
+ margin:0 0 -1px;
1105
+ overflow:auto;
1106
+ list-style:none;
1107
+ background:var(--tds-page-header-nav-background);
1108
+ }
1109
+
1110
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1111
+ position:relative;
1112
+ display:inline-flex;
1113
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1114
+ font-size:var(--t-font-size-sm);
1115
+ line-height:22px;
1116
+ color:var(--tds-page-header-nav-item-color);
1117
+ white-space:nowrap;
1118
+ text-decoration:none;
1119
+ -webkit-appearance:none;
1120
+ -moz-appearance:none;
1121
+ appearance:none;
1122
+ cursor:pointer;
1123
+ outline-offset:-2px;
1124
+ background-color:var(--tds-page-header-nav-item-background-color);
1125
+ background-clip:padding-box;
1126
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1127
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1128
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1129
+ }
1130
+
1131
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1132
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1133
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1134
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1135
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1136
+ }
1137
+
1138
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1139
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1140
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1141
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1142
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1143
+ }
1144
+
1145
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1146
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1147
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1148
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1149
+ }
1150
+
1151
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1152
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1153
+ color:var(--tds-page-header-nav-item-color-disabled);
1154
+ cursor:not-allowed;
1155
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1156
+ opacity:1;
1157
+ }
1158
+
1159
+ @media (min-width: 600px){
1160
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1161
+ position:absolute;
1162
+ inset:auto -1px -1px;
1163
+ height:1px;
1164
+ pointer-events:none;
1165
+ content:"";
1166
+ background-color:var(--tds-page-header-bottom-border-color);
1167
+ }
1168
+ }
1169
+
1170
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1171
+ position:relative;
1172
+ }
1173
+
1174
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1175
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1176
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1177
+ }
1178
+
1179
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1180
+ position:absolute;
1181
+ top:-5px;
1182
+ right:-2px;
1183
+ width:10px;
1184
+ height:10px;
1185
+ content:"";
1186
+ background:var(--tds-page-header-nav-item-indicator-color);
1187
+ border-radius:50%;
1188
+ }
1189
+
1190
+ @media (prefers-reduced-motion: no-preference){
1191
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1192
+ animation:indicator-pulse 1.25s ease infinite;
1193
+ }
1194
+ }
1195
+
1196
+ .tds-page-header__title-bar{
1197
+ display:flex;
1198
+ flex-direction:column;
1199
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1200
+ align-items:flex-start;
1201
+ justify-content:space-between;
1202
+ padding:0 var(--tds-page-header-padding-x);
1203
+ }
1204
+
1205
+ .tds-page-header--profile > .tds-page-header__title-bar{
1206
+ align-items:center;
1207
+ }
1208
+
1209
+ .tds-page-header__primary{
1210
+ width:100%;
1211
+ }
1212
+
1213
+ .tds-page-header__primary h1{
1214
+ margin:0;
1215
+ font-size:var(--tds-page-header-headline-font-size);
1216
+ font-weight:var(--t-font-weight-normal);
1217
+ line-height:32px;
1218
+ color:var(--tds-page-header-headline-color);
1219
+ overflow-wrap:break-word;
1220
+ }
1221
+
1222
+ @media (min-width: 960px){
1223
+ .tds-page-header__primary{
1224
+ flex:1 1 max-content;
1225
+ width:auto;
1226
+ min-width:0;
1227
+ max-width:100%;
1228
+ }
1229
+
1230
+ .tds-page-header__title-bar,
1231
+ .tds-page-header--profile .tds-page-header__title-bar{
1232
+ flex-flow:row nowrap;
1233
+ row-gap:12px;
1234
+ align-items:flex-start;
1235
+ }
1236
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1237
+ width:auto;
1238
+ }
1239
+
1240
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1241
+ justify-content:flex-end;
1242
+ }
1243
+ }
1244
+
1245
+ .tds-page-header-phone,
1246
+ .tds-page-header-email{
1247
+ color:var(--tds-page-header-color);
1248
+ white-space:nowrap;
1249
+ }
1250
+ .tds-page-header-email{
1251
+ max-width:100%;
1252
+ overflow:hidden;
1253
+ text-overflow:ellipsis;
1254
+ }
1255
+
1256
+ @keyframes indicator-pulse{
1257
+ 0%{
1258
+ opacity:.3;
1259
+ transform:scale(.9);
1260
+ }
1261
+
1262
+ 100%{
1263
+ opacity:0;
1264
+ transform:scale(1.75);
1265
+ }
1266
+ }
1267
+
1268
+ .tds-modal-overlay{
1269
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1270
+
1271
+ position:fixed;
1272
+ inset:0;
1273
+ z-index:1000;
1274
+ display:grid;
1275
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1276
+ justify-items:center;
1277
+ overflow-y:auto;
1278
+ background:hsl(0 0% 0% / 40%);
1279
+ }
1280
+
1281
+ .tds-modal-overlay[data-entering]{
1282
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1283
+ }
1284
+
1285
+ .tds-modal-overlay[data-exiting]{
1286
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1287
+ }
1288
+
1289
+ @keyframes tds-modal-overlay-fade{
1013
1290
  from{
1014
1291
  opacity:0;
1015
1292
  }
@@ -1151,174 +1428,11 @@
1151
1428
  }
1152
1429
  }
1153
1430
 
1154
-
1155
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1156
- -webkit-appearance:none;
1157
- appearance:none;
1158
- }
1159
-
1160
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1161
- inline-size:1em;
1162
- block-size:2em;
1163
- }
1164
- @supports (field-sizing: content){
1165
- .tds-input--auto-width{
1166
- inline-size:-moz-fit-content;
1167
- inline-size:fit-content;
1168
- min-inline-size:min(100%, 122px);
1169
- }
1170
-
1171
- .tds-input--auto-width input{
1172
- field-sizing:content;
1173
- inline-size:auto;
1174
- }
1175
- }
1176
-
1177
- .tds-toggle-switch{
1178
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1179
- --tds-toggle-switch-cursor:pointer;
1180
- --tds-toggle-switch-display:inline-grid;
1181
- --tds-toggle-switch-line-height:1.4;
1182
-
1183
- --tds-toggle-switch-label-color:var(--t-form-color);
1184
-
1185
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1186
- --tds-toggle-switch-track-outline:none;
1187
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1188
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1189
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1190
-
1191
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1192
- --tds-toggle-switch-thumb-transform:translateX(0);
1193
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1194
-
1195
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1196
- --tds-toggle-switch-description-line-height:1.35;
1197
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1198
- position:relative;
1199
-
1200
- display:var(--tds-toggle-switch-display);
1201
- grid-template-columns:auto;
1202
- grid-auto-columns:1fr;
1203
- gap:var(--t-spacing-fourth) 0;
1204
- -webkit-user-select:none;
1205
- -moz-user-select:none;
1206
- user-select:none;
1207
- }
1208
-
1209
- .tds-toggle-switch input[type="checkbox"]{
1210
- position:absolute;
1211
- width:var(--tds-toggle-switch-track-width);
1212
- height:var(--tds-toggle-switch-track-height);
1213
- margin:0;
1214
- -webkit-appearance:none;
1215
- -moz-appearance:none;
1216
- appearance:none;
1217
- cursor:var(--tds-toggle-switch-cursor);
1218
- outline:var(--tds-toggle-switch-track-outline);
1219
- outline-offset:var(--t-focus-ring-offset);
1220
- background-color:transparent;
1221
- border:0;
1222
- border-radius:var(--t-border-radius-round);
1223
- }
1224
-
1225
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1226
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1227
- }
1228
-
1229
- .tds-toggle-switch label{
1230
- display:inline-flex;
1231
- grid-area:1 / 2;
1232
- padding-inline-start:var(--t-spacing-1);
1233
- margin-top:-.09375em;
1234
- font-size:var(--tds-toggle-switch-font-size);
1235
- font-weight:var(--t-font-weight-normal);
1236
- line-height:var(--tds-toggle-switch-line-height);
1237
- color:var(--tds-toggle-switch-label-color);
1238
- cursor:var(--tds-toggle-switch-cursor);
1239
- }
1240
-
1241
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1242
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1243
- }
1244
-
1245
- .tds-toggle-switch:has(input:checked){
1246
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1247
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1248
- }
1249
-
1250
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1251
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1252
- }
1253
-
1254
- .tds-toggle-switch:has(input:disabled){
1255
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1256
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1257
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1258
- --tds-toggle-switch-cursor:not-allowed;
1259
- }
1260
-
1261
- .tds-toggle-switch-track{
1262
- position:relative;
1263
- flex-shrink:0;
1264
- width:var(--tds-toggle-switch-track-width);
1265
- height:var(--tds-toggle-switch-track-height);
1266
- background-color:var(--tds-toggle-switch-track-background-color);
1267
- border-radius:var(--t-border-radius-round);
1268
- transition:var(--tds-toggle-switch-track-transition);
1269
- }
1270
-
1271
- .tds-toggle-switch-track::before{
1272
- position:absolute;
1273
- top:var(--t-spacing-fourth);
1274
- left:var(--t-spacing-fourth);
1275
- width:var(--tds-toggle-switch-thumb-size);
1276
- height:var(--tds-toggle-switch-thumb-size);
1277
- content:"";
1278
- background-color:#fff;
1279
- border-radius:var(--t-border-radius-round);
1280
- transform:var(--tds-toggle-switch-thumb-transform);
1281
- transition:var(--tds-toggle-switch-thumb-transition);
1282
- }
1283
-
1284
- @media (prefers-reduced-motion: reduce){
1285
-
1286
- .tds-toggle-switch-track{
1287
- --tds-toggle-switch-track-transition:none;
1288
- --tds-toggle-switch-thumb-transition:none;
1289
- }
1290
- }
1291
-
1292
- .tds-toggle-switch-description{
1293
- display:flex;
1294
- grid-area:2 / 2;
1295
- align-items:flex-start;
1296
- padding-inline-start:var(--t-spacing-1);
1297
- margin:0;
1298
- font-size:var(--tds-toggle-switch-description-font-size);
1299
- line-height:var(--tds-toggle-switch-description-line-height);
1300
- color:var(--tds-toggle-switch-description-color);
1301
- cursor:text;
1302
- }
1303
-
1304
- .tds-toggle-switch--sm{
1305
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1306
- --tds-toggle-switch-line-height:1.35;
1307
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1308
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1309
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1310
- --tds-toggle-switch-description-line-height:1.3;
1311
- }
1312
-
1313
- .tds-toggle-switch--hide-label{
1314
- --tds-toggle-switch-display:inline-flex;
1315
- }
1316
-
1317
- .tds-radio{
1318
- --tds-radio-font-size:var(--t-font-size-md);
1319
- --tds-radio-cursor:pointer;
1320
- --tds-radio-line-height:1.4;
1321
- --tds-radio-transition-property:border-width;
1431
+ .tds-radio{
1432
+ --tds-radio-font-size:var(--t-font-size-md);
1433
+ --tds-radio-cursor:pointer;
1434
+ --tds-radio-line-height:1.4;
1435
+ --tds-radio-transition-property:border-width;
1322
1436
 
1323
1437
  --tds-radio-input-size:var(--t-element-size-md);
1324
1438
  --tds-radio-input-border-radius:var(--t-border-radius-round);
@@ -1447,87 +1561,27 @@
1447
1561
  --tds-radio-description-line-height:1.3;
1448
1562
  }
1449
1563
 
1450
- .tds-radio-group{
1451
- --tds-radio-group-font-size:var(--t-font-size-md);
1452
- --tds-radio-group-line-height:1.4;
1453
- --tds-radio-group-gap:var(--t-spacing-1);
1454
-
1455
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1456
- --tds-radio-group-description-line-height:1.35;
1457
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1458
- --tds-radio-group-description-invalid-icon-display:none;
1459
- display:flex;
1460
- flex-direction:column;
1461
- gap:0;
1462
- padding:0;
1463
- margin:0;
1464
-
1465
- font-size:var(--tds-radio-group-font-size);
1466
- line-height:var(--tds-radio-group-line-height);
1467
- border:0;
1468
- }
1469
-
1470
- .tds-radio-group legend{
1471
- float:left;
1472
- padding:0;
1473
- margin:0;
1474
- }
1475
-
1476
- .tds-radio-group[aria-invalid="true"]{
1477
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1478
- --tds-radio-group-description-invalid-icon-display:inline-block;
1479
- }
1480
1564
 
1481
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1482
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1565
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1566
+ -webkit-appearance:none;
1567
+ appearance:none;
1483
1568
  }
1484
1569
 
1485
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1486
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1487
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1488
- }
1489
-
1490
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1491
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1492
- }
1493
-
1494
- .tds-radio-group:has(input:required) legend::after{
1495
- margin-left:.25ch;
1496
- color:var(--t-text-color-status-error);
1497
- content:"*";
1570
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1571
+ inline-size:1em;
1572
+ block-size:2em;
1498
1573
  }
1499
-
1500
- .tds-radio-group-fields{
1501
- display:flex;
1502
- flex-direction:column;
1503
- gap:var(--tds-radio-group-gap);
1504
- align-items:flex-start;
1505
- margin-top:var(--t-spacing-1);
1506
- }
1507
-
1508
- .tds-radio-group-description{
1509
- display:flex;
1510
- gap:var(--t-spacing-half);
1511
- align-items:flex-start;
1512
- margin:var(--t-spacing-fourth) 0 0;
1513
- font-size:var(--tds-radio-group-description-font-size);
1514
- line-height:var(--tds-radio-group-description-line-height);
1515
- color:var(--tds-radio-group-description-color);
1516
- cursor:text;
1517
- }
1518
-
1519
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1520
- display:var(--tds-radio-group-description-invalid-icon-display);
1521
- flex-shrink:0;
1522
- margin-top:calc(.5lh - .5em);
1523
- line-height:var(--tds-radio-group-description-line-height);
1574
+ @supports (field-sizing: content){
1575
+ .tds-input--auto-width{
1576
+ inline-size:-moz-fit-content;
1577
+ inline-size:fit-content;
1578
+ min-inline-size:min(100%, 122px);
1524
1579
  }
1525
1580
 
1526
- .tds-radio-group--sm{
1527
- --tds-radio-group-line-height:1.35;
1528
- --tds-radio-group-font-size:var(--t-font-size-sm);
1529
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1530
- --tds-radio-group-description-line-height:1.3;
1581
+ .tds-input--auto-width input{
1582
+ field-sizing:content;
1583
+ inline-size:auto;
1584
+ }
1531
1585
  }
1532
1586
 
1533
1587
  .tds-input:has(textarea){
@@ -1635,6 +1689,146 @@
1635
1689
  }
1636
1690
  }
1637
1691
 
1692
+ .tds-toggle-switch{
1693
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1694
+ --tds-toggle-switch-cursor:pointer;
1695
+ --tds-toggle-switch-display:inline-grid;
1696
+ --tds-toggle-switch-line-height:1.4;
1697
+
1698
+ --tds-toggle-switch-label-color:var(--t-form-color);
1699
+
1700
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1701
+ --tds-toggle-switch-track-outline:none;
1702
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1703
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1704
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1705
+
1706
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1707
+ --tds-toggle-switch-thumb-transform:translateX(0);
1708
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1709
+
1710
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1711
+ --tds-toggle-switch-description-line-height:1.35;
1712
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1713
+ position:relative;
1714
+
1715
+ display:var(--tds-toggle-switch-display);
1716
+ grid-template-columns:auto;
1717
+ grid-auto-columns:1fr;
1718
+ gap:var(--t-spacing-fourth) 0;
1719
+ -webkit-user-select:none;
1720
+ -moz-user-select:none;
1721
+ user-select:none;
1722
+ }
1723
+
1724
+ .tds-toggle-switch input[type="checkbox"]{
1725
+ position:absolute;
1726
+ width:var(--tds-toggle-switch-track-width);
1727
+ height:var(--tds-toggle-switch-track-height);
1728
+ margin:0;
1729
+ -webkit-appearance:none;
1730
+ -moz-appearance:none;
1731
+ appearance:none;
1732
+ cursor:var(--tds-toggle-switch-cursor);
1733
+ outline:var(--tds-toggle-switch-track-outline);
1734
+ outline-offset:var(--t-focus-ring-offset);
1735
+ background-color:transparent;
1736
+ border:0;
1737
+ border-radius:var(--t-border-radius-round);
1738
+ }
1739
+
1740
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1741
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1742
+ }
1743
+
1744
+ .tds-toggle-switch label{
1745
+ display:inline-flex;
1746
+ grid-area:1 / 2;
1747
+ padding-inline-start:var(--t-spacing-1);
1748
+ margin-top:-.09375em;
1749
+ font-size:var(--tds-toggle-switch-font-size);
1750
+ font-weight:var(--t-font-weight-normal);
1751
+ line-height:var(--tds-toggle-switch-line-height);
1752
+ color:var(--tds-toggle-switch-label-color);
1753
+ cursor:var(--tds-toggle-switch-cursor);
1754
+ }
1755
+
1756
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1757
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1758
+ }
1759
+
1760
+ .tds-toggle-switch:has(input:checked){
1761
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1762
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1763
+ }
1764
+
1765
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1766
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1767
+ }
1768
+
1769
+ .tds-toggle-switch:has(input:disabled){
1770
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1771
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1772
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1773
+ --tds-toggle-switch-cursor:not-allowed;
1774
+ }
1775
+
1776
+ .tds-toggle-switch-track{
1777
+ position:relative;
1778
+ flex-shrink:0;
1779
+ width:var(--tds-toggle-switch-track-width);
1780
+ height:var(--tds-toggle-switch-track-height);
1781
+ background-color:var(--tds-toggle-switch-track-background-color);
1782
+ border-radius:var(--t-border-radius-round);
1783
+ transition:var(--tds-toggle-switch-track-transition);
1784
+ }
1785
+
1786
+ .tds-toggle-switch-track::before{
1787
+ position:absolute;
1788
+ top:var(--t-spacing-fourth);
1789
+ left:var(--t-spacing-fourth);
1790
+ width:var(--tds-toggle-switch-thumb-size);
1791
+ height:var(--tds-toggle-switch-thumb-size);
1792
+ content:"";
1793
+ background-color:#fff;
1794
+ border-radius:var(--t-border-radius-round);
1795
+ transform:var(--tds-toggle-switch-thumb-transform);
1796
+ transition:var(--tds-toggle-switch-thumb-transition);
1797
+ }
1798
+
1799
+ @media (prefers-reduced-motion: reduce){
1800
+
1801
+ .tds-toggle-switch-track{
1802
+ --tds-toggle-switch-track-transition:none;
1803
+ --tds-toggle-switch-thumb-transition:none;
1804
+ }
1805
+ }
1806
+
1807
+ .tds-toggle-switch-description{
1808
+ display:flex;
1809
+ grid-area:2 / 2;
1810
+ align-items:flex-start;
1811
+ padding-inline-start:var(--t-spacing-1);
1812
+ margin:0;
1813
+ font-size:var(--tds-toggle-switch-description-font-size);
1814
+ line-height:var(--tds-toggle-switch-description-line-height);
1815
+ color:var(--tds-toggle-switch-description-color);
1816
+ cursor:text;
1817
+ }
1818
+
1819
+ .tds-toggle-switch--sm{
1820
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1821
+ --tds-toggle-switch-line-height:1.35;
1822
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1823
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1824
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1825
+ --tds-toggle-switch-description-line-height:1.3;
1826
+ }
1827
+
1828
+ .tds-toggle-switch--hide-label{
1829
+ --tds-toggle-switch-display:inline-flex;
1830
+ }
1831
+
1638
1832
 
1639
1833
  @media (prefers-reduced-motion: no-preference){
1640
1834
 
@@ -1997,281 +2191,87 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1997
2191
  flex-direction:column;
1998
2192
  }
1999
2193
 
2000
- @layer t-critical{
2001
- tds-page-header:not(.hydrated){
2002
- display:none;
2003
- }
2004
- }
2005
-
2006
- @layer t-component{
2007
- .tds-page-header{
2008
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2009
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2010
- --tds-page-header-color:var(--t-text-color);
2011
- --tds-page-header-bottom-border-color:transparent;
2012
- --tds-page-header-headline-color:var(--t-text-color-headline);
2013
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2014
- --tds-page-header-padding-x:var(--t-spacing-2);
2015
- --tds-page-header-padding-y:var(--t-spacing-2);
2016
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2017
- --tds-page-header-nav-gap:var(--t-spacing-1);
2018
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
2019
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2020
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2021
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2022
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2023
- --tds-page-header-nav-item-border-width:1px;
2024
-
2025
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2026
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2027
-
2028
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2029
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2030
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2031
-
2032
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2033
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2034
-
2035
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2036
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2037
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2038
-
2039
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2040
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2041
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2042
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2043
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2044
- }
2045
-
2046
- .tds-page-header--profile{
2047
- --tds-page-header-padding-y:20px;
2048
- }
2049
-
2050
- @supports (color: light-dark(#fff, #000)){
2051
- .tds-page-header{
2052
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2053
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2054
- }
2055
- }
2056
-
2057
- @media (min-width: 600px){
2058
- .tds-page-header{
2059
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2060
- --tds-page-header-color:var(--t-text-color-secondary);
2061
- --tds-page-header-bottom-border-color:var(--t-border-color);
2062
- --tds-page-header-padding-x:var(--t-spacing-3);
2063
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2064
- --tds-page-header-nav-gap:var(--t-spacing-half);
2065
- --tds-page-header-nav-background:transparent;
2066
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2067
- --tds-page-header-nav-item-border-width:1px;
2068
- --tds-page-header-nav-item-color:var(--t-text-color);
2069
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2070
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2071
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2072
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2073
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2074
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2075
- }
2076
- }
2077
- }
2194
+ .tds-radio-group{
2195
+ --tds-radio-group-font-size:var(--t-font-size-md);
2196
+ --tds-radio-group-line-height:1.4;
2197
+ --tds-radio-group-gap:var(--t-spacing-1);
2078
2198
 
2079
- .tds-page-header{
2199
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2200
+ --tds-radio-group-description-line-height:1.35;
2201
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2202
+ --tds-radio-group-description-invalid-icon-display:none;
2080
2203
  display:flex;
2081
2204
  flex-direction:column;
2082
- padding-top:var(--tds-page-header-padding-y);
2083
- color:var(--tds-page-header-color);
2084
- background:var(--tds-page-header-background-color);
2085
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2086
- }
2087
-
2088
- .tds-page-header:not(.has-nav){
2089
- padding-bottom:var(--tds-page-header-padding-y);
2090
- }
2205
+ gap:0;
2206
+ padding:0;
2207
+ margin:0;
2091
2208
 
2092
- .tds-page-header.inactive{
2093
- background:var(--tds-page-header-background-color-inactive);
2094
- }
2209
+ font-size:var(--tds-radio-group-font-size);
2210
+ line-height:var(--tds-radio-group-line-height);
2211
+ border:0;
2212
+ }
2095
2213
 
2096
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2097
- width:100%;
2214
+ .tds-radio-group legend{
2215
+ float:left;
2216
+ padding:0;
2217
+ margin:0;
2098
2218
  }
2099
2219
 
2100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2101
- display:flex;
2102
- flex-flow:row wrap;
2103
- gap:var(--t-spacing-half) var(--t-spacing-1);
2104
- align-items:flex-start;
2105
- justify-content:flex-start;
2106
- min-width:0;
2220
+ .tds-radio-group[aria-invalid="true"]{
2221
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2222
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2107
2223
  }
2108
2224
 
2109
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
2110
- display:flex;
2111
- gap:var(--tds-page-header-nav-gap);
2112
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2113
- margin:0 0 -1px;
2114
- overflow:auto;
2115
- list-style:none;
2116
- background:var(--tds-page-header-nav-background);
2117
- }
2118
-
2119
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2120
- position:relative;
2121
- display:inline-flex;
2122
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2123
- font-size:var(--t-font-size-sm);
2124
- line-height:22px;
2125
- color:var(--tds-page-header-nav-item-color);
2126
- white-space:nowrap;
2127
- text-decoration:none;
2128
- -webkit-appearance:none;
2129
- -moz-appearance:none;
2130
- appearance:none;
2131
- cursor:pointer;
2132
- outline-offset:-2px;
2133
- background-color:var(--tds-page-header-nav-item-background-color);
2134
- background-clip:padding-box;
2135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2138
- }
2139
-
2140
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2141
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2142
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2143
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2144
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2145
- }
2146
-
2147
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2148
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2149
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2150
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2151
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2152
- }
2153
-
2154
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2155
- background-color:var(--tds-page-header-nav-item-background-color-active);
2156
- border-color:var(--tds-page-header-nav-item-border-color-active);
2157
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2158
- }
2159
-
2160
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2161
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2162
- color:var(--tds-page-header-nav-item-color-disabled);
2163
- cursor:not-allowed;
2164
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2165
- opacity:1;
2166
- }
2167
-
2168
- @media (min-width: 600px){
2169
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2170
- position:absolute;
2171
- inset:auto -1px -1px;
2172
- height:1px;
2173
- pointer-events:none;
2174
- content:"";
2175
- background-color:var(--tds-page-header-bottom-border-color);
2176
- }
2177
- }
2178
-
2179
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2180
- position:relative;
2225
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2226
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2181
2227
  }
2182
2228
 
2183
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2184
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2185
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2229
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2230
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2231
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2186
2232
  }
2187
2233
 
2188
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2189
- position:absolute;
2190
- top:-5px;
2191
- right:-2px;
2192
- width:10px;
2193
- height:10px;
2194
- content:"";
2195
- background:var(--tds-page-header-nav-item-indicator-color);
2196
- border-radius:50%;
2234
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2235
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2197
2236
  }
2198
2237
 
2199
- @media (prefers-reduced-motion: no-preference){
2200
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2201
- animation:indicator-pulse 1.25s ease infinite;
2202
- }
2203
- }
2238
+ .tds-radio-group:has(input:required) legend::after{
2239
+ margin-left:.25ch;
2240
+ color:var(--t-text-color-status-error);
2241
+ content:"*";
2242
+ }
2204
2243
 
2205
- .tds-page-header__title-bar{
2244
+ .tds-radio-group-fields{
2206
2245
  display:flex;
2207
2246
  flex-direction:column;
2208
- gap:var(--t-spacing-2) var(--t-spacing-1);
2247
+ gap:var(--tds-radio-group-gap);
2209
2248
  align-items:flex-start;
2210
- justify-content:space-between;
2211
- padding:0 var(--tds-page-header-padding-x);
2212
- }
2213
-
2214
- .tds-page-header--profile > .tds-page-header__title-bar{
2215
- align-items:center;
2216
- }
2217
-
2218
- .tds-page-header__primary{
2219
- width:100%;
2220
- }
2221
-
2222
- .tds-page-header__primary h1{
2223
- margin:0;
2224
- font-size:var(--tds-page-header-headline-font-size);
2225
- font-weight:var(--t-font-weight-normal);
2226
- line-height:32px;
2227
- color:var(--tds-page-header-headline-color);
2228
- overflow-wrap:break-word;
2229
- }
2230
-
2231
- @media (min-width: 960px){
2232
- .tds-page-header__primary{
2233
- flex:1 1 max-content;
2234
- width:auto;
2235
- min-width:0;
2236
- max-width:100%;
2237
- }
2238
-
2239
- .tds-page-header__title-bar,
2240
- .tds-page-header--profile .tds-page-header__title-bar{
2241
- flex-flow:row nowrap;
2242
- row-gap:12px;
2243
- align-items:flex-start;
2244
- }
2245
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2246
- width:auto;
2247
- }
2248
-
2249
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2250
- justify-content:flex-end;
2251
- }
2249
+ margin-top:var(--t-spacing-1);
2252
2250
  }
2253
2251
 
2254
- .tds-page-header-phone,
2255
- .tds-page-header-email{
2256
- color:var(--tds-page-header-color);
2257
- white-space:nowrap;
2258
- }
2259
- .tds-page-header-email{
2260
- max-width:100%;
2261
- overflow:hidden;
2262
- text-overflow:ellipsis;
2252
+ .tds-radio-group-description{
2253
+ display:flex;
2254
+ gap:var(--t-spacing-half);
2255
+ align-items:flex-start;
2256
+ margin:var(--t-spacing-fourth) 0 0;
2257
+ font-size:var(--tds-radio-group-description-font-size);
2258
+ line-height:var(--tds-radio-group-description-line-height);
2259
+ color:var(--tds-radio-group-description-color);
2260
+ cursor:text;
2263
2261
  }
2264
2262
 
2265
- @keyframes indicator-pulse{
2266
- 0%{
2267
- opacity:.3;
2268
- transform:scale(.9);
2263
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2264
+ display:var(--tds-radio-group-description-invalid-icon-display);
2265
+ flex-shrink:0;
2266
+ margin-top:calc(.5lh - .5em);
2267
+ line-height:var(--tds-radio-group-description-line-height);
2269
2268
  }
2270
2269
 
2271
- 100%{
2272
- opacity:0;
2273
- transform:scale(1.75);
2274
- }
2270
+ .tds-radio-group--sm{
2271
+ --tds-radio-group-line-height:1.35;
2272
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2273
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2274
+ --tds-radio-group-description-line-height:1.3;
2275
2275
  }
2276
2276
 
2277
2277
  .tds-input{