@planningcenter/tapestry 3.1.0-rc.10 → 3.1.0-rc.12

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 +615 -615
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +615 -615
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -285,370 +285,563 @@
285
285
  }
286
286
  }
287
287
 
288
- .tds-radio{
289
- --tds-radio-font-size:var(--t-font-size-md);
290
- --tds-radio-cursor:pointer;
291
- --tds-radio-line-height:1.4;
292
- --tds-radio-transition-property:border-width;
293
-
294
- --tds-radio-input-size:var(--t-element-size-md);
295
- --tds-radio-input-border-radius:var(--t-border-radius-round);
296
- --tds-radio-input-border-color:var(--t-form-border-color);
297
- --tds-radio-input-border-width:var(--t-form-border-width);
298
- --tds-radio-input-background-color:transparent;
299
-
300
- --tds-radio-label-color:var(--t-form-color);
301
288
 
302
- --tds-radio-description-font-size:var(--t-font-size-sm);
303
- --tds-radio-description-line-height:1.35;
304
- --tds-radio-description-color:var(--t-text-color-secondary);
289
+ @media (prefers-reduced-motion: no-preference){
305
290
 
306
- position:relative;
307
- display:inline-grid;
308
- grid-template-columns:auto;
309
- grid-auto-columns:1fr;
310
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
311
- line-height:var(--tds-radio-line-height);
312
- cursor:var(--tds-radio-cursor);
313
- -webkit-user-select:none;
314
- -moz-user-select:none;
315
- user-select:none;
291
+ :root{
292
+ interpolate-size:allow-keywords;
316
293
  }
317
-
318
- .tds-radio label{
319
- grid-area:1 / 2;
320
- font-size:var(--tds-radio-font-size);
321
- font-weight:var(--t-font-weight-normal);
322
- color:var(--tds-radio-label-color);
323
- cursor:var(--tds-radio-cursor);
324
294
  }
325
295
 
326
- .tds-radio input[type="radio"]{
327
- position:relative;
328
- width:1em;
329
- height:1em;
330
- margin:calc((1lh - 1em) / 2) 0 0;
331
- font-size:var(--tds-radio-font-size);
332
- line-height:inherit;
333
- -webkit-appearance:none;
334
- -moz-appearance:none;
335
- appearance:none;
336
- cursor:var(--tds-radio-cursor);
337
- background-color:var(--tds-radio-input-background-color);
338
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
339
- border-radius:var(--tds-radio-input-border-radius);
340
- transition-timing-function:ease-in-out;
341
- transition-duration:180ms;
342
- transition-property:var(--tds-radio-transition-property);
343
- }
296
+ @layer tds-component{
297
+ tds-sidenav,
298
+ .tds-sidenav{
299
+ --tds-sidenav-indent:12px;
300
+ --tds-sidenav-item-depth:0;
344
301
 
345
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
346
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
347
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
348
- }
302
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
349
303
 
350
- :is(.tds-radio input[type="radio"]):focus-visible{
351
- outline:var(--t-focus-ring-outline);
352
- outline-offset:var(--t-focus-ring-offset);
353
- }
304
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
305
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
306
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
307
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
354
308
 
355
- :is(.tds-radio input[type="radio"]):disabled{
356
- pointer-events:none;
357
- }
309
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
310
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
311
+ --tds-sidenav-item-nested-background-selected:transparent;
358
312
 
359
- @media (prefers-reduced-motion: reduce){
313
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
314
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
315
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
360
316
 
361
- .tds-radio input[type="radio"]{
362
- --tds-radio-transition-property:none;
317
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
318
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
363
319
  }
364
- }
365
320
 
366
- .tds-radio:has(input:checked){
367
- --tds-radio-input-background-color:var(--t-form-background-color);
368
- --tds-radio-input-border-color:var(--t-border-color-control-info);
369
- --tds-radio-input-border-width:4px;
321
+ .tds-sidenav--theme-gray{
322
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
323
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
324
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
325
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
326
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
370
327
  }
328
+ }
371
329
 
372
- .tds-radio:has(input:checked) input:hover:not(:disabled){
373
- --tds-radio-input-background-color:var(--t-form-background-color);
374
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
375
- }
376
-
377
- .tds-radio:has(input:user-invalid){
378
- --tds-radio-input-border-color:var(--t-form-border-color-error);
330
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
331
+ display:flex;
379
332
  }
380
333
 
381
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
382
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
383
- --tds-radio-input-background-color:var(--t-form-background-color-error);
384
- }
385
-
386
- .tds-radio:has(input:disabled){
387
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
388
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
389
-
390
- --tds-radio-label-color:var(--t-form-color-disabled);
391
- --tds-radio-description-color:var(--t-form-color-disabled);
392
- --tds-radio-cursor:not-allowed;
334
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
335
+ flex-direction:column;
336
+ gap:var(--t-spacing-half);
337
+ width:100%;
393
338
  }
394
339
 
395
- .tds-radio:has(input:disabled) input:checked{
396
- --tds-radio-input-background-color:var(--t-form-background-color);
397
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
398
- }
399
-
400
- .tds-radio-description{
401
- display:flex;
402
- grid-area:2 / 2;
403
- gap:var(--t-spacing-half);
404
- align-items:flex-start;
340
+ .tds-sidenav-section-list{
341
+ width:100%;
342
+ padding:0;
405
343
  margin:0;
406
- font-size:var(--tds-radio-description-font-size);
407
- line-height:var(--tds-radio-description-line-height);
408
- color:var(--tds-radio-description-color);
409
- cursor:text;
344
+ list-style:none;
410
345
  }
411
346
 
412
- .tds-radio--sm{
413
- --tds-radio-line-height:1.35;
414
- --tds-radio-input-size:var(--t-element-size-sm);
415
- --tds-radio-font-size:var(--t-font-size-sm);
416
- --tds-radio-description-font-size:var(--t-font-size-xs);
417
- --tds-radio-description-line-height:1.3;
347
+ .tds-sidenav-section-header{
348
+ display:flex;
349
+ align-items:baseline;
350
+ justify-content:space-between;
351
+ padding-top:var(--t-spacing-2);
418
352
  }
419
353
 
420
- .tds-checkbox{
421
- --tds-checkbox-font-size:var(--t-font-size-md);
422
- --tds-checkbox-cursor:pointer;
423
- --tds-checkbox-line-height:1.4;
424
- --tds-checkbox-transition-property:background-color, border-color;
425
-
426
- --tds-checkbox-input-size:var(--t-element-size-md);
427
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
428
- --tds-checkbox-input-border-color:var(--t-form-border-color);
429
- --tds-checkbox-input-background-color:transparent;
430
-
431
- --tds-checkbox-input-icon:none;
432
- --tds-checkbox-input-icon-visibility:hidden;
433
- --tds-checkbox-input-icon-opacity:0;
434
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
354
+ .tds-sidenav-section-header h2{
355
+ margin:0;
356
+ font-size:var(--t-font-size-sm);
357
+ font-weight:var(--t-font-weight-semibold);
358
+ line-height:1.35;
359
+ color:var(--t-text-color-secondary);
360
+ text-transform:uppercase;
361
+ }
435
362
 
436
- --tds-checkbox-label-color:var(--t-form-color);
363
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
364
+ padding-top:0;
365
+ }
437
366
 
438
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
439
- --tds-checkbox-description-line-height:1.35;
440
- --tds-checkbox-description-color:var(--t-text-color-secondary);
441
- --tds-checkbox-description-invalid-icon-display:none;
367
+ .tds-sidenav-section-header [slot="label-actions"]{
368
+ display:flex;
369
+ gap:var(--t-spacing-half);
370
+ align-items:center;
371
+ }
442
372
 
443
- position:relative;
444
- display:inline-grid;
445
- grid-template-columns:auto;
446
- grid-auto-columns:1fr;
447
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
448
- line-height:var(--tds-checkbox-line-height);
449
- cursor:var(--tds-checkbox-cursor);
450
- -webkit-user-select:none;
451
- -moz-user-select:none;
452
- user-select:none;
373
+ .tds-sidenav-section [slot="section-actions"]{
374
+ display:flex;
375
+ gap:12px;
376
+ align-items:center;
377
+ min-height:42px;
378
+ padding:var(--t-spacing-1) 0;
453
379
  }
454
380
 
455
- .tds-checkbox label{
456
- grid-area:1 / 2;
457
- font-size:var(--tds-checkbox-font-size);
458
- font-weight:var(--t-font-weight-normal);
459
- color:var(--tds-checkbox-label-color);
460
- cursor:var(--tds-checkbox-cursor);
461
- }
381
+ .tds-sidenav-section-list,
382
+ .tds-sidenav-item{
383
+ width:100%;
384
+ padding:0;
385
+ margin:0;
386
+ }
462
387
 
463
- .tds-checkbox input[type="checkbox"]{
388
+ .tds-sidenav-item :is(a,button){
464
389
  position:relative;
465
- width:1em;
466
- height:1em;
467
- margin:calc((1lh - 1em) / 2) 0 0;
468
- font-size:var(--tds-checkbox-font-size);
469
- line-height:inherit;
390
+ display:flex;
391
+ gap:12px;
392
+ align-items:center;
393
+ width:100%;
394
+ padding:12px;
395
+ overflow:hidden;
396
+ font-size:var(--t-font-size-sm);
397
+ line-height:18px;
398
+ color:var(--t-text-color-headline);
399
+ white-space:nowrap;
400
+ text-decoration:none;
470
401
  -webkit-appearance:none;
471
402
  -moz-appearance:none;
472
403
  appearance:none;
473
- cursor:var(--tds-checkbox-cursor);
474
- background-color:var(--tds-checkbox-input-background-color);
475
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
476
- border-radius:var(--tds-checkbox-input-border-radius);
477
- transition-timing-function:ease-in-out;
478
- transition-duration:180ms;
479
- transition-property:var(--tds-checkbox-transition-property);
404
+ cursor:pointer;
405
+ background-color:var(--tds-sidenav-item-background, transparent);
406
+ border:0;
407
+ border-radius:var(--t-border-radius);
408
+ transition:var(--tds-sidenav-item-transition);
480
409
  }
481
410
 
482
- :is(.tds-checkbox input[type="checkbox"])::before{
483
- position:absolute;
484
- top:50%;
485
- left:50%;
486
- visibility:var(--tds-checkbox-input-icon-visibility);
487
- width:100%;
488
- height:100%;
489
- content:"";
490
- background-color:var(--tds-checkbox-input-icon-fill);
491
- border-radius:var(--tds-checkbox-input-border-radius);
492
- opacity:var(--tds-checkbox-input-icon-opacity);
493
- -webkit-mask-image:var(--tds-checkbox-input-icon);
494
- mask-image:var(--tds-checkbox-input-icon);
495
- -webkit-mask-repeat:no-repeat;
496
- mask-repeat:no-repeat;
497
- -webkit-mask-size:contain;
498
- mask-size:contain;
499
- transform:translate(-50%, -50%);
411
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
412
+ display:block;
413
+ flex:1;
414
+ overflow:hidden;
415
+ text-overflow:ellipsis;
416
+ text-align:left;
417
+ white-space:nowrap;
500
418
  }
501
419
 
502
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
503
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
504
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
420
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
421
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
422
+ color:var(--t-text-color-headline);
423
+ text-decoration:none;
505
424
  }
506
425
 
507
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
508
- outline:var(--t-focus-ring-outline);
509
- outline-offset:var(--t-focus-ring-offset);
426
+ :is(.tds-sidenav-item :is(a,button)):active{
427
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
510
428
  }
511
429
 
512
- :is(.tds-checkbox input[type="checkbox"]):disabled{
513
- pointer-events:none;
430
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
431
+ overflow:hidden;
432
+ color:var(--tds-sidenav-item-icon-color);
514
433
  }
515
434
 
516
- @media (prefers-reduced-motion: reduce){
435
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
436
+ display:block;
437
+ width:var(--tds-sidenav-item-icon-size);
438
+ height:var(--tds-sidenav-item-icon-size);
439
+ }
517
440
 
518
- .tds-checkbox input[type="checkbox"]{
519
- --tds-checkbox-transition-property:none;
520
- }
441
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
442
+ --tds-sidenav-indent:19px;
521
443
  }
522
444
 
523
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
524
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
525
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
526
- --tds-checkbox-input-icon-visibility:visible;
527
- --tds-checkbox-input-icon-opacity:1;
528
- }
529
-
530
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
531
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
532
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
445
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
446
+ visibility:visible;
447
+ block-size:auto;
448
+ opacity:1;
533
449
  }
534
450
 
535
- .tds-checkbox:has(input:checked){
536
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
451
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
452
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
453
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
454
+
455
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
456
+ font-weight:var(--t-font-weight-semibold);
537
457
  }
538
458
 
539
- .tds-checkbox:has(input:indeterminate){
540
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
459
+ .tds-sidenav-item:has(.tds-sidenav-section){
460
+ display:flex;
461
+ flex-direction:column;
462
+ gap:var(--t-spacing-half);
541
463
  }
542
464
 
543
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
544
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
545
- --tds-checkbox-description-color:var(--t-text-color-status-error);
546
- --tds-checkbox-description-invalid-icon-display:inline-block;
465
+ .tds-sidenav-item .tds-sidenav-section-list{
466
+ --tds-sidenav-item-depth:1;
467
+ gap:0;
547
468
  }
548
469
 
549
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
550
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
551
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
470
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
471
+ visibility:hidden;
472
+ block-size:0;
473
+ overflow-y:clip;
474
+ opacity:0;
475
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
552
476
  }
553
477
 
554
- :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{
555
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
556
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
478
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
479
+ --tds-sidenav-item-depth:2;
557
480
  }
558
481
 
559
- :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){
560
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
561
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
482
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
483
+ min-height:var(--t-element-size-2xl);
484
+ padding-block:9px;
485
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
486
+ line-height:1;
487
+ background-color:transparent;
488
+ }
489
+
490
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
491
+ position:absolute;
492
+ top:0;
493
+ bottom:0;
494
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
495
+ width:2px;
496
+ content:"";
497
+ background-color:var(--tds-sidenav-item-nested-border-color);
498
+ transition:var(--tds-sidenav-item-transition);
562
499
  }
