@planningcenter/tapestry 4.3.0-rc.1 → 4.3.0-rc.3

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 (13) hide show
  1. package/dist/components/DataTable/DataTable.d.ts +3 -1
  2. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  3. package/dist/components/DataTable/DataTable.js +6 -2
  4. package/dist/components/DataTable/DataTable.js.map +1 -1
  5. package/dist/components/internal/pagination/Pagination.d.ts +7 -1
  6. package/dist/components/internal/pagination/Pagination.d.ts.map +1 -1
  7. package/dist/components/internal/pagination/Pagination.js +2 -2
  8. package/dist/components/internal/pagination/Pagination.js.map +1 -1
  9. package/dist/reactRender.css +897 -897
  10. package/dist/reactRender.css.map +1 -1
  11. package/dist/reactRenderLegacy.css +897 -897
  12. package/dist/reactRenderLegacy.css.map +1 -1
  13. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -677,479 +677,409 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- .tds-checkbox{
681
- --tds-checkbox-font-size:var(--t-font-size-md);
682
- --tds-checkbox-cursor:pointer;
683
- --tds-checkbox-line-height:1.4;
684
- --tds-checkbox-transition-property:background-color, border-color;
685
-
686
- --tds-checkbox-input-size:var(--t-element-size-md);
687
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
688
- --tds-checkbox-input-border-color:var(--t-form-border-color);
689
- --tds-checkbox-input-background-color:var(--t-form-background-color);
680
+ .tds-button-group{
681
+ display:inline-flex;
682
+ }
683
+ .tds-button-group > .tds-btn{
684
+ --tds-button-group-item-z-index:1;
690
685
 
691
- --tds-checkbox-input-icon:none;
692
- --tds-checkbox-input-icon-visibility:hidden;
693
- --tds-checkbox-input-icon-opacity:0;
694
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
686
+ position:relative;
687
+ z-index:var(--tds-button-group-item-z-index);
688
+ border-radius:0;
689
+ }
690
+ :is(.tds-button-group > .tds-btn):not(:first-child){
691
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
+ }
693
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
+ position:absolute;
695
+ inset-block:calc(var(--tds-btn-border-width) * -1);
696
+ width:var(--tds-btn-border-width);
697
+ pointer-events:none;
698
+ content:"";
699
+ background-color:var(--t-border-color-white);
700
+ }
701
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
+ }
704
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
+ }
707
+ :is(.tds-button-group > .tds-btn):hover{
708
+ --tds-button-group-item-z-index:2;
709
+ }
710
+ :is(.tds-button-group > .tds-btn):focus-visible{
711
+ --tds-button-group-item-z-index:5;
712
+ }
713
+ .tds-button-group > .tds-btn:first-child{
714
+ border-start-start-radius:var(--tds-btn-border-radius);
715
+ border-end-start-radius:var(--tds-btn-border-radius);
716
+ }
717
+ .tds-button-group > .tds-btn:last-child{
718
+ border-start-end-radius:var(--tds-btn-border-radius);
719
+ border-end-end-radius:var(--tds-btn-border-radius);
720
+ }
695
721
 
696
- --tds-checkbox-label-color:var(--t-form-color);
697
722
 
698
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
699
- --tds-checkbox-description-line-height:1.35;
700
- --tds-checkbox-description-color:var(--t-text-color-secondary);
701
- --tds-checkbox-description-invalid-icon-display:none;
723
+ @media (prefers-reduced-motion: no-preference){
702
724
 
703
- position:relative;
704
- display:inline-grid;
705
- grid-template-columns:auto;
706
- grid-auto-columns:1fr;
707
- gap:var(--t-spacing-fourth) 0;
708
- line-height:var(--tds-checkbox-line-height);
709
- -webkit-user-select:none;
710
- -moz-user-select:none;
711
- user-select:none;
725
+ :root{
726
+ interpolate-size:allow-keywords;
712
727
  }
713
-
714
- .tds-checkbox label{
715
- grid-area:1 / 2;
716
- padding-inline-start:var(--t-spacing-1);
717
- font-size:var(--tds-checkbox-font-size);
718
- font-weight:var(--t-font-weight-normal);
719
- color:var(--tds-checkbox-label-color);
720
- cursor:var(--tds-checkbox-cursor);
721
- }
722
-
723
- .tds-checkbox tds-indeterminate{
724
- display:flex;
725
728
  }
726
729
 
727
- .tds-checkbox input[type="checkbox"]{
728
- position:relative;
729
- width:1em;
730
- height:1em;
731
- margin:calc((1lh - 1em) / 2) 0 0;
732
- font-size:var(--tds-checkbox-font-size);
733
- line-height:inherit;
734
- -webkit-appearance:none;
735
- -moz-appearance:none;
736
- appearance:none;
737
- cursor:var(--tds-checkbox-cursor);
738
- background-color:var(--tds-checkbox-input-background-color);
739
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
740
- border-radius:var(--tds-checkbox-input-border-radius);
741
- transition-timing-function:var(--t-ease-in-out);
742
- transition-duration:var(--t-duration-200);
743
- transition-property:var(--tds-checkbox-transition-property);
744
- }
730
+ @layer tds-component{
731
+ tds-sidenav,
732
+ .tds-sidenav{
733
+ --tds-sidenav-indent:12px;
734
+ --tds-sidenav-item-depth:0;
745
735
 
746
- :is(.tds-checkbox input[type="checkbox"])::before{
747
- position:absolute;
748
- top:50%;
749
- left:50%;
750
- visibility:var(--tds-checkbox-input-icon-visibility);
751
- width:100%;
752
- height:100%;
753
- content:"";
754
- background-color:var(--tds-checkbox-input-icon-fill);
755
- border-radius:var(--tds-checkbox-input-border-radius);
756
- opacity:var(--tds-checkbox-input-icon-opacity);
757
- -webkit-mask-image:var(--tds-checkbox-input-icon);
758
- mask-image:var(--tds-checkbox-input-icon);
759
- -webkit-mask-repeat:no-repeat;
760
- mask-repeat:no-repeat;
761
- -webkit-mask-size:contain;
762
- mask-size:contain;
763
- transform:translate(-50%, -50%);
764
- }
736
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
765
737
 
766
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
767
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
768
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
769
- }
738
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
739
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
740
+ --tds-sidenav-collapse-closed-opacity:0;
741
+ --tds-sidenav-collapse-open-opacity:1;
742
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
743
+ --tds-sidenav-collapse-open-transform:translateY(0);
770
744
 
771
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
772
- outline:var(--t-focus-ring-outline);
773
- outline-offset:var(--t-focus-ring-offset);
774
- }
745
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
746
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
747
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
748
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
775
749
 
776
- :is(.tds-checkbox input[type="checkbox"]):disabled{
777
- pointer-events:none;
778
- }
750
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
751
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
752
+ --tds-sidenav-item-nested-background-selected:transparent;
779
753
 
780
- @media (prefers-reduced-motion: reduce){
754
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
755
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
756
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
781
757
 
782
- .tds-checkbox input[type="checkbox"]{
783
- --tds-checkbox-transition-property:none;
758
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
759
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
784
760
  }
785
- }
786
761
 
787
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
788
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
789
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
790
- --tds-checkbox-input-icon-visibility:visible;
791
- --tds-checkbox-input-icon-opacity:1;
762
+ @media (prefers-reduced-motion: reduce){
763
+ tds-sidenav,
764
+ .tds-sidenav{
765
+ --tds-sidenav-collapse-transition-enter:none;
766
+ --tds-sidenav-collapse-transition-exit:none;
767
+ --tds-sidenav-collapse-closed-transform:none;
768
+ --tds-sidenav-collapse-open-transform:none;
792
769
  }
793
-
794
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
795
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
796
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
797
770
  }
798
771
 
799
- .tds-checkbox:has(input:checked){
800
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
772
+ .tds-sidenav--theme-gray{
773
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
774
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
775
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
776
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
777
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
801
778
  }
779
+ }
802
780
 
803
- .tds-checkbox:has(input:indeterminate){
804
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
781
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
782
+ display:flex;
805
783
  }
806
784
 
807
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
808
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
809
- --tds-checkbox-description-color:var(--t-text-color-status-error);
810
- --tds-checkbox-description-invalid-icon-display:inline-block;
785
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
786
+ flex-direction:column;
787
+ gap:var(--t-spacing-half);
788
+ width:100%;
811
789
  }
