@planningcenter/tapestry 4.2.1-rc.0 → 4.2.1-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +629 -629
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +629 -629
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1039,615 +1039,554 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1039
1039
  flex-direction:column;
1040
1040
  }
1041
1041
 
1042
- @layer t-critical{
1043
- tds-page-header:not(.hydrated){
1044
- display:none;
1045
- }
1042
+ .tds-button-group{
1043
+ display:inline-flex;
1046
1044
  }
1045
+ .tds-button-group > .tds-btn{
1046
+ --tds-button-group-item-z-index:1;
1047
1047
 
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;
1066
-
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);
1048
+ position:relative;
1049
+ z-index:var(--tds-button-group-item-z-index);
1050
+ border-radius:0;
1051
+ }
1052
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1053
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1054
+ }
1055
+ :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{
1056
+ position:absolute;
1057
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1058
+ width:var(--tds-btn-border-width);
1059
+ pointer-events:none;
1060
+ content:"";
1061
+ background-color:var(--t-border-color-white);
1062
+ }
1063
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1064
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1065
+ }
1066
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1067
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1068
+ }
1069
+ :is(.tds-button-group > .tds-btn):hover{
1070
+ --tds-button-group-item-z-index:2;
1071
+ }
1072
+ :is(.tds-button-group > .tds-btn):focus-visible{
1073
+ --tds-button-group-item-z-index:5;
1074
+ }
1075
+ .tds-button-group > .tds-btn:first-child{
1076
+ border-start-start-radius:var(--tds-btn-border-radius);
1077
+ border-end-start-radius:var(--tds-btn-border-radius);
1078
+ }
1079
+ .tds-button-group > .tds-btn:last-child{
1080
+ border-start-end-radius:var(--tds-btn-border-radius);
1081
+ border-end-end-radius:var(--tds-btn-border-radius);
1082
+ }
1069
1083
 
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);
1084
+ .tds-checkbox-group{
1085
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1086
+ --tds-checkbox-group-line-height:1.4;
1087
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1073
1088
 
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);
1089
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1090
+ --tds-checkbox-group-description-line-height:1.35;
1091
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1092
+ --tds-checkbox-group-description-invalid-icon-display:none;
1093
+ display:flex;
1094
+ flex-direction:column;
1095
+ gap:0;
1096
+ padding:0;
1097
+ margin:0;
1076
1098
 
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);
1099
+ font-size:var(--tds-checkbox-group-font-size);
1100
+ line-height:var(--tds-checkbox-group-line-height);
1101
+ border:0;
1102
+ }
1080
1103
 
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);
1104
+ .tds-checkbox-group legend{
1105
+ float:left;
1106
+ padding:0;
1107
+ margin:0;
1086
1108
  }
1087
1109
 
1088
- .tds-page-header--profile{
1089
- --tds-page-header-padding-y:20px;
1110
+ .tds-checkbox-group[aria-invalid="true"]{
1111
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1112
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1090
1113
  }
1091
1114
 
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));
1115
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1116
+ margin-left:.25ch;
1117
+ color:var(--t-text-color-status-error);
1118
+ content:"*";
1096
1119
  }
1097
- }
1098
1120
 
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);
1121
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1122
+ content:none;
1117
1123
  }
1118
- }
1119
- }
1120
1124
 
