@planningcenter/tapestry 4.2.0-rc.6 → 4.2.0-rc.8

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 (9) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +1066 -1066
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +1066 -1066
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/unstable.css +1 -1
  8. package/dist/unstable.css.map +1 -1
  9. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,945 +677,754 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
+ .tds-checkbox-group{
681
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
682
+ --tds-checkbox-group-line-height:1.4;
683
+ --tds-checkbox-group-gap:var(--t-spacing-1);
680
684
 
681
- @media (prefers-reduced-motion: no-preference){
685
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
686
+ --tds-checkbox-group-description-line-height:1.35;
687
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
688
+ --tds-checkbox-group-description-invalid-icon-display:none;
689
+ display:flex;
690
+ flex-direction:column;
691
+ gap:0;
692
+ padding:0;
693
+ margin:0;
682
694
 
683
- :root{
684
- interpolate-size:allow-keywords;
695
+ font-size:var(--tds-checkbox-group-font-size);
696
+ line-height:var(--tds-checkbox-group-line-height);
697
+ border:0;
685
698
  }
686
- }
687
-
688
- @layer tds-component{
689
- tds-sidenav,
690
- .tds-sidenav{
691
- --tds-sidenav-indent:12px;
692
- --tds-sidenav-item-depth:0;
693
699
 
694
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
700
+ .tds-checkbox-group legend{
701
+ float:left;
702
+ padding:0;
703
+ margin:0;
704
+ }
695
705
 
696
- --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;
697
- --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;
698
- --tds-sidenav-collapse-closed-opacity:0;
699
- --tds-sidenav-collapse-open-opacity:1;
700
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
701
- --tds-sidenav-collapse-open-transform:translateY(0);
706
+ .tds-checkbox-group[aria-invalid="true"]{
707
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
708
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
709
+ }
702
710
 
703
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
704
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
705
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
706
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
711
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
712
+ margin-left:.25ch;
713
+ color:var(--t-text-color-status-error);
714
+ content:"*";
715
+ }
707
716
 
708
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
- --tds-sidenav-item-nested-background-selected:transparent;
717
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
718
+ content:none;
719
+ }
711
720
 
712
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
721
+ .tds-checkbox-group-fields{
722
+ display:flex;
723
+ flex-direction:column;
724
+ gap:var(--tds-checkbox-group-gap);
725
+ align-items:flex-start;
726
+ margin-top:var(--t-spacing-1);
727
+ }
715
728
 
716
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
718
- }
729
+ .tds-checkbox-group-description{
730
+ display:flex;
731
+ gap:var(--t-spacing-half);
732
+ align-items:flex-start;
733
+ margin:var(--t-spacing-fourth) 0 0;
734
+ font-size:var(--tds-checkbox-group-description-font-size);
735
+ line-height:var(--tds-checkbox-group-description-line-height);
736
+ color:var(--tds-checkbox-group-description-color);
737
+ cursor:text;
738
+ }
719
739
 
720
- @media (prefers-reduced-motion: reduce){
721
- tds-sidenav,
722
- .tds-sidenav{
723
- --tds-sidenav-collapse-transition-enter:none;
724
- --tds-sidenav-collapse-transition-exit:none;
725
- --tds-sidenav-collapse-closed-transform:none;
726
- --tds-sidenav-collapse-open-transform:none;
740
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
741
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
742
+ flex-shrink:0;
743
+ margin-top:calc(.5lh - .5em);
744
+ line-height:var(--tds-checkbox-group-description-line-height);
727
745
  }
728
- }
729
746
 
730
- .tds-sidenav--theme-gray{
731
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
732
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
733
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
734
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
735
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
736
- }
747
+ .tds-checkbox-group--sm{
748
+ --tds-checkbox-group-line-height:1.35;
749
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
750
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
751
+ --tds-checkbox-group-description-line-height:1.3;
737
752
  }
738
753
 
739
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
- display:flex;
741
- }
754
+ .tds-checkbox{
755
+ --tds-checkbox-font-size:var(--t-font-size-md);
756
+ --tds-checkbox-cursor:pointer;
757
+ --tds-checkbox-line-height:1.4;
758
+ --tds-checkbox-transition-property:background-color, border-color;
742
759
 
743
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
744
- flex-direction:column;
745
- gap:var(--t-spacing-half);
746
- width:100%;
747
- }
760
+ --tds-checkbox-input-size:var(--t-element-size-md);
761
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
762
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
763
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
748
764
 
749
- .tds-sidenav-section-list{
750
- width:100%;
751
- padding:0;
752
- margin:0;
753
- list-style:none;
754
- }
765
+ --tds-checkbox-input-icon:none;
766
+ --tds-checkbox-input-icon-visibility:hidden;
767
+ --tds-checkbox-input-icon-opacity:0;
768
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
755
769
 
756
- .tds-sidenav-section-header{
757
- display:flex;
758
- align-items:baseline;
759
- justify-content:space-between;
760
- padding-top:var(--t-spacing-2);
761
- }
770
+ --tds-checkbox-label-color:var(--t-form-color);
762
771
 
763
- .tds-sidenav-section-header h2{
764
- margin:0;
765
- font-size:var(--t-font-size-sm);
766
- font-weight:var(--t-font-weight-semibold);
767
- line-height:1.35;
768
- color:var(--t-text-color-secondary);
769
- text-transform:uppercase;
770
- }
772
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
773
+ --tds-checkbox-description-line-height:1.35;
774
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
775
+ --tds-checkbox-description-invalid-icon-display:none;
771
776
 
772
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
- padding-top:0;
777
+ position:relative;
778
+ display:inline-grid;
779
+ grid-template-columns:auto;
780
+ grid-auto-columns:1fr;
781
+ gap:var(--t-spacing-fourth) 0;
782
+ line-height:var(--tds-checkbox-line-height);
783
+ -webkit-user-select:none;
784
+ -moz-user-select:none;
785
+ user-select:none;
786
+ }
787
+
788
+ .tds-checkbox label{
789
+ grid-area:1 / 2;
790
+ padding-inline-start:var(--t-spacing-1);
791
+ font-size:var(--tds-checkbox-font-size);
792
+ font-weight:var(--t-font-weight-normal);
793
+ color:var(--tds-checkbox-label-color);
794
+ cursor:var(--tds-checkbox-cursor);
774
795
  }
775
796
 
776
- .tds-sidenav-section-header [slot="label-actions"]{
797
+ .tds-checkbox tds-indeterminate{
777
798
  display:flex;
778
- gap:var(--t-spacing-half);
779
- align-items:center;
780
799
  }
781
800
 
782
- .tds-sidenav-section [slot="section-actions"]{
783
- display:flex;
784
- gap:12px;
785
- align-items:center;
786
- min-height:42px;
787
- padding:var(--t-spacing-1) 0;
788
- }
789
-
790
- .tds-sidenav-section-list,
791
- .tds-sidenav-item{
792
- width:100%;
793
- padding:0;
794
- margin:0;
795
- }
796
-
797
- .tds-sidenav-item :is(a,button){
801
+ .tds-checkbox input[type="checkbox"]{
798
802
  position:relative;
799
- display:flex;
800
- gap:12px;
801
- align-items:center;
802
- width:100%;
803
- padding:12px;
804
- overflow:hidden;
805
- font-size:var(--t-font-size-sm);
806
- line-height:18px;
807
- color:var(--t-text-color-headline);
808
- white-space:nowrap;
809
- text-decoration:none;
803
+ width:1em;
804
+ height:1em;
805
+ margin:calc((1lh - 1em) / 2) 0 0;
806
+ font-size:var(--tds-checkbox-font-size);
807
+ line-height:inherit;
810
808
  -webkit-appearance:none;
811
809
  -moz-appearance:none;
812
810
  appearance:none;
813
- cursor:pointer;
814
- background-color:var(--tds-sidenav-item-background, transparent);
815
- border:0;
816
- border-radius:var(--t-border-radius);
817
- transition:var(--tds-sidenav-item-transition);
811
+ cursor:var(--tds-checkbox-cursor);
812
+ background-color:var(--tds-checkbox-input-background-color);
813
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
814
+ border-radius:var(--tds-checkbox-input-border-radius);
815
+ transition-timing-function:var(--t-ease-in-out);
816
+ transition-duration:var(--t-duration-200);
817
+ transition-property:var(--tds-checkbox-transition-property);
818
818
  }
819
819
 
820
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
- display:block;
822
- flex:1;
823
- overflow:hidden;
824
- text-overflow:ellipsis;
825
- text-align:left;
826
- white-space:nowrap;
827
- }
828
-
829
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
- color:var(--t-text-color-headline);
832
- text-decoration:none;
820
+ :is(.tds-checkbox input[type="checkbox"])::before{
821
+ position:absolute;
822
+ top:50%;
823
+ left:50%;
824
+ visibility:var(--tds-checkbox-input-icon-visibility);
825
+ width:100%;
826
+ height:100%;
827
+ content:"";
828
+ background-color:var(--tds-checkbox-input-icon-fill);
829
+ border-radius:var(--tds-checkbox-input-border-radius);
830
+ opacity:var(--tds-checkbox-input-icon-opacity);
831
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
832
+ mask-image:var(--tds-checkbox-input-icon);
833
+ -webkit-mask-repeat:no-repeat;
834
+ mask-repeat:no-repeat;
835
+ -webkit-mask-size:contain;
836
+ mask-size:contain;
837
+ transform:translate(-50%, -50%);
833
838
  }
834
839
 
835
- :is(.tds-sidenav-item :is(a,button)):active{
836
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
840
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
841
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
842
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
837
843
  }
838
844
 
839
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
- overflow:hidden;
841
- color:var(--tds-sidenav-item-icon-color);
845
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
846
+ outline:var(--t-focus-ring-outline);
847
+ outline-offset:var(--t-focus-ring-offset);
842
848
  }