812
790
 
813
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
814
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
815
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
816
- }
817
-
818
- :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{
819
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
820
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
821
- }
822
-
823
- :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){
824
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
825
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
826
- }
791
+ .tds-sidenav-section-list{
792
+ width:100%;
793
+ padding:0;
794
+ margin:0;
795
+ list-style:none;
796
+ }
827
797
 
828
- .tds-checkbox:has(input:required) label::after{
829
- margin-left:.25ch;
830
- color:var(--t-text-color-status-error);
831
- content:"*";
832
- }
798
+ .tds-sidenav-section-header{
799
+ display:flex;
800
+ align-items:baseline;
801
+ justify-content:space-between;
802
+ padding-top:var(--t-spacing-2);
803
+ }
833
804
 
834
- .tds-checkbox:has(input:disabled){
835
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
836
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
805
+ .tds-sidenav-section-header h2{
806
+ margin:0;
807
+ font-size:var(--t-font-size-sm);
808
+ font-weight:var(--t-font-weight-semibold);
809
+ line-height:1.35;
810
+ color:var(--t-text-color-secondary);
811
+ text-transform:uppercase;
812
+ }
837
813
 
838
- --tds-checkbox-label-color:var(--t-form-color-disabled);
839
- --tds-checkbox-description-color:var(--t-form-color-disabled);
840
- --tds-checkbox-cursor:not-allowed;
814
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
815
+ padding-top:0;
841
816
  }
842
817
 
843
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
844
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
845
- }
818
+ .tds-sidenav-section-header [slot="label-actions"]{
819
+ display:flex;
820
+ gap:var(--t-spacing-half);
821
+ align-items:center;
822
+ }
846
823
 
847
- .tds-checkbox-description{
824
+ .tds-sidenav-section [slot="section-actions"]{
848
825
  display:flex;
849
- grid-area:2 / 2;
850
- gap:var(--t-spacing-half);
851
- align-items:flex-start;
852
- padding-inline-start:var(--t-spacing-1);
826
+ gap:12px;
827
+ align-items:center;
828
+ min-height:42px;
829
+ padding:var(--t-spacing-1) 0;
830
+ }
831
+
832
+ .tds-sidenav-section-list,
833
+ .tds-sidenav-item{
834
+ width:100%;
835
+ padding:0;
853
836
  margin:0;
854
- font-size:var(--tds-checkbox-description-font-size);
855
- line-height:var(--tds-checkbox-description-line-height);
856
- color:var(--tds-checkbox-description-color);
857
- cursor:text;
858
837
  }
859
838
 
860
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
861
- display:var(--tds-checkbox-description-invalid-icon-display);
862
- flex-shrink:0;
863
- margin-top:calc(.5lh - .5em);
864
- line-height:var(--tds-checkbox-description-line-height);
839
+ .tds-sidenav-item :is(a,button){
840
+ position:relative;
841
+ display:flex;
842
+ gap:12px;
843
+ align-items:center;
844
+ width:100%;
845
+ padding:12px;
846
+ overflow:hidden;
847
+ font-size:var(--t-font-size-sm);
848
+ line-height:18px;
849
+ color:var(--t-text-color-headline);
850
+ white-space:nowrap;
851
+ text-decoration:none;
852
+ -webkit-appearance:none;
853
+ -moz-appearance:none;
854
+ appearance:none;
855
+ cursor:pointer;
856
+ background-color:var(--tds-sidenav-item-background, transparent);
857
+ border:0;
858
+ border-radius:var(--t-border-radius);
859
+ transition:var(--tds-sidenav-item-transition);
865
860
  }
866
861
 
867
- .tds-checkbox--sm{
868
- --tds-checkbox-line-height:1.35;
869
- --tds-checkbox-input-size:var(--t-element-size-sm);
870
- --tds-checkbox-font-size:var(--t-font-size-sm);
871
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
872
- --tds-checkbox-description-line-height:1.3;
873
- }
874
-
875
- .tds-checkbox-group{
876
- --tds-checkbox-group-font-size:var(--t-font-size-md);
877
- --tds-checkbox-group-line-height:1.4;
878
- --tds-checkbox-group-gap:var(--t-spacing-1);
862
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
863
+ display:block;
864
+ flex:1;
865
+ overflow:hidden;
866
+ text-overflow:ellipsis;
867
+ text-align:left;
868
+ white-space:nowrap;
869
+ }
879
870
 
880
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
881
- --tds-checkbox-group-description-line-height:1.35;
882
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
883
- --tds-checkbox-group-description-invalid-icon-display:none;
884
- display:flex;
885
- flex-direction:column;
886
- gap:0;
887
- padding:0;
888
- margin:0;
871
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
872
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
873
+ color:var(--t-text-color-headline);
874
+ text-decoration:none;
875
+ }
889
876
 
890
- font-size:var(--tds-checkbox-group-font-size);
891
- line-height:var(--tds-checkbox-group-line-height);
892
- border:0;
893
- }
877
+ :is(.tds-sidenav-item :is(a,button)):active{
878
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
879
+ }
894
880
 
895
- .tds-checkbox-group legend{
896
- float:left;
897
- padding:0;
898
- margin:0;
899
- }
881
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
882
+ overflow:hidden;
883
+ color:var(--tds-sidenav-item-icon-color);
884
+ }
900
885
 
901
- .tds-checkbox-group[aria-invalid="true"]{
902
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
903
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
904
- }
886
+ :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{
887
+ display:block;
888
+ width:var(--tds-sidenav-item-icon-size);
889
+ height:var(--tds-sidenav-item-icon-size);
890
+ }
905
891
 
906
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
907
- margin-left:.25ch;
908
- color:var(--t-text-color-status-error);
909
- content:"*";
892
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
893
+ --tds-sidenav-indent:19px;
910
894
  }
911
895
 
912
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
913
- content:none;
896
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
897
+ visibility:visible;
898
+ block-size:auto;
899
+ opacity:1;
914
900
  }
915
901
 
916
- .tds-checkbox-group-fields{
917
- display:flex;
918
- flex-direction:column;
919
- gap:var(--tds-checkbox-group-gap);
920
- align-items:flex-start;
921
- margin-top:var(--t-spacing-1);
922
- }
902
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
903
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
904
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
923
905
 
924
- .tds-checkbox-group-description{
925
- display:flex;
926
- gap:var(--t-spacing-half);
927
- align-items:flex-start;
928
- margin:var(--t-spacing-fourth) 0 0;
929
- font-size:var(--tds-checkbox-group-description-font-size);
930
- line-height:var(--tds-checkbox-group-description-line-height);
931
- color:var(--tds-checkbox-group-description-color);
932
- cursor:text;
933
- }
906
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
907
+ font-weight:var(--t-font-weight-semibold);
908
+ }
934
909
 
935
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
936
- display:var(--tds-checkbox-group-description-invalid-icon-display);
937
- flex-shrink:0;
938
- margin-top:calc(.5lh - .5em);
939
- line-height:var(--tds-checkbox-group-description-line-height);
910
+ .tds-sidenav-item:has(.tds-sidenav-section){
911
+ display:flex;
912
+ flex-direction:column;
913
+ gap:var(--t-spacing-half);
940
914
  }
941
915
 
