@planningcenter/tapestry 3.2.0-rc.2 → 3.2.0-rc.4

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 (36) hide show
  1. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  2. package/dist/components/date-picker/DatePicker.js +1 -1
  3. package/dist/components/date-picker/DatePicker.js.map +1 -1
  4. package/dist/components/page-header/index.js +1 -1
  5. package/dist/components/sidenav/index.js +1 -1
  6. package/dist/index.css +18 -18
  7. package/dist/index.css.map +1 -1
  8. package/dist/reactRender.css +533 -533
  9. package/dist/reactRender.css.map +1 -1
  10. package/dist/reactRenderLegacy.css +533 -533
  11. package/dist/reactRenderLegacy.css.map +1 -1
  12. package/dist/tapestry-wc/dist/components/{p-Ou7nmicT.js → p-0CKhI_UD.js} +3 -3
  13. package/dist/tapestry-wc/dist/components/{p-Ou7nmicT.js.map → p-0CKhI_UD.js.map} +1 -1
  14. package/dist/tapestry-wc/dist/components/{p-xgFPmKYP.js → p-BKKejKke.js} +2 -2
  15. package/dist/tapestry-wc/dist/components/{p-xgFPmKYP.js.map → p-BKKejKke.js.map} +1 -1
  16. package/dist/tapestry-wc/dist/components/{p-CyhBTTxR.js → p-CGFTpled.js} +2 -2
  17. package/dist/tapestry-wc/dist/components/{p-CyhBTTxR.js.map → p-CGFTpled.js.map} +1 -1
  18. package/dist/tapestry-wc/dist/components/{p-BH1OEQ72.js → p-Dj-IUu_k.js} +3 -3
  19. package/dist/tapestry-wc/dist/components/{p-BH1OEQ72.js.map → p-Dj-IUu_k.js.map} +1 -1
  20. package/dist/tapestry-wc/dist/components/{p-D5D8ChKE.js → p-dJwCwh2Q.js} +3 -3
  21. package/dist/tapestry-wc/dist/components/{p-D5D8ChKE.js.map → p-dJwCwh2Q.js.map} +1 -1
  22. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  23. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  24. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  25. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  27. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  28. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  29. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  30. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  31. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  32. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  33. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  34. package/dist/unstable.css +30 -30
  35. package/dist/unstable.css.map +1 -1
  36. package/package.json +5 -5
