@planningcenter/tapestry 4.3.0-rc.4 → 4.3.0-rc.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +759 -759
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +759 -759
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,48 +677,6 @@
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{
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
-
722
680
  .tds-checkbox{
723
681
  --tds-checkbox-font-size:var(--t-font-size-md);
724
682
  --tds-checkbox-cursor:pointer;
@@ -988,928 +946,970 @@
988
946
  --tds-checkbox-group-description-line-height:1.3;
989
947
  }
990
948
 
949
+ .tds-button-group{
950
+ display:inline-flex;
951
+ }
952
+ .tds-button-group > .tds-btn{
953
+ --tds-button-group-item-z-index:1;
991
954
 
992
- :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{
993
- -webkit-appearance:none;
994
- appearance:none;
955
+ position:relative;
956
+ z-index:var(--tds-button-group-item-z-index);
957
+ border-radius:0;
958
+ }
959
+ :is(.tds-button-group > .tds-btn):not(:first-child){
960
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
995
961
  }
996
-
997
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
998
- inline-size:1em;
999
- block-size:2em;
962
+ :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{
963
+ position:absolute;
964
+ inset-block:calc(var(--tds-btn-border-width) * -1);
965
+ width:var(--tds-btn-border-width);
966
+ pointer-events:none;
967
+ content:"";
968
+ background-color:var(--t-border-color-white);
969
+ }
970
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
971
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
972
+ }
973
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
974
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
975
+ }
976
+ :is(.tds-button-group > .tds-btn):hover{
977
+ --tds-button-group-item-z-index:2;
1000
978
  }
