@planningcenter/tapestry 4.1.0-rc.7 → 4.1.0

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 (59) hide show
  1. package/dist/components/DataTable/DataTable.d.ts +18 -7
  2. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  3. package/dist/components/DataTable/DataTable.js +19 -8
  4. package/dist/components/DataTable/DataTable.js.map +1 -1
  5. package/dist/components/DataTable/ResultsCount.d.ts +4 -2
  6. package/dist/components/DataTable/ResultsCount.d.ts.map +1 -1
  7. package/dist/components/DataTable/ResultsCount.js +18 -10
  8. package/dist/components/DataTable/ResultsCount.js.map +1 -1
  9. package/dist/components/DataTable/TableActions.js +1 -0
  10. package/dist/components/DataTable/TableActions.js.map +1 -1
  11. package/dist/components/button/ActionsDropdownIconButton.d.ts +86 -0
  12. package/dist/components/button/ActionsDropdownIconButton.d.ts.map +1 -0
  13. package/dist/components/button/ActionsDropdownIconButton.js +20 -0
  14. package/dist/components/button/ActionsDropdownIconButton.js.map +1 -0
  15. package/dist/components/button/index.d.ts +2 -0
  16. package/dist/components/button/index.d.ts.map +1 -1
  17. package/dist/components/combo-box/ComboBox.d.ts +3 -1
  18. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  19. package/dist/components/combo-box/ComboBox.js +2 -1
  20. package/dist/components/combo-box/ComboBox.js.map +1 -1
  21. package/dist/components/link/IconLink.d.ts +5 -5
  22. package/dist/components/modal/ModalHeader.js +1 -0
  23. package/dist/components/modal/ModalHeader.js.map +1 -1
  24. package/dist/components/page-header/PageHeader.d.ts.map +1 -1
  25. package/dist/components/page-header/PageHeader.js +3 -24
  26. package/dist/components/page-header/PageHeader.js.map +1 -1
  27. package/dist/components/page-header/index.d.ts +2 -0
  28. package/dist/components/page-header/index.d.ts.map +1 -1
  29. package/dist/components/page-header/index.js +3 -0
  30. package/dist/components/page-header/index.js.map +1 -1
  31. package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.d.ts +11 -0
  32. package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.d.ts.map +1 -0
  33. package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.js +33 -0
  34. package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.js.map +1 -0
  35. package/dist/components/search-input/SearchInput.js +1 -0
  36. package/dist/components/search-input/SearchInput.js.map +1 -1
  37. package/dist/components/time-field/TimeField.d.ts +5 -3
  38. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  39. package/dist/components/time-field/TimeField.js +4 -2
  40. package/dist/components/time-field/TimeField.js.map +1 -1
  41. package/dist/ext/@internationalized/date/dist/private/CalendarDate.js +39 -3
  42. package/dist/ext/@internationalized/date/dist/private/CalendarDate.js.map +1 -1
  43. package/dist/ext/@internationalized/date/dist/private/manipulation.js +9 -1
  44. package/dist/ext/@internationalized/date/dist/private/manipulation.js.map +1 -1
  45. package/dist/ext/@internationalized/date/dist/private/string.js +22 -2
  46. package/dist/ext/@internationalized/date/dist/private/string.js.map +1 -1
  47. package/dist/index.css +38 -0
  48. package/dist/index.css.map +1 -1
  49. package/dist/index.js +1 -0
  50. package/dist/index.js.map +1 -1
  51. package/dist/reactRender.css +811 -772
  52. package/dist/reactRender.css.map +1 -1
  53. package/dist/reactRenderLegacy.css +811 -772
  54. package/dist/reactRenderLegacy.css.map +1 -1
  55. package/dist/unstable.css +40 -1
  56. package/dist/unstable.css.map +1 -1
  57. package/dist/unstable.js +1 -0
  58. package/dist/unstable.js.map +1 -1
  59. package/package.json +2 -2
@@ -1039,775 +1039,614 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1039
1039
  flex-direction:column;
1040
1040
  }
1041
1041
 
1042
- .tds-button-group{
1043
- display:inline-flex;
1044
- }
1045
- .tds-button-group > .tds-btn{
1046
- --tds-button-group-item-z-index:1;
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);
1042
+ @layer t-critical{
1043
+ tds-page-header:not(.hydrated){
1044
+ display:none;
1082
1045
  }
1046
+ }
1083
1047
 
1084
- .tds-checkbox{
1085
- --tds-checkbox-font-size:var(--t-font-size-md);
1086
- --tds-checkbox-cursor:pointer;
1087
- --tds-checkbox-line-height:1.4;
1088
- --tds-checkbox-transition-property:background-color, border-color;
1089
-
1090
- --tds-checkbox-input-size:var(--t-element-size-md);
1091
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1092
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1093
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1094
-
1095
- --tds-checkbox-input-icon:none;
1096
- --tds-checkbox-input-icon-visibility:hidden;
1097
- --tds-checkbox-input-icon-opacity:0;
1098
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1048
+ @layer t-component{
1049
+ .tds-page-header{
1050
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1051
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1052
+ --tds-page-header-color:var(--t-text-color);
1053
+ --tds-page-header-bottom-border-color:transparent;
1054
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1055
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1056
+ --tds-page-header-padding-x:var(--t-spacing-2);
1057
+ --tds-page-header-padding-y:var(--t-spacing-2);
1058
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1059
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1060
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1061
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1062
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1063
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1064
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1065
+ --tds-page-header-nav-item-border-width:1px;
1099
1066
 
1100
- --tds-checkbox-label-color:var(--t-form-color);
1067
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1068
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1101
1069
 
1102
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1103
- --tds-checkbox-description-line-height:1.35;
1104
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1105
- --tds-checkbox-description-invalid-icon-display:none;
1070
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1071
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1072
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1106
1073
 
1107
- position:relative;
1108
- display:inline-grid;
1109
- grid-template-columns:auto;
1110
- grid-auto-columns:1fr;
1111
- gap:var(--t-spacing-fourth) 0;
1112
- line-height:var(--tds-checkbox-line-height);
1113
- -webkit-user-select:none;
1114
- -moz-user-select:none;
1115
- user-select:none;
1116
- }
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);
1117
1076
 
1118
- .tds-checkbox label{
1119
- grid-area:1 / 2;
1120
- padding-inline-start:var(--t-spacing-1);
1121
- font-size:var(--tds-checkbox-font-size);
1122
- font-weight:var(--t-font-weight-normal);
1123
- color:var(--tds-checkbox-label-color);
1124
- cursor:var(--tds-checkbox-cursor);
1125
- }
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);
1126
1080
 
1127
- .tds-checkbox tds-indeterminate{
1128
- display:flex;
1081
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1082
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1083
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1084
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1085
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1129
1086
  }
1130
1087
 
