@planningcenter/tapestry 3.1.0 → 3.1.1-qa-.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 (16) hide show
  1. package/dist/index.css +186 -161
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +820 -795
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +820 -795
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tapestry-wc/dist/components/{p-ByzMXnIY.js → p-CFmtpCIr.js} +11 -6
  8. package/dist/tapestry-wc/dist/components/p-CFmtpCIr.js.map +1 -0
  9. package/dist/tapestry-wc/dist/components/tds-sidenav.js +1 -1
  10. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  11. package/dist/tokens.css +10 -0
  12. package/dist/tokens.css.map +1 -1
  13. package/dist/unstable.css +186 -161
  14. package/dist/unstable.css.map +1 -1
  15. package/package.json +5 -5
  16. package/dist/tapestry-wc/dist/components/p-ByzMXnIY.js.map +0 -1
package/dist/index.css CHANGED
@@ -402,6 +402,16 @@
402
402
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
403
403
  --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
404
404
  --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
405
+ --t-ease-linear:linear;
406
+ --t-ease-in:cubic-bezier(0.5, 0, 1, 1);
407
+ --t-ease-out:cubic-bezier(0, 0, 0.4, 1);
408
+ --t-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1);
409
+ --t-duration-0:0ms;
410
+ --t-duration-100:85ms;
411
+ --t-duration-200:130ms;
412
+ --t-duration-300:160ms;
413
+ --t-duration-400:240ms;
414
+ --t-duration-500:400ms;
405
415
  --t-focus-ring-color:var(--t-fill-color-interaction);
406
416
  --t-focus-ring-offset:2px;
407
417
  --t-focus-ring-outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
@@ -979,154 +989,133 @@
979
989
  }
980
990
 
981
991
  .tds-page-header:not(.has-nav){
982
- padding-bottom:var(--tds-page-header-padding-y);
983
- }
992
+ padding-bottom:var(--tds-page-header-padding-y);
993
+ }
984
994
 
985
995
  .tds-page-header.inactive{
986
- background:var(--tds-page-header-background-color-inactive);
987
- }
988
-
989
- .tds-page-header__title-bar{
990
- display:flex;
991
- flex-direction:column;
992
- gap:var(--t-spacing-2) var(--t-spacing-1);
993
- align-items:flex-start;
994
- justify-content:space-between;
995
- padding:0 var(--tds-page-header-padding-x);
996
- }
996
+ background:var(--tds-page-header-background-color-inactive);
997
+ }
997
998
 
998
- .tds-page-header--profile > .tds-page-header__title-bar{
999
- align-items:center;
1000
- }
999
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1000
+ width:100%;
1001
+ }
1001
1002
 
1002
- .tds-page-header__primary{
1003
- width:100%;
1004
- }
1003
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1004
+ display:flex;
1005
+ flex-flow:row wrap;
1006
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1007
+ align-items:flex-start;
1008
+ justify-content:flex-start;
1009
+ min-width:0;
1010
+ }
1005
1011
 
1006
- .tds-page-header__primary h1{
1007
- margin:0;
1008
- font-size:var(--tds-page-header-headline-font-size);
1009
- font-weight:var(--t-font-weight-normal);
1010
- line-height:32px;
1011
- color:var(--tds-page-header-headline-color);
1012
- overflow-wrap:break-word;
1013
- }
1012
+ :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{
1013
+ display:flex;
1014
+ gap:var(--tds-page-header-nav-gap);
1015
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1016
+ margin:0 0 -1px;
1017
+ overflow:auto;
1018
+ list-style:none;
1019
+ background:var(--tds-page-header-nav-background);
1020
+ }
1014
1021
 
1015
- .tds-page-header [slot="actions"],
1016
- .tds-page-header .tds-page-header__actions{
1017
- width:100%;
1018
- }
1022
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1023
+ position:relative;
1024
+ display:inline-flex;
1025
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1026
+ font-size:var(--t-font-size-sm);
1027
+ line-height:22px;
1028
+ color:var(--tds-page-header-nav-item-color);
1029
+ white-space:nowrap;
1030
+ text-decoration:none;
1031
+ -webkit-appearance:none;
1032
+ -moz-appearance:none;
1033
+ appearance:none;
1034
+ cursor:pointer;
1035
+ outline-offset:-2px;
1036
+ background-color:var(--tds-page-header-nav-item-background-color);
1037
+ background-clip:padding-box;
1038
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1039
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1040
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1041
+ }
1042
+
1043
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1044
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1045
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1046
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1047
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1048
+ }
1019
1049
 
