@planningcenter/tapestry 4.0.0-rc.23 → 4.0.0-rc.24

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 +645 -645
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +645 -645
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1039,273 +1039,281 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1039
1039
  flex-direction:column;
1040
1040
  }
1041
1041
 
1042
- .tds-checkbox{
1043
- --tds-checkbox-font-size:var(--t-font-size-md);
1044
- --tds-checkbox-cursor:pointer;
1045
- --tds-checkbox-line-height:1.4;
1046
- --tds-checkbox-transition-property:background-color, border-color;
1047
-
1048
- --tds-checkbox-input-size:var(--t-element-size-md);
1049
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1050
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1051
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1042
+ @layer t-critical{
1043
+ tds-page-header:not(.hydrated){
1044
+ display:none;
1045
+ }
1046
+ }
1052
1047
 
1053
- --tds-checkbox-input-icon:none;
1054
- --tds-checkbox-input-icon-visibility:hidden;
1055
- --tds-checkbox-input-icon-opacity:0;
1056
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1048
+ @layer t-component{
1049
+ .tds-page-header{
1050
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1051
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1052
+ --tds-page-header-color:var(--t-text-color);
1053
+ --tds-page-header-bottom-border-color:transparent;
1054
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1055
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1056
+ --tds-page-header-padding-x:var(--t-spacing-2);
1057
+ --tds-page-header-padding-y:var(--t-spacing-2);
1058
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1059
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1060
+ --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%);
1061
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1062
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1063
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1064
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1065
+ --tds-page-header-nav-item-border-width:1px;
1057
1066
 
1058
- --tds-checkbox-label-color:var(--t-form-color);
1067
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1068
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1059
1069
 
1060
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1061
- --tds-checkbox-description-line-height:1.35;
1062
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1063
- --tds-checkbox-description-invalid-icon-display:none;
1070
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1071
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1072
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1064
1073
 
1065
- position:relative;
1066
- display:inline-grid;
1067
- grid-template-columns:auto;
1068
- grid-auto-columns:1fr;
1069
- gap:var(--t-spacing-fourth) 0;
1070
- line-height:var(--tds-checkbox-line-height);
1071
- -webkit-user-select:none;
1072
- -moz-user-select:none;
1073
- user-select:none;
1074
- }
1074
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1075
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1075
1076
 
1076
- .tds-checkbox label{
1077
- grid-area:1 / 2;
1078
- padding-inline-start:var(--t-spacing-1);
1079
- font-size:var(--tds-checkbox-font-size);
1080
- font-weight:var(--t-font-weight-normal);
1081
- color:var(--tds-checkbox-label-color);
1082
- cursor:var(--tds-checkbox-cursor);
1083
- }
1077
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1078
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1079
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1084
1080
 
1085
- .tds-checkbox tds-indeterminate{
1086
- display:flex;
1081
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1082
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1083
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1084
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1085
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1087
1086
  }
1088
1087
 
1089
- .tds-checkbox input[type="checkbox"]{
1090
- position:relative;
1091
- width:1em;
1092
- height:1em;
1093
- margin:calc((1lh - 1em) / 2) 0 0;
1094
- font-size:var(--tds-checkbox-font-size);
1095
- line-height:inherit;
1096
- -webkit-appearance:none;
1097
- -moz-appearance:none;
1098
- appearance:none;
1099
- cursor:var(--tds-checkbox-cursor);
1100
- background-color:var(--tds-checkbox-input-background-color);
1101
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1102
- border-radius:var(--tds-checkbox-input-border-radius);
1103
- transition-timing-function:var(--t-ease-in-out);
1104
- transition-duration:var(--t-duration-200);
1105
- transition-property:var(--tds-checkbox-transition-property);
1088
+ .tds-page-header--profile{
1089
+ --tds-page-header-padding-y:20px;
1106
1090
  }
1107
1091
 
1108
- :is(.tds-checkbox input[type="checkbox"])::before{
1109
- position:absolute;
1110
- top:50%;
1111
- left:50%;
1112
- visibility:var(--tds-checkbox-input-icon-visibility);
1113
- width:100%;
1114
- height:100%;
1115
- content:"";
1116
- background-color:var(--tds-checkbox-input-icon-fill);
1117
- border-radius:var(--tds-checkbox-input-border-radius);
1118
- opacity:var(--tds-checkbox-input-icon-opacity);
1119
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1120
- mask-image:var(--tds-checkbox-input-icon);
1121
- -webkit-mask-repeat:no-repeat;
1122
- mask-repeat:no-repeat;
1123
- -webkit-mask-size:contain;
1124
- mask-size:contain;
1125
- transform:translate(-50%, -50%);
1126
- }
1127
-
1128
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1129
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1130
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1131
- }
1132
-
1133
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1134
- outline:var(--t-focus-ring-outline);
1135
- outline-offset:var(--t-focus-ring-offset);
1092
+ @supports (color: light-dark(#fff, #000)){
1093
+ .tds-page-header{
1094
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1095
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1136
1096
  }
1097
+ }
1137
1098
 
1138
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1139
- pointer-events:none;
1099
+ @media (min-width: 600px){
1100
+ .tds-page-header{
1101
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1102
+ --tds-page-header-color:var(--t-text-color-secondary);
1103
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1104
+ --tds-page-header-padding-x:var(--t-spacing-3);
1105
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1106
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1107
+ --tds-page-header-nav-background:transparent;
1108
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1109
+ --tds-page-header-nav-item-border-width:1px;
1110
+ --tds-page-header-nav-item-color:var(--t-text-color);
1111
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1112
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1113
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1114
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1115
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1116
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1140
1117
  }
1141
-
1142
- @media (prefers-reduced-motion: reduce){
1143
-
1144
- .tds-checkbox input[type="checkbox"]{
1145
- --tds-checkbox-transition-property:none;
1146
1118
  }
1147
- }
1119
+ }
1148
1120
 
1149
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1150
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1151
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1152
- --tds-checkbox-input-icon-visibility:visible;
1153
- --tds-checkbox-input-icon-opacity:1;
1154
- }
1121
+ .tds-page-header{
1122
+ display:flex;
1123
+ flex-direction:column;
1124
+ padding-top:var(--tds-page-header-padding-y);
1125
+ color:var(--tds-page-header-color);
1126
+ background:var(--tds-page-header-background-color);
1127
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1128
+ }
1155
1129
 
1156
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1157
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1158
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1159
- }
1130
+ .tds-page-header:not(.has-nav){
1131
+ padding-bottom:var(--tds-page-header-padding-y);
1132
+ }
1160
1133
 
