@planningcenter/tapestry 3.1.0-rc.16 → 3.1.0-rc.17

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 (7) hide show
  1. package/dist/reactRender.css +494 -487
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +494 -487
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/unstable.css +13 -6
  6. package/dist/unstable.css.map +1 -1
  7. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -475,279 +475,331 @@
475
475
  --tds-checkbox-description-line-height:1.3;
476
476
  }
477
477
 
478
- .tds-radio{
479
- --tds-radio-font-size:var(--t-font-size-md);
480
- --tds-radio-cursor:pointer;
481
- --tds-radio-line-height:1.4;
482
- --tds-radio-transition-property:border-width;
483
478
 
484
- --tds-radio-input-size:var(--t-element-size-md);
485
- --tds-radio-input-border-radius:var(--t-border-radius-round);
486
- --tds-radio-input-border-color:var(--t-form-border-color);
487
- --tds-radio-input-border-width:var(--t-form-border-width);
488
- --tds-radio-input-background-color:transparent;
489
-
490
- --tds-radio-label-color:var(--t-form-color);
491
-
492
- --tds-radio-description-font-size:var(--t-font-size-sm);
493
- --tds-radio-description-line-height:1.35;
494
- --tds-radio-description-color:var(--t-text-color-secondary);
479
+ @media (prefers-reduced-motion: no-preference){
495
480
 
496
- position:relative;
497
- display:inline-grid;
498
- grid-template-columns:auto;
499
- grid-auto-columns:1fr;
500
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
501
- line-height:var(--tds-radio-line-height);
502
- cursor:var(--tds-radio-cursor);
503
- -webkit-user-select:none;
504
- -moz-user-select:none;
505
- user-select:none;
481
+ :root{
482
+ interpolate-size:allow-keywords;
506
483
  }
507
-
508
- .tds-radio label{
509
- grid-area:1 / 2;
510
- font-size:var(--tds-radio-font-size);
511
- font-weight:var(--t-font-weight-normal);
512
- color:var(--tds-radio-label-color);
513
- cursor:var(--tds-radio-cursor);
514
484
  }
515
485
 
516
- .tds-radio input[type="radio"]{
517
- position:relative;
518
- width:1em;
519
- height:1em;
520
- margin:calc((1lh - 1em) / 2) 0 0;
521
- font-size:var(--tds-radio-font-size);
522
- line-height:inherit;
523
- -webkit-appearance:none;
524
- -moz-appearance:none;
525
- appearance:none;
526
- cursor:var(--tds-radio-cursor);
527
- background-color:var(--tds-radio-input-background-color);
528
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
529
- border-radius:var(--tds-radio-input-border-radius);
530
- transition-timing-function:ease-in-out;
531
- transition-duration:180ms;
532
- transition-property:var(--tds-radio-transition-property);
533
- }
486
+ @layer tds-component{
487
+ tds-sidenav,
488
+ .tds-sidenav{
489
+ --tds-sidenav-indent:12px;
490
+ --tds-sidenav-item-depth:0;
534
491
 
535
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
536
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
537
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
538
- }
492
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
539
493
 
540
- :is(.tds-radio input[type="radio"]):focus-visible{
541
- outline:var(--t-focus-ring-outline);
542
- outline-offset:var(--t-focus-ring-offset);
543
- }
494
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
495
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
496
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
497
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
544
498
 
545
- :is(.tds-radio input[type="radio"]):disabled{
546
- pointer-events:none;
547
- }
499
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
500
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
501
+ --tds-sidenav-item-nested-background-selected:transparent;
548
502
 
549
- @media (prefers-reduced-motion: reduce){
503
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
504
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
505
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
550
506
 
551
- .tds-radio input[type="radio"]{
552
- --tds-radio-transition-property:none;
507
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
508
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
553
509
  }
554
- }
555
510
 
556
- .tds-radio:has(input:checked){
557
- --tds-radio-input-background-color:var(--t-form-background-color);
558
- --tds-radio-input-border-color:var(--t-border-color-control-info);
559
- --tds-radio-input-border-width:4px;
511
+ .tds-sidenav--theme-gray{
512
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
513
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
514
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
515
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
516
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
560
517
  }
518
+ }
561
519
 
562
- .tds-radio:has(input:checked) input:hover:not(:disabled){
563
- --tds-radio-input-background-color:var(--t-form-background-color);
564
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
565
- }
566
-
567
- .tds-radio:has(input:user-invalid){
568
- --tds-radio-input-border-color:var(--t-form-border-color-error);
520
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
521
+ display:flex;
569
522
  }
570
523
 
571
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
572
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
573
- --tds-radio-input-background-color:var(--t-form-background-color-error);
574
- }
575
-
576
- .tds-radio:has(input:disabled){
577
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
578
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
579
-
580
- --tds-radio-label-color:var(--t-form-color-disabled);
581
- --tds-radio-description-color:var(--t-form-color-disabled);
582
- --tds-radio-cursor:not-allowed;
524
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
525
+ flex-direction:column;
526
+ gap:var(--t-spacing-half);
527
+ width:100%;
583
528
  }
584
529
 
585
- .tds-radio:has(input:disabled) input:checked{
586
- --tds-radio-input-background-color:var(--t-form-background-color);
587
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
588
- }
589
-
590
- .tds-radio-description{
591
- display:flex;
592
- grid-area:2 / 2;
593
- gap:var(--t-spacing-half);
594
- align-items:flex-start;
530
+ .tds-sidenav-section-list{
531
+ width:100%;
532
+ padding:0;
595
533
  margin:0;
596
- font-size:var(--tds-radio-description-font-size);
597
- line-height:var(--tds-radio-description-line-height);
598
- color:var(--tds-radio-description-color);
599
- cursor:text;
534
+ list-style:none;
600
535
  }
601
536
 
602
- .tds-radio--sm{
603
- --tds-radio-line-height:1.35;
604
- --tds-radio-input-size:var(--t-element-size-sm);
605
- --tds-radio-font-size:var(--t-font-size-sm);
606
- --tds-radio-description-font-size:var(--t-font-size-xs);
607
- --tds-radio-description-line-height:1.3;
537
+ .tds-sidenav-section-header{
538
+ display:flex;
539
+ align-items:baseline;
540
+ justify-content:space-between;
541
+ padding-top:var(--t-spacing-2);
608
542
  }
609
543
 
610
- .tds-toggle-switch{
611
- --tds-toggle-switch-font-size:var(--t-font-size-md);
612
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
613
- --tds-toggle-switch-cursor:pointer;
614
- --tds-toggle-switch-display:inline-grid;
615
- --tds-toggle-switch-line-height:1.4;
616
-
617
- --tds-toggle-switch-label-color:var(--t-form-color);
544
+ .tds-sidenav-section-header h2{
545
+ margin:0;
546
+ font-size:var(--t-font-size-sm);
547
+ font-weight:var(--t-font-weight-semibold);
548
+ line-height:1.35;
549
+ color:var(--t-text-color-secondary);
550
+ text-transform:uppercase;
551
+ }
618
552
 
619
- --tds-toggle-switch-track-width:var(--t-container-size-md);
620
- --tds-toggle-switch-track-outline:none;
621
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
622
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
623
- --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
553
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
554
+ padding-top:0;
555
+ }
624
556
 
625
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
626
- --tds-toggle-switch-thumb-transform:translateX(0);
627
- --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
557
+ .tds-sidenav-section-header [slot="label-actions"]{
558
+ display:flex;
559
+ gap:var(--t-spacing-half);
560
+ align-items:center;
561
+ }
628
562
 
629
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
630
- --tds-toggle-switch-description-line-height:1.35;
631
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
632
- position:relative;
563
+ .tds-sidenav-section [slot="section-actions"]{
564
+ display:flex;
565
+ gap:12px;
566
+ align-items:center;
567
+ min-height:42px;
568
+ padding:var(--t-spacing-1) 0;
569
+ }
633
570
 
634
- display:var(--tds-toggle-switch-display);
635
- grid-template-columns:auto;
636
- grid-auto-columns:1fr;
637
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
638
- -webkit-user-select:none;
639
- -moz-user-select:none;
640
- user-select:none;
571
+ .tds-sidenav-section-list,
572
+ .tds-sidenav-item{
573
+ width:100%;
574
+ padding:0;
575
+ margin:0;
641
576
  }
642
577
 
643
- .tds-toggle-switch input[type="checkbox"]{
644
- position:absolute;
645
- width:var(--tds-toggle-switch-track-width);
646
- height:var(--tds-toggle-switch-track-height);
647
- margin:0;
578
+ .tds-sidenav-item :is(a,button){
579
+ position:relative;
580
+ display:flex;
581
+ gap:12px;
582
+ align-items:center;
583
+ width:100%;
584
+ padding:12px;
585
+ overflow:hidden;
586
+ font-size:var(--t-font-size-sm);
587
+ line-height:18px;
588
+ color:var(--t-text-color-headline);
589
+ white-space:nowrap;
590
+ text-decoration:none;
648
591
  -webkit-appearance:none;
649
592
  -moz-appearance:none;
650
593
  appearance:none;
651
- cursor:var(--tds-toggle-switch-cursor);
652
- outline:var(--tds-toggle-switch-track-outline);
653
- outline-offset:var(--t-focus-ring-offset);
654
- background-color:transparent;
594
+ cursor:pointer;
595
+ background-color:var(--tds-sidenav-item-background, transparent);
655
596
  border:0;
656
- border-radius:var(--t-border-radius-round);
597
+ border-radius:var(--t-border-radius);
598
+ transition:var(--tds-sidenav-item-transition);
657
599
  }
658
600
 
659
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
660
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
601
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
602
+ display:block;
603
+ flex:1;
604
+ overflow:hidden;
605
+ text-overflow:ellipsis;
606
+ text-align:left;
607
+ white-space:nowrap;
661
608
  }
662
609
 
663
- .tds-toggle-switch label{
664
- display:inline-flex;
665
- grid-area:1 / 2;
666
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
667
- column-gap:var(--tds-toggle-switch-column-gap);
668
- margin-top:-.09375em;
669
- font-size:var(--tds-toggle-switch-font-size);
670
- font-weight:var(--t-font-weight-normal);
671
- line-height:var(--tds-toggle-switch-line-height);
672
- color:var(--tds-toggle-switch-label-color);
673
- cursor:var(--tds-toggle-switch-cursor);
610
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
611
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
612
+ color:var(--t-text-color-headline);
613
+ text-decoration:none;
614
+ }
615
+
616
+ :is(.tds-sidenav-item :is(a,button)):active{
617
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
618
+ }
619
+
620
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
621
+ overflow:hidden;
622
+ color:var(--tds-sidenav-item-icon-color);
623
+ }
624
+
625
+ :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{
626
+ display:block;
627
+ width:var(--tds-sidenav-item-icon-size);
628
+ height:var(--tds-sidenav-item-icon-size);
629
+ }
630
+
631
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
632
+ --tds-sidenav-indent:19px;
633
+ }
634
+
635
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
636
+ visibility:visible;
637
+ block-size:auto;
638
+ opacity:1;
639
+ }
640
+
641
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
642
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
643
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
644
+
645
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
646
+ font-weight:var(--t-font-weight-semibold);
674
647
  }