843
849
 
844
- :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{
845
- display:block;
846
- width:var(--tds-sidenav-item-icon-size);
847
- height:var(--tds-sidenav-item-icon-size);
848
- }
849
-
850
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
- --tds-sidenav-indent:19px;
850
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
851
+ pointer-events:none;
852
852
  }
853
853
 
854
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
- visibility:visible;
856
- block-size:auto;
857
- opacity:1;
858
- }
854
+ @media (prefers-reduced-motion: reduce){
859
855
 
860
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
861
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
862
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
856
+ .tds-checkbox input[type="checkbox"]{
857
+ --tds-checkbox-transition-property:none;
858
+ }
859
+ }
863
860
 
864
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
- font-weight:var(--t-font-weight-semibold);
861
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
862
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
863
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
864
+ --tds-checkbox-input-icon-visibility:visible;
865
+ --tds-checkbox-input-icon-opacity:1;
866
866
  }
867
867
 
868
- .tds-sidenav-item:has(.tds-sidenav-section){
869
- display:flex;
870
- flex-direction:column;
871
- gap:var(--t-spacing-half);
868
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
869
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
870
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
871
+ }
872
+
873
+ .tds-checkbox:has(input:checked){
874
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
872
875
  }
873
876
 
874
- .tds-sidenav-item .tds-sidenav-section-list{
875
- --tds-sidenav-item-depth:1;
876
- gap:0;
877
+ .tds-checkbox:has(input:indeterminate){
878
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
877
879
  }
878
880
 
879
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
- visibility:hidden;
881
- block-size:0;
882
- overflow-y:clip;
883
- opacity:0;
884
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
885
- }
881
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
882
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
883
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
884
+ --tds-checkbox-description-invalid-icon-display:inline-block;
885
+ }
886
886
 
887
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
- --tds-sidenav-item-depth:2;
887
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
888
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
889
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
889
890
  }
890
891
 
891
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
892
- min-height:var(--t-element-size-2xl);
893
- padding-block:9px;
894
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
895
- line-height:1;
896
- background-color:transparent;
892
+ :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{
893
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
894
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
897
895
  }
898
896
 
899
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
900
- position:absolute;
901
- top:0;
902
- bottom:0;
903
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
904
- width:2px;
905
- content:"";
906
- background-color:var(--tds-sidenav-item-nested-border-color);
907
- transition:var(--tds-sidenav-item-transition);
908
- }
909
-
910
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
911
- position:absolute;
912
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
- z-index:-1;
914
- height:100%;
915
- content:"";
916
- background-color:var(--tds-sidenav-item-nested-background);
917
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
- transition:var(--tds-sidenav-item-transition);
897
+ :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){
898
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
899
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
919
900
  }
920
901
 
921
- :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)){
922
- display:block;
923
- text-align:left;
924
- white-space:normal;
925
- }
902
+ .tds-checkbox:has(input:required) label::after{
903
+ margin-left:.25ch;
904
+ color:var(--t-text-color-status-error);
905
+ content:"*";
906
+ }
926
907
 
927
- :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{
928
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
930
- }
908
+ .tds-checkbox:has(input:disabled){
909
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
910
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
931
911
 
932
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
933
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
934
- }
912
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
913
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
914
+ --tds-checkbox-cursor:not-allowed;
915
+ }
935
916
 
936
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
937
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
938
- font-weight:var(--t-font-weight-medium);
917
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
918
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
939
919
  }
940
920
 
941
- .tds-sidenav-responsive-header{
921
+ .tds-checkbox-description{
942
922
  display:flex;
943
- gap:var(--t-spacing-2);
944
- align-items:center;
945
- width:100%;
923
+ grid-area:2 / 2;
924
+ gap:var(--t-spacing-half);
925
+ align-items:flex-start;
926
+ padding-inline-start:var(--t-spacing-1);
927
+ margin:0;
928
+ font-size:var(--tds-checkbox-description-font-size);
929
+ line-height:var(--tds-checkbox-description-line-height);
930
+ color:var(--tds-checkbox-description-color);
931
+ cursor:text;
946
932
  }
947
933
 
948
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
- order:0;
950
- }
951
-
952
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
- flex:1;
954
- order:1;
955
- margin:0;
956
- font-size:var(--t-font-size-lg);
957
- font-weight:var(--t-font-weight-medium);
958
- color:var(--t-text-color-headline);
934
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
935
+ display:var(--tds-checkbox-description-invalid-icon-display);
936
+ flex-shrink:0;
937
+ margin-top:calc(.5lh - .5em);
938
+ line-height:var(--tds-checkbox-description-line-height);
959
939
  }
960
940
 