1001
- @supports (field-sizing: content){
1002
- .tds-input--auto-width{
1003
- inline-size:-moz-fit-content;
1004
- inline-size:fit-content;
1005
- min-inline-size:min(100%, 122px);
979
+ :is(.tds-button-group > .tds-btn):focus-visible{
980
+ --tds-button-group-item-z-index:5;
981
+ }
982
+ .tds-button-group > .tds-btn:first-child{
983
+ border-start-start-radius:var(--tds-btn-border-radius);
984
+ border-end-start-radius:var(--tds-btn-border-radius);
1006
985
  }
1007
-
1008
- .tds-input--auto-width input{
1009
- field-sizing:content;
1010
- inline-size:auto;
986
+ .tds-button-group > .tds-btn:last-child{
987
+ border-start-end-radius:var(--tds-btn-border-radius);
988
+ border-end-end-radius:var(--tds-btn-border-radius);
1011
989
  }
1012
- }
1013
-
1014
- .tds-modal-overlay{
1015
- --tds-modal-min-margin-block:var(--t-spacing-3);
1016
990
 
1017
- position:fixed;
1018
- inset:0;
1019
- z-index:1000;
1020
- display:grid;
1021
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1022
- justify-items:center;
1023
- overflow-y:auto;
1024
- background:hsl(0 0% 0% / 40%);
991
+ @layer t-critical{
992
+ tds-page-header:not(.hydrated){
993
+ display:none;
994
+ }
1025
995
  }
1026
996
 
1027
- .tds-modal-overlay[data-entering]{
1028
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1029
- }
997
+ @layer t-component{
998
+ .tds-page-header{
999
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1000
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1001
+ --tds-page-header-color:var(--t-text-color);
1002
+ --tds-page-header-bottom-border-color:transparent;
1003
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1004
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1005
+ --tds-page-header-padding-x:var(--t-spacing-2);
1006
+ --tds-page-header-padding-y:var(--t-spacing-2);
1007
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1008
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1009
+ --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%);
1010
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1011
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1012
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1013
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1014
+ --tds-page-header-nav-item-border-width:1px;
1030
1015
 
1031
- .tds-modal-overlay[data-exiting]{
1032
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1033
- }
1016
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1017
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1034
1018
 
1035
- @keyframes tds-modal-overlay-fade{
1036
- from{
1037
- opacity:0;
1038
- }
1039
- }
1019
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1020
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1021
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1040
1022
 
1041
- .tds-modal-frame{
1042
- --tds-modal-width:600px;
1043
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1044
- display:flex;
1023
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1024
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1045
1025
 
1046
- grid-row:2;
1047
- justify-content:center;
1048
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1049
- }
1026
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1027
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1028
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1050
1029
 
1051
- .tds-modal-frame[data-entering]{
1052
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1030
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1031
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1032
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1033
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1034
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1053
1035
  }
1054
1036
 
1055
- .tds-modal-frame[data-exiting]{
1056
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1037
+ .tds-page-header--profile{
1038
+ --tds-page-header-padding-y:20px;
1057
1039
  }
1058
1040
 
1059
- .tds-modal-frame--sm{
1060
- --tds-modal-width:400px;
1061
- }
1062
-
1063
- .tds-modal-frame--lg{
1064
- --tds-modal-width:800px;
1065
- }
1066
-
1067
- .tds-modal-frame--xl{
1068
- --tds-modal-width:1000px;
1069
- }
1070
-
1071
- @keyframes tds-modal-zoom{
1072
- from{
1073
- opacity:0;
1074
- scale:.96;
1041
+ @supports (color: light-dark(#fff, #000)){
1042
+ .tds-page-header{
1043
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1044
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1045
+ }
1075
1046
  }
1076
- }
1077
1047
 
1078
- @media (prefers-reduced-motion: reduce){
1079
- .tds-modal-overlay[data-entering],
1080
- .tds-modal-overlay[data-exiting],
1081
- .tds-modal-frame[data-entering],
1082
- .tds-modal-frame[data-exiting]{
1083
- animation:none;
1048
+ @media (min-width: 600px){
1049
+ .tds-page-header{
1050
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1051
+ --tds-page-header-color:var(--t-text-color-secondary);
1052
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1053
+ --tds-page-header-padding-x:var(--t-spacing-3);
1054
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1055
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1056
+ --tds-page-header-nav-background:transparent;
1057
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1058
+ --tds-page-header-nav-item-border-width:1px;
1059
+ --tds-page-header-nav-item-color:var(--t-text-color);
1060
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1061
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1062
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1063
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1064
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1065
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1066
+ }
1084
1067
  }
1085
1068
  }
1086
1069
 
1087
- .tds-modal{
1070
+ .tds-page-header{
1088
1071
  display:flex;
1089
1072
  flex-direction:column;
1090
- width:100%;
1091
- padding-block-start:var(--t-spacing-3);
1092
- padding-inline:0;
1093
- background:var(--t-surface-color-card);
1094
-
1095
- border:0;
1096
- border-radius:var(--t-border-radius-lg);
1097
- box-shadow:0 4px 18px 0 #0003;
1073
+ padding-top:var(--tds-page-header-padding-y);
1074
+ color:var(--tds-page-header-color);
1075
+ background:var(--tds-page-header-background-color);
1076
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1098
1077
  }
1099
1078
 
1100
- .tds-modal:focus{
1101
- outline:none;
1079
+ .tds-page-header:not(.has-nav){
1080
+ padding-bottom:var(--tds-page-header-padding-y);
1102
1081
  }
1103
1082
 
1104
- .tds-modal-header{
1105
- display:grid;
1106
- grid-template-columns:1fr auto;
1107
- -moz-column-gap:var(--t-spacing-2);
1108
- column-gap:var(--t-spacing-2);
1109
- padding-block:0;
1110
- padding-inline:var(--t-spacing-4);
1111
- }
1083
+ .tds-page-header.inactive{
1084
+ background:var(--tds-page-header-background-color-inactive);
1085
+ }
1112
1086
 
1113
- .tds-modal-title{
1114
- grid-row:1;
1115
- grid-column:1;
1116
- margin:0;
1117
- font-size:var(--t-font-size-2xl);
1118
- font-weight:var(--t-font-weight-medium);
1119
- line-height:140%;
1120
- color:var(--t-text-color-headline);
1121
- }
1087
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1088
+ width:100%;
1089
+ }
1122
1090
 
1123
- .tds-modal-subtitle{
1124
- grid-row:2;
1125
- grid-column:1;
1126
- margin:0;
1127
- font-size:var(--t-font-size-md);
1128
- font-weight:var(--t-font-weight-medium);
1129
- line-height:140%;
1130
- color:var(--t-text-color-secondary);
1131
- }
1091
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1092
+ display:flex;
1093
+ flex-flow:row wrap;
1094
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1095
+ align-items:flex-start;
1096
+ justify-content:flex-start;
1097
+ min-width:0;
1098
+ }
1132
1099
 
1133
- .tds-modal-close{
1134
- grid-row:1;
1135
- grid-column:2;
1136
- align-self:center;
1137
- color:var(--t-icon-color-dim);
1138
- }
1100
+ :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{
1101
+ display:flex;
1102
+ gap:var(--tds-page-header-nav-gap);
1103
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1104
+ margin:0 0 -1px;
1105
+ overflow:auto;
1106
+ list-style:none;
1107
+ background:var(--tds-page-header-nav-background);
1108
+ }
1139
1109
 
1140
- .tds-modal-body{
1141
- padding-block:var(--t-spacing-3);
1142
- padding-inline:var(--t-spacing-4);
1143
- }
1110
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1111
+ position:relative;
1112
+ display:inline-flex;
1113
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1114
+ font-size:var(--t-font-size-sm);
1115
+ line-height:22px;
1116
+ color:var(--tds-page-header-nav-item-color);
1117
+ white-space:nowrap;
1118
+ text-decoration:none;
1119
+ -webkit-appearance:none;
1120
+ -moz-appearance:none;
1121
+ appearance:none;
1122
+ cursor:pointer;
1123
+ outline-offset:-2px;
1124
+ background-color:var(--tds-page-header-nav-item-background-color);
1125
+ background-clip:padding-box;
1126
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1127
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1128
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1129
+ }
1144
1130
 
1145
- .tds-modal-body--full-width{
1146
- padding-inline:0;
1147
- }
1131
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1132
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1133
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1134
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1135
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1136
+ }
1148
1137
 
1149
- .tds-modal-footer{
1150
- display:flex;
1151
- gap:var(--t-spacing-2);
1152
- align-items:center;
1153
- justify-content:flex-end;
1154
- padding-block:var(--t-spacing-3);
1155
- padding-inline:var(--t-spacing-4);
1156
- border-top:1px solid var(--t-border-color);
1157
- }
1138
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1139
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1140
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1141
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1142
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1143
+ }
1158
1144
 
1159
- .tds-modal-footer > [slot="start"]{
1160
- margin-inline-end:auto;
1161
- }
1145
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1146
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1147
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1148
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1149
+ }
1162
1150
 
1163
- @media (min-width: 720px){
1164
- .tds-modal-overlay{
1165
- --tds-modal-min-margin-block:0;
1166
- }
1151
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1152
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1153
+ color:var(--tds-page-header-nav-item-color-disabled);
1154
+ cursor:not-allowed;
1155
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1156
+ opacity:1;
1157
+ }
1167
1158
 
1168
- .tds-modal-footer{
1169
- position:sticky;
1170
- bottom:0;
1171
- background:var(--t-surface-color-card);
1172
- border-end-start-radius:var(--t-border-radius-lg);
1173
- border-end-end-radius:var(--t-border-radius-lg);
1174
- }
1175
- }
1159
+ @media (min-width: 600px){
1160
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1161
+ position:absolute;
1162
+ inset:auto -1px -1px;
1163
+ height:1px;
1164
+ pointer-events:none;
1165
+ content:"";
1166
+ background-color:var(--tds-page-header-bottom-border-color);
1167
+ }
1168
+ }
1176
1169
 
1177
- .tds-radio{
1178
- --tds-radio-font-size:var(--t-font-size-md);
1179
- --tds-radio-cursor:pointer;
1180
- --tds-radio-line-height:1.4;
1181
- --tds-radio-transition-property:border-width;
1170
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1171
+ position:relative;
1172
+ }
1182
1173
 
1183
- --tds-radio-input-size:var(--t-element-size-md);
1184
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1185
- --tds-radio-input-border-color:var(--t-form-border-color);
1186
- --tds-radio-input-border-width:var(--t-form-border-width);
1187
- --tds-radio-input-background-color:var(--t-form-background-color);
1174
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1175
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1176
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1177
+ }
1188
1178
 
1189
- --tds-radio-label-color:var(--t-form-color);
1179
+ :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{
1180
+ position:absolute;
1181
+ top:-5px;
1182
+ right:-2px;
1183
+ width:10px;
1184
+ height:10px;
1185
+ content:"";
1186
+ background:var(--tds-page-header-nav-item-indicator-color);
1187
+ border-radius:50%;
1188
+ }
1190
1189
 
1191
- --tds-radio-description-font-size:var(--t-font-size-sm);
1192
- --tds-radio-description-line-height:1.35;
1193
- --tds-radio-description-color:var(--t-text-color-secondary);
1190
+ @media (prefers-reduced-motion: no-preference){
1191
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1192
+ animation:indicator-pulse 1.25s ease infinite;
1193
+ }
1194
+ }
1194
1195
 
1195
- position:relative;
1196
- display:inline-grid;
1197
- grid-template-columns:auto;
1198
- grid-auto-columns:1fr;
1199
- gap:var(--t-spacing-fourth) 0;
1200
- line-height:var(--tds-radio-line-height);
1201
- -webkit-user-select:none;
1202
- -moz-user-select:none;
1203
- user-select:none;
1196
+ .tds-page-header__title-bar{
1197
+ display:flex;
1198
+ flex-direction:column;
1199
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1200
+ align-items:flex-start;
1201
+ justify-content:space-between;
1202
+ padding:0 var(--tds-page-header-padding-x);
1204
1203
  }
1205
1204
 