@@ -1,329 +1,3 @@
1
- .tds-radio{
2
- --tds-radio-font-size:var(--t-font-size-md);
3
- --tds-radio-cursor:pointer;
4
- --tds-radio-line-height:1.4;
5
- --tds-radio-transition-property:border-width;
6
-
7
- --tds-radio-input-size:var(--t-element-size-md);
8
- --tds-radio-input-border-radius:var(--t-border-radius-round);
9
- --tds-radio-input-border-color:var(--t-form-border-color);
10
- --tds-radio-input-border-width:var(--t-form-border-width);
11
- --tds-radio-input-background-color:transparent;
12
-
13
- --tds-radio-label-color:var(--t-form-color);
14
-
15
- --tds-radio-description-font-size:var(--t-font-size-sm);
16
- --tds-radio-description-line-height:1.35;
17
- --tds-radio-description-color:var(--t-text-color-secondary);
18
-
19
- position:relative;
20
- display:inline-grid;
21
- grid-template-columns:auto;
22
- grid-auto-columns:1fr;
23
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
24
- line-height:var(--tds-radio-line-height);
25
- cursor:var(--tds-radio-cursor);
26
- -webkit-user-select:none;
27
- -moz-user-select:none;
28
- user-select:none;
29
- }
30
-
31
- .tds-radio label{
32
- grid-area:1 / 2;
33
- font-size:var(--tds-radio-font-size);
34
- font-weight:var(--t-font-weight-normal);
35
- color:var(--tds-radio-label-color);
36
- cursor:var(--tds-radio-cursor);
37
- }
38
-
39
- .tds-radio input[type="radio"]{
40
- position:relative;
41
- width:1em;
42
- height:1em;
43
- margin:calc((1lh - 1em) / 2) 0 0;
44
- font-size:var(--tds-radio-font-size);
45
- line-height:inherit;
46
- -webkit-appearance:none;
47
- -moz-appearance:none;
48
- appearance:none;
49
- cursor:var(--tds-radio-cursor);
50
- background-color:var(--tds-radio-input-background-color);
51
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
52
- border-radius:var(--tds-radio-input-border-radius);
53
- transition-timing-function:var(--t-ease-in-out);
54
- transition-duration:var(--t-duration-200);
55
- transition-property:var(--tds-radio-transition-property);
56
- }
57
-
58
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
59
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
60
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
61
- }
62
-
63
- :is(.tds-radio input[type="radio"]):focus-visible{
64
- outline:var(--t-focus-ring-outline);
65
- outline-offset:var(--t-focus-ring-offset);
66
- }
67
-
68
- :is(.tds-radio input[type="radio"]):disabled{
69
- pointer-events:none;
70
- }
71
-
72
- @media (prefers-reduced-motion: reduce){
73
-
74
- .tds-radio input[type="radio"]{
75
- --tds-radio-transition-property:none;
76
- }
77
- }
78
-
79
- .tds-radio:has(input:checked){
80
- --tds-radio-input-background-color:var(--t-form-background-color);
81
- --tds-radio-input-border-color:var(--t-border-color-control-info);
82
- --tds-radio-input-border-width:4px;
83
- }
84
-
85
- .tds-radio:has(input:checked) input:hover:not(:disabled){
86
- --tds-radio-input-background-color:var(--t-form-background-color);
87
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
88
- }
89
-
90
- .tds-radio:has(input:user-invalid){
91
- --tds-radio-input-border-color:var(--t-form-border-color-error);
92
- }
93
-
94
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
95
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
96
- --tds-radio-input-background-color:var(--t-form-background-color-error);
97
- }
98
-
99
- .tds-radio:has(input:disabled){
100
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
101
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
102
-
103
- --tds-radio-label-color:var(--t-form-color-disabled);
104
- --tds-radio-description-color:var(--t-form-color-disabled);
105
- --tds-radio-cursor:not-allowed;
106
- }
107
-
108
- .tds-radio:has(input:disabled) input:checked{
109
- --tds-radio-input-background-color:var(--t-form-background-color);
110
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
111
- }
112
-
113
- .tds-radio-description{
114
- display:flex;
115
- grid-area:2 / 2;
116
- gap:var(--t-spacing-half);
117
- align-items:flex-start;
118
- margin:0;
119
- font-size:var(--tds-radio-description-font-size);
120
- line-height:var(--tds-radio-description-line-height);
121
- color:var(--tds-radio-description-color);
122
- cursor:text;
123
- }
124
-
125
- .tds-radio--sm{
126
- --tds-radio-line-height:1.35;
127
- --tds-radio-input-size:var(--t-element-size-sm);
128
- --tds-radio-font-size:var(--t-font-size-sm);
129
- --tds-radio-description-font-size:var(--t-font-size-xs);
130
- --tds-radio-description-line-height:1.3;
131
- }
132
-
133
- .tds-checkbox{
134
- --tds-checkbox-font-size:var(--t-font-size-md);
135
- --tds-checkbox-cursor:pointer;
136
- --tds-checkbox-line-height:1.4;
137
- --tds-checkbox-transition-property:background-color, border-color;
138
-
139
- --tds-checkbox-input-size:var(--t-element-size-md);
140
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
141
- --tds-checkbox-input-border-color:var(--t-form-border-color);
142
- --tds-checkbox-input-background-color:transparent;
143
-
144
- --tds-checkbox-input-icon:none;
145
- --tds-checkbox-input-icon-visibility:hidden;
146
- --tds-checkbox-input-icon-opacity:0;
147
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
148
-
149
- --tds-checkbox-label-color:var(--t-form-color);
150
-
151
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
152
- --tds-checkbox-description-line-height:1.35;
153
- --tds-checkbox-description-color:var(--t-text-color-secondary);
154
- --tds-checkbox-description-invalid-icon-display:none;
155
-
156
- position:relative;
157
- display:inline-grid;
158
- grid-template-columns:auto;
159
- grid-auto-columns:1fr;
160
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
161
- line-height:var(--tds-checkbox-line-height);
162
- cursor:var(--tds-checkbox-cursor);
163
- -webkit-user-select:none;
164
- -moz-user-select:none;
165
- user-select:none;
166
- }
167
-
168
- .tds-checkbox label{
169
- grid-area:1 / 2;
170
- font-size:var(--tds-checkbox-font-size);
171
- font-weight:var(--t-font-weight-normal);
172
- color:var(--tds-checkbox-label-color);
173
- cursor:var(--tds-checkbox-cursor);
174
- }
175
-
176
- .tds-checkbox tds-indeterminate{
177
- display:flex;
178
- }
179
-
180
- .tds-checkbox input[type="checkbox"]{
181
- position:relative;
182
- width:1em;
183
- height:1em;
184
- margin:calc((1lh - 1em) / 2) 0 0;
185
- font-size:var(--tds-checkbox-font-size);
186
- line-height:inherit;
187
- -webkit-appearance:none;
188
- -moz-appearance:none;
189
- appearance:none;
190
- cursor:var(--tds-checkbox-cursor);
191
- background-color:var(--tds-checkbox-input-background-color);
192
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
193
- border-radius:var(--tds-checkbox-input-border-radius);
194
- transition-timing-function:var(--t-ease-in-out);
195
- transition-duration:var(--t-duration-200);
196
- transition-property:var(--tds-checkbox-transition-property);
197
- }
198
-
199
- :is(.tds-checkbox input[type="checkbox"])::before{
200
- position:absolute;
201
- top:50%;
202
- left:50%;
203
- visibility:var(--tds-checkbox-input-icon-visibility);
204
- width:100%;
205
- height:100%;
206
- content:"";
207
- background-color:var(--tds-checkbox-input-icon-fill);
208
- border-radius:var(--tds-checkbox-input-border-radius);
209
- opacity:var(--tds-checkbox-input-icon-opacity);
210
- -webkit-mask-image:var(--tds-checkbox-input-icon);
211
- mask-image:var(--tds-checkbox-input-icon);
212
- -webkit-mask-repeat:no-repeat;
213
- mask-repeat:no-repeat;
214
- -webkit-mask-size:contain;
215
- mask-size:contain;
216
- transform:translate(-50%, -50%);
217
- }
218
-
219
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
220
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
221
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
222
- }
223
-
224
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
225
- outline:var(--t-focus-ring-outline);
226
- outline-offset:var(--t-focus-ring-offset);
227
- }
228
-
229
- :is(.tds-checkbox input[type="checkbox"]):disabled{
230
- pointer-events:none;
231
- }
232
-
233
- @media (prefers-reduced-motion: reduce){
234
-
235
- .tds-checkbox input[type="checkbox"]{
236
- --tds-checkbox-transition-property:none;
237
- }
238
- }
239
-
240
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
241
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
242
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
243
- --tds-checkbox-input-icon-visibility:visible;
244
- --tds-checkbox-input-icon-opacity:1;
245
- }
246
-
247
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
248
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
249
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
250
- }
251
-
252
- .tds-checkbox:has(input:checked){
253
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
254
- }
255
-
256
- .tds-checkbox:has(input:indeterminate){
257
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
258
- }
259
-
260
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
261
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
262
- --tds-checkbox-description-color:var(--t-text-color-status-error);
263
- --tds-checkbox-description-invalid-icon-display:inline-block;
264
- }
265
-
266
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
267
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
268
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
269
- }
270
-
271
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
272
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
273
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
274
- }
275
-
276
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
277
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
278
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
279
- }
280
-
281
- .tds-checkbox:has(input:required) label::after{
282
- margin-left:.25ch;
283
- color:var(--t-text-color-status-error);
284
- content:"*";
285
- }
286
-
287
- .tds-checkbox:has(input:disabled){
288
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
289
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
290
-
291
- --tds-checkbox-label-color:var(--t-form-color-disabled);
292
- --tds-checkbox-description-color:var(--t-form-color-disabled);
293
- --tds-checkbox-cursor:not-allowed;
294
- }
295
-
296
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
297
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
298
- }
299
-
300
- .tds-checkbox-description{
301
- display:flex;
302
- grid-area:2 / 2;
303
- gap:var(--t-spacing-half);
304
- align-items:flex-start;
305
- margin:0;
306
- font-size:var(--tds-checkbox-description-font-size);
307
- line-height:var(--tds-checkbox-description-line-height);
308
- color:var(--tds-checkbox-description-color);
309
- cursor:text;
310
- }
311
-
312
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
313
- display:var(--tds-checkbox-description-invalid-icon-display);
314
- flex-shrink:0;
315
- margin-top:calc(.5lh - .5em);
316
- line-height:var(--tds-checkbox-description-line-height);
317
- }
318
-
319
- .tds-checkbox--sm{
320
- --tds-checkbox-line-height:1.35;
321
- --tds-checkbox-input-size:var(--t-element-size-sm);
322
- --tds-checkbox-font-size:var(--t-font-size-sm);
323
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
324
- --tds-checkbox-description-line-height:1.3;
325
- }
326
-
327
1
 