942
- .tds-checkbox-group--sm{
943
- --tds-checkbox-group-line-height:1.35;
944
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
945
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
946
- --tds-checkbox-group-description-line-height:1.3;
947
- }
916
+ .tds-sidenav-item .tds-sidenav-section-list{
917
+ --tds-sidenav-item-depth:1;
918
+ gap:0;
919
+ }
948
920
 
949
- .tds-button-group{
950
- display:inline-flex;
951
- }
952
- .tds-button-group > .tds-btn{
953
- --tds-button-group-item-z-index:1;
921
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
922
+ visibility:hidden;
923
+ block-size:0;
924
+ overflow-y:clip;
925
+ opacity:0;
926
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
927
+ }
954
928
 
955
- position:relative;
956
- z-index:var(--tds-button-group-item-z-index);
957
- border-radius:0;
958
- }
959
- :is(.tds-button-group > .tds-btn):not(:first-child){
960
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
929
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
930
+ --tds-sidenav-item-depth:2;
961
931
  }
962
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
932
+
933
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
934
+ min-height:var(--t-element-size-2xl);
935
+ padding-block:9px;
936
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
937
+ line-height:1;
938
+ background-color:transparent;
939
+ }
940
+
941
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
963
942
  position:absolute;
964
- inset-block:calc(var(--tds-btn-border-width) * -1);
965
- width:var(--tds-btn-border-width);
966
- pointer-events:none;
943
+ top:0;
944
+ bottom:0;
945
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
946
+ width:2px;
967
947
  content:"";
968
- background-color:var(--t-border-color-white);
948
+ background-color:var(--tds-sidenav-item-nested-border-color);
949
+ transition:var(--tds-sidenav-item-transition);
969
950
  }
970
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
971
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
951
+
952
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
953
+ position:absolute;
954
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
955
+ z-index:-1;
956
+ height:100%;
957
+ content:"";
958
+ background-color:var(--tds-sidenav-item-nested-background);
959
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
960
+ transition:var(--tds-sidenav-item-transition);
972
961
  }
973
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
974
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
962
+
963
+ :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)){
964
+ display:block;
965
+ text-align:left;
966
+ white-space:normal;
975
967
  }
976
- :is(.tds-button-group > .tds-btn):hover{
977
- --tds-button-group-item-z-index:2;
978
- }
979
- :is(.tds-button-group > .tds-btn):focus-visible{
980
- --tds-button-group-item-z-index:5;
981
- }
982
- .tds-button-group > .tds-btn:first-child{
983
- border-start-start-radius:var(--tds-btn-border-radius);
984
- border-end-start-radius:var(--tds-btn-border-radius);
985
- }
986
- .tds-button-group > .tds-btn:last-child{
987
- border-start-end-radius:var(--tds-btn-border-radius);
988
- border-end-end-radius:var(--tds-btn-border-radius);
989
- }
990
968
 
991
- .tds-modal-overlay{
992
- --tds-modal-min-margin-block:var(--t-spacing-3);
969
+ :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{
970
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
971
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
972
+ }
993
973
 
994
- position:fixed;
995
- inset:0;
996
- z-index:1000;
997
- display:grid;
998
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
999
- justify-items:center;
1000
- overflow-y:auto;
1001
- background:hsl(0 0% 0% / 40%);
1002
- }
974
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
975
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
976
+ }
1003
977
 
1004
- .tds-modal-overlay[data-entering]{
1005
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1006
- }
978
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
979
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
980
+ font-weight:var(--t-font-weight-medium);
981
+ }
1007
982
 