675
648
 
676
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
677
- --tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
649
+ .tds-sidenav-item:has(.tds-sidenav-section){
650
+ display:flex;
651
+ flex-direction:column;
652
+ gap:var(--t-spacing-half);
678
653
  }
679
654
 
680
- .tds-toggle-switch:has(input:checked){
681
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control);
682
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
655
+ .tds-sidenav-item .tds-sidenav-section-list{
656
+ --tds-sidenav-item-depth:1;
657
+ gap:0;
683
658
  }
684
659
 
685
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
686
- --tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
660
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
661
+ visibility:hidden;
662
+ block-size:0;
663
+ overflow-y:clip;
664
+ opacity:0;
665
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
687
666
  }
688
667
 
689
- .tds-toggle-switch:has(input:disabled){
690
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
691
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
692
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
693
- --tds-toggle-switch-cursor:not-allowed;
694
- }
668
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
669
+ --tds-sidenav-item-depth:2;
670
+ }
695
671
 
696
- .tds-toggle-switch-track{
697
- position:relative;
698
- flex-shrink:0;
699
- width:var(--tds-toggle-switch-track-width);
700
- height:var(--tds-toggle-switch-track-height);
701
- background-color:var(--tds-toggle-switch-track-background-color);
702
- border-radius:var(--t-border-radius-round);
703
- transition:var(--tds-toggle-switch-track-transition);
672
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
673
+ min-height:var(--t-element-size-2xl);
674
+ padding-block:9px;
675
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
676
+ line-height:1;
677
+ background-color:transparent;
678
+ }
679
+
680
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
681
+ position:absolute;
682
+ top:0;
683
+ bottom:0;
684
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
685
+ width:2px;
686
+ content:"";
687
+ background-color:var(--tds-sidenav-item-nested-border-color);
688
+ transition:var(--tds-sidenav-item-transition);
689
+ }
690
+
691
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
692
+ position:absolute;
693
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
694
+ z-index:-1;
695
+ height:100%;
696
+ content:"";
697
+ background-color:var(--tds-sidenav-item-nested-background);
698
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
699
+ transition:var(--tds-sidenav-item-transition);
700
+ }
701
+
702
+ :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)){
703
+ display:block;
704
+ text-align:left;
705
+ white-space:normal;
706
+ }
707
+
708
+ :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{
709
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
710
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
711
+ }
712
+
713
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
714
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
715
+ }
716
+
717
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
718
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
719
+ font-weight:var(--t-font-weight-medium);
720
+ }
721
+
722
+ .tds-sidenav-responsive-header{
723
+ display:flex;
724
+ gap:var(--t-spacing-2);
725
+ align-items:center;
726
+ width:100%;
704
727
  }