328
2
  @media (prefers-reduced-motion: no-preference){
329
3
 
@@ -585,106 +259,300 @@
585
259
  font-weight:var(--t-font-weight-medium);
586
260
  }
587
261
 
588
- .tds-sidenav-responsive-header{
589
- display:flex;
590
- gap:var(--t-spacing-2);
591
- align-items:center;
592
- width:100%;
593
- }
262
+ .tds-sidenav-responsive-header{
263
+ display:flex;
264
+ gap:var(--t-spacing-2);
265
+ align-items:center;
266
+ width:100%;
267
+ }
268
+
269
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
+ order:0;
271
+ }
272
+
273
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
+ flex:1;
275
+ order:1;
276
+ margin:0;
277
+ font-size:var(--t-font-size-lg);
278
+ font-weight:var(--t-font-weight-medium);
279
+ color:var(--t-text-color-headline);
280
+ }
281
+
282
+ @media (max-width: 719px){
283
+ .tds-sidenav-collapse{
284
+ z-index:10001;
285
+ display:none;
286
+ max-width:min(448px, calc(100vw - 48px));
287
+ padding:0;
288
+ margin:12px 0;
289
+ position-area:bottom span-right;
290
+ overflow:hidden;
291
+ outline:0;
292
+ background:var(--t-surface-color-card);
293
+ border:0;
294
+ border-radius:6px;
295
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
+ opacity:var(--tds-sidenav-collapse-open-opacity);
297
+ transform:var(--tds-sidenav-collapse-open-transform);
298
+ transition:var(--tds-sidenav-collapse-transition-enter);
299
+ will-change:transform;
300
+ }
301
+
302
+ .tds-sidenav-scroll-container{
303
+ --webkit-overflow-scrolling:touch;
304
+ display:block;
305
+ width:100%;
306
+ height:-moz-fit-content;
307
+ height:fit-content;
308
+ padding:var(--t-spacing-2);
309
+ overflow-y:auto;
310
+ }
311
+
312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
313
+ display:none;
314
+ }
315
+ @supports selector(:popover-open){
316
+ .tds-sidenav-collapse:popover-open{
317
+ display:flex;
318
+ }
319
+
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
323
+ }
324
+
325
+ @starting-style{
326
+ .tds-sidenav-collapse:popover-open{
327
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
328
+ transform:var(--tds-sidenav-collapse-closed-transform);
329
+ }
330
+ }
331
+ }
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
335
+ }
336
+
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
341
+ }
342
+ }
343
+
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
347
+ }
348
+ }
349
+
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
352
+ }
353
+
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
356
+ }
357
+
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
361
+ }
362
+
363
+ .tds-checkbox{
364
+ --tds-checkbox-font-size:var(--t-font-size-md);
365
+ --tds-checkbox-cursor:pointer;
366
+ --tds-checkbox-line-height:1.4;
367
+ --tds-checkbox-transition-property:background-color, border-color;
368
+
369
+ --tds-checkbox-input-size:var(--t-element-size-md);
370
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
371
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
372
+ --tds-checkbox-input-background-color:transparent;
373
+
374
+ --tds-checkbox-input-icon:none;
375
+ --tds-checkbox-input-icon-visibility:hidden;
376
+ --tds-checkbox-input-icon-opacity:0;
377
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
378
+
379
+ --tds-checkbox-label-color:var(--t-form-color);
380
+
381
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
382
+ --tds-checkbox-description-line-height:1.35;
383
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
384
+ --tds-checkbox-description-invalid-icon-display:none;
385
+
386
+ position:relative;
387
+ display:inline-grid;
388
+ grid-template-columns:auto;
389
+ grid-auto-columns:1fr;
390
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
391
+ line-height:var(--tds-checkbox-line-height);
392
+ cursor:var(--tds-checkbox-cursor);
393
+ -webkit-user-select:none;
394
+ -moz-user-select:none;
395
+ user-select:none;
396
+ }
397
+
398
+ .tds-checkbox label{
399
+ grid-area:1 / 2;
400
+ font-size:var(--tds-checkbox-font-size);
401
+ font-weight:var(--t-font-weight-normal);
402
+ color:var(--tds-checkbox-label-color);
403
+ cursor:var(--tds-checkbox-cursor);
404
+ }
405
+
406
+ .tds-checkbox tds-indeterminate{
407
+ display:flex;
408
+ }
409
+
410
+ .tds-checkbox input[type="checkbox"]{
411
+ position:relative;
412
+ width:1em;
413
+ height:1em;
414
+ margin:calc((1lh - 1em) / 2) 0 0;
415
+ font-size:var(--tds-checkbox-font-size);
416
+ line-height:inherit;
417
+ -webkit-appearance:none;
418
+ -moz-appearance:none;
419
+ appearance:none;
420
+ cursor:var(--tds-checkbox-cursor);
421
+ background-color:var(--tds-checkbox-input-background-color);
422
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
423
+ border-radius:var(--tds-checkbox-input-border-radius);
424
+ transition-timing-function:var(--t-ease-in-out);
425
+ transition-duration:var(--t-duration-200);
426
+ transition-property:var(--tds-checkbox-transition-property);
427
+ }
428
+
429
+ :is(.tds-checkbox input[type="checkbox"])::before{
430
+ position:absolute;
431
+ top:50%;
432
+ left:50%;
433
+ visibility:var(--tds-checkbox-input-icon-visibility);
434
+ width:100%;
435
+ height:100%;
436
+ content:"";
437
+ background-color:var(--tds-checkbox-input-icon-fill);
438
+ border-radius:var(--tds-checkbox-input-border-radius);
439
+ opacity:var(--tds-checkbox-input-icon-opacity);
440
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
441
+ mask-image:var(--tds-checkbox-input-icon);
442
+ -webkit-mask-repeat:no-repeat;
443
+ mask-repeat:no-repeat;
444
+ -webkit-mask-size:contain;
445
+ mask-size:contain;
446
+ transform:translate(-50%, -50%);
447
+ }
448
+
449
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
450
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
451
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
452
+ }
453
+
454
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
455
+ outline:var(--t-focus-ring-outline);
456
+ outline-offset:var(--t-focus-ring-offset);
457
+ }
458
+
459
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
460
+ pointer-events:none;
461
+ }
462
+
463
+ @media (prefers-reduced-motion: reduce){
594
464
 
595
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
596
- order:0;
465
+ .tds-checkbox input[type="checkbox"]{
466
+ --tds-checkbox-transition-property:none;
597
467
  }
468
+ }
598
469
 