1131
- .tds-checkbox input[type="checkbox"]{
1132
- position:relative;
1133
- width:1em;
1134
- height:1em;
1135
- margin:calc((1lh - 1em) / 2) 0 0;
1136
- font-size:var(--tds-checkbox-font-size);
1137
- line-height:inherit;
1138
- -webkit-appearance:none;
1139
- -moz-appearance:none;
1140
- appearance:none;
1141
- cursor:var(--tds-checkbox-cursor);
1142
- background-color:var(--tds-checkbox-input-background-color);
1143
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1144
- border-radius:var(--tds-checkbox-input-border-radius);
1145
- transition-timing-function:var(--t-ease-in-out);
1146
- transition-duration:var(--t-duration-200);
1147
- transition-property:var(--tds-checkbox-transition-property);
1088
+ .tds-page-header--profile{
1089
+ --tds-page-header-padding-y:20px;
1148
1090
  }
1149
1091
 
1150
- :is(.tds-checkbox input[type="checkbox"])::before{
1151
- position:absolute;
1152
- top:50%;
1153
- left:50%;
1154
- visibility:var(--tds-checkbox-input-icon-visibility);
1155
- width:100%;
1156
- height:100%;
1157
- content:"";
1158
- background-color:var(--tds-checkbox-input-icon-fill);
1159
- border-radius:var(--tds-checkbox-input-border-radius);
1160
- opacity:var(--tds-checkbox-input-icon-opacity);
1161
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1162
- mask-image:var(--tds-checkbox-input-icon);
1163
- -webkit-mask-repeat:no-repeat;
1164
- mask-repeat:no-repeat;
1165
- -webkit-mask-size:contain;
1166
- mask-size:contain;
1167
- transform:translate(-50%, -50%);
1168
- }
1169
-
1170
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1171
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1172
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1173
- }
1174
-
1175
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1176
- outline:var(--t-focus-ring-outline);
1177
- outline-offset:var(--t-focus-ring-offset);
1092
+ @supports (color: light-dark(#fff, #000)){
1093
+ .tds-page-header{
1094
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1095
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1178
1096
  }
1097
+ }
1179
1098
 
1180
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1181
- pointer-events:none;
1099
+ @media (min-width: 600px){
1100
+ .tds-page-header{
1101
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1102
+ --tds-page-header-color:var(--t-text-color-secondary);
1103
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1104
+ --tds-page-header-padding-x:var(--t-spacing-3);
1105
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1106
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1107
+ --tds-page-header-nav-background:transparent;
1108
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1109
+ --tds-page-header-nav-item-border-width:1px;
1110
+ --tds-page-header-nav-item-color:var(--t-text-color);
1111
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1112
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1113
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1114
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1115
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1116
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1182
1117
  }
1118
+ }
1119
+ }
1183
1120
 
1184
- @media (prefers-reduced-motion: reduce){
1121
+ .tds-page-header{
1122
+ display:flex;
1123
+ flex-direction:column;
1124
+ padding-top:var(--tds-page-header-padding-y);
1125
+ color:var(--tds-page-header-color);
1126
+ background:var(--tds-page-header-background-color);
1127
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1128
+ }
1185
1129
 
1186
- .tds-checkbox input[type="checkbox"]{
1187
- --tds-checkbox-transition-property:none;
1130
+ .tds-page-header:not(.has-nav){
1131
+ padding-bottom:var(--tds-page-header-padding-y);
1188
1132
  }
1189
- }
1190
1133
 
1191
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1192
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1193
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1194
- --tds-checkbox-input-icon-visibility:visible;
1195
- --tds-checkbox-input-icon-opacity:1;
1134
+ .tds-page-header.inactive{
1135
+ background:var(--tds-page-header-background-color-inactive);
1196
1136
  }
1197
1137
 
1198
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1199
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1200
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1201
- }
1202
-
1203
- .tds-checkbox:has(input:checked){
1204
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1138
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
+ width:100%;
1205
1140
  }
1206
1141
 
1207
- .tds-checkbox:has(input:indeterminate){
1208
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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;
1209
1149
  }
1210
1150
 
1211
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1212
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1213
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1214
- --tds-checkbox-description-invalid-icon-display:inline-block;
1215
- }
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
+ }
1216
1160
 
1217
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1218
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1219
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1161
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1162
+ position:relative;
1163
+ display:inline-flex;
1164
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1165
+ font-size:var(--t-font-size-sm);
1166
+ line-height:22px;
1167
+ color:var(--tds-page-header-nav-item-color);
1168
+ white-space:nowrap;
1169
+ text-decoration:none;
1170
+ -webkit-appearance:none;
1171
+ -moz-appearance:none;
1172
+ appearance:none;
1173
+ cursor:pointer;
1174
+ outline-offset:-2px;
1175
+ background-color:var(--tds-page-header-nav-item-background-color);
1176
+ background-clip:padding-box;
1177
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1178
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1179
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1220
1180
  }
1221
1181
 
1222
- :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{
1223
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1224
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1225
- }
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
+ }
1188
+
1189
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1190
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1191
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1192
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1193
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1194
+ }
1195
+
1196
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1197
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1198
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1199
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1200
+ }
1226
1201
 
1227
- :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){
1228
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1229
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1230
- }
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
+ }
1231
1209
 
1232
- .tds-checkbox:has(input:required) label::after{
1233
- margin-left:.25ch;
1234
- color:var(--t-text-color-status-error);
1235
- content:"*";
1210
+ @media (min-width: 600px){
1211
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1212
+ position:absolute;
1213
+ inset:auto -1px -1px;
1214
+ height:1px;
1215
+ pointer-events:none;
1216
+ content:"";
1217
+ background-color:var(--tds-page-header-bottom-border-color);
1218
+ }
1219
+ }
1220
+
1221
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
+ position:relative;
1236
1223
  }
1237
1224
 
1238
- .tds-checkbox:has(input:disabled){
1239
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1240
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1225
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1226
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1227
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1228
+ }
1241
1229
 
1242
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1243
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1244
- --tds-checkbox-cursor:not-allowed;
1245
- }
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
+ }
1246
1240
 
1247
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1248
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1249
- }
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
+ }
1250
1246
 
