@planningcenter/tapestry 4.6.0-rc.5 → 4.6.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 (54) hide show
  1. package/dist/components/DataTable/ActiveFilters.d.ts +6 -2
  2. package/dist/components/DataTable/ActiveFilters.d.ts.map +1 -1
  3. package/dist/components/DataTable/ActiveFilters.js +24 -6
  4. package/dist/components/DataTable/ActiveFilters.js.map +1 -1
  5. package/dist/components/DataTable/DataTable.d.ts +4 -3
  6. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  7. package/dist/components/DataTable/DataTable.js +2 -2
  8. package/dist/components/DataTable/DataTable.js.map +1 -1
  9. package/dist/components/DataTable/FilterTypes.d.ts +2 -2
  10. package/dist/components/DataTable/FilterTypes.d.ts.map +1 -1
  11. package/dist/components/DataTable/OperatorSelect.d.ts +9 -0
  12. package/dist/components/DataTable/OperatorSelect.d.ts.map +1 -0
  13. package/dist/components/DataTable/OperatorSelect.js +33 -0
  14. package/dist/components/DataTable/OperatorSelect.js.map +1 -0
  15. package/dist/components/button/Button.d.ts +12 -5
  16. package/dist/components/button/Button.d.ts.map +1 -1
  17. package/dist/components/button/Button.js +0 -1
  18. package/dist/components/button/Button.js.map +1 -1
  19. package/dist/components/field/Field.d.ts +3 -1
  20. package/dist/components/field/Field.d.ts.map +1 -1
  21. package/dist/components/field/Field.js +2 -2
  22. package/dist/components/field/Field.js.map +1 -1
  23. package/dist/components/input/Input.d.ts +12 -3
  24. package/dist/components/input/Input.d.ts.map +1 -1
  25. package/dist/components/input/Input.js +2 -2
  26. package/dist/components/input/Input.js.map +1 -1
  27. package/dist/components/input-text-base/InputTextBase.d.ts +3 -1
  28. package/dist/components/input-text-base/InputTextBase.d.ts.map +1 -1
  29. package/dist/components/input-text-base/InputTextBase.js +2 -2
  30. package/dist/components/input-text-base/InputTextBase.js.map +1 -1
  31. package/dist/components/search-input/SearchInput.d.ts +2 -0
  32. package/dist/components/search-input/SearchInput.d.ts.map +1 -1
  33. package/dist/components/search-input/SearchInput.js +2 -2
  34. package/dist/components/search-input/SearchInput.js.map +1 -1
  35. package/dist/components/select/Select.d.ts +2 -0
  36. package/dist/components/select/Select.d.ts.map +1 -1
  37. package/dist/components/select/Select.js +2 -2
  38. package/dist/components/select/Select.js.map +1 -1
  39. package/dist/index.css +1 -1
  40. package/dist/index.css.map +1 -1
  41. package/dist/packages/tapestry-render/dist/{buildComponent-DDhu-82j.js → buildComponent-C5PfOgH9.js} +343 -351
  42. package/dist/packages/tapestry-render/dist/buildComponent-C5PfOgH9.js.map +1 -0
  43. package/dist/packages/tapestry-render/dist/index.js +2 -2
  44. package/dist/packages/tapestry-render/dist/index.js.map +1 -1
  45. package/dist/packages/tapestry-render/dist/legacy.js +2 -2
  46. package/dist/packages/tapestry-render/dist/legacy.js.map +1 -1
  47. package/dist/reactRender.css +809 -809
  48. package/dist/reactRender.css.map +1 -1
  49. package/dist/reactRenderLegacy.css +809 -809
  50. package/dist/reactRenderLegacy.css.map +1 -1
  51. package/dist/unstable.css +4219 -4219
  52. package/dist/unstable.css.map +1 -1
  53. package/package.json +3 -3
  54. package/dist/packages/tapestry-render/dist/buildComponent-DDhu-82j.js.map +0 -1
@@ -677,6 +677,48 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
+ .tds-button-group{
681
+ display:inline-flex;
682
+ }
683
+ .tds-button-group > .tds-btn{
684
+ --tds-button-group-item-z-index:1;
685
+
686
+ position:relative;
687
+ z-index:var(--tds-button-group-item-z-index);
688
+ border-radius:0;
689
+ }
690
+ :is(.tds-button-group > .tds-btn):not(:first-child){
691
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
+ }
693
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
+ position:absolute;
695
+ inset-block:calc(var(--tds-btn-border-width) * -1);
696
+ width:var(--tds-btn-border-width);
697
+ pointer-events:none;
698
+ content:"";
699
+ background-color:var(--t-border-color-white);
700
+ }
701
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
+ }
704
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
+ }
707
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
708
+ --tds-button-group-item-z-index:2;
709
+ }
710
+ :is(.tds-button-group > .tds-btn):focus-visible{
711
+ --tds-button-group-item-z-index:5;
712
+ }
713
+ .tds-button-group > .tds-btn:first-child{
714
+ border-start-start-radius:var(--tds-btn-border-radius);
715
+ border-end-start-radius:var(--tds-btn-border-radius);
716
+ }
717
+ .tds-button-group > .tds-btn:last-child{
718
+ border-start-end-radius:var(--tds-btn-border-radius);
719
+ border-end-end-radius:var(--tds-btn-border-radius);
720
+ }
721
+
680
722
 
681
723
  @media (prefers-reduced-motion: no-preference){
682
724
 
@@ -1039,324 +1081,200 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1039
1081
  flex-direction:column;
1040
1082
  }
1041
1083
 
1042
- @layer t-critical{
1043
- tds-page-header:not(.hydrated){
1044
- display:none;
1045
- }
1046
- }
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;
1047
1089
 
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;
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);
1066
1094
 
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);
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);
1069
1099
 
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);
1100
+ --tds-checkbox-label-color:var(--t-form-color);
1073
1101
 
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);
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;
1076
1106
 
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);
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
+ }
1080
1117
 
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);
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);
1086
1125
  }