1008
- .tds-modal-overlay[data-exiting]{
1009
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1010
- }
1011
-
1012
- @keyframes tds-modal-overlay-fade{
1013
- from{
1014
- opacity:0;
1015
- }
1016
- }
1017
-
1018
- .tds-modal-frame{
1019
- --tds-modal-width:600px;
1020
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
983
+ .tds-sidenav-responsive-header{
1021
984
  display:flex;
1022
-
1023
- grid-row:2;
1024
- justify-content:center;
1025
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
985
+ gap:var(--t-spacing-2);
986
+ align-items:center;
987
+ width:100%;
1026
988
  }
1027
989
 
1028
- .tds-modal-frame[data-entering]{
1029
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
990
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
991
+ order:0;
1030
992
  }
1031
993
 
1032
- .tds-modal-frame[data-exiting]{
1033
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
994
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
995
+ flex:1;
996
+ order:1;
997
+ margin:0;
998
+ font-size:var(--t-font-size-lg);
999
+ font-weight:var(--t-font-weight-medium);
1000
+ color:var(--t-text-color-headline);
1034
1001
  }
1035
1002
 
1036
- .tds-modal-frame--sm{
1037
- --tds-modal-width:400px;
1038
- }
1039
-
1040
- .tds-modal-frame--lg{
1041
- --tds-modal-width:800px;
1042
- }
1043
-
1044
- .tds-modal-frame--xl{
1045
- --tds-modal-width:1000px;
1046
- }
1047
-
1048
- @keyframes tds-modal-zoom{
1049
- from{
1050
- opacity:0;
1051
- scale:.96;
1003
+ @media (max-width: 719px){
1004
+ .tds-sidenav-collapse{
1005
+ z-index:10001;
1006
+ display:none;
1007
+ max-width:min(448px, calc(100vw - 48px));
1008
+ padding:0;
1009
+ margin:12px 0;
1010
+ position-area:bottom span-right;
1011
+ overflow:hidden;
1012
+ outline:0;
1013
+ background:var(--t-surface-color-card);
1014
+ border:0;
1015
+ border-radius:6px;
1016
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1017
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1018
+ transform:var(--tds-sidenav-collapse-open-transform);
1019
+ transition:var(--tds-sidenav-collapse-transition-enter);
1020
+ will-change:transform;
1052
1021
  }
1053
- }
1054
1022
 
1055
- @media (prefers-reduced-motion: reduce){
1056
- .tds-modal-overlay[data-entering],
1057
- .tds-modal-overlay[data-exiting],
1058
- .tds-modal-frame[data-entering],
1059
- .tds-modal-frame[data-exiting]{
1060
- animation:none;
1023
+ .tds-sidenav-scroll-container{
1024
+ --webkit-overflow-scrolling:touch;
1025
+ display:block;
1026
+ width:100%;
1027
+ height:-moz-fit-content;
1028
+ height:fit-content;
1029
+ padding:var(--t-spacing-2);
1030
+ overflow-y:auto;
1061
1031
  }
1062
- }
1063
-
1064
- .tds-modal{
1065
- display:flex;
1066
- flex-direction:column;
1067
- width:100%;
1068
- padding-block-start:var(--t-spacing-3);
1069
- padding-inline:0;
1070
- background:var(--t-surface-color-card);
1071
-
1072
- border:0;
1073
- border-radius:var(--t-border-radius-lg);
1074
- box-shadow:0 4px 18px 0 #0003;
1075
- }
1076
1032
 
1077
- .tds-modal:focus{
1078
- outline:none;
1033
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1034
+ display:none;
1079
1035
  }
1036
+ @supports selector(:popover-open){
1037
+ .tds-sidenav-collapse:popover-open{
1038
+ display:flex;
1039
+ }
1080
1040
 
1081
- .tds-modal-header{
1082
- display:grid;
1083
- grid-template-columns:1fr auto;
1084
- -moz-column-gap:var(--t-spacing-2);
1085
- column-gap:var(--t-spacing-2);
1086
- padding-block:0;
1087
- padding-inline:var(--t-spacing-4);
1088
- }
1089
-
1090
- .tds-modal-title{
1091
- grid-row:1;
1092
- grid-column:1;
1093
- margin:0;
1094
- font-size:var(--t-font-size-2xl);
1095
- font-weight:var(--t-font-weight-medium);
1096
- line-height:140%;
1097
- color:var(--t-text-color-headline);
1098
- }
1099
-
1100
- .tds-modal-subtitle{
1101
- grid-row:2;
1102
- grid-column:1;
1103
- margin:0;
1104
- font-size:var(--t-font-size-md);
1105
- font-weight:var(--t-font-weight-medium);
1106
- line-height:140%;
1107
- color:var(--t-text-color-secondary);
1108
- }
1109
-
1110
- .tds-modal-close{
1111
- grid-row:1;
1112
- grid-column:2;
1113
- align-self:center;
1114
- color:var(--t-icon-color-dim);
1115
- }
1041
+ .tds-sidenav-collapse:not(:popover-open){
1042
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1043
+ transition:var(--tds-sidenav-collapse-transition-exit);
1044
+ }
1116
1045
 
1117
- .tds-modal-body{
1118
- padding-block:var(--t-spacing-3);
1119
- padding-inline:var(--t-spacing-4);
1120
- }
1046
+ @starting-style{
1047
+ .tds-sidenav-collapse:popover-open{
1048
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1049
+ transform:var(--tds-sidenav-collapse-closed-transform);
1050
+ }
1051
+ }
1052
+ }
1053
+ @supports not selector(:popover-open){
1054
+ .tds-sidenav-collapse.\:popover-open{
1055
+ display:flex;
1056
+ }
1121
1057
 
1122
- .tds-modal-body--full-width{
1123
- padding-inline:0;
1058
+ .tds-sidenav-collapse:not(.\:popover-open){
1059
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1060
+ transition:var(--tds-sidenav-collapse-transition-exit);
1061
+ }
1062
+ }
1124
1063
  }
1125
1064
 
1126
- .tds-modal-footer{
1127
- display:flex;
1128
- gap:var(--t-spacing-2);
1129
- align-items:center;
1130
- justify-content:flex-end;
1131
- padding-block:var(--t-spacing-3);
1132
- padding-inline:var(--t-spacing-4);
1133
- border-top:1px solid var(--t-border-color);
1065
+ @media (min-width: 720px){
1066
+ .tds-sidenav-responsive-header{
1067
+ display:none;
1068
+ }
1134
1069
  }
1135
1070
 
1136
- .tds-modal-footer > [slot="start"]{
1137
- margin-inline-end:auto;
1138
- }
1071
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1072
+ display:none;
1073
+ }
1139
1074
 
1140
- @media (min-width: 720px){
1141
- .tds-modal-overlay{
1142
- --tds-modal-min-margin-block:0;
1143
- }
1075
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1076
+ display:block;
1077
+ }
1144
1078
 
1145
- .tds-modal-footer{
1146
- position:sticky;
1147
- bottom:0;
1148
- background:var(--t-surface-color-card);
1149
- border-end-start-radius:var(--t-border-radius-lg);
1150
- border-end-end-radius:var(--t-border-radius-lg);
1151
- }
1152
- }
1079
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1080
+ display:flex;
1081
+ flex-direction:column;
1082
+ }
1153
1083
 
1154
1084
  @layer t-critical{
1155
1085
  tds-page-header:not(.hydrated){
@@ -1356,203 +1286,530 @@
1356
1286
  }
1357
1287
  }
1358
1288
 
1359
- .tds-page-header__title-bar{
1289
+ .tds-page-header__title-bar{
1290
+ display:flex;
1291
+ flex-direction:column;
1292
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1293
+ align-items:flex-start;
1294
+ justify-content:space-between;
1295
+ padding:0 var(--tds-page-header-padding-x);
1296
+ }
1297
+
1298
+ .tds-page-header--profile > .tds-page-header__title-bar{
1299
+ align-items:center;
1300
+ }
1301
+
1302
+ .tds-page-header__primary{
1303
+ width:100%;
1304
+ }
1305
+
1306
+ .tds-page-header__primary h1{
1307
+ margin:0;
1308
+ font-size:var(--tds-page-header-headline-font-size);
1309
+ font-weight:var(--t-font-weight-normal);
1310
+ line-height:32px;
1311
+ color:var(--tds-page-header-headline-color);
1312
+ overflow-wrap:break-word;
1313
+ }
1314
+
1315
+ @media (min-width: 960px){
1316
+ .tds-page-header__primary{
1317
+ flex:1 1 max-content;
1318
+ width:auto;
1319
+ min-width:0;
1320
+ max-width:100%;
1321
+ }
1322
+
1323
+ .tds-page-header__title-bar,
1324
+ .tds-page-header--profile .tds-page-header__title-bar{
1325
+ flex-flow:row nowrap;
1326
+ row-gap:12px;
1327
+ align-items:flex-start;
1328
+ }
1329
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1330
+ width:auto;
1331
+ }
1332
+
1333
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1334
+ justify-content:flex-end;
1335
+ }
1336
+ }
1337
+
1338
+ .tds-page-header-phone,
1339
+ .tds-page-header-email{
1340
+ color:var(--tds-page-header-color);
1341
+ white-space:nowrap;
1342
+ }
1343
+ .tds-page-header-email{
1344
+ max-width:100%;
1345
+ overflow:hidden;
1346
+ text-overflow:ellipsis;
1347
+ }
1348
+
1349
+ @keyframes indicator-pulse{
1350
+ 0%{
1351
+ opacity:.3;
1352
+ transform:scale(.9);
1353
+ }
1354
+
1355
+ 100%{
1356
+ opacity:0;
1357
+ transform:scale(1.75);
1358
+ }
1359
+ }
1360
+
1361
+ .tds-checkbox{
1362
+ --tds-checkbox-font-size:var(--t-font-size-md);
1363
+ --tds-checkbox-cursor:pointer;
1364
+ --tds-checkbox-line-height:1.4;
1365
+ --tds-checkbox-transition-property:background-color, border-color;
1366
+
1367
+ --tds-checkbox-input-size:var(--t-element-size-md);
1368
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1369
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1370
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1371
+
1372
+ --tds-checkbox-input-icon:none;
1373
+ --tds-checkbox-input-icon-visibility:hidden;
1374
+ --tds-checkbox-input-icon-opacity:0;
1375
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1376
+
1377
+ --tds-checkbox-label-color:var(--t-form-color);
1378
+
1379
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1380
+ --tds-checkbox-description-line-height:1.35;
1381
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1382
+ --tds-checkbox-description-invalid-icon-display:none;
1383
+
1384
+ position:relative;
1385
+ display:inline-grid;
1386
+ grid-template-columns:auto;
1387
+ grid-auto-columns:1fr;
1388
+ gap:var(--t-spacing-fourth) 0;
1389
+ line-height:var(--tds-checkbox-line-height);
1390
+ -webkit-user-select:none;
1391
+ -moz-user-select:none;
1392
+ user-select:none;
1393
+ }
1394
+
1395
+ .tds-checkbox label{
1396
+ grid-area:1 / 2;
1397
+ padding-inline-start:var(--t-spacing-1);
1398
+ font-size:var(--tds-checkbox-font-size);
1399
+ font-weight:var(--t-font-weight-normal);
1400
+ color:var(--tds-checkbox-label-color);
1401
+ cursor:var(--tds-checkbox-cursor);
1402
+ }
1403
+
1404
+ .tds-checkbox tds-indeterminate{
1405
+ display:flex;
1406
+ }
1407
+
1408
+ .tds-checkbox input[type="checkbox"]{
1409
+ position:relative;
1410
+ width:1em;
1411
+ height:1em;
1412
+ margin:calc((1lh - 1em) / 2) 0 0;
1413
+ font-size:var(--tds-checkbox-font-size);
1414
+ line-height:inherit;
1415
+ -webkit-appearance:none;
1416
+ -moz-appearance:none;
1417
+ appearance:none;
1418
+ cursor:var(--tds-checkbox-cursor);
1419
+ background-color:var(--tds-checkbox-input-background-color);
1420
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1421
+ border-radius:var(--tds-checkbox-input-border-radius);
1422
+ transition-timing-function:var(--t-ease-in-out);
1423
+ transition-duration:var(--t-duration-200);
1424
+ transition-property:var(--tds-checkbox-transition-property);
1425
+ }
1426
+
1427
+ :is(.tds-checkbox input[type="checkbox"])::before{
1428
+ position:absolute;
1429
+ top:50%;
1430
+ left:50%;
1431
+ visibility:var(--tds-checkbox-input-icon-visibility);
1432
+ width:100%;
1433
+ height:100%;
1434
+ content:"";
1435
+ background-color:var(--tds-checkbox-input-icon-fill);
1436
+ border-radius:var(--tds-checkbox-input-border-radius);
1437
+ opacity:var(--tds-checkbox-input-icon-opacity);
1438
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1439
+ mask-image:var(--tds-checkbox-input-icon);
1440
+ -webkit-mask-repeat:no-repeat;
1441
+ mask-repeat:no-repeat;
1442
+ -webkit-mask-size:contain;
1443
+ mask-size:contain;
1444
+ transform:translate(-50%, -50%);
1445
+ }
1446
+
1447
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1448
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1449
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1450
+ }
1451
+
1452
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1453
+ outline:var(--t-focus-ring-outline);
1454
+ outline-offset:var(--t-focus-ring-offset);
1455
+ }
1456
+
1457
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1458
+ pointer-events:none;
1459
+ }
1460
+
1461
+ @media (prefers-reduced-motion: reduce){
1462
+
1463
+ .tds-checkbox input[type="checkbox"]{
1464
+ --tds-checkbox-transition-property:none;
1465
+ }
1466
+ }
1467
+
1468
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1469
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1470
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1471
+ --tds-checkbox-input-icon-visibility:visible;
1472
+ --tds-checkbox-input-icon-opacity:1;
1473
+ }
1474
+
1475
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1476
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1477
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1478
+ }
1479
+
1480
+ .tds-checkbox:has(input:checked){
1481
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1482
+ }
1483
+
1484
+ .tds-checkbox:has(input:indeterminate){
1485
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1486
+ }
1487
+
1488
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1489
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1490
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1491
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1492
+ }
1493
+
1494
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1495
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1496
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1497
+ }
1498
+
1499
+ :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{
1500
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1501
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1502
+ }
1503
+
1504
+ :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){
1505
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1506
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1507
+ }
1508
+
1509
+ .tds-checkbox:has(input:required) label::after{
1510
+ margin-left:.25ch;
1511
+ color:var(--t-text-color-status-error);
1512
+ content:"*";
1513
+ }
1514
+
1515
+ .tds-checkbox:has(input:disabled){
1516
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1517
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1518
+
1519
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1520
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1521
+ --tds-checkbox-cursor:not-allowed;
1522
+ }
1523
+
1524
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1525
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1526
+ }
1527
+
1528
+ .tds-checkbox-description{
1529
+ display:flex;
1530
+ grid-area:2 / 2;
1531
+ gap:var(--t-spacing-half);
1532
+ align-items:flex-start;
1533
+ padding-inline-start:var(--t-spacing-1);
1534
+ margin:0;
1535
+ font-size:var(--tds-checkbox-description-font-size);
1536
+ line-height:var(--tds-checkbox-description-line-height);
1537
+ color:var(--tds-checkbox-description-color);
1538
+ cursor:text;
1539
+ }
1540
+
1541
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1542
+ display:var(--tds-checkbox-description-invalid-icon-display);
1543
+ flex-shrink:0;
1544
+ margin-top:calc(.5lh - .5em);
1545
+ line-height:var(--tds-checkbox-description-line-height);
1546
+ }
1547
+
1548
+ .tds-checkbox--sm{
1549
+ --tds-checkbox-line-height:1.35;
1550
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1551
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1552
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1553
+ --tds-checkbox-description-line-height:1.3;
1554
+ }
1555
+
1556
+ .tds-checkbox-group{
1557
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
+ --tds-checkbox-group-line-height:1.4;
1559
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1560
+
1561
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
+ --tds-checkbox-group-description-line-height:1.35;
1563
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
+ --tds-checkbox-group-description-invalid-icon-display:none;
1565
+ display:flex;
1566
+ flex-direction:column;
1567
+ gap:0;
1568
+ padding:0;
1569
+ margin:0;
1570
+
1571
+ font-size:var(--tds-checkbox-group-font-size);
1572
+ line-height:var(--tds-checkbox-group-line-height);
1573
+ border:0;
1574
+ }
1575
+
1576
+ .tds-checkbox-group legend{
1577
+ float:left;
1578
+ padding:0;
1579
+ margin:0;
1580
+ }
1581
+
1582
+ .tds-checkbox-group[aria-invalid="true"]{
1583
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1585
+ }
1586
+
1587
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1588
+ margin-left:.25ch;
1589
+ color:var(--t-text-color-status-error);
1590
+ content:"*";
1591
+ }
1592
+
1593
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
+ content:none;
1595
+ }
1596
+
1597
+ .tds-checkbox-group-fields{
1598
+ display:flex;
1599
+ flex-direction:column;
1600
+ gap:var(--tds-checkbox-group-gap);
1601
+ align-items:flex-start;
1602
+ margin-top:var(--t-spacing-1);
1603
+ }
1604
+
1605
+ .tds-checkbox-group-description{
1360
1606
  display:flex;
1361
- flex-direction:column;
1362
- gap:var(--t-spacing-2) var(--t-spacing-1);
1607
+ gap:var(--t-spacing-half);
1363
1608
  align-items:flex-start;
1364
- justify-content:space-between;
1365
- padding:0 var(--tds-page-header-padding-x);
1609
+ margin:var(--t-spacing-fourth) 0 0;
1610
+ font-size:var(--tds-checkbox-group-description-font-size);
1611
+ line-height:var(--tds-checkbox-group-description-line-height);
1612
+ color:var(--tds-checkbox-group-description-color);
1613
+ cursor:text;
1366
1614
  }