1251
- .tds-checkbox-description{
1247
+ .tds-page-header__title-bar{
1252
1248
  display:flex;
1253
- grid-area:2 / 2;
1254
- gap:var(--t-spacing-half);
1249
+ flex-direction:column;
1250
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1255
1251
  align-items:flex-start;
1256
- padding-inline-start:var(--t-spacing-1);
1257
- margin:0;
1258
- font-size:var(--tds-checkbox-description-font-size);
1259
- line-height:var(--tds-checkbox-description-line-height);
1260
- color:var(--tds-checkbox-description-color);
1261
- cursor:text;
1252
+ justify-content:space-between;
1253
+ padding:0 var(--tds-page-header-padding-x);
1262
1254
  }
1263
1255
 
1264
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1265
- display:var(--tds-checkbox-description-invalid-icon-display);
1266
- flex-shrink:0;
1267
- margin-top:calc(.5lh - .5em);
1268
- line-height:var(--tds-checkbox-description-line-height);
1256
+ .tds-page-header--profile > .tds-page-header__title-bar{
1257
+ align-items:center;
1269
1258
  }
1270
1259
 
1271
- .tds-checkbox--sm{
1272
- --tds-checkbox-line-height:1.35;
1273
- --tds-checkbox-input-size:var(--t-element-size-sm);
1274
- --tds-checkbox-font-size:var(--t-font-size-sm);
1275
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1276
- --tds-checkbox-description-line-height:1.3;
1277
- }
1278
-
1279
- .tds-checkbox-group{
1280
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1281
- --tds-checkbox-group-line-height:1.4;
1282
- --tds-checkbox-group-gap:var(--t-spacing-1);
1283
-
1284
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1285
- --tds-checkbox-group-description-line-height:1.35;
1286
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1287
- --tds-checkbox-group-description-invalid-icon-display:none;
1288
- display:flex;
1289
- flex-direction:column;
1290
- gap:0;
1291
- padding:0;
1292
- margin:0;
1293
-
1294
- font-size:var(--tds-checkbox-group-font-size);
1295
- line-height:var(--tds-checkbox-group-line-height);
1296
- border:0;
1260
+ .tds-page-header__primary{
1261
+ width:100%;
1297
1262
  }
1298
1263
 
1299
- .tds-checkbox-group legend{
1300
- float:left;
1301
- padding:0;
1264
+ .tds-page-header__primary h1{
1302
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;
1303
1271
  }
1304
1272
 
1305
- .tds-checkbox-group[aria-invalid="true"]{
1306
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1307
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1273
+ @media (min-width: 960px){
1274
+ .tds-page-header__primary{
1275
+ flex:1 1 max-content;
1276
+ width:auto;
1277
+ min-width:0;
1278
+ max-width:100%;
1308
1279
  }
1309
1280
 
1310
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1311
- margin-left:.25ch;
1312
- color:var(--t-text-color-status-error);
1313
- content:"*";
1281
+ .tds-page-header__title-bar,
1282
+ .tds-page-header--profile .tds-page-header__title-bar{
1283
+ flex-flow:row nowrap;
1284
+ row-gap:12px;
1285
+ align-items:flex-start;
1286
+ }
1287
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
+ width:auto;
1314
1289
  }
1315
1290
 
1316
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1317
- content:none;
1291
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
+ justify-content:flex-end;
1318
1293
  }
1319
-
1320
- .tds-checkbox-group-fields{
1321
- display:flex;
1322
- flex-direction:column;
1323
- gap:var(--tds-checkbox-group-gap);
1324
- align-items:flex-start;
1325
- margin-top:var(--t-spacing-1);
1326
1294
  }
1327
1295
 
1328
- .tds-checkbox-group-description{
1329
- display:flex;
1330
- gap:var(--t-spacing-half);
1331
- align-items:flex-start;
1332
- margin:var(--t-spacing-fourth) 0 0;
1333
- font-size:var(--tds-checkbox-group-description-font-size);
1334
- line-height:var(--tds-checkbox-group-description-line-height);
1335
- color:var(--tds-checkbox-group-description-color);
1336
- cursor:text;
1296
+ .tds-page-header-phone,
1297
+ .tds-page-header-email{
1298
+ color:var(--tds-page-header-color);
1299
+ white-space:nowrap;
1337
1300
  }
1338
-
1339
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1340
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1341
- flex-shrink:0;
1342
- margin-top:calc(.5lh - .5em);
1343
- line-height:var(--tds-checkbox-group-description-line-height);
1344
- }
1345
-
1346
- .tds-checkbox-group--sm{
1347
- --tds-checkbox-group-line-height:1.35;
1348
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1349
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1350
- --tds-checkbox-group-description-line-height:1.3;
1301
+ .tds-page-header-email{
1302
+ max-width:100%;
1303
+ overflow:hidden;
1304
+ text-overflow:ellipsis;
1351
1305
  }
1352
1306
 
1353
-
1354
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1355
- -webkit-appearance:none;
1356
- appearance:none;
1357
- }
1358
-
1359
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1360
- inline-size:1em;
1361
- block-size:2em;
1362
- }
1363
- @supports (field-sizing: content){
1364
- .tds-input--auto-width{
1365
- inline-size:-moz-fit-content;
1366
- inline-size:fit-content;
1367
- min-inline-size:min(100%, 122px);
1307
+ @keyframes indicator-pulse{
1308
+ 0%{
1309
+ opacity:.3;
1310
+ transform:scale(.9);
1368
1311
  }
1369
1312
 
1370
- .tds-input--auto-width input{
1371
- field-sizing:content;
1372
- inline-size:auto;
1313
+ 100%{
1314
+ opacity:0;
1315
+ transform:scale(1.75);
1373
1316
  }
1374
1317
  }
1375
1318
 
1376
- .tds-modal-overlay{
1377
- --tds-modal-min-margin-block:var(--t-spacing-3);
1378
-
1379
- position:fixed;
1380
- inset:0;
1381
- z-index:1000;
1382
- display:grid;
1383
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1384
- justify-items:center;
1385
- overflow-y:auto;
1386
- background:hsl(0 0% 0% / 40%);
1319
+ .tds-button-group{
1320
+ display:inline-flex;
1387
1321
  }
1322
+ .tds-button-group > .tds-btn{
1323
+ --tds-button-group-item-z-index:1;
1388
1324
 
1389
- .tds-modal-overlay[data-entering]{
1390
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1325
+ position:relative;
1326
+ z-index:var(--tds-button-group-item-z-index);
1327
+ border-radius:0;
1328
+ }
1329
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1330
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1331
+ }
1332
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1333
+ position:absolute;
1334
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1335
+ width:var(--tds-btn-border-width);
1336
+ pointer-events:none;
1337
+ content:"";
1338
+ background-color:var(--t-border-color-white);
1339
+ }
1340
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1341
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1342
+ }
1343
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1344
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1345
+ }
1346
+ :is(.tds-button-group > .tds-btn):hover{
1347
+ --tds-button-group-item-z-index:2;
1348
+ }
1349
+ :is(.tds-button-group > .tds-btn):focus-visible{
1350
+ --tds-button-group-item-z-index:5;
1351
+ }
1352
+ .tds-button-group > .tds-btn:first-child{
1353
+ border-start-start-radius:var(--tds-btn-border-radius);
1354
+ border-end-start-radius:var(--tds-btn-border-radius);
1391
1355
  }
1392
-
1393
- .tds-modal-overlay[data-exiting]{
1394
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1356
+ .tds-button-group > .tds-btn:last-child{
1357
+ border-start-end-radius:var(--tds-btn-border-radius);
1358
+ border-end-end-radius:var(--tds-btn-border-radius);
1395
1359
  }
1396
1360
 
1397
- @keyframes tds-modal-overlay-fade{
1398
- from{
1399
- opacity:0;
1400
- }
1401
- }
1361
+ .tds-checkbox-group{
1362
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1363
+ --tds-checkbox-group-line-height:1.4;
1364
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1402
1365
 
1403
- .tds-modal-frame{
1404
- --tds-modal-width:600px;
1405
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1366
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1367
+ --tds-checkbox-group-description-line-height:1.35;
1368
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1369
+ --tds-checkbox-group-description-invalid-icon-display:none;
1406
1370
  display:flex;
1371
+ flex-direction:column;
1372
+ gap:0;
1373
+ padding:0;
1374
+ margin:0;
1407
1375
 
1408
- grid-row:2;
1409
- justify-content:center;
1410
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1376
+ font-size:var(--tds-checkbox-group-font-size);
1377
+ line-height:var(--tds-checkbox-group-line-height);
1378
+ border:0;
1411
1379
  }
1412
1380
 
1413
- .tds-modal-frame[data-entering]{
1414
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1381
+ .tds-checkbox-group legend{
1382
+ float:left;
1383
+ padding:0;
1384
+ margin:0;
1415
1385
  }
1416
1386
 
1417
- .tds-modal-frame[data-exiting]{
1418
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1387
+ .tds-checkbox-group[aria-invalid="true"]{
1388
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1389
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1419
1390
  }
1420
1391
 
1421
- .tds-modal-frame--sm{
1422
- --tds-modal-width:400px;
1423
- }
1424
-
1425
- .tds-modal-frame--lg{
1426
- --tds-modal-width:800px;
1427
- }
1428
-
1429
- .tds-modal-frame--xl{
1430
- --tds-modal-width:1000px;
1431
- }
1432
-
1433
- @keyframes tds-modal-zoom{
1434
- from{
1435
- opacity:0;
1436
- scale:.96;
1437
- }
1438
- }
1392
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1393
+ margin-left:.25ch;
1394
+ color:var(--t-text-color-status-error);
1395
+ content:"*";
1396
+ }
1439
1397
 
1440
- @media (prefers-reduced-motion: reduce){
1441
- .tds-modal-overlay[data-entering],
1442
- .tds-modal-overlay[data-exiting],
1443
- .tds-modal-frame[data-entering],
1444
- .tds-modal-frame[data-exiting]{
1445
- animation:none;
1446
- }
1447
- }
1398
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1399
+ content:none;
1400
+ }
1448
1401
 
1449
- .tds-modal{
1402
+ .tds-checkbox-group-fields{
1450
1403
  display:flex;
1451
1404
  flex-direction:column;
1452
- width:100%;
1453
- padding-block-start:var(--t-spacing-3);
1454
- padding-inline:0;
1455
- background:var(--t-surface-color-card);
1405
+ gap:var(--tds-checkbox-group-gap);
1406
+ align-items:flex-start;
1407
+ margin-top:var(--t-spacing-1);
1408
+ }
1456
1409
 
1457
- border:0;
1458
- border-radius:var(--t-border-radius-lg);
1459
- box-shadow:0 4px 18px 0 #0003;
1410
+ .tds-checkbox-group-description{
1411
+ display:flex;
1412
+ gap:var(--t-spacing-half);
1413
+ align-items:flex-start;
1414
+ margin:var(--t-spacing-fourth) 0 0;
1415
+ font-size:var(--tds-checkbox-group-description-font-size);
1416
+ line-height:var(--tds-checkbox-group-description-line-height);
1417
+ color:var(--tds-checkbox-group-description-color);
1418
+ cursor:text;
1460
1419
  }
1461
1420
 
1462
- .tds-modal:focus{
1463
- outline:none;
1421
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1422
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1423
+ flex-shrink:0;
1424
+ margin-top:calc(.5lh - .5em);
1425
+ line-height:var(--tds-checkbox-group-description-line-height);
1464
1426
  }
1465
1427
 
1466
- .tds-modal-header{
1467
- display:grid;
1468
- grid-template-columns:1fr auto;
1469
- -moz-column-gap:var(--t-spacing-2);
1470
- column-gap:var(--t-spacing-2);
1471
- padding-block:0;
1472
- padding-inline:var(--t-spacing-4);
1473
- }
1474
-
1475
- .tds-modal-title{
1476
- grid-row:1;
1477
- grid-column:1;
1478
- margin:0;
1479
- font-size:var(--t-font-size-2xl);
1480
- font-weight:var(--t-font-weight-medium);
1481
- line-height:140%;
1482
- color:var(--t-text-color-headline);
1428
+ .tds-checkbox-group--sm{
1429
+ --tds-checkbox-group-line-height:1.35;
1430
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1431
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1432
+ --tds-checkbox-group-description-line-height:1.3;
1483
1433
  }
1484
1434
 
1485
- .tds-modal-subtitle{
1486
- grid-row:2;
1487
- grid-column:1;
1488
- margin:0;
1489
- font-size:var(--t-font-size-md);
1490
- font-weight:var(--t-font-weight-medium);
1491
- line-height:140%;
1492
- color:var(--t-text-color-secondary);
1493
- }
1435
+ .tds-checkbox{
1436
+ --tds-checkbox-font-size:var(--t-font-size-md);
1437
+ --tds-checkbox-cursor:pointer;
1438
+ --tds-checkbox-line-height:1.4;
1439
+ --tds-checkbox-transition-property:background-color, border-color;
1494
1440
 
1495
- .tds-modal-close{
1496
- grid-row:1;
1497
- grid-column:2;
1498
- align-self:center;
1499
- color:var(--t-icon-color-dim);
1500
- }
1441
+ --tds-checkbox-input-size:var(--t-element-size-md);
1442
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1443
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1444
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1501
1445
 
1502
- .tds-modal-body{
1503
- padding-block:var(--t-spacing-3);
1504
- padding-inline:var(--t-spacing-4);
1505
- }
1446
+ --tds-checkbox-input-icon:none;
1447
+ --tds-checkbox-input-icon-visibility:hidden;
1448
+ --tds-checkbox-input-icon-opacity:0;
1449
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1506
1450
 
1507
- .tds-modal-body--full-width{
1508
- padding-inline:0;
1509
- }
1451
+ --tds-checkbox-label-color:var(--t-form-color);
1510
1452
 
1511
- .tds-modal-footer{
1512
- display:flex;
1513
- gap:var(--t-spacing-2);
1514
- align-items:center;
1515
- justify-content:flex-end;
1516
- padding-block:var(--t-spacing-3);
1517
- padding-inline:var(--t-spacing-4);
1518
- border-top:1px solid var(--t-border-color);
1519
- }
1453
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1454
+ --tds-checkbox-description-line-height:1.35;
1455
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1456
+ --tds-checkbox-description-invalid-icon-display:none;
1520
1457
 
1521
- .tds-modal-footer > [slot="start"]{
1522
- margin-inline-end:auto;
1458
+ position:relative;
1459
+ display:inline-grid;
1460
+ grid-template-columns:auto;
1461
+ grid-auto-columns:1fr;
1462
+ gap:var(--t-spacing-fourth) 0;
1463
+ line-height:var(--tds-checkbox-line-height);
1464
+ -webkit-user-select:none;
1465
+ -moz-user-select:none;
1466
+ user-select:none;
1523
1467
  }
1524
1468
 
1525
- @media (min-width: 720px){
1526
- .tds-modal-overlay{
1527
- --tds-modal-min-margin-block:0;
1469
+ .tds-checkbox label{
1470
+ grid-area:1 / 2;
1471
+ padding-inline-start:var(--t-spacing-1);
1472
+ font-size:var(--tds-checkbox-font-size);
1473
+ font-weight:var(--t-font-weight-normal);
1474
+ color:var(--tds-checkbox-label-color);
1475
+ cursor:var(--tds-checkbox-cursor);
1528
1476
  }
1529
1477
 
1530
- .tds-modal-footer{
1531
- position:sticky;
1532
- bottom:0;
1533
- background:var(--t-surface-color-card);
1478
+ .tds-checkbox tds-indeterminate{
1479
+ display:flex;
1534
1480
  }
1535
- }
1536
1481
 
1537
- @layer t-critical{
1538
- tds-page-header:not(.hydrated){
1539
- display:none;
1482
+ .tds-checkbox input[type="checkbox"]{
1483
+ position:relative;
1484
+ width:1em;
1485
+ height:1em;
1486
+ margin:calc((1lh - 1em) / 2) 0 0;
1487
+ font-size:var(--tds-checkbox-font-size);
1488
+ line-height:inherit;
1489
+ -webkit-appearance:none;
1490
+ -moz-appearance:none;
1491
+ appearance:none;
1492
+ cursor:var(--tds-checkbox-cursor);
1493
+ background-color:var(--tds-checkbox-input-background-color);
1494
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1495
+ border-radius:var(--tds-checkbox-input-border-radius);
1496
+ transition-timing-function:var(--t-ease-in-out);
1497
+ transition-duration:var(--t-duration-200);
1498
+ transition-property:var(--tds-checkbox-transition-property);
1540
1499
  }
1541
- }
1542
-
1543
- @layer t-component{
1544
- .tds-page-header{
1545
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1546
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1547
- --tds-page-header-color:var(--t-text-color);
1548
- --tds-page-header-bottom-border-color:transparent;
1549
- --tds-page-header-headline-color:var(--t-text-color-headline);
1550
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1551
- --tds-page-header-padding-x:var(--t-spacing-2);
1552
- --tds-page-header-padding-y:var(--t-spacing-2);
1553
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1554
- --tds-page-header-nav-gap:var(--t-spacing-1);
1555
- --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%);
1556
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1557
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1558
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1559
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1560
- --tds-page-header-nav-item-border-width:1px;
1561
1500
 
1562
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1563
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1501
+ :is(.tds-checkbox input[type="checkbox"])::before{
1502
+ position:absolute;
1503
+ top:50%;
1504
+ left:50%;
1505
+ visibility:var(--tds-checkbox-input-icon-visibility);
1506
+ width:100%;
1507
+ height:100%;
1508
+ content:"";
1509
+ background-color:var(--tds-checkbox-input-icon-fill);
1510
+ border-radius:var(--tds-checkbox-input-border-radius);
1511
+ opacity:var(--tds-checkbox-input-icon-opacity);
1512
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1513
+ mask-image:var(--tds-checkbox-input-icon);
1514
+ -webkit-mask-repeat:no-repeat;
1515
+ mask-repeat:no-repeat;
1516
+ -webkit-mask-size:contain;
1517
+ mask-size:contain;
1518
+ transform:translate(-50%, -50%);
1519
+ }
1564
1520
 
1565
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1566
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1567
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1521
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1522
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1523
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1524
+ }
1568
1525
 
1569
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1570
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1526
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1527
+ outline:var(--t-focus-ring-outline);
1528
+ outline-offset:var(--t-focus-ring-offset);
1529
+ }
1571
1530
 
1572
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1573
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1574
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1531
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1532
+ pointer-events:none;
1533
+ }
1575
1534
 
1576
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1577
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1578
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1579
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1580
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1581
- }
1535
+ @media (prefers-reduced-motion: reduce){
1582
1536
 
1583
- .tds-page-header--profile{
1584
- --tds-page-header-padding-y:20px;
1537
+ .tds-checkbox input[type="checkbox"]{
1538
+ --tds-checkbox-transition-property:none;
1585
1539
  }
1586
-
1587
- @supports (color: light-dark(#fff, #000)){
1588
- .tds-page-header{
1589
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1590
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1591
1540
  }
1592
- }
1593
1541
 
1594
- @media (min-width: 600px){
1595
- .tds-page-header{
1596
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1597
- --tds-page-header-color:var(--t-text-color-secondary);
1598
- --tds-page-header-bottom-border-color:var(--t-border-color);
1599
- --tds-page-header-padding-x:var(--t-spacing-3);
1600
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1601
- --tds-page-header-nav-gap:var(--t-spacing-half);
1602
- --tds-page-header-nav-background:transparent;
1603
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1604
- --tds-page-header-nav-item-border-width:1px;
1605
- --tds-page-header-nav-item-color:var(--t-text-color);
1606
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1607
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1608
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1609
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1610
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1611
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1612
- }
1542
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1543
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1544
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1545
+ --tds-checkbox-input-icon-visibility:visible;
1546
+ --tds-checkbox-input-icon-opacity:1;
1613
1547
  }
1614
- }
1615
-
1616
- .tds-page-header{
1617
- display:flex;
1618
- flex-direction:column;
1619
- padding-top:var(--tds-page-header-padding-y);
1620
- color:var(--tds-page-header-color);
1621
- background:var(--tds-page-header-background-color);
1622
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1623
- }
1624
1548
 
1625
- .tds-page-header:not(.has-nav){
1626
- padding-bottom:var(--tds-page-header-padding-y);
1627
- }
1549
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1550
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1551
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1552
+ }
1628
1553
 
1629
- .tds-page-header.inactive{
1630
- background:var(--tds-page-header-background-color-inactive);
1554
+ .tds-checkbox:has(input:checked){
1555
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1631
1556
  }
1632
1557
 
1633
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1634
- width:100%;
1558
+ .tds-checkbox:has(input:indeterminate){
1559
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1635
1560
  }
1636
1561
 
1637
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1638
- display:flex;
1639
- flex-flow:row wrap;
1640
- gap:var(--t-spacing-half) var(--t-spacing-1);
1641
- align-items:flex-start;
1642
- justify-content:flex-start;
1643
- min-width:0;
1562
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1563
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1564
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1565
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1644
1566
  }
1645
1567
 
1646
- :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{
1647
- display:flex;
1648
- gap:var(--tds-page-header-nav-gap);
1649
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1650
- margin:0 0 -1px;
1651
- overflow:auto;
1652
- list-style:none;
1653
- background:var(--tds-page-header-nav-background);
1568
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1569
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1570
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1654
1571
  }
1655
1572
 
1656
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1657
- position:relative;
1658
- display:inline-flex;
1659
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1660
- font-size:var(--t-font-size-sm);
1661
- line-height:22px;
1662
- color:var(--tds-page-header-nav-item-color);
1663
- white-space:nowrap;
1664
- text-decoration:none;
1665
- -webkit-appearance:none;
1666
- -moz-appearance:none;
1667
- appearance:none;
1668
- cursor:pointer;
1669
- outline-offset:-2px;
1670
- background-color:var(--tds-page-header-nav-item-background-color);
1671
- background-clip:padding-box;
1672
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1673
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1674
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1573
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1574
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1575
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1675
1576
  }
1676
1577
 
1677
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1678
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1679
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1680
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1681
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1578
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1579
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1580
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1682
1581
  }
1683
1582
 
1684
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1685
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1686
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1687
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1688
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1689
- }
1690
-
1691
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1692
- background-color:var(--tds-page-header-nav-item-background-color-active);
1693
- border-color:var(--tds-page-header-nav-item-border-color-active);
1694
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1695
- }
1696
-
1697
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1698
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1699
- color:var(--tds-page-header-nav-item-color-disabled);
1700
- cursor:not-allowed;
1701
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1702
- opacity:1;
1703
- }
1704
-
1705
- @media (min-width: 600px){
1706
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1707
- position:absolute;
1708
- inset:auto -1px -1px;
1709
- height:1px;
1710
- pointer-events:none;
1711
- content:"";
1712
- background-color:var(--tds-page-header-bottom-border-color);
1713
- }
1714
- }
1715
-
1716
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1717
- position:relative;
1583
+ .tds-checkbox:has(input:required) label::after{
1584
+ margin-left:.25ch;
1585
+ color:var(--t-text-color-status-error);
1586
+ content:"*";
1718
1587
  }
1719
1588
 
1720
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1721
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1722
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1723
- }
1589
+ .tds-checkbox:has(input:disabled){
1590
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1591
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1724
1592
 
1725
- :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{
1726
- position:absolute;
1727
- top:-5px;
1728
- right:-2px;
1729
- width:10px;
1730
- height:10px;
1731
- content:"";
1732
- background:var(--tds-page-header-nav-item-indicator-color);
1733
- border-radius:50%;
1734
- }
1593
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1594
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1595
+ --tds-checkbox-cursor:not-allowed;
1596
+ }
1735
1597
 
1736
- @media (prefers-reduced-motion: no-preference){
1737
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1738
- animation:indicator-pulse 1.25s ease infinite;
1739
- }
1740
- }
1598
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1599
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1600
+ }
1741
1601
 