961
- @media (max-width: 719px){
962
- .tds-sidenav-collapse{
963
- z-index:10001;
964
- display:none;
965
- max-width:min(448px, calc(100vw - 48px));
966
- padding:0;
967
- margin:12px 0;
968
- position-area:bottom span-right;
969
- overflow:hidden;
970
- outline:0;
971
- background:var(--t-surface-color-card);
972
- border:0;
973
- border-radius:6px;
974
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
- opacity:var(--tds-sidenav-collapse-open-opacity);
976
- transform:var(--tds-sidenav-collapse-open-transform);
977
- transition:var(--tds-sidenav-collapse-transition-enter);
978
- will-change:transform;
979
- }
941
+ .tds-checkbox--sm{
942
+ --tds-checkbox-line-height:1.35;
943
+ --tds-checkbox-input-size:var(--t-element-size-sm);
944
+ --tds-checkbox-font-size:var(--t-font-size-sm);
945
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
946
+ --tds-checkbox-description-line-height:1.3;
947
+ }
980
948
 
981
- .tds-sidenav-scroll-container{
982
- --webkit-overflow-scrolling:touch;
983
- display:block;
984
- width:100%;
985
- height:-moz-fit-content;
986
- height:fit-content;
987
- padding:var(--t-spacing-2);
988
- overflow-y:auto;
989
- }
949
+ .tds-button-group{
950
+ display:inline-flex;
951
+ }
952
+ .tds-button-group > .tds-btn{
953
+ --tds-button-group-item-z-index:1;
990
954
 
991
- .tds-sidenav-item :is(a, button) :is(.prefix){
992
- display:none;
955
+ position:relative;
956
+ z-index:var(--tds-button-group-item-z-index);
957
+ border-radius:0;
993
958
  }
994
- @supports selector(:popover-open){
995
- .tds-sidenav-collapse:popover-open{
996
- display:flex;
997
- }
998
-
999
- .tds-sidenav-collapse:not(:popover-open){
1000
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
- transition:var(--tds-sidenav-collapse-transition-exit);
959
+ :is(.tds-button-group > .tds-btn):not(:first-child){
960
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1002
961
  }
1003
-
1004
- @starting-style{
1005
- .tds-sidenav-collapse:popover-open{
1006
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
- transform:var(--tds-sidenav-collapse-closed-transform);
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{
963
+ position:absolute;
964
+ inset-block:calc(var(--tds-btn-border-width) * -1);
965
+ width:var(--tds-btn-border-width);
966
+ pointer-events:none;
967
+ content:"";
968
+ background-color:var(--t-border-color-white);
969
+ }
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);
972
+ }
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);
1008
975
  }
976
+ :is(.tds-button-group > .tds-btn):hover{
977
+ --tds-button-group-item-z-index:2;
1009
978
  }
1010
- }
1011
- @supports not selector(:popover-open){
1012
- .tds-sidenav-collapse.\:popover-open{
1013
- display:flex;
979
+ :is(.tds-button-group > .tds-btn):focus-visible{
980
+ --tds-button-group-item-z-index:5;
1014
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
+ }
1015
990
 
1016
- .tds-sidenav-collapse:not(.\:popover-open){
1017
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
- transition:var(--tds-sidenav-collapse-transition-exit);
1019
- }
991
+ @layer t-critical{
992
+ tds-page-header:not(.hydrated){
993
+ display:none;
1020
994
  }
1021
995
  }
1022
996
 
1023
- @media (min-width: 720px){
1024
- .tds-sidenav-responsive-header{
1025
- display:none;
1026
- }
1027
- }
1028
-
1029
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
- display:none;
1031
- }
1032
-
1033
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
- display:block;
1035
- }
997
+ @layer t-component{
998
+ .tds-page-header{
999
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1000
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1001
+ --tds-page-header-color:var(--t-text-color);
1002
+ --tds-page-header-bottom-border-color:transparent;
1003
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1004
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1005
+ --tds-page-header-padding-x:var(--t-spacing-2);
1006
+ --tds-page-header-padding-y:var(--t-spacing-2);
1007
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1008
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1009
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1010
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1011
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1012
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1013
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1014
+ --tds-page-header-nav-item-border-width:1px;
1036
1015
 
1037
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
- display:flex;
1039
- flex-direction:column;
1040
- }
1016
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1017
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1041
1018
 
1042
- .tds-checkbox-group{
1043
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1044
- --tds-checkbox-group-line-height:1.4;
1045
- --tds-checkbox-group-gap:var(--t-spacing-1);
1019
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1020
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1021
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1046
1022
 
1047
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1048
- --tds-checkbox-group-description-line-height:1.35;
1049
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1050
- --tds-checkbox-group-description-invalid-icon-display:none;
1051
- display:flex;
1052
- flex-direction:column;
1053
- gap:0;
1054
- padding:0;
1055
- margin:0;
1023
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1024
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1056
1025
 
1057
- font-size:var(--tds-checkbox-group-font-size);
1058
- line-height:var(--tds-checkbox-group-line-height);
1059
- border:0;
1060
- }
1026
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1027
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1028
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1061
1029
 
1062
- .tds-checkbox-group legend{
1063
- float:left;
1064
- padding:0;
1065
- margin:0;
1030
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1031
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1032
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1033
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1034
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1066
1035
  }
1067
1036
 
1068
- .tds-checkbox-group[aria-invalid="true"]{
1069
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1070
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1037
+ .tds-page-header--profile{
1038
+ --tds-page-header-padding-y:20px;
1071
1039
  }
1072
1040
 
1073
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1074
- margin-left:.25ch;
1075
- color:var(--t-text-color-status-error);
1076
- content:"*";
1041
+ @supports (color: light-dark(#fff, #000)){
1042
+ .tds-page-header{
1043
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1044
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1077
1045
  }
1046
+ }
1078
1047
 
1079
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1080
- content:none;
1048
+ @media (min-width: 600px){
1049
+ .tds-page-header{
1050
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1051
+ --tds-page-header-color:var(--t-text-color-secondary);
1052
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1053
+ --tds-page-header-padding-x:var(--t-spacing-3);
1054
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1055
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1056
+ --tds-page-header-nav-background:transparent;
1057
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1058
+ --tds-page-header-nav-item-border-width:1px;
1059
+ --tds-page-header-nav-item-color:var(--t-text-color);
1060
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1061
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1062
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1063
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1064
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1065
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1081
1066
  }
1082
-
1083
- .tds-checkbox-group-fields{
1084
- display:flex;
1085
- flex-direction:column;
1086
- gap:var(--tds-checkbox-group-gap);
1087
- align-items:flex-start;
1088
- margin-top:var(--t-spacing-1);
1067
+ }
1089
1068
  }
1090
1069
 
1091
- .tds-checkbox-group-description{
1070
+ .tds-page-header{
1092
1071
  display:flex;
1093
- gap:var(--t-spacing-half);
1094
- align-items:flex-start;
1095
- margin:var(--t-spacing-fourth) 0 0;
1096
- font-size:var(--tds-checkbox-group-description-font-size);
1097
- line-height:var(--tds-checkbox-group-description-line-height);
1098
- color:var(--tds-checkbox-group-description-color);
1099
- cursor:text;
1072
+ flex-direction:column;
1073
+ padding-top:var(--tds-page-header-padding-y);
1074
+ color:var(--tds-page-header-color);
1075
+ background:var(--tds-page-header-background-color);
1076
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1100
1077
  }
1101
1078
 
1102
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1103
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1104
- flex-shrink:0;
1105
- margin-top:calc(.5lh - .5em);
1106
- line-height:var(--tds-checkbox-group-description-line-height);
1079
+ .tds-page-header:not(.has-nav){
1080
+ padding-bottom:var(--tds-page-header-padding-y);
1107
1081
  }
1108
1082
 
1109
- .tds-checkbox-group--sm{
1110
- --tds-checkbox-group-line-height:1.35;
1111
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1112
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1113
- --tds-checkbox-group-description-line-height:1.3;
1114
- }
1083
+ .tds-page-header.inactive{
1084
+ background:var(--tds-page-header-background-color-inactive);
1085
+ }
1115
1086
 
1116
- .tds-button-group{
1117
- display:inline-flex;
1118
- }
1119
- .tds-button-group > .tds-btn{
1120
- --tds-button-group-item-z-index:1;
1087
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1088
+ width:100%;
1089
+ }
1121
1090
 
1122
- position:relative;
1123
- z-index:var(--tds-button-group-item-z-index);
1124
- border-radius:0;
1091
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1092
+ display:flex;
1093
+ flex-flow:row wrap;
1094
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1095
+ align-items:flex-start;
1096
+ justify-content:flex-start;
1097
+ min-width:0;
1125
1098
  }
1126
- :is(.tds-button-group > .tds-btn):not(:first-child){
1127
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1128
- }
1129
- :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{
1130
- position:absolute;
1131
- inset-block:calc(var(--tds-btn-border-width) * -1);
1132
- width:var(--tds-btn-border-width);
1133
- pointer-events:none;
1134
- content:"";
1135
- background-color:var(--t-border-color-white);
1136
- }
1137
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1138
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1139
- }
1140
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1141
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1142
- }
1143
- :is(.tds-button-group > .tds-btn):hover{
1144
- --tds-button-group-item-z-index:2;
1145
- }
1146
- :is(.tds-button-group > .tds-btn):focus-visible{
1147
- --tds-button-group-item-z-index:5;
1099
+
1100
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1101
+ display:flex;
1102
+ gap:var(--tds-page-header-nav-gap);
1103
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1104
+ margin:0 0 -1px;
1105
+ overflow:auto;
1106
+ list-style:none;
1107
+ background:var(--tds-page-header-nav-background);
1148
1108
  }
1149
- .tds-button-group > .tds-btn:first-child{
1150
- border-start-start-radius:var(--tds-btn-border-radius);
1151
- border-end-start-radius:var(--tds-btn-border-radius);
1152
- }
1153
- .tds-button-group > .tds-btn:last-child{
1154
- border-start-end-radius:var(--tds-btn-border-radius);
1155
- border-end-end-radius:var(--tds-btn-border-radius);
1156
- }
1157
1109
 
1158
- .tds-modal-overlay{
1159
- --tds-modal-min-margin-block:var(--t-spacing-3);
1110
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1111
+ position:relative;
1112
+ display:inline-flex;
1113
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1114
+ font-size:var(--t-font-size-sm);
1115
+ line-height:22px;
1116
+ color:var(--tds-page-header-nav-item-color);
1117
+ white-space:nowrap;
1118
+ text-decoration:none;
1119
+ -webkit-appearance:none;
1120
+ -moz-appearance:none;
1121
+ appearance:none;
1122
+ cursor:pointer;
1123
+ outline-offset:-2px;
1124
+ background-color:var(--tds-page-header-nav-item-background-color);
1125
+ background-clip:padding-box;
1126
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1127
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1128
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1129
+ }
1160
1130
 
1161
- position:fixed;
1162
- inset:0;
1163
- z-index:1000;
1164
- display:grid;
1165
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1166
- justify-items:center;
1167
- overflow-y:auto;
1168
- background:hsl(0 0% 0% / 40%);
1169
- }
1131
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1132
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1133
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1134
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1135
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1136
+ }
1170
1137
 
1171
- .tds-modal-overlay[data-entering]{
1172
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1173
- }
1138
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1139
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1140
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1141
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1142
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1143
+ }
1174
1144
 
1175
- .tds-modal-overlay[data-exiting]{
1176
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1177
- }
1145
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1146
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1147
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1148
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1149
+ }
1178
1150
 