1087
1126
 
1088
- .tds-page-header--profile{
1089
- --tds-page-header-padding-y:20px;
1127
+ .tds-checkbox tds-indeterminate{
1128
+ display:flex;
1090
1129
  }
1091
1130
 
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));
1096
- }
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);
1097
1148
  }
1098
1149
 
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);
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%);
1117
1168
  }
1118
- }
1119
- }
1120
1169
 
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
- }
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
+ }
1129
1174
 
1130
- .tds-page-header:not(.has-nav){
1131
- padding-bottom:var(--tds-page-header-padding-y);
1175
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1176
+ outline:var(--t-focus-ring-outline);
1177
+ outline-offset:var(--t-focus-ring-offset);
1178
+ }
1179
+
1180
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1181
+ pointer-events:none;
1182
+ }
1183
+
1184
+ @media (prefers-reduced-motion: reduce){
1185
+
1186
+ .tds-checkbox input[type="checkbox"]{
1187
+ --tds-checkbox-transition-property:none;
1132
1188
  }
1189
+ }
1133
1190
 
1134
- .tds-page-header.inactive{
1135
- background:var(--tds-page-header-background-color-inactive);
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;
1136
1196
  }
1137
1197
 
1138
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
- width:100%;
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");
1140
1205
  }
1141
1206
 
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;
1207
+ .tds-checkbox:has(input:indeterminate){
1208
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1149
1209
  }
1150
1210
 
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);
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
+ }
1216
+
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);
1159
1220
  }
1160
1221
 
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;
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);
1180
1225
  }
1181
1226
 
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);
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);
1187
1230
  }
1188
1231
 
1189
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1190
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1191
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1192
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1193
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1194
- }
1195
-
1196
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1197
- background-color:var(--tds-page-header-nav-item-background-color-active);
1198
- border-color:var(--tds-page-header-nav-item-border-color-active);
1199
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1200
- }
1201
-
1202
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1203
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1204
- color:var(--tds-page-header-nav-item-color-disabled);
1205
- cursor:not-allowed;
1206
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
- opacity:1;
1208
- }
1209
-
1210
- @media (min-width: 600px){
1211
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1212
- position:absolute;
1213
- inset:auto -1px -1px;
1214
- height:1px;
1215
- pointer-events:none;
1216
- content:"";
1217
- background-color:var(--tds-page-header-bottom-border-color);
1218
- }
1219
- }
1220
-
1221
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
- position:relative;
1232
+ .tds-checkbox:has(input:required) label::after{
1233
+ margin-left:.25ch;
1234
+ color:var(--t-text-color-status-error);
1235
+ content:"*";
1223
1236
  }
1224
1237
 
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
- }
1229
-
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
- }
1240
-
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
- }
1246
-
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
- }
1255
-
1256
- .tds-page-header--profile > .tds-page-header__title-bar{
1257
- align-items:center;
1258
- }
1259
-
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;
1271
- }
1272
-
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
- }
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);
1280
1241
 
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;
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;
1286
1245
  }
1287
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
- width:auto;
1289
- }
1290
1246
 
1291
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
- justify-content:flex-end;
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);
1293
1249
  }
1294
- }
1295
1250
 
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;
1251
+ .tds-checkbox-description{
1252
+ display:flex;
1253
+ grid-area:2 / 2;
1254
+ gap:var(--t-spacing-half);
1255
+ 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;
1305
1262
  }
1306
1263
 
1307
- @keyframes indicator-pulse{
1308
- 0%{
1309
- opacity:.3;
1310
- transform:scale(.9);
1311
- }
1312
-
1313
- 100%{
1314
- opacity:0;
1315
- transform:scale(1.75);
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);
1316
1269
  }
1317
- }
1318
1270
 
1319
- .tds-button-group{
1320
- display:inline-flex;
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;
1321
1277
  }
1322
- .tds-button-group > .tds-btn{
1323
- --tds-button-group-item-z-index:1;
1324
-
1325
- position:relative;
1326
- z-index:var(--tds-button-group-item-z-index);
1327
- border-radius:0;
1328
- }
1329
- :is(.tds-button-group > .tds-btn):not(:first-child){
1330
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1331
- }
1332
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1333
- position:absolute;
1334
- inset-block:calc(var(--tds-btn-border-width) * -1);
1335
- width:var(--tds-btn-border-width);
1336
- pointer-events:none;
1337
- content:"";
1338
- background-color:var(--t-border-color-white);
1339
- }
1340
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1341
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1342
- }
1343
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1344
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1345
- }
1346
- :is(.tds-button-group > .tds-btn):hover{
1347
- --tds-button-group-item-z-index:2;
1348
- }
1349
- :is(.tds-button-group > .tds-btn):focus-visible{
1350
- --tds-button-group-item-z-index:5;
1351
- }
1352
- .tds-button-group > .tds-btn:first-child{
1353
- border-start-start-radius:var(--tds-btn-border-radius);
1354
- border-end-start-radius:var(--tds-btn-border-radius);
1355
- }
1356
- .tds-button-group > .tds-btn:last-child{
1357
- border-start-end-radius:var(--tds-btn-border-radius);
1358
- border-end-end-radius:var(--tds-btn-border-radius);
1359
- }
1360
1278
 
1361
1279
  .tds-checkbox-group{
1362
1280
  --tds-checkbox-group-font-size:var(--t-font-size-md);
@@ -1432,362 +1350,87 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1432
1350
  --tds-checkbox-group-description-line-height:1.3;
1433
1351
  }
1434
1352
 