599
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
600
- flex:1;
601
- order:1;
602
- margin:0;
603
- font-size:var(--t-font-size-lg);
604
- font-weight:var(--t-font-weight-medium);
605
- color:var(--t-text-color-headline);
470
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
471
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
472
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
473
+ --tds-checkbox-input-icon-visibility:visible;
474
+ --tds-checkbox-input-icon-opacity:1;
606
475
  }
607
476
 
608
- @media (max-width: 719px){
609
- .tds-sidenav-collapse{
610
- z-index:10001;
611
- display:none;
612
- max-width:min(448px, calc(100vw - 48px));
613
- padding:0;
614
- margin:12px 0;
615
- position-area:bottom span-right;
616
- overflow:hidden;
617
- outline:0;
618
- background:var(--t-surface-color-card);
619
- border:0;
620
- border-radius:6px;
621
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
622
- opacity:var(--tds-sidenav-collapse-open-opacity);
623
- transform:var(--tds-sidenav-collapse-open-transform);
624
- transition:var(--tds-sidenav-collapse-transition-enter);
625
- will-change:transform;
477
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
478
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
479
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
480
+ }
481
+
482
+ .tds-checkbox:has(input:checked){
483
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
626
484
  }
627
485
 
628
- .tds-sidenav-scroll-container{
629
- --webkit-overflow-scrolling:touch;
630
- display:block;
631
- width:100%;
632
- height:-moz-fit-content;
633
- height:fit-content;
634
- padding:var(--t-spacing-2);
635
- overflow-y:auto;
486
+ .tds-checkbox:has(input:indeterminate){
487
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
636
488
  }
637
489
 
638
- .tds-sidenav-item :is(a, button) :is(.prefix){
639
- display:none;
490
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
491
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
492
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
493
+ --tds-checkbox-description-invalid-icon-display:inline-block;
640
494
  }
641
- @supports selector(:popover-open){
642
- .tds-sidenav-collapse:popover-open{
643
- display:flex;
495
+
496
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
497
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
498
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
644
499
  }
645
500
 
646
- .tds-sidenav-collapse:not(:popover-open){
647
- opacity:var(--tds-sidenav-collapse-closed-opacity);
648
- transition:var(--tds-sidenav-collapse-transition-exit);
501
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
502
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
503
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
649
504
  }
650
505
 
651
- @starting-style{
652
- .tds-sidenav-collapse:popover-open{
653
- opacity:var(--tds-sidenav-collapse-closed-opacity);
654
- transform:var(--tds-sidenav-collapse-closed-transform);
506
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
507
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
508
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
655
509
  }
656
- }
657
- }
658
- @supports not selector(:popover-open){
659
- .tds-sidenav-collapse.\:popover-open{
660
- display:flex;
661
- }
662
510
 
663
- .tds-sidenav-collapse:not(.\:popover-open){
664
- opacity:var(--tds-sidenav-collapse-closed-opacity);
665
- transition:var(--tds-sidenav-collapse-transition-exit);
511
+ .tds-checkbox:has(input:required) label::after{
512
+ margin-left:.25ch;
513
+ color:var(--t-text-color-status-error);
514
+ content:"*";
666
515
  }
667
- }
668
- }
669
516
 
670
- @media (min-width: 720px){
671
- .tds-sidenav-responsive-header{
672
- display:none;
517
+ .tds-checkbox:has(input:disabled){
518
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
519
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
520
+
521
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
522
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
523
+ --tds-checkbox-cursor:not-allowed;
673
524
  }
674
- }
675
525
 
676
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
677
- display:none;
526
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
527
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
678
528
  }
679
529
 
680
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
681
- display:block;
682
- }
530
+ .tds-checkbox-description{
531
+ display:flex;
532
+ grid-area:2 / 2;
533
+ gap:var(--t-spacing-half);
534
+ align-items:flex-start;
535
+ margin:0;
536
+ font-size:var(--tds-checkbox-description-font-size);
537
+ line-height:var(--tds-checkbox-description-line-height);
538
+ color:var(--tds-checkbox-description-color);
539
+ cursor:text;
540
+ }
683
541
 
684
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
685
- display:flex;
686
- flex-direction:column;
687
- }
542
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
543
+ display:var(--tds-checkbox-description-invalid-icon-display);
544
+ flex-shrink:0;
545
+ margin-top:calc(.5lh - .5em);
546
+ line-height:var(--tds-checkbox-description-line-height);
547
+ }
548
+
549
+ .tds-checkbox--sm{
550
+ --tds-checkbox-line-height:1.35;
551
+ --tds-checkbox-input-size:var(--t-element-size-sm);
552
+ --tds-checkbox-font-size:var(--t-font-size-sm);
553
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
554
+ --tds-checkbox-description-line-height:1.3;
555
+ }
688
556
 