1206
- .tds-radio label{
1207
- grid-area:1 / 2;
1208
- padding-inline-start:var(--t-spacing-1);
1209
- font-size:var(--tds-radio-font-size);
1210
- font-weight:var(--t-font-weight-normal);
1211
- color:var(--tds-radio-label-color);
1212
- cursor:var(--tds-radio-cursor);
1213
- }
1214
-
1215
- .tds-radio input[type="radio"]{
1216
- position:relative;
1217
- width:1em;
1218
- height:1em;
1219
- margin:calc((1lh - 1em) / 2) 0 0;
1220
- font-size:var(--tds-radio-font-size);
1221
- line-height:inherit;
1222
- -webkit-appearance:none;
1223
- -moz-appearance:none;
1224
- appearance:none;
1225
- cursor:var(--tds-radio-cursor);
1226
- background-color:var(--tds-radio-input-background-color);
1227
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1228
- border-radius:var(--tds-radio-input-border-radius);
1229
- transition-timing-function:var(--t-ease-in-out);
1230
- transition-duration:var(--t-duration-200);
1231
- transition-property:var(--tds-radio-transition-property);
1205
+ .tds-page-header--profile > .tds-page-header__title-bar{
1206
+ align-items:center;
1232
1207
  }
1233
1208
 
1234
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1235
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1236
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1237
- }
1238
-
1239
- :is(.tds-radio input[type="radio"]):focus-visible{
1240
- outline:var(--t-focus-ring-outline);
1241
- outline-offset:var(--t-focus-ring-offset);
1242
- }
1243
-
1244
- :is(.tds-radio input[type="radio"]):disabled{
1245
- pointer-events:none;
1246
- }
1247
-
1248
- @media (prefers-reduced-motion: reduce){
1209
+ .tds-page-header__primary{
1210
+ width:100%;
1211
+ }
1249
1212
 
1250
- .tds-radio input[type="radio"]{
1251
- --tds-radio-transition-property:none;
1213
+ .tds-page-header__primary h1{
1214
+ margin:0;
1215
+ font-size:var(--tds-page-header-headline-font-size);
1216
+ font-weight:var(--t-font-weight-normal);
1217
+ line-height:32px;
1218
+ color:var(--tds-page-header-headline-color);
1219
+ overflow-wrap:break-word;
1252
1220
  }
1253
- }
1254
1221
 
1255
- .tds-radio:has(input:checked){
1256
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1257
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1258
- --tds-radio-input-border-width:4px;
1222
+ @media (min-width: 960px){
1223
+ .tds-page-header__primary{
1224
+ flex:1 1 max-content;
1225
+ width:auto;
1226
+ min-width:0;
1227
+ max-width:100%;
1259
1228
  }
1260
1229
 
1261
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1262
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1263
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1264
- }
1265
-
1266
- .tds-radio:has(input:user-invalid){
1267
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1230
+ .tds-page-header__title-bar,
1231
+ .tds-page-header--profile .tds-page-header__title-bar{
1232
+ flex-flow:row nowrap;
1233
+ row-gap:12px;
1234
+ align-items:flex-start;
1268
1235
  }
1269
-
1270
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1271
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1272
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1236
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1237
+ width:auto;
1273
1238
  }
1274
1239
 
1275
- .tds-radio:has(input:disabled){
1276
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1277
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1278
-
1279
- --tds-radio-label-color:var(--t-form-color-disabled);
1280
- --tds-radio-description-color:var(--t-form-color-disabled);
1281
- --tds-radio-cursor:not-allowed;
1282
- }
1283
-
1284
- .tds-radio:has(input:disabled) input:checked{
1285
- --tds-radio-input-background-color:var(--t-form-background-color);
1286
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1240
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1241
+ justify-content:flex-end;
1287
1242
  }
1288
-
1289
- .tds-radio-description{
1290
- display:flex;
1291
- grid-area:2 / 2;
1292
- gap:var(--t-spacing-half);
1293
- align-items:flex-start;
1294
- padding-inline-start:var(--t-spacing-1);
1295
- margin:0;
1296
- font-size:var(--tds-radio-description-font-size);
1297
- line-height:var(--tds-radio-description-line-height);
1298
- color:var(--tds-radio-description-color);
1299
- cursor:text;
1300
1243
  }
1301
1244
 
1302
- .tds-radio--sm{
1303
- --tds-radio-line-height:1.35;
1304
- --tds-radio-input-size:var(--t-element-size-sm);
1305
- --tds-radio-font-size:var(--t-font-size-sm);
1306
- --tds-radio-description-font-size:var(--t-font-size-xs);
1307
- --tds-radio-description-line-height:1.3;
1245
+ .tds-page-header-phone,
1246
+ .tds-page-header-email{
1247
+ color:var(--tds-page-header-color);
1248
+ white-space:nowrap;
1308
1249
  }
1309
-
1310
- .tds-input:has(textarea){
1311
- --tds-input-padding-block:6px;
1312
- --tds-input-resizer-size:var(--t-element-size-sm);
1313
- --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");
1250
+ .tds-page-header-email{
1251
+ max-width:100%;
1252
+ overflow:hidden;
1253
+ text-overflow:ellipsis;
1314
1254
  }
1315
1255
 
1316
- @supports (x: attr(x type(*))){
1256
+ @keyframes indicator-pulse{
1257
+ 0%{
1258
+ opacity:.3;
1259
+ transform:scale(.9);
1260
+ }
1317
1261
 
1318
- .tds-input textarea{
1319
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1320
- }
1262
+ 100%{
1263
+ opacity:0;
1264
+ transform:scale(1.75);
1321
1265
  }
1266
+ }
1322
1267
 
1323
- .tds-input.tds-textarea--resize-vertical textarea{
1324
- resize:vertical;
1325
- }
1326
1268
 
1327
- .tds-input.tds-textarea--resize-none textarea{
1328
- resize:none;
1269
+ :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{
1270
+ -webkit-appearance:none;
1271
+ appearance:none;
1329
1272
  }
1330
1273
 
1331
- .tds-input.tds-textarea--resize-auto textarea{
1332
- resize:vertical;
1274
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1275
+ inline-size:1em;
1276
+ block-size:2em;
1333
1277
  }
1334
-
1335
1278
  @supports (field-sizing: content){
1336
- .tds-input.tds-textarea--resize-auto textarea{
1337
- field-sizing:content;
1338
- resize:none;
1339
- }
1340
- }
1279
+ .tds-input--auto-width{
1280
+ inline-size:-moz-fit-content;
1281
+ inline-size:fit-content;
1282
+ min-inline-size:min(100%, 122px);
1283
+ }
1341
1284
 
1342
- .tds-input textarea{
1343
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1344
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1345
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1346
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1347
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1348
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1349
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1350
- --tds-input-scrollbar-thumb-border-radius:999px;
1351
- --tds-input-scrollbar-thumb-border-width:3px;
1352
- --tds-input-scrollbar-track-margin-block:.125rem;
1353
- scrollbar-color:initial;
1354
- transition-timing-function:var(--t-ease-in-out);
1355
- transition-duration:var(--t-duration-200);
1356
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1285
+ .tds-input--auto-width input{
1286
+ field-sizing:content;
1287
+ inline-size:auto;
1288
+ }
1357
1289
  }
1358
1290
 
1359
- @media (pointer: fine){
1360
- :is(.tds-input textarea)::-webkit-scrollbar{
1361
- width:12px;
1362
- height:12px;
1363
- cursor:default;
1364
- }
1291
+ .tds-modal-overlay{
1292
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1365
1293
 
1366
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1367
- cursor:default;
1368
- background:var(--tds-input-scrollbar-thumb-color);
1369
- background-clip:content-box;
1370
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1371
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1372
- }
1294
+ position:fixed;
1295
+ inset:0;
1296
+ z-index:1000;
1297
+ display:grid;
1298
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1299
+ justify-items:center;
1300
+ overflow-y:auto;
1301
+ background:hsl(0 0% 0% / 40%);
1302
+ }
1373
1303
 
1374
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1375
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1376
- }
1304
+ .tds-modal-overlay[data-entering]{
1305
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1306
+ }
1377
1307
 
1378
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1379
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1380
- }
1308
+ .tds-modal-overlay[data-exiting]{
1309
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1310
+ }
1381
1311
 
1382
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1383
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1384
- }
1312
+ @keyframes tds-modal-overlay-fade{
1313
+ from{
1314
+ opacity:0;
1315
+ }
1316
+ }
1385
1317
 
1386
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1387
- background:var(--tds-input-scrollbar-surface-color);
1388
- }
1318
+ .tds-modal-frame{
1319
+ --tds-modal-width:600px;
1320
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1321
+ display:flex;
1389
1322
 
1390
- :is(.tds-input textarea)::-webkit-resizer{
1391
- background:var(--tds-input-resizer-icon) no-repeat;
1392
- background-position:right bottom;
1393
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1394
- }
1323
+ grid-row:2;
1324
+ justify-content:center;
1325
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1326
+ }
1395
1327
 
1396
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1397
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1398
- cursor:default;
1399
- }
1328
+ .tds-modal-frame[data-entering]{
1329
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1330
+ }
1400
1331
 
1401
- @supports (-moz-appearance: none){
1402
- :is(.tds-input textarea){
1403
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1404
- scrollbar-width:thin;
1405
- }
1332
+ .tds-modal-frame[data-exiting]{
1333
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1334
+ }
1406
1335
 
1407
- @media (hover){
1408
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1409
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1410
- }
1411
- }
1412
- }
1336
+ .tds-modal-frame--sm{
1337
+ --tds-modal-width:400px;
1338
+ }
1339
+
1340
+ .tds-modal-frame--lg{
1341
+ --tds-modal-width:800px;
1342
+ }
1343
+
1344
+ .tds-modal-frame--xl{
1345
+ --tds-modal-width:1000px;
1346
+ }
1347
+
1348
+ @keyframes tds-modal-zoom{
1349
+ from{
1350
+ opacity:0;
1351
+ scale:.96;
1413
1352
  }
1353
+ }
1414
1354
 