1020
- .has-multi-actions.tds-page-header [slot="actions"],
1021
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1022
- display:flex;
1023
- flex-flow:row wrap;
1024
- gap:var(--t-spacing-half) var(--t-spacing-1);
1025
- align-items:flex-start;
1026
- justify-content:flex-start;
1027
- min-width:0;
1028
- }
1050
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1051
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1052
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1053
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1054
+ }
1029
1055
 
1030
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1031
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1032
- .tds-page-header nav[slot="navigation"] ul,
1033
- .tds-page-header nav.tds-page-header__nav ul{
1034
- display:flex;
1035
- gap:var(--tds-page-header-nav-gap);
1036
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1037
- margin:0 0 -1px;
1038
- overflow:auto;
1039
- list-style:none;
1040
- background:var(--tds-page-header-nav-background);
1041
- }
1056
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1057
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1058
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1059
+ }
1042
1060
 
1043
- .tds-page-header nav[slot="navigation"] a,
1044
- .tds-page-header nav[slot="navigation"] button,
1045
- .tds-page-header nav.tds-page-header__nav a,
1046
- .tds-page-header nav.tds-page-header__nav button{
1047
- position:relative;
1048
- display:inline-flex;
1049
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1050
- font-size:var(--t-font-size-sm);
1051
- line-height:22px;
1052
- color:var(--tds-page-header-nav-item-color);
1053
- white-space:nowrap;
1054
- text-decoration:none;
1055
- -webkit-appearance:none;
1056
- -moz-appearance:none;
1057
- appearance:none;
1058
- cursor:pointer;
1059
- outline-offset:-2px;
1060
- background-color:var(--tds-page-header-nav-item-background-color);
1061
- background-clip:padding-box;
1062
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1063
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1064
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1065
- }
1061
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1062
+ color:var(--tds-page-header-nav-item-color-disabled);
1063
+ cursor:not-allowed;
1064
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1065
+ opacity:1;
1066
+ }
1066
1067
 
1067
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1068
- position:relative;
1069
- }
1068
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1069
+ position:relative;
1070
+ }
1070
1071
 
1071
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1072
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1073
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1074
- }
1072
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1073
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1074
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1075
+ }
1075
1076
 
1076
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1077
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1078
- position:absolute;
1079
- top:-5px;
1080
- right:-2px;
1081
- width:10px;
1082
- height:10px;
1083
- content:"";
1084
- background:var(--tds-page-header-nav-item-indicator-color);
1085
- border-radius:50%;
1086
- }
1077
+ :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{
1078
+ position:absolute;
1079
+ top:-5px;
1080
+ right:-2px;
1081
+ width:10px;
1082
+ height:10px;
1083
+ content:"";
1084
+ background:var(--tds-page-header-nav-item-indicator-color);
1085
+ border-radius:50%;
1086
+ }
1087
1087
 
1088
1088
  @media (prefers-reduced-motion: no-preference){
1089
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1090
- animation:indicator-pulse 1.25s ease infinite;
1091
- }
1092
- }
1089
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1090
+ animation:indicator-pulse 1.25s ease infinite;
1091
+ }
1092
+ }
1093
1093
 
1094
- .tds-page-header nav[slot="navigation"] a.selected,
1095
- .tds-page-header nav[slot="navigation"] button.selected,
1096
- .tds-page-header nav.tds-page-header__nav a.selected,
1097
- .tds-page-header nav.tds-page-header__nav button.selected{
1098
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1099
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1100
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1101
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1094
+ .tds-page-header__title-bar{
1095
+ display:flex;
1096
+ flex-direction:column;
1097
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1098
+ align-items:flex-start;
1099
+ justify-content:space-between;
1100
+ padding:0 var(--tds-page-header-padding-x);
1102
1101
  }
1103
1102
 
1104
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1105
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1106
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1107
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1108
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1109
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1110
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1111
- }
1103
+ .tds-page-header--profile > .tds-page-header__title-bar{
1104
+ align-items:center;
1105
+ }
1112
1106
 