1161
- .tds-checkbox:has(input:checked){
1162
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1134
+ .tds-page-header.inactive{
1135
+ background:var(--tds-page-header-background-color-inactive);
1163
1136
  }
1164
1137
 
1165
- .tds-checkbox:has(input:indeterminate){
1166
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1138
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
+ width:100%;
1167
1140
  }
1168
1141
 
1169
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1170
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1171
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1172
- --tds-checkbox-description-invalid-icon-display:inline-block;
1142
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1143
+ display:flex;
1144
+ flex-flow:row wrap;
1145
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1146
+ align-items:flex-start;
1147
+ justify-content:flex-start;
1148
+ min-width:0;
1173
1149
  }
1174
1150
 
1175
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1176
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1177
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1151
+ :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{
1152
+ display:flex;
1153
+ gap:var(--tds-page-header-nav-gap);
1154
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1155
+ margin:0 0 -1px;
1156
+ overflow:auto;
1157
+ list-style:none;
1158
+ background:var(--tds-page-header-nav-background);
1178
1159
  }
1179
1160
 
1180
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1181
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1182
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1161
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1162
+ position:relative;
1163
+ display:inline-flex;
1164
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1165
+ font-size:var(--t-font-size-sm);
1166
+ line-height:22px;
1167
+ color:var(--tds-page-header-nav-item-color);
1168
+ white-space:nowrap;
1169
+ text-decoration:none;
1170
+ -webkit-appearance:none;
1171
+ -moz-appearance:none;
1172
+ appearance:none;
1173
+ cursor:pointer;
1174
+ outline-offset:-2px;
1175
+ background-color:var(--tds-page-header-nav-item-background-color);
1176
+ background-clip:padding-box;
1177
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1178
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1179
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1183
1180
  }
1184
1181
 
1185
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1186
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1187
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1182
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1183
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1184
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1185
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1186
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1188
1187
  }
1189
1188
 
1190
- .tds-checkbox:has(input:required) label::after{
1191
- margin-left:.25ch;
1192
- color:var(--t-text-color-status-error);
1193
- content:"*";
1189
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1190
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1191
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1192
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1193
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1194
+ }
1195
+
1196
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1197
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1198
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1199
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1200
+ }
1201
+
1202
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1203
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1204
+ color:var(--tds-page-header-nav-item-color-disabled);
1205
+ cursor:not-allowed;
1206
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
+ opacity:1;
1208
+ }
1209
+
1210
+ @media (min-width: 600px){
1211
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1212
+ position:absolute;
1213
+ inset:auto -1px -1px;
1214
+ height:1px;
1215
+ pointer-events:none;
1216
+ content:"";
1217
+ background-color:var(--tds-page-header-bottom-border-color);
1218
+ }
1219
+ }
1220
+
1221
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
+ position:relative;
1194
1223
  }
1195
1224
 
1196
- .tds-checkbox:has(input:disabled){
1197
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1198
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1225
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1226
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1227
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1228
+ }
1199
1229
 
1200
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1201
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1202
- --tds-checkbox-cursor:not-allowed;
1203
- }
1230
+ :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{
1231
+ position:absolute;
1232
+ top:-5px;
1233
+ right:-2px;
1234
+ width:10px;
1235
+ height:10px;
1236
+ content:"";
1237
+ background:var(--tds-page-header-nav-item-indicator-color);
1238
+ border-radius:50%;
1239
+ }
1204
1240
 
1205
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1206
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1207
- }
1241
+ @media (prefers-reduced-motion: no-preference){
1242
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1243
+ animation:indicator-pulse 1.25s ease infinite;
1244
+ }
1245
+ }
1208
1246
 