563
500
 
564
- .tds-checkbox:has(input:required) label::after{
565
- margin-left:.25ch;
566
- color:var(--t-text-color-status-error);
567
- content:"*";
568
- }
501
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
502
+ position:absolute;
503
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
504
+ z-index:-1;
505
+ height:100%;
506
+ content:"";
507
+ background-color:var(--tds-sidenav-item-nested-background);
508
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
509
+ transition:var(--tds-sidenav-item-transition);
510
+ }
569
511
 
570
- .tds-checkbox:has(input:disabled){
571
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
572
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
512
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
513
+ display:block;
514
+ text-align:left;
515
+ white-space:normal;
516
+ }
573
517
 
574
- --tds-checkbox-label-color:var(--t-form-color-disabled);
575
- --tds-checkbox-description-color:var(--t-form-color-disabled);
576
- --tds-checkbox-cursor:not-allowed;
577
- }
518
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
519
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
520
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
521
+ }
578
522
 
579
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
580
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
523
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
524
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
525
+ }
526
+
527
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
528
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
529
+ font-weight:var(--t-font-weight-medium);
581
530
  }
582
531
 
583
- .tds-checkbox-description{
532
+ .tds-sidenav-responsive-header{
584
533
  display:flex;
585
- grid-area:2 / 2;
586
- gap:var(--t-spacing-half);
587
- align-items:flex-start;
588
- margin:0;
589
- font-size:var(--tds-checkbox-description-font-size);
590
- line-height:var(--tds-checkbox-description-line-height);
591
- color:var(--tds-checkbox-description-color);
592
- cursor:text;
534
+ gap:var(--t-spacing-2);
535
+ align-items:center;
536
+ width:100%;
593
537
  }
594
538
 
595
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
596
- display:var(--tds-checkbox-description-invalid-icon-display);
597
- flex-shrink:0;
598
- margin-top:calc(.5lh - .5em);
599
- line-height:var(--tds-checkbox-description-line-height);
539
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
540
+ order:0;
600
541
  }