1367
1615
 
1368
- .tds-page-header--profile > .tds-page-header__title-bar{
1369
- align-items:center;
1616
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1618
+ flex-shrink:0;
1619
+ margin-top:calc(.5lh - .5em);
1620
+ line-height:var(--tds-checkbox-group-description-line-height);
1370
1621
  }
1371
1622
 
1372
- .tds-page-header__primary{
1373
- width:100%;
1623
+ .tds-checkbox-group--sm{
1624
+ --tds-checkbox-group-line-height:1.35;
1625
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
+ --tds-checkbox-group-description-line-height:1.3;
1374
1628
  }
1375
1629
 
1376
- .tds-page-header__primary h1{
1377
- margin:0;
1378
- font-size:var(--tds-page-header-headline-font-size);
1379
- font-weight:var(--t-font-weight-normal);
1380
- line-height:32px;
1381
- color:var(--tds-page-header-headline-color);
1382
- overflow-wrap:break-word;
1383
- }
1384
-
1385
- @media (min-width: 960px){
1386
- .tds-page-header__primary{
1387
- flex:1 1 max-content;
1388
- width:auto;
1389
- min-width:0;
1390
- max-width:100%;
1391
- }
1392
1630
 
1393
- .tds-page-header__title-bar,
1394
- .tds-page-header--profile .tds-page-header__title-bar{
1395
- flex-flow:row nowrap;
1396
- row-gap:12px;
1397
- align-items:flex-start;
1398
- }
1399
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1400
- width:auto;
1631
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1632
+ -webkit-appearance:none;
1633
+ appearance:none;
1401
1634
  }
1402
1635
 
1403
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1404
- justify-content:flex-end;
1636
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1637
+ inline-size:1em;
1638
+ block-size:2em;
1405
1639
  }