1209
- .tds-checkbox-description{
1247
+ .tds-page-header__title-bar{
1210
1248
  display:flex;
1211
- grid-area:2 / 2;
1212
- gap:var(--t-spacing-half);
1249
+ flex-direction:column;
1250
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1213
1251
  align-items:flex-start;
1214
- padding-inline-start:var(--t-spacing-1);
1215
- margin:0;
1216
- font-size:var(--tds-checkbox-description-font-size);
1217
- line-height:var(--tds-checkbox-description-line-height);
1218
- color:var(--tds-checkbox-description-color);
1219
- cursor:text;
1252
+ justify-content:space-between;
1253
+ padding:0 var(--tds-page-header-padding-x);
1220
1254
  }
1221
1255
 
1222
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1223
- display:var(--tds-checkbox-description-invalid-icon-display);
1224
- flex-shrink:0;
1225
- margin-top:calc(.5lh - .5em);
1226
- line-height:var(--tds-checkbox-description-line-height);
1256
+ .tds-page-header--profile > .tds-page-header__title-bar{
1257
+ align-items:center;
1227
1258
  }
1228
1259
 
1229
- .tds-checkbox--sm{
1230
- --tds-checkbox-line-height:1.35;
1231
- --tds-checkbox-input-size:var(--t-element-size-sm);
1232
- --tds-checkbox-font-size:var(--t-font-size-sm);
1233
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1234
- --tds-checkbox-description-line-height:1.3;
1235
- }
1236
-
1237
- .tds-checkbox-group{
1238
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1239
- --tds-checkbox-group-line-height:1.4;
1240
- --tds-checkbox-group-gap:var(--t-spacing-1);
1241
-
1242
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1243
- --tds-checkbox-group-description-line-height:1.35;
1244
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1245
- --tds-checkbox-group-description-invalid-icon-display:none;
1246
- display:flex;
1247
- flex-direction:column;
1248
- gap:0;
1249
- padding:0;
1250
- margin:0;
1251
-
1252
- font-size:var(--tds-checkbox-group-font-size);
1253
- line-height:var(--tds-checkbox-group-line-height);
1254
- border:0;
1260
+ .tds-page-header__primary{
1261
+ width:100%;
1255
1262
  }
1256
1263
 
1257
- .tds-checkbox-group legend{
1258
- float:left;
1259
- padding:0;
1264
+ .tds-page-header__primary h1{
1260
1265
  margin:0;
1266
+ font-size:var(--tds-page-header-headline-font-size);
1267
+ font-weight:var(--t-font-weight-normal);
1268
+ line-height:32px;
1269
+ color:var(--tds-page-header-headline-color);
1270
+ overflow-wrap:break-word;
1261
1271
  }
1262
1272
 
1263
- .tds-checkbox-group[aria-invalid="true"]{
1264
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1265
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1273
+ @media (min-width: 960px){
1274
+ .tds-page-header__primary{
1275
+ flex:1 1 max-content;
1276
+ width:auto;
1277
+ min-width:0;
1278
+ max-width:100%;
1266
1279
  }
1267
1280
 
1268
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1269
- margin-left:.25ch;
1270
- color:var(--t-text-color-status-error);
1271
- content:"*";
1281
+ .tds-page-header__title-bar,
1282
+ .tds-page-header--profile .tds-page-header__title-bar{
1283
+ flex-flow:row nowrap;
1284
+ row-gap:12px;
1285
+ align-items:flex-start;
1286
+ }
1287
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
+ width:auto;
1272
1289
  }
1273
1290
 
1274
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1275
- content:none;
1291
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
+ justify-content:flex-end;
1276
1293
  }
1277
-
1278
- .tds-checkbox-group-fields{
1279
- display:flex;
1280
- flex-direction:column;
1281
- gap:var(--tds-checkbox-group-gap);
1282
- align-items:flex-start;
1283
- margin-top:var(--t-spacing-1);
1284
1294
  }
1285
1295
 
1286
- .tds-checkbox-group-description{
1287
- display:flex;
1288
- gap:var(--t-spacing-half);
1289
- align-items:flex-start;
1290
- margin:var(--t-spacing-fourth) 0 0;
1291
- font-size:var(--tds-checkbox-group-description-font-size);
1292
- line-height:var(--tds-checkbox-group-description-line-height);
1293
- color:var(--tds-checkbox-group-description-color);
1294
- cursor:text;
1296
+ .tds-page-header-phone,
1297
+ .tds-page-header-email{
1298
+ color:var(--tds-page-header-color);
1299
+ white-space:nowrap;
1300
+ }
1301
+ .tds-page-header-email{
1302
+ max-width:100%;
1303
+ overflow:hidden;
1304
+ text-overflow:ellipsis;
1295
1305
  }
1296
1306
 
1297
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1298
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1299
- flex-shrink:0;
1300
- margin-top:calc(.5lh - .5em);
1301
- line-height:var(--tds-checkbox-group-description-line-height);
1307
+ @keyframes indicator-pulse{
1308
+ 0%{
1309
+ opacity:.3;
1310
+ transform:scale(.9);
1302
1311
  }
1303
1312
 
1304
- .tds-checkbox-group--sm{
1305
- --tds-checkbox-group-line-height:1.35;
1306
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1307
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1308
- --tds-checkbox-group-description-line-height:1.3;
1313
+ 100%{
1314
+ opacity:0;
1315
+ transform:scale(1.75);
1316
+ }
1309
1317
  }
1310
1318
 
1311
1319
  .tds-button-group{
@@ -1350,281 +1358,273 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1350
1358
  border-end-end-radius:var(--tds-btn-border-radius);
1351
1359
  }
1352
1360
 
1353
- @layer t-critical{
1354
- tds-page-header:not(.hydrated){
1355
- display:none;
1356
- }
1361
+ .tds-checkbox{
1362
+ --tds-checkbox-font-size:var(--t-font-size-md);
1363
+ --tds-checkbox-cursor:pointer;
1364
+ --tds-checkbox-line-height:1.4;
1365
+ --tds-checkbox-transition-property:background-color, border-color;
1366
+
1367
+ --tds-checkbox-input-size:var(--t-element-size-md);
1368
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1369
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1370
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1371
+
1372
+ --tds-checkbox-input-icon:none;
1373
+ --tds-checkbox-input-icon-visibility:hidden;
1374
+ --tds-checkbox-input-icon-opacity:0;
1375
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1376
+
1377
+ --tds-checkbox-label-color:var(--t-form-color);
1378
+
1379
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1380
+ --tds-checkbox-description-line-height:1.35;
1381
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1382
+ --tds-checkbox-description-invalid-icon-display:none;
1383
+
1384
+ position:relative;
1385
+ display:inline-grid;
1386
+ grid-template-columns:auto;
1387
+ grid-auto-columns:1fr;
1388
+ gap:var(--t-spacing-fourth) 0;
1389
+ line-height:var(--tds-checkbox-line-height);
1390
+ -webkit-user-select:none;
1391
+ -moz-user-select:none;
1392
+ user-select:none;
1357
1393
  }
1358
1394
 
1359
- @layer t-component{
1360
- .tds-page-header{
1361
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1362
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1363
- --tds-page-header-color:var(--t-text-color);
1364
- --tds-page-header-bottom-border-color:transparent;
1365
- --tds-page-header-headline-color:var(--t-text-color-headline);
1366
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1367
- --tds-page-header-padding-x:var(--t-spacing-2);
1368
- --tds-page-header-padding-y:var(--t-spacing-2);
1369
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1370
- --tds-page-header-nav-gap:var(--t-spacing-1);
1371
- --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%);
1372
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1373
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1374
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1375
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1376
- --tds-page-header-nav-item-border-width:1px;
1395
+ .tds-checkbox label{
1396
+ grid-area:1 / 2;
1397
+ padding-inline-start:var(--t-spacing-1);
1398
+ font-size:var(--tds-checkbox-font-size);
1399
+ font-weight:var(--t-font-weight-normal);
1400
+ color:var(--tds-checkbox-label-color);
1401
+ cursor:var(--tds-checkbox-cursor);
1402
+ }
1377
1403
 
1378
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1379
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1404
+ .tds-checkbox tds-indeterminate{
1405
+ display:flex;
1406
+ }
1407
+
1408
+ .tds-checkbox input[type="checkbox"]{
1409
+ position:relative;
1410
+ width:1em;
1411
+ height:1em;
1412
+ margin:calc((1lh - 1em) / 2) 0 0;
1413
+ font-size:var(--tds-checkbox-font-size);
1414
+ line-height:inherit;
1415
+ -webkit-appearance:none;
1416
+ -moz-appearance:none;
1417
+ appearance:none;
1418
+ cursor:var(--tds-checkbox-cursor);
1419
+ background-color:var(--tds-checkbox-input-background-color);
1420
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1421
+ border-radius:var(--tds-checkbox-input-border-radius);
1422
+ transition-timing-function:var(--t-ease-in-out);
1423
+ transition-duration:var(--t-duration-200);
1424
+ transition-property:var(--tds-checkbox-transition-property);
1425
+ }
1426
+
1427
+ :is(.tds-checkbox input[type="checkbox"])::before{
1428
+ position:absolute;
1429
+ top:50%;
1430
+ left:50%;
1431
+ visibility:var(--tds-checkbox-input-icon-visibility);
1432
+ width:100%;
1433
+ height:100%;
1434
+ content:"";
1435
+ background-color:var(--tds-checkbox-input-icon-fill);
1436
+ border-radius:var(--tds-checkbox-input-border-radius);
1437
+ opacity:var(--tds-checkbox-input-icon-opacity);
1438
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1439
+ mask-image:var(--tds-checkbox-input-icon);
1440
+ -webkit-mask-repeat:no-repeat;
1441
+ mask-repeat:no-repeat;
1442
+ -webkit-mask-size:contain;
1443
+ mask-size:contain;
1444
+ transform:translate(-50%, -50%);
1445
+ }
1380
1446
 
1381
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1382
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1383
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1447
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1448
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1449
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1450
+ }
1384
1451
 
1385
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1386
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1452
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1453
+ outline:var(--t-focus-ring-outline);
1454
+ outline-offset:var(--t-focus-ring-offset);
1455
+ }
1387
1456
 
1388
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1389
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1390
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1457
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1458
+ pointer-events:none;
1459
+ }
1391
1460
 
1392
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1393
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1394
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1395
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1396
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1397
- }
1461
+ @media (prefers-reduced-motion: reduce){
1398
1462
 
1399
- .tds-page-header--profile{
1400
- --tds-page-header-padding-y:20px;
1463
+ .tds-checkbox input[type="checkbox"]{
1464
+ --tds-checkbox-transition-property:none;
1401
1465
  }
1402
-
1403
- @supports (color: light-dark(#fff, #000)){
1404
- .tds-page-header{
1405
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1406
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1407
1466
  }
1408
- }
1409
1467
 
1410
- @media (min-width: 600px){
1411
- .tds-page-header{
1412
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1413
- --tds-page-header-color:var(--t-text-color-secondary);
1414
- --tds-page-header-bottom-border-color:var(--t-border-color);
1415
- --tds-page-header-padding-x:var(--t-spacing-3);
1416
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1417
- --tds-page-header-nav-gap:var(--t-spacing-half);
1418
- --tds-page-header-nav-background:transparent;
1419
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1420
- --tds-page-header-nav-item-border-width:1px;
1421
- --tds-page-header-nav-item-color:var(--t-text-color);
1422
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1423
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1424
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1425
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1426
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1427
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1428
- }
1468
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1469
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1470
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1471
+ --tds-checkbox-input-icon-visibility:visible;
1472
+ --tds-checkbox-input-icon-opacity:1;
1429
1473
  }
1430
- }
1431
-
1432
- .tds-page-header{
1433
- display:flex;
1434
- flex-direction:column;
1435
- padding-top:var(--tds-page-header-padding-y);
1436
- color:var(--tds-page-header-color);
1437
- background:var(--tds-page-header-background-color);
1438
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1439
- }
1440
1474
 
1441
- .tds-page-header:not(.has-nav){
1442
- padding-bottom:var(--tds-page-header-padding-y);
1443
- }
1475
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1476
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1477
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1478
+ }
1444
1479
 
1445
- .tds-page-header.inactive{
1446
- background:var(--tds-page-header-background-color-inactive);
1480
+ .tds-checkbox:has(input:checked){
1481
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1447
1482
  }
1448
1483
 
1449
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1450
- width:100%;
1484
+ .tds-checkbox:has(input:indeterminate){
1485
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1451
1486
  }
1452
1487
 
1453
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1454
- display:flex;
1455
- flex-flow:row wrap;
1456
- gap:var(--t-spacing-half) var(--t-spacing-1);
1457
- align-items:flex-start;
1458
- justify-content:flex-start;
1459
- min-width:0;
1488
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1489
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1490
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1491
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1460
1492
  }
1461
1493
 
1462
- :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{
1463
- display:flex;
1464
- gap:var(--tds-page-header-nav-gap);
1465
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1466
- margin:0 0 -1px;
1467
- overflow:auto;
1468
- list-style:none;
1469
- background:var(--tds-page-header-nav-background);
1494
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1495
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1496
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1470
1497
  }
1471
1498
 
1472
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1473
- position:relative;
1474
- display:inline-flex;
1475
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1476
- font-size:var(--t-font-size-sm);
1477
- line-height:22px;
1478
- color:var(--tds-page-header-nav-item-color);
1479
- white-space:nowrap;
1480
- text-decoration:none;
1481
- -webkit-appearance:none;
1482
- -moz-appearance:none;
1483
- appearance:none;
1484
- cursor:pointer;
1485
- outline-offset:-2px;
1486
- background-color:var(--tds-page-header-nav-item-background-color);
1487
- background-clip:padding-box;
1488
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1489
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1490
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1499
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1500
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1501
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1491
1502
  }
1492
1503
 
1493
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1494
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1495
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1496
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1497
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1504
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1505
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1506
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1498
1507
  }
1499
1508
 
1500
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1501
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1502
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1503
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1504
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1505
- }
1506
-
1507
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1508
- background-color:var(--tds-page-header-nav-item-background-color-active);
1509
- border-color:var(--tds-page-header-nav-item-border-color-active);
1510
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1511
- }
1512
-
1513
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1514
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1515
- color:var(--tds-page-header-nav-item-color-disabled);
1516
- cursor:not-allowed;
1517
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1518
- opacity:1;
1519
- }
1520
-
1521
- @media (min-width: 600px){
1522
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1523
- position:absolute;
1524
- inset:auto -1px -1px;
1525
- height:1px;
1526
- pointer-events:none;
1527
- content:"";
1528
- background-color:var(--tds-page-header-bottom-border-color);
1529
- }
1530
- }
1531
-
1532
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1533
- position:relative;
1509
+ .tds-checkbox:has(input:required) label::after{
1510
+ margin-left:.25ch;
1511
+ color:var(--t-text-color-status-error);
1512
+ content:"*";
1534
1513
  }