601
542
 
602
- .tds-checkbox--sm{
603
- --tds-checkbox-line-height:1.35;
604
- --tds-checkbox-input-size:var(--t-element-size-sm);
605
- --tds-checkbox-font-size:var(--t-font-size-sm);
606
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
607
- --tds-checkbox-description-line-height:1.3;
608
- }
609
-
610
- .tds-radio-group{
611
- --tds-radio-group-font-size:var(--t-font-size-md);
612
- --tds-radio-group-line-height:1.4;
613
- --tds-radio-group-gap:var(--t-spacing-1);
614
-
615
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
616
-
617
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
618
- --tds-radio-group-description-line-height:1.35;
619
- --tds-radio-group-description-color:var(--t-text-color-secondary);
620
- --tds-radio-group-description-invalid-icon-display:none;
621
- display:flex;
622
- flex-direction:column;
623
- gap:var(--tds-radio-group-gap);
624
- padding:0;
625
- margin:0;
626
-
627
- font-size:var(--tds-radio-group-font-size);
628
- line-height:var(--tds-radio-group-line-height);
629
- border:0;
630
- }
543
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
544
+ flex:1;
545
+ order:1;
546
+ margin:0;
547
+ font-size:var(--t-font-size-lg);
548
+ font-weight:var(--t-font-weight-medium);
549
+ color:var(--t-text-color-headline);
550
+ }
631
551
 