705
728
 
706
- .tds-toggle-switch-track::before{
707
- position:absolute;
708
- top:var(--t-spacing-fourth);
709
- left:var(--t-spacing-fourth);
710
- width:var(--tds-toggle-switch-thumb-size);
711
- height:var(--tds-toggle-switch-thumb-size);
712
- content:"";
713
- background-color:#fff;
714
- border-radius:var(--t-border-radius-round);
715
- transform:var(--tds-toggle-switch-thumb-transform);
716
- transition:var(--tds-toggle-switch-thumb-transition);
729
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
730
+ order:0;
717
731
  }
718
732
 
719
- @media (prefers-reduced-motion: reduce){
733
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
734
+ flex:1;
735
+ order:1;
736
+ margin:0;
737
+ font-size:var(--t-font-size-lg);
738
+ font-weight:var(--t-font-weight-medium);
739
+ color:var(--t-text-color-headline);
740
+ }
720
741
 
721
- .tds-toggle-switch-track{
722
- --tds-toggle-switch-track-transition:none;
723
- --tds-toggle-switch-thumb-transition:none;
724
- }
742
+ @media (max-width: 719px){
743
+ .tds-sidenav-collapse{
744
+ z-index:10001;
745
+ display:none;
746
+ max-width:min(448px, calc(100vw - 48px));
747
+ padding:0;
748
+ margin:12px 0;
749
+ overflow:hidden;
750
+ outline:0;
751
+ background:var(--t-surface-color-card);
752
+ border:0;
753
+ border-radius:6px;
754
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
755
+ will-change:transform;
756
+ position-area:bottom span-right;
725
757
  }
726
758
 
727
- .tds-toggle-switch-description{
728
- display:flex;
729
- grid-area:2 / 2;
730
- align-items:flex-start;
731
- margin:0;
732
- font-size:var(--tds-toggle-switch-description-font-size);
733
- line-height:var(--tds-toggle-switch-description-line-height);
734
- color:var(--tds-toggle-switch-description-color);
735
- cursor:text;
736
- }
759
+ .tds-sidenav-scroll-container{
760
+ --webkit-overflow-scrolling:touch;
761
+ display:block;
762
+ width:100%;
763
+ height:-moz-fit-content;
764
+ height:fit-content;
765
+ padding:var(--t-spacing-2);
766
+ overflow-y:auto;
767
+ }
737
768
 
738
- .tds-toggle-switch--sm{
739
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
740
- --tds-toggle-switch-line-height:1.35;
741
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
742
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
743
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
744
- --tds-toggle-switch-description-line-height:1.3;
769
+ .tds-sidenav-item :is(a, button) :is(.prefix){
770
+ display:none;
771
+ }
772
+ @supports selector(:popover-open){
773
+ .tds-sidenav-collapse:popover-open{
774
+ display:flex;
775
+ }
776
+ }
777
+ @supports not selector(:popover-open){
778
+ .tds-sidenav-collapse.\:popover-open{
779
+ display:flex;
780
+ }
781
+ }
745
782
  }
746
783
 
747
- .tds-toggle-switch--hide-label{
748
- --tds-toggle-switch-display:inline-flex;
784
+ @media (min-width: 720px){
785
+ .tds-sidenav-responsive-header{
786
+ display:none;
787
+ }
749
788
  }
750
789
 
790
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
791
+ display:none;
792
+ }
793
+
794
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
795
+ display:block;
796
+ }
797
+
798
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
799
+ display:flex;
800
+ flex-direction:column;
801
+ }
802
+
751
803
  .tds-radio-group{
752
804
  --tds-radio-group-font-size:var(--t-font-size-md);
753
805
  --tds-radio-group-line-height:1.4;
@@ -835,330 +887,278 @@
835
887
  --tds-radio-group-description-line-height:1.3;
836
888
  }