689
557
 
690
558
  :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{
@@ -972,145 +840,136 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
972
840
  }
973
841
  }
974
842
 
975
- .tds-toggle-switch{
976
- --tds-toggle-switch-font-size:var(--t-font-size-md);
977
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
978
- --tds-toggle-switch-cursor:pointer;
979
- --tds-toggle-switch-display:inline-grid;
980
- --tds-toggle-switch-line-height:1.4;
843
+ .tds-radio{
844
+ --tds-radio-font-size:var(--t-font-size-md);
845
+ --tds-radio-cursor:pointer;
846
+ --tds-radio-line-height:1.4;
847
+ --tds-radio-transition-property:border-width;
981
848
 
982
- --tds-toggle-switch-label-color:var(--t-form-color);
849
+ --tds-radio-input-size:var(--t-element-size-md);
850
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
851
+ --tds-radio-input-border-color:var(--t-form-border-color);
852
+ --tds-radio-input-border-width:var(--t-form-border-width);
853
+ --tds-radio-input-background-color:transparent;
983
854
 
984
- --tds-toggle-switch-track-width:var(--t-container-size-md);
985
- --tds-toggle-switch-track-outline:none;
986
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
987
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
988
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
855
+ --tds-radio-label-color:var(--t-form-color);
989
856
 
990
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
991
- --tds-toggle-switch-thumb-transform:translateX(0);
992
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
857
+ --tds-radio-description-font-size:var(--t-font-size-sm);
858
+ --tds-radio-description-line-height:1.35;
859
+ --tds-radio-description-color:var(--t-text-color-secondary);
993
860
 
994
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
995
- --tds-toggle-switch-description-line-height:1.35;
996
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
997
861
  position:relative;
998
-
999
- display:var(--tds-toggle-switch-display);
862
+ display:inline-grid;
1000
863
  grid-template-columns:auto;
1001
864
  grid-auto-columns:1fr;
1002
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
865
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
866
+ line-height:var(--tds-radio-line-height);
867
+ cursor:var(--tds-radio-cursor);
1003
868
  -webkit-user-select:none;
1004
869
  -moz-user-select:none;
1005
870
  user-select:none;
1006
871
  }
1007
872
 
1008
- .tds-toggle-switch input[type="checkbox"]{
1009
- position:absolute;
1010
- width:var(--tds-toggle-switch-track-width);
1011
- height:var(--tds-toggle-switch-track-height);
1012
- margin:0;
873
+ .tds-radio label{
874
+ grid-area:1 / 2;
875
+ font-size:var(--tds-radio-font-size);
876
+ font-weight:var(--t-font-weight-normal);
877
+ color:var(--tds-radio-label-color);
878
+ cursor:var(--tds-radio-cursor);
879
+ }
880
+
881
+ .tds-radio input[type="radio"]{
882
+ position:relative;
883
+ width:1em;
884
+ height:1em;
885
+ margin:calc((1lh - 1em) / 2) 0 0;
886
+ font-size:var(--tds-radio-font-size);
887
+ line-height:inherit;
1013
888
  -webkit-appearance:none;
1014
889
  -moz-appearance:none;
1015
890
  appearance:none;
1016
- cursor:var(--tds-toggle-switch-cursor);
1017
- outline:var(--tds-toggle-switch-track-outline);
1018
- outline-offset:var(--t-focus-ring-offset);
1019
- background-color:transparent;
1020
- border:0;
1021
- border-radius:var(--t-border-radius-round);
891
+ cursor:var(--tds-radio-cursor);
892
+ background-color:var(--tds-radio-input-background-color);
893
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
894
+ border-radius:var(--tds-radio-input-border-radius);
895
+ transition-timing-function:var(--t-ease-in-out);
896
+ transition-duration:var(--t-duration-200);
897
+ transition-property:var(--tds-radio-transition-property);
1022
898
  }
1023
899
 
1024
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1025
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
900
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
901
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
902
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1026
903
  }
1027
904
 
1028
- .tds-toggle-switch label{
1029
- display:inline-flex;
1030
- grid-area:1 / 2;
1031
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1032
- column-gap:var(--tds-toggle-switch-column-gap);
1033
- margin-top:-.09375em;
1034
- font-size:var(--tds-toggle-switch-font-size);
1035
- font-weight:var(--t-font-weight-normal);
1036
- line-height:var(--tds-toggle-switch-line-height);
1037
- color:var(--tds-toggle-switch-label-color);
1038
- cursor:var(--tds-toggle-switch-cursor);
1039
- }
905
+ :is(.tds-radio input[type="radio"]):focus-visible{
906
+ outline:var(--t-focus-ring-outline);
907
+ outline-offset:var(--t-focus-ring-offset);
908
+ }
1040
909
 
1041
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1042
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1043
- }
910
+ :is(.tds-radio input[type="radio"]):disabled{
911
+ pointer-events:none;
912
+ }
1044
913
 