1179
- @keyframes tds-modal-overlay-fade{
1180
- from{
1181
- opacity:0;
1182
- }
1183
- }
1184
-
1185
- .tds-modal-frame{
1186
- --tds-modal-width:600px;
1187
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1188
- display:flex;
1189
-
1190
- grid-row:2;
1191
- justify-content:center;
1192
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1193
- }
1194
-
1195
- .tds-modal-frame[data-entering]{
1196
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1197
- }
1198
-
1199
- .tds-modal-frame[data-exiting]{
1200
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1201
- }
1202
-
1203
- .tds-modal-frame--sm{
1204
- --tds-modal-width:400px;
1205
- }
1206
-
1207
- .tds-modal-frame--lg{
1208
- --tds-modal-width:800px;
1209
- }
1210
-
1211
- .tds-modal-frame--xl{
1212
- --tds-modal-width:1000px;
1213
- }
1214
-
1215
- @keyframes tds-modal-zoom{
1216
- from{
1217
- opacity:0;
1218
- scale:.96;
1219
- }
1220
- }
1221
-
1222
- @media (prefers-reduced-motion: reduce){
1223
- .tds-modal-overlay[data-entering],
1224
- .tds-modal-overlay[data-exiting],
1225
- .tds-modal-frame[data-entering],
1226
- .tds-modal-frame[data-exiting]{
1227
- animation:none;
1228
- }
1229
- }
1230
-
1231
- .tds-modal{
1232
- display:flex;
1233
- flex-direction:column;
1234
- width:100%;
1235
- padding-block-start:var(--t-spacing-3);
1236
- padding-inline:0;
1237
- background:var(--t-surface-color-card);
1238
-
1239
- border:0;
1240
- border-radius:var(--t-border-radius-lg);
1241
- box-shadow:0 4px 18px 0 #0003;
1242
- }
1243
-
1244
- .tds-modal:focus{
1245
- outline:none;
1246
- }
1247
-
1248
- .tds-modal-header{
1249
- display:grid;
1250
- grid-template-columns:1fr auto;
1251
- -moz-column-gap:var(--t-spacing-2);
1252
- column-gap:var(--t-spacing-2);
1253
- padding-block:0;
1254
- padding-inline:var(--t-spacing-4);
1255
- }
1256
-
1257
- .tds-modal-title{
1258
- grid-row:1;
1259
- grid-column:1;
1260
- margin:0;
1261
- font-size:var(--t-font-size-2xl);
1262
- font-weight:var(--t-font-weight-medium);
1263
- line-height:140%;
1264
- color:var(--t-text-color-headline);
1265
- }
1266
-
1267
- .tds-modal-subtitle{
1268
- grid-row:2;
1269
- grid-column:1;
1270
- margin:0;
1271
- font-size:var(--t-font-size-md);
1272
- font-weight:var(--t-font-weight-medium);
1273
- line-height:140%;
1274
- color:var(--t-text-color-secondary);
1275
- }
1276
-
1277
- .tds-modal-close{
1278
- grid-row:1;
1279
- grid-column:2;
1280
- align-self:center;
1281
- color:var(--t-icon-color-dim);
1282
- }
1283
-
1284
- .tds-modal-body{
1285
- padding-block:var(--t-spacing-3);
1286
- padding-inline:var(--t-spacing-4);
1287
- }
1288
-
1289
- .tds-modal-body--full-width{
1290
- padding-inline:0;
1291
- }
1292
-
1293
- .tds-modal-footer{
1294
- display:flex;
1295
- gap:var(--t-spacing-2);
1296
- align-items:center;
1297
- justify-content:flex-end;
1298
- padding-block:var(--t-spacing-3);
1299
- padding-inline:var(--t-spacing-4);
1300
- border-top:1px solid var(--t-border-color);
1301
- }
1302
-
1303
- .tds-modal-footer > [slot="start"]{
1304
- margin-inline-end:auto;
1305
- }
1306
-
1307
- @media (min-width: 720px){
1308
- .tds-modal-overlay{
1309
- --tds-modal-min-margin-block:0;
1310
- }
1311
-
1312
- .tds-modal-footer{
1313
- position:sticky;
1314
- bottom:0;
1315
- background:var(--t-surface-color-card);
1316
- border-end-start-radius:var(--t-border-radius-lg);
1317
- border-end-end-radius:var(--t-border-radius-lg);
1318
- }
1319
- }
1320
-
1321
- .tds-radio-group{
1322
- --tds-radio-group-font-size:var(--t-font-size-md);
1323
- --tds-radio-group-line-height:1.4;
1324
- --tds-radio-group-gap:var(--t-spacing-1);
1325
-
1326
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1327
- --tds-radio-group-description-line-height:1.35;
1328
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1329
- --tds-radio-group-description-invalid-icon-display:none;
1330
- display:flex;
1331
- flex-direction:column;
1332
- gap:0;
1333
- padding:0;
1334
- margin:0;
1335
-
1336
- font-size:var(--tds-radio-group-font-size);
1337
- line-height:var(--tds-radio-group-line-height);
1338
- border:0;
1339
- }
1340
-
1341
- .tds-radio-group legend{
1342
- float:left;
1343
- padding:0;
1344
- margin:0;
1345
- }
1151
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1152
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1153
+ color:var(--tds-page-header-nav-item-color-disabled);
1154
+ cursor:not-allowed;
1155
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1156
+ opacity:1;
1157
+ }
1346
1158
 
1347
- .tds-radio-group[aria-invalid="true"]{
1348
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1349
- --tds-radio-group-description-invalid-icon-display:inline-block;
1350
- }
1159
+ @media (min-width: 600px){
1160
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1161
+ position:absolute;
1162
+ inset:auto -1px -1px;
1163
+ height:1px;
1164
+ pointer-events:none;
1165
+ content:"";
1166
+ background-color:var(--tds-page-header-bottom-border-color);
1167
+ }
1168
+ }
1351
1169
 
1352
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1353
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1170
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1171
+ position:relative;
1354
1172
  }
1355
1173
 
1356
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1357
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1358
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1174
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1175
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1176
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1359
1177
  }
1360
1178
 
1361
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1362
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1179
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1180
+ position:absolute;
1181
+ top:-5px;
1182
+ right:-2px;
1183
+ width:10px;
1184
+ height:10px;
1185
+ content:"";
1186
+ background:var(--tds-page-header-nav-item-indicator-color);
1187
+ border-radius:50%;
1363
1188
  }
1364
1189
 
1365
- .tds-radio-group:has(input:required) legend::after{
1366
- margin-left:.25ch;
1367
- color:var(--t-text-color-status-error);
1368
- content:"*";
1369
- }
1190
+ @media (prefers-reduced-motion: no-preference){
1191
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1192
+ animation:indicator-pulse 1.25s ease infinite;
1193
+ }
1194
+ }
1370
1195
 
1371
- .tds-radio-group-fields{
1196
+ .tds-page-header__title-bar{
1372
1197
  display:flex;
1373
1198
  flex-direction:column;
1374
- gap:var(--tds-radio-group-gap);
1375
- align-items:flex-start;
1376
- margin-top:var(--t-spacing-1);
1377
- }
1378
-
1379
- .tds-radio-group-description{
1380
- display:flex;
1381
- gap:var(--t-spacing-half);
1199
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1382
1200
  align-items:flex-start;
1383
- margin:var(--t-spacing-fourth) 0 0;
1384
- font-size:var(--tds-radio-group-description-font-size);
1385
- line-height:var(--tds-radio-group-description-line-height);
1386
- color:var(--tds-radio-group-description-color);
1387
- cursor:text;
1201
+ justify-content:space-between;
1202
+ padding:0 var(--tds-page-header-padding-x);
1388
1203
  }
1389
1204
 
1390
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1391
- display:var(--tds-radio-group-description-invalid-icon-display);
1392
- flex-shrink:0;
1393
- margin-top:calc(.5lh - .5em);
1394
- line-height:var(--tds-radio-group-description-line-height);
1205
+ .tds-page-header--profile > .tds-page-header__title-bar{
1206
+ align-items:center;
1395
1207
  }
1396
1208
 
1397
- .tds-radio-group--sm{
1398
- --tds-radio-group-line-height:1.35;
1399
- --tds-radio-group-font-size:var(--t-font-size-sm);
1400
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1401
- --tds-radio-group-description-line-height:1.3;
1402
- }
1403
-
1404
- .tds-checkbox{
1405
- --tds-checkbox-font-size:var(--t-font-size-md);
1406
- --tds-checkbox-cursor:pointer;
1407
- --tds-checkbox-line-height:1.4;
1408
- --tds-checkbox-transition-property:background-color, border-color;
1409
-
1410
- --tds-checkbox-input-size:var(--t-element-size-md);
1411
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1412
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1413
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1414
-
1415
- --tds-checkbox-input-icon:none;
1416
- --tds-checkbox-input-icon-visibility:hidden;
1417
- --tds-checkbox-input-icon-opacity:0;
1418
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1419
-
1420
- --tds-checkbox-label-color:var(--t-form-color);
1421
-
1422
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1423
- --tds-checkbox-description-line-height:1.35;
1424
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1425
- --tds-checkbox-description-invalid-icon-display:none;
1426
-
1427
- position:relative;
1428
- display:inline-grid;
1429
- grid-template-columns:auto;
1430
- grid-auto-columns:1fr;
1431
- gap:var(--t-spacing-fourth) 0;
1432
- line-height:var(--tds-checkbox-line-height);
1433
- -webkit-user-select:none;
1434
- -moz-user-select:none;
1435
- user-select:none;
1209
+ .tds-page-header__primary{
1210
+ width:100%;
1436
1211
  }
1437
1212
 
1438
- .tds-checkbox label{
1439
- grid-area:1 / 2;
1440
- padding-inline-start:var(--t-spacing-1);
1441
- font-size:var(--tds-checkbox-font-size);
1213
+ .tds-page-header__primary h1{
1214
+ margin:0;
1215
+ font-size:var(--tds-page-header-headline-font-size);
1442
1216
  font-weight:var(--t-font-weight-normal);
1443
- color:var(--tds-checkbox-label-color);
1444
- cursor:var(--tds-checkbox-cursor);
1445
- }
1446
-
1447
- .tds-checkbox tds-indeterminate{
1448
- display:flex;
1449
- }
1450
-
1451
- .tds-checkbox input[type="checkbox"]{
1452
- position:relative;
1453
- width:1em;
1454
- height:1em;
1455
- margin:calc((1lh - 1em) / 2) 0 0;
1456
- font-size:var(--tds-checkbox-font-size);
1457
- line-height:inherit;
1458
- -webkit-appearance:none;
1459
- -moz-appearance:none;
1460
- appearance:none;
1461
- cursor:var(--tds-checkbox-cursor);
1462
- background-color:var(--tds-checkbox-input-background-color);
1463
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1464
- border-radius:var(--tds-checkbox-input-border-radius);
1465
- transition-timing-function:var(--t-ease-in-out);
1466
- transition-duration:var(--t-duration-200);
1467
- transition-property:var(--tds-checkbox-transition-property);
1468
- }
1469
-
1470
- :is(.tds-checkbox input[type="checkbox"])::before{
1471
- position:absolute;
1472
- top:50%;
1473
- left:50%;
1474
- visibility:var(--tds-checkbox-input-icon-visibility);
1475
- width:100%;
1476
- height:100%;
1477
- content:"";
1478
- background-color:var(--tds-checkbox-input-icon-fill);
1479
- border-radius:var(--tds-checkbox-input-border-radius);
1480
- opacity:var(--tds-checkbox-input-icon-opacity);
1481
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1482
- mask-image:var(--tds-checkbox-input-icon);
1483
- -webkit-mask-repeat:no-repeat;
1484
- mask-repeat:no-repeat;
1485
- -webkit-mask-size:contain;
1486
- mask-size:contain;
1487
- transform:translate(-50%, -50%);
1488
- }
1217
+ line-height:32px;
1218
+ color:var(--tds-page-header-headline-color);
1219
+ overflow-wrap:break-word;
1220
+ }
1489
1221
 
1490
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1491
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1492
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1493
- }
1222
+ @media (min-width: 960px){
1223
+ .tds-page-header__primary{
1224
+ flex:1 1 max-content;
1225
+ width:auto;
1226
+ min-width:0;
1227
+ max-width:100%;
1228
+ }
1494
1229
 
1495
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1496
- outline:var(--t-focus-ring-outline);
1497
- outline-offset:var(--t-focus-ring-offset);
1230
+ .tds-page-header__title-bar,
1231
+ .tds-page-header--profile .tds-page-header__title-bar{
1232
+ flex-flow:row nowrap;
1233
+ row-gap:12px;
1234
+ align-items:flex-start;
1235
+ }
1236
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1237
+ width:auto;
1498
1238
  }
1499
1239
 
1500
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1501
- pointer-events:none;
1240
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1241
+ justify-content:flex-end;
1502
1242
  }