1435
- .tds-checkbox{
1436
- --tds-checkbox-font-size:var(--t-font-size-md);
1437
- --tds-checkbox-cursor:pointer;
1438
- --tds-checkbox-line-height:1.4;
1439
- --tds-checkbox-transition-property:background-color, border-color;
1440
-
1441
- --tds-checkbox-input-size:var(--t-element-size-md);
1442
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1443
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1444
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1353
+ .tds-radio-group{
1354
+ --tds-radio-group-font-size:var(--t-font-size-md);
1355
+ --tds-radio-group-line-height:1.4;
1356
+ --tds-radio-group-gap:var(--t-spacing-1);
1445
1357
 
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);
1358
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1359
+ --tds-radio-group-description-line-height:1.35;
1360
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1361
+ --tds-radio-group-description-invalid-icon-display:none;
1362
+ display:flex;
1363
+ flex-direction:column;
1364
+ gap:0;
1365
+ padding:0;
1366
+ margin:0;
1450
1367
 
1451
- --tds-checkbox-label-color:var(--t-form-color);
1368
+ font-size:var(--tds-radio-group-font-size);
1369
+ line-height:var(--tds-radio-group-line-height);
1370
+ border:0;
1371
+ }
1452
1372
 
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;
1373
+ .tds-radio-group legend{
1374
+ float:left;
1375
+ padding:0;
1376
+ margin:0;
1377
+ }
1457
1378
 
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;
1467
- }
1468
-
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);
1476
- }
1477
-
1478
- .tds-checkbox tds-indeterminate{
1479
- display:flex;
1480
- }
1481
-
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);
1499
- }
1500
-
1501
- :is(.tds-checkbox input[type="checkbox"])::before{
1502
- position:absolute;
1503
- top:50%;
1504
- left:50%;
1505
- visibility:var(--tds-checkbox-input-icon-visibility);
1506
- width:100%;
1507
- height:100%;
1508
- content:"";
1509
- background-color:var(--tds-checkbox-input-icon-fill);
1510
- border-radius:var(--tds-checkbox-input-border-radius);
1511
- opacity:var(--tds-checkbox-input-icon-opacity);
1512
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1513
- mask-image:var(--tds-checkbox-input-icon);
1514
- -webkit-mask-repeat:no-repeat;
1515
- mask-repeat:no-repeat;
1516
- -webkit-mask-size:contain;
1517
- mask-size:contain;
1518
- transform:translate(-50%, -50%);
1519
- }
1520
-
1521
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1522
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1523
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1524
- }
1525
-
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
- }
1530
-
1531
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1532
- pointer-events:none;
1533
- }
1534
-
1535
- @media (prefers-reduced-motion: reduce){
1536
-
1537
- .tds-checkbox input[type="checkbox"]{
1538
- --tds-checkbox-transition-property:none;
1539
- }
1540
- }
1541
-
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;
1547
- }
1548
-
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
- }
1553
-
1554
- .tds-checkbox:has(input:checked){
1555
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1556
- }
1557
-
1558
- .tds-checkbox:has(input:indeterminate){
1559
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1560
- }
1561
-
1562
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1563
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1564
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1565
- --tds-checkbox-description-invalid-icon-display:inline-block;
1379
+ .tds-radio-group[aria-invalid="true"]{
1380
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1381
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1566
1382
  }
1567
1383
 
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);
1384
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1385
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1571
1386
  }
1572
1387
 
1573
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1574
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1575
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1576
- }
1388
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1389
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1390
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1391
+ }
1577
1392
 
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);
1393
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1394
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1581
1395
  }
1582
1396
 