1406
- }
1640
+ @supports (field-sizing: content){
1641
+ .tds-input--auto-width{
1642
+ inline-size:-moz-fit-content;
1643
+ inline-size:fit-content;
1644
+ min-inline-size:min(100%, 122px);
1645
+ }
1407
1646
 
1408
- .tds-page-header-phone,
1409
- .tds-page-header-email{
1410
- color:var(--tds-page-header-color);
1411
- white-space:nowrap;
1647
+ .tds-input--auto-width input{
1648
+ field-sizing:content;
1649
+ inline-size:auto;
1650
+ }
1412
1651
  }
1413
- .tds-page-header-email{
1414
- max-width:100%;
1415
- overflow:hidden;
1416
- text-overflow:ellipsis;
1652
+
1653
+ .tds-modal-overlay{
1654
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1655
+
1656
+ position:fixed;
1657
+ inset:0;
1658
+ z-index:1000;
1659
+ display:grid;
1660
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1661
+ justify-items:center;
1662
+ overflow-y:auto;
1663
+ background:hsl(0 0% 0% / 40%);
1417
1664
  }
1418
1665
 
1419
- @keyframes indicator-pulse{
1420
- 0%{
1421
- opacity:.3;
1422
- transform:scale(.9);
1666
+ .tds-modal-overlay[data-entering]{
1667
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1423
1668
  }
1424
1669
 
1425
- 100%{
1426
- opacity:0;
1427
- transform:scale(1.75);
1670
+ .tds-modal-overlay[data-exiting]{
1671
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1428
1672
  }
1429
- }
1430
1673
 
1431
- .tds-input:has(textarea){
1432
- --tds-input-padding-block:6px;
1433
- --tds-input-resizer-size:var(--t-element-size-sm);
1434
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1674
+ @keyframes tds-modal-overlay-fade{
1675
+ from{
1676
+ opacity:0;
1677
+ }
1435
1678
  }
1436
1679
 
1437
- @supports (x: attr(x type(*))){
1680
+ .tds-modal-frame{
1681
+ --tds-modal-width:600px;
1682
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1683
+ display:flex;
1438
1684
 
1439
- .tds-input textarea{
1440
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1685
+ grid-row:2;
1686
+ justify-content:center;
1687
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1441
1688
  }
1689
+
1690
+ .tds-modal-frame[data-entering]{
1691
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1442
1692
  }
1443
1693
 
1444
- .tds-input.tds-textarea--resize-vertical textarea{
1445
- resize:vertical;
1446
- }
1694
+ .tds-modal-frame[data-exiting]{
1695
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1696
+ }
1447
1697
 
1448
- .tds-input.tds-textarea--resize-none textarea{
1449
- resize:none;
1450
- }
1698
+ .tds-modal-frame--sm{
1699
+ --tds-modal-width:400px;
1700
+ }
1451
1701
 
1452
- .tds-input.tds-textarea--resize-auto textarea{
1453
- resize:vertical;
1454
- }
1702
+ .tds-modal-frame--lg{
1703
+ --tds-modal-width:800px;
1704
+ }
1455
1705
 
1456
- @supports (field-sizing: content){
1457
- .tds-input.tds-textarea--resize-auto textarea{
1458
- field-sizing:content;
1459
- resize:none;
1460
- }
1461
- }
1706
+ .tds-modal-frame--xl{
1707
+ --tds-modal-width:1000px;
1708
+ }
1462
1709
 
1463
- .tds-input textarea{
1464
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1465
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1466
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1467
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1468
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1469
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1470
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1471
- --tds-input-scrollbar-thumb-border-radius:999px;
1472
- --tds-input-scrollbar-thumb-border-width:3px;
1473
- --tds-input-scrollbar-track-margin-block:.125rem;
1474
- scrollbar-color:initial;
1475
- transition-timing-function:var(--t-ease-in-out);
1476
- transition-duration:var(--t-duration-200);
1477
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1710
+ @keyframes tds-modal-zoom{
1711
+ from{
1712
+ opacity:0;
1713
+ scale:.96;
1714
+ }
1478
1715
  }
1479
1716
 
1480
- @media (pointer: fine){
1481
- :is(.tds-input textarea)::-webkit-scrollbar{
1482
- width:12px;
1483
- height:12px;
1484
- cursor:default;
1485
- }
1717
+ @media (prefers-reduced-motion: reduce){
1718
+ .tds-modal-overlay[data-entering],
1719
+ .tds-modal-overlay[data-exiting],
1720
+ .tds-modal-frame[data-entering],
1721
+ .tds-modal-frame[data-exiting]{
1722
+ animation:none;
1723
+ }
1724
+ }
1486
1725
 
1487
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1488
- cursor:default;
1489
- background:var(--tds-input-scrollbar-thumb-color);
1490
- background-clip:content-box;
1491
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1492
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1493
- }
1726
+ .tds-modal{
1727
+ display:flex;
1728
+ flex-direction:column;
1729
+ width:100%;
1730
+ padding-block-start:var(--t-spacing-3);
1731
+ padding-inline:0;
1732
+ background:var(--t-surface-color-card);
1494
1733
 
1495
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1496
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1497
- }
1734
+ border:0;
1735
+ border-radius:var(--t-border-radius-lg);
1736
+ box-shadow:0 4px 18px 0 #0003;
1737
+ }
1498
1738
 
1499
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1500
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1501
- }
1739
+ .tds-modal:focus{
1740
+ outline:none;
1741
+ }
1502
1742
 
1503
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1504
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1505
- }
1743
+ .tds-modal-header{
1744
+ display:grid;
1745
+ grid-template-columns:1fr auto;
1746
+ -moz-column-gap:var(--t-spacing-2);
1747
+ column-gap:var(--t-spacing-2);
1748
+ padding-block:0;
1749
+ padding-inline:var(--t-spacing-4);
1750
+ }
1506
1751
 
1507
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1508
- background:var(--tds-input-scrollbar-surface-color);
1509
- }
1752
+ .tds-modal-title{
1753
+ grid-row:1;
1754
+ grid-column:1;
1755
+ margin:0;
1756
+ font-size:var(--t-font-size-2xl);
1757
+ font-weight:var(--t-font-weight-medium);
1758
+ line-height:140%;
1759
+ color:var(--t-text-color-headline);
1760
+ }
1510
1761
 
1511
- :is(.tds-input textarea)::-webkit-resizer{
1512
- background:var(--tds-input-resizer-icon) no-repeat;
1513
- background-position:right bottom;
1514
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1515
- }
1762
+ .tds-modal-subtitle{
1763
+ grid-row:2;
1764
+ grid-column:1;
1765
+ margin:0;
1766
+ font-size:var(--t-font-size-md);
1767
+ font-weight:var(--t-font-weight-medium);
1768
+ line-height:140%;
1769
+ color:var(--t-text-color-secondary);
1770
+ }
1516
1771
 
1517
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1518
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1519
- cursor:default;
1520
- }
1772
+ .tds-modal-close{
1773
+ grid-row:1;
1774
+ grid-column:2;
1775
+ align-self:center;
1776
+ color:var(--t-icon-color-dim);
1777
+ }
1521
1778
 
1522
- @supports (-moz-appearance: none){
1523
- :is(.tds-input textarea){
1524
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1525
- scrollbar-width:thin;
1526
- }
1779
+ .tds-modal-body{
1780
+ padding-block:var(--t-spacing-3);
1781
+ padding-inline:var(--t-spacing-4);
1782
+ }
1527
1783
 
1528
- @media (hover){
1529
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1530
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1531
- }
1532
- }
1533
- }
1534
- }
1784
+ .tds-modal-body--full-width{
1785
+ padding-inline:0;
1786
+ }
1535
1787
 
1788
+ .tds-modal-footer{
1789
+ display:flex;
1790
+ gap:var(--t-spacing-2);
1791
+ align-items:center;
1792
+ justify-content:flex-end;
1793
+ padding-block:var(--t-spacing-3);
1794
+ padding-inline:var(--t-spacing-4);
1795
+ border-top:1px solid var(--t-border-color);
1796
+ }
1536
1797
 
1537
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1538
- -webkit-appearance:none;
1539
- appearance:none;
1540
- }
1798
+ .tds-modal-footer > [slot="start"]{
1799
+ margin-inline-end:auto;
1800
+ }
1541
1801
 