837
889
 
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;
838
895
 
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
- }
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;
883
901
 
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
- }
902
+ --tds-radio-label-color:var(--t-form-color);
889
903
 
890
- .tds-sidenav-section-list{
891
- width:100%;
892
- padding:0;
893
- margin:0;
894
- list-style:none;
895
- }
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);
896
907
 
897
- .tds-sidenav-section-header{
898
- display:flex;
899
- align-items:baseline;
900
- justify-content:space-between;
901
- padding-top:var(--t-spacing-2);
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;
902
918
  }
903
919
 
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;
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);
921
926
  }
922
927
 
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){
928
+ .tds-radio input[type="radio"]{
939
929
  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;
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;
951
935
  -webkit-appearance:none;
952
936
  -moz-appearance:none;
953
937
  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);
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);
959
945
  }
960
946
 
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;
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);
974
950
  }
975
951
 
976
- :is(.tds-sidenav-item :is(a,button)):active{
977
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
952
+ :is(.tds-radio input[type="radio"]):focus-visible{
953
+ outline:var(--t-focus-ring-outline);
954
+ outline-offset:var(--t-focus-ring-offset);
978
955
  }
979
956
 
980
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
981
- overflow:hidden;
982
- color:var(--tds-sidenav-item-icon-color);
957
+ :is(.tds-radio input[type="radio"]):disabled{
958
+ pointer-events:none;
983
959
  }
984
960
 
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
- }
961
+ @media (prefers-reduced-motion: reduce){
994
962
 
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;
963
+ .tds-radio input[type="radio"]{
964
+ --tds-radio-transition-property:none;
965
+ }
999
966
  }