1045
- .tds-toggle-switch:has(input:checked){
1046
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1047
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
914
+ @media (prefers-reduced-motion: reduce){
915
+
916
+ .tds-radio input[type="radio"]{
917
+ --tds-radio-transition-property:none;
1048
918
  }
1049
-
1050
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1051
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1052
919
  }
1053
920
 
1054
- .tds-toggle-switch:has(input:disabled){
1055
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1056
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1057
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1058
- --tds-toggle-switch-cursor:not-allowed;
921
+ .tds-radio:has(input:checked){
922
+ --tds-radio-input-background-color:var(--t-form-background-color);
923
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
924
+ --tds-radio-input-border-width:4px;
1059
925
  }
1060
926
 
1061
- .tds-toggle-switch-track{
1062
- position:relative;
1063
- flex-shrink:0;
1064
- width:var(--tds-toggle-switch-track-width);
1065
- height:var(--tds-toggle-switch-track-height);
1066
- background-color:var(--tds-toggle-switch-track-background-color);
1067
- border-radius:var(--t-border-radius-round);
1068
- transition:var(--tds-toggle-switch-track-transition);
1069
- }
927
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
928
+ --tds-radio-input-background-color:var(--t-form-background-color);
929
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
930
+ }
1070
931
 
1071
- .tds-toggle-switch-track::before{
1072
- position:absolute;
1073
- top:var(--t-spacing-fourth);
1074
- left:var(--t-spacing-fourth);
1075
- width:var(--tds-toggle-switch-thumb-size);
1076
- height:var(--tds-toggle-switch-thumb-size);
1077
- content:"";
1078
- background-color:#fff;
1079
- border-radius:var(--t-border-radius-round);
1080
- transform:var(--tds-toggle-switch-thumb-transform);
1081
- transition:var(--tds-toggle-switch-thumb-transition);
932
+ .tds-radio:has(input:user-invalid){
933
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1082
934
  }
1083
935
 
1084
- @media (prefers-reduced-motion: reduce){
936
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
937
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
938
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
939
+ }
1085
940
 
1086
- .tds-toggle-switch-track{
1087
- --tds-toggle-switch-track-transition:none;
1088
- --tds-toggle-switch-thumb-transition:none;
1089
- }
941
+ .tds-radio:has(input:disabled){
942
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
943
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
944
+
945
+ --tds-radio-label-color:var(--t-form-color-disabled);
946
+ --tds-radio-description-color:var(--t-form-color-disabled);
947
+ --tds-radio-cursor:not-allowed;
1090
948
  }
1091
949
 
1092
- .tds-toggle-switch-description{
950
+ .tds-radio:has(input:disabled) input:checked{
951
+ --tds-radio-input-background-color:var(--t-form-background-color);
952
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
953
+ }
954
+
955
+ .tds-radio-description{
1093
956
  display:flex;
1094
957
  grid-area:2 / 2;
958
+ gap:var(--t-spacing-half);
1095
959
  align-items:flex-start;
1096
960
  margin:0;
1097
- font-size:var(--tds-toggle-switch-description-font-size);
1098
- line-height:var(--tds-toggle-switch-description-line-height);
1099
- color:var(--tds-toggle-switch-description-color);
961
+ font-size:var(--tds-radio-description-font-size);
962
+ line-height:var(--tds-radio-description-line-height);
963
+ color:var(--tds-radio-description-color);
1100
964
  cursor:text;
1101
965
  }
1102
966
 
1103
- .tds-toggle-switch--sm{
1104
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1105
- --tds-toggle-switch-line-height:1.35;
1106
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1107
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1108
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1109
- --tds-toggle-switch-description-line-height:1.3;
1110
- }
1111
-
1112
- .tds-toggle-switch--hide-label{
1113
- --tds-toggle-switch-display:inline-flex;
967
+ .tds-radio--sm{
968
+ --tds-radio-line-height:1.35;
969
+ --tds-radio-input-size:var(--t-element-size-sm);
970
+ --tds-radio-font-size:var(--t-font-size-sm);
971
+ --tds-radio-description-font-size:var(--t-font-size-xs);
972
+ --tds-radio-description-line-height:1.3;
1114
973
  }
1115
974
 
1116
975
  .tds-radio-group{
@@ -1186,12 +1045,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1186
1045
  cursor:text;
1187
1046
  }
1188
1047
 
1189
- .tds-radio-group-description-invalid-icon{
1190
- display:var(--tds-radio-group-description-invalid-icon-display);
1191
- flex-shrink:0;
1192
- margin-top:calc(.5lh - .5em);
1193
- line-height:var(--tds-radio-group-description-line-height);
1194
- }
1048
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1049
+ display:var(--tds-radio-group-description-invalid-icon-display);
1050
+ flex-shrink:0;
1051
+ margin-top:calc(.5lh - .5em);
1052
+ line-height:var(--tds-radio-group-description-line-height);
1053
+ }
1195
1054
 
1196
1055
  .tds-radio-group--sm{
1197
1056
  --tds-radio-group-line-height:1.35;
@@ -1305,6 +1164,147 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1305
1164
  }
1306
1165
  }
1307
1166
 
1167
+ .tds-toggle-switch{
1168
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1169
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1170
+ --tds-toggle-switch-cursor:pointer;
1171
+ --tds-toggle-switch-display:inline-grid;
1172
+ --tds-toggle-switch-line-height:1.4;
1173
+
1174
+ --tds-toggle-switch-label-color:var(--t-form-color);
1175
+
1176
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1177
+ --tds-toggle-switch-track-outline:none;
1178
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1179
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1180
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1181
+
1182
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1183
+ --tds-toggle-switch-thumb-transform:translateX(0);
1184
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1185
+
1186
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1187
+ --tds-toggle-switch-description-line-height:1.35;
1188
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1189
+ position:relative;
1190
+
1191
+ display:var(--tds-toggle-switch-display);
1192
+ grid-template-columns:auto;
1193
+ grid-auto-columns:1fr;
1194
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1195
+ -webkit-user-select:none;
1196
+ -moz-user-select:none;
1197
+ user-select:none;
1198
+ }
1199
+
1200
+ .tds-toggle-switch input[type="checkbox"]{
1201
+ position:absolute;
1202
+ width:var(--tds-toggle-switch-track-width);
1203
+ height:var(--tds-toggle-switch-track-height);
1204
+ margin:0;
1205
+ -webkit-appearance:none;
1206
+ -moz-appearance:none;
1207
+ appearance:none;
1208
+ cursor:var(--tds-toggle-switch-cursor);
1209
+ outline:var(--tds-toggle-switch-track-outline);
1210
+ outline-offset:var(--t-focus-ring-offset);
1211
+ background-color:transparent;
1212
+ border:0;
1213
+ border-radius:var(--t-border-radius-round);
1214
+ }
1215
+
1216
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1217
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1218
+ }
1219
+
1220
+ .tds-toggle-switch label{
1221
+ display:inline-flex;
1222
+ grid-area:1 / 2;
1223
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1224
+ column-gap:var(--tds-toggle-switch-column-gap);
1225
+ margin-top:-.09375em;
1226
+ font-size:var(--tds-toggle-switch-font-size);
1227
+ font-weight:var(--t-font-weight-normal);
1228
+ line-height:var(--tds-toggle-switch-line-height);
1229
+ color:var(--tds-toggle-switch-label-color);
1230
+ cursor:var(--tds-toggle-switch-cursor);
1231
+ }
1232
+
1233
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1234
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1235
+ }
1236
+
1237
+ .tds-toggle-switch:has(input:checked){
1238
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1239
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1240
+ }
1241
+
1242
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1243
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1244
+ }
1245
+
1246
+ .tds-toggle-switch:has(input:disabled){
1247
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1248
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1249
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1250
+ --tds-toggle-switch-cursor:not-allowed;
1251
+ }
1252
+
1253
+ .tds-toggle-switch-track{
1254
+ position:relative;
1255
+ flex-shrink:0;
1256
+ width:var(--tds-toggle-switch-track-width);
1257
+ height:var(--tds-toggle-switch-track-height);
1258
+ background-color:var(--tds-toggle-switch-track-background-color);
1259
+ border-radius:var(--t-border-radius-round);
1260
+ transition:var(--tds-toggle-switch-track-transition);
1261
+ }
1262
+
1263
+ .tds-toggle-switch-track::before{
1264
+ position:absolute;
1265
+ top:var(--t-spacing-fourth);
1266
+ left:var(--t-spacing-fourth);
1267
+ width:var(--tds-toggle-switch-thumb-size);
1268
+ height:var(--tds-toggle-switch-thumb-size);
1269
+ content:"";
1270
+ background-color:#fff;
1271
+ border-radius:var(--t-border-radius-round);
1272
+ transform:var(--tds-toggle-switch-thumb-transform);
1273
+ transition:var(--tds-toggle-switch-thumb-transition);
1274
+ }
1275
+
1276
+ @media (prefers-reduced-motion: reduce){
1277
+
1278
+ .tds-toggle-switch-track{
1279
+ --tds-toggle-switch-track-transition:none;
1280
+ --tds-toggle-switch-thumb-transition:none;
1281
+ }
1282
+ }
1283
+
1284
+ .tds-toggle-switch-description{
1285
+ display:flex;
1286
+ grid-area:2 / 2;
1287
+ align-items:flex-start;
1288
+ margin:0;
1289
+ font-size:var(--tds-toggle-switch-description-font-size);
1290
+ line-height:var(--tds-toggle-switch-description-line-height);
1291
+ color:var(--tds-toggle-switch-description-color);
1292
+ cursor:text;
1293
+ }
1294
+
1295
+ .tds-toggle-switch--sm{
1296
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1297
+ --tds-toggle-switch-line-height:1.35;
1298
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1299
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1300
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1301
+ --tds-toggle-switch-description-line-height:1.3;
1302
+ }
1303
+
1304
+ .tds-toggle-switch--hide-label{
1305
+ --tds-toggle-switch-display:inline-flex;
1306
+ }
1307
+
1308
1308
  .tds-select{
1309
1309
  --tds-select-border-color:var(--t-form-border-color);
1310
1310
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -1555,12 +1555,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1555
1555
  cursor:text;
1556
1556
  }