1542
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1543
- inline-size:1em;
1544
- block-size:2em;
1545
- }
1546
- @supports (field-sizing: content){
1547
- .tds-input--auto-width{
1548
- inline-size:-moz-fit-content;
1549
- inline-size:fit-content;
1550
- min-inline-size:min(100%, 122px);
1802
+ @media (min-width: 720px){
1803
+ .tds-modal-overlay{
1804
+ --tds-modal-min-margin-block:0;
1551
1805
  }
1552
1806
 
1553
- .tds-input--auto-width input{
1554
- field-sizing:content;
1555
- inline-size:auto;
1807
+ .tds-modal-footer{
1808
+ position:sticky;
1809
+ bottom:0;
1810
+ background:var(--t-surface-color-card);
1811
+ border-end-start-radius:var(--t-border-radius-lg);
1812
+ border-end-end-radius:var(--t-border-radius-lg);
1556
1813
  }
1557
1814
  }
1558
1815
 
@@ -1884,395 +2141,138 @@
1884
2141
  .tds-toggle-switch-track{
1885
2142
  --tds-toggle-switch-track-transition:none;
1886
2143
  --tds-toggle-switch-thumb-transition:none;
1887
- }
1888
- }
1889
-
1890
- .tds-toggle-switch-description{
1891
- display:flex;
1892
- grid-area:2 / 2;
1893
- align-items:flex-start;
1894
- padding-inline-start:var(--t-spacing-1);
1895
- margin:0;
1896
- font-size:var(--tds-toggle-switch-description-font-size);
1897
- line-height:var(--tds-toggle-switch-description-line-height);
1898
- color:var(--tds-toggle-switch-description-color);
1899
- cursor:text;
1900
- }
1901
-
1902
- .tds-toggle-switch--sm{
1903
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1904
- --tds-toggle-switch-line-height:1.35;
1905
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1906
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1907
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1908
- --tds-toggle-switch-description-line-height:1.3;
1909
- }
1910
-
1911
- .tds-toggle-switch--hide-label{
1912
- --tds-toggle-switch-display:inline-flex;
1913
- }
1914
-
1915
-
1916
- @media (prefers-reduced-motion: no-preference){
1917
-
1918
- :root{
1919
- interpolate-size:allow-keywords;
1920
- }
1921
- }
1922
-
1923
- @layer tds-component{
1924
- tds-sidenav,
1925
- .tds-sidenav{
1926
- --tds-sidenav-indent:12px;
1927
- --tds-sidenav-item-depth:0;
1928
-
1929
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1930
-
1931
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1932
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1933
- --tds-sidenav-collapse-closed-opacity:0;
1934
- --tds-sidenav-collapse-open-opacity:1;
1935
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1936
- --tds-sidenav-collapse-open-transform:translateY(0);
1937
-
1938
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1939
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1940
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1941
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1942
-
1943
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1944
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1945
- --tds-sidenav-item-nested-background-selected:transparent;
1946
-
1947
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1948
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1949
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1950
-
1951
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1952
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1953
- }
1954
-
1955
- @media (prefers-reduced-motion: reduce){
1956
- tds-sidenav,
1957
- .tds-sidenav{
1958
- --tds-sidenav-collapse-transition-enter:none;
1959
- --tds-sidenav-collapse-transition-exit:none;
1960
- --tds-sidenav-collapse-closed-transform:none;
1961
- --tds-sidenav-collapse-open-transform:none;
1962
- }
1963
- }
1964
-
1965
- .tds-sidenav--theme-gray{
1966
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1967
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1968
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1969
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1970
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1971
- }
1972
- }
1973
-
1974
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1975
- display:flex;
1976
- }
1977
-
1978
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1979
- flex-direction:column;
1980
- gap:var(--t-spacing-half);
1981
- width:100%;
1982
- }
1983
-
1984
- .tds-sidenav-section-list{
1985
- width:100%;
1986
- padding:0;
1987
- margin:0;
1988
- list-style:none;
1989
- }
1990
-
1991
- .tds-sidenav-section-header{
1992
- display:flex;
1993
- align-items:baseline;
1994
- justify-content:space-between;
1995
- padding-top:var(--t-spacing-2);
1996
- }
1997
-
1998
- .tds-sidenav-section-header h2{
1999
- margin:0;
2000
- font-size:var(--t-font-size-sm);
2001
- font-weight:var(--t-font-weight-semibold);
2002
- line-height:1.35;
2003
- color:var(--t-text-color-secondary);
2004
- text-transform:uppercase;
2005
- }
2006
-
2007
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2008
- padding-top:0;
2009
- }
2010
-
2011
- .tds-sidenav-section-header [slot="label-actions"]{
2012
- display:flex;
2013
- gap:var(--t-spacing-half);
2014
- align-items:center;
2015
- }
2016
-
2017
- .tds-sidenav-section [slot="section-actions"]{
2018
- display:flex;
2019
- gap:12px;
2020
- align-items:center;
2021
- min-height:42px;
2022
- padding:var(--t-spacing-1) 0;
2023
- }
2024
-
2025
- .tds-sidenav-section-list,
2026
- .tds-sidenav-item{
2027
- width:100%;
2028
- padding:0;
2029
- margin:0;
2030
- }
2031
-
2032
- .tds-sidenav-item :is(a,button){
2033
- position:relative;
2034
- display:flex;
2035
- gap:12px;
2036
- align-items:center;
2037
- width:100%;
2038
- padding:12px;
2039
- overflow:hidden;
2040
- font-size:var(--t-font-size-sm);
2041
- line-height:18px;
2042
- color:var(--t-text-color-headline);
2043
- white-space:nowrap;
2044
- text-decoration:none;
2045
- -webkit-appearance:none;
2046
- -moz-appearance:none;
2047
- appearance:none;
2048
- cursor:pointer;
2049
- background-color:var(--tds-sidenav-item-background, transparent);
2050
- border:0;
2051
- border-radius:var(--t-border-radius);
2052
- transition:var(--tds-sidenav-item-transition);
2053
- }
2054
-
2055
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2056
- display:block;
2057
- flex:1;
2058
- overflow:hidden;
2059
- text-overflow:ellipsis;
2060
- text-align:left;
2061
- white-space:nowrap;
2062
- }
2063
-
2064
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2065
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2066
- color:var(--t-text-color-headline);
2067
- text-decoration:none;
2068
- }
2069
-
2070
- :is(.tds-sidenav-item :is(a,button)):active{
2071
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2072
- }
2073
-
2074
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2075
- overflow:hidden;
2076
- color:var(--tds-sidenav-item-icon-color);
2077
- }
2078
-
2079
- :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{
2080
- display:block;
2081
- width:var(--tds-sidenav-item-icon-size);
2082
- height:var(--tds-sidenav-item-icon-size);
2083
- }
2144
+ }
2145
+ }
2084
2146
 
2085
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2086
- --tds-sidenav-indent:19px;
2087
- }
2147
+ .tds-toggle-switch-description{
2148
+ display:flex;
2149
+ grid-area:2 / 2;
2150
+ align-items:flex-start;
2151
+ padding-inline-start:var(--t-spacing-1);
2152
+ margin:0;
2153
+ font-size:var(--tds-toggle-switch-description-font-size);
2154
+ line-height:var(--tds-toggle-switch-description-line-height);
2155
+ color:var(--tds-toggle-switch-description-color);
2156
+ cursor:text;
2157
+ }
2088
2158
 
2089
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2090
- visibility:visible;
2091
- block-size:auto;
2092
- opacity:1;
2093
- }
2159
+ .tds-toggle-switch--sm{
2160
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2161
+ --tds-toggle-switch-line-height:1.35;
2162
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2163
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2164
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2165
+ --tds-toggle-switch-description-line-height:1.3;
2166
+ }
2094
2167
 