1535
1514
 
1536
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1537
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1538
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1539
- }
1515
+ .tds-checkbox:has(input:disabled){
1516
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1517
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1540
1518
 
1541
- :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{
1542
- position:absolute;
1543
- top:-5px;
1544
- right:-2px;
1545
- width:10px;
1546
- height:10px;
1547
- content:"";
1548
- background:var(--tds-page-header-nav-item-indicator-color);
1549
- border-radius:50%;
1550
- }
1519
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1520
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1521
+ --tds-checkbox-cursor:not-allowed;
1522
+ }
1551
1523
 
1552
- @media (prefers-reduced-motion: no-preference){
1553
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1554
- animation:indicator-pulse 1.25s ease infinite;
1555
- }
1556
- }
1524
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1525
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1526
+ }
1557
1527
 
1558
- .tds-page-header__title-bar{
1528
+ .tds-checkbox-description{
1559
1529
  display:flex;
1560
- flex-direction:column;
1561
- gap:var(--t-spacing-2) var(--t-spacing-1);
1530
+ grid-area:2 / 2;
1531
+ gap:var(--t-spacing-half);
1562
1532
  align-items:flex-start;
1563
- justify-content:space-between;
1564
- padding:0 var(--tds-page-header-padding-x);
1533
+ padding-inline-start:var(--t-spacing-1);
1534
+ margin:0;
1535
+ font-size:var(--tds-checkbox-description-font-size);
1536
+ line-height:var(--tds-checkbox-description-line-height);
1537
+ color:var(--tds-checkbox-description-color);
1538
+ cursor:text;
1565
1539
  }
1566
1540
 
1567
- .tds-page-header--profile > .tds-page-header__title-bar{
1568
- align-items:center;
1541
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1542
+ display:var(--tds-checkbox-description-invalid-icon-display);
1543
+ flex-shrink:0;
1544
+ margin-top:calc(.5lh - .5em);
1545
+ line-height:var(--tds-checkbox-description-line-height);
1569
1546
  }
1570
1547
 
1571
- .tds-page-header__primary{
1572
- width:100%;
1548
+ .tds-checkbox--sm{
1549
+ --tds-checkbox-line-height:1.35;
1550
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1551
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1552
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1553
+ --tds-checkbox-description-line-height:1.3;
1554
+ }
1555
+
1556
+ .tds-checkbox-group{
1557
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
+ --tds-checkbox-group-line-height:1.4;
1559
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1560
+
1561
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
+ --tds-checkbox-group-description-line-height:1.35;
1563
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
+ --tds-checkbox-group-description-invalid-icon-display:none;
1565
+ display:flex;
1566
+ flex-direction:column;
1567
+ gap:0;
1568
+ padding:0;
1569
+ margin:0;
1570
+
1571
+ font-size:var(--tds-checkbox-group-font-size);
1572
+ line-height:var(--tds-checkbox-group-line-height);
1573
+ border:0;
1573
1574
  }
1574
1575
 
1575
- .tds-page-header__primary h1{
1576
+ .tds-checkbox-group legend{
1577
+ float:left;
1578
+ padding:0;
1576
1579
  margin:0;
1577
- font-size:var(--tds-page-header-headline-font-size);
1578
- font-weight:var(--t-font-weight-normal);
1579
- line-height:32px;
1580
- color:var(--tds-page-header-headline-color);
1581
- overflow-wrap:break-word;
1582
1580
  }
1583
1581
 
1584
- @media (min-width: 960px){
1585
- .tds-page-header__primary{
1586
- flex:1 1 max-content;
1587
- width:auto;
1588
- min-width:0;
1589
- max-width:100%;
1582
+ .tds-checkbox-group[aria-invalid="true"]{
1583
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1590
1585
  }
1591
1586
 
1592
- .tds-page-header__title-bar,
1593
- .tds-page-header--profile .tds-page-header__title-bar{
1594
- flex-flow:row nowrap;
1595
- row-gap:12px;
1596
- align-items:flex-start;
1597
- }
1598
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1599
- width:auto;
1587
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1588
+ margin-left:.25ch;
1589
+ color:var(--t-text-color-status-error);
1590
+ content:"*";
1600
1591
  }
1601
1592
 
1602
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1603
- justify-content:flex-end;
1593
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
+ content:none;
1604
1595
  }
1605
- }
1606
1596
 
1607
- .tds-page-header-phone,
1608
- .tds-page-header-email{
1609
- color:var(--tds-page-header-color);
1610
- white-space:nowrap;
1597
+ .tds-checkbox-group-fields{
1598
+ display:flex;
1599
+ flex-direction:column;
1600
+ gap:var(--tds-checkbox-group-gap);
1601
+ align-items:flex-start;
1602
+ margin-top:var(--t-spacing-1);
1611
1603
  }
1612
- .tds-page-header-email{
1613
- max-width:100%;
1614
- overflow:hidden;
1615
- text-overflow:ellipsis;
1604
+
1605
+ .tds-checkbox-group-description{
1606
+ display:flex;
1607
+ gap:var(--t-spacing-half);
1608
+ align-items:flex-start;
1609
+ margin:var(--t-spacing-fourth) 0 0;
1610
+ font-size:var(--tds-checkbox-group-description-font-size);
1611
+ line-height:var(--tds-checkbox-group-description-line-height);
1612
+ color:var(--tds-checkbox-group-description-color);
1613
+ cursor:text;
1616
1614
  }
1617
1615
 
1618
- @keyframes indicator-pulse{
1619
- 0%{
1620
- opacity:.3;
1621
- transform:scale(.9);
1616
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1618
+ flex-shrink:0;
1619
+ margin-top:calc(.5lh - .5em);
1620
+ line-height:var(--tds-checkbox-group-description-line-height);
1622
1621
  }
1623
1622
 
1624
- 100%{
1625
- opacity:0;
1626
- transform:scale(1.75);
1627
- }
1623
+ .tds-checkbox-group--sm{
1624
+ --tds-checkbox-group-line-height:1.35;
1625
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
+ --tds-checkbox-group-description-line-height:1.3;
1628
1628
  }
1629
1629
 
1630
1630
  .tds-dropdown-popover{
@@ -1845,233 +1845,100 @@ a.tds-dropdown-item:is(:hover, :active){
1845
1845
  --tds-modal-width:800px;
1846
1846
  }
1847
1847
 
1848
- .tds-modal-frame--xl{
1849
- --tds-modal-width:1000px;
1850
- }
1851
-
1852
- @keyframes tds-modal-zoom{
1853
- from{
1854
- opacity:0;
1855
- scale:.96;
1856
- }
1857
- }
1858
-
1859
- @media (prefers-reduced-motion: reduce){
1860
- .tds-modal-overlay[data-entering],
1861
- .tds-modal-overlay[data-exiting],
1862
- .tds-modal-frame[data-entering],
1863
- .tds-modal-frame[data-exiting]{
1864
- animation:none;
1865
- }
1866
- }
1867
-
1868
- .tds-modal{
1869
- display:flex;
1870
- flex-direction:column;
1871
- width:100%;
1872
- padding-block:var(--t-spacing-3);
1873
- padding-inline:0;
1874
- background:var(--t-surface-color-card);
1875
-
1876
- border:0;
1877
- border-radius:var(--t-border-radius-lg);
1878
- box-shadow:0 4px 18px 0 #0003;
1879
- }
1880
-
1881
- .tds-modal:focus{
1882
- outline:none;
1883
- }
1884
-
1885
- .tds-modal-header{
1886
- display:grid;
1887
- grid-template-columns:1fr auto;
1888
- -moz-column-gap:var(--t-spacing-2);
1889
- column-gap:var(--t-spacing-2);
1890
- padding-block:0;
1891
- padding-inline:var(--t-spacing-4);
1892
- }
1893
-
1894
- .tds-modal-title{
1895
- grid-row:1;
1896
- grid-column:1;
1897
- margin:0;
1898
- font-size:var(--t-font-size-2xl);
1899
- font-weight:var(--t-font-weight-medium);
1900
- line-height:140%;
1901
- color:var(--t-text-color-headline);
1902
- }
1903
-
1904
- .tds-modal-subtitle{
1905
- grid-row:2;
1906
- grid-column:1;
1907
- margin:0;
1908
- font-size:var(--t-font-size-md);
1909
- font-weight:var(--t-font-weight-medium);
1910
- line-height:140%;
1911
- color:var(--t-text-color-secondary);
1912
- }
1913
-
1914
- .tds-modal-close{
1915
- grid-row:1;
1916
- grid-column:2;
1917
- align-self:center;
1918
- color:var(--t-icon-color-dim);
1919
- }
1920
-
1921
- .tds-modal-body{
1922
- padding-block:var(--t-spacing-3);
1923
- padding-inline:var(--t-spacing-4);
1924
- }
1925
-
1926
- .tds-modal-body--full-width{
1927
- padding-inline:0;
1928
- }
1929
-
1930
- .tds-modal-footer{
1931
- display:flex;
1932
- gap:var(--t-spacing-2);
1933
- align-items:center;
1934
- justify-content:flex-end;
1935
- padding-block-start:var(--t-spacing-3);
1936
- padding-inline:var(--t-spacing-4);
1937
- border-top:1px solid var(--t-border-color);
1938
- }
1939
-
1940
- .tds-modal-footer > [slot="start"]{
1941
- margin-inline-end:auto;
1942
- }
1943
-
1944
- .tds-radio{
1945
- --tds-radio-font-size:var(--t-font-size-md);
1946
- --tds-radio-cursor:pointer;
1947
- --tds-radio-line-height:1.4;
1948
- --tds-radio-transition-property:border-width;
1949
-
1950
- --tds-radio-input-size:var(--t-element-size-md);
1951
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1952
- --tds-radio-input-border-color:var(--t-form-border-color);
1953
- --tds-radio-input-border-width:var(--t-form-border-width);
1954
- --tds-radio-input-background-color:var(--t-form-background-color);
1955
-
1956
- --tds-radio-label-color:var(--t-form-color);
1957
-
1958
- --tds-radio-description-font-size:var(--t-font-size-sm);
1959
- --tds-radio-description-line-height:1.35;
1960
- --tds-radio-description-color:var(--t-text-color-secondary);
1961
-
1962
- position:relative;
1963
- display:inline-grid;
1964
- grid-template-columns:auto;
1965
- grid-auto-columns:1fr;
1966
- gap:var(--t-spacing-fourth) 0;
1967
- line-height:var(--tds-radio-line-height);
1968
- -webkit-user-select:none;
1969
- -moz-user-select:none;
1970
- user-select:none;
1971
- }
1972
-
1973
- .tds-radio label{
1974
- grid-area:1 / 2;
1975
- padding-inline-start:var(--t-spacing-1);
1976
- font-size:var(--tds-radio-font-size);
1977
- font-weight:var(--t-font-weight-normal);
1978
- color:var(--tds-radio-label-color);
1979
- cursor:var(--tds-radio-cursor);
1980
- }
1981
-
1982
- .tds-radio input[type="radio"]{
1983
- position:relative;
1984
- width:1em;
1985
- height:1em;
1986
- margin:calc((1lh - 1em) / 2) 0 0;
1987
- font-size:var(--tds-radio-font-size);
1988
- line-height:inherit;
1989
- -webkit-appearance:none;
1990
- -moz-appearance:none;
1991
- appearance:none;
1992
- cursor:var(--tds-radio-cursor);
1993
- background-color:var(--tds-radio-input-background-color);
1994
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1995
- border-radius:var(--tds-radio-input-border-radius);
1996
- transition-timing-function:var(--t-ease-in-out);
1997
- transition-duration:var(--t-duration-200);
1998
- transition-property:var(--tds-radio-transition-property);
1999
- }
2000
-
2001
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2002
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2003
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2004
- }
2005
-
2006
- :is(.tds-radio input[type="radio"]):focus-visible{
2007
- outline:var(--t-focus-ring-outline);
2008
- outline-offset:var(--t-focus-ring-offset);
2009
- }
2010
-
2011
- :is(.tds-radio input[type="radio"]):disabled{
2012
- pointer-events:none;
2013
- }
2014
-
2015
- @media (prefers-reduced-motion: reduce){
1848
+ .tds-modal-frame--xl{
1849
+ --tds-modal-width:1000px;
1850
+ }
2016
1851
 
2017
- .tds-radio input[type="radio"]{
2018
- --tds-radio-transition-property:none;
1852
+ @keyframes tds-modal-zoom{
1853
+ from{
1854
+ opacity:0;
1855
+ scale:.96;
2019
1856
  }
2020
- }
1857
+ }
2021
1858
 
2022
- .tds-radio:has(input:checked){
2023
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2024
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2025
- --tds-radio-input-border-width:4px;
1859
+ @media (prefers-reduced-motion: reduce){
1860
+ .tds-modal-overlay[data-entering],
1861
+ .tds-modal-overlay[data-exiting],
1862
+ .tds-modal-frame[data-entering],
1863
+ .tds-modal-frame[data-exiting]{
1864
+ animation:none;
2026
1865
  }
1866
+ }
2027
1867
 
2028
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2029
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2030
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2031
- }
1868
+ .tds-modal{
1869
+ display:flex;
1870
+ flex-direction:column;
1871
+ width:100%;
1872
+ padding-block:var(--t-spacing-3);
1873
+ padding-inline:0;
1874
+ background:var(--t-surface-color-card);
2032
1875
 
2033
- .tds-radio:has(input:user-invalid){
2034
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1876
+ border:0;
1877
+ border-radius:var(--t-border-radius-lg);
1878
+ box-shadow:0 4px 18px 0 #0003;
1879
+ }
1880
+
1881
+ .tds-modal:focus{
1882
+ outline:none;
2035
1883
  }
2036
1884
 
2037
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2038
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2039
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2040
- }
1885
+ .tds-modal-header{
1886
+ display:grid;
1887
+ grid-template-columns:1fr auto;
1888
+ -moz-column-gap:var(--t-spacing-2);
1889
+ column-gap:var(--t-spacing-2);
1890
+ padding-block:0;
1891
+ padding-inline:var(--t-spacing-4);
1892
+ }
2041
1893
 
2042
- .tds-radio:has(input:disabled){
2043
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2044
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1894
+ .tds-modal-title{
1895
+ grid-row:1;
1896
+ grid-column:1;
1897
+ margin:0;
1898
+ font-size:var(--t-font-size-2xl);
1899
+ font-weight:var(--t-font-weight-medium);
1900
+ line-height:140%;
1901
+ color:var(--t-text-color-headline);
1902
+ }
2045
1903
 
2046
- --tds-radio-label-color:var(--t-form-color-disabled);
2047
- --tds-radio-description-color:var(--t-form-color-disabled);
2048
- --tds-radio-cursor:not-allowed;
2049
- }
1904
+ .tds-modal-subtitle{
1905
+ grid-row:2;
1906
+ grid-column:1;
1907
+ margin:0;
1908
+ font-size:var(--t-font-size-md);
1909
+ font-weight:var(--t-font-weight-medium);
1910
+ line-height:140%;
1911
+ color:var(--t-text-color-secondary);
1912
+ }
2050
1913
 
2051
- .tds-radio:has(input:disabled) input:checked{
2052
- --tds-radio-input-background-color:var(--t-form-background-color);
2053
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2054
- }
1914
+ .tds-modal-close{
1915
+ grid-row:1;
1916
+ grid-column:2;
1917
+ align-self:center;
1918
+ color:var(--t-icon-color-dim);
1919
+ }
2055
1920
 
2056
- .tds-radio-description{
1921
+ .tds-modal-body{
1922
+ padding-block:var(--t-spacing-3);
1923
+ padding-inline:var(--t-spacing-4);
1924
+ }
1925
+
1926
+ .tds-modal-body--full-width{
1927
+ padding-inline:0;
1928
+ }
1929
+
1930
+ .tds-modal-footer{
2057
1931
  display:flex;
2058
- grid-area:2 / 2;
2059
- gap:var(--t-spacing-half);
2060
- align-items:flex-start;
2061
- padding-inline-start:var(--t-spacing-1);
2062
- margin:0;
2063
- font-size:var(--tds-radio-description-font-size);
2064
- line-height:var(--tds-radio-description-line-height);
2065
- color:var(--tds-radio-description-color);
2066
- cursor:text;
1932
+ gap:var(--t-spacing-2);
1933
+ align-items:center;
1934
+ justify-content:flex-end;
1935
+ padding-block-start:var(--t-spacing-3);
1936
+ padding-inline:var(--t-spacing-4);
1937
+ border-top:1px solid var(--t-border-color);
2067
1938
  }
2068
1939
 
2069
- .tds-radio--sm{
2070
- --tds-radio-line-height:1.35;
2071
- --tds-radio-input-size:var(--t-element-size-sm);
2072
- --tds-radio-font-size:var(--t-font-size-sm);
2073
- --tds-radio-description-font-size:var(--t-font-size-xs);
2074
- --tds-radio-description-line-height:1.3;
1940
+ .tds-modal-footer > [slot="start"]{
1941
+ margin-inline-end:auto;
2075
1942
  }
2076
1943
 
2077
1944
  .tds-radio-group{
@@ -2262,6 +2129,139 @@ a.tds-dropdown-item:is(:hover, :active){
2262
2129
  }
2263
2130
  }
2264
2131
 
2132
+ .tds-radio{
2133
+ --tds-radio-font-size:var(--t-font-size-md);
2134
+ --tds-radio-cursor:pointer;
2135
+ --tds-radio-line-height:1.4;
2136
+ --tds-radio-transition-property:border-width;
2137
+
2138
+ --tds-radio-input-size:var(--t-element-size-md);
2139
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2140
+ --tds-radio-input-border-color:var(--t-form-border-color);
2141
+ --tds-radio-input-border-width:var(--t-form-border-width);
2142
+ --tds-radio-input-background-color:var(--t-form-background-color);
2143
+
2144
+ --tds-radio-label-color:var(--t-form-color);
2145
+
2146
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2147
+ --tds-radio-description-line-height:1.35;
2148
+ --tds-radio-description-color:var(--t-text-color-secondary);
2149
+
2150
+ position:relative;
2151
+ display:inline-grid;
2152
+ grid-template-columns:auto;
2153
+ grid-auto-columns:1fr;
2154
+ gap:var(--t-spacing-fourth) 0;
2155
+ line-height:var(--tds-radio-line-height);
2156
+ -webkit-user-select:none;
2157
+ -moz-user-select:none;
2158
+ user-select:none;
2159
+ }
2160
+
2161
+ .tds-radio label{
2162
+ grid-area:1 / 2;
2163
+ padding-inline-start:var(--t-spacing-1);
2164
+ font-size:var(--tds-radio-font-size);
2165
+ font-weight:var(--t-font-weight-normal);
2166
+ color:var(--tds-radio-label-color);
2167
+ cursor:var(--tds-radio-cursor);
2168
+ }
2169
+
2170
+ .tds-radio input[type="radio"]{
2171
+ position:relative;
2172
+ width:1em;
2173
+ height:1em;
2174
+ margin:calc((1lh - 1em) / 2) 0 0;
2175
+ font-size:var(--tds-radio-font-size);
2176
+ line-height:inherit;
2177
+ -webkit-appearance:none;
2178
+ -moz-appearance:none;
2179
+ appearance:none;
2180
+ cursor:var(--tds-radio-cursor);
2181
+ background-color:var(--tds-radio-input-background-color);
2182
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2183
+ border-radius:var(--tds-radio-input-border-radius);
2184
+ transition-timing-function:var(--t-ease-in-out);
2185
+ transition-duration:var(--t-duration-200);
2186
+ transition-property:var(--tds-radio-transition-property);
2187
+ }
2188
+
2189
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2190
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2191
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2192
+ }
2193
+
2194
+ :is(.tds-radio input[type="radio"]):focus-visible{
2195
+ outline:var(--t-focus-ring-outline);
2196
+ outline-offset:var(--t-focus-ring-offset);
2197
+ }
2198
+
2199
+ :is(.tds-radio input[type="radio"]):disabled{
2200
+ pointer-events:none;
2201
+ }
2202
+
2203
+ @media (prefers-reduced-motion: reduce){
2204
+
2205
+ .tds-radio input[type="radio"]{
2206
+ --tds-radio-transition-property:none;
2207
+ }
2208
+ }
2209
+
2210
+ .tds-radio:has(input:checked){
2211
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2212
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2213
+ --tds-radio-input-border-width:4px;
2214
+ }
2215
+
2216
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2217
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2218
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2219
+ }
2220
+
2221
+ .tds-radio:has(input:user-invalid){
2222
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2223
+ }
2224
+
2225
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2226
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2227
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2228
+ }
2229
+
2230
+ .tds-radio:has(input:disabled){
2231
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2232
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2233
+
2234
+ --tds-radio-label-color:var(--t-form-color-disabled);
2235
+ --tds-radio-description-color:var(--t-form-color-disabled);
2236
+ --tds-radio-cursor:not-allowed;
2237
+ }
2238
+
2239
+ .tds-radio:has(input:disabled) input:checked{
2240
+ --tds-radio-input-background-color:var(--t-form-background-color);
2241
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2242
+ }
2243
+
2244
+ .tds-radio-description{
2245
+ display:flex;
2246
+ grid-area:2 / 2;
2247
+ gap:var(--t-spacing-half);
2248
+ align-items:flex-start;
2249
+ padding-inline-start:var(--t-spacing-1);
2250
+ margin:0;
2251
+ font-size:var(--tds-radio-description-font-size);
2252
+ line-height:var(--tds-radio-description-line-height);
2253
+ color:var(--tds-radio-description-color);
2254
+ cursor:text;
2255
+ }
2256
+
2257
+ .tds-radio--sm{
2258
+ --tds-radio-line-height:1.35;
2259
+ --tds-radio-input-size:var(--t-element-size-sm);
2260
+ --tds-radio-font-size:var(--t-font-size-sm);
2261
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2262
+ --tds-radio-description-line-height:1.3;
2263
+ }
2264
+
2265
2265
  .tds-search-input-control{
2266
2266
  --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2267
2267
  --tds-search-input-outline-offset:0;