1415
- .tds-radio-group{
1416
- --tds-radio-group-font-size:var(--t-font-size-md);
1417
- --tds-radio-group-line-height:1.4;
1418
- --tds-radio-group-gap:var(--t-spacing-1);
1355
+ @media (prefers-reduced-motion: reduce){
1356
+ .tds-modal-overlay[data-entering],
1357
+ .tds-modal-overlay[data-exiting],
1358
+ .tds-modal-frame[data-entering],
1359
+ .tds-modal-frame[data-exiting]{
1360
+ animation:none;
1361
+ }
1362
+ }
1419
1363
 
1420
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1421
- --tds-radio-group-description-line-height:1.35;
1422
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1423
- --tds-radio-group-description-invalid-icon-display:none;
1364
+ .tds-modal{
1424
1365
  display:flex;
1425
1366
  flex-direction:column;
1426
- gap:0;
1427
- padding:0;
1428
- margin:0;
1367
+ width:100%;
1368
+ padding-block-start:var(--t-spacing-3);
1369
+ padding-inline:0;
1370
+ background:var(--t-surface-color-card);
1429
1371
 
1430
- font-size:var(--tds-radio-group-font-size);
1431
- line-height:var(--tds-radio-group-line-height);
1432
1372
  border:0;
1373
+ border-radius:var(--t-border-radius-lg);
1374
+ box-shadow:0 4px 18px 0 #0003;
1433
1375
  }
1434
1376
 
1435
- .tds-radio-group legend{
1436
- float:left;
1437
- padding:0;
1438
- margin:0;
1377
+ .tds-modal:focus{
1378
+ outline:none;
1439
1379
  }
1440
1380
 
1441
- .tds-radio-group[aria-invalid="true"]{
1442
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1443
- --tds-radio-group-description-invalid-icon-display:inline-block;
1444
- }
1381
+ .tds-modal-header{
1382
+ display:grid;
1383
+ grid-template-columns:1fr auto;
1384
+ -moz-column-gap:var(--t-spacing-2);
1385
+ column-gap:var(--t-spacing-2);
1386
+ padding-block:0;
1387
+ padding-inline:var(--t-spacing-4);
1388
+ }
1389
+
1390
+ .tds-modal-title{
1391
+ grid-row:1;
1392
+ grid-column:1;
1393
+ margin:0;
1394
+ font-size:var(--t-font-size-2xl);
1395
+ font-weight:var(--t-font-weight-medium);
1396
+ line-height:140%;
1397
+ color:var(--t-text-color-headline);
1398
+ }
1445
1399
 
1446
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1447
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1448
- }
1400
+ .tds-modal-subtitle{
1401
+ grid-row:2;
1402
+ grid-column:1;
1403
+ margin:0;
1404
+ font-size:var(--t-font-size-md);
1405
+ font-weight:var(--t-font-weight-medium);
1406
+ line-height:140%;
1407
+ color:var(--t-text-color-secondary);
1408
+ }
1449
1409
 
1450
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1451
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1452
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1453
- }
1410
+ .tds-modal-close{
1411
+ grid-row:1;
1412
+ grid-column:2;
1413
+ align-self:center;
1414
+ color:var(--t-icon-color-dim);
1415
+ }
1454
1416
 
1455
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1456
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1457
- }
1417
+ .tds-modal-body{
1418
+ padding-block:var(--t-spacing-3);
1419
+ padding-inline:var(--t-spacing-4);
1420
+ }
1458
1421
 
1459
- .tds-radio-group:has(input:required) legend::after{
1460
- margin-left:.25ch;
1461
- color:var(--t-text-color-status-error);
1462
- content:"*";
1463
- }
1422
+ .tds-modal-body--full-width{
1423
+ padding-inline:0;
1424
+ }
1464
1425
 