1583
- .tds-checkbox:has(input:required) label::after{
1397
+ .tds-radio-group:has(input:required) legend::after{
1584
1398
  margin-left:.25ch;
1585
1399
  color:var(--t-text-color-status-error);
1586
1400
  content:"*";
1587
1401
  }
1588
1402
 
1589
- .tds-checkbox:has(input:disabled){
1590
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1591
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1592
-
1593
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1594
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1595
- --tds-checkbox-cursor:not-allowed;
1596
- }
1597
-
1598
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1599
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1600
- }
1601
-
1602
- .tds-checkbox-description{
1603
- display:flex;
1604
- grid-area:2 / 2;
1605
- gap:var(--t-spacing-half);
1606
- align-items:flex-start;
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;
1613
- }
1614
-
1615
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1616
- display:var(--tds-checkbox-description-invalid-icon-display);
1617
- flex-shrink:0;
1618
- margin-top:calc(.5lh - .5em);
1619
- line-height:var(--tds-checkbox-description-line-height);
1620
- }
1621
-
1622
- .tds-checkbox--sm{
1623
- --tds-checkbox-line-height:1.35;
1624
- --tds-checkbox-input-size:var(--t-element-size-sm);
1625
- --tds-checkbox-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-description-line-height:1.3;
1628
- }
1629
-
1630
- .tds-modal-overlay{
1631
- --tds-modal-min-margin-block:var(--t-spacing-3);
1632
-
1633
- position:fixed;
1634
- inset:0;
1635
- z-index:1000;
1636
- display:grid;
1637
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1638
- justify-items:center;
1639
- overflow-y:auto;
1640
- background:hsl(0 0% 0% / 40%);
1641
- }
1642
-
1643
- .tds-modal-overlay[data-entering]{
1644
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1645
- }
1646
-
1647
- .tds-modal-overlay[data-exiting]{
1648
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1649
- }
1650
-
1651
- @keyframes tds-modal-overlay-fade{
1652
- from{
1653
- opacity:0;
1654
- }
1655
- }
1656
-
1657
- .tds-modal-frame{
1658
- --tds-modal-width:600px;
1659
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1660
- display:flex;
1661
-
1662
- grid-row:2;
1663
- justify-content:center;
1664
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1665
- }
1666
-
1667
- .tds-modal-frame[data-entering]{
1668
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1669
- }
1670
-
1671
- .tds-modal-frame[data-exiting]{
1672
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1673
- }
1674
-
1675
- .tds-modal-frame--sm{
1676
- --tds-modal-width:400px;
1677
- }
1678
-
1679
- .tds-modal-frame--lg{
1680
- --tds-modal-width:800px;
1681
- }
1682
-
1683
- .tds-modal-frame--xl{
1684
- --tds-modal-width:1000px;
1685
- }
1686
-
1687
- @keyframes tds-modal-zoom{
1688
- from{
1689
- opacity:0;
1690
- scale:.96;
1691
- }
1692
- }
1693
-
1694
- @media (prefers-reduced-motion: reduce){
1695
- .tds-modal-overlay[data-entering],
1696
- .tds-modal-overlay[data-exiting],
1697
- .tds-modal-frame[data-entering],
1698
- .tds-modal-frame[data-exiting]{
1699
- animation:none;
1700
- }
1701
- }
1702
-
1703
- .tds-modal{
1403
+ .tds-radio-group-fields{
1704
1404
  display:flex;
1705
1405
  flex-direction:column;
1706
- width:100%;
1707
- padding-block-start:var(--t-spacing-3);
1708
- padding-inline:0;
1709
- background:var(--t-surface-color-card);
1710
-
1711
- border:0;
1712
- border-radius:var(--t-border-radius-lg);
1713
- box-shadow:0 4px 18px 0 #0003;
1714
- }
1715
-
1716
- .tds-modal:focus{
1717
- outline:none;
1718
- }
1719
-
1720
- .tds-modal-header{
1721
- display:grid;
1722
- grid-template-columns:1fr auto;
1723
- -moz-column-gap:var(--t-spacing-2);
1724
- column-gap:var(--t-spacing-2);
1725
- padding-block:0;
1726
- padding-inline:var(--t-spacing-4);
1727
- }
1728
-
1729
- .tds-modal-title{
1730
- grid-row:1;
1731
- grid-column:1;
1732
- margin:0;
1733
- font-size:var(--t-font-size-2xl);
1734
- font-weight:var(--t-font-weight-medium);
1735
- line-height:140%;
1736
- color:var(--t-text-color-headline);
1737
- }
1738
-
1739
- .tds-modal-subtitle{
1740
- grid-row:2;
1741
- grid-column:1;
1742
- margin:0;
1743
- font-size:var(--t-font-size-md);
1744
- font-weight:var(--t-font-weight-medium);
1745
- line-height:140%;
1746
- color:var(--t-text-color-secondary);
1747
- }
1748
-
1749
- .tds-modal-close{
1750
- grid-row:1;
1751
- grid-column:2;
1752
- align-self:center;
1753
- color:var(--t-icon-color-dim);
1754
- }
1755
-
1756
- .tds-modal-body{
1757
- padding-block:var(--t-spacing-3);
1758
- padding-inline:var(--t-spacing-4);
1759
- }
1760
-
1761
- .tds-modal-body--full-width{
1762
- padding-inline:0;
1406
+ gap:var(--tds-radio-group-gap);
1407
+ align-items:flex-start;
1408
+ margin-top:var(--t-spacing-1);
1763
1409
  }
1764
1410
 
1765
- .tds-modal-footer{
1411
+ .tds-radio-group-description{
1766
1412
  display:flex;
1767
- gap:var(--t-spacing-2);
1768
- align-items:center;
1769
- justify-content:flex-end;
1770
- padding-block:var(--t-spacing-3);
1771
- padding-inline:var(--t-spacing-4);
1772
- border-top:1px solid var(--t-border-color);
1773
- }
1774
-
1775
- .tds-modal-footer > [slot="start"]{
1776
- margin-inline-end:auto;
1413
+ gap:var(--t-spacing-half);
1414
+ align-items:flex-start;
1415
+ margin:var(--t-spacing-fourth) 0 0;
1416
+ font-size:var(--tds-radio-group-description-font-size);
1417
+ line-height:var(--tds-radio-group-description-line-height);
1418
+ color:var(--tds-radio-group-description-color);
1419
+ cursor:text;
1777
1420
  }
1778
1421
 
1779
- @media (min-width: 720px){
1780
- .tds-modal-overlay{
1781
- --tds-modal-min-margin-block:0;
1782
- }
1783
-
1784
- .tds-modal-footer{
1785
- position:sticky;
1786
- bottom:0;
1787
- background:var(--t-surface-color-card);
1788
- border-end-start-radius:var(--t-border-radius-lg);
1789
- border-end-end-radius:var(--t-border-radius-lg);
1422
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1423
+ display:var(--tds-radio-group-description-invalid-icon-display);
1424
+ flex-shrink:0;
1425
+ margin-top:calc(.5lh - .5em);
1426
+ line-height:var(--tds-radio-group-description-line-height);
1790
1427
  }
1428
+
1429
+ .tds-radio-group--sm{
1430
+ --tds-radio-group-line-height:1.35;
1431
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1432
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1433
+ --tds-radio-group-description-line-height:1.3;
1791
1434
  }
1792
1435
 
1793
1436
  .tds-radio{
@@ -1923,109 +1566,294 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1923
1566
  --tds-radio-description-line-height:1.3;
1924
1567
  }
1925
1568
 
1926
- .tds-radio-group{
1927
- --tds-radio-group-font-size:var(--t-font-size-md);
1928
- --tds-radio-group-line-height:1.4;
1929
- --tds-radio-group-gap:var(--t-spacing-1);
1930
1569
 
1931
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1932
- --tds-radio-group-description-line-height:1.35;
1933
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1934
- --tds-radio-group-description-invalid-icon-display:none;
1935
- display:flex;
1936
- flex-direction:column;
1937
- gap:0;
1938
- padding:0;
1939
- margin:0;
1570
+ :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{
1571
+ -webkit-appearance:none;
1572
+ appearance:none;
1573
+ }
1940
1574
 
1941
- font-size:var(--tds-radio-group-font-size);
1942
- line-height:var(--tds-radio-group-line-height);
1943
- border:0;
1944
- }
1575
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1576
+ inline-size:1em;
1577
+ block-size:2em;
1578
+ }
1579
+ @supports (field-sizing: content){
1580
+ .tds-input--auto-width{
1581
+ inline-size:-moz-fit-content;
1582
+ inline-size:fit-content;
1583
+ min-inline-size:min(100%, 122px);
1584
+ }
1945
1585
 
1946
- .tds-radio-group legend{
1947
- float:left;
1948
- padding:0;
1949
- margin:0;
1586
+ .tds-input--auto-width input{
1587
+ field-sizing:content;
1588
+ inline-size:auto;
1950
1589
  }
1590
+ }
1951
1591
 
1952
- .tds-radio-group[aria-invalid="true"]{
1953
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1954
- --tds-radio-group-description-invalid-icon-display:inline-block;
1592
+ .tds-input:has(textarea){
1593
+ --tds-input-padding-block:6px;
1594
+ --tds-input-resizer-size:var(--t-element-size-sm);
1595
+ --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");
1596
+ }
1597
+
1598
+ @supports (x: attr(x type(*))){
1599
+
1600
+ .tds-input textarea{
1601
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1602
+ }
1955
1603
  }
1956
1604
 
1957
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1958
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1605
+ .tds-input.tds-textarea--resize-vertical textarea{
1606
+ resize:vertical;
1959
1607
  }
1960
1608
 
1961
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1962
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1963
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1609
+ .tds-input.tds-textarea--resize-none textarea{
1610
+ resize:none;
1611
+ }
1612
+
1613
+ .tds-input.tds-textarea--resize-auto textarea{
1614
+ resize:vertical;
1615
+ }
1616
+
1617
+ @supports (field-sizing: content){
1618
+ .tds-input.tds-textarea--resize-auto textarea{
1619
+ field-sizing:content;
1620
+ resize:none;
1964
1621
  }
1622
+ }
1965
1623
 
1966
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1967
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1624
+ .tds-input textarea{
1625
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1626
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1627
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1628
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1629
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1630
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1631
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1632
+ --tds-input-scrollbar-thumb-border-radius:999px;
1633
+ --tds-input-scrollbar-thumb-border-width:3px;
1634
+ --tds-input-scrollbar-track-margin-block:.125rem;
1635
+ scrollbar-color:initial;
1636
+ transition-timing-function:var(--t-ease-in-out);
1637
+ transition-duration:var(--t-duration-200);
1638
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1639
+ }
1640
+
1641
+ @media (pointer: fine){
1642
+ :is(.tds-input textarea)::-webkit-scrollbar{
1643
+ width:12px;
1644
+ height:12px;
1645
+ cursor:default;
1646
+ }
1647
+
1648
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1649
+ cursor:default;
1650
+ background:var(--tds-input-scrollbar-thumb-color);
1651
+ background-clip:content-box;
1652
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1653
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1654
+ }
1655
+
1656
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1657
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1658
+ }
1659
+
1660
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1661
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1662
+ }
1663
+
1664
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1665
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1666
+ }
1667
+
1668
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1669
+ background:var(--tds-input-scrollbar-surface-color);
1670
+ }
1671
+
1672
+ :is(.tds-input textarea)::-webkit-resizer{
1673
+ background:var(--tds-input-resizer-icon) no-repeat;
1674
+ background-position:right bottom;
1675
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1676
+ }
1677
+
1678
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1679
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1680
+ cursor:default;
1681
+ }
1682
+
1683
+ @supports (-moz-appearance: none){
1684
+ :is(.tds-input textarea){
1685
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1686
+ scrollbar-width:thin;
1968
1687
  }
1969
1688
 
1970
- .tds-radio-group:has(input:required) legend::after{
1971
- margin-left:.25ch;
1972
- color:var(--t-text-color-status-error);
1973
- content:"*";
1689
+ @media (hover){
1690
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1691
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1692
+ }
1693
+ }
1974
1694
  }