1742
- .tds-page-header__title-bar{
1602
+ .tds-checkbox-description{
1743
1603
  display:flex;
1744
- flex-direction:column;
1745
- gap:var(--t-spacing-2) var(--t-spacing-1);
1604
+ grid-area:2 / 2;
1605
+ gap:var(--t-spacing-half);
1746
1606
  align-items:flex-start;
1747
- justify-content:space-between;
1748
- padding:0 var(--tds-page-header-padding-x);
1749
- }
1750
-
1751
- .tds-page-header--profile > .tds-page-header__title-bar{
1752
- align-items:center;
1753
- }
1754
-
1755
- .tds-page-header__primary{
1756
- width:100%;
1607
+ padding-inline-start:var(--t-spacing-1);
1608
+ margin:0;
1609
+ font-size:var(--tds-checkbox-description-font-size);
1610
+ line-height:var(--tds-checkbox-description-line-height);
1611
+ color:var(--tds-checkbox-description-color);
1612
+ cursor:text;
1757
1613
  }
1758
1614
 
1759
- .tds-page-header__primary h1{
1760
- margin:0;
1761
- font-size:var(--tds-page-header-headline-font-size);
1762
- font-weight:var(--t-font-weight-normal);
1763
- line-height:32px;
1764
- color:var(--tds-page-header-headline-color);
1765
- overflow-wrap:break-word;
1766
- }
1767
-
1768
- @media (min-width: 960px){
1769
- .tds-page-header__primary{
1770
- flex:1 1 max-content;
1771
- width:auto;
1772
- min-width:0;
1773
- max-width:100%;
1774
- }
1775
-
1776
- .tds-page-header__title-bar,
1777
- .tds-page-header--profile .tds-page-header__title-bar{
1778
- flex-flow:row nowrap;
1779
- row-gap:12px;
1780
- align-items:flex-start;
1615
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1616
+ display:var(--tds-checkbox-description-invalid-icon-display);
1617
+ flex-shrink:0;
1618
+ margin-top:calc(.5lh - .5em);
1619
+ line-height:var(--tds-checkbox-description-line-height);
1781
1620
  }
1782
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1783
- width:auto;
1784
- }
1785
1621
 
1786
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1787
- justify-content:flex-end;
1788
- }
1622
+ .tds-checkbox--sm{
1623
+ --tds-checkbox-line-height:1.35;
1624
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1625
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1626
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1627
+ --tds-checkbox-description-line-height:1.3;
1789
1628
  }