1243
+ }
1503
1244
 
1504
- @media (prefers-reduced-motion: reduce){
1245
+ .tds-page-header-phone,
1246
+ .tds-page-header-email{
1247
+ color:var(--tds-page-header-color);
1248
+ white-space:nowrap;
1249
+ }
1250
+ .tds-page-header-email{
1251
+ max-width:100%;
1252
+ overflow:hidden;
1253
+ text-overflow:ellipsis;
1254
+ }
1505
1255
 
1506
- .tds-checkbox input[type="checkbox"]{
1507
- --tds-checkbox-transition-property:none;
1256
+ @keyframes indicator-pulse{
1257
+ 0%{
1258
+ opacity:.3;
1259
+ transform:scale(.9);
1508
1260
  }
1509
- }
1510
1261
 
1511
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1512
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1513
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1514
- --tds-checkbox-input-icon-visibility:visible;
1515
- --tds-checkbox-input-icon-opacity:1;
1262
+ 100%{
1263
+ opacity:0;
1264
+ transform:scale(1.75);
1516
1265
  }
1266
+ }
1517
1267
 
1518
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1519
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1520
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1521
- }
1268
+ .tds-modal-overlay{
1269
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1522
1270
 
1523
- .tds-checkbox:has(input:checked){
1524
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1271
+ position:fixed;
1272
+ inset:0;
1273
+ z-index:1000;
1274
+ display:grid;
1275
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1276
+ justify-items:center;
1277
+ overflow-y:auto;
1278
+ background:hsl(0 0% 0% / 40%);
1279
+ }
1280
+
1281
+ .tds-modal-overlay[data-entering]{
1282
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1525
1283
  }
1526
1284
 
1527
- .tds-checkbox:has(input:indeterminate){
1528
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1285
+ .tds-modal-overlay[data-exiting]{
1286
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1529
1287
  }
1530
1288
 
1531
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1532
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1533
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1534
- --tds-checkbox-description-invalid-icon-display:inline-block;
1289
+ @keyframes tds-modal-overlay-fade{
1290
+ from{
1291
+ opacity:0;
1535
1292
  }
1293
+ }
1536
1294
 
1537
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1538
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1539
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1540
- }
1295
+ .tds-modal-frame{
1296
+ --tds-modal-width:600px;
1297
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1298
+ display:flex;
1541
1299
 
1542
- :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{
1543
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1544
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1545
- }
1300
+ grid-row:2;
1301
+ justify-content:center;
1302
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1303
+ }
1546
1304
 
1547
- :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){
1548
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1549
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1550
- }
1305
+ .tds-modal-frame[data-entering]{
1306
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1307
+ }
1551
1308
 
1552
- .tds-checkbox:has(input:required) label::after{
1553
- margin-left:.25ch;
1554
- color:var(--t-text-color-status-error);
1555
- content:"*";
1556
- }
1309
+ .tds-modal-frame[data-exiting]{
1310
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1311
+ }
1557
1312
 
1558
- .tds-checkbox:has(input:disabled){
1559
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1560
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1313
+ .tds-modal-frame--sm{
1314
+ --tds-modal-width:400px;
1315
+ }
1561
1316
 
1562
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1563
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1564
- --tds-checkbox-cursor:not-allowed;
1317
+ .tds-modal-frame--lg{
1318
+ --tds-modal-width:800px;
1319
+ }
1320
+
1321
+ .tds-modal-frame--xl{
1322
+ --tds-modal-width:1000px;
1323
+ }
1324
+
1325
+ @keyframes tds-modal-zoom{
1326
+ from{
1327
+ opacity:0;
1328
+ scale:.96;
1565
1329
  }
1330
+ }
1566
1331
 
1567
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1568
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1569
- }
1332
+ @media (prefers-reduced-motion: reduce){
1333
+ .tds-modal-overlay[data-entering],
1334
+ .tds-modal-overlay[data-exiting],
1335
+ .tds-modal-frame[data-entering],
1336
+ .tds-modal-frame[data-exiting]{
1337
+ animation:none;
1338
+ }
1339
+ }
1570
1340
 