632
- .tds-radio-group legend{
552
+ @media (max-width: 719px){
553
+ .tds-sidenav-collapse{
554
+ z-index:10001;
555
+ display:none;
556
+ max-width:min(448px, calc(100vw - 48px));
633
557
  padding:0;
634
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
558
+ margin:12px 0;
559
+ overflow:hidden;
560
+ outline:0;
561
+ background:var(--t-surface-color-card);
562
+ border:0;
563
+ border-radius:6px;
564
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
565
+ will-change:transform;
566
+ position-area:bottom span-right;
635
567
  }
636
568
 
637
- .tds-radio-group:has(.tds-radio-group-description){
638
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
569
+ .tds-sidenav-scroll-container{
570
+ --webkit-overflow-scrolling:touch;
571
+ display:block;
572
+ width:100%;
573
+ height:-moz-fit-content;
574
+ height:fit-content;
575
+ padding:var(--t-spacing-2);
576
+ overflow-y:auto;
639
577
  }
640
578
 
641
- .tds-radio-group[aria-invalid="true"]{
642
- --tds-radio-group-description-color:var(--t-text-color-status-error);
643
- --tds-radio-group-description-invalid-icon-display:inline-block;
579
+ .tds-sidenav-item :is(a, button) :is(.prefix){
580
+ display:none;
644
581
  }
645
-
646
- .tds-radio-group[aria-invalid="true"] .tds-radio{
647
- --tds-radio-input-border-color:var(--t-form-border-color-error);
582
+ @supports selector(:popover-open){
583
+ .tds-sidenav-collapse:popover-open{
584
+ display:flex;
585
+ }
586
+ }
587
+ @supports not selector(:popover-open){
588
+ .tds-sidenav-collapse.\:popover-open{
589
+ display:flex;
648
590
  }
591
+ }
592
+ }
649
593
 
650
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
651
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
594
+ @media (min-width: 720px){
595
+ .tds-sidenav-responsive-header{
596
+ display:none;
597
+ }
598
+ }
599
+
600
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
601
+ display:none;
602
+ }
603
+
604
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
605
+ display:block;
606
+ }
607
+
608
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
609
+ display:flex;
610
+ flex-direction:column;
611
+ }
612
+
613
+ .tds-checkbox{
614
+ --tds-checkbox-font-size:var(--t-font-size-md);
615
+ --tds-checkbox-cursor:pointer;
616
+ --tds-checkbox-line-height:1.4;
617
+ --tds-checkbox-transition-property:background-color, border-color;
618
+
619
+ --tds-checkbox-input-size:var(--t-element-size-md);
620
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
621
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
622
+ --tds-checkbox-input-background-color:transparent;
623
+
624
+ --tds-checkbox-input-icon:none;
625
+ --tds-checkbox-input-icon-visibility:hidden;
626
+ --tds-checkbox-input-icon-opacity:0;
627
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
628
+
629
+ --tds-checkbox-label-color:var(--t-form-color);
630
+
631
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
632
+ --tds-checkbox-description-line-height:1.35;
633
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
634
+ --tds-checkbox-description-invalid-icon-display:none;
635
+
636
+ position:relative;
637
+ display:inline-grid;
638
+ grid-template-columns:auto;
639
+ grid-auto-columns:1fr;
640
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
641
+ line-height:var(--tds-checkbox-line-height);
642
+ cursor:var(--tds-checkbox-cursor);
643
+ -webkit-user-select:none;
644
+ -moz-user-select:none;
645
+ user-select:none;
646
+ }
647
+
648
+ .tds-checkbox label{
649
+ grid-area:1 / 2;
650
+ font-size:var(--tds-checkbox-font-size);
651
+ font-weight:var(--t-font-weight-normal);
652
+ color:var(--tds-checkbox-label-color);
653
+ cursor:var(--tds-checkbox-cursor);
654
+ }
655
+
656
+ .tds-checkbox input[type="checkbox"]{
657
+ position:relative;
658
+ width:1em;
659
+ height:1em;
660
+ margin:calc((1lh - 1em) / 2) 0 0;
661
+ font-size:var(--tds-checkbox-font-size);
662
+ line-height:inherit;
663
+ -webkit-appearance:none;
664
+ -moz-appearance:none;
665
+ appearance:none;
666
+ cursor:var(--tds-checkbox-cursor);
667
+ background-color:var(--tds-checkbox-input-background-color);
668
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
669
+ border-radius:var(--tds-checkbox-input-border-radius);
670
+ transition-timing-function:ease-in-out;
671
+ transition-duration:180ms;
672
+ transition-property:var(--tds-checkbox-transition-property);
673
+ }
674
+
675
+ :is(.tds-checkbox input[type="checkbox"])::before{
676
+ position:absolute;
677
+ top:50%;
678
+ left:50%;
679
+ visibility:var(--tds-checkbox-input-icon-visibility);
680
+ width:100%;
681
+ height:100%;
682
+ content:"";
683
+ background-color:var(--tds-checkbox-input-icon-fill);
684
+ border-radius:var(--tds-checkbox-input-border-radius);
685
+ opacity:var(--tds-checkbox-input-icon-opacity);
686
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
687
+ mask-image:var(--tds-checkbox-input-icon);
688
+ -webkit-mask-repeat:no-repeat;
689
+ mask-repeat:no-repeat;
690
+ -webkit-mask-size:contain;
691
+ mask-size:contain;
692
+ transform:translate(-50%, -50%);
693
+ }
694
+
695
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
696
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
697
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
698
+ }
699
+
700
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
701
+ outline:var(--t-focus-ring-outline);
702
+ outline-offset:var(--t-focus-ring-offset);
703
+ }
704
+
705
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
706
+ pointer-events:none;
707
+ }
708
+
709
+ @media (prefers-reduced-motion: reduce){
710
+
711
+ .tds-checkbox input[type="checkbox"]{
712
+ --tds-checkbox-transition-property:none;
713
+ }
714
+ }
715
+
716
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
717
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
718
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
719
+ --tds-checkbox-input-icon-visibility:visible;
720
+ --tds-checkbox-input-icon-opacity:1;
721
+ }
722
+
723
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
724
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
725
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
726
+ }
727
+
728
+ .tds-checkbox:has(input:checked){
729
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
730
+ }
731
+
732
+ .tds-checkbox:has(input:indeterminate){
733
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
734
+ }
735
+
736
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
737
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
738
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
739
+ --tds-checkbox-description-invalid-icon-display:inline-block;
740
+ }
741
+
742
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
743
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
744
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
745
+ }
746
+
747
+ :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{
748
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
749
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
750
+ }
751
+
752
+ :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){
753
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
754
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
755
+ }
756
+
757
+ .tds-checkbox:has(input:required) label::after{
758
+ margin-left:.25ch;
759
+ color:var(--t-text-color-status-error);
760
+ content:"*";
761
+ }
762
+
763
+ .tds-checkbox:has(input:disabled){
764
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
765
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
766
+
767
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
768
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
769
+ --tds-checkbox-cursor:not-allowed;
770
+ }
771
+
772
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
773
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
774
+ }
775
+
776
+ .tds-checkbox-description{
777
+ display:flex;
778
+ grid-area:2 / 2;
779
+ gap:var(--t-spacing-half);
780
+ align-items:flex-start;
781
+ margin:0;
782
+ font-size:var(--tds-checkbox-description-font-size);
783
+ line-height:var(--tds-checkbox-description-line-height);
784
+ color:var(--tds-checkbox-description-color);
785
+ cursor:text;
786
+ }
787
+
788
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
789
+ display:var(--tds-checkbox-description-invalid-icon-display);
790
+ flex-shrink:0;
791
+ margin-top:calc(.5lh - .5em);
792
+ line-height:var(--tds-checkbox-description-line-height);
793
+ }
794
+
795
+ .tds-checkbox--sm{
796
+ --tds-checkbox-line-height:1.35;
797
+ --tds-checkbox-input-size:var(--t-element-size-sm);
798
+ --tds-checkbox-font-size:var(--t-font-size-sm);
799
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
800
+ --tds-checkbox-description-line-height:1.3;
801
+ }
802
+
803
+ .tds-radio-group{
804
+ --tds-radio-group-font-size:var(--t-font-size-md);
805
+ --tds-radio-group-line-height:1.4;
806
+ --tds-radio-group-gap:var(--t-spacing-1);
807
+
808
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
809
+
810
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
811
+ --tds-radio-group-description-line-height:1.35;
812
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
813
+ --tds-radio-group-description-invalid-icon-display:none;
814
+ display:flex;
815
+ flex-direction:column;
816
+ gap:var(--tds-radio-group-gap);
817
+ padding:0;
818
+ margin:0;
819
+
820
+ font-size:var(--tds-radio-group-font-size);
821
+ line-height:var(--tds-radio-group-line-height);
822
+ border:0;
823
+ }
824
+
825
+ .tds-radio-group legend{
826
+ padding:0;
827
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
828
+ }
829
+
830
+ .tds-radio-group:has(.tds-radio-group-description){
831
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
832
+ }
833
+
834
+ .tds-radio-group[aria-invalid="true"]{
835
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
836
+ --tds-radio-group-description-invalid-icon-display:inline-block;
837
+ }
838
+
839
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
840
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
841
+ }
842
+
843
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
844
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
652
845
  --tds-radio-input-background-color:var(--t-form-background-color-error);