1000
967
 
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);
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;
1007
972
  }
1008
973
 
1009
- .tds-sidenav-item:has(.tds-sidenav-section){
1010
- display:flex;
1011
- flex-direction:column;
1012
- gap:var(--t-spacing-half);
1013
- }
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
+ }
1014
978
 
1015
- .tds-sidenav-item .tds-sidenav-section-list{
1016
- --tds-sidenav-item-depth:1;
1017
- gap:0;
979
+ .tds-radio:has(input:user-invalid){
980
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1018
981
  }
1019
982
 
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;
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);
1026
986
  }
1027
987
 
1028
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1029
- --tds-sidenav-item-depth:2;
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);
1030
1000
  }
1031
1001
 
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
- }
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
+ }
1039
1013
 
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
- }
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
+ }
1050
1021
 
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
- }
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;
1027
+ --tds-toggle-switch-line-height:1.4;
1061
1028
 
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
- }
1029
+ --tds-toggle-switch-label-color:var(--t-form-color);
1067
1030
 
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
- }
1031
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1032
+ --tds-toggle-switch-track-outline:none;
1033
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1034
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
1035
+ --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
1072
1036
 
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
- }
1037
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1038
+ --tds-toggle-switch-thumb-transform:translateX(0);
1039
+ --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
1076
1040
 
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
- }
1041
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1042
+ --tds-toggle-switch-description-line-height:1.35;
1043
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1044
+ position:relative;
1081
1045
 