1113
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1114
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1115
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1116
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1117
- background-color:var(--tds-page-header-nav-item-background-color-active);
1118
- border-color:var(--tds-page-header-nav-item-border-color-active);
1107
+ .tds-page-header__primary{
1108
+ width:100%;
1119
1109
  }
1120
1110
 
1121
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1122
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1123
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1124
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1125
- color:var(--tds-page-header-nav-item-color-disabled);
1126
- cursor:not-allowed;
1127
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1128
- opacity:1;
1129
- }
1111
+ .tds-page-header__primary h1{
1112
+ margin:0;
1113
+ font-size:var(--tds-page-header-headline-font-size);
1114
+ font-weight:var(--t-font-weight-normal);
1115
+ line-height:32px;
1116
+ color:var(--tds-page-header-headline-color);
1117
+ overflow-wrap:break-word;
1118
+ }
1130
1119
 
1131
1120
  @media (min-width: 960px){
1132
1121
  .tds-page-header__primary{
@@ -1142,16 +1131,13 @@
1142
1131
  row-gap:12px;
1143
1132
  align-items:flex-start;
1144
1133
  }
1134
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1135
+ width:auto;
1136
+ }
1145
1137
 
1146
- .tds-page-header [slot="actions"],
1147
- .tds-page-header .tds-page-header__actions{
1148
- width:auto;
1149
- }
1150
-
1151
- .has-multi-actions.tds-page-header [slot="actions"],
1152
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1153
- justify-content:flex-end;
1154
- }
1138
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1139
+ justify-content:flex-end;
1140
+ }
1155
1141
  }
1156
1142
 
1157
1143
  .tds-page-header-phone,
@@ -1188,11 +1174,18 @@
1188
1174
 
1189
1175
  @layer tds-component{
1190
1176
  tds-sidenav,
1191
- .tds-sidenav{
1177
+ .tds-sidenav{
1192
1178
  --tds-sidenav-indent:12px;
1193
1179
  --tds-sidenav-item-depth:0;
1194
1180
 
1195
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
1181
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1182
+
1183
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1184
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1185
+ --tds-sidenav-collapse-closed-opacity:0;
1186
+ --tds-sidenav-collapse-open-opacity:1;
1187
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1188
+ --tds-sidenav-collapse-open-transform:translateY(0);
1196
1189
 
1197
1190
  --tds-sidenav-item-icon-size:var(--t-element-size-md);
1198
1191
  --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
@@ -1211,6 +1204,16 @@
1211
1204
  --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1212
1205
  }
1213
1206
 
1207
+ @media (prefers-reduced-motion: reduce){
1208
+ tds-sidenav,
1209
+ .tds-sidenav{
1210
+ --tds-sidenav-collapse-transition-enter:none;
1211
+ --tds-sidenav-collapse-transition-exit:none;
1212
+ --tds-sidenav-collapse-closed-transform:none;
1213
+ --tds-sidenav-collapse-open-transform:none;
1214
+ }
1215
+ }
1216
+
1214
1217
  .tds-sidenav--theme-gray{
1215
1218
  --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1216
1219
  --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
@@ -1365,7 +1368,7 @@
1365
1368
  block-size:0;
1366
1369
  overflow-y:clip;
1367
1370
  opacity:0;
1368
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1371
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1369
1372
  }
1370
1373
 
1371
1374
  :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
@@ -1449,14 +1452,17 @@
1449
1452
  max-width:min(448px, calc(100vw - 48px));
1450
1453
  padding:0;
1451
1454
  margin:12px 0;
1455
+ position-area:bottom span-right;
1452
1456
  overflow:hidden;
1453
1457
  outline:0;
1454
1458
  background:var(--t-surface-color-card);
1455
1459
  border:0;
1456
1460
  border-radius:6px;
1457
1461
  box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1462
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1463
+ transform:var(--tds-sidenav-collapse-open-transform);
1464
+ transition:var(--tds-sidenav-collapse-transition-enter);
1458
1465
  will-change:transform;
1459
- position-area:bottom span-right;
1460
1466
  }
1461
1467
 
1462
1468
  .tds-sidenav-scroll-container{
@@ -1476,11 +1482,28 @@
1476
1482
  .tds-sidenav-collapse:popover-open{
1477
1483
  display:flex;
1478
1484
  }
1485
+
1486
+ .tds-sidenav-collapse:not(:popover-open){
1487
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1488
+ transition:var(--tds-sidenav-collapse-transition-exit);
1489
+ }
1490
+
1491
+ @starting-style{
1492
+ .tds-sidenav-collapse:popover-open{
1493
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1494
+ transform:var(--tds-sidenav-collapse-closed-transform);
1495
+ }
1496
+ }
1479
1497
  }
1480
1498
  @supports not selector(:popover-open){
1481
1499
  .tds-sidenav-collapse.\:popover-open{
1482
1500
  display:flex;
1483
1501
  }
1502
+
1503
+ .tds-sidenav-collapse:not(.\:popover-open){
1504
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1505
+ transition:var(--tds-sidenav-collapse-transition-exit);
1506
+ }
1484
1507
  }
1485
1508
  }