2095
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2096
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2097
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2168
+ .tds-toggle-switch--hide-label{
2169
+ --tds-toggle-switch-display:inline-flex;
2170
+ }
2098
2171
 
2099
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2100
- font-weight:var(--t-font-weight-semibold);
2101
- }
2172
+ .tds-input:has(textarea){
2173
+ --tds-input-padding-block:6px;
2174
+ --tds-input-resizer-size:var(--t-element-size-sm);
2175
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2176
+ }
2102
2177
 
2103
- .tds-sidenav-item:has(.tds-sidenav-section){
2104
- display:flex;
2105
- flex-direction:column;
2106
- gap:var(--t-spacing-half);
2107
- }
2178
+ @supports (x: attr(x type(*))){
2108
2179
 
2109
- .tds-sidenav-item .tds-sidenav-section-list{
2110
- --tds-sidenav-item-depth:1;
2111
- gap:0;
2180
+ .tds-input textarea{
2181
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2182
+ }
2112
2183
  }
2113
2184
 
2114
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2115
- visibility:hidden;
2116
- block-size:0;
2117
- overflow-y:clip;
2118
- opacity:0;
2119
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2185
+ .tds-input.tds-textarea--resize-vertical textarea{
2186
+ resize:vertical;
2120
2187
  }
2121
2188
 
2122
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2123
- --tds-sidenav-item-depth:2;
2189
+ .tds-input.tds-textarea--resize-none textarea{
2190
+ resize:none;
2124
2191
  }
2125
2192
 
2126
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2127
- min-height:var(--t-element-size-2xl);
2128
- padding-block:9px;
2129
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2130
- line-height:1;
2131
- background-color:transparent;
2193
+ .tds-input.tds-textarea--resize-auto textarea{
2194
+ resize:vertical;
2132
2195
  }
2133
2196
 
2134
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2135
- position:absolute;
2136
- top:0;
2137
- bottom:0;
2138
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2139
- width:2px;
2140
- content:"";
2141
- background-color:var(--tds-sidenav-item-nested-border-color);
2142
- transition:var(--tds-sidenav-item-transition);
2143
- }
2144
-
2145
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2146
- position:absolute;
2147
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2148
- z-index:-1;
2149
- height:100%;
2150
- content:"";
2151
- background-color:var(--tds-sidenav-item-nested-background);
2152
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2153
- transition:var(--tds-sidenav-item-transition);
2154
- }
2155
-
2156
- :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)){
2157
- display:block;
2158
- text-align:left;
2159
- white-space:normal;
2160
- }
2161
-
2162
- :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{
2163
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2164
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2165
- }
2166
-
2167
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2168
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2197
+ @supports (field-sizing: content){
2198
+ .tds-input.tds-textarea--resize-auto textarea{
2199
+ field-sizing:content;
2200
+ resize:none;
2169
2201
  }
2170
-
2171
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2172
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2173
- font-weight:var(--t-font-weight-medium);
2174
2202
  }
2175
2203
 
2176
- .tds-sidenav-responsive-header{
2177
- display:flex;
2178
- gap:var(--t-spacing-2);
2179
- align-items:center;
2180
- width:100%;
2204
+ .tds-input textarea{
2205
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2206
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2207
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2208
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2209
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2210
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2211
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2212
+ --tds-input-scrollbar-thumb-border-radius:999px;
2213
+ --tds-input-scrollbar-thumb-border-width:3px;
2214
+ --tds-input-scrollbar-track-margin-block:.125rem;
2215
+ scrollbar-color:initial;
2216
+ transition-timing-function:var(--t-ease-in-out);
2217
+ transition-duration:var(--t-duration-200);
2218
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2181
2219
  }
2182
2220
 
2183
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2184
- order:0;
2185
- }
2186
-
2187
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2188
- flex:1;
2189
- order:1;
2190
- margin:0;
2191
- font-size:var(--t-font-size-lg);
2192
- font-weight:var(--t-font-weight-medium);
2193
- color:var(--t-text-color-headline);
2194
- }
2195
-
2196
- @media (max-width: 719px){
2197
- .tds-sidenav-collapse{
2198
- z-index:10001;
2199
- display:none;
2200
- max-width:min(448px, calc(100vw - 48px));
2201
- padding:0;
2202
- margin:12px 0;
2203
- position-area:bottom span-right;
2204
- overflow:hidden;
2205
- outline:0;
2206
- background:var(--t-surface-color-card);
2207
- border:0;
2208
- border-radius:6px;
2209
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2210
- opacity:var(--tds-sidenav-collapse-open-opacity);
2211
- transform:var(--tds-sidenav-collapse-open-transform);
2212
- transition:var(--tds-sidenav-collapse-transition-enter);
2213
- will-change:transform;
2214
- }
2215
-
2216
- .tds-sidenav-scroll-container{
2217
- --webkit-overflow-scrolling:touch;
2218
- display:block;
2219
- width:100%;
2220
- height:-moz-fit-content;
2221
- height:fit-content;
2222
- padding:var(--t-spacing-2);
2223
- overflow-y:auto;
2224
- }
2225
-
2226
- .tds-sidenav-item :is(a, button) :is(.prefix){
2227
- display:none;
2228
- }
2229
- @supports selector(:popover-open){
2230
- .tds-sidenav-collapse:popover-open{
2231
- display:flex;
2221
+ @media (pointer: fine){
2222
+ :is(.tds-input textarea)::-webkit-scrollbar{
2223
+ width:12px;
2224
+ height:12px;
2225
+ cursor:default;
2232
2226
  }
2233
2227
 
2234
- .tds-sidenav-collapse:not(:popover-open){
2235
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2236
- transition:var(--tds-sidenav-collapse-transition-exit);
2228
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2229
+ cursor:default;
2230
+ background:var(--tds-input-scrollbar-thumb-color);
2231
+ background-clip:content-box;
2232
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2233
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2237
2234
  }
2238
2235
 
2239
- @starting-style{
2240
- .tds-sidenav-collapse:popover-open{
2241
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2242
- transform:var(--tds-sidenav-collapse-closed-transform);
2243
- }
2236
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2237
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2244
2238
  }
2245
- }
2246
- @supports not selector(:popover-open){
2247
- .tds-sidenav-collapse.\:popover-open{
2248
- display:flex;
2239
+
2240
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2241
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2249
2242
  }
2250
2243
 
2251
- .tds-sidenav-collapse:not(.\:popover-open){
2252
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2253
- transition:var(--tds-sidenav-collapse-transition-exit);
2244
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2245
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2254
2246
  }
2255
- }
2256
- }
2257
2247
 
2258
- @media (min-width: 720px){
2259
- .tds-sidenav-responsive-header{
2260
- display:none;
2261
- }
2262
- }
2248
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2249
+ background:var(--tds-input-scrollbar-surface-color);
2250
+ }
2263
2251
 
2264
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2265
- display:none;
2252
+ :is(.tds-input textarea)::-webkit-resizer{
2253
+ background:var(--tds-input-resizer-icon) no-repeat;
2254
+ background-position:right bottom;
2255
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2266
2256
  }
2267
2257
 
2268
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2269
- display:block;
2258
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2259
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2260
+ cursor:default;
2270
2261
  }
2271
2262
 
2272
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2273
- display:flex;
2274
- flex-direction:column;
2263
+ @supports (-moz-appearance: none){
2264
+ :is(.tds-input textarea){
2265
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2266
+ scrollbar-width:thin;
2267
+ }
2268
+
2269
+ @media (hover){
2270
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2271
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2272
+ }
2273
+ }
2275
2274
  }
2275
+ }
2276
2276
 
2277
2277
  .tds-input{
2278
2278
  --tds-input-border-color:var(--t-form-border-color);