1571
- .tds-checkbox-description{
1341
+ .tds-modal{
1572
1342
  display:flex;
1573
- grid-area:2 / 2;
1574
- gap:var(--t-spacing-half);
1575
- align-items:flex-start;
1576
- padding-inline-start:var(--t-spacing-1);
1577
- margin:0;
1578
- font-size:var(--tds-checkbox-description-font-size);
1579
- line-height:var(--tds-checkbox-description-line-height);
1580
- color:var(--tds-checkbox-description-color);
1581
- cursor:text;
1343
+ flex-direction:column;
1344
+ width:100%;
1345
+ padding-block-start:var(--t-spacing-3);
1346
+ padding-inline:0;
1347
+ background:var(--t-surface-color-card);
1348
+
1349
+ border:0;
1350
+ border-radius:var(--t-border-radius-lg);
1351
+ box-shadow:0 4px 18px 0 #0003;
1582
1352
  }
1583
1353
 
1584
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1585
- display:var(--tds-checkbox-description-invalid-icon-display);
1586
- flex-shrink:0;
1587
- margin-top:calc(.5lh - .5em);
1588
- line-height:var(--tds-checkbox-description-line-height);
1354
+ .tds-modal:focus{
1355
+ outline:none;
1589
1356
  }
1590
1357
 
1591
- .tds-checkbox--sm{
1592
- --tds-checkbox-line-height:1.35;
1593
- --tds-checkbox-input-size:var(--t-element-size-sm);
1594
- --tds-checkbox-font-size:var(--t-font-size-sm);
1595
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1596
- --tds-checkbox-description-line-height:1.3;
1358
+ .tds-modal-header{
1359
+ display:grid;
1360
+ grid-template-columns:1fr auto;
1361
+ -moz-column-gap:var(--t-spacing-2);
1362
+ column-gap:var(--t-spacing-2);
1363
+ padding-block:0;
1364
+ padding-inline:var(--t-spacing-4);
1597
1365
  }
1598
1366
 
1367
+ .tds-modal-title{
1368
+ grid-row:1;
1369
+ grid-column:1;
1370
+ margin:0;
1371
+ font-size:var(--t-font-size-2xl);
1372
+ font-weight:var(--t-font-weight-medium);
1373
+ line-height:140%;
1374
+ color:var(--t-text-color-headline);
1375
+ }
1599
1376
 
1600
- :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{
1601
- -webkit-appearance:none;
1602
- appearance:none;
1603
- }
1377
+ .tds-modal-subtitle{
1378
+ grid-row:2;
1379
+ grid-column:1;
1380
+ margin:0;
1381
+ font-size:var(--t-font-size-md);
1382
+ font-weight:var(--t-font-weight-medium);
1383
+ line-height:140%;
1384
+ color:var(--t-text-color-secondary);
1385
+ }
1604
1386
 
1605
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1606
- inline-size:1em;
1607
- block-size:2em;
1608
- }
1609
- @supports (field-sizing: content){
1610
- .tds-input--auto-width{
1611
- inline-size:-moz-fit-content;
1612
- inline-size:fit-content;
1613
- min-inline-size:min(100%, 122px);
1387
+ .tds-modal-close{
1388
+ grid-row:1;
1389
+ grid-column:2;
1390
+ align-self:center;
1391
+ color:var(--t-icon-color-dim);
1392
+ }
1393
+
1394
+ .tds-modal-body{
1395
+ padding-block:var(--t-spacing-3);
1396
+ padding-inline:var(--t-spacing-4);
1397
+ }
1398
+
1399
+ .tds-modal-body--full-width{
1400
+ padding-inline:0;
1401
+ }
1402
+
1403
+ .tds-modal-footer{
1404
+ display:flex;
1405
+ gap:var(--t-spacing-2);
1406
+ align-items:center;
1407
+ justify-content:flex-end;
1408
+ padding-block:var(--t-spacing-3);
1409
+ padding-inline:var(--t-spacing-4);
1410
+ border-top:1px solid var(--t-border-color);
1411
+ }
1412
+
1413
+ .tds-modal-footer > [slot="start"]{
1414
+ margin-inline-end:auto;
1415
+ }
1416
+
1417
+ @media (min-width: 720px){
1418
+ .tds-modal-overlay{
1419
+ --tds-modal-min-margin-block:0;
1614
1420
  }
1615
1421
 
1616
- .tds-input--auto-width input{
1617
- field-sizing:content;
1618
- inline-size:auto;
1422
+ .tds-modal-footer{
1423
+ position:sticky;
1424
+ bottom:0;
1425
+ background:var(--t-surface-color-card);
1426
+ border-end-start-radius:var(--t-border-radius-lg);
1427
+ border-end-end-radius:var(--t-border-radius-lg);
1619
1428
  }
1620
1429
  }
1621
1430
 
@@ -1752,6 +1561,29 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1752
1561
  --tds-radio-description-line-height:1.3;
1753
1562
  }
1754
1563
 
1564
+
1565
+ :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{
1566
+ -webkit-appearance:none;
1567
+ appearance:none;
1568
+ }
1569
+
1570
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1571
+ inline-size:1em;
1572
+ block-size:2em;
1573
+ }
1574
+ @supports (field-sizing: content){
1575
+ .tds-input--auto-width{
1576
+ inline-size:-moz-fit-content;
1577
+ inline-size:fit-content;
1578
+ min-inline-size:min(100%, 122px);
1579
+ }
1580
+
1581
+ .tds-input--auto-width input{
1582
+ field-sizing:content;
1583
+ inline-size:auto;
1584
+ }
1585
+ }
1586
+
1755
1587
  .tds-input:has(textarea){
1756
1588
  --tds-input-padding-block:6px;
1757
1589
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -1921,357 +1753,525 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1921
1753
  cursor:var(--tds-toggle-switch-cursor);
1922
1754
  }
1923
1755
 
1924
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1925
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1926
- }
1756
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1757
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1758
+ }
1759
+
1760
+ .tds-toggle-switch:has(input:checked){
1761
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1762
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1763
+ }
1764
+
1765
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1766
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1767
+ }
1768
+
1769
+ .tds-toggle-switch:has(input:disabled){
1770
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1771
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1772
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1773
+ --tds-toggle-switch-cursor:not-allowed;
1774
+ }
1775
+
1776
+ .tds-toggle-switch-track{
1777
+ position:relative;
1778
+ flex-shrink:0;
1779
+ width:var(--tds-toggle-switch-track-width);
1780
+ height:var(--tds-toggle-switch-track-height);
1781
+ background-color:var(--tds-toggle-switch-track-background-color);
1782
+ border-radius:var(--t-border-radius-round);
1783
+ transition:var(--tds-toggle-switch-track-transition);
1784
+ }
1785
+
1786
+ .tds-toggle-switch-track::before{
1787
+ position:absolute;
1788
+ top:var(--t-spacing-fourth);
1789
+ left:var(--t-spacing-fourth);
1790
+ width:var(--tds-toggle-switch-thumb-size);
1791
+ height:var(--tds-toggle-switch-thumb-size);
1792
+ content:"";
1793
+ background-color:#fff;
1794
+ border-radius:var(--t-border-radius-round);
1795
+ transform:var(--tds-toggle-switch-thumb-transform);
1796
+ transition:var(--tds-toggle-switch-thumb-transition);
1797
+ }
1798
+
1799
+ @media (prefers-reduced-motion: reduce){
1800
+
1801
+ .tds-toggle-switch-track{
1802
+ --tds-toggle-switch-track-transition:none;
1803
+ --tds-toggle-switch-thumb-transition:none;
1804
+ }
1805
+ }
1806
+
1807
+ .tds-toggle-switch-description{
1808
+ display:flex;
1809
+ grid-area:2 / 2;
1810
+ align-items:flex-start;
1811
+ padding-inline-start:var(--t-spacing-1);
1812
+ margin:0;
1813
+ font-size:var(--tds-toggle-switch-description-font-size);
1814
+ line-height:var(--tds-toggle-switch-description-line-height);
1815
+ color:var(--tds-toggle-switch-description-color);
1816
+ cursor:text;
1817
+ }
1818
+
1819
+ .tds-toggle-switch--sm{
1820
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1821
+ --tds-toggle-switch-line-height:1.35;
1822
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1823
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1824
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1825
+ --tds-toggle-switch-description-line-height:1.3;
1826
+ }
1827
+
1828
+ .tds-toggle-switch--hide-label{
1829
+ --tds-toggle-switch-display:inline-flex;
1830
+ }
1831
+
1832
+
1833
+ @media (prefers-reduced-motion: no-preference){
1834
+
1835
+ :root{
1836
+ interpolate-size:allow-keywords;
1837
+ }
1838
+ }
1839
+
1840
+ @layer tds-component{
1841
+ tds-sidenav,
1842
+ .tds-sidenav{
1843
+ --tds-sidenav-indent:12px;
1844
+ --tds-sidenav-item-depth:0;
1845
+
1846
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1847
+
1848
+ --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;
1849
+ --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;
1850
+ --tds-sidenav-collapse-closed-opacity:0;
1851
+ --tds-sidenav-collapse-open-opacity:1;
1852
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1853
+ --tds-sidenav-collapse-open-transform:translateY(0);
1854
+
1855
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1856
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1857
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1858
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1859
+
1860
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1861
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1862
+ --tds-sidenav-item-nested-background-selected:transparent;
1863
+
1864
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1865
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1866
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1867
+
1868
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1869
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1870
+ }
1871
+
1872
+ @media (prefers-reduced-motion: reduce){
1873
+ tds-sidenav,
1874
+ .tds-sidenav{
1875
+ --tds-sidenav-collapse-transition-enter:none;
1876
+ --tds-sidenav-collapse-transition-exit:none;
1877
+ --tds-sidenav-collapse-closed-transform:none;
1878
+ --tds-sidenav-collapse-open-transform:none;
1879
+ }
1880
+ }
1881
+
1882
+ .tds-sidenav--theme-gray{
1883
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1884
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1885
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1886
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1887
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1888
+ }
1889
+ }
1890
+
1891
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1892
+ display:flex;
1893
+ }
1894
+
1895
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1896
+ flex-direction:column;
1897
+ gap:var(--t-spacing-half);
1898
+ width:100%;
1899
+ }
1900
+
1901
+ .tds-sidenav-section-list{
1902
+ width:100%;
1903
+ padding:0;
1904
+ margin:0;
1905
+ list-style:none;
1906
+ }
1907
+
1908
+ .tds-sidenav-section-header{
1909
+ display:flex;
1910
+ align-items:baseline;
1911
+ justify-content:space-between;
1912
+ padding-top:var(--t-spacing-2);
1913
+ }
1914
+
1915
+ .tds-sidenav-section-header h2{
1916
+ margin:0;
1917
+ font-size:var(--t-font-size-sm);
1918
+ font-weight:var(--t-font-weight-semibold);
1919
+ line-height:1.35;
1920
+ color:var(--t-text-color-secondary);
1921
+ text-transform:uppercase;
1922
+ }
1923
+
1924
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1925
+ padding-top:0;
1926
+ }
1927
+
1928
+ .tds-sidenav-section-header [slot="label-actions"]{
1929
+ display:flex;
1930
+ gap:var(--t-spacing-half);
1931
+ align-items:center;
1932
+ }
1933
+
1934
+ .tds-sidenav-section [slot="section-actions"]{
1935
+ display:flex;
1936
+ gap:12px;
1937
+ align-items:center;
1938
+ min-height:42px;
1939
+ padding:var(--t-spacing-1) 0;
1940
+ }
1941
+
1942
+ .tds-sidenav-section-list,
1943
+ .tds-sidenav-item{
1944
+ width:100%;
1945
+ padding:0;
1946
+ margin:0;
1947
+ }
1948
+
1949
+ .tds-sidenav-item :is(a,button){
1950
+ position:relative;
1951
+ display:flex;
1952
+ gap:12px;
1953
+ align-items:center;
1954
+ width:100%;
1955
+ padding:12px;
1956
+ overflow:hidden;
1957
+ font-size:var(--t-font-size-sm);
1958
+ line-height:18px;
1959
+ color:var(--t-text-color-headline);
1960
+ white-space:nowrap;
1961
+ text-decoration:none;
1962
+ -webkit-appearance:none;
1963
+ -moz-appearance:none;
1964
+ appearance:none;
1965
+ cursor:pointer;
1966
+ background-color:var(--tds-sidenav-item-background, transparent);
1967
+ border:0;
1968
+ border-radius:var(--t-border-radius);
1969
+ transition:var(--tds-sidenav-item-transition);
1970
+ }
1971
+
1972
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1973
+ display:block;
1974
+ flex:1;
1975
+ overflow:hidden;
1976
+ text-overflow:ellipsis;
1977
+ text-align:left;
1978
+ white-space:nowrap;
1979
+ }
1980
+
1981
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1982
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1983
+ color:var(--t-text-color-headline);
1984
+ text-decoration:none;
1985
+ }
1927
1986
 