1486
1509
 
@@ -1551,7 +1574,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1551
1574
  background-clip:padding-box;
1552
1575
  border:var(--tds-btn-border-width) solid var(--tds-btn-border-color);
1553
1576
  border-radius:var(--tds-btn-border-radius);
1554
- transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
1577
+ transition-timing-function:var(--t-ease-in-out);
1578
+ transition-duration:var(--t-duration-200);
1579
+ transition-property:color, background-color, border-color, box-shadow, fill, stroke, opacity;
1555
1580
  }
1556
1581
 
1557
1582
  .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))){
@@ -1936,7 +1961,7 @@ a[class="tds-btn"]{
1936
1961
  }
1937
1962
 
1938
1963
  .tds-btn--dropdown .suffix{
1939
- transition:transform .2s ease-in-out;
1964
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
1940
1965
  }
1941
1966
 
1942
1967
  .tds-btn--dropdown[aria-expanded="true"] .suffix{
@@ -2057,8 +2082,8 @@ a[class="tds-btn"]{
2057
2082
  background-color:var(--tds-checkbox-input-background-color);
2058
2083
  border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
2059
2084
  border-radius:var(--tds-checkbox-input-border-radius);
2060
- transition-timing-function:ease-in-out;
2061
- transition-duration:180ms;
2085
+ transition-timing-function:var(--t-ease-in-out);
2086
+ transition-duration:var(--t-duration-200);
2062
2087
  transition-property:var(--tds-checkbox-transition-property);
2063
2088
  }
2064
2089
 
@@ -2239,8 +2264,8 @@ a[class="tds-btn"]{
2239
2264
 
2240
2265
  .tds-input :is(input,textarea){
2241
2266
  inline-size:100%;
2242
- min-block-size:var(--tds-input-min-height);
2243
2267
  block-size:auto;
2268
+ min-block-size:var(--tds-input-min-height);
2244
2269
  padding-block:var(--tds-input-padding-block);
2245
2270
  padding-inline:var(--tds-input-padding-inline);
2246
2271
  font-family:inherit;
@@ -2254,8 +2279,8 @@ a[class="tds-btn"]{
2254
2279
  background-color:var(--tds-input-background-color);
2255
2280
  border:var(--t-form-border-width) solid var(--tds-input-border-color);
2256
2281
  border-radius:var(--t-form-border-radius);
2257
- transition-timing-function:ease-in-out;
2258
- transition-duration:180ms;
2282
+ transition-timing-function:var(--t-ease-in-out);
2283
+ transition-duration:var(--t-duration-200);
2259
2284
  transition-property:var(--tds-input-transition-property);
2260
2285
  }
2261
2286
 
@@ -2401,8 +2426,8 @@ a[class="tds-btn"]{
2401
2426
  background-color:var(--tds-radio-input-background-color);
2402
2427
  border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2403
2428
  border-radius:var(--tds-radio-input-border-radius);
2404
- transition-timing-function:ease-in-out;
2405
- transition-duration:180ms;
2429
+ transition-timing-function:var(--t-ease-in-out);
2430
+ transition-duration:var(--t-duration-200);
2406
2431
  transition-property:var(--tds-radio-transition-property);
2407
2432
  }
2408
2433
 
@@ -2584,7 +2609,7 @@ a[class="tds-btn"]{
2584
2609
  --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzQzYTQwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIgNSA2IDYgNi02Ii8+PC9zdmc+");
2585
2610
  --tds-select-caret-size:.75em;
2586
2611
  --tds-select-caret-inline-offset:.75em;
2587
- --tds-select-caret-transition:transform 180ms cubic-bezier(.45, 0, .4, 1);;
2612
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
2588
2613
 
2589
2614
  --tds-select-dropdown-background-color:var(--t-surface-color-card);
2590
2615
  --tds-select-dropdown-border:1px solid var(--t-border-color);
@@ -2595,8 +2620,8 @@ a[class="tds-btn"]{
2595
2620
  --tds-select-dropdown-border-radius:var(--t-border-radius);
2596
2621
  --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2597
2622
  --tds-select-dropdown-scroll-behavior:smooth;
2598
- --tds-select-dropdown-transition-enter:opacity 160ms ease, transform 160ms cubic-bezier(0, 0, .4, 1), display 160ms allow-discrete, overlay 160ms allow-discrete;
2599
- --tds-select-dropdown-transition-exit:opacity 130ms ease, transform 130ms cubic-bezier(.5, 0, 1, 1), display 130ms allow-discrete, overlay 130ms allow-discrete;
2623
+ --tds-select-dropdown-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2624
+ --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
2600
2625
  --tds-select-dropdown-closed-opacity:0;
2601
2626
  --tds-select-dropdown-open-opacity:1;
2602
2627
  --tds-select-dropdown-closed-transform:translateY(-8px);
@@ -2621,7 +2646,7 @@ a[class="tds-btn"]{
2621
2646
  --tds-select-group-label-color:var(--t-text-color-secondary);
2622
2647
  --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2623
2648
  --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2624
- --tds-select-group-label-transition:color .3s ease;
2649
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
2625
2650
 
2626
2651
  position:relative;
2627
2652
  display:flex;
@@ -2662,8 +2687,8 @@ a[class="tds-btn"]{
2662
2687
  background-size:var(--tds-select-caret-size);
2663
2688
  border:var(--t-form-border-width) solid var(--tds-select-border-color);
2664
2689
  border-radius:var(--t-form-border-radius);
2665
- transition-timing-function:ease-in-out;
2666
- transition-duration:160ms;
2690
+ transition-timing-function:var(--t-ease-in-out);
2691
+ transition-duration:var(--t-duration-300);
2667
2692
  transition-property:var(--tds-select-transition-property);
2668
2693
  }
2669
2694
 
@@ -2846,7 +2871,7 @@ a[class="tds-btn"]{
2846
2871
  color:var(--tds-select-placeholder-color);
2847
2872
  white-space:nowrap;
2848
2873
  background-image:none;
2849
- transition:background-color 160ms ease-in-out, border-color 160ms ease-in-out, outline-color 160ms ease-in-out, outline-offset 160ms ease-in-out, transform .1s ease;
2874
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
2850
2875
  -webkit-tap-highlight-color:transparent;
2851
2876
  }
2852
2877
 
@@ -3043,8 +3068,8 @@ a[class="tds-btn"]{
3043
3068
  --tds-input-scrollbar-thumb-border-width:3px;
3044
3069
  --tds-input-scrollbar-track-margin-block:.125rem;
3045
3070
  scrollbar-color:initial;
3046
- transition-timing-function:ease-in-out;
3047
- transition-duration:180ms;
3071
+ transition-timing-function:var(--t-ease-in-out);
3072
+ transition-duration:var(--t-duration-200);
3048
3073
  transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
3049
3074
  }
3050
3075
 
@@ -3117,11 +3142,11 @@ a[class="tds-btn"]{
3117
3142
  --tds-toggle-switch-track-outline:none;
3118
3143
  --tds-toggle-switch-track-height:var(--t-container-size-xs);
3119
3144
  --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
3120
- --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
3145
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
3121
3146
 
3122
3147
  --tds-toggle-switch-thumb-size:var(--t-element-size-md);
3123
3148
  --tds-toggle-switch-thumb-transform:translateX(0);
3124
- --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
3149
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
3125
3150
 
3126
3151
  --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
3127
3152
  --tds-toggle-switch-description-line-height:1.35;