1695
+ }
1696
+
1697
+ .tds-modal-overlay{
1698
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1699
+
1700
+ position:fixed;
1701
+ inset:0;
1702
+ z-index:1000;
1703
+ display:grid;
1704
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1705
+ justify-items:center;
1706
+ overflow-y:auto;
1707
+ background:hsl(0 0% 0% / 40%);
1708
+ }
1709
+
1710
+ .tds-modal-overlay[data-entering]{
1711
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1712
+ }
1713
+
1714
+ .tds-modal-overlay[data-exiting]{
1715
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1716
+ }
1717
+
1718
+ @keyframes tds-modal-overlay-fade{
1719
+ from{
1720
+ opacity:0;
1721
+ }
1722
+ }
1723
+
1724
+ .tds-modal-frame{
1725
+ --tds-modal-width:600px;
1726
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1727
+ display:flex;
1728
+
1729
+ grid-row:2;
1730
+ justify-content:center;
1731
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1732
+ }
1733
+
1734
+ .tds-modal-frame[data-entering]{
1735
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1736
+ }
1737
+
1738
+ .tds-modal-frame[data-exiting]{
1739
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1740
+ }
1741
+
1742
+ .tds-modal-frame--sm{
1743
+ --tds-modal-width:400px;
1744
+ }
1745
+
1746
+ .tds-modal-frame--lg{
1747
+ --tds-modal-width:800px;
1748
+ }
1749
+
1750
+ .tds-modal-frame--xl{
1751
+ --tds-modal-width:1000px;
1752
+ }
1753
+
1754
+ @keyframes tds-modal-zoom{
1755
+ from{
1756
+ opacity:0;
1757
+ scale:.96;
1758
+ }
1759
+ }
1760
+
1761
+ @media (prefers-reduced-motion: reduce){
1762
+ .tds-modal-overlay[data-entering],
1763
+ .tds-modal-overlay[data-exiting],
1764
+ .tds-modal-frame[data-entering],
1765
+ .tds-modal-frame[data-exiting]{
1766
+ animation:none;
1767
+ }
1768
+ }
1769
+
1770
+ .tds-modal{
1771
+ display:flex;
1772
+ flex-direction:column;
1773
+ width:100%;
1774
+ padding-block-start:var(--t-spacing-3);
1775
+ padding-inline:0;
1776
+ background:var(--t-surface-color-card);
1777
+
1778
+ border:0;
1779
+ border-radius:var(--t-border-radius-lg);
1780
+ box-shadow:0 4px 18px 0 #0003;
1781
+ }
1782
+
1783
+ .tds-modal:focus{
1784
+ outline:none;
1785
+ }
1786
+
1787
+ .tds-modal-header{
1788
+ display:grid;
1789
+ grid-template-columns:1fr auto;
1790
+ -moz-column-gap:var(--t-spacing-2);
1791
+ column-gap:var(--t-spacing-2);
1792
+ padding-block:0;
1793
+ padding-inline:var(--t-spacing-4);
1794
+ }
1975
1795
 