1121
- .tds-page-header{
1125
+ .tds-checkbox-group-fields{
1122
1126
  display:flex;
1123
1127
  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
+ gap:var(--tds-checkbox-group-gap);
1129
+ align-items:flex-start;
1130
+ margin-top:var(--t-spacing-1);
1128
1131
  }
1129
1132
 
1130
- .tds-page-header:not(.has-nav){
1131
- padding-bottom:var(--tds-page-header-padding-y);
1132
- }
1133
+ .tds-checkbox-group-description{
1134
+ display:flex;
1135
+ gap:var(--t-spacing-half);
1136
+ align-items:flex-start;
1137
+ margin:var(--t-spacing-fourth) 0 0;
1138
+ font-size:var(--tds-checkbox-group-description-font-size);
1139
+ line-height:var(--tds-checkbox-group-description-line-height);
1140
+ color:var(--tds-checkbox-group-description-color);
1141
+ cursor:text;
1142
+ }
1133
1143
 
1134
- .tds-page-header.inactive{
1135
- background:var(--tds-page-header-background-color-inactive);
1144
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1145
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1146
+ flex-shrink:0;
1147
+ margin-top:calc(.5lh - .5em);
1148
+ line-height:var(--tds-checkbox-group-description-line-height);
1136
1149
  }
1137
1150
 
1138
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
- width:100%;
1140
- }
1151
+ .tds-checkbox-group--sm{
1152
+ --tds-checkbox-group-line-height:1.35;
1153
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1154
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1155
+ --tds-checkbox-group-description-line-height:1.3;
1156
+ }
1141
1157
 
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;
1149
- }
1158
+ .tds-checkbox{
1159
+ --tds-checkbox-font-size:var(--t-font-size-md);
1160
+ --tds-checkbox-cursor:pointer;
1161
+ --tds-checkbox-line-height:1.4;
1162
+ --tds-checkbox-transition-property:background-color, border-color;
1150
1163
 
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);
1159
- }
1164
+ --tds-checkbox-input-size:var(--t-element-size-md);
1165
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1166
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1167
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1160
1168
 
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;
1180
- }
1169
+ --tds-checkbox-input-icon:none;
1170
+ --tds-checkbox-input-icon-visibility:hidden;
1171
+ --tds-checkbox-input-icon-opacity:0;
1172
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1181
1173
 
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);
1187
- }
1174
+ --tds-checkbox-label-color:var(--t-form-color);
1188
1175
 
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
- }
1176
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1177
+ --tds-checkbox-description-line-height:1.35;
1178
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1179
+ --tds-checkbox-description-invalid-icon-display:none;
1195
1180
 
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
- }
1181
+ position:relative;
1182
+ display:inline-grid;
1183
+ grid-template-columns:auto;
1184
+ grid-auto-columns:1fr;
1185
+ gap:var(--t-spacing-fourth) 0;
1186
+ line-height:var(--tds-checkbox-line-height);
1187
+ -webkit-user-select:none;
1188
+ -moz-user-select:none;
1189
+ user-select:none;
1190
+ }
1201
1191
 
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
- }
1192
+ .tds-checkbox label{
1193
+ grid-area:1 / 2;
1194
+ padding-inline-start:var(--t-spacing-1);
1195
+ font-size:var(--tds-checkbox-font-size);
1196
+ font-weight:var(--t-font-weight-normal);
1197
+ color:var(--tds-checkbox-label-color);
1198
+ cursor:var(--tds-checkbox-cursor);
1199
+ }
1209
1200
 
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
- }
1201
+ .tds-checkbox tds-indeterminate{
1202
+ display:flex;
1203
+ }
1220
1204
 
1221
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
- position:relative;
1205
+ .tds-checkbox input[type="checkbox"]{
1206
+ position:relative;
1207
+ width:1em;
1208
+ height:1em;
1209
+ margin:calc((1lh - 1em) / 2) 0 0;
1210
+ font-size:var(--tds-checkbox-font-size);
1211
+ line-height:inherit;
1212
+ -webkit-appearance:none;
1213
+ -moz-appearance:none;
1214
+ appearance:none;
1215
+ cursor:var(--tds-checkbox-cursor);
1216
+ background-color:var(--tds-checkbox-input-background-color);
1217
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1218
+ border-radius:var(--tds-checkbox-input-border-radius);
1219
+ transition-timing-function:var(--t-ease-in-out);
1220
+ transition-duration:var(--t-duration-200);
1221
+ transition-property:var(--tds-checkbox-transition-property);
1222
+ }
1223
+
1224
+ :is(.tds-checkbox input[type="checkbox"])::before{
1225
+ position:absolute;
1226
+ top:50%;
1227
+ left:50%;
1228
+ visibility:var(--tds-checkbox-input-icon-visibility);
1229
+ width:100%;
1230
+ height:100%;
1231
+ content:"";
1232
+ background-color:var(--tds-checkbox-input-icon-fill);
1233
+ border-radius:var(--tds-checkbox-input-border-radius);
1234
+ opacity:var(--tds-checkbox-input-icon-opacity);
1235
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1236
+ mask-image:var(--tds-checkbox-input-icon);
1237
+ -webkit-mask-repeat:no-repeat;
1238
+ mask-repeat:no-repeat;
1239
+ -webkit-mask-size:contain;
1240
+ mask-size:contain;
1241
+ transform:translate(-50%, -50%);
1223
1242
  }
1224
1243
 
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
- }
1244
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1245
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1246
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1247
+ }
1229
1248
 
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
- }
1249
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1250
+ outline:var(--t-focus-ring-outline);
1251
+ outline-offset:var(--t-focus-ring-offset);
1252
+ }
1240
1253
 
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
- }
1254
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1255
+ pointer-events:none;
1256
+ }
1246
1257
 
1247
- .tds-page-header__title-bar{
1248
- display:flex;
1249
- flex-direction:column;
1250
- gap:var(--t-spacing-2) var(--t-spacing-1);
1251
- align-items:flex-start;
1252
- justify-content:space-between;
1253
- padding:0 var(--tds-page-header-padding-x);
1254
- }
1258
+ @media (prefers-reduced-motion: reduce){
1255
1259
 
1256
- .tds-page-header--profile > .tds-page-header__title-bar{
1257
- align-items:center;
1260
+ .tds-checkbox input[type="checkbox"]{
1261
+ --tds-checkbox-transition-property:none;
1258
1262
  }
1263
+ }
1259
1264
 
1260
- .tds-page-header__primary{
1261
- width:100%;
1262
- }
1265
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1266
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1267
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1268
+ --tds-checkbox-input-icon-visibility:visible;
1269
+ --tds-checkbox-input-icon-opacity:1;
1270
+ }
1263
1271
 
1264
- .tds-page-header__primary h1{
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;
1272
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1273
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1274
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1275
+ }
1276
+
1277
+ .tds-checkbox:has(input:checked){
1278
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1271
1279
  }
1272
1280
 
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%;
1281
+ .tds-checkbox:has(input:indeterminate){
1282
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1279
1283
  }
1280
1284
 
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;
1285
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1286
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1287
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1288
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1286
1289
  }
1287
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
- width:auto;
1290
+
1291
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1292
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1293
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1289
1294
  }
1290
1295
 
1291
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
- justify-content:flex-end;
1296
+ :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{
1297
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1298
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1293
1299
  }
1294
- }
1295
1300
 
1296
- .tds-page-header-phone,
1297
- .tds-page-header-email{
1298
- color:var(--tds-page-header-color);
1299
- white-space:nowrap;
1301
+ :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){
1302
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1303
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1304
+ }
1305
+
1306
+ .tds-checkbox:has(input:required) label::after{
1307
+ margin-left:.25ch;
1308
+ color:var(--t-text-color-status-error);
1309
+ content:"*";
1310
+ }
1311
+
1312
+ .tds-checkbox:has(input:disabled){
1313
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1314
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1315
+
1316
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1317
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1318
+ --tds-checkbox-cursor:not-allowed;
1319
+ }
1320
+
1321
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1322
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1323
+ }
1324
+
1325
+ .tds-checkbox-description{
1326
+ display:flex;
1327
+ grid-area:2 / 2;
1328
+ gap:var(--t-spacing-half);
1329
+ align-items:flex-start;
1330
+ padding-inline-start:var(--t-spacing-1);
1331
+ margin:0;
1332
+ font-size:var(--tds-checkbox-description-font-size);
1333
+ line-height:var(--tds-checkbox-description-line-height);
1334
+ color:var(--tds-checkbox-description-color);
1335
+ cursor:text;
1300
1336
  }
1301
- .tds-page-header-email{
1302
- max-width:100%;
1303
- overflow:hidden;
1304
- text-overflow:ellipsis;
1337
+
1338
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1339
+ display:var(--tds-checkbox-description-invalid-icon-display);
1340
+ flex-shrink:0;
1341
+ margin-top:calc(.5lh - .5em);
1342
+ line-height:var(--tds-checkbox-description-line-height);
1343
+ }
1344
+
1345
+ .tds-checkbox--sm{
1346
+ --tds-checkbox-line-height:1.35;
1347
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1348
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1349
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1350
+ --tds-checkbox-description-line-height:1.3;
1305
1351
  }
1306
1352
 
1307
- @keyframes indicator-pulse{
1308
- 0%{
1309
- opacity:.3;
1310
- transform:scale(.9);
1353
+
1354
+ :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{
1355
+ -webkit-appearance:none;
1356
+ appearance:none;
1357
+ }
1358
+
1359
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1360
+ inline-size:1em;
1361
+ block-size:2em;
1362
+ }
1363
+ @supports (field-sizing: content){
1364
+ .tds-input--auto-width{
1365
+ inline-size:-moz-fit-content;
1366
+ inline-size:fit-content;
1367
+ min-inline-size:min(100%, 122px);
1311
1368
  }
1312
1369
 
1313
- 100%{
1314
- opacity:0;
1315
- transform:scale(1.75);
1370
+ .tds-input--auto-width input{
1371
+ field-sizing:content;
1372
+ inline-size:auto;
1316
1373
  }
1317
1374
  }
1318
1375
 
1319
- .tds-button-group{
1320
- display:inline-flex;
1321
- }
1322
- .tds-button-group > .tds-btn{
1323
- --tds-button-group-item-z-index:1;
1376
+ .tds-radio-group{
1377
+ --tds-radio-group-font-size:var(--t-font-size-md);
1378
+ --tds-radio-group-line-height:1.4;
1379
+ --tds-radio-group-gap:var(--t-spacing-1);
1324
1380
 
1325
- position:relative;
1326
- z-index:var(--tds-button-group-item-z-index);
1327
- border-radius:0;
1328
- }
1329
- :is(.tds-button-group > .tds-btn):not(:first-child){
1330
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1331
- }
1332
- :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{
1333
- position:absolute;
1334
- inset-block:calc(var(--tds-btn-border-width) * -1);
1335
- width:var(--tds-btn-border-width);
1336
- pointer-events:none;
1337
- content:"";
1338
- background-color:var(--t-border-color-white);
1339
- }
1340
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1341
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1342
- }
1343
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1344
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1345
- }
1346
- :is(.tds-button-group > .tds-btn):hover{
1347
- --tds-button-group-item-z-index:2;
1348
- }
1349
- :is(.tds-button-group > .tds-btn):focus-visible{
1350
- --tds-button-group-item-z-index:5;
1351
- }
1352
- .tds-button-group > .tds-btn:first-child{
1353
- border-start-start-radius:var(--tds-btn-border-radius);
1354
- border-end-start-radius:var(--tds-btn-border-radius);
1355
- }
1356
- .tds-button-group > .tds-btn:last-child{
1357
- border-start-end-radius:var(--tds-btn-border-radius);
1358
- border-end-end-radius:var(--tds-btn-border-radius);
1359
- }
1360
-
1361
- .tds-checkbox-group{
1362
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1363
- --tds-checkbox-group-line-height:1.4;
1364
- --tds-checkbox-group-gap:var(--t-spacing-1);
1365
-
1366
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1367
- --tds-checkbox-group-description-line-height:1.35;
1368
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1369
- --tds-checkbox-group-description-invalid-icon-display:none;
1381
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1382
+ --tds-radio-group-description-line-height:1.35;
1383
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1384
+ --tds-radio-group-description-invalid-icon-display:none;
1370
1385
  display:flex;
1371
1386
  flex-direction:column;
1372
1387
  gap:0;
1373
1388
  padding:0;
1374
1389
  margin:0;
1375
1390
 
1376
- font-size:var(--tds-checkbox-group-font-size);
1377
- line-height:var(--tds-checkbox-group-line-height);
1391
+ font-size:var(--tds-radio-group-font-size);
1392
+ line-height:var(--tds-radio-group-line-height);
1378
1393
  border:0;
1379
1394
  }
1380
1395
 
1381
- .tds-checkbox-group legend{
1396
+ .tds-radio-group legend{
1382
1397
  float:left;
1383
1398
  padding:0;
1384
1399
  margin:0;
1385
1400
  }
1386
1401
 
1387
- .tds-checkbox-group[aria-invalid="true"]{
1388
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1389
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1402
+ .tds-radio-group[aria-invalid="true"]{
1403
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1404
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1390
1405
  }
1391
1406
 
1392
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1407
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1408
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1409
+ }
1410
+
1411
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1412
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1413
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1414
+ }
1415
+
1416
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1417
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1418
+ }
1419
+
1420
+ .tds-radio-group:has(input:required) legend::after{
1393
1421
  margin-left:.25ch;
1394
1422
  color:var(--t-text-color-status-error);
1395
1423
  content:"*";
1396
1424
  }
1397
1425
 
1398
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1399
- content:none;
1400
- }
1401
-
1402
- .tds-checkbox-group-fields{
1426
+ .tds-radio-group-fields{
1403
1427
  display:flex;
1404
1428
  flex-direction:column;
1405
- gap:var(--tds-checkbox-group-gap);
1429
+ gap:var(--tds-radio-group-gap);
1406
1430
  align-items:flex-start;
1407
1431
  margin-top:var(--t-spacing-1);
1408
1432
  }
1409
1433
 
1410
- .tds-checkbox-group-description{
1434
+ .tds-radio-group-description{
1411
1435
  display:flex;
1412
1436
  gap:var(--t-spacing-half);
1413
1437
  align-items:flex-start;
1414
1438
  margin:var(--t-spacing-fourth) 0 0;
1415
- font-size:var(--tds-checkbox-group-description-font-size);
1416
- line-height:var(--tds-checkbox-group-description-line-height);
1417
- color:var(--tds-checkbox-group-description-color);
1439
+ font-size:var(--tds-radio-group-description-font-size);
1440
+ line-height:var(--tds-radio-group-description-line-height);
1441
+ color:var(--tds-radio-group-description-color);
1418
1442
  cursor:text;
1419
1443
  }
1420
1444
 
1421
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1422
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1445
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1446
+ display:var(--tds-radio-group-description-invalid-icon-display);
1423
1447
  flex-shrink:0;
1424
1448
  margin-top:calc(.5lh - .5em);
1425
- line-height:var(--tds-checkbox-group-description-line-height);
1449
+ line-height:var(--tds-radio-group-description-line-height);
1426
1450
  }
1427
1451
 
1428
- .tds-checkbox-group--sm{
1429
- --tds-checkbox-group-line-height:1.35;
1430
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1431
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1432
- --tds-checkbox-group-description-line-height:1.3;
1452
+ .tds-radio-group--sm{
1453
+ --tds-radio-group-line-height:1.35;
1454
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1455
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1456
+ --tds-radio-group-description-line-height:1.3;
1433
1457
  }
1434
1458
 
1435
- .tds-checkbox{
1436
- --tds-checkbox-font-size:var(--t-font-size-md);
1437
- --tds-checkbox-cursor:pointer;
1438
- --tds-checkbox-line-height:1.4;
1439
- --tds-checkbox-transition-property:background-color, border-color;
1440
-
1441
- --tds-checkbox-input-size:var(--t-element-size-md);
1442
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1443
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1444
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1459
+ .tds-radio{
1460
+ --tds-radio-font-size:var(--t-font-size-md);
1461
+ --tds-radio-cursor:pointer;
1462
+ --tds-radio-line-height:1.4;
1463
+ --tds-radio-transition-property:border-width;
1445
1464
 
1446
- --tds-checkbox-input-icon:none;
1447
- --tds-checkbox-input-icon-visibility:hidden;
1448
- --tds-checkbox-input-icon-opacity:0;
1449
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1465
+ --tds-radio-input-size:var(--t-element-size-md);
1466
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1467
+ --tds-radio-input-border-color:var(--t-form-border-color);
1468
+ --tds-radio-input-border-width:var(--t-form-border-width);
1469
+ --tds-radio-input-background-color:var(--t-form-background-color);
1450
1470
 
1451
- --tds-checkbox-label-color:var(--t-form-color);
1471
+ --tds-radio-label-color:var(--t-form-color);
1452
1472
 
1453
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1454
- --tds-checkbox-description-line-height:1.35;
1455
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1456
- --tds-checkbox-description-invalid-icon-display:none;
1473
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1474
+ --tds-radio-description-line-height:1.35;
1475
+ --tds-radio-description-color:var(--t-text-color-secondary);
1457
1476
 
1458
1477
  position:relative;
1459
1478
  display:inline-grid;
1460
1479
  grid-template-columns:auto;
1461
1480
  grid-auto-columns:1fr;
1462
1481
  gap:var(--t-spacing-fourth) 0;
1463
- line-height:var(--tds-checkbox-line-height);
1482
+ line-height:var(--tds-radio-line-height);
1464
1483
  -webkit-user-select:none;
1465
1484
  -moz-user-select:none;
1466
1485
  user-select:none;
1467
1486
  }
1468
1487
 
1469
- .tds-checkbox label{
1488
+ .tds-radio label{
1470
1489
  grid-area:1 / 2;
1471
1490
  padding-inline-start:var(--t-spacing-1);
1472
- font-size:var(--tds-checkbox-font-size);
1491
+ font-size:var(--tds-radio-font-size);
1473
1492
  font-weight:var(--t-font-weight-normal);
1474
- color:var(--tds-checkbox-label-color);
1475
- cursor:var(--tds-checkbox-cursor);
1476
- }
1477
-
1478
- .tds-checkbox tds-indeterminate{
1479
- display:flex;
1493
+ color:var(--tds-radio-label-color);
1494
+ cursor:var(--tds-radio-cursor);
1480
1495
  }
1481
1496
 
1482
- .tds-checkbox input[type="checkbox"]{
1497
+ .tds-radio input[type="radio"]{
1483
1498
  position:relative;
1484
1499
  width:1em;
1485
1500
  height:1em;
1486
1501
  margin:calc((1lh - 1em) / 2) 0 0;
1487
- font-size:var(--tds-checkbox-font-size);
1502
+ font-size:var(--tds-radio-font-size);
1488
1503
  line-height:inherit;
1489
1504
  -webkit-appearance:none;
1490
1505
  -moz-appearance:none;
1491
1506
  appearance:none;
1492
- cursor:var(--tds-checkbox-cursor);
1493
- background-color:var(--tds-checkbox-input-background-color);
1494
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1495
- border-radius:var(--tds-checkbox-input-border-radius);
1507
+ cursor:var(--tds-radio-cursor);
1508
+ background-color:var(--tds-radio-input-background-color);
1509
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1510
+ border-radius:var(--tds-radio-input-border-radius);
1496
1511
  transition-timing-function:var(--t-ease-in-out);
1497
1512
  transition-duration:var(--t-duration-200);
1498
- transition-property:var(--tds-checkbox-transition-property);
1513
+ transition-property:var(--tds-radio-transition-property);
1499
1514
  }
1500
1515
 
1501
- :is(.tds-checkbox input[type="checkbox"])::before{
1502
- position:absolute;
1503
- top:50%;
1504
- left:50%;
1505
- visibility:var(--tds-checkbox-input-icon-visibility);
1506
- width:100%;
1507
- height:100%;
1508
- content:"";
1509
- background-color:var(--tds-checkbox-input-icon-fill);
1510
- border-radius:var(--tds-checkbox-input-border-radius);
1511
- opacity:var(--tds-checkbox-input-icon-opacity);
1512
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1513
- mask-image:var(--tds-checkbox-input-icon);
1514
- -webkit-mask-repeat:no-repeat;
1515
- mask-repeat:no-repeat;
1516
- -webkit-mask-size:contain;
1517
- mask-size:contain;
1518
- transform:translate(-50%, -50%);
1519
- }
1520
-
1521
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1522
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1523
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1516
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1517
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1518
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1524
1519
  }
1525
1520
 
1526
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1521
+ :is(.tds-radio input[type="radio"]):focus-visible{
1527
1522
  outline:var(--t-focus-ring-outline);
1528
1523
  outline-offset:var(--t-focus-ring-offset);
1529
1524
  }
1530
1525
 
1531
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1526
+ :is(.tds-radio input[type="radio"]):disabled{
1532
1527
  pointer-events:none;
1533
1528
  }
1534
1529
 
1535
1530
  @media (prefers-reduced-motion: reduce){
1536
1531
 
1537
- .tds-checkbox input[type="checkbox"]{
1538
- --tds-checkbox-transition-property:none;
1532
+ .tds-radio input[type="radio"]{
1533
+ --tds-radio-transition-property:none;
1539
1534
  }
1540
1535
  }
1541
1536
 
1542
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1543
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1544
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1545
- --tds-checkbox-input-icon-visibility:visible;
1546
- --tds-checkbox-input-icon-opacity:1;
1537
+ .tds-radio:has(input:checked){
1538
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1539
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1540
+ --tds-radio-input-border-width:4px;
1547
1541
  }
1548
1542
 
1549
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1550
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1551
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1543
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1544
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1545
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1552
1546
  }
1553
1547
 
1554
- .tds-checkbox:has(input:checked){
1555
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1556
- }
1557
-
1558
- .tds-checkbox:has(input:indeterminate){
1559
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1560
- }
1561
-
1562
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1563
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1564
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1565
- --tds-checkbox-description-invalid-icon-display:inline-block;
1548
+ .tds-radio:has(input:user-invalid){
1549
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1566
1550
  }
1567
1551
 
1568
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1569
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1570
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1552
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1553
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1554
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1571
1555
  }
1572
1556
 
1573
- :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{
1574
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1575
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1576
- }
1557
+ .tds-radio:has(input:disabled){
1558
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1559
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1577
1560
 
1578
- :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){
1579
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1580
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1581
- }
1561
+ --tds-radio-label-color:var(--t-form-color-disabled);
1562
+ --tds-radio-description-color:var(--t-form-color-disabled);
1563
+ --tds-radio-cursor:not-allowed;
1564
+ }
1582
1565
 
1583
- .tds-checkbox:has(input:required) label::after{
1584
- margin-left:.25ch;
1585
- color:var(--t-text-color-status-error);
1586
- content:"*";
1566
+ .tds-radio:has(input:disabled) input:checked{
1567
+ --tds-radio-input-background-color:var(--t-form-background-color);
1568
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1587
1569
  }
1588
1570
 
1589
- .tds-checkbox:has(input:disabled){
1590
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1591
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1592
-
1593
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1594
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1595
- --tds-checkbox-cursor:not-allowed;
1596
- }
1597
-
1598
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1599
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1600
- }
1601
-
1602
- .tds-checkbox-description{
1571
+ .tds-radio-description{
1603
1572
  display:flex;
1604
1573
  grid-area:2 / 2;
1605
1574
  gap:var(--t-spacing-half);
1606
1575
  align-items:flex-start;
1607
1576
  padding-inline-start:var(--t-spacing-1);
1608
1577
  margin:0;
1609
- font-size:var(--tds-checkbox-description-font-size);
1610
- line-height:var(--tds-checkbox-description-line-height);
1611
- color:var(--tds-checkbox-description-color);
1578
+ font-size:var(--tds-radio-description-font-size);
1579
+ line-height:var(--tds-radio-description-line-height);
1580
+ color:var(--tds-radio-description-color);
1612
1581
  cursor:text;
1613
1582
  }
1614
1583
 
1615
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1616
- display:var(--tds-checkbox-description-invalid-icon-display);
1617
- flex-shrink:0;
1618
- margin-top:calc(.5lh - .5em);
1619
- line-height:var(--tds-checkbox-description-line-height);
1620
- }
1621
-
1622
- .tds-checkbox--sm{
1623
- --tds-checkbox-line-height:1.35;
1624
- --tds-checkbox-input-size:var(--t-element-size-sm);
1625
- --tds-checkbox-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-description-line-height:1.3;
1628
- }
1629
-
1630
-
1631
- :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{
1632
- -webkit-appearance:none;
1633
- appearance:none;
1634
- }
1635
-
1636
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1637
- inline-size:1em;
1638
- block-size:2em;
1639
- }
1640
- @supports (field-sizing: content){
1641
- .tds-input--auto-width{
1642
- inline-size:-moz-fit-content;
1643
- inline-size:fit-content;
1644
- min-inline-size:min(100%, 122px);
1645
- }
1646
-
1647
- .tds-input--auto-width input{
1648
- field-sizing:content;
1649
- inline-size:auto;
1650
- }
1584
+ .tds-radio--sm{
1585
+ --tds-radio-line-height:1.35;
1586
+ --tds-radio-input-size:var(--t-element-size-sm);
1587
+ --tds-radio-font-size:var(--t-font-size-sm);
1588
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1589
+ --tds-radio-description-line-height:1.3;
1651
1590
  }
1652
1591
 
1653
1592
  .tds-input:has(textarea){
@@ -1755,89 +1694,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1755
1694
  }
1756
1695
  }
1757
1696
 
1758
- .tds-radio-group{
1759
- --tds-radio-group-font-size:var(--t-font-size-md);
1760
- --tds-radio-group-line-height:1.4;
1761
- --tds-radio-group-gap:var(--t-spacing-1);
1762
-
1763
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1764
- --tds-radio-group-description-line-height:1.35;
1765
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1766
- --tds-radio-group-description-invalid-icon-display:none;
1767
- display:flex;
1768
- flex-direction:column;
1769
- gap:0;
1770
- padding:0;
1771
- margin:0;
1772
-
1773
- font-size:var(--tds-radio-group-font-size);
1774
- line-height:var(--tds-radio-group-line-height);
1775
- border:0;
1776
- }
1777
-
1778
- .tds-radio-group legend{
1779
- float:left;
1780
- padding:0;
1781
- margin:0;
1782
- }
1783
-
1784
- .tds-radio-group[aria-invalid="true"]{
1785
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1786
- --tds-radio-group-description-invalid-icon-display:inline-block;
1787
- }
1788
-
1789
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1790
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1791
- }
1792
-
1793
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1794
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1795
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1796
- }
1797
-
1798
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1799
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1800
- }
1801
-
1802
- .tds-radio-group:has(input:required) legend::after{
1803
- margin-left:.25ch;
1804
- color:var(--t-text-color-status-error);
1805
- content:"*";
1806
- }
1807
-
1808
- .tds-radio-group-fields{
1809
- display:flex;
1810
- flex-direction:column;
1811
- gap:var(--tds-radio-group-gap);
1812
- align-items:flex-start;
1813
- margin-top:var(--t-spacing-1);
1814
- }
1815
-
1816
- .tds-radio-group-description{
1817
- display:flex;
1818
- gap:var(--t-spacing-half);
1819
- align-items:flex-start;
1820
- margin:var(--t-spacing-fourth) 0 0;
1821
- font-size:var(--tds-radio-group-description-font-size);
1822
- line-height:var(--tds-radio-group-description-line-height);
1823
- color:var(--tds-radio-group-description-color);
1824
- cursor:text;
1825
- }
1826
-
1827
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1828
- display:var(--tds-radio-group-description-invalid-icon-display);
1829
- flex-shrink:0;
1830
- margin-top:calc(.5lh - .5em);
1831
- line-height:var(--tds-radio-group-description-line-height);
1832
- }
1833
-
1834
- .tds-radio-group--sm{
1835
- --tds-radio-group-line-height:1.35;
1836
- --tds-radio-group-font-size:var(--t-font-size-sm);
1837
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1838
- --tds-radio-group-description-line-height:1.3;
1839
- }
1840
-
1841
1697
  .tds-toggle-switch{
1842
1698
  --tds-toggle-switch-font-size:var(--t-font-size-md);
1843
1699
  --tds-toggle-switch-cursor:pointer;
@@ -2141,137 +1997,281 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2141
1997
  }
2142
1998
  }
2143
1999
 
2144
- .tds-radio{
2145
- --tds-radio-font-size:var(--t-font-size-md);
2146
- --tds-radio-cursor:pointer;
2147
- --tds-radio-line-height:1.4;
2148
- --tds-radio-transition-property:border-width;
2000
+ @layer t-critical{
2001
+ tds-page-header:not(.hydrated){
2002
+ display:none;
2003
+ }
2004
+ }
2149
2005
 
2150
- --tds-radio-input-size:var(--t-element-size-md);
2151
- --tds-radio-input-border-radius:var(--t-border-radius-round);
2152
- --tds-radio-input-border-color:var(--t-form-border-color);
2153
- --tds-radio-input-border-width:var(--t-form-border-width);
2154
- --tds-radio-input-background-color:var(--t-form-background-color);
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;
2155
2024
 
2156
- --tds-radio-label-color:var(--t-form-color);
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);
2157
2027
 
2158
- --tds-radio-description-font-size:var(--t-font-size-sm);
2159
- --tds-radio-description-line-height:1.35;
2160
- --tds-radio-description-color:var(--t-text-color-secondary);
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);
2161
2031
 
2162
- position:relative;
2163
- display:inline-grid;
2164
- grid-template-columns:auto;
2165
- grid-auto-columns:1fr;
2166
- gap:var(--t-spacing-fourth) 0;
2167
- line-height:var(--tds-radio-line-height);
2168
- -webkit-user-select:none;
2169
- -moz-user-select:none;
2170
- user-select:none;
2171
- }
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);
2172
2034
 
2173
- .tds-radio label{
2174
- grid-area:1 / 2;
2175
- padding-inline-start:var(--t-spacing-1);
2176
- font-size:var(--tds-radio-font-size);
2177
- font-weight:var(--t-font-weight-normal);
2178
- color:var(--tds-radio-label-color);
2179
- cursor:var(--tds-radio-cursor);
2180
- }
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);
2181
2038
 
2182
- .tds-radio input[type="radio"]{
2183
- position:relative;
2184
- width:1em;
2185
- height:1em;
2186
- margin:calc((1lh - 1em) / 2) 0 0;
2187
- font-size:var(--tds-radio-font-size);
2188
- line-height:inherit;
2189
- -webkit-appearance:none;
2190
- -moz-appearance:none;
2191
- appearance:none;
2192
- cursor:var(--tds-radio-cursor);
2193
- background-color:var(--tds-radio-input-background-color);
2194
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2195
- border-radius:var(--tds-radio-input-border-radius);
2196
- transition-timing-function:var(--t-ease-in-out);
2197
- transition-duration:var(--t-duration-200);
2198
- transition-property:var(--tds-radio-transition-property);
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);
2199
2044
  }
2200
2045
 
2201
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2202
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2203
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2204
- }
2046
+ .tds-page-header--profile{
2047
+ --tds-page-header-padding-y:20px;
2048
+ }
2205
2049
 
2206
- :is(.tds-radio input[type="radio"]):focus-visible{
2207
- outline:var(--t-focus-ring-outline);
2208
- outline-offset:var(--t-focus-ring-offset);
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));
2209
2054
  }
2055
+ }
2210
2056
 
2211
- :is(.tds-radio input[type="radio"]):disabled{
2212
- pointer-events:none;
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);
2213
2075
  }
2076
+ }
2077
+ }
2214
2078
 
2215
- @media (prefers-reduced-motion: reduce){
2079
+ .tds-page-header{
2080
+ display:flex;
2081
+ 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
+ }
2216
2087
 
2217
- .tds-radio input[type="radio"]{
2218
- --tds-radio-transition-property:none;
2088
+ .tds-page-header:not(.has-nav){
2089
+ padding-bottom:var(--tds-page-header-padding-y);
2219
2090
  }
2220
- }
2221
2091
 
2222
- .tds-radio:has(input:checked){
2223
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2224
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2225
- --tds-radio-input-border-width:4px;
2092
+ .tds-page-header.inactive{
2093
+ background:var(--tds-page-header-background-color-inactive);
2226
2094
  }
2227
2095
 
2228
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2229
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2230
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2231
- }
2096
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2097
+ width:100%;
2098
+ }
2232
2099
 
2233
- .tds-radio:has(input:user-invalid){
2234
- --tds-radio-input-border-color:var(--t-form-border-color-error);
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;
2235
2107
  }
2236
2108
 
2237
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2238
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2239
- --tds-radio-input-background-color:var(--t-form-background-color-error);
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);
2240
2117
  }
2241
2118
 
2242
- .tds-radio:has(input:disabled){
2243
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2244
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
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
+ }
2245
2139
 
2246
- --tds-radio-label-color:var(--t-form-color-disabled);
2247
- --tds-radio-description-color:var(--t-form-color-disabled);
2248
- --tds-radio-cursor:not-allowed;
2249
- }
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
+ }
2250
2146
 
2251
- .tds-radio:has(input:disabled) input:checked{
2252
- --tds-radio-input-background-color:var(--t-form-background-color);
2253
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
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;
2254
2181
  }
2255
2182
 
2256
- .tds-radio-description{
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);
2186
+ }
2187
+
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%;
2197
+ }
2198
+
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
+ }
2204
+
2205
+ .tds-page-header__title-bar{
2257
2206
  display:flex;
2258
- grid-area:2 / 2;
2259
- gap:var(--t-spacing-half);
2207
+ flex-direction:column;
2208
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2260
2209
  align-items:flex-start;
2261
- padding-inline-start:var(--t-spacing-1);
2262
- margin:0;
2263
- font-size:var(--tds-radio-description-font-size);
2264
- line-height:var(--tds-radio-description-line-height);
2265
- color:var(--tds-radio-description-color);
2266
- cursor:text;
2210
+ justify-content:space-between;
2211
+ padding:0 var(--tds-page-header-padding-x);
2267
2212
  }
2268
2213
 
2269
- .tds-radio--sm{
2270
- --tds-radio-line-height:1.35;
2271
- --tds-radio-input-size:var(--t-element-size-sm);
2272
- --tds-radio-font-size:var(--t-font-size-sm);
2273
- --tds-radio-description-font-size:var(--t-font-size-xs);
2274
- --tds-radio-description-line-height:1.3;
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
+ }
2252
+ }
2253
+
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;
2263
+ }
2264
+
2265
+ @keyframes indicator-pulse{
2266
+ 0%{
2267
+ opacity:.3;
2268
+ transform:scale(.9);
2269
+ }
2270
+
2271
+ 100%{
2272
+ opacity:0;
2273
+ transform:scale(1.75);
2274
+ }
2275
2275
  }
2276
2276
 
2277
2277
  .tds-input{