1928
- .tds-toggle-switch:has(input:checked){
1929
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1930
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1931
- }
1987
+ :is(.tds-sidenav-item :is(a,button)):active{
1988
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1989
+ }
1932
1990
 
1933
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1934
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1991
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1992
+ overflow:hidden;
1993
+ color:var(--tds-sidenav-item-icon-color);
1935
1994
  }
1936
1995
 
1937
- .tds-toggle-switch:has(input:disabled){
1938
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1939
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1940
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1941
- --tds-toggle-switch-cursor:not-allowed;
1942
- }
1996
+ :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{
1997
+ display:block;
1998
+ width:var(--tds-sidenav-item-icon-size);
1999
+ height:var(--tds-sidenav-item-icon-size);
2000
+ }
1943
2001
 
1944
- .tds-toggle-switch-track{
1945
- position:relative;
1946
- flex-shrink:0;
1947
- width:var(--tds-toggle-switch-track-width);
1948
- height:var(--tds-toggle-switch-track-height);
1949
- background-color:var(--tds-toggle-switch-track-background-color);
1950
- border-radius:var(--t-border-radius-round);
1951
- transition:var(--tds-toggle-switch-track-transition);
1952
- }
2002
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2003
+ --tds-sidenav-indent:19px;
2004
+ }
1953
2005
 
1954
- .tds-toggle-switch-track::before{
1955
- position:absolute;
1956
- top:var(--t-spacing-fourth);
1957
- left:var(--t-spacing-fourth);
1958
- width:var(--tds-toggle-switch-thumb-size);
1959
- height:var(--tds-toggle-switch-thumb-size);
1960
- content:"";
1961
- background-color:#fff;
1962
- border-radius:var(--t-border-radius-round);
1963
- transform:var(--tds-toggle-switch-thumb-transform);
1964
- transition:var(--tds-toggle-switch-thumb-transition);
1965
- }
2006
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2007
+ visibility:visible;
2008
+ block-size:auto;
2009
+ opacity:1;
2010
+ }
1966
2011
 
1967
- @media (prefers-reduced-motion: reduce){
2012
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2013
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2014
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1968
2015
 
1969
- .tds-toggle-switch-track{
1970
- --tds-toggle-switch-track-transition:none;
1971
- --tds-toggle-switch-thumb-transition:none;
1972
- }
2016
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2017
+ font-weight:var(--t-font-weight-semibold);
1973
2018
  }
1974
2019
 
1975
- .tds-toggle-switch-description{
1976
- display:flex;
1977
- grid-area:2 / 2;
1978
- align-items:flex-start;
1979
- padding-inline-start:var(--t-spacing-1);
1980
- margin:0;
1981
- font-size:var(--tds-toggle-switch-description-font-size);
1982
- line-height:var(--tds-toggle-switch-description-line-height);
1983
- color:var(--tds-toggle-switch-description-color);
1984
- cursor:text;
1985
- }
1986
-
1987
- .tds-toggle-switch--sm{
1988
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1989
- --tds-toggle-switch-line-height:1.35;
1990
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1991
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1992
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1993
- --tds-toggle-switch-description-line-height:1.3;
1994
- }
1995
-
1996
- .tds-toggle-switch--hide-label{
1997
- --tds-toggle-switch-display:inline-flex;
1998
- }
2020
+ .tds-sidenav-item:has(.tds-sidenav-section){
2021
+ display:flex;
2022
+ flex-direction:column;
2023
+ gap:var(--t-spacing-half);
2024
+ }
1999
2025
 
2000
- @layer t-critical{
2001
- tds-page-header:not(.hydrated){
2002
- display:none;
2026
+ .tds-sidenav-item .tds-sidenav-section-list{
2027
+ --tds-sidenav-item-depth:1;
2028
+ gap:0;
2003
2029
  }
2004
- }
2005
2030
 
2006
- @layer t-component{
2007
- .tds-page-header{
2008
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2009
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2010
- --tds-page-header-color:var(--t-text-color);
2011
- --tds-page-header-bottom-border-color:transparent;
2012
- --tds-page-header-headline-color:var(--t-text-color-headline);
2013
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2014
- --tds-page-header-padding-x:var(--t-spacing-2);
2015
- --tds-page-header-padding-y:var(--t-spacing-2);
2016
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2017
- --tds-page-header-nav-gap:var(--t-spacing-1);
2018
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
2019
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2020
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2021
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2022
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2023
- --tds-page-header-nav-item-border-width:1px;
2031
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2032
+ visibility:hidden;
2033
+ block-size:0;
2034
+ overflow-y:clip;
2035
+ opacity:0;
2036
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2037
+ }
2024
2038
 
2025
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2026
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2039
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2040
+ --tds-sidenav-item-depth:2;
2041
+ }
2027
2042
 
2028
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2029
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2030
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2043
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2044
+ min-height:var(--t-element-size-2xl);
2045
+ padding-block:9px;
2046
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2047
+ line-height:1;
2048
+ background-color:transparent;
2049
+ }
2031
2050
 
2032
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2033
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2051
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2052
+ position:absolute;
2053
+ top:0;
2054
+ bottom:0;
2055
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2056
+ width:2px;
2057
+ content:"";
2058
+ background-color:var(--tds-sidenav-item-nested-border-color);
2059
+ transition:var(--tds-sidenav-item-transition);
2060
+ }
2034
2061
 
2035
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2036
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2037
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2062
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2063
+ position:absolute;
2064
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2065
+ z-index:-1;
2066
+ height:100%;
2067
+ content:"";
2068
+ background-color:var(--tds-sidenav-item-nested-background);
2069
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2070
+ transition:var(--tds-sidenav-item-transition);
2071
+ }
2038
2072
 
2039
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2040
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2041
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2042
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2043
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2044
- }
2073
+ :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)){
2074
+ display:block;
2075
+ text-align:left;
2076
+ white-space:normal;
2077
+ }
2045
2078
 
2046
- .tds-page-header--profile{
2047
- --tds-page-header-padding-y:20px;
2048
- }
2079
+ :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{
2080
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2081
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2082
+ }
2049
2083
 
2050
- @supports (color: light-dark(#fff, #000)){
2051
- .tds-page-header{
2052
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2053
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2054
- }
2055
- }
2084
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2085
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2086
+ }
2056
2087
 
2057
- @media (min-width: 600px){
2058
- .tds-page-header{
2059
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2060
- --tds-page-header-color:var(--t-text-color-secondary);
2061
- --tds-page-header-bottom-border-color:var(--t-border-color);
2062
- --tds-page-header-padding-x:var(--t-spacing-3);
2063
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2064
- --tds-page-header-nav-gap:var(--t-spacing-half);
2065
- --tds-page-header-nav-background:transparent;
2066
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2067
- --tds-page-header-nav-item-border-width:1px;
2068
- --tds-page-header-nav-item-color:var(--t-text-color);
2069
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2070
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2071
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2072
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2073
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2074
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2088
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2089
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2090
+ font-weight:var(--t-font-weight-medium);
2075
2091
  }
2076
- }
2077
- }
2078
2092
 