1082
- .tds-sidenav-responsive-header{
1083
- display:flex;
1084
- gap:var(--t-spacing-2);
1085
- align-items:center;
1086
- width:100%;
1046
+ display:var(--tds-toggle-switch-display);
1047
+ grid-template-columns:auto;
1048
+ grid-auto-columns:1fr;
1049
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1050
+ -webkit-user-select:none;
1051
+ -moz-user-select:none;
1052
+ user-select:none;
1087
1053
  }
1088
1054
 
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;
1055
+ .tds-toggle-switch input[type="checkbox"]{
1056
+ position:absolute;
1057
+ width:var(--tds-toggle-switch-track-width);
1058
+ height:var(--tds-toggle-switch-track-height);
1096
1059
  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);
1060
+ -webkit-appearance:none;
1061
+ -moz-appearance:none;
1062
+ appearance:none;
1063
+ cursor:var(--tds-toggle-switch-cursor);
1064
+ outline:var(--tds-toggle-switch-track-outline);
1065
+ outline-offset:var(--t-focus-ring-offset);
1066
+ background-color:transparent;
1112
1067
  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;
1068
+ border-radius:var(--t-border-radius-round);
1117
1069
  }
1118
1070
 
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;
1071
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1072
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1073
+ }
1074
+
1075
+ .tds-toggle-switch label{
1076
+ display:inline-flex;
1077
+ grid-area:1 / 2;
1078
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1079
+ column-gap:var(--tds-toggle-switch-column-gap);
1080
+ margin-top:-.09375em;
1081
+ font-size:var(--tds-toggle-switch-font-size);
1082
+ font-weight:var(--t-font-weight-normal);
1083
+ line-height:var(--tds-toggle-switch-line-height);
1084
+ color:var(--tds-toggle-switch-label-color);
1085
+ cursor:var(--tds-toggle-switch-cursor);
1127
1086
  }
1128
1087
 
1129
- .tds-sidenav-item :is(a, button) :is(.prefix){
1130
- display:none;
1088
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1089
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
1131
1090
  }
1132
- @supports selector(:popover-open){
1133
- .tds-sidenav-collapse:popover-open{
1134
- display:flex;
1135
- }
1091
+
1092
+ .tds-toggle-switch:has(input:checked){
1093
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control);
1094
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1136
1095
  }
1137
- @supports not selector(:popover-open){
1138
- .tds-sidenav-collapse.\:popover-open{
1139
- display:flex;
1096
+
1097
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1098
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
1140
1099
  }
1100
+
1101
+ .tds-toggle-switch:has(input:disabled){
1102
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
1103
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1104
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1105
+ --tds-toggle-switch-cursor:not-allowed;
1141
1106
  }
1107
+
1108
+ .tds-toggle-switch-track{
1109
+ position:relative;
1110
+ flex-shrink:0;
1111
+ width:var(--tds-toggle-switch-track-width);
1112
+ height:var(--tds-toggle-switch-track-height);
1113
+ background-color:var(--tds-toggle-switch-track-background-color);
1114
+ border-radius:var(--t-border-radius-round);
1115
+ transition:var(--tds-toggle-switch-track-transition);
1142
1116
  }
1143
1117
 
1144
- @media (min-width: 720px){
1145
- .tds-sidenav-responsive-header{
1146
- display:none;
1118
+ .tds-toggle-switch-track::before{
1119
+ position:absolute;
1120
+ top:var(--t-spacing-fourth);
1121
+ left:var(--t-spacing-fourth);
1122
+ width:var(--tds-toggle-switch-thumb-size);
1123
+ height:var(--tds-toggle-switch-thumb-size);
1124
+ content:"";
1125
+ background-color:#fff;
1126
+ border-radius:var(--t-border-radius-round);
1127
+ transform:var(--tds-toggle-switch-thumb-transform);
1128
+ transition:var(--tds-toggle-switch-thumb-transition);
1147
1129
  }
1130
+
1131
+ @media (prefers-reduced-motion: reduce){
1132
+
1133
+ .tds-toggle-switch-track{
1134
+ --tds-toggle-switch-track-transition:none;
1135
+ --tds-toggle-switch-thumb-transition:none;
1148
1136
  }
1137
+ }
1149
1138
 
1150
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1151
- display:none;
1152
- }
1139
+ .tds-toggle-switch-description{
1140
+ display:flex;
1141
+ grid-area:2 / 2;
1142
+ align-items:flex-start;
1143
+ margin:0;
1144
+ font-size:var(--tds-toggle-switch-description-font-size);
1145
+ line-height:var(--tds-toggle-switch-description-line-height);
1146
+ color:var(--tds-toggle-switch-description-color);
1147
+ cursor:text;
1148
+ }
1153
1149
 
1154
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1155
- display:block;
1156
- }
1150
+ .tds-toggle-switch--sm{
1151
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1152
+ --tds-toggle-switch-line-height:1.35;
1153
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1154
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1155
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1156
+ --tds-toggle-switch-description-line-height:1.3;
1157
+ }
1157
1158
 
1158
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1159
- display:flex;
1160
- flex-direction:column;
1161
- }
1159
+ .tds-toggle-switch--hide-label{
1160
+ --tds-toggle-switch-display:inline-flex;
1161
+ }
1162
1162
 