1790
1629
 
1791
- .tds-page-header-phone,
1792
- .tds-page-header-email{
1793
- color:var(--tds-page-header-color);
1794
- white-space:nowrap;
1795
- }
1796
- .tds-page-header-email{
1797
- max-width:100%;
1798
- overflow:hidden;
1799
- text-overflow:ellipsis;
1800
- }
1801
1630
 
1802
- @keyframes indicator-pulse{
1803
- 0%{
1804
- opacity:.3;
1805
- transform:scale(.9);
1631
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1632
+ -webkit-appearance:none;
1633
+ appearance:none;
1634
+ }
1635
+
1636
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1637
+ inline-size:1em;
1638
+ block-size:2em;
1639
+ }
1640
+ @supports (field-sizing: content){
1641
+ .tds-input--auto-width{
1642
+ inline-size:-moz-fit-content;
1643
+ inline-size:fit-content;
1644
+ min-inline-size:min(100%, 122px);
1806
1645
  }
1807
1646
 
1808
- 100%{
1809
- opacity:0;
1810
- transform:scale(1.75);
1647
+ .tds-input--auto-width input{
1648
+ field-sizing:content;
1649
+ inline-size:auto;
1811
1650
  }
1812
1651
  }
1813
1652
 
@@ -1868,80 +1707,324 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1868
1707
  transition-property:var(--tds-radio-transition-property);
1869
1708
  }