653
846
  }
654
847
 
@@ -694,11 +887,143 @@
694
887
  --tds-radio-group-description-line-height:1.3;
695
888
  }
696
889
 
697
- .tds-toggle-switch{
698
- --tds-toggle-switch-font-size:var(--t-font-size-md);
699
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
700
- --tds-toggle-switch-cursor:pointer;
701
- --tds-toggle-switch-display:inline-grid;
890
+ .tds-radio{
891
+ --tds-radio-font-size:var(--t-font-size-md);
892
+ --tds-radio-cursor:pointer;
893
+ --tds-radio-line-height:1.4;
894
+ --tds-radio-transition-property:border-width;
895
+
896
+ --tds-radio-input-size:var(--t-element-size-md);
897
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
898
+ --tds-radio-input-border-color:var(--t-form-border-color);
899
+ --tds-radio-input-border-width:var(--t-form-border-width);
900
+ --tds-radio-input-background-color:transparent;
901
+
902
+ --tds-radio-label-color:var(--t-form-color);
903
+
904
+ --tds-radio-description-font-size:var(--t-font-size-sm);
905
+ --tds-radio-description-line-height:1.35;
906
+ --tds-radio-description-color:var(--t-text-color-secondary);
907
+
908
+ position:relative;
909
+ display:inline-grid;
910
+ grid-template-columns:auto;
911
+ grid-auto-columns:1fr;
912
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
913
+ line-height:var(--tds-radio-line-height);
914
+ cursor:var(--tds-radio-cursor);
915
+ -webkit-user-select:none;
916
+ -moz-user-select:none;
917
+ user-select:none;
918
+ }
919
+
920
+ .tds-radio label{
921
+ grid-area:1 / 2;
922
+ font-size:var(--tds-radio-font-size);
923
+ font-weight:var(--t-font-weight-normal);
924
+ color:var(--tds-radio-label-color);
925
+ cursor:var(--tds-radio-cursor);
926
+ }
927
+
928
+ .tds-radio input[type="radio"]{
929
+ position:relative;
930
+ width:1em;
931
+ height:1em;
932
+ margin:calc((1lh - 1em) / 2) 0 0;
933
+ font-size:var(--tds-radio-font-size);
934
+ line-height:inherit;
935
+ -webkit-appearance:none;
936
+ -moz-appearance:none;
937
+ appearance:none;
938
+ cursor:var(--tds-radio-cursor);
939
+ background-color:var(--tds-radio-input-background-color);
940
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
941
+ border-radius:var(--tds-radio-input-border-radius);
942
+ transition-timing-function:ease-in-out;
943
+ transition-duration:180ms;
944
+ transition-property:var(--tds-radio-transition-property);
945
+ }
946
+
947
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
948
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
949
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
950
+ }
951
+
952
+ :is(.tds-radio input[type="radio"]):focus-visible{
953
+ outline:var(--t-focus-ring-outline);
954
+ outline-offset:var(--t-focus-ring-offset);
955
+ }
956
+
957
+ :is(.tds-radio input[type="radio"]):disabled{
958
+ pointer-events:none;
959
+ }
960
+
961
+ @media (prefers-reduced-motion: reduce){
962
+
963
+ .tds-radio input[type="radio"]{
964
+ --tds-radio-transition-property:none;
965
+ }
966
+ }
967
+
968
+ .tds-radio:has(input:checked){
969
+ --tds-radio-input-background-color:var(--t-form-background-color);
970
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
971
+ --tds-radio-input-border-width:4px;
972
+ }
973
+
974
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
975
+ --tds-radio-input-background-color:var(--t-form-background-color);
976
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
977
+ }
978
+
979
+ .tds-radio:has(input:user-invalid){
980
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
981
+ }
982
+
983
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
984
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
985
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
986
+ }
987
+
988
+ .tds-radio:has(input:disabled){
989
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
990
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
991
+
992
+ --tds-radio-label-color:var(--t-form-color-disabled);
993
+ --tds-radio-description-color:var(--t-form-color-disabled);
994
+ --tds-radio-cursor:not-allowed;
995
+ }
996
+
997
+ .tds-radio:has(input:disabled) input:checked{
998
+ --tds-radio-input-background-color:var(--t-form-background-color);
999
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1000
+ }
1001
+
1002
+ .tds-radio-description{
1003
+ display:flex;
1004
+ grid-area:2 / 2;
1005
+ gap:var(--t-spacing-half);
1006
+ align-items:flex-start;
1007
+ margin:0;
1008
+ font-size:var(--tds-radio-description-font-size);
1009
+ line-height:var(--tds-radio-description-line-height);
1010
+ color:var(--tds-radio-description-color);
1011
+ cursor:text;
1012
+ }
1013
+
1014
+ .tds-radio--sm{
1015
+ --tds-radio-line-height:1.35;
1016
+ --tds-radio-input-size:var(--t-element-size-sm);
1017
+ --tds-radio-font-size:var(--t-font-size-sm);
1018
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1019
+ --tds-radio-description-line-height:1.3;
1020
+ }
1021
+
1022
+ .tds-toggle-switch{
1023
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1024
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1025
+ --tds-toggle-switch-cursor:pointer;
1026
+ --tds-toggle-switch-display:inline-grid;
702
1027
  --tds-toggle-switch-line-height:1.4;
703
1028
 
704
1029
  --tds-toggle-switch-label-color:var(--t-form-color);
@@ -835,331 +1160,6 @@
835
1160
  --tds-toggle-switch-display:inline-flex;
836
1161
  }