2079
- .tds-page-header{
2093
+ .tds-sidenav-responsive-header{
2080
2094
  display:flex;
2081
- flex-direction:column;
2082
- padding-top:var(--tds-page-header-padding-y);
2083
- color:var(--tds-page-header-color);
2084
- background:var(--tds-page-header-background-color);
2085
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2095
+ gap:var(--t-spacing-2);
2096
+ align-items:center;
2097
+ width:100%;
2086
2098
  }
2087
2099
 
2088
- .tds-page-header:not(.has-nav){
2089
- padding-bottom:var(--tds-page-header-padding-y);
2100
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2101
+ order:0;
2090
2102
  }
2091
2103
 
2092
- .tds-page-header.inactive{
2093
- background:var(--tds-page-header-background-color-inactive);
2104
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2105
+ flex:1;
2106
+ order:1;
2107
+ margin:0;
2108
+ font-size:var(--t-font-size-lg);
2109
+ font-weight:var(--t-font-weight-medium);
2110
+ color:var(--t-text-color-headline);
2111
+ }
2112
+
2113
+ @media (max-width: 719px){
2114
+ .tds-sidenav-collapse{
2115
+ z-index:10001;
2116
+ display:none;
2117
+ max-width:min(448px, calc(100vw - 48px));
2118
+ padding:0;
2119
+ margin:12px 0;
2120
+ position-area:bottom span-right;
2121
+ overflow:hidden;
2122
+ outline:0;
2123
+ background:var(--t-surface-color-card);
2124
+ border:0;
2125
+ border-radius:6px;
2126
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2127
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2128
+ transform:var(--tds-sidenav-collapse-open-transform);
2129
+ transition:var(--tds-sidenav-collapse-transition-enter);
2130
+ will-change:transform;
2094
2131
  }
2095
2132
 
2096
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2133
+ .tds-sidenav-scroll-container{
2134
+ --webkit-overflow-scrolling:touch;
2135
+ display:block;
2097
2136
  width:100%;
2137
+ height:-moz-fit-content;
2138
+ height:fit-content;
2139
+ padding:var(--t-spacing-2);
2140
+ overflow-y:auto;
2098
2141
  }
2099
2142
 
2100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2101
- display:flex;
2102
- flex-flow:row wrap;
2103
- gap:var(--t-spacing-half) var(--t-spacing-1);
2104
- align-items:flex-start;
2105
- justify-content:flex-start;
2106
- min-width:0;
2143
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2144
+ display:none;
2107
2145
  }
2108
-
2109
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
2146
+ @supports selector(:popover-open){
2147
+ .tds-sidenav-collapse:popover-open{
2110
2148
  display:flex;
2111
- gap:var(--tds-page-header-nav-gap);
2112
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2113
- margin:0 0 -1px;
2114
- overflow:auto;
2115
- list-style:none;
2116
- background:var(--tds-page-header-nav-background);
2117
2149
  }
2118
2150
 
2119
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2120
- position:relative;
2121
- display:inline-flex;
2122
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2123
- font-size:var(--t-font-size-sm);
2124
- line-height:22px;
2125
- color:var(--tds-page-header-nav-item-color);
2126
- white-space:nowrap;
2127
- text-decoration:none;
2128
- -webkit-appearance:none;
2129
- -moz-appearance:none;
2130
- appearance:none;
2131
- cursor:pointer;
2132
- outline-offset:-2px;
2133
- background-color:var(--tds-page-header-nav-item-background-color);
2134
- background-clip:padding-box;
2135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2151
+ .tds-sidenav-collapse:not(:popover-open){
2152
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2153
+ transition:var(--tds-sidenav-collapse-transition-exit);
2138
2154
  }
2139
2155
 
2140
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2141
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2142
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2143
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2144
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2156
+ @starting-style{
2157
+ .tds-sidenav-collapse:popover-open{
2158
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2159
+ transform:var(--tds-sidenav-collapse-closed-transform);
2145
2160
  }
2161
+ }
2162
+ }
2163
+ @supports not selector(:popover-open){
2164
+ .tds-sidenav-collapse.\:popover-open{
2165
+ display:flex;
2166
+ }
2146
2167
 
2147
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2148
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2149
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2150
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2151
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2152
- }
2153
-
2154
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2155
- background-color:var(--tds-page-header-nav-item-background-color-active);
2156
- border-color:var(--tds-page-header-nav-item-border-color-active);
2157
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2158
- }
2159
-
2160
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2161
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2162
- color:var(--tds-page-header-nav-item-color-disabled);
2163
- cursor:not-allowed;
2164
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2165
- opacity:1;
2166
- }
2168
+ .tds-sidenav-collapse:not(.\:popover-open){
2169
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2170
+ transition:var(--tds-sidenav-collapse-transition-exit);
2171
+ }
2172
+ }
2173
+ }
2167
2174
 
2168
- @media (min-width: 600px){
2169
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2170
- position:absolute;
2171
- inset:auto -1px -1px;
2172
- height:1px;
2173
- pointer-events:none;
2174
- content:"";
2175
- background-color:var(--tds-page-header-bottom-border-color);
2176
- }
2177
- }
2175
+ @media (min-width: 720px){
2176
+ .tds-sidenav-responsive-header{
2177
+ display:none;
2178
+ }
2179
+ }
2178
2180
 
2179
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2180
- position:relative;
2181
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2182
+ display:none;
2181
2183
  }
2182
2184
 
2183
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2184
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2185
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2186
- }
2185
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2186
+ display:block;
2187
+ }
2187
2188
 
2188
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2189
- position:absolute;
2190
- top:-5px;
2191
- right:-2px;
2192
- width:10px;
2193
- height:10px;
2194
- content:"";
2195
- background:var(--tds-page-header-nav-item-indicator-color);
2196
- border-radius:50%;
2197
- }
2189
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2190
+ display:flex;
2191
+ flex-direction:column;
2192
+ }
2198
2193
 
2199
- @media (prefers-reduced-motion: no-preference){
2200
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2201
- animation:indicator-pulse 1.25s ease infinite;
2202
- }
2203
- }
2194
+ .tds-radio-group{
2195
+ --tds-radio-group-font-size:var(--t-font-size-md);
2196
+ --tds-radio-group-line-height:1.4;
2197
+ --tds-radio-group-gap:var(--t-spacing-1);
2204
2198
 
2205
- .tds-page-header__title-bar{
2199
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2200
+ --tds-radio-group-description-line-height:1.35;
2201
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2202
+ --tds-radio-group-description-invalid-icon-display:none;
2206
2203
  display:flex;
2207
2204
  flex-direction:column;
2208
- gap:var(--t-spacing-2) var(--t-spacing-1);
2209
- align-items:flex-start;
2210
- justify-content:space-between;
2211
- padding:0 var(--tds-page-header-padding-x);
2212
- }
2213
-
2214
- .tds-page-header--profile > .tds-page-header__title-bar{
2215
- align-items:center;
2216
- }
2205
+ gap:0;
2206
+ padding:0;
2207
+ margin:0;
2217
2208
 
2218
- .tds-page-header__primary{
2219
- width:100%;
2209
+ font-size:var(--tds-radio-group-font-size);
2210
+ line-height:var(--tds-radio-group-line-height);
2211
+ border:0;
2220
2212
  }
2221
2213
 
2222
- .tds-page-header__primary h1{
2214
+ .tds-radio-group legend{
2215
+ float:left;
2216
+ padding:0;
2223
2217
  margin:0;
2224
- font-size:var(--tds-page-header-headline-font-size);
2225
- font-weight:var(--t-font-weight-normal);
2226
- line-height:32px;
2227
- color:var(--tds-page-header-headline-color);
2228
- overflow-wrap:break-word;
2229
2218
  }
2230
2219
 
2231
- @media (min-width: 960px){
2232
- .tds-page-header__primary{
2233
- flex:1 1 max-content;
2234
- width:auto;
2235
- min-width:0;
2236
- max-width:100%;
2220
+ .tds-radio-group[aria-invalid="true"]{
2221
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2222
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2237
2223
  }
2238
2224
 
2239
- .tds-page-header__title-bar,
2240
- .tds-page-header--profile .tds-page-header__title-bar{
2241
- flex-flow:row nowrap;
2242
- row-gap:12px;
2243
- align-items:flex-start;
2244
- }
2245
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2246
- width:auto;
2225
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2226
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2247
2227
  }
2248
2228
 
2249
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2250
- justify-content:flex-end;
2229
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2230
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2231
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2232
+ }
2233
+
2234
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2235
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2236
+ }
2237
+
2238
+ .tds-radio-group:has(input:required) legend::after{
2239
+ margin-left:.25ch;
2240
+ color:var(--t-text-color-status-error);
2241
+ content:"*";
2251
2242
  }
2252
- }
2253
2243
 
2254
- .tds-page-header-phone,
2255
- .tds-page-header-email{
2256
- color:var(--tds-page-header-color);
2257
- white-space:nowrap;
2244
+ .tds-radio-group-fields{
2245
+ display:flex;
2246
+ flex-direction:column;
2247
+ gap:var(--tds-radio-group-gap);
2248
+ align-items:flex-start;
2249
+ margin-top:var(--t-spacing-1);
2258
2250
  }
2259
- .tds-page-header-email{
2260
- max-width:100%;
2261
- overflow:hidden;
2262
- text-overflow:ellipsis;
2251
+
2252
+ .tds-radio-group-description{
2253
+ display:flex;
2254
+ gap:var(--t-spacing-half);
2255
+ align-items:flex-start;
2256
+ margin:var(--t-spacing-fourth) 0 0;
2257
+ font-size:var(--tds-radio-group-description-font-size);
2258
+ line-height:var(--tds-radio-group-description-line-height);
2259
+ color:var(--tds-radio-group-description-color);
2260
+ cursor:text;
2263
2261
  }
2264
2262
 
2265
- @keyframes indicator-pulse{
2266
- 0%{
2267
- opacity:.3;
2268
- transform:scale(.9);
2263
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2264
+ display:var(--tds-radio-group-description-invalid-icon-display);
2265
+ flex-shrink:0;
2266
+ margin-top:calc(.5lh - .5em);
2267
+ line-height:var(--tds-radio-group-description-line-height);
2269
2268
  }
2270
2269
 
2271
- 100%{
2272
- opacity:0;
2273
- transform:scale(1.75);
2274
- }
2270
+ .tds-radio-group--sm{
2271
+ --tds-radio-group-line-height:1.35;
2272
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2273
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2274
+ --tds-radio-group-description-line-height:1.3;
2275
2275
  }
2276
2276
 
2277
2277
  .tds-input{
@@ -4526,7 +4526,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4526
4526
  border-color:var(--tds-btn-border-color-hover);
4527
4527
  }
4528
4528
 
4529
- .tds-btn:active,.tds-btn.active{
4529
+ .tds-btn:active,.tds-btn.active,.tds-btn[aria-pressed="true"]{
4530
4530
  color:var(--tds-btn-color-active);
4531
4531
  background-color:var(--tds-btn-bg-active);
4532
4532
  border-color:var(--tds-btn-border-color-active);