1870
1709
 
1871
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1872
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1873
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1874
- }
1710
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1711
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1712
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1713
+ }
1714
+
1715
+ :is(.tds-radio input[type="radio"]):focus-visible{
1716
+ outline:var(--t-focus-ring-outline);
1717
+ outline-offset:var(--t-focus-ring-offset);
1718
+ }
1719
+
1720
+ :is(.tds-radio input[type="radio"]):disabled{
1721
+ pointer-events:none;
1722
+ }
1723
+
1724
+ @media (prefers-reduced-motion: reduce){
1725
+
1726
+ .tds-radio input[type="radio"]{
1727
+ --tds-radio-transition-property:none;
1728
+ }
1729
+ }
1730
+
1731
+ .tds-radio:has(input:checked){
1732
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1733
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1734
+ --tds-radio-input-border-width:4px;
1735
+ }
1736
+
1737
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1738
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1739
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1740
+ }
1741
+
1742
+ .tds-radio:has(input:user-invalid){
1743
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1744
+ }
1745
+
1746
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1747
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1748
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1749
+ }
1750
+
1751
+ .tds-radio:has(input:disabled){
1752
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1753
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1754
+
1755
+ --tds-radio-label-color:var(--t-form-color-disabled);
1756
+ --tds-radio-description-color:var(--t-form-color-disabled);
1757
+ --tds-radio-cursor:not-allowed;
1758
+ }
1759
+
1760
+ .tds-radio:has(input:disabled) input:checked{
1761
+ --tds-radio-input-background-color:var(--t-form-background-color);
1762
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1763
+ }
1764
+
1765
+ .tds-radio-description{
1766
+ display:flex;
1767
+ grid-area:2 / 2;
1768
+ gap:var(--t-spacing-half);
1769
+ align-items:flex-start;
1770
+ padding-inline-start:var(--t-spacing-1);
1771
+ margin:0;
1772
+ font-size:var(--tds-radio-description-font-size);
1773
+ line-height:var(--tds-radio-description-line-height);
1774
+ color:var(--tds-radio-description-color);
1775
+ cursor:text;
1776
+ }
1777
+
1778
+ .tds-radio--sm{
1779
+ --tds-radio-line-height:1.35;
1780
+ --tds-radio-input-size:var(--t-element-size-sm);
1781
+ --tds-radio-font-size:var(--t-font-size-sm);
1782
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1783
+ --tds-radio-description-line-height:1.3;
1784
+ }
1785
+
1786
+ .tds-radio-group{
1787
+ --tds-radio-group-font-size:var(--t-font-size-md);
1788
+ --tds-radio-group-line-height:1.4;
1789
+ --tds-radio-group-gap:var(--t-spacing-1);
1790
+
1791
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1792
+ --tds-radio-group-description-line-height:1.35;
1793
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1794
+ --tds-radio-group-description-invalid-icon-display:none;
1795
+ display:flex;
1796
+ flex-direction:column;
1797
+ gap:0;
1798
+ padding:0;
1799
+ margin:0;
1800
+
1801
+ font-size:var(--tds-radio-group-font-size);
1802
+ line-height:var(--tds-radio-group-line-height);
1803
+ border:0;
1804
+ }
1805
+
1806
+ .tds-radio-group legend{
1807
+ float:left;
1808
+ padding:0;
1809
+ margin:0;
1810
+ }
1811
+
1812
+ .tds-radio-group[aria-invalid="true"]{
1813
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1814
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1815
+ }
1816
+
1817
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1818
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1819
+ }
1820
+
1821
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1822
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1823
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1824
+ }
1825
+
1826
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1827
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1828
+ }
1829
+
1830
+ .tds-radio-group:has(input:required) legend::after{
1831
+ margin-left:.25ch;
1832
+ color:var(--t-text-color-status-error);
1833
+ content:"*";
1834
+ }
1835
+
1836
+ .tds-radio-group-fields{
1837
+ display:flex;
1838
+ flex-direction:column;
1839
+ gap:var(--tds-radio-group-gap);
1840
+ align-items:flex-start;
1841
+ margin-top:var(--t-spacing-1);
1842
+ }
1843
+
1844
+ .tds-radio-group-description{
1845
+ display:flex;
1846
+ gap:var(--t-spacing-half);
1847
+ align-items:flex-start;
1848
+ margin:var(--t-spacing-fourth) 0 0;
1849
+ font-size:var(--tds-radio-group-description-font-size);
1850
+ line-height:var(--tds-radio-group-description-line-height);
1851
+ color:var(--tds-radio-group-description-color);
1852
+ cursor:text;
1853
+ }
1854
+
1855
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1856
+ display:var(--tds-radio-group-description-invalid-icon-display);
1857
+ flex-shrink:0;
1858
+ margin-top:calc(.5lh - .5em);
1859
+ line-height:var(--tds-radio-group-description-line-height);
1860
+ }
1861
+
1862
+ .tds-radio-group--sm{
1863
+ --tds-radio-group-line-height:1.35;
1864
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1865
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1866
+ --tds-radio-group-description-line-height:1.3;
1867
+ }
1868
+
1869
+ .tds-modal-overlay{
1870
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1871
+
1872
+ position:fixed;
1873
+ inset:0;
1874
+ z-index:1000;
1875
+ display:grid;
1876
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1877
+ justify-items:center;
1878
+ overflow-y:auto;
1879
+ background:hsl(0 0% 0% / 40%);
1880
+ }
1881
+
1882
+ .tds-modal-overlay[data-entering]{
1883
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1884
+ }
1885
+
1886
+ .tds-modal-overlay[data-exiting]{
1887
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1888
+ }
1889
+
1890
+ @keyframes tds-modal-overlay-fade{
1891
+ from{
1892
+ opacity:0;
1893
+ }
1894
+ }
1895
+
1896
+ .tds-modal-frame{
1897
+ --tds-modal-width:600px;
1898
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1899
+ display:flex;
1900
+
1901
+ grid-row:2;
1902
+ justify-content:center;
1903
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1904
+ }
1905
+
1906
+ .tds-modal-frame[data-entering]{
1907
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1908
+ }
1909
+
1910
+ .tds-modal-frame[data-exiting]{
1911
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1912
+ }
1875
1913
 