837
1162
 
838
-
839
- @media (prefers-reduced-motion: no-preference){
840
-
841
- :root{
842
- interpolate-size:allow-keywords;
843
- }
844
- }
845
-
846
- @layer tds-component{
847
- tds-sidenav,
848
- .tds-sidenav{
849
- --tds-sidenav-indent:12px;
850
- --tds-sidenav-item-depth:0;
851
-
852
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
853
-
854
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
855
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
856
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
857
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
858
-
859
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
860
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
861
- --tds-sidenav-item-nested-background-selected:transparent;
862
-
863
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
864
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
865
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
866
-
867
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
868
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
869
- }
870
-
871
- .tds-sidenav--theme-gray{
872
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
873
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
874
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
875
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
876
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
877
- }
878
- }
879
-
880
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
881
- display:flex;
882
- }
883
-
884
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
885
- flex-direction:column;
886
- gap:var(--t-spacing-half);
887
- width:100%;
888
- }
889
-
890
- .tds-sidenav-section-list{
891
- width:100%;
892
- padding:0;
893
- margin:0;
894
- list-style:none;
895
- }
896
-
897
- .tds-sidenav-section-header{
898
- display:flex;
899
- align-items:baseline;
900
- justify-content:space-between;
901
- padding-top:var(--t-spacing-2);
902
- }
903
-
904
- .tds-sidenav-section-header h2{
905
- margin:0;
906
- font-size:var(--t-font-size-sm);
907
- font-weight:var(--t-font-weight-semibold);
908
- line-height:1.35;
909
- color:var(--t-text-color-secondary);
910
- text-transform:uppercase;
911
- }
912
-
913
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
914
- padding-top:0;
915
- }
916
-
917
- .tds-sidenav-section-header [slot="label-actions"]{
918
- display:flex;
919
- gap:var(--t-spacing-half);
920
- align-items:center;
921
- }
922
-
923
- .tds-sidenav-section [slot="section-actions"]{
924
- display:flex;
925
- gap:12px;
926
- align-items:center;
927
- min-height:42px;
928
- padding:var(--t-spacing-1) 0;
929
- }
930
-
931
- .tds-sidenav-section-list,
932
- .tds-sidenav-item{
933
- width:100%;
934
- padding:0;
935
- margin:0;
936
- }
937
-
938
- .tds-sidenav-item :is(a,button){
939
- position:relative;
940
- display:flex;
941
- gap:12px;
942
- align-items:center;
943
- width:100%;
944
- padding:12px;
945
- overflow:hidden;
946
- font-size:var(--t-font-size-sm);
947
- line-height:18px;
948
- color:var(--t-text-color-headline);
949
- white-space:nowrap;
950
- text-decoration:none;
951
- -webkit-appearance:none;
952
- -moz-appearance:none;
953
- appearance:none;
954
- cursor:pointer;
955
- background-color:var(--tds-sidenav-item-background, transparent);
956
- border:0;
957
- border-radius:var(--t-border-radius);
958
- transition:var(--tds-sidenav-item-transition);
959
- }
960
-
961
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
962
- display:block;
963
- flex:1;
964
- overflow:hidden;
965
- text-overflow:ellipsis;
966
- text-align:left;
967
- white-space:nowrap;
968
- }
969
-
970
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
971
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
972
- color:var(--t-text-color-headline);
973
- text-decoration:none;
974
- }
975
-
976
- :is(.tds-sidenav-item :is(a,button)):active{
977
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
978
- }
979
-
980
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
981
- overflow:hidden;
982
- color:var(--tds-sidenav-item-icon-color);
983
- }
984
-
985
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
986
- display:block;
987
- width:var(--tds-sidenav-item-icon-size);
988
- height:var(--tds-sidenav-item-icon-size);
989
- }
990
-
991
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
992
- --tds-sidenav-indent:19px;
993
- }
994
-
995
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
996
- visibility:visible;
997
- block-size:auto;
998
- opacity:1;
999
- }
1000
-
1001
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1002
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1003
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1004
-
1005
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1006
- font-weight:var(--t-font-weight-semibold);
1007
- }
1008
-
1009
- .tds-sidenav-item:has(.tds-sidenav-section){
1010
- display:flex;
1011
- flex-direction:column;
1012
- gap:var(--t-spacing-half);
1013
- }
1014
-
1015
- .tds-sidenav-item .tds-sidenav-section-list{
1016
- --tds-sidenav-item-depth:1;
1017
- gap:0;
1018
- }
1019
-
1020
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1021
- visibility:hidden;
1022
- block-size:0;
1023
- overflow-y:clip;
1024
- opacity:0;
1025
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1026
- }
1027
-
1028
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1029
- --tds-sidenav-item-depth:2;
1030
- }
1031
-
1032
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1033
- min-height:var(--t-element-size-2xl);
1034
- padding-block:9px;
1035
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1036
- line-height:1;
1037
- background-color:transparent;
1038
- }
1039
-
1040
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1041
- position:absolute;
1042
- top:0;
1043
- bottom:0;
1044
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1045
- width:2px;
1046
- content:"";
1047
- background-color:var(--tds-sidenav-item-nested-border-color);
1048
- transition:var(--tds-sidenav-item-transition);
1049
- }
1050
-
1051
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1052
- position:absolute;
1053
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1054
- z-index:-1;
1055
- height:100%;
1056
- content:"";
1057
- background-color:var(--tds-sidenav-item-nested-background);
1058
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1059
- transition:var(--tds-sidenav-item-transition);
1060
- }
1061
-
1062
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1063
- display:block;
1064
- text-align:left;
1065
- white-space:normal;
1066
- }
1067
-
1068
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1069
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1070
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1071
- }
1072
-
1073
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1074
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1075
- }
1076
-
1077
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1078
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1079
- font-weight:var(--t-font-weight-medium);
1080
- }
1081
-
1082
- .tds-sidenav-responsive-header{
1083
- display:flex;
1084
- gap:var(--t-spacing-2);
1085
- align-items:center;
1086
- width:100%;
1087
- }
1088
-
1089
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1090
- order:0;
1091
- }
1092
-
1093
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1094
- flex:1;
1095
- order:1;
1096
- margin:0;
1097
- font-size:var(--t-font-size-lg);
1098
- font-weight:var(--t-font-weight-medium);
1099
- color:var(--t-text-color-headline);
1100
- }
1101
-
1102
- @media (max-width: 719px){
1103
- .tds-sidenav-collapse{
1104
- z-index:10001;
1105
- display:none;
1106
- max-width:min(448px, calc(100vw - 48px));
1107
- padding:0;
1108
- margin:12px 0;
1109
- overflow:hidden;
1110
- outline:0;
1111
- background:var(--t-surface-color-card);
1112
- border:0;
1113
- border-radius:6px;
1114
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1115
- will-change:transform;
1116
- position-area:bottom span-right;
1117
- }
1118
-
1119
- .tds-sidenav-scroll-container{
1120
- --webkit-overflow-scrolling:touch;
1121
- display:block;
1122
- width:100%;
1123
- height:-moz-fit-content;
1124
- height:fit-content;
1125
- padding:var(--t-spacing-2);
1126
- overflow-y:auto;
1127
- }
1128
-
1129
- .tds-sidenav-item :is(a, button) :is(.prefix){
1130
- display:none;
1131
- }
1132
- @supports selector(:popover-open){
1133
- .tds-sidenav-collapse:popover-open{
1134
- display:flex;
1135
- }
1136
- }
1137
- @supports not selector(:popover-open){
1138
- .tds-sidenav-collapse.\:popover-open{
1139
- display:flex;
1140
- }
1141
- }
1142
- }
1143
-
1144
- @media (min-width: 720px){
1145
- .tds-sidenav-responsive-header{
1146
- display:none;
1147
- }
1148
- }
1149
-
1150
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1151
- display:none;
1152
- }
1153
-
1154
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1155
- display:block;
1156
- }
1157
-
1158
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1159
- display:flex;
1160
- flex-direction:column;
1161
- }
1162
-
1163
1163
  .tds-loading-spinner{
1164
1164
  --tds-loading-spinner-size:1.25em;
1165
1165