1976
- .tds-radio-group-fields{
1977
- display:flex;
1978
- flex-direction:column;
1979
- gap:var(--tds-radio-group-gap);
1980
- align-items:flex-start;
1981
- margin-top:var(--t-spacing-1);
1796
+ .tds-modal-title{
1797
+ grid-row:1;
1798
+ grid-column:1;
1799
+ margin:0;
1800
+ font-size:var(--t-font-size-2xl);
1801
+ font-weight:var(--t-font-weight-medium);
1802
+ line-height:140%;
1803
+ color:var(--t-text-color-headline);
1982
1804
  }
1983
1805
 
1984
- .tds-radio-group-description{
1985
- display:flex;
1986
- gap:var(--t-spacing-half);
1987
- align-items:flex-start;
1988
- margin:var(--t-spacing-fourth) 0 0;
1989
- font-size:var(--tds-radio-group-description-font-size);
1990
- line-height:var(--tds-radio-group-description-line-height);
1991
- color:var(--tds-radio-group-description-color);
1992
- cursor:text;
1806
+ .tds-modal-subtitle{
1807
+ grid-row:2;
1808
+ grid-column:1;
1809
+ margin:0;
1810
+ font-size:var(--t-font-size-md);
1811
+ font-weight:var(--t-font-weight-medium);
1812
+ line-height:140%;
1813
+ color:var(--t-text-color-secondary);
1993
1814
  }
1994
1815
 
1995
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1996
- display:var(--tds-radio-group-description-invalid-icon-display);
1997
- flex-shrink:0;
1998
- margin-top:calc(.5lh - .5em);
1999
- line-height:var(--tds-radio-group-description-line-height);
2000
- }
1816
+ .tds-modal-close{
1817
+ grid-row:1;
1818
+ grid-column:2;
1819
+ align-self:center;
1820
+ color:var(--t-icon-color-dim);
1821
+ }
2001
1822
 
2002
- .tds-radio-group--sm{
2003
- --tds-radio-group-line-height:1.35;
2004
- --tds-radio-group-font-size:var(--t-font-size-sm);
2005
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2006
- --tds-radio-group-description-line-height:1.3;
1823
+ .tds-modal-body{
1824
+ padding-block:var(--t-spacing-3);
1825
+ padding-inline:var(--t-spacing-4);
2007
1826
  }
2008
1827
 
1828
+ .tds-modal-body--full-width{
1829
+ padding-inline:0;
1830
+ }
2009
1831
 
2010
- :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{
2011
- -webkit-appearance:none;
2012
- appearance:none;
2013
- }
1832
+ .tds-modal-footer{
1833
+ display:flex;
1834
+ gap:var(--t-spacing-2);
1835
+ align-items:center;
1836
+ justify-content:flex-end;
1837
+ padding-block:var(--t-spacing-3);
1838
+ padding-inline:var(--t-spacing-4);
1839
+ border-top:1px solid var(--t-border-color);
1840
+ }
2014
1841
 
2015
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2016
- inline-size:1em;
2017
- block-size:2em;
2018
- }
2019
- @supports (field-sizing: content){
2020
- .tds-input--auto-width{
2021
- inline-size:-moz-fit-content;
2022
- inline-size:fit-content;
2023
- min-inline-size:min(100%, 122px);
1842
+ .tds-modal-footer > [slot="start"]{
1843
+ margin-inline-end:auto;
1844
+ }
1845
+
1846
+ @media (min-width: 720px){
1847
+ .tds-modal-overlay{
1848
+ --tds-modal-min-margin-block:0;
2024
1849
  }
2025
1850
 
2026
- .tds-input--auto-width input{
2027
- field-sizing:content;
2028
- inline-size:auto;
1851
+ .tds-modal-footer{
1852
+ position:sticky;
1853
+ bottom:0;
1854
+ background:var(--t-surface-color-card);
1855
+ border-end-start-radius:var(--t-border-radius-lg);
1856
+ border-end-end-radius:var(--t-border-radius-lg);
2029
1857
  }
2030
1858
  }
2031
1859
 
@@ -2169,110 +1997,282 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2169
1997
  --tds-toggle-switch-display:inline-flex;
2170
1998
  }
2171
1999
 
2172
- .tds-input:has(textarea){
2173
- --tds-input-padding-block:6px;
2174
- --tds-input-resizer-size:var(--t-element-size-sm);
2175
- --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");
2000
+ @layer t-critical{
2001
+ tds-page-header:not(.hydrated){
2002
+ display:none;
2003
+ }
2004
+ }
2005
+
2006
+ @layer t-component{
2007
+ .tds-page-header{
2008
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2009
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2010
+ --tds-page-header-color:var(--t-text-color);
2011
+ --tds-page-header-bottom-border-color:transparent;
2012
+ --tds-page-header-headline-color:var(--t-text-color-headline);
2013
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2014
+ --tds-page-header-padding-x:var(--t-spacing-2);
2015
+ --tds-page-header-padding-y:var(--t-spacing-2);
2016
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2017
+ --tds-page-header-nav-gap:var(--t-spacing-1);
2018
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
2019
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2020
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2021
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2022
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2023
+ --tds-page-header-nav-item-border-width:1px;
2024
+
2025
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2026
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2027
+
2028
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
2029
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2030
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2031
+
2032
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2033
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2034
+
2035
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2036
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2037
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2038
+
2039
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
2040
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2041
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2042
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2043
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2044
+ }
2045
+
2046
+ .tds-page-header--profile{
2047
+ --tds-page-header-padding-y:20px;
2048
+ }
2049
+
2050
+ @supports (color: light-dark(#fff, #000)){
2051
+ .tds-page-header{
2052
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2053
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2054
+ }
2055
+ }
2056
+
2057
+ @media (min-width: 600px){
2058
+ .tds-page-header{
2059
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
2060
+ --tds-page-header-color:var(--t-text-color-secondary);
2061
+ --tds-page-header-bottom-border-color:var(--t-border-color);
2062
+ --tds-page-header-padding-x:var(--t-spacing-3);
2063
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2064
+ --tds-page-header-nav-gap:var(--t-spacing-half);
2065
+ --tds-page-header-nav-background:transparent;
2066
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2067
+ --tds-page-header-nav-item-border-width:1px;
2068
+ --tds-page-header-nav-item-color:var(--t-text-color);
2069
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2070
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2071
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2072
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2073
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2074
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2075
+ }
2076
+ }
2077
+ }
2078
+
2079
+ .tds-page-header{
2080
+ display:flex;
2081
+ flex-direction:column;
2082
+ padding-top:var(--tds-page-header-padding-y);
2083
+ color:var(--tds-page-header-color);
2084
+ background:var(--tds-page-header-background-color);
2085
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2176
2086
  }
2177
2087
 
2178
- @supports (x: attr(x type(*))){
2088
+ .tds-page-header:not(.has-nav){
2089
+ padding-bottom:var(--tds-page-header-padding-y);
2090
+ }
2091
+
2092
+ .tds-page-header.inactive{
2093
+ background:var(--tds-page-header-background-color-inactive);
2094
+ }
2095
+
2096
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2097
+ width:100%;
2098
+ }
2099
+
2100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2101
+ display:flex;
2102
+ flex-flow:row wrap;
2103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
2104
+ align-items:flex-start;
2105
+ justify-content:flex-start;
2106
+ min-width:0;
2107
+ }
2108
+
2109
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
2110
+ display:flex;
2111
+ gap:var(--tds-page-header-nav-gap);
2112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2113
+ margin:0 0 -1px;
2114
+ overflow:auto;
2115
+ list-style:none;
2116
+ background:var(--tds-page-header-nav-background);
2117
+ }
2118
+
2119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2120
+ position:relative;
2121
+ display:inline-flex;
2122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2123
+ font-size:var(--t-font-size-sm);
2124
+ line-height:22px;
2125
+ color:var(--tds-page-header-nav-item-color);
2126
+ white-space:nowrap;
2127
+ text-decoration:none;
2128
+ -webkit-appearance:none;
2129
+ -moz-appearance:none;
2130
+ appearance:none;
2131
+ cursor:pointer;
2132
+ outline-offset:-2px;
2133
+ background-color:var(--tds-page-header-nav-item-background-color);
2134
+ background-clip:padding-box;
2135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2138
+ }
2139
+
2140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2145
+ }
2146
+
2147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2151
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2152
+ }
2153
+
2154
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2155
+ background-color:var(--tds-page-header-nav-item-background-color-active);
2156
+ border-color:var(--tds-page-header-nav-item-border-color-active);
2157
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2158
+ }
2159
+
2160
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2161
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2162
+ color:var(--tds-page-header-nav-item-color-disabled);
2163
+ cursor:not-allowed;
2164
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2165
+ opacity:1;
2166
+ }
2179
2167
 
2180
- .tds-input textarea{
2181
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2182
- }
2183
- }
2168
+ @media (min-width: 600px){
2169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2170
+ position:absolute;
2171
+ inset:auto -1px -1px;
2172
+ height:1px;
2173
+ pointer-events:none;
2174
+ content:"";
2175
+ background-color:var(--tds-page-header-bottom-border-color);
2176
+ }
2177
+ }
2184
2178
 
2185
- .tds-input.tds-textarea--resize-vertical textarea{
2186
- resize:vertical;
2179
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2180
+ position:relative;
2187
2181
  }
2188
2182
 
2189
- .tds-input.tds-textarea--resize-none textarea{
2190
- resize:none;
2191
- }
2183
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2184
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2185
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2186
+ }
2192
2187
 
2193
- .tds-input.tds-textarea--resize-auto textarea{
2194
- resize:vertical;
2195
- }
2188
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2189
+ position:absolute;
2190
+ top:-5px;
2191
+ right:-2px;
2192
+ width:10px;
2193
+ height:10px;
2194
+ content:"";
2195
+ background:var(--tds-page-header-nav-item-indicator-color);
2196
+ border-radius:50%;
2197
+ }
2196
2198
 
2197
- @supports (field-sizing: content){
2198
- .tds-input.tds-textarea--resize-auto textarea{
2199
- field-sizing:content;
2200
- resize:none;
2199
+ @media (prefers-reduced-motion: no-preference){
2200
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2201
+ animation:indicator-pulse 1.25s ease infinite;
2202
+ }
2201
2203
  }
2202
- }
2203
2204
 
2204
- .tds-input textarea{
2205
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2206
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2207
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2208
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2209
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2210
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2211
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2212
- --tds-input-scrollbar-thumb-border-radius:999px;
2213
- --tds-input-scrollbar-thumb-border-width:3px;
2214
- --tds-input-scrollbar-track-margin-block:.125rem;
2215
- scrollbar-color:initial;
2216
- transition-timing-function:var(--t-ease-in-out);
2217
- transition-duration:var(--t-duration-200);
2218
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2205
+ .tds-page-header__title-bar{
2206
+ display:flex;
2207
+ flex-direction:column;
2208
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2209
+ align-items:flex-start;
2210
+ justify-content:space-between;
2211
+ padding:0 var(--tds-page-header-padding-x);
2219
2212
  }
2220
2213
 
2221
- @media (pointer: fine){
2222
- :is(.tds-input textarea)::-webkit-scrollbar{
2223
- width:12px;
2224
- height:12px;
2225
- cursor:default;
2226
- }
2227
-
2228
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2229
- cursor:default;
2230
- background:var(--tds-input-scrollbar-thumb-color);
2231
- background-clip:content-box;
2232
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2233
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2234
- }
2214
+ .tds-page-header--profile > .tds-page-header__title-bar{
2215
+ align-items:center;
2216
+ }
2235
2217
 
2236
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2237
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2238
- }
2218
+ .tds-page-header__primary{
2219
+ width:100%;
2220
+ }
2239
2221
 
2240
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2241
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2242
- }
2222
+ .tds-page-header__primary h1{
2223
+ margin:0;
2224
+ font-size:var(--tds-page-header-headline-font-size);
2225
+ font-weight:var(--t-font-weight-normal);
2226
+ line-height:32px;
2227
+ color:var(--tds-page-header-headline-color);
2228
+ overflow-wrap:break-word;
2229
+ }
2243
2230
 
2244
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2245
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2246
- }
2231
+ @media (min-width: 960px){
2232
+ .tds-page-header__primary{
2233
+ flex:1 1 max-content;
2234
+ width:auto;
2235
+ min-width:0;
2236
+ max-width:100%;
2237
+ }
2247
2238
 
2248
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2249
- background:var(--tds-input-scrollbar-surface-color);
2239
+ .tds-page-header__title-bar,
2240
+ .tds-page-header--profile .tds-page-header__title-bar{
2241
+ flex-flow:row nowrap;
2242
+ row-gap:12px;
2243
+ align-items:flex-start;
2244
+ }
2245
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2246
+ width:auto;
2250
2247
  }
2251
2248
 
2252
- :is(.tds-input textarea)::-webkit-resizer{
2253
- background:var(--tds-input-resizer-icon) no-repeat;
2254
- background-position:right bottom;
2255
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2249
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2250
+ justify-content:flex-end;
2256
2251
  }
2252
+ }
2257
2253
 
2258
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2259
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2260
- cursor:default;
2261
- }
2254
+ .tds-page-header-phone,
2255
+ .tds-page-header-email{
2256
+ color:var(--tds-page-header-color);
2257
+ white-space:nowrap;
2258
+ }
2259
+ .tds-page-header-email{
2260
+ max-width:100%;
2261
+ overflow:hidden;
2262
+ text-overflow:ellipsis;
2263
+ }
2262
2264
 
2263
- @supports (-moz-appearance: none){
2264
- :is(.tds-input textarea){
2265
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2266
- scrollbar-width:thin;
2267
- }
2265
+ @keyframes indicator-pulse{
2266
+ 0%{
2267
+ opacity:.3;
2268
+ transform:scale(.9);
2269
+ }
2268
2270
 
2269
- @media (hover){
2270
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2271
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2272
- }
2273
- }
2274
- }
2271
+ 100%{
2272
+ opacity:0;
2273
+ transform:scale(1.75);
2275
2274
  }
2275
+ }
2276
2276
 
2277
2277
  .tds-input{
2278
2278
  --tds-input-border-color:var(--t-form-border-color);
@@ -4471,48 +4471,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4471
4471
  }
4472
4472
  }
4473
4473
 
4474
- .tds-popover{
4475
- max-inline-size:24rem;
4476
- overflow:auto;
4477
- overscroll-behavior:none;
4478
- outline:0;
4479
- scrollbar-color:#0004 var(--t-surface-color-card);
4480
- scrollbar-width:thin;
4481
- background:var(--t-surface-color-card);
4482
- background-clip:padding-box;
4483
- border:1px solid var(--t-border-color);
4484
- border-radius:var(--t-border-radius);
4485
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4486
- }
4487
-
4488
- @media (prefers-reduced-motion: no-preference){
4489
- .tds-popover[data-entering]{
4490
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4491
- }
4492
-
4493
- .tds-popover[data-exiting]{
4494
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4495
- }
4496
-
4497
- .tds-popover[data-entering],.tds-popover[data-exiting]{
4498
- will-change:opacity, transform;
4499
- }
4500
-
4501
- @keyframes tds-popover{
4502
- from{
4503
- opacity:0;
4504
- transform:translateY(-8px);
4505
- }
4506
- }
4507
- }
4508
-
4509
- .tds-popover-content{
4510
- display:flex;
4511
- flex-direction:column;
4512
- padding:var(--t-spacing-1);
4513
- outline:0;
4514
- }
4515
-
4516
4474
  .tds-segmented-control{
4517
4475
  --tds-segmented-control-font-size:var(--t-font-size-md);
4518
4476
  --tds-segmented-control-padding:var(--t-spacing-half);
@@ -4637,6 +4595,48 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4637
4595
  --tds-segmented-control-background-color-disabled:transparent;
4638
4596
  }
4639
4597
 
4598
+ .tds-popover{
4599
+ max-inline-size:24rem;
4600
+ overflow:auto;
4601
+ overscroll-behavior:none;
4602
+ outline:0;
4603
+ scrollbar-color:#0004 var(--t-surface-color-card);
4604
+ scrollbar-width:thin;
4605
+ background:var(--t-surface-color-card);
4606
+ background-clip:padding-box;
4607
+ border:1px solid var(--t-border-color);
4608
+ border-radius:var(--t-border-radius);
4609
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4610
+ }
4611
+
4612
+ @media (prefers-reduced-motion: no-preference){
4613
+ .tds-popover[data-entering]{
4614
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4615
+ }
4616
+
4617
+ .tds-popover[data-exiting]{
4618
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4619
+ }
4620
+
4621
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
4622
+ will-change:opacity, transform;
4623
+ }
4624
+
4625
+ @keyframes tds-popover{
4626
+ from{
4627
+ opacity:0;
4628
+ transform:translateY(-8px);
4629
+ }
4630
+ }
4631
+ }
4632
+
4633
+ .tds-popover-content{
4634
+ display:flex;
4635
+ flex-direction:column;
4636
+ padding:var(--t-spacing-1);
4637
+ outline:0;
4638
+ }
4639
+
4640
4640
  .tds-pagination{
4641
4641
  --tds-pagination-background-color:var(--t-surface-color-canvas);
4642
4642
  --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);