1876
- :is(.tds-radio input[type="radio"]):focus-visible{
1877
- outline:var(--t-focus-ring-outline);
1878
- outline-offset:var(--t-focus-ring-offset);
1879
- }
1914
+ .tds-modal-frame--sm{
1915
+ --tds-modal-width:400px;
1916
+ }
1880
1917
 
1881
- :is(.tds-radio input[type="radio"]):disabled{
1882
- pointer-events:none;
1883
- }
1918
+ .tds-modal-frame--lg{
1919
+ --tds-modal-width:800px;
1920
+ }
1884
1921
 
1885
- @media (prefers-reduced-motion: reduce){
1922
+ .tds-modal-frame--xl{
1923
+ --tds-modal-width:1000px;
1924
+ }
1886
1925
 
1887
- .tds-radio input[type="radio"]{
1888
- --tds-radio-transition-property:none;
1926
+ @keyframes tds-modal-zoom{
1927
+ from{
1928
+ opacity:0;
1929
+ scale:.96;
1889
1930
  }
1890
- }
1931
+ }
1891
1932
 
1892
- .tds-radio:has(input:checked){
1893
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1894
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1895
- --tds-radio-input-border-width:4px;
1933
+ @media (prefers-reduced-motion: reduce){
1934
+ .tds-modal-overlay[data-entering],
1935
+ .tds-modal-overlay[data-exiting],
1936
+ .tds-modal-frame[data-entering],
1937
+ .tds-modal-frame[data-exiting]{
1938
+ animation:none;
1896
1939
  }
1940
+ }
1897
1941
 
1898
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1899
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1900
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1901
- }
1942
+ .tds-modal{
1943
+ display:flex;
1944
+ flex-direction:column;
1945
+ width:100%;
1946
+ padding-block-start:var(--t-spacing-3);
1947
+ padding-inline:0;
1948
+ background:var(--t-surface-color-card);
1902
1949
 
1903
- .tds-radio:has(input:user-invalid){
1904
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1950
+ border:0;
1951
+ border-radius:var(--t-border-radius-lg);
1952
+ box-shadow:0 4px 18px 0 #0003;
1953
+ }
1954
+
1955
+ .tds-modal:focus{
1956
+ outline:none;
1905
1957
  }
1906
1958
 
1907
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1908
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1909
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1910
- }
1959
+ .tds-modal-header{
1960
+ display:grid;
1961
+ grid-template-columns:1fr auto;
1962
+ -moz-column-gap:var(--t-spacing-2);
1963
+ column-gap:var(--t-spacing-2);
1964
+ padding-block:0;
1965
+ padding-inline:var(--t-spacing-4);
1966
+ }
1911
1967
 
1912
- .tds-radio:has(input:disabled){
1913
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1914
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1968
+ .tds-modal-title{
1969
+ grid-row:1;
1970
+ grid-column:1;
1971
+ margin:0;
1972
+ font-size:var(--t-font-size-2xl);
1973
+ font-weight:var(--t-font-weight-medium);
1974
+ line-height:140%;
1975
+ color:var(--t-text-color-headline);
1976
+ }
1915
1977
 
1916
- --tds-radio-label-color:var(--t-form-color-disabled);
1917
- --tds-radio-description-color:var(--t-form-color-disabled);
1918
- --tds-radio-cursor:not-allowed;
1919
- }
1978
+ .tds-modal-subtitle{
1979
+ grid-row:2;
1980
+ grid-column:1;
1981
+ margin:0;
1982
+ font-size:var(--t-font-size-md);
1983
+ font-weight:var(--t-font-weight-medium);
1984
+ line-height:140%;
1985
+ color:var(--t-text-color-secondary);
1986
+ }
1920
1987
 
1921
- .tds-radio:has(input:disabled) input:checked{
1922
- --tds-radio-input-background-color:var(--t-form-background-color);
1923
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1924
- }
1988
+ .tds-modal-close{
1989
+ grid-row:1;
1990
+ grid-column:2;
1991
+ align-self:center;
1992
+ color:var(--t-icon-color-dim);
1993
+ }
1925
1994
 
1926
- .tds-radio-description{
1995
+ .tds-modal-body{
1996
+ padding-block:var(--t-spacing-3);
1997
+ padding-inline:var(--t-spacing-4);
1998
+ }
1999
+
2000
+ .tds-modal-body--full-width{
2001
+ padding-inline:0;
2002
+ }
2003
+
2004
+ .tds-modal-footer{
1927
2005
  display:flex;
1928
- grid-area:2 / 2;
1929
- gap:var(--t-spacing-half);
1930
- align-items:flex-start;
1931
- padding-inline-start:var(--t-spacing-1);
1932
- margin:0;
1933
- font-size:var(--tds-radio-description-font-size);
1934
- line-height:var(--tds-radio-description-line-height);
1935
- color:var(--tds-radio-description-color);
1936
- cursor:text;
2006
+ gap:var(--t-spacing-2);
2007
+ align-items:center;
2008
+ justify-content:flex-end;
2009
+ padding-block:var(--t-spacing-3);
2010
+ padding-inline:var(--t-spacing-4);
2011
+ border-top:1px solid var(--t-border-color);
1937
2012
  }
1938
2013
 
1939
- .tds-radio--sm{
1940
- --tds-radio-line-height:1.35;
1941
- --tds-radio-input-size:var(--t-element-size-sm);
1942
- --tds-radio-font-size:var(--t-font-size-sm);
1943
- --tds-radio-description-font-size:var(--t-font-size-xs);
1944
- --tds-radio-description-line-height:1.3;
2014
+ .tds-modal-footer > [slot="start"]{
2015
+ margin-inline-end:auto;
2016
+ }
2017
+
2018
+ @media (min-width: 720px){
2019
+ .tds-modal-overlay{
2020
+ --tds-modal-min-margin-block:0;
2021
+ }
2022
+
2023
+ .tds-modal-footer{
2024
+ position:sticky;
2025
+ bottom:0;
2026
+ background:var(--t-surface-color-card);
2027
+ }
1945
2028
  }
1946
2029
 
1947
2030
  .tds-input:has(textarea){
@@ -2189,89 +2272,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2189
2272
  --tds-toggle-switch-display:inline-flex;
2190
2273
  }
2191
2274
 
2192
- .tds-radio-group{
2193
- --tds-radio-group-font-size:var(--t-font-size-md);
2194
- --tds-radio-group-line-height:1.4;
2195
- --tds-radio-group-gap:var(--t-spacing-1);
2196
-
2197
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2198
- --tds-radio-group-description-line-height:1.35;
2199
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2200
- --tds-radio-group-description-invalid-icon-display:none;
2201
- display:flex;
2202
- flex-direction:column;
2203
- gap:0;
2204
- padding:0;
2205
- margin:0;
2206
-
2207
- font-size:var(--tds-radio-group-font-size);
2208
- line-height:var(--tds-radio-group-line-height);
2209
- border:0;
2210
- }
2211
-
2212
- .tds-radio-group legend{
2213
- float:left;
2214
- padding:0;
2215
- margin:0;
2216
- }
2217
-
2218
- .tds-radio-group[aria-invalid="true"]{
2219
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2220
- --tds-radio-group-description-invalid-icon-display:inline-block;
2221
- }
2222
-
2223
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2224
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2225
- }
2226
-
2227
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2228
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2229
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2230
- }
2231
-
2232
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2233
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2234
- }
2235
-
2236
- .tds-radio-group:has(input:required) legend::after{
2237
- margin-left:.25ch;
2238
- color:var(--t-text-color-status-error);
2239
- content:"*";
2240
- }
2241
-
2242
- .tds-radio-group-fields{
2243
- display:flex;
2244
- flex-direction:column;
2245
- gap:var(--tds-radio-group-gap);
2246
- align-items:flex-start;
2247
- margin-top:var(--t-spacing-1);
2248
- }
2249
-
2250
- .tds-radio-group-description{
2251
- display:flex;
2252
- gap:var(--t-spacing-half);
2253
- align-items:flex-start;
2254
- margin:var(--t-spacing-fourth) 0 0;
2255
- font-size:var(--tds-radio-group-description-font-size);
2256
- line-height:var(--tds-radio-group-description-line-height);
2257
- color:var(--tds-radio-group-description-color);
2258
- cursor:text;
2259
- }
2260
-
2261
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2262
- display:var(--tds-radio-group-description-invalid-icon-display);
2263
- flex-shrink:0;
2264
- margin-top:calc(.5lh - .5em);
2265
- line-height:var(--tds-radio-group-description-line-height);
2266
- }
2267
-
2268
- .tds-radio-group--sm{
2269
- --tds-radio-group-line-height:1.35;
2270
- --tds-radio-group-font-size:var(--t-font-size-sm);
2271
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2272
- --tds-radio-group-description-line-height:1.3;
2273
- }
2274
-
2275
2275
  .tds-input{
2276
2276
  --tds-input-border-color:var(--t-form-border-color);
2277
2277
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -4152,7 +4152,8 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4152
4152
  }