1163
1163
  .tds-loading-spinner{
1164
1164
  --tds-loading-spinner-size:1.25em;
@@ -2929,13 +2929,14 @@ a[class="tds-btn"]{
2929
2929
  }
2930
2930
 
2931
2931
  :is(.tds-select:has( > button) [popover]) li[role="option"]{
2932
- display:flex;
2933
- gap:var(--tds-select-option-gap);
2934
- align-items:center;
2932
+ display:block;
2935
2933
  padding-block:var(--tds-select-option-padding-block);
2936
2934
  padding-inline:var(--tds-select-option-padding-inline);
2935
+ overflow:hidden;
2936
+ text-overflow:ellipsis;
2937
2937
  font-size:var(--tds-select-option-font-size);
2938
2938
  color:var(--tds-select-option-color);
2939
+ white-space:nowrap;
2939
2940
  cursor:default;
2940
2941
  outline-offset:var(--tds-select-option-outline-offset);
2941
2942
  border-radius:var(--tds-select-option-border-radius);
@@ -3065,9 +3066,14 @@ a[class="tds-btn"]{
3065
3066
  }
3066
3067
 
3067
3068
  :is(.tds-select select:has( > button))::picker(select){
3069
+ inset-block-start:calc(anchor-size(height) + var(--t-spacing-1));
3070
+ inset-inline-start:anchor(start);
3071
+ inline-size:anchor-size(width);
3072
+ min-inline-size:anchor-size(width);
3068
3073
  padding:var(--tds-select-dropdown-padding);
3069
3074
  margin-block:var(--tds-select-dropdown-margin-block);
3070
3075
  position-try-fallbacks:flip-block, flip-inline;
3076
+ overflow:clip;
3071
3077
  scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
3072
3078
  -webkit-user-select:none;
3073
3079
  -moz-user-select:none;
@@ -3120,13 +3126,14 @@ a[class="tds-btn"]{
3120
3126
  }
3121
3127
 
3122
3128
  :is(.tds-select select:has( > button)) option:not([hidden]){
3123
- display:flex;
3124
- gap:var(--tds-select-option-gap);
3125
- align-items:center;
3129
+ display:block;
3126
3130
  padding-block:var(--tds-select-option-padding-block);
3127
3131
  padding-inline:var(--tds-select-option-padding-inline);
3132
+ overflow:hidden;
3133
+ text-overflow:ellipsis;
3128
3134
  font-size:var(--tds-select-option-font-size);
3129
3135
  color:var(--tds-select-option-color);
3136
+ white-space:nowrap;
3130
3137
  cursor:default;
3131
3138
  outline-offset:var(--tds-select-option-outline-offset);
3132
3139
  border-radius:var(--tds-select-option-border-radius);