1557
1557
 
1558
- .tds-select-description-invalid-icon{
1559
- display:var(--tds-select-description-invalid-icon-display, none);
1560
- flex-shrink:0;
1561
- margin-block-start:calc(.5lh - .5em);
1562
- line-height:1.35;
1563
- }
1558
+ .tds-select-description .tds-select-description-invalid-icon{
1559
+ display:var(--tds-select-description-invalid-icon-display, none);
1560
+ flex-shrink:0;
1561
+ margin-block-start:calc(.5lh - .5em);
1562
+ line-height:1.35;
1563
+ }
1564
1564
 
1565
1565
  .tds-select > .tds-select-hidden-select{
1566
1566
  position:absolute;
@@ -1866,12 +1866,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1866
1866
  cursor:text;
1867
1867
  }
1868
1868
 
1869
- .tds-input-description-invalid-icon{
1870
- display:var(--tds-input-description-invalid-icon-display, none);
1871
- flex-shrink:0;
1872
- margin-block-start:calc(.5lh - .5em);
1873
- line-height:1.35;
1874
- }
1869
+ .tds-input-description .tds-input-description-invalid-icon{
1870
+ display:var(--tds-input-description-invalid-icon-display, none);
1871
+ flex-shrink:0;
1872
+ margin-block-start:calc(.5lh - .5em);
1873
+ line-height:1.35;
1874
+ }
1875
1875
 