1465
- .tds-radio-group-fields{
1426
+ .tds-modal-footer{
1466
1427
  display:flex;
1467
- flex-direction:column;
1468
- gap:var(--tds-radio-group-gap);
1469
- align-items:flex-start;
1470
- margin-top:var(--t-spacing-1);
1428
+ gap:var(--t-spacing-2);
1429
+ align-items:center;
1430
+ justify-content:flex-end;
1431
+ padding-block:var(--t-spacing-3);
1432
+ padding-inline:var(--t-spacing-4);
1433
+ border-top:1px solid var(--t-border-color);
1471
1434
  }
1472
1435
 
1473
- .tds-radio-group-description{
1474
- display:flex;
1475
- gap:var(--t-spacing-half);
1476
- align-items:flex-start;
1477
- margin:var(--t-spacing-fourth) 0 0;
1478
- font-size:var(--tds-radio-group-description-font-size);
1479
- line-height:var(--tds-radio-group-description-line-height);
1480
- color:var(--tds-radio-group-description-color);
1481
- cursor:text;
1436
+ .tds-modal-footer > [slot="start"]{
1437
+ margin-inline-end:auto;
1482
1438
  }
1483
1439
 
1484
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1485
- display:var(--tds-radio-group-description-invalid-icon-display);
1486
- flex-shrink:0;
1487
- margin-top:calc(.5lh - .5em);
1488
- line-height:var(--tds-radio-group-description-line-height);
1440
+ @media (min-width: 720px){
1441
+ .tds-modal-overlay{
1442
+ --tds-modal-min-margin-block:0;
1489
1443
  }
1490
1444
 
1491
- .tds-radio-group--sm{
1492
- --tds-radio-group-line-height:1.35;
1493
- --tds-radio-group-font-size:var(--t-font-size-sm);
1494
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1495
- --tds-radio-group-description-line-height:1.3;
1445
+ .tds-modal-footer{
1446
+ position:sticky;
1447
+ bottom:0;
1448
+ background:var(--t-surface-color-card);
1449
+ border-end-start-radius:var(--t-border-radius-lg);
1450
+ border-end-end-radius:var(--t-border-radius-lg);
1451
+ }
1496
1452
  }
1497
1453
 
1498
- .tds-toggle-switch{
1499
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1500
- --tds-toggle-switch-cursor:pointer;
1501
- --tds-toggle-switch-display:inline-grid;
1502
- --tds-toggle-switch-line-height:1.4;
1454
+ .tds-radio{
1455
+ --tds-radio-font-size:var(--t-font-size-md);
1456
+ --tds-radio-cursor:pointer;
1457
+ --tds-radio-line-height:1.4;
1458
+ --tds-radio-transition-property:border-width;
1503
1459
 
1504
- --tds-toggle-switch-label-color:var(--t-form-color);
1460
+ --tds-radio-input-size:var(--t-element-size-md);
1461
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1462
+ --tds-radio-input-border-color:var(--t-form-border-color);
1463
+ --tds-radio-input-border-width:var(--t-form-border-width);
1464
+ --tds-radio-input-background-color:var(--t-form-background-color);
1505
1465
 
1506
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1507
- --tds-toggle-switch-track-outline:none;
1508
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1509
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1510
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1466
+ --tds-radio-label-color:var(--t-form-color);
1511
1467
 
1512
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1513
- --tds-toggle-switch-thumb-transform:translateX(0);
1514
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1468
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1469
+ --tds-radio-description-line-height:1.35;
1470
+ --tds-radio-description-color:var(--t-text-color-secondary);
1515
1471
 
1516
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1517
- --tds-toggle-switch-description-line-height:1.35;
1518
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1519
1472
  position:relative;
1520
-
1521
- display:var(--tds-toggle-switch-display);
1473
+ display:inline-grid;
1522
1474
  grid-template-columns:auto;
1523
1475
  grid-auto-columns:1fr;
1524
1476
  gap:var(--t-spacing-fourth) 0;
1477
+ line-height:var(--tds-radio-line-height);
1525
1478
  -webkit-user-select:none;
1526
1479
  -moz-user-select:none;
1527
1480
  user-select:none;
1528
1481
  }
1529
1482
 
1530
- .tds-toggle-switch input[type="checkbox"]{
1531
- position:absolute;
1532
- width:var(--tds-toggle-switch-track-width);
1533
- height:var(--tds-toggle-switch-track-height);
1534
- margin:0;
1483
+ .tds-radio label{
1484
+ grid-area:1 / 2;
1485
+ padding-inline-start:var(--t-spacing-1);
1486
+ font-size:var(--tds-radio-font-size);
1487
+ font-weight:var(--t-font-weight-normal);
1488
+ color:var(--tds-radio-label-color);
1489
+ cursor:var(--tds-radio-cursor);
1490
+ }
1491
+
1492
+ .tds-radio input[type="radio"]{
1493
+ position:relative;
1494
+ width:1em;
1495
+ height:1em;
1496
+ margin:calc((1lh - 1em) / 2) 0 0;
1497
+ font-size:var(--tds-radio-font-size);
1498
+ line-height:inherit;
1535
1499
  -webkit-appearance:none;
1536
1500
  -moz-appearance:none;
1537
1501
  appearance:none;
1538
- cursor:var(--tds-toggle-switch-cursor);
1539
- outline:var(--tds-toggle-switch-track-outline);
1540
- outline-offset:var(--t-focus-ring-offset);
1541
- background-color:transparent;
1542
- border:0;
1543
- border-radius:var(--t-border-radius-round);
1502
+ cursor:var(--tds-radio-cursor);
1503
+ background-color:var(--tds-radio-input-background-color);
1504
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1505
+ border-radius:var(--tds-radio-input-border-radius);
1506
+ transition-timing-function:var(--t-ease-in-out);
1507
+ transition-duration:var(--t-duration-200);
1508
+ transition-property:var(--tds-radio-transition-property);
1544
1509
  }
1545
1510
 
1546
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1547
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1511
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1512
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1513
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1548
1514
  }
1549
1515
 
1550
- .tds-toggle-switch label{
1551
- display:inline-flex;
1552
- grid-area:1 / 2;
1553
- padding-inline-start:var(--t-spacing-1);
1554
- margin-top:-.09375em;
1555
- font-size:var(--tds-toggle-switch-font-size);
1556
- font-weight:var(--t-font-weight-normal);
1557
- line-height:var(--tds-toggle-switch-line-height);
1558
- color:var(--tds-toggle-switch-label-color);
1559
- cursor:var(--tds-toggle-switch-cursor);
1560
- }
1516
+ :is(.tds-radio input[type="radio"]):focus-visible{
1517
+ outline:var(--t-focus-ring-outline);
1518
+ outline-offset:var(--t-focus-ring-offset);
1519
+ }
1561
1520
 
1562
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1563
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1564
- }
1521
+ :is(.tds-radio input[type="radio"]):disabled{
1522
+ pointer-events:none;
1523
+ }
1565
1524
 
1566
- .tds-toggle-switch:has(input:checked){
1567
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1568
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1569
- }
1525
+ @media (prefers-reduced-motion: reduce){
1570
1526
 
1571
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1572
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1527
+ .tds-radio input[type="radio"]{
1528
+ --tds-radio-transition-property:none;
1529
+ }
1573
1530
  }
1574
1531
 
1575
- .tds-toggle-switch:has(input:disabled){
1576
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1577
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1578
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1579
- --tds-toggle-switch-cursor:not-allowed;
1532
+ .tds-radio:has(input:checked){
1533
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1534
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1535
+ --tds-radio-input-border-width:4px;
1580
1536
  }
1581
1537
 
1582
- .tds-toggle-switch-track{
1583
- position:relative;
1584
- flex-shrink:0;
1585
- width:var(--tds-toggle-switch-track-width);
1586
- height:var(--tds-toggle-switch-track-height);
1587
- background-color:var(--tds-toggle-switch-track-background-color);
1588
- border-radius:var(--t-border-radius-round);
1589
- transition:var(--tds-toggle-switch-track-transition);
1590
- }
1538
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1539
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1540
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1541
+ }
1591
1542
 
1592
- .tds-toggle-switch-track::before{
1593
- position:absolute;
1594
- top:var(--t-spacing-fourth);
1595
- left:var(--t-spacing-fourth);
1596
- width:var(--tds-toggle-switch-thumb-size);
1597
- height:var(--tds-toggle-switch-thumb-size);
1598
- content:"";
1599
- background-color:#fff;
1600
- border-radius:var(--t-border-radius-round);
1601
- transform:var(--tds-toggle-switch-thumb-transform);
1602
- transition:var(--tds-toggle-switch-thumb-transition);
1543
+ .tds-radio:has(input:user-invalid){
1544
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1603
1545
  }
1604
1546
 
1605
- @media (prefers-reduced-motion: reduce){
1547
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1548
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1549
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1550
+ }
1606
1551
 
1607
- .tds-toggle-switch-track{
1608
- --tds-toggle-switch-track-transition:none;
1609
- --tds-toggle-switch-thumb-transition:none;
1610
- }
1552
+ .tds-radio:has(input:disabled){
1553
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1554
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1555
+
1556
+ --tds-radio-label-color:var(--t-form-color-disabled);
1557
+ --tds-radio-description-color:var(--t-form-color-disabled);
1558
+ --tds-radio-cursor:not-allowed;
1611
1559
  }
1612
1560
 
1613
- .tds-toggle-switch-description{
1561
+ .tds-radio:has(input:disabled) input:checked{
1562
+ --tds-radio-input-background-color:var(--t-form-background-color);
1563
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1564
+ }
1565
+
1566
+ .tds-radio-description{
1614
1567
  display:flex;
1615
1568
  grid-area:2 / 2;
1569
+ gap:var(--t-spacing-half);
1616
1570
  align-items:flex-start;
1617
1571
  padding-inline-start:var(--t-spacing-1);
1618
1572
  margin:0;
1619
- font-size:var(--tds-toggle-switch-description-font-size);
1620
- line-height:var(--tds-toggle-switch-description-line-height);
1621
- color:var(--tds-toggle-switch-description-color);
1573
+ font-size:var(--tds-radio-description-font-size);
1574
+ line-height:var(--tds-radio-description-line-height);
1575
+ color:var(--tds-radio-description-color);
1622
1576
  cursor:text;
1623
1577
  }
1624
1578
 
1625
- .tds-toggle-switch--sm{
1626
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1627
- --tds-toggle-switch-line-height:1.35;
1628
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1629
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1630
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1631
- --tds-toggle-switch-description-line-height:1.3;
1579
+ .tds-radio--sm{
1580
+ --tds-radio-line-height:1.35;
1581
+ --tds-radio-input-size:var(--t-element-size-sm);
1582
+ --tds-radio-font-size:var(--t-font-size-sm);
1583
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1584
+ --tds-radio-description-line-height:1.3;
1632
1585
  }
1633
1586
 
1634
- .tds-toggle-switch--hide-label{
1635
- --tds-toggle-switch-display:inline-flex;
1587
+ .tds-radio-group{
1588
+ --tds-radio-group-font-size:var(--t-font-size-md);
1589
+ --tds-radio-group-line-height:1.4;
1590
+ --tds-radio-group-gap:var(--t-spacing-1);
1591
+
1592
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1593
+ --tds-radio-group-description-line-height:1.35;
1594
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1595
+ --tds-radio-group-description-invalid-icon-display:none;
1596
+ display:flex;
1597
+ flex-direction:column;
1598
+ gap:0;
1599
+ padding:0;
1600
+ margin:0;
1601
+
1602
+ font-size:var(--tds-radio-group-font-size);
1603
+ line-height:var(--tds-radio-group-line-height);
1604
+ border:0;
1636
1605
  }
1637
1606
 
1638
- @layer t-critical{
1639
- tds-page-header:not(.hydrated){
1640
- display:none;
1607
+ .tds-radio-group legend{
1608
+ float:left;
1609
+ padding:0;
1610
+ margin:0;
1641
1611
  }
1642
- }
1643
1612
 
1644
- @layer t-component{
1645
- .tds-page-header{
1646
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1647
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1648
- --tds-page-header-color:var(--t-text-color);
1649
- --tds-page-header-bottom-border-color:transparent;
1650
- --tds-page-header-headline-color:var(--t-text-color-headline);
1651
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1652
- --tds-page-header-padding-x:var(--t-spacing-2);
1653
- --tds-page-header-padding-y:var(--t-spacing-2);
1654
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1655
- --tds-page-header-nav-gap:var(--t-spacing-1);
1656
- --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%);
1657
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1658
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1659
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1660
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1661
- --tds-page-header-nav-item-border-width:1px;
1613
+ .tds-radio-group[aria-invalid="true"]{
1614
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1615
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1616
+ }
1662
1617
 
1663
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1664
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1618
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1619
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1620
+ }
1665
1621
 
1666
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1667
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1668
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1622
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1623
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1624
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1625
+ }
1669
1626
 
1670
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1671
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1627
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1628
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1629
+ }
1672
1630
 
1673
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1674
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1675
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1631
+ .tds-radio-group:has(input:required) legend::after{
1632
+ margin-left:.25ch;
1633
+ color:var(--t-text-color-status-error);
1634
+ content:"*";
1635
+ }
1676
1636
 
1677
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1678
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1679
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1680
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1681
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1682
- }
1637
+ .tds-radio-group-fields{
1638
+ display:flex;
1639
+ flex-direction:column;
1640
+ gap:var(--tds-radio-group-gap);
1641
+ align-items:flex-start;
1642
+ margin-top:var(--t-spacing-1);
1643
+ }
1683
1644
 
1684
- .tds-page-header--profile{
1685
- --tds-page-header-padding-y:20px;
1686
- }
1645
+ .tds-radio-group-description{
1646
+ display:flex;
1647
+ gap:var(--t-spacing-half);
1648
+ align-items:flex-start;
1649
+ margin:var(--t-spacing-fourth) 0 0;
1650
+ font-size:var(--tds-radio-group-description-font-size);
1651
+ line-height:var(--tds-radio-group-description-line-height);
1652
+ color:var(--tds-radio-group-description-color);
1653
+ cursor:text;
1654
+ }
1687
1655
 
1688
- @supports (color: light-dark(#fff, #000)){
1689
- .tds-page-header{
1690
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1691
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1692
- }
1656
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1657
+ display:var(--tds-radio-group-description-invalid-icon-display);
1658
+ flex-shrink:0;
1659
+ margin-top:calc(.5lh - .5em);
1660
+ line-height:var(--tds-radio-group-description-line-height);
1693
1661
  }
1694
1662
 
1695
- @media (min-width: 600px){
1696
- .tds-page-header{
1697
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1698
- --tds-page-header-color:var(--t-text-color-secondary);
1699
- --tds-page-header-bottom-border-color:var(--t-border-color);
1700
- --tds-page-header-padding-x:var(--t-spacing-3);
1701
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1702
- --tds-page-header-nav-gap:var(--t-spacing-half);
1703
- --tds-page-header-nav-background:transparent;
1704
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1705
- --tds-page-header-nav-item-border-width:1px;
1706
- --tds-page-header-nav-item-color:var(--t-text-color);
1707
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1708
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1709
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1710
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1711
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1712
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1713
- }
1714
- }
1663
+ .tds-radio-group--sm{
1664
+ --tds-radio-group-line-height:1.35;
1665
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1666
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1667
+ --tds-radio-group-description-line-height:1.3;
1715
1668
  }
1716
1669
 
1717
- .tds-page-header{
1718
- display:flex;
1719
- flex-direction:column;
1720
- padding-top:var(--tds-page-header-padding-y);
1721
- color:var(--tds-page-header-color);
1722
- background:var(--tds-page-header-background-color);
1723
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1670
+ .tds-input:has(textarea){
1671
+ --tds-input-padding-block:6px;
1672
+ --tds-input-resizer-size:var(--t-element-size-sm);
1673
+ --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");
1724
1674
  }
1725
1675
 
1726
- .tds-page-header:not(.has-nav){
1727
- padding-bottom:var(--tds-page-header-padding-y);
1728
- }
1676
+ @supports (x: attr(x type(*))){
1729
1677
 
1730
- .tds-page-header.inactive{
1731
- background:var(--tds-page-header-background-color-inactive);
1678
+ .tds-input textarea{
1679
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1680
+ }
1732
1681
  }
1733
1682
 
1734
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1735
- width:100%;
1736
- }
1683
+ .tds-input.tds-textarea--resize-vertical textarea{
1684
+ resize:vertical;
1685
+ }
1737
1686
 
1738
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1739
- display:flex;
1740
- flex-flow:row wrap;
1741
- gap:var(--t-spacing-half) var(--t-spacing-1);
1742
- align-items:flex-start;
1743
- justify-content:flex-start;
1744
- min-width:0;
1745
- }
1687
+ .tds-input.tds-textarea--resize-none textarea{
1688
+ resize:none;
1689
+ }
1746
1690
 
1747
- :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{
1748
- display:flex;
1749
- gap:var(--tds-page-header-nav-gap);
1750
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1751
- margin:0 0 -1px;
1752
- overflow:auto;
1753
- list-style:none;
1754
- background:var(--tds-page-header-nav-background);
1691
+ .tds-input.tds-textarea--resize-auto textarea{
1692
+ resize:vertical;
1755
1693
  }
1756
1694
 
1757
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1758
- position:relative;
1759
- display:inline-flex;
1760
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1761
- font-size:var(--t-font-size-sm);
1762
- line-height:22px;
1763
- color:var(--tds-page-header-nav-item-color);
1764
- white-space:nowrap;
1765
- text-decoration:none;
1766
- -webkit-appearance:none;
1767
- -moz-appearance:none;
1768
- appearance:none;
1769
- cursor:pointer;
1770
- outline-offset:-2px;
1771
- background-color:var(--tds-page-header-nav-item-background-color);
1772
- background-clip:padding-box;
1773
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1774
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1775
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1695
+ @supports (field-sizing: content){
1696
+ .tds-input.tds-textarea--resize-auto textarea{
1697
+ field-sizing:content;
1698
+ resize:none;
1699
+ }
1700
+ }
1701
+
1702
+ .tds-input textarea{
1703
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1704
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1705
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1706
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1707
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1708
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1709
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1710
+ --tds-input-scrollbar-thumb-border-radius:999px;
1711
+ --tds-input-scrollbar-thumb-border-width:3px;
1712
+ --tds-input-scrollbar-track-margin-block:.125rem;
1713
+ scrollbar-color:initial;
1714
+ transition-timing-function:var(--t-ease-in-out);
1715
+ transition-duration:var(--t-duration-200);
1716
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1717
+ }
1718
+
1719
+ @media (pointer: fine){
1720
+ :is(.tds-input textarea)::-webkit-scrollbar{
1721
+ width:12px;
1722
+ height:12px;
1723
+ cursor:default;
1724
+ }
1725
+
1726
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1727
+ cursor:default;
1728
+ background:var(--tds-input-scrollbar-thumb-color);
1729
+ background-clip:content-box;
1730
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1731
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1776
1732
  }
1777
1733
 
1778
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1779
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1780
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1781
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1782
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1783
- }
1784
-
1785
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1786
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1787
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1788
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1789
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1790
- }
1734
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1735
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1736
+ }
1791
1737
 
1792
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1793
- background-color:var(--tds-page-header-nav-item-background-color-active);
1794
- border-color:var(--tds-page-header-nav-item-border-color-active);
1795
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1796
- }
1738
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1739
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1740
+ }
1797
1741
 
1798
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1799
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1800
- color:var(--tds-page-header-nav-item-color-disabled);
1801
- cursor:not-allowed;
1802
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1803
- opacity:1;
1804
- }
1742
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1743
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1744
+ }
1805
1745
 