4153
4153
 
4154
4154
  .tds-data-table-column-label--hidden,
4155
- .tds-data-table-cell-label--hidden{
4155
+ .tds-data-table-cell-label--hidden,
4156
+ .tds-data-table-results-count-label--hidden{
4156
4157
  position:absolute;
4157
4158
  width:1px;
4158
4159
  height:1px;
@@ -4865,6 +4866,16 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4865
4866
  transform:rotate(.5turn);
4866
4867
  }
4867
4868
 
4869
+ .tds-btn--actions-dropdown .actions-icon{
4870
+ transform:rotate(.25turn);
4871
+ }
4872
+
4873
+ .tds-btn--actions-dropdown[aria-expanded="true"]{
4874
+ color:var(--tds-btn-color-active);
4875
+ background-color:var(--tds-btn-bg-active);
4876
+ border-color:var(--tds-btn-border-color-active);
4877
+ }
4878
+
4868
4879
  .tds-btn--full-width{
4869
4880
  width:100%;
4870
4881
  }
@@ -5261,18 +5272,46 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5261
5272
 
5262
5273
  .tds-combo-box{
5263
5274
  --tds-combo-box-button-offset:4px;
5275
+ --tds-combo-box-search-icon-size:var(--tds-field-font-size);
5276
+ --tds-combo-box-search-icon-color:var(--t-icon-color-dim);
5264
5277
  }
5265
5278
 
5266
5279
  .tds-combo-box[data-open] .tds-combo-box-button > svg{
5267
5280
  transform:rotate(.5turn);
5268
5281
  }
5269
5282
 
5283
+ .tds-combo-box[data-disabled]{
5284
+ --tds-combo-box-search-icon-color:var(--t-form-color-disabled);
5285
+ }
5286
+
5270
5287
  .tds-combo-box--lg{
5271
5288
  --tds-combo-box-button-offset:5px;
5272
5289
  }
5273
5290
  .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
5274
5291
  display:none;
5275
5292
  }
5293
+ .tds-combo-box-field:has(.tds-combo-box-search-icon){
5294
+ position:relative;
5295
+ }
5296
+ .tds-combo-box-search-icon{
5297
+ position:absolute;
5298
+ inset-block:0;
5299
+ inset-inline-start:var(--tds-field-padding-inline);
5300
+ inline-size:var(--tds-combo-box-search-icon-size);
5301
+ block-size:var(--tds-combo-box-search-icon-size);
5302
+ margin-block:auto;
5303
+ color:var(--tds-combo-box-search-icon-color);
5304
+ pointer-events:none;
5305
+ }
5306
+ .tds-combo-box-search-icon + .tds-combo-box-input{
5307
+ padding-inline-start:calc(
5308
+ var(--tds-field-padding-inline) * 2 + var(--tds-combo-box-search-icon-size)
5309
+ );
5310
+ }
5311
+
5312
+ .tds-combo-box-field:has([readonly]){
5313
+ --tds-combo-box-search-icon-color:var(--t-form-color-readonly);
5314
+ }
5276
5315
  .tds-combo-box-input{
5277
5316
  display:flex;
5278
5317
  flex:1;