1876
1876
  .tds-loading-spinner{
1877
1877
  --tds-loading-spinner-size:1.25em;
@@ -3331,12 +3331,12 @@ a[class="tds-btn"]{
3331
3331
  cursor:text;
3332
3332
  }
3333
3333
 
3334
- .tds-checkbox-group-description-invalid-icon{
3335
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3336
- flex-shrink:0;
3337
- margin-top:calc(.5lh - .5em);
3338
- line-height:var(--tds-checkbox-group-description-line-height);
3339
- }
3334
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3335
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3336
+ flex-shrink:0;
3337
+ margin-top:calc(.5lh - .5em);
3338
+ line-height:var(--tds-checkbox-group-description-line-height);
3339
+ }
3340
3340
 
3341
3341
  .tds-checkbox-group--sm{
3342
3342
  --tds-checkbox-group-line-height:1.35;
@@ -3483,12 +3483,12 @@ a[class="tds-btn"]{
3483
3483
  cursor:text;
3484
3484
  }
3485
3485
 
3486
- .tds-date-picker-description-invalid-icon{
3487
- display:var(--tds-date-picker-description-invalid-icon-display, none);
3488
- flex-shrink:0;
3489
- margin-block-start:calc(.5lh - .5em);
3490
- line-height:1.35;
3491
- }
3486
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3487
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3488
+ flex-shrink:0;
3489
+ margin-block-start:calc(.5lh - .5em);
3490
+ line-height:1.35;
3491
+ }
3492
3492
 
3493
3493
  .tds-date-picker-button{
3494
3494
  display:flex;