1806
- @media (min-width: 600px){
1807
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1808
- position:absolute;
1809
- inset:auto -1px -1px;
1810
- height:1px;
1811
- pointer-events:none;
1812
- content:"";
1813
- background-color:var(--tds-page-header-bottom-border-color);
1814
- }
1815
- }
1746
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1747
+ background:var(--tds-input-scrollbar-surface-color);
1748
+ }
1816
1749
 
1817
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1818
- position:relative;
1750
+ :is(.tds-input textarea)::-webkit-resizer{
1751
+ background:var(--tds-input-resizer-icon) no-repeat;
1752
+ background-position:right bottom;
1753
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1819
1754
  }
1820
1755
 
1821
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1822
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1823
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1824
- }
1756
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1757
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1758
+ cursor:default;
1759
+ }
1825
1760
 
1826
- :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{
1827
- position:absolute;
1828
- top:-5px;
1829
- right:-2px;
1830
- width:10px;
1831
- height:10px;
1832
- content:"";
1833
- background:var(--tds-page-header-nav-item-indicator-color);
1834
- border-radius:50%;
1761
+ @supports (-moz-appearance: none){
1762
+ :is(.tds-input textarea){
1763
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1764
+ scrollbar-width:thin;
1835
1765
  }
1836
1766
 
1837
- @media (prefers-reduced-motion: no-preference){
1838
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1839
- animation:indicator-pulse 1.25s ease infinite;
1767
+ @media (hover){
1768
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1769
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1840
1770
  }
1841
1771
  }
1772
+ }
1773
+ }
1842
1774
 
1843
- .tds-page-header__title-bar{
1844
- display:flex;
1845
- flex-direction:column;
1846
- gap:var(--t-spacing-2) var(--t-spacing-1);
1847
- align-items:flex-start;
1848
- justify-content:space-between;
1849
- padding:0 var(--tds-page-header-padding-x);
1850
- }
1775
+ .tds-toggle-switch{
1776
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1777
+ --tds-toggle-switch-cursor:pointer;
1778
+ --tds-toggle-switch-display:inline-grid;
1779
+ --tds-toggle-switch-line-height:1.4;
1851
1780
 
1852
- .tds-page-header--profile > .tds-page-header__title-bar{
1853
- align-items:center;
1854
- }
1781
+ --tds-toggle-switch-label-color:var(--t-form-color);
1855
1782
 
1856
- .tds-page-header__primary{
1857
- width:100%;
1783
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1784
+ --tds-toggle-switch-track-outline:none;
1785
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1786
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1787
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1788
+
1789
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1790
+ --tds-toggle-switch-thumb-transform:translateX(0);
1791
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1792
+
1793
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1794
+ --tds-toggle-switch-description-line-height:1.35;
1795
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1796
+ position:relative;
1797
+
1798
+ display:var(--tds-toggle-switch-display);
1799
+ grid-template-columns:auto;
1800
+ grid-auto-columns:1fr;
1801
+ gap:var(--t-spacing-fourth) 0;
1802
+ -webkit-user-select:none;
1803
+ -moz-user-select:none;
1804
+ user-select:none;
1858
1805
  }
1859
1806
 
1860
- .tds-page-header__primary h1{
1807
+ .tds-toggle-switch input[type="checkbox"]{
1808
+ position:absolute;
1809
+ width:var(--tds-toggle-switch-track-width);
1810
+ height:var(--tds-toggle-switch-track-height);
1861
1811
  margin:0;
1862
- font-size:var(--tds-page-header-headline-font-size);
1812
+ -webkit-appearance:none;
1813
+ -moz-appearance:none;
1814
+ appearance:none;
1815
+ cursor:var(--tds-toggle-switch-cursor);
1816
+ outline:var(--tds-toggle-switch-track-outline);
1817
+ outline-offset:var(--t-focus-ring-offset);
1818
+ background-color:transparent;
1819
+ border:0;
1820
+ border-radius:var(--t-border-radius-round);
1821
+ }
1822
+
1823
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1824
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1825
+ }
1826
+
1827
+ .tds-toggle-switch label{
1828
+ display:inline-flex;
1829
+ grid-area:1 / 2;
1830
+ padding-inline-start:var(--t-spacing-1);
1831
+ margin-top:-.09375em;
1832
+ font-size:var(--tds-toggle-switch-font-size);
1863
1833
  font-weight:var(--t-font-weight-normal);
1864
- line-height:32px;
1865
- color:var(--tds-page-header-headline-color);
1866
- overflow-wrap:break-word;
1834
+ line-height:var(--tds-toggle-switch-line-height);
1835
+ color:var(--tds-toggle-switch-label-color);
1836
+ cursor:var(--tds-toggle-switch-cursor);
1867
1837
  }
1868
1838
 
1869
- @media (min-width: 960px){
1870
- .tds-page-header__primary{
1871
- flex:1 1 max-content;
1872
- width:auto;
1873
- min-width:0;
1874
- max-width:100%;
1839
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1840
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1875
1841
  }
1876
1842
 
1877
- .tds-page-header__title-bar,
1878
- .tds-page-header--profile .tds-page-header__title-bar{
1879
- flex-flow:row nowrap;
1880
- row-gap:12px;
1881
- align-items:flex-start;
1843
+ .tds-toggle-switch:has(input:checked){
1844
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1845
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1882
1846
  }
1883
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1884
- width:auto;
1885
- }
1886
1847
 
1887
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1888
- justify-content:flex-end;
1848
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1849
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1889
1850
  }
1890
- }
1891
1851
 
1892
- .tds-page-header-phone,
1893
- .tds-page-header-email{
1894
- color:var(--tds-page-header-color);
1895
- white-space:nowrap;
1896
- }
1897
- .tds-page-header-email{
1898
- max-width:100%;
1899
- overflow:hidden;
1900
- text-overflow:ellipsis;
1852
+ .tds-toggle-switch:has(input:disabled){
1853
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1854
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1855
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1856
+ --tds-toggle-switch-cursor:not-allowed;
1857
+ }
1858
+
1859
+ .tds-toggle-switch-track{
1860
+ position:relative;
1861
+ flex-shrink:0;
1862
+ width:var(--tds-toggle-switch-track-width);
1863
+ height:var(--tds-toggle-switch-track-height);
1864
+ background-color:var(--tds-toggle-switch-track-background-color);
1865
+ border-radius:var(--t-border-radius-round);
1866
+ transition:var(--tds-toggle-switch-track-transition);
1901
1867
  }
1902
1868
 
1903
- @keyframes indicator-pulse{
1904
- 0%{
1905
- opacity:.3;
1906
- transform:scale(.9);
1869
+ .tds-toggle-switch-track::before{
1870
+ position:absolute;
1871
+ top:var(--t-spacing-fourth);
1872
+ left:var(--t-spacing-fourth);
1873
+ width:var(--tds-toggle-switch-thumb-size);
1874
+ height:var(--tds-toggle-switch-thumb-size);
1875
+ content:"";
1876
+ background-color:#fff;
1877
+ border-radius:var(--t-border-radius-round);
1878
+ transform:var(--tds-toggle-switch-thumb-transform);
1879
+ transition:var(--tds-toggle-switch-thumb-transition);
1907
1880
  }
1908
1881
 
1909
- 100%{
1910
- opacity:0;
1911
- transform:scale(1.75);
1882
+ @media (prefers-reduced-motion: reduce){
1883
+
1884
+ .tds-toggle-switch-track{
1885
+ --tds-toggle-switch-track-transition:none;
1886
+ --tds-toggle-switch-thumb-transition:none;
1887
+ }
1912
1888
  }
1889
+
1890
+ .tds-toggle-switch-description{
1891
+ display:flex;
1892
+ grid-area:2 / 2;
1893
+ align-items:flex-start;
1894
+ padding-inline-start:var(--t-spacing-1);
1895
+ margin:0;
1896
+ font-size:var(--tds-toggle-switch-description-font-size);
1897
+ line-height:var(--tds-toggle-switch-description-line-height);
1898
+ color:var(--tds-toggle-switch-description-color);
1899
+ cursor:text;
1900
+ }
1901
+
1902
+ .tds-toggle-switch--sm{
1903
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1904
+ --tds-toggle-switch-line-height:1.35;
1905
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1906
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1907
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1908
+ --tds-toggle-switch-description-line-height:1.3;
1909
+ }
1910
+
1911
+ .tds-toggle-switch--hide-label{
1912
+ --tds-toggle-switch-display:inline-flex;
1913
1913
  }
1914
1914
 
1915
1915