@planningcenter/tapestry 4.0.1-rc.0 → 4.0.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 +1173 -1173
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1173 -1173
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1039,448 +1039,499 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1039
1039
  flex-direction:column;
1040
1040
  }
1041
1041
 
1042
- .tds-button-group{
1043
- display:inline-flex;
1042
+ @layer t-critical{
1043
+ tds-page-header:not(.hydrated){
1044
+ display:none;
1045
+ }
1044
1046
  }
1045
- .tds-button-group > .tds-btn{
1046
- --tds-button-group-item-z-index:1;
1047
1047
 
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
- }
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;
1083
1066
 
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);
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);
1088
1069
 
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;
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);
1098
1073
 
1099
- font-size:var(--tds-checkbox-group-font-size);
1100
- line-height:var(--tds-checkbox-group-line-height);
1101
- border:0;
1102
- }
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);
1103
1076
 
1104
- .tds-checkbox-group legend{
1105
- float:left;
1106
- padding:0;
1107
- margin:0;
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);
1080
+
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);
1108
1086
  }
1109
1087
 
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;
1088
+ .tds-page-header--profile{
1089
+ --tds-page-header-padding-y:20px;
1113
1090
  }
1114
1091
 
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:"*";
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));
1119
1096
  }
1097
+ }
1120
1098
 
1121
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1122
- content: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);
1123
1117
  }
1118
+ }
1119
+ }
1124
1120
 
1125
- .tds-checkbox-group-fields{
1121
+ .tds-page-header{
1126
1122
  display:flex;
1127
1123
  flex-direction:column;
1128
- gap:var(--tds-checkbox-group-gap);
1129
- align-items:flex-start;
1130
- margin-top:var(--t-spacing-1);
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);
1131
1128
  }
1132
1129
 
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
- }
1130
+ .tds-page-header:not(.has-nav){
1131
+ padding-bottom:var(--tds-page-header-padding-y);
1132
+ }
1143
1133
 
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);
1134
+ .tds-page-header.inactive{
1135
+ background:var(--tds-page-header-background-color-inactive);
1149
1136
  }
1150
1137
 
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
- }
1138
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
+ width:100%;
1140
+ }
1157
1141
 
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;
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
+ }
1163
1150
 
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);
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
+ }
1168
1160
 
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);
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
+ }
1173
1181
 
1174
- --tds-checkbox-label-color:var(--t-form-color);
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
+ }
1175
1188
 
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;
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
+ }
1180
1195
 
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
- }
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
+ }
1191
1201
 
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
- }
1200
-
1201
- .tds-checkbox tds-indeterminate{
1202
- display:flex;
1203
- }
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
+ }
1204
1209
 
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
- }
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
+ }
1223
1220
 
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%);
1221
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
+ position:relative;
1242
1223
  }
1243
1224
 
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
- }
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
+ }
1248
1229
 
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
- }
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
+ }
1253
1240
 
1254
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1255
- pointer-events:none;
1256
- }
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
+ }
1257
1246
 
1258
- @media (prefers-reduced-motion: reduce){
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
+ }
1259
1255
 
1260
- .tds-checkbox input[type="checkbox"]{
1261
- --tds-checkbox-transition-property:none;
1256
+ .tds-page-header--profile > .tds-page-header__title-bar{
1257
+ align-items:center;
1262
1258
  }
1263
- }
1264
1259
 
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;
1260
+ .tds-page-header__primary{
1261
+ width:100%;
1262
+ }
1263
+
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;
1270
1271
  }
1271
1272
 
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
- }
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%;
1279
+ }
1276
1280
 
1277
- .tds-checkbox:has(input:checked){
1278
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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;
1279
1286
  }
1287
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
+ width:auto;
1289
+ }
1280
1290
 
1281
- .tds-checkbox:has(input:indeterminate){
1282
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1291
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
+ justify-content:flex-end;
1293
+ }
1294
+ }
1295
+
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;
1305
+ }
1306
+
1307
+ @keyframes indicator-pulse{
1308
+ 0%{
1309
+ opacity:.3;
1310
+ transform:scale(.9);
1283
1311
  }
1284
1312
 
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;
1313
+ 100%{
1314
+ opacity:0;
1315
+ transform:scale(1.75);
1289
1316
  }
1317
+ }
1290
1318
 
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);
1294
- }
1319
+ .tds-checkbox-group{
1320
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1321
+ --tds-checkbox-group-line-height:1.4;
1322
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1295
1323
 
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);
1299
- }
1324
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1325
+ --tds-checkbox-group-description-line-height:1.35;
1326
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1327
+ --tds-checkbox-group-description-invalid-icon-display:none;
1328
+ display:flex;
1329
+ flex-direction:column;
1330
+ gap:0;
1331
+ padding:0;
1332
+ margin:0;
1300
1333
 
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
- }
1334
+ font-size:var(--tds-checkbox-group-font-size);
1335
+ line-height:var(--tds-checkbox-group-line-height);
1336
+ border:0;
1337
+ }
1305
1338
 
1306
- .tds-checkbox:has(input:required) label::after{
1339
+ .tds-checkbox-group legend{
1340
+ float:left;
1341
+ padding:0;
1342
+ margin:0;
1343
+ }
1344
+
1345
+ .tds-checkbox-group[aria-invalid="true"]{
1346
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1347
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1348
+ }
1349
+
1350
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1307
1351
  margin-left:.25ch;
1308
1352
  color:var(--t-text-color-status-error);
1309
1353
  content:"*";
1310
1354
  }
1311
1355
 
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);
1356
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1357
+ content:none;
1323
1358
  }
1324
1359
 
1325
- .tds-checkbox-description{
1360
+ .tds-checkbox-group-fields{
1361
+ display:flex;
1362
+ flex-direction:column;
1363
+ gap:var(--tds-checkbox-group-gap);
1364
+ align-items:flex-start;
1365
+ margin-top:var(--t-spacing-1);
1366
+ }
1367
+
1368
+ .tds-checkbox-group-description{
1326
1369
  display:flex;
1327
- grid-area:2 / 2;
1328
1370
  gap:var(--t-spacing-half);
1329
1371
  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);
1372
+ margin:var(--t-spacing-fourth) 0 0;
1373
+ font-size:var(--tds-checkbox-group-description-font-size);
1374
+ line-height:var(--tds-checkbox-group-description-line-height);
1375
+ color:var(--tds-checkbox-group-description-color);
1335
1376
  cursor:text;
1336
1377
  }
1337
1378
 
1338
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1339
- display:var(--tds-checkbox-description-invalid-icon-display);
1379
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1380
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1340
1381
  flex-shrink:0;
1341
1382
  margin-top:calc(.5lh - .5em);
1342
- line-height:var(--tds-checkbox-description-line-height);
1383
+ line-height:var(--tds-checkbox-group-description-line-height);
1343
1384
  }
1344
1385
 
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;
1386
+ .tds-checkbox-group--sm{
1387
+ --tds-checkbox-group-line-height:1.35;
1388
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1389
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1390
+ --tds-checkbox-group-description-line-height:1.3;
1351
1391
  }
1352
1392
 
1353
- .tds-radio{
1354
- --tds-radio-font-size:var(--t-font-size-md);
1355
- --tds-radio-cursor:pointer;
1356
- --tds-radio-line-height:1.4;
1357
- --tds-radio-transition-property:border-width;
1393
+ .tds-modal-overlay{
1394
+ position:fixed;
1395
+ inset:0;
1396
+ z-index:1000;
1397
+ display:flex;
1398
+ align-items:center;
1399
+ justify-content:center;
1400
+ background:hsl(0 0% 0% / 40%);
1401
+ }
1358
1402
 
1359
- --tds-radio-input-size:var(--t-element-size-md);
1360
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1361
- --tds-radio-input-border-color:var(--t-form-border-color);
1362
- --tds-radio-input-border-width:var(--t-form-border-width);
1363
- --tds-radio-input-background-color:var(--t-form-background-color);
1403
+ .tds-modal-overlay[data-entering]{
1404
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1405
+ }
1364
1406
 
1365
- --tds-radio-label-color:var(--t-form-color);
1407
+ .tds-modal-overlay[data-exiting]{
1408
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1409
+ }
1366
1410
 
1367
- --tds-radio-description-font-size:var(--t-font-size-sm);
1368
- --tds-radio-description-line-height:1.35;
1369
- --tds-radio-description-color:var(--t-text-color-secondary);
1411
+ @keyframes tds-modal-overlay-fade{
1412
+ from{
1413
+ opacity:0;
1414
+ }
1415
+ }
1370
1416
 
1371
- position:relative;
1372
- display:inline-grid;
1373
- grid-template-columns:auto;
1374
- grid-auto-columns:1fr;
1375
- gap:var(--t-spacing-fourth) 0;
1376
- line-height:var(--tds-radio-line-height);
1377
- -webkit-user-select:none;
1378
- -moz-user-select:none;
1379
- user-select:none;
1417
+ .tds-modal-frame{
1418
+ --tds-modal-width:600px;
1419
+
1420
+ display:flex;
1421
+ justify-content:center;
1422
+ width:min(var(--tds-modal-width), calc(100% - 48px));
1380
1423
  }
1381
1424
 
1382
- .tds-radio label{
1383
- grid-area:1 / 2;
1384
- padding-inline-start:var(--t-spacing-1);
1385
- font-size:var(--tds-radio-font-size);
1386
- font-weight:var(--t-font-weight-normal);
1387
- color:var(--tds-radio-label-color);
1388
- cursor:var(--tds-radio-cursor);
1425
+ .tds-modal-frame[data-entering]{
1426
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1389
1427
  }
1390
1428
 
1391
- .tds-radio input[type="radio"]{
1392
- position:relative;
1393
- width:1em;
1394
- height:1em;
1395
- margin:calc((1lh - 1em) / 2) 0 0;
1396
- font-size:var(--tds-radio-font-size);
1397
- line-height:inherit;
1398
- -webkit-appearance:none;
1399
- -moz-appearance:none;
1400
- appearance:none;
1401
- cursor:var(--tds-radio-cursor);
1402
- background-color:var(--tds-radio-input-background-color);
1403
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1404
- border-radius:var(--tds-radio-input-border-radius);
1405
- transition-timing-function:var(--t-ease-in-out);
1406
- transition-duration:var(--t-duration-200);
1407
- transition-property:var(--tds-radio-transition-property);
1429
+ .tds-modal-frame[data-exiting]{
1430
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1408
1431
  }
1409
1432
 
1410
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1411
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1412
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1413
- }
1414
-
1415
- :is(.tds-radio input[type="radio"]):focus-visible{
1416
- outline:var(--t-focus-ring-outline);
1417
- outline-offset:var(--t-focus-ring-offset);
1418
- }
1433
+ .tds-modal-frame--sm{
1434
+ --tds-modal-width:400px;
1435
+ }
1419
1436
 
1420
- :is(.tds-radio input[type="radio"]):disabled{
1421
- pointer-events:none;
1422
- }
1437
+ .tds-modal-frame--lg{
1438
+ --tds-modal-width:800px;
1439
+ }
1423
1440
 
1424
- @media (prefers-reduced-motion: reduce){
1441
+ .tds-modal-frame--xl{
1442
+ --tds-modal-width:1000px;
1443
+ }
1425
1444
 
1426
- .tds-radio input[type="radio"]{
1427
- --tds-radio-transition-property:none;
1445
+ @keyframes tds-modal-zoom{
1446
+ from{
1447
+ opacity:0;
1448
+ scale:.96;
1428
1449
  }
1429
- }
1450
+ }
1430
1451
 
1431
- .tds-radio:has(input:checked){
1432
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1433
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1434
- --tds-radio-input-border-width:4px;
1452
+ @media (prefers-reduced-motion: reduce){
1453
+ .tds-modal-overlay[data-entering],
1454
+ .tds-modal-overlay[data-exiting],
1455
+ .tds-modal-frame[data-entering],
1456
+ .tds-modal-frame[data-exiting]{
1457
+ animation:none;
1435
1458
  }
1459
+ }
1436
1460
 
1437
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1438
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1439
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1440
- }
1461
+ .tds-modal{
1462
+ display:flex;
1463
+ flex-direction:column;
1464
+ width:100%;
1465
+ padding-block:var(--t-spacing-3);
1466
+ padding-inline:0;
1467
+ background:var(--t-surface-color-card);
1441
1468
 
1442
- .tds-radio:has(input:user-invalid){
1443
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1469
+ border:0;
1470
+ border-radius:var(--t-border-radius-lg);
1471
+ box-shadow:0 4px 18px 0 #0003;
1472
+ }
1473
+
1474
+ .tds-modal:focus{
1475
+ outline:none;
1444
1476
  }
1445
1477
 
1446
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1447
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1448
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1449
- }
1478
+ .tds-modal-header{
1479
+ display:grid;
1480
+ grid-template-columns:1fr auto;
1481
+ -moz-column-gap:var(--t-spacing-2);
1482
+ column-gap:var(--t-spacing-2);
1483
+ padding-block:0;
1484
+ padding-inline:var(--t-spacing-4);
1485
+ }
1450
1486
 
1451
- .tds-radio:has(input:disabled){
1452
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1453
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1487
+ .tds-modal-title{
1488
+ grid-row:1;
1489
+ grid-column:1;
1490
+ margin:0;
1491
+ font-size:var(--t-font-size-2xl);
1492
+ font-weight:var(--t-font-weight-medium);
1493
+ line-height:140%;
1494
+ color:var(--t-text-color-headline);
1495
+ }
1454
1496
 
1455
- --tds-radio-label-color:var(--t-form-color-disabled);
1456
- --tds-radio-description-color:var(--t-form-color-disabled);
1457
- --tds-radio-cursor:not-allowed;
1458
- }
1497
+ .tds-modal-subtitle{
1498
+ grid-row:2;
1499
+ grid-column:1;
1500
+ margin:0;
1501
+ font-size:var(--t-font-size-md);
1502
+ font-weight:var(--t-font-weight-medium);
1503
+ line-height:140%;
1504
+ color:var(--t-text-color-secondary);
1505
+ }
1459
1506
 
1460
- .tds-radio:has(input:disabled) input:checked{
1461
- --tds-radio-input-background-color:var(--t-form-background-color);
1462
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1463
- }
1507
+ .tds-modal-close{
1508
+ grid-row:1;
1509
+ grid-column:2;
1510
+ align-self:center;
1511
+ color:var(--t-icon-color-dim);
1512
+ }
1464
1513
 
1465
- .tds-radio-description{
1514
+ .tds-modal-body{
1515
+ padding-block:var(--t-spacing-3);
1516
+ padding-inline:var(--t-spacing-4);
1517
+ }
1518
+
1519
+ .tds-modal-body--full-width{
1520
+ padding-inline:0;
1521
+ }
1522
+
1523
+ .tds-modal-footer{
1466
1524
  display:flex;
1467
- grid-area:2 / 2;
1468
- gap:var(--t-spacing-half);
1469
- align-items:flex-start;
1470
- padding-inline-start:var(--t-spacing-1);
1471
- margin:0;
1472
- font-size:var(--tds-radio-description-font-size);
1473
- line-height:var(--tds-radio-description-line-height);
1474
- color:var(--tds-radio-description-color);
1475
- cursor:text;
1525
+ gap:var(--t-spacing-2);
1526
+ align-items:center;
1527
+ justify-content:flex-end;
1528
+ padding-block-start:var(--t-spacing-3);
1529
+ padding-inline:var(--t-spacing-4);
1530
+ border-top:1px solid var(--t-border-color);
1476
1531
  }
1477
1532
 
1478
- .tds-radio--sm{
1479
- --tds-radio-line-height:1.35;
1480
- --tds-radio-input-size:var(--t-element-size-sm);
1481
- --tds-radio-font-size:var(--t-font-size-sm);
1482
- --tds-radio-description-font-size:var(--t-font-size-xs);
1483
- --tds-radio-description-line-height:1.3;
1533
+ .tds-modal-footer > [slot="start"]{
1534
+ margin-inline-end:auto;
1484
1535
  }
1485
1536
 
1486
1537
 
@@ -1506,1029 +1557,978 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1506
1557
  }
1507
1558
  }
1508
1559
 
1509
- .tds-dropdown-popover{
1510
- min-inline-size:10rem;
1511
- max-inline-size:24rem;
1512
- padding:var(--t-spacing-1);
1513
- overflow:auto;
1514
- overscroll-behavior:none;
1515
- -webkit-user-select:none;
1516
- -moz-user-select:none;
1517
- user-select:none;
1518
- outline:0;
1519
- scrollbar-color:#0004 var(--t-surface-color-card);
1520
- scrollbar-width:thin;
1521
- background:var(--t-surface-color-card);
1522
- background-clip:padding-box;
1523
- border:1px solid var(--t-border-color);
1524
- border-radius:var(--t-border-radius);
1525
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1526
- }
1527
- .tds-dropdown-popover[data-entering]{
1528
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1529
- }
1530
- .tds-dropdown-popover[data-exiting]{
1531
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1532
- }
1533
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1534
- will-change:opacity, transform;
1535
- }
1536
-
1537
- @keyframes tds-dropdown-popover{
1538
- from{
1539
- opacity:0;
1540
- transform:translateY(-8px);
1541
- }
1542
- }
1543
-
1544
- @media (prefers-reduced-motion: reduce){
1545
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1546
- animation:none;
1547
- }
1548
- }
1549
-
1550
- .tds-dropdown-popover [role="menu"]{
1551
- outline:0;
1552
- }
1553
- .tds-dropdown-item{
1554
- --tds-dropdown-item-color:var(--t-text-color);
1555
- --tds-dropdown-item-row-gap:0;
1556
- --tds-dropdown-item-column-gap:var(--t-spacing-1);
1557
-
1558
- display:flex;
1559
- row-gap:var(--tds-dropdown-item-row-gap);
1560
- -moz-column-gap:var(--tds-dropdown-item-column-gap);
1561
- column-gap:var(--tds-dropdown-item-column-gap);
1562
- align-items:center;
1563
- padding-block:var(--t-spacing-1);
1564
- padding-inline:var(--t-spacing-1-half);
1565
- font-size:1rem;
1566
- color:var(--tds-dropdown-item-color);
1567
- text-decoration:none;
1568
- cursor:default;
1569
- outline:0;
1570
- border-radius:var(--t-border-radius);
1571
- }
1572
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1573
- background:var(--t-fill-color-neutral-070);
1574
- }
1575
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
1576
- background:var(--t-fill-color-neutral-060);
1577
- }
1578
- .tds-dropdown-item[data-disabled]{
1579
- --tds-dropdown-item-color:var(--t-form-color-disabled);
1580
-
1581
- cursor:not-allowed;
1582
- }
1583
-
1584
- .tds-dropdown-item--destructive{
1585
- --tds-dropdown-item-color:var(--t-text-color-status-error);
1586
- }
1587
-
1588
- .tds-dropdown-item--staff-only{
1589
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1590
- }
1591
- a.tds-dropdown-item:is(:hover, :active){
1592
- color:var(--tds-dropdown-item-color);
1593
- }
1594
- .tds-dropdown-item [slot="prefix"],
1595
- .tds-dropdown-item [slot="suffix"]{
1596
- flex-shrink:0;
1597
- }
1598
-
1599
- .tds-dropdown-item [slot="label"]{
1600
- flex:1;
1601
- min-width:0;
1602
- overflow:hidden;
1603
- text-overflow:ellipsis;
1604
- white-space:nowrap;
1560
+ .tds-input:has(textarea){
1561
+ --tds-input-padding-block:6px;
1562
+ --tds-input-resizer-size:var(--t-element-size-sm);
1563
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1605
1564
  }
1606
1565
 
1607
- .tds-dropdown-item [slot="description"]{
1608
- font-size:var(--t-font-size-sm);
1609
- color:var(--t-text-color-secondary);
1610
- }
1611
-
1612
- .tds-dropdown-item:has([slot="description"]){
1613
- --tds-dropdown-item-row-gap:var(--t-spacing-half);
1614
- --tds-dropdown-item-column-gap:0;
1615
-
1616
- display:grid;
1617
- grid-template-areas:"prefix label suffix" ". description .";
1618
- grid-template-columns:auto 1fr auto;
1619
- }
1620
-
1621
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1622
- grid-area:prefix;
1623
- margin-inline-end:var(--t-spacing-1);
1624
- }
1625
-
1626
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1627
- grid-area:label;
1628
- }
1629
-
1630
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1631
- grid-area:description;
1632
- }
1633
-
1634
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1635
- grid-area:suffix;
1636
- margin-inline-start:var(--t-spacing-1);
1637
- }
1638
- .tds-dropdown-section:not(:first-child){
1639
- margin-block-start:var(--t-spacing-half);
1640
- }
1641
-
1642
- .tds-dropdown-section-label{
1643
- padding-block:var(--t-spacing-1);
1644
- padding-inline:var(--t-spacing-half);
1645
- font-size:var(--t-font-size-sm);
1646
- font-weight:var(--t-font-weight-semibold);
1647
- color:var(--t-text-color-secondary);
1648
- }
1649
- .tds-dropdown-separator{
1650
- margin-block:var(--t-spacing-half);
1651
- margin-inline:0;
1652
- border:0;
1653
- border-top:1px solid var(--t-border-color);
1654
- }
1655
-
1656
- .tds-search-input-control{
1657
- --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
1658
- --tds-search-input-outline-offset:0;
1659
- --tds-search-input-cursor:text;
1566
+ @supports (x: attr(x type(*))){
1660
1567
 
1661
- display:flex;
1662
- gap:var(--tds-field-padding-inline);
1663
- align-items:center;
1664
- inline-size:100%;
1665
- min-block-size:var(--tds-field-min-height);
1666
- padding-inline:var(--tds-field-padding-inline);
1667
- font-size:var(--tds-field-font-size);
1668
- color:var(--tds-field-color);
1669
- cursor:var(--tds-search-input-cursor);
1670
- outline:var(--t-focus-ring-width) solid transparent;
1671
- outline-color:var(--tds-search-input-outline-color);
1672
- outline-offset:var(--tds-search-input-outline-offset);
1673
- background-color:var(--tds-field-background-color);
1674
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1675
- border-radius:var(--t-form-border-radius);
1676
- transition-timing-function:var(--t-ease-in-out);
1677
- transition-duration:var(--t-duration-200);
1678
- transition-property:background-color, border-color, outline-color, outline-offset;
1568
+ .tds-input textarea{
1569
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1679
1570
  }
1680
-
1681
- .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1682
- border-color:var(--tds-field-border-color-hover);
1683
- }
1684
-
1685
- .tds-search-input-control:has(input:focus){
1686
- --tds-search-input-outline-color:var(--t-focus-ring-color);
1687
- --tds-search-input-outline-offset:var(--t-focus-ring-offset);
1688
-
1689
- border-color:var(--t-form-border-color-focus);
1690
- }
1691
-
1692
- .tds-search-input-control input{
1693
- flex:1;
1694
- min-inline-size:0;
1695
- padding:0;
1696
- overflow:hidden;
1697
- text-overflow:ellipsis;
1698
- font-family:inherit;
1699
- font-size:inherit;
1700
- color:inherit;
1701
- white-space:nowrap;
1702
- -webkit-appearance:none;
1703
- -moz-appearance:none;
1704
- appearance:none;
1705
- outline:0;
1706
- background-color:transparent;
1707
- border:0;
1708
1571
  }
1709
1572
 
1710
- :is(.tds-search-input-control input)::-moz-placeholder{
1711
- color:var(--tds-field-placeholder-color);
1712
- -moz-user-select:none;
1713
- user-select:none;
1573
+ .tds-input.tds-textarea--resize-vertical textarea{
1574
+ resize:vertical;
1714
1575
  }
1715
1576
 
1716
- :is(.tds-search-input-control input)::placeholder{
1717
- color:var(--tds-field-placeholder-color);
1718
- -webkit-user-select:none;
1719
- -moz-user-select:none;
1720
- user-select:none;
1577
+ .tds-input.tds-textarea--resize-none textarea{
1578
+ resize:none;
1721
1579
  }
1722
1580
 
1723
- :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
1724
- -webkit-appearance:none;
1725
- appearance:none;
1581
+ .tds-input.tds-textarea--resize-auto textarea{
1582
+ resize:vertical;
1726
1583
  }
1727
1584
 
1728
- .tds-search-input-control .tds-search-input-icon{
1729
- flex-shrink:0;
1730
- inline-size:1em;
1731
- color:var(--t-icon-color-dim);
1732
- }
1733
-
1734
- .tds-search-input-control .tds-search-input-clear-icon{
1735
- inline-size:calc(var(--tds-field-font-size) * .8);
1736
- block-size:calc(var(--tds-field-font-size) * .8);
1737
- }
1738
-
1739
- .tds-search-input-control .tds-btn{
1740
- --tds-btn-color:var(--t-icon-color-dim);
1741
- --tds-btn-padding-truncated-x:0;
1742
- --tds-search-input-clear-button-visibility:hidden;
1743
-
1744
- visibility:var(--tds-search-input-clear-button-visibility);
1745
- flex-shrink:0;
1746
- }
1747
-
1748
- .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1749
- --tds-field-background-color:var(--t-form-background-color-error);
1750
- --tds-field-border-color:var(--t-form-border-color-error);
1751
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1752
- }
1753
-
1754
- .tds-search-input-control:has(:disabled){
1755
- --tds-field-border-color:var(--t-form-border-color-disabled);
1756
- --tds-field-background-color:var(--t-form-background-color-disabled);
1757
- --tds-field-color:var(--t-form-color-disabled);
1758
- --tds-search-input-cursor:not-allowed;
1759
- }
1760
-
1761
- .tds-search-input-control:has([readonly]){
1762
- --tds-field-border-color:var(--t-form-border-color-readonly);
1763
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1764
- --tds-field-background-color:var(--t-form-background-color-readonly);
1765
- --tds-field-color:var(--t-form-color-readonly);
1766
- }
1767
-
1768
- .tds-search-input-control:has([readonly]):has(input:focus){
1769
- border-color:var(--t-form-border-color-hover);
1585
+ @supports (field-sizing: content){
1586
+ .tds-input.tds-textarea--resize-auto textarea{
1587
+ field-sizing:content;
1588
+ resize:none;
1589
+ }
1770
1590
  }
1771
1591
 
1772
- @media (prefers-reduced-motion: reduce){
1773
-
1774
- .tds-search-input-control{
1775
- transition-property:none;
1776
- }
1777
- }
1778
-
1779
- .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
1780
- :has(:disabled, [readonly])
1781
- ) .tds-btn{
1782
- --tds-search-input-clear-button-visibility:visible;
1592
+ .tds-input textarea{
1593
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1594
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1595
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1596
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1597
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1598
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1599
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1600
+ --tds-input-scrollbar-thumb-border-radius:999px;
1601
+ --tds-input-scrollbar-thumb-border-width:3px;
1602
+ --tds-input-scrollbar-track-margin-block:.125rem;
1603
+ scrollbar-color:initial;
1604
+ transition-timing-function:var(--t-ease-in-out);
1605
+ transition-duration:var(--t-duration-200);
1606
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1783
1607
  }
1784
1608
 
1785
- .tds-radio-group{
1786
- --tds-radio-group-font-size:var(--t-font-size-md);
1787
- --tds-radio-group-line-height:1.4;
1788
- --tds-radio-group-gap:var(--t-spacing-1);
1789
-
1790
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1791
- --tds-radio-group-description-line-height:1.35;
1792
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1793
- --tds-radio-group-description-invalid-icon-display:none;
1794
- display:flex;
1795
- flex-direction:column;
1796
- gap:0;
1797
- padding:0;
1798
- margin:0;
1799
-
1800
- font-size:var(--tds-radio-group-font-size);
1801
- line-height:var(--tds-radio-group-line-height);
1802
- border:0;
1803
- }
1609
+ @media (pointer: fine){
1610
+ :is(.tds-input textarea)::-webkit-scrollbar{
1611
+ width:12px;
1612
+ height:12px;
1613
+ cursor:default;
1614
+ }
1804
1615
 
1805
- .tds-radio-group legend{
1806
- float:left;
1807
- padding:0;
1808
- margin:0;
1809
- }
1616
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1617
+ cursor:default;
1618
+ background:var(--tds-input-scrollbar-thumb-color);
1619
+ background-clip:content-box;
1620
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1621
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1622
+ }
1810
1623
 
1811
- .tds-radio-group[aria-invalid="true"]{
1812
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1813
- --tds-radio-group-description-invalid-icon-display:inline-block;
1814
- }
1624
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1625
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1626
+ }
1815
1627
 
1816
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1817
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1628
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1629
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1818
1630
  }
1819
1631
 
1820
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1821
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1822
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1823
- }
1632
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1633
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1634
+ }
1824
1635
 
1825
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1826
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1827
- }
1636
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1637
+ background:var(--tds-input-scrollbar-surface-color);
1638
+ }
1828
1639
 
1829
- .tds-radio-group:has(input:required) legend::after{
1830
- margin-left:.25ch;
1831
- color:var(--t-text-color-status-error);
1832
- content:"*";
1640
+ :is(.tds-input textarea)::-webkit-resizer{
1641
+ background:var(--tds-input-resizer-icon) no-repeat;
1642
+ background-position:right bottom;
1643
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1833
1644
  }
1834
1645
 
1835
- .tds-radio-group-fields{
1836
- display:flex;
1837
- flex-direction:column;
1838
- gap:var(--tds-radio-group-gap);
1839
- align-items:flex-start;
1840
- margin-top:var(--t-spacing-1);
1841
- }
1646
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1647
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1648
+ cursor:default;
1649
+ }
1842
1650
 
1843
- .tds-radio-group-description{
1844
- display:flex;
1845
- gap:var(--t-spacing-half);
1846
- align-items:flex-start;
1847
- margin:var(--t-spacing-fourth) 0 0;
1848
- font-size:var(--tds-radio-group-description-font-size);
1849
- line-height:var(--tds-radio-group-description-line-height);
1850
- color:var(--tds-radio-group-description-color);
1851
- cursor:text;
1852
- }
1651
+ @supports (-moz-appearance: none){
1652
+ :is(.tds-input textarea){
1653
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1654
+ scrollbar-width:thin;
1655
+ }
1853
1656
 
1854
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1855
- display:var(--tds-radio-group-description-invalid-icon-display);
1856
- flex-shrink:0;
1857
- margin-top:calc(.5lh - .5em);
1858
- line-height:var(--tds-radio-group-description-line-height);
1657
+ @media (hover){
1658
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1659
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1660
+ }
1661
+ }
1662
+ }
1859
1663
  }
1860
1664
 
1861
- .tds-radio-group--sm{
1862
- --tds-radio-group-line-height:1.35;
1863
- --tds-radio-group-font-size:var(--t-font-size-sm);
1864
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1865
- --tds-radio-group-description-line-height:1.3;
1866
- }
1665
+ .tds-checkbox{
1666
+ --tds-checkbox-font-size:var(--t-font-size-md);
1667
+ --tds-checkbox-cursor:pointer;
1668
+ --tds-checkbox-line-height:1.4;
1669
+ --tds-checkbox-transition-property:background-color, border-color;
1867
1670
 
1868
- .tds-toggle-switch{
1869
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1870
- --tds-toggle-switch-cursor:pointer;
1871
- --tds-toggle-switch-display:inline-grid;
1872
- --tds-toggle-switch-line-height:1.4;
1671
+ --tds-checkbox-input-size:var(--t-element-size-md);
1672
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1673
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1674
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1873
1675
 
1874
- --tds-toggle-switch-label-color:var(--t-form-color);
1676
+ --tds-checkbox-input-icon:none;
1677
+ --tds-checkbox-input-icon-visibility:hidden;
1678
+ --tds-checkbox-input-icon-opacity:0;
1679
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1875
1680
 
1876
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1877
- --tds-toggle-switch-track-outline:none;
1878
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1879
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1880
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1681
+ --tds-checkbox-label-color:var(--t-form-color);
1881
1682
 
1882
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1883
- --tds-toggle-switch-thumb-transform:translateX(0);
1884
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1683
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1684
+ --tds-checkbox-description-line-height:1.35;
1685
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1686
+ --tds-checkbox-description-invalid-icon-display:none;
1885
1687
 
1886
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1887
- --tds-toggle-switch-description-line-height:1.35;
1888
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1889
1688
  position:relative;
1890
-
1891
- display:var(--tds-toggle-switch-display);
1689
+ display:inline-grid;
1892
1690
  grid-template-columns:auto;
1893
1691
  grid-auto-columns:1fr;
1894
1692
  gap:var(--t-spacing-fourth) 0;
1693
+ line-height:var(--tds-checkbox-line-height);
1895
1694
  -webkit-user-select:none;
1896
1695
  -moz-user-select:none;
1897
1696
  user-select:none;
1898
1697
  }
1899
1698
 
1900
- .tds-toggle-switch input[type="checkbox"]{
1901
- position:absolute;
1902
- width:var(--tds-toggle-switch-track-width);
1903
- height:var(--tds-toggle-switch-track-height);
1904
- margin:0;
1699
+ .tds-checkbox label{
1700
+ grid-area:1 / 2;
1701
+ padding-inline-start:var(--t-spacing-1);
1702
+ font-size:var(--tds-checkbox-font-size);
1703
+ font-weight:var(--t-font-weight-normal);
1704
+ color:var(--tds-checkbox-label-color);
1705
+ cursor:var(--tds-checkbox-cursor);
1706
+ }
1707
+
1708
+ .tds-checkbox tds-indeterminate{
1709
+ display:flex;
1710
+ }
1711
+
1712
+ .tds-checkbox input[type="checkbox"]{
1713
+ position:relative;
1714
+ width:1em;
1715
+ height:1em;
1716
+ margin:calc((1lh - 1em) / 2) 0 0;
1717
+ font-size:var(--tds-checkbox-font-size);
1718
+ line-height:inherit;
1905
1719
  -webkit-appearance:none;
1906
1720
  -moz-appearance:none;
1907
1721
  appearance:none;
1908
- cursor:var(--tds-toggle-switch-cursor);
1909
- outline:var(--tds-toggle-switch-track-outline);
1910
- outline-offset:var(--t-focus-ring-offset);
1911
- background-color:transparent;
1912
- border:0;
1913
- border-radius:var(--t-border-radius-round);
1722
+ cursor:var(--tds-checkbox-cursor);
1723
+ background-color:var(--tds-checkbox-input-background-color);
1724
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1725
+ border-radius:var(--tds-checkbox-input-border-radius);
1726
+ transition-timing-function:var(--t-ease-in-out);
1727
+ transition-duration:var(--t-duration-200);
1728
+ transition-property:var(--tds-checkbox-transition-property);
1914
1729
  }
1915
1730
 
1916
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1917
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1731
+ :is(.tds-checkbox input[type="checkbox"])::before{
1732
+ position:absolute;
1733
+ top:50%;
1734
+ left:50%;
1735
+ visibility:var(--tds-checkbox-input-icon-visibility);
1736
+ width:100%;
1737
+ height:100%;
1738
+ content:"";
1739
+ background-color:var(--tds-checkbox-input-icon-fill);
1740
+ border-radius:var(--tds-checkbox-input-border-radius);
1741
+ opacity:var(--tds-checkbox-input-icon-opacity);
1742
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1743
+ mask-image:var(--tds-checkbox-input-icon);
1744
+ -webkit-mask-repeat:no-repeat;
1745
+ mask-repeat:no-repeat;
1746
+ -webkit-mask-size:contain;
1747
+ mask-size:contain;
1748
+ transform:translate(-50%, -50%);
1918
1749
  }
1919
1750
 
1920
- .tds-toggle-switch label{
1921
- display:inline-flex;
1922
- grid-area:1 / 2;
1923
- padding-inline-start:var(--t-spacing-1);
1924
- margin-top:-.09375em;
1925
- font-size:var(--tds-toggle-switch-font-size);
1926
- font-weight:var(--t-font-weight-normal);
1927
- line-height:var(--tds-toggle-switch-line-height);
1928
- color:var(--tds-toggle-switch-label-color);
1929
- cursor:var(--tds-toggle-switch-cursor);
1751
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1752
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1753
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1754
+ }
1755
+
1756
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1757
+ outline:var(--t-focus-ring-outline);
1758
+ outline-offset:var(--t-focus-ring-offset);
1759
+ }
1760
+
1761
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1762
+ pointer-events:none;
1763
+ }
1764
+
1765
+ @media (prefers-reduced-motion: reduce){
1766
+
1767
+ .tds-checkbox input[type="checkbox"]{
1768
+ --tds-checkbox-transition-property:none;
1930
1769
  }
1770
+ }
1931
1771
 
1932
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1933
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1772
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1773
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1774
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1775
+ --tds-checkbox-input-icon-visibility:visible;
1776
+ --tds-checkbox-input-icon-opacity:1;
1934
1777
  }
1935
1778
 
1936
- .tds-toggle-switch:has(input:checked){
1937
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1938
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1779
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1780
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1781
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1782
+ }
1783
+
1784
+ .tds-checkbox:has(input:checked){
1785
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1939
1786
  }
1940
1787
 
1941
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1942
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1788
+ .tds-checkbox:has(input:indeterminate){
1789
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1790
+ }
1791
+
1792
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1793
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1794
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1795
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1796
+ }
1797
+
1798
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1799
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1800
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1801
+ }
1802
+
1803
+ :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{
1804
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1805
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1806
+ }
1807
+
1808
+ :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){
1809
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1810
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1811
+ }
1812
+
1813
+ .tds-checkbox:has(input:required) label::after{
1814
+ margin-left:.25ch;
1815
+ color:var(--t-text-color-status-error);
1816
+ content:"*";
1943
1817
  }
1944
1818
 
1945
- .tds-toggle-switch:has(input:disabled){
1946
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1947
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1948
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1949
- --tds-toggle-switch-cursor:not-allowed;
1950
- }
1951
-
1952
- .tds-toggle-switch-track{
1953
- position:relative;
1954
- flex-shrink:0;
1955
- width:var(--tds-toggle-switch-track-width);
1956
- height:var(--tds-toggle-switch-track-height);
1957
- background-color:var(--tds-toggle-switch-track-background-color);
1958
- border-radius:var(--t-border-radius-round);
1959
- transition:var(--tds-toggle-switch-track-transition);
1960
- }
1819
+ .tds-checkbox:has(input:disabled){
1820
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1821
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1961
1822
 
1962
- .tds-toggle-switch-track::before{
1963
- position:absolute;
1964
- top:var(--t-spacing-fourth);
1965
- left:var(--t-spacing-fourth);
1966
- width:var(--tds-toggle-switch-thumb-size);
1967
- height:var(--tds-toggle-switch-thumb-size);
1968
- content:"";
1969
- background-color:#fff;
1970
- border-radius:var(--t-border-radius-round);
1971
- transform:var(--tds-toggle-switch-thumb-transform);
1972
- transition:var(--tds-toggle-switch-thumb-transition);
1823
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1824
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1825
+ --tds-checkbox-cursor:not-allowed;
1973
1826
  }
1974
1827
 
1975
- @media (prefers-reduced-motion: reduce){
1976
-
1977
- .tds-toggle-switch-track{
1978
- --tds-toggle-switch-track-transition:none;
1979
- --tds-toggle-switch-thumb-transition:none;
1980
- }
1981
- }
1828
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1829
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1830
+ }
1982
1831
 
1983
- .tds-toggle-switch-description{
1832
+ .tds-checkbox-description{
1984
1833
  display:flex;
1985
1834
  grid-area:2 / 2;
1835
+ gap:var(--t-spacing-half);
1986
1836
  align-items:flex-start;
1987
1837
  padding-inline-start:var(--t-spacing-1);
1988
1838
  margin:0;
1989
- font-size:var(--tds-toggle-switch-description-font-size);
1990
- line-height:var(--tds-toggle-switch-description-line-height);
1991
- color:var(--tds-toggle-switch-description-color);
1839
+ font-size:var(--tds-checkbox-description-font-size);
1840
+ line-height:var(--tds-checkbox-description-line-height);
1841
+ color:var(--tds-checkbox-description-color);
1992
1842
  cursor:text;
1993
1843
  }
1994
1844
 
1995
- .tds-toggle-switch--sm{
1996
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1997
- --tds-toggle-switch-line-height:1.35;
1998
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1999
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2000
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2001
- --tds-toggle-switch-description-line-height:1.3;
2002
- }
1845
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1846
+ display:var(--tds-checkbox-description-invalid-icon-display);
1847
+ flex-shrink:0;
1848
+ margin-top:calc(.5lh - .5em);
1849
+ line-height:var(--tds-checkbox-description-line-height);
1850
+ }
2003
1851
 
2004
- .tds-toggle-switch--hide-label{
2005
- --tds-toggle-switch-display:inline-flex;
1852
+ .tds-checkbox--sm{
1853
+ --tds-checkbox-line-height:1.35;
1854
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1855
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1856
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1857
+ --tds-checkbox-description-line-height:1.3;
2006
1858
  }
2007
1859
 
2008
- .tds-input:has(textarea){
2009
- --tds-input-padding-block:6px;
2010
- --tds-input-resizer-size:var(--t-element-size-sm);
2011
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2012
- }
1860
+ .tds-radio-group{
1861
+ --tds-radio-group-font-size:var(--t-font-size-md);
1862
+ --tds-radio-group-line-height:1.4;
1863
+ --tds-radio-group-gap:var(--t-spacing-1);
2013
1864
 
2014
- @supports (x: attr(x type(*))){
1865
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1866
+ --tds-radio-group-description-line-height:1.35;
1867
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1868
+ --tds-radio-group-description-invalid-icon-display:none;
1869
+ display:flex;
1870
+ flex-direction:column;
1871
+ gap:0;
1872
+ padding:0;
1873
+ margin:0;
2015
1874
 
2016
- .tds-input textarea{
2017
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1875
+ font-size:var(--tds-radio-group-font-size);
1876
+ line-height:var(--tds-radio-group-line-height);
1877
+ border:0;
2018
1878
  }
2019
- }
2020
1879
 
2021
- .tds-input.tds-textarea--resize-vertical textarea{
2022
- resize:vertical;
2023
- }
1880
+ .tds-radio-group legend{
1881
+ float:left;
1882
+ padding:0;
1883
+ margin:0;
1884
+ }
2024
1885
 
2025
- .tds-input.tds-textarea--resize-none textarea{
2026
- resize:none;
2027
- }
1886
+ .tds-radio-group[aria-invalid="true"]{
1887
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1888
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1889
+ }
2028
1890
 
2029
- .tds-input.tds-textarea--resize-auto textarea{
2030
- resize:vertical;
1891
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1892
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2031
1893
  }
2032
1894
 
2033
- @supports (field-sizing: content){
2034
- .tds-input.tds-textarea--resize-auto textarea{
2035
- field-sizing:content;
2036
- resize:none;
1895
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1896
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1897
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2037
1898
  }
2038
- }
2039
-
2040
- .tds-input textarea{
2041
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2042
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2043
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2044
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2045
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2046
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2047
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2048
- --tds-input-scrollbar-thumb-border-radius:999px;
2049
- --tds-input-scrollbar-thumb-border-width:3px;
2050
- --tds-input-scrollbar-track-margin-block:.125rem;
2051
- scrollbar-color:initial;
2052
- transition-timing-function:var(--t-ease-in-out);
2053
- transition-duration:var(--t-duration-200);
2054
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2055
- }
2056
-
2057
- @media (pointer: fine){
2058
- :is(.tds-input textarea)::-webkit-scrollbar{
2059
- width:12px;
2060
- height:12px;
2061
- cursor:default;
2062
- }
2063
-
2064
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2065
- cursor:default;
2066
- background:var(--tds-input-scrollbar-thumb-color);
2067
- background-clip:content-box;
2068
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2069
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2070
- }
2071
-
2072
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2073
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2074
- }
2075
-
2076
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2077
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2078
- }
2079
-
2080
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2081
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2082
- }
2083
1899
 
2084
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2085
- background:var(--tds-input-scrollbar-surface-color);
2086
- }
1900
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1901
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1902
+ }
2087
1903
 
2088
- :is(.tds-input textarea)::-webkit-resizer{
2089
- background:var(--tds-input-resizer-icon) no-repeat;
2090
- background-position:right bottom;
2091
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1904
+ .tds-radio-group:has(input:required) legend::after{
1905
+ margin-left:.25ch;
1906
+ color:var(--t-text-color-status-error);
1907
+ content:"*";
2092
1908
  }
2093
1909
 
2094
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2095
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2096
- cursor:default;
2097
- }
1910
+ .tds-radio-group-fields{
1911
+ display:flex;
1912
+ flex-direction:column;
1913
+ gap:var(--tds-radio-group-gap);
1914
+ align-items:flex-start;
1915
+ margin-top:var(--t-spacing-1);
1916
+ }
2098
1917
 
2099
- @supports (-moz-appearance: none){
2100
- :is(.tds-input textarea){
2101
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2102
- scrollbar-width:thin;
2103
- }
1918
+ .tds-radio-group-description{
1919
+ display:flex;
1920
+ gap:var(--t-spacing-half);
1921
+ align-items:flex-start;
1922
+ margin:var(--t-spacing-fourth) 0 0;
1923
+ font-size:var(--tds-radio-group-description-font-size);
1924
+ line-height:var(--tds-radio-group-description-line-height);
1925
+ color:var(--tds-radio-group-description-color);
1926
+ cursor:text;
1927
+ }
2104
1928
 
2105
- @media (hover){
2106
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2107
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2108
- }
2109
- }
2110
- }
1929
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1930
+ display:var(--tds-radio-group-description-invalid-icon-display);
1931
+ flex-shrink:0;
1932
+ margin-top:calc(.5lh - .5em);
1933
+ line-height:var(--tds-radio-group-description-line-height);
2111
1934
  }
2112
1935
 
2113
- .tds-modal-overlay{
2114
- position:fixed;
2115
- inset:0;
2116
- z-index:1000;
2117
- display:flex;
2118
- align-items:center;
2119
- justify-content:center;
2120
- background:hsl(0 0% 0% / 40%);
1936
+ .tds-radio-group--sm{
1937
+ --tds-radio-group-line-height:1.35;
1938
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1939
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1940
+ --tds-radio-group-description-line-height:1.3;
2121
1941
  }
2122
1942
 
2123
- .tds-modal-overlay[data-entering]{
2124
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1943
+ .tds-dropdown-popover{
1944
+ min-inline-size:10rem;
1945
+ max-inline-size:24rem;
1946
+ padding:var(--t-spacing-1);
1947
+ overflow:auto;
1948
+ overscroll-behavior:none;
1949
+ -webkit-user-select:none;
1950
+ -moz-user-select:none;
1951
+ user-select:none;
1952
+ outline:0;
1953
+ scrollbar-color:#0004 var(--t-surface-color-card);
1954
+ scrollbar-width:thin;
1955
+ background:var(--t-surface-color-card);
1956
+ background-clip:padding-box;
1957
+ border:1px solid var(--t-border-color);
1958
+ border-radius:var(--t-border-radius);
1959
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1960
+ }
1961
+ .tds-dropdown-popover[data-entering]{
1962
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
2125
1963
  }
2126
-
2127
- .tds-modal-overlay[data-exiting]{
2128
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1964
+ .tds-dropdown-popover[data-exiting]{
1965
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1966
+ }
1967
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1968
+ will-change:opacity, transform;
2129
1969
  }
2130
1970
 
2131
- @keyframes tds-modal-overlay-fade{
1971
+ @keyframes tds-dropdown-popover{
2132
1972
  from{
2133
1973
  opacity:0;
1974
+ transform:translateY(-8px);
2134
1975
  }
2135
1976
  }
2136
1977
 
2137
- .tds-modal-frame{
2138
- --tds-modal-width:600px;
1978
+ @media (prefers-reduced-motion: reduce){
1979
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1980
+ animation:none;
1981
+ }
1982
+ }
2139
1983
 
2140
- display:flex;
2141
- justify-content:center;
2142
- width:min(var(--tds-modal-width), calc(100% - 48px));
1984
+ .tds-dropdown-popover [role="menu"]{
1985
+ outline:0;
2143
1986
  }
1987
+ .tds-dropdown-item{
1988
+ --tds-dropdown-item-color:var(--t-text-color);
1989
+ --tds-dropdown-item-row-gap:0;
1990
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
2144
1991
 
2145
- .tds-modal-frame[data-entering]{
2146
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1992
+ display:flex;
1993
+ row-gap:var(--tds-dropdown-item-row-gap);
1994
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
1995
+ column-gap:var(--tds-dropdown-item-column-gap);
1996
+ align-items:center;
1997
+ padding-block:var(--t-spacing-1);
1998
+ padding-inline:var(--t-spacing-1-half);
1999
+ font-size:1rem;
2000
+ color:var(--tds-dropdown-item-color);
2001
+ text-decoration:none;
2002
+ cursor:default;
2003
+ outline:0;
2004
+ border-radius:var(--t-border-radius);
2005
+ }
2006
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
2007
+ background:var(--t-fill-color-neutral-070);
2008
+ }
2009
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
2010
+ background:var(--t-fill-color-neutral-060);
2147
2011
  }
2012
+ .tds-dropdown-item[data-disabled]{
2013
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
2148
2014
 
2149
- .tds-modal-frame[data-exiting]{
2150
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
2015
+ cursor:not-allowed;
2151
2016
  }
2152
2017
 
2153
- .tds-modal-frame--sm{
2154
- --tds-modal-width:400px;
2018
+ .tds-dropdown-item--destructive{
2019
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
2155
2020
  }
2156
2021
 
2157
- .tds-modal-frame--lg{
2158
- --tds-modal-width:800px;
2022
+ .tds-dropdown-item--staff-only{
2023
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
2159
2024
  }
2160
-
2161
- .tds-modal-frame--xl{
2162
- --tds-modal-width:1000px;
2025
+ a.tds-dropdown-item:is(:hover, :active){
2026
+ color:var(--tds-dropdown-item-color);
2163
2027
  }
2164
-
2165
- @keyframes tds-modal-zoom{
2166
- from{
2167
- opacity:0;
2168
- scale:.96;
2169
- }
2028
+ .tds-dropdown-item [slot="prefix"],
2029
+ .tds-dropdown-item [slot="suffix"]{
2030
+ flex-shrink:0;
2170
2031
  }
2171
2032
 
2172
- @media (prefers-reduced-motion: reduce){
2173
- .tds-modal-overlay[data-entering],
2174
- .tds-modal-overlay[data-exiting],
2175
- .tds-modal-frame[data-entering],
2176
- .tds-modal-frame[data-exiting]{
2177
- animation:none;
2178
- }
2033
+ .tds-dropdown-item [slot="label"]{
2034
+ flex:1;
2035
+ min-width:0;
2036
+ overflow:hidden;
2037
+ text-overflow:ellipsis;
2038
+ white-space:nowrap;
2179
2039
  }
2180
2040
 
2181
- .tds-modal{
2182
- display:flex;
2183
- flex-direction:column;
2184
- width:100%;
2185
- padding-block:var(--t-spacing-3);
2186
- padding-inline:0;
2187
- background:var(--t-surface-color-card);
2188
-
2189
- border:0;
2190
- border-radius:var(--t-border-radius-lg);
2191
- box-shadow:0 4px 18px 0 #0003;
2041
+ .tds-dropdown-item [slot="description"]{
2042
+ font-size:var(--t-font-size-sm);
2043
+ color:var(--t-text-color-secondary);
2192
2044
  }
2193
2045
 
2194
- .tds-modal:focus{
2195
- outline:none;
2196
- }
2046
+ .tds-dropdown-item:has([slot="description"]){
2047
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
2048
+ --tds-dropdown-item-column-gap:0;
2197
2049
 
2198
- .tds-modal-header{
2199
2050
  display:grid;
2200
- grid-template-columns:1fr auto;
2201
- -moz-column-gap:var(--t-spacing-2);
2202
- column-gap:var(--t-spacing-2);
2203
- padding-block:0;
2204
- padding-inline:var(--t-spacing-4);
2051
+ grid-template-areas:"prefix label suffix" ". description .";
2052
+ grid-template-columns:auto 1fr auto;
2205
2053
  }
2206
2054
 
2207
- .tds-modal-title{
2208
- grid-row:1;
2209
- grid-column:1;
2210
- margin:0;
2211
- font-size:var(--t-font-size-2xl);
2212
- font-weight:var(--t-font-weight-medium);
2213
- line-height:140%;
2214
- color:var(--t-text-color-headline);
2055
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
2056
+ grid-area:prefix;
2057
+ margin-inline-end:var(--t-spacing-1);
2215
2058
  }
2216
2059
 
2217
- .tds-modal-subtitle{
2218
- grid-row:2;
2219
- grid-column:1;
2220
- margin:0;
2221
- font-size:var(--t-font-size-md);
2222
- font-weight:var(--t-font-weight-medium);
2223
- line-height:140%;
2224
- color:var(--t-text-color-secondary);
2060
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
2061
+ grid-area:label;
2225
2062
  }
2226
2063
 
2227
- .tds-modal-close{
2228
- grid-row:1;
2229
- grid-column:2;
2230
- align-self:center;
2231
- color:var(--t-icon-color-dim);
2064
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
2065
+ grid-area:description;
2232
2066
  }
2233
2067
 
2234
- .tds-modal-body{
2235
- padding-block:var(--t-spacing-3);
2236
- padding-inline:var(--t-spacing-4);
2068
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
2069
+ grid-area:suffix;
2070
+ margin-inline-start:var(--t-spacing-1);
2237
2071
  }
2238
-
2239
- .tds-modal-body--full-width{
2240
- padding-inline:0;
2072
+ .tds-dropdown-section:not(:first-child){
2073
+ margin-block-start:var(--t-spacing-half);
2241
2074
  }
2242
2075
 
2243
- .tds-modal-footer{
2244
- display:flex;
2245
- gap:var(--t-spacing-2);
2246
- align-items:center;
2247
- justify-content:flex-end;
2248
- padding-block-start:var(--t-spacing-3);
2249
- padding-inline:var(--t-spacing-4);
2076
+ .tds-dropdown-section-label{
2077
+ padding-block:var(--t-spacing-1);
2078
+ padding-inline:var(--t-spacing-half);
2079
+ font-size:var(--t-font-size-sm);
2080
+ font-weight:var(--t-font-weight-semibold);
2081
+ color:var(--t-text-color-secondary);
2082
+ }
2083
+ .tds-dropdown-separator{
2084
+ margin-block:var(--t-spacing-half);
2085
+ margin-inline:0;
2086
+ border:0;
2250
2087
  border-top:1px solid var(--t-border-color);
2251
2088
  }
2252
2089
 
2253
- .tds-modal-footer > [slot="start"]{
2254
- margin-inline-end:auto;
2090
+ .tds-toggle-switch{
2091
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2092
+ --tds-toggle-switch-cursor:pointer;
2093
+ --tds-toggle-switch-display:inline-grid;
2094
+ --tds-toggle-switch-line-height:1.4;
2095
+
2096
+ --tds-toggle-switch-label-color:var(--t-form-color);
2097
+
2098
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2099
+ --tds-toggle-switch-track-outline:none;
2100
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2101
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2102
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2103
+
2104
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2105
+ --tds-toggle-switch-thumb-transform:translateX(0);
2106
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2107
+
2108
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2109
+ --tds-toggle-switch-description-line-height:1.35;
2110
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2111
+ position:relative;
2112
+
2113
+ display:var(--tds-toggle-switch-display);
2114
+ grid-template-columns:auto;
2115
+ grid-auto-columns:1fr;
2116
+ gap:var(--t-spacing-fourth) 0;
2117
+ -webkit-user-select:none;
2118
+ -moz-user-select:none;
2119
+ user-select:none;
2255
2120
  }
2256
2121
 
2257
- @layer t-critical{
2258
- tds-page-header:not(.hydrated){
2259
- display:none;
2122
+ .tds-toggle-switch input[type="checkbox"]{
2123
+ position:absolute;
2124
+ width:var(--tds-toggle-switch-track-width);
2125
+ height:var(--tds-toggle-switch-track-height);
2126
+ margin:0;
2127
+ -webkit-appearance:none;
2128
+ -moz-appearance:none;
2129
+ appearance:none;
2130
+ cursor:var(--tds-toggle-switch-cursor);
2131
+ outline:var(--tds-toggle-switch-track-outline);
2132
+ outline-offset:var(--t-focus-ring-offset);
2133
+ background-color:transparent;
2134
+ border:0;
2135
+ border-radius:var(--t-border-radius-round);
2260
2136
  }
2261
- }
2262
2137
 
2263
- @layer t-component{
2264
- .tds-page-header{
2265
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2266
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2267
- --tds-page-header-color:var(--t-text-color);
2268
- --tds-page-header-bottom-border-color:transparent;
2269
- --tds-page-header-headline-color:var(--t-text-color-headline);
2270
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2271
- --tds-page-header-padding-x:var(--t-spacing-2);
2272
- --tds-page-header-padding-y:var(--t-spacing-2);
2273
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2274
- --tds-page-header-nav-gap:var(--t-spacing-1);
2275
- --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%);
2276
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2277
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2278
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2279
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2280
- --tds-page-header-nav-item-border-width:1px;
2138
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2139
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2140
+ }
2281
2141
 
2282
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2283
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2142
+ .tds-toggle-switch label{
2143
+ display:inline-flex;
2144
+ grid-area:1 / 2;
2145
+ padding-inline-start:var(--t-spacing-1);
2146
+ margin-top:-.09375em;
2147
+ font-size:var(--tds-toggle-switch-font-size);
2148
+ font-weight:var(--t-font-weight-normal);
2149
+ line-height:var(--tds-toggle-switch-line-height);
2150
+ color:var(--tds-toggle-switch-label-color);
2151
+ cursor:var(--tds-toggle-switch-cursor);
2152
+ }
2284
2153
 
2285
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2286
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2287
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2154
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2155
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2156
+ }
2288
2157
 
2289
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2290
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2158
+ .tds-toggle-switch:has(input:checked){
2159
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2160
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2161
+ }
2291
2162
 
2292
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2293
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2294
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2163
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2164
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2165
+ }
2295
2166
 
2296
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2297
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2298
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2299
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2300
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2167
+ .tds-toggle-switch:has(input:disabled){
2168
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2169
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2170
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2171
+ --tds-toggle-switch-cursor:not-allowed;
2301
2172
  }
2302
2173
 
2303
- .tds-page-header--profile{
2304
- --tds-page-header-padding-y:20px;
2305
- }
2174
+ .tds-toggle-switch-track{
2175
+ position:relative;
2176
+ flex-shrink:0;
2177
+ width:var(--tds-toggle-switch-track-width);
2178
+ height:var(--tds-toggle-switch-track-height);
2179
+ background-color:var(--tds-toggle-switch-track-background-color);
2180
+ border-radius:var(--t-border-radius-round);
2181
+ transition:var(--tds-toggle-switch-track-transition);
2182
+ }
2306
2183
 
2307
- @supports (color: light-dark(#fff, #000)){
2308
- .tds-page-header{
2309
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2310
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2311
- }
2184
+ .tds-toggle-switch-track::before{
2185
+ position:absolute;
2186
+ top:var(--t-spacing-fourth);
2187
+ left:var(--t-spacing-fourth);
2188
+ width:var(--tds-toggle-switch-thumb-size);
2189
+ height:var(--tds-toggle-switch-thumb-size);
2190
+ content:"";
2191
+ background-color:#fff;
2192
+ border-radius:var(--t-border-radius-round);
2193
+ transform:var(--tds-toggle-switch-thumb-transform);
2194
+ transition:var(--tds-toggle-switch-thumb-transition);
2312
2195
  }
2313
2196
 
2314
- @media (min-width: 600px){
2315
- .tds-page-header{
2316
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2317
- --tds-page-header-color:var(--t-text-color-secondary);
2318
- --tds-page-header-bottom-border-color:var(--t-border-color);
2319
- --tds-page-header-padding-x:var(--t-spacing-3);
2320
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2321
- --tds-page-header-nav-gap:var(--t-spacing-half);
2322
- --tds-page-header-nav-background:transparent;
2323
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2324
- --tds-page-header-nav-item-border-width:1px;
2325
- --tds-page-header-nav-item-color:var(--t-text-color);
2326
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2327
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2328
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2329
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2330
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2331
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2332
- }
2197
+ @media (prefers-reduced-motion: reduce){
2198
+
2199
+ .tds-toggle-switch-track{
2200
+ --tds-toggle-switch-track-transition:none;
2201
+ --tds-toggle-switch-thumb-transition:none;
2202
+ }
2333
2203
  }
2204
+
2205
+ .tds-toggle-switch-description{
2206
+ display:flex;
2207
+ grid-area:2 / 2;
2208
+ align-items:flex-start;
2209
+ padding-inline-start:var(--t-spacing-1);
2210
+ margin:0;
2211
+ font-size:var(--tds-toggle-switch-description-font-size);
2212
+ line-height:var(--tds-toggle-switch-description-line-height);
2213
+ color:var(--tds-toggle-switch-description-color);
2214
+ cursor:text;
2334
2215
  }
2335
2216
 
2336
- .tds-page-header{
2217
+ .tds-toggle-switch--sm{
2218
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2219
+ --tds-toggle-switch-line-height:1.35;
2220
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2221
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2222
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2223
+ --tds-toggle-switch-description-line-height:1.3;
2224
+ }
2225
+
2226
+ .tds-toggle-switch--hide-label{
2227
+ --tds-toggle-switch-display:inline-flex;
2228
+ }
2229
+
2230
+ .tds-search-input-control{
2231
+ --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2232
+ --tds-search-input-outline-offset:0;
2233
+ --tds-search-input-cursor:text;
2234
+
2337
2235
  display:flex;
2338
- flex-direction:column;
2339
- padding-top:var(--tds-page-header-padding-y);
2340
- color:var(--tds-page-header-color);
2341
- background:var(--tds-page-header-background-color);
2342
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2236
+ gap:var(--tds-field-padding-inline);
2237
+ align-items:center;
2238
+ inline-size:100%;
2239
+ min-block-size:var(--tds-field-min-height);
2240
+ padding-inline:var(--tds-field-padding-inline);
2241
+ font-size:var(--tds-field-font-size);
2242
+ color:var(--tds-field-color);
2243
+ cursor:var(--tds-search-input-cursor);
2244
+ outline:var(--t-focus-ring-width) solid transparent;
2245
+ outline-color:var(--tds-search-input-outline-color);
2246
+ outline-offset:var(--tds-search-input-outline-offset);
2247
+ background-color:var(--tds-field-background-color);
2248
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
2249
+ border-radius:var(--t-form-border-radius);
2250
+ transition-timing-function:var(--t-ease-in-out);
2251
+ transition-duration:var(--t-duration-200);
2252
+ transition-property:background-color, border-color, outline-color, outline-offset;
2343
2253
  }
2344
2254
 
2345
- .tds-page-header:not(.has-nav){
2346
- padding-bottom:var(--tds-page-header-padding-y);
2255
+ .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
2256
+ border-color:var(--tds-field-border-color-hover);
2347
2257
  }
2348
2258
 
2349
- .tds-page-header.inactive{
2350
- background:var(--tds-page-header-background-color-inactive);
2351
- }
2259
+ .tds-search-input-control:has(input:focus){
2260
+ --tds-search-input-outline-color:var(--t-focus-ring-color);
2261
+ --tds-search-input-outline-offset:var(--t-focus-ring-offset);
2352
2262
 
2353
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2354
- width:100%;
2263
+ border-color:var(--t-form-border-color-focus);
2355
2264
  }
2356
2265
 
2357
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2358
- display:flex;
2359
- flex-flow:row wrap;
2360
- gap:var(--t-spacing-half) var(--t-spacing-1);
2361
- align-items:flex-start;
2362
- justify-content:flex-start;
2363
- min-width:0;
2266
+ .tds-search-input-control input{
2267
+ flex:1;
2268
+ min-inline-size:0;
2269
+ padding:0;
2270
+ overflow:hidden;
2271
+ text-overflow:ellipsis;
2272
+ font-family:inherit;
2273
+ font-size:inherit;
2274
+ color:inherit;
2275
+ white-space:nowrap;
2276
+ -webkit-appearance:none;
2277
+ -moz-appearance:none;
2278
+ appearance:none;
2279
+ outline:0;
2280
+ background-color:transparent;
2281
+ border:0;
2364
2282
  }
2365
2283
 
2366
- :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{
2367
- display:flex;
2368
- gap:var(--tds-page-header-nav-gap);
2369
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2370
- margin:0 0 -1px;
2371
- overflow:auto;
2372
- list-style:none;
2373
- background:var(--tds-page-header-nav-background);
2284
+ :is(.tds-search-input-control input)::-moz-placeholder{
2285
+ color:var(--tds-field-placeholder-color);
2286
+ -moz-user-select:none;
2287
+ user-select:none;
2374
2288
  }
2375
2289
 
2376
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2377
- position:relative;
2378
- display:inline-flex;
2379
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2380
- font-size:var(--t-font-size-sm);
2381
- line-height:22px;
2382
- color:var(--tds-page-header-nav-item-color);
2383
- white-space:nowrap;
2384
- text-decoration:none;
2290
+ :is(.tds-search-input-control input)::placeholder{
2291
+ color:var(--tds-field-placeholder-color);
2292
+ -webkit-user-select:none;
2293
+ -moz-user-select:none;
2294
+ user-select:none;
2295
+ }
2296
+
2297
+ :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
2385
2298
  -webkit-appearance:none;
2386
- -moz-appearance:none;
2387
2299
  appearance:none;
2388
- cursor:pointer;
2389
- outline-offset:-2px;
2390
- background-color:var(--tds-page-header-nav-item-background-color);
2391
- background-clip:padding-box;
2392
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2393
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2394
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2395
2300
  }
2396
2301
 
2397
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2398
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2399
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2400
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2401
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2402
- }
2302
+ .tds-search-input-control .tds-search-input-icon{
2303
+ flex-shrink:0;
2304
+ inline-size:1em;
2305
+ color:var(--t-icon-color-dim);
2306
+ }
2403
2307
 
2404
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2405
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2406
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2407
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2408
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2409
- }
2308
+ .tds-search-input-control .tds-search-input-clear-icon{
2309
+ inline-size:calc(var(--tds-field-font-size) * .8);
2310
+ block-size:calc(var(--tds-field-font-size) * .8);
2311
+ }
2410
2312
 
2411
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2412
- background-color:var(--tds-page-header-nav-item-background-color-active);
2413
- border-color:var(--tds-page-header-nav-item-border-color-active);
2414
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2415
- }
2313
+ .tds-search-input-control .tds-btn{
2314
+ --tds-btn-color:var(--t-icon-color-dim);
2315
+ --tds-btn-padding-truncated-x:0;
2316
+ --tds-search-input-clear-button-visibility:hidden;
2416
2317
 
2417
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2418
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2419
- color:var(--tds-page-header-nav-item-color-disabled);
2420
- cursor:not-allowed;
2421
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2422
- opacity:1;
2423
- }
2318
+ visibility:var(--tds-search-input-clear-button-visibility);
2319
+ flex-shrink:0;
2320
+ }
2321
+
2322
+ .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
2323
+ --tds-field-background-color:var(--t-form-background-color-error);
2324
+ --tds-field-border-color:var(--t-form-border-color-error);
2325
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2326
+ }
2327
+
2328
+ .tds-search-input-control:has(:disabled){
2329
+ --tds-field-border-color:var(--t-form-border-color-disabled);
2330
+ --tds-field-background-color:var(--t-form-background-color-disabled);
2331
+ --tds-field-color:var(--t-form-color-disabled);
2332
+ --tds-search-input-cursor:not-allowed;
2333
+ }
2424
2334
 
2425
- @media (min-width: 600px){
2426
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2427
- position:absolute;
2428
- inset:auto -1px -1px;
2429
- height:1px;
2430
- pointer-events:none;
2431
- content:"";
2432
- background-color:var(--tds-page-header-bottom-border-color);
2433
- }
2434
- }
2335
+ .tds-search-input-control:has([readonly]){
2336
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2337
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2338
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2339
+ --tds-field-color:var(--t-form-color-readonly);
2340
+ }
2435
2341
 
2436
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2437
- position:relative;
2342
+ .tds-search-input-control:has([readonly]):has(input:focus){
2343
+ border-color:var(--t-form-border-color-hover);
2438
2344
  }
2439
2345
 
2440
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2441
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2442
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2443
- }
2346
+ @media (prefers-reduced-motion: reduce){
2444
2347
 
2445
- :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{
2348
+ .tds-search-input-control{
2349
+ transition-property:none;
2350
+ }
2351
+ }
2352
+
2353
+ .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
2354
+ :has(:disabled, [readonly])
2355
+ ) .tds-btn{
2356
+ --tds-search-input-clear-button-visibility:visible;
2357
+ }
2358
+
2359
+ .tds-button-group{
2360
+ display:inline-flex;
2361
+ }
2362
+ .tds-button-group > .tds-btn{
2363
+ --tds-button-group-item-z-index:1;
2364
+
2365
+ position:relative;
2366
+ z-index:var(--tds-button-group-item-z-index);
2367
+ border-radius:0;
2368
+ }
2369
+ :is(.tds-button-group > .tds-btn):not(:first-child){
2370
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
2371
+ }
2372
+ :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{
2446
2373
  position:absolute;
2447
- top:-5px;
2448
- right:-2px;
2449
- width:10px;
2450
- height:10px;
2374
+ inset-block:calc(var(--tds-btn-border-width) * -1);
2375
+ width:var(--tds-btn-border-width);
2376
+ pointer-events:none;
2451
2377
  content:"";
2452
- background:var(--tds-page-header-nav-item-indicator-color);
2453
- border-radius:50%;
2378
+ background-color:var(--t-border-color-white);
2454
2379
  }
2455
-
2456
- @media (prefers-reduced-motion: no-preference){
2457
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2458
- animation:indicator-pulse 1.25s ease infinite;
2459
- }
2380
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
2381
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
2460
2382
  }
2383
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
2384
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
2385
+ }
2386
+ :is(.tds-button-group > .tds-btn):hover{
2387
+ --tds-button-group-item-z-index:2;
2388
+ }
2389
+ :is(.tds-button-group > .tds-btn):focus-visible{
2390
+ --tds-button-group-item-z-index:5;
2391
+ }
2392
+ .tds-button-group > .tds-btn:first-child{
2393
+ border-start-start-radius:var(--tds-btn-border-radius);
2394
+ border-end-start-radius:var(--tds-btn-border-radius);
2395
+ }
2396
+ .tds-button-group > .tds-btn:last-child{
2397
+ border-start-end-radius:var(--tds-btn-border-radius);
2398
+ border-end-end-radius:var(--tds-btn-border-radius);
2399
+ }
2461
2400
 
2462
- .tds-page-header__title-bar{
2463
- display:flex;
2464
- flex-direction:column;
2465
- gap:var(--t-spacing-2) var(--t-spacing-1);
2466
- align-items:flex-start;
2467
- justify-content:space-between;
2468
- padding:0 var(--tds-page-header-padding-x);
2469
- }
2401
+ .tds-radio{
2402
+ --tds-radio-font-size:var(--t-font-size-md);
2403
+ --tds-radio-cursor:pointer;
2404
+ --tds-radio-line-height:1.4;
2405
+ --tds-radio-transition-property:border-width;
2470
2406
 
2471
- .tds-page-header--profile > .tds-page-header__title-bar{
2472
- align-items:center;
2473
- }
2407
+ --tds-radio-input-size:var(--t-element-size-md);
2408
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2409
+ --tds-radio-input-border-color:var(--t-form-border-color);
2410
+ --tds-radio-input-border-width:var(--t-form-border-width);
2411
+ --tds-radio-input-background-color:var(--t-form-background-color);
2474
2412
 
2475
- .tds-page-header__primary{
2476
- width:100%;
2413
+ --tds-radio-label-color:var(--t-form-color);
2414
+
2415
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2416
+ --tds-radio-description-line-height:1.35;
2417
+ --tds-radio-description-color:var(--t-text-color-secondary);
2418
+
2419
+ position:relative;
2420
+ display:inline-grid;
2421
+ grid-template-columns:auto;
2422
+ grid-auto-columns:1fr;
2423
+ gap:var(--t-spacing-fourth) 0;
2424
+ line-height:var(--tds-radio-line-height);
2425
+ -webkit-user-select:none;
2426
+ -moz-user-select:none;
2427
+ user-select:none;
2477
2428
  }
2478
2429
 
2479
- .tds-page-header__primary h1{
2480
- margin:0;
2481
- font-size:var(--tds-page-header-headline-font-size);
2430
+ .tds-radio label{
2431
+ grid-area:1 / 2;
2432
+ padding-inline-start:var(--t-spacing-1);
2433
+ font-size:var(--tds-radio-font-size);
2482
2434
  font-weight:var(--t-font-weight-normal);
2483
- line-height:32px;
2484
- color:var(--tds-page-header-headline-color);
2485
- overflow-wrap:break-word;
2435
+ color:var(--tds-radio-label-color);
2436
+ cursor:var(--tds-radio-cursor);
2486
2437
  }
2487
2438
 
2488
- @media (min-width: 960px){
2489
- .tds-page-header__primary{
2490
- flex:1 1 max-content;
2491
- width:auto;
2492
- min-width:0;
2493
- max-width:100%;
2439
+ .tds-radio input[type="radio"]{
2440
+ position:relative;
2441
+ width:1em;
2442
+ height:1em;
2443
+ margin:calc((1lh - 1em) / 2) 0 0;
2444
+ font-size:var(--tds-radio-font-size);
2445
+ line-height:inherit;
2446
+ -webkit-appearance:none;
2447
+ -moz-appearance:none;
2448
+ appearance:none;
2449
+ cursor:var(--tds-radio-cursor);
2450
+ background-color:var(--tds-radio-input-background-color);
2451
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2452
+ border-radius:var(--tds-radio-input-border-radius);
2453
+ transition-timing-function:var(--t-ease-in-out);
2454
+ transition-duration:var(--t-duration-200);
2455
+ transition-property:var(--tds-radio-transition-property);
2494
2456
  }
2495
2457
 
2496
- .tds-page-header__title-bar,
2497
- .tds-page-header--profile .tds-page-header__title-bar{
2498
- flex-flow:row nowrap;
2499
- row-gap:12px;
2500
- align-items:flex-start;
2501
- }
2502
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2503
- width:auto;
2458
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2459
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2460
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2504
2461
  }
2505
2462
 
2506
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2507
- justify-content:flex-end;
2463
+ :is(.tds-radio input[type="radio"]):focus-visible{
2464
+ outline:var(--t-focus-ring-outline);
2465
+ outline-offset:var(--t-focus-ring-offset);
2508
2466
  }
2509
- }
2510
2467
 
2511
- .tds-page-header-phone,
2512
- .tds-page-header-email{
2513
- color:var(--tds-page-header-color);
2514
- white-space:nowrap;
2515
- }
2516
- .tds-page-header-email{
2517
- max-width:100%;
2518
- overflow:hidden;
2519
- text-overflow:ellipsis;
2520
- }
2468
+ :is(.tds-radio input[type="radio"]):disabled{
2469
+ pointer-events:none;
2470
+ }
2521
2471
 
2522
- @keyframes indicator-pulse{
2523
- 0%{
2524
- opacity:.3;
2525
- transform:scale(.9);
2472
+ @media (prefers-reduced-motion: reduce){
2473
+
2474
+ .tds-radio input[type="radio"]{
2475
+ --tds-radio-transition-property:none;
2526
2476
  }
2477
+ }
2527
2478
 
2528
- 100%{
2529
- opacity:0;
2530
- transform:scale(1.75);
2479
+ .tds-radio:has(input:checked){
2480
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2481
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2482
+ --tds-radio-input-border-width:4px;
2483
+ }
2484
+
2485
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2486
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2487
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2488
+ }
2489
+
2490
+ .tds-radio:has(input:user-invalid){
2491
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2492
+ }
2493
+
2494
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2495
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2496
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2497
+ }
2498
+
2499
+ .tds-radio:has(input:disabled){
2500
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2501
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2502
+
2503
+ --tds-radio-label-color:var(--t-form-color-disabled);
2504
+ --tds-radio-description-color:var(--t-form-color-disabled);
2505
+ --tds-radio-cursor:not-allowed;
2531
2506
  }
2507
+
2508
+ .tds-radio:has(input:disabled) input:checked{
2509
+ --tds-radio-input-background-color:var(--t-form-background-color);
2510
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2511
+ }
2512
+
2513
+ .tds-radio-description{
2514
+ display:flex;
2515
+ grid-area:2 / 2;
2516
+ gap:var(--t-spacing-half);
2517
+ align-items:flex-start;
2518
+ padding-inline-start:var(--t-spacing-1);
2519
+ margin:0;
2520
+ font-size:var(--tds-radio-description-font-size);
2521
+ line-height:var(--tds-radio-description-line-height);
2522
+ color:var(--tds-radio-description-color);
2523
+ cursor:text;
2524
+ }
2525
+
2526
+ .tds-radio--sm{
2527
+ --tds-radio-line-height:1.35;
2528
+ --tds-radio-input-size:var(--t-element-size-sm);
2529
+ --tds-radio-font-size:var(--t-font-size-sm);
2530
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2531
+ --tds-radio-description-line-height:1.3;
2532
2532
  }
2533
2533
 
2534
2534
  .tds-input{