@planningcenter/tapestry 4.9.0-rc.6 → 4.9.0

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 (8) hide show
  1. package/dist/components/dropdown/Dropdown.d.ts +2 -0
  2. package/dist/components/dropdown/Dropdown.d.ts.map +1 -1
  3. package/dist/components/dropdown/Dropdown.js.map +1 -1
  4. package/dist/reactRender.css +1295 -1295
  5. package/dist/reactRender.css.map +1 -1
  6. package/dist/reactRenderLegacy.css +1295 -1295
  7. package/dist/reactRenderLegacy.css.map +1 -1
  8. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,984 +677,707 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
+ .tds-checkbox{
681
+ --tds-checkbox-font-size:var(--t-font-size-md);
682
+ --tds-checkbox-cursor:pointer;
683
+ --tds-checkbox-line-height:1.4;
684
+ --tds-checkbox-transition-property:background-color, border-color;
680
685
 
681
- @media (prefers-reduced-motion: no-preference){
682
-
683
- :root{
684
- interpolate-size:allow-keywords;
685
- }
686
- }
687
-
688
- @layer tds-component{
689
- tds-sidenav,
690
- .tds-sidenav{
691
- --tds-sidenav-indent:12px;
692
- --tds-sidenav-item-depth:0;
693
-
694
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
695
-
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);
702
-
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);
707
-
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;
711
-
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);
715
-
716
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
718
- }
719
-
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;
727
- }
728
- }
729
-
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
- }
737
- }
686
+ --tds-checkbox-input-size:var(--t-element-size-md);
687
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
688
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
689
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
738
690
 
739
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
- display:flex;
741
- }
691
+ --tds-checkbox-input-icon:none;
692
+ --tds-checkbox-input-icon-visibility:hidden;
693
+ --tds-checkbox-input-icon-opacity:0;
694
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
742
695
 
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
- }
696
+ --tds-checkbox-label-color:var(--t-form-color);
748
697
 
749
- .tds-sidenav-section-list{
750
- width:100%;
751
- padding:0;
752
- margin:0;
753
- list-style:none;
754
- }
698
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
699
+ --tds-checkbox-description-line-height:1.35;
700
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
701
+ --tds-checkbox-description-invalid-icon-display:none;
755
702
 
756
- .tds-sidenav-section-header{
757
- display:flex;
758
- align-items:baseline;
759
- justify-content:space-between;
760
- padding-top:var(--t-spacing-2);
703
+ position:relative;
704
+ display:inline-grid;
705
+ grid-template-columns:auto;
706
+ grid-auto-columns:1fr;
707
+ gap:var(--t-spacing-fourth) 0;
708
+ line-height:var(--tds-checkbox-line-height);
709
+ -webkit-user-select:none;
710
+ -moz-user-select:none;
711
+ user-select:none;
761
712
  }
762
713
 
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
- }
771
-
772
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
- padding-top:0;
714
+ .tds-checkbox label{
715
+ grid-area:1 / 2;
716
+ padding-inline-start:var(--t-spacing-1);
717
+ font-size:var(--tds-checkbox-font-size);
718
+ font-weight:var(--t-font-weight-normal);
719
+ color:var(--tds-checkbox-label-color);
720
+ cursor:var(--tds-checkbox-cursor);
774
721
  }
775
722
 
776
- .tds-sidenav-section-header [slot="label-actions"]{
723
+ .tds-checkbox tds-indeterminate{
777
724
  display:flex;
778
- gap:var(--t-spacing-half);
779
- align-items:center;
780
725
  }
781
726
 
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){
727
+ .tds-checkbox input[type="checkbox"]{
798
728
  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;
729
+ width:1em;
730
+ height:1em;
731
+ margin:calc((1lh - 1em) / 2) 0 0;
732
+ font-size:var(--tds-checkbox-font-size);
733
+ line-height:inherit;
810
734
  -webkit-appearance:none;
811
735
  -moz-appearance:none;
812
736
  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);
737
+ cursor:var(--tds-checkbox-cursor);
738
+ background-color:var(--tds-checkbox-input-background-color);
739
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
740
+ border-radius:var(--tds-checkbox-input-border-radius);
741
+ transition-timing-function:var(--t-ease-in-out);
742
+ transition-duration:var(--t-duration-200);
743
+ transition-property:var(--tds-checkbox-transition-property);
818
744
  }
819
745
 
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;
746
+ :is(.tds-checkbox input[type="checkbox"])::before{
747
+ position:absolute;
748
+ top:50%;
749
+ left:50%;
750
+ visibility:var(--tds-checkbox-input-icon-visibility);
751
+ width:100%;
752
+ height:100%;
753
+ content:"";
754
+ background-color:var(--tds-checkbox-input-icon-fill);
755
+ border-radius:var(--tds-checkbox-input-border-radius);
756
+ opacity:var(--tds-checkbox-input-icon-opacity);
757
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
758
+ mask-image:var(--tds-checkbox-input-icon);
759
+ -webkit-mask-repeat:no-repeat;
760
+ mask-repeat:no-repeat;
761
+ -webkit-mask-size:contain;
762
+ mask-size:contain;
763
+ transform:translate(-50%, -50%);
827
764
  }
828
765
 
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;
766
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
767
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
768
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
833
769
  }
834
770
 
835
- :is(.tds-sidenav-item :is(a,button)):active{
836
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
771
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
772
+ outline:var(--t-focus-ring-outline);
773
+ outline-offset:var(--t-focus-ring-offset);
837
774
  }
838
775
 
839
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
- overflow:hidden;
841
- color:var(--tds-sidenav-item-icon-color);
776
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
777
+ pointer-events:none;
842
778
  }
843
779
 
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
- }
780
+ @media (prefers-reduced-motion: reduce){
849
781
 
850
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
- --tds-sidenav-indent:19px;
782
+ .tds-checkbox input[type="checkbox"]{
783
+ --tds-checkbox-transition-property:none;
784
+ }
852
785
  }
853
786
 
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;
787
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
788
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
789
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
790
+ --tds-checkbox-input-icon-visibility:visible;
791
+ --tds-checkbox-input-icon-opacity:1;
792
+ }
793
+
794
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
795
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
796
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
858
797
  }
859
798
 
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);
799
+ .tds-checkbox:has(input:checked){
800
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
801
+ }
863
802
 
864
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
- font-weight:var(--t-font-weight-semibold);
803
+ .tds-checkbox:has(input:indeterminate){
804
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
866
805
  }
867
806
 
868
- .tds-sidenav-item:has(.tds-sidenav-section){
869
- display:flex;
870
- flex-direction:column;
871
- gap:var(--t-spacing-half);
807
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
808
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
809
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
810
+ --tds-checkbox-description-invalid-icon-display:inline-block;
872
811
  }
873
812
 
874
- .tds-sidenav-item .tds-sidenav-section-list{
875
- --tds-sidenav-item-depth:1;
876
- gap:0;
877
- }
813
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
814
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
815
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
816
+ }
878
817
 
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);
818
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
819
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
820
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
885
821
  }
886
822
 
887
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
- --tds-sidenav-item-depth:2;
823
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
824
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
825
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
826
+ }
827
+
828
+ .tds-checkbox:has(input:required) label::after{
829
+ margin-left:.25ch;
830
+ color:var(--t-text-color-status-error);
831
+ content:"*";
889
832
  }
890
833
 
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;
834
+ .tds-checkbox:has(input:disabled){
835
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
836
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
837
+
838
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
839
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
840
+ --tds-checkbox-cursor:not-allowed;
841
+ }
842
+
843
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
844
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
897
845
  }
898
846
 
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
- }
847
+ .tds-checkbox-description{
848
+ display:flex;
849
+ grid-area:2 / 2;
850
+ gap:var(--t-spacing-half);
851
+ align-items:flex-start;
852
+ padding-inline-start:var(--t-spacing-1);
853
+ margin:0;
854
+ font-size:var(--tds-checkbox-description-font-size);
855
+ line-height:var(--tds-checkbox-description-line-height);
856
+ color:var(--tds-checkbox-description-color);
857
+ cursor:text;
858
+ }
909
859
 
910
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
860
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
861
+ display:var(--tds-checkbox-description-invalid-icon-display);
862
+ flex-shrink:0;
863
+ margin-top:calc(.5lh - .5em);
864
+ line-height:var(--tds-checkbox-description-line-height);
865
+ }
866
+
867
+ .tds-checkbox--sm{
868
+ --tds-checkbox-line-height:1.35;
869
+ --tds-checkbox-input-size:var(--t-element-size-sm);
870
+ --tds-checkbox-font-size:var(--t-font-size-sm);
871
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
872
+ --tds-checkbox-description-line-height:1.3;
873
+ }
874
+
875
+ .tds-button-group{
876
+ display:inline-flex;
877
+ }
878
+ .tds-button-group > .tds-btn{
879
+ --tds-button-group-item-z-index:1;
880
+
881
+ position:relative;
882
+ z-index:var(--tds-button-group-item-z-index);
883
+ border-radius:0;
884
+ }
885
+ :is(.tds-button-group > .tds-btn):not(:first-child){
886
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
887
+ }
888
+ :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{
911
889
  position:absolute;
912
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
- z-index:-1;
914
- height:100%;
890
+ inset-block:calc(var(--tds-btn-border-width) * -1);
891
+ width:var(--tds-btn-border-width);
892
+ pointer-events:none;
915
893
  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);
919
- }
920
-
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;
894
+ background-color:var(--t-border-color-white);
925
895
  }
926
-
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);
896
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
897
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
930
898
  }
931
-
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);
899
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
900
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
934
901
  }
935
-
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);
902
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
903
+ --tds-button-group-item-z-index:2;
904
+ }
905
+ :is(.tds-button-group > .tds-btn):focus-visible{
906
+ --tds-button-group-item-z-index:5;
939
907
  }
908
+ .tds-button-group > .tds-btn:first-child{
909
+ border-start-start-radius:var(--tds-btn-border-radius);
910
+ border-end-start-radius:var(--tds-btn-border-radius);
911
+ }
912
+ .tds-button-group > .tds-btn:last-child{
913
+ border-start-end-radius:var(--tds-btn-border-radius);
914
+ border-end-end-radius:var(--tds-btn-border-radius);
915
+ }
940
916
 
941
- .tds-sidenav-responsive-header{
917
+ .tds-currency-input-control{
942
918
  display:flex;
943
- gap:var(--t-spacing-2);
919
+ gap:var(--t-spacing-half);
944
920
  align-items:center;
945
- width:100%;
921
+ inline-size:100%;
922
+ min-block-size:var(--tds-field-min-height);
923
+ padding-inline:var(--tds-field-padding-inline);
924
+ font-size:var(--tds-field-font-size);
925
+ color:var(--tds-field-color);
926
+ cursor:text;
927
+ outline:var(--t-focus-ring-width) solid transparent;
928
+ background-color:var(--tds-field-background-color);
929
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
930
+ border-radius:var(--t-form-border-radius);
931
+ transition-timing-function:var(--t-ease-in-out);
932
+ transition-duration:var(--t-duration-200);
933
+ transition-property:background-color, border-color, outline-color, outline-offset;
946
934
  }
947
935
 
948
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
- order:0;
936
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
937
+ border-color:var(--tds-field-border-color-hover);
950
938
  }
951
939
 
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);
940
+ .tds-currency-input-control:has(input:focus){
941
+ outline-color:var(--t-focus-ring-color);
942
+ outline-offset:var(--t-focus-ring-offset);
943
+ border-color:var(--tds-field-border-color-active);
959
944
  }
960
945
 
961
- @media (max-width: 719px){
962
- .tds-sidenav-collapse{
963
- z-index:10001;
964
- display:none;
965
- max-width:min(448px, calc(100vw - 48px));
946
+ .tds-currency-input-control input{
947
+ flex:1;
948
+ min-inline-size:0;
966
949
  padding:0;
967
- margin:12px 0;
968
- position-area:bottom span-right;
969
- overflow:hidden;
950
+ font-family:inherit;
951
+ font-size:inherit;
952
+ color:inherit;
953
+ -webkit-appearance:none;
954
+ -moz-appearance:none;
955
+ appearance:none;
970
956
  outline:0;
971
- background:var(--t-surface-color-card);
957
+ background-color:transparent;
972
958
  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
- }
980
-
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
959
  }
990
960
 
991
- .tds-sidenav-item :is(a, button) :is(.prefix){
992
- display:none;
993
- }
994
- @supports selector(:popover-open){
995
- .tds-sidenav-collapse:popover-open{
996
- display:flex;
961
+ :is(.tds-currency-input-control input)::-moz-placeholder{
962
+ color:var(--tds-field-placeholder-color);
963
+ -moz-user-select:none;
964
+ user-select:none;
997
965
  }
998
966
 
999
- .tds-sidenav-collapse:not(:popover-open){
1000
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
- transition:var(--tds-sidenav-collapse-transition-exit);
967
+ :is(.tds-currency-input-control input)::placeholder{
968
+ color:var(--tds-field-placeholder-color);
969
+ -webkit-user-select:none;
970
+ -moz-user-select:none;
971
+ user-select:none;
1002
972
  }
1003
973
 
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);
1008
- }
1009
- }
974
+ .tds-currency-input-control .tds-currency-input-prefix{
975
+ flex-shrink:0;
976
+ color:var(--t-text-color-secondary);
977
+ pointer-events:none;
978
+ -webkit-user-select:none;
979
+ -moz-user-select:none;
980
+ user-select:none;
1010
981
  }
1011
- @supports not selector(:popover-open){
1012
- .tds-sidenav-collapse.\:popover-open{
1013
- display:flex;
1014
- }
1015
982
 
1016
- .tds-sidenav-collapse:not(.\:popover-open){
1017
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
- transition:var(--tds-sidenav-collapse-transition-exit);
1019
- }
983
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
984
+ --tds-field-background-color:var(--t-form-background-color-error);
985
+ --tds-field-border-color:var(--t-form-border-color-error);
986
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1020
987
  }
1021
- }
1022
988
 
1023
- @media (min-width: 720px){
1024
- .tds-sidenav-responsive-header{
1025
- display:none;
1026
- }
1027
- }
989
+ .tds-currency-input-control:has(:disabled){
990
+ --tds-field-border-color:var(--t-form-border-color-disabled);
991
+ --tds-field-background-color:var(--t-form-background-color-disabled);
992
+ --tds-field-color:var(--t-form-color-disabled);
1028
993
 
1029
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
- display:none;
1031
- }
994
+ cursor:not-allowed;
995
+ }
1032
996
 
1033
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
- display:block;
997
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
998
+ color:var(--tds-field-color);
1035
999
  }
1036
1000
 
1037
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
- display:flex;
1039
- flex-direction:column;
1001
+ .tds-currency-input-control:has([readonly]){
1002
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1003
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1004
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1005
+ --tds-field-color:var(--t-form-color-readonly);
1006
+ }
1007
+
1008
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1009
+ border-color:var(--t-form-border-color-hover);
1040
1010
  }
1011
+ .tds-currency-input-currency-name--hidden{
1012
+ position:absolute;
1013
+ width:1px;
1014
+ height:1px;
1015
+ overflow:hidden;
1016
+ white-space:nowrap;
1017
+ clip-path:inset(50%);
1018
+ }
1041
1019
 
1042
- @layer t-critical{
1043
- tds-page-header:not(.hydrated){
1044
- display:none;
1045
- }
1020
+
1021
+ @media (prefers-reduced-motion: no-preference){
1022
+
1023
+ :root{
1024
+ interpolate-size:allow-keywords;
1046
1025
  }
1026
+ }
1047
1027
 
1048
- @layer t-component{
1049
- .tds-page-header{
1050
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1051
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1052
- --tds-page-header-color:var(--t-text-color);
1053
- --tds-page-header-bottom-border-color:transparent;
1054
- --tds-page-header-headline-color:var(--t-text-color-headline);
1055
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1056
- --tds-page-header-padding-x:var(--t-spacing-2);
1057
- --tds-page-header-padding-y:var(--t-spacing-2);
1058
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1059
- --tds-page-header-nav-gap:var(--t-spacing-1);
1060
- --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%);
1061
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1062
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1063
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1064
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1065
- --tds-page-header-nav-item-border-width:1px;
1028
+ @layer tds-component{
1029
+ tds-sidenav,
1030
+ .tds-sidenav{
1031
+ --tds-sidenav-indent:12px;
1032
+ --tds-sidenav-item-depth:0;
1066
1033
 
1067
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1068
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1034
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1069
1035
 
1070
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1071
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1072
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1036
+ --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;
1037
+ --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;
1038
+ --tds-sidenav-collapse-closed-opacity:0;
1039
+ --tds-sidenav-collapse-open-opacity:1;
1040
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1041
+ --tds-sidenav-collapse-open-transform:translateY(0);
1073
1042
 
1074
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1075
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1043
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1044
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1045
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1046
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1076
1047
 
1077
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1078
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1079
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1048
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1049
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1050
+ --tds-sidenav-item-nested-background-selected:transparent;
1080
1051
 
1081
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1082
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1083
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1084
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1085
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1086
- }
1052
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1053
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1054
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1087
1055
 
1088
- .tds-page-header--profile{
1089
- --tds-page-header-padding-y:20px;
1056
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1057
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1090
1058
  }
1091
1059
 
1092
- @supports (color: light-dark(#fff, #000)){
1093
- .tds-page-header{
1094
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1095
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1060
+ @media (prefers-reduced-motion: reduce){
1061
+ tds-sidenav,
1062
+ .tds-sidenav{
1063
+ --tds-sidenav-collapse-transition-enter:none;
1064
+ --tds-sidenav-collapse-transition-exit:none;
1065
+ --tds-sidenav-collapse-closed-transform:none;
1066
+ --tds-sidenav-collapse-open-transform:none;
1067
+ }
1096
1068
  }
1069
+
1070
+ .tds-sidenav--theme-gray{
1071
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1072
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1073
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1074
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1075
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1097
1076
  }
1077
+ }
1098
1078
 
1099
- @media (min-width: 600px){
1100
- .tds-page-header{
1101
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1102
- --tds-page-header-color:var(--t-text-color-secondary);
1103
- --tds-page-header-bottom-border-color:var(--t-border-color);
1104
- --tds-page-header-padding-x:var(--t-spacing-3);
1105
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1106
- --tds-page-header-nav-gap:var(--t-spacing-half);
1107
- --tds-page-header-nav-background:transparent;
1108
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1109
- --tds-page-header-nav-item-border-width:1px;
1110
- --tds-page-header-nav-item-color:var(--t-text-color);
1111
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1112
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1113
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1114
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1115
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1116
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1117
- }
1079
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1080
+ display:flex;
1081
+ }
1082
+
1083
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1084
+ flex-direction:column;
1085
+ gap:var(--t-spacing-half);
1086
+ width:100%;
1118
1087
  }
1088
+
1089
+ .tds-sidenav-section-list{
1090
+ width:100%;
1091
+ padding:0;
1092
+ margin:0;
1093
+ list-style:none;
1119
1094
  }
1120
1095
 
1121
- .tds-page-header{
1096
+ .tds-sidenav-section-header{
1122
1097
  display:flex;
1123
- flex-direction:column;
1124
- padding-top:var(--tds-page-header-padding-y);
1125
- color:var(--tds-page-header-color);
1126
- background:var(--tds-page-header-background-color);
1127
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1098
+ align-items:baseline;
1099
+ justify-content:space-between;
1100
+ padding-top:var(--t-spacing-2);
1128
1101
  }
1129
1102
 
1130
- .tds-page-header:not(.has-nav){
1131
- padding-bottom:var(--tds-page-header-padding-y);
1103
+ .tds-sidenav-section-header h2{
1104
+ margin:0;
1105
+ font-size:var(--t-font-size-sm);
1106
+ font-weight:var(--t-font-weight-semibold);
1107
+ line-height:1.35;
1108
+ color:var(--t-text-color-secondary);
1109
+ text-transform:uppercase;
1132
1110
  }
1133
1111
 
1134
- .tds-page-header.inactive{
1135
- background:var(--tds-page-header-background-color-inactive);
1112
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1113
+ padding-top:0;
1136
1114
  }
1137
1115
 
1138
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
- width:100%;
1116
+ .tds-sidenav-section-header [slot="label-actions"]{
1117
+ display:flex;
1118
+ gap:var(--t-spacing-half);
1119
+ align-items:center;
1140
1120
  }
1141
1121
 
1142
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1122
+ .tds-sidenav-section [slot="section-actions"]{
1123
+ display:flex;
1124
+ gap:12px;
1125
+ align-items:center;
1126
+ min-height:42px;
1127
+ padding:var(--t-spacing-1) 0;
1128
+ }
1129
+
1130
+ .tds-sidenav-section-list,
1131
+ .tds-sidenav-item{
1132
+ width:100%;
1133
+ padding:0;
1134
+ margin:0;
1135
+ }
1136
+
1137
+ .tds-sidenav-item :is(a,button){
1138
+ position:relative;
1143
1139
  display:flex;
1144
- flex-flow:row wrap;
1145
- gap:var(--t-spacing-half) var(--t-spacing-1);
1146
- align-items:flex-start;
1147
- justify-content:flex-start;
1148
- min-width:0;
1140
+ gap:12px;
1141
+ align-items:center;
1142
+ width:100%;
1143
+ padding:12px;
1144
+ overflow:hidden;
1145
+ font-size:var(--t-font-size-sm);
1146
+ line-height:18px;
1147
+ color:var(--t-text-color-headline);
1148
+ white-space:nowrap;
1149
+ text-decoration:none;
1150
+ -webkit-appearance:none;
1151
+ -moz-appearance:none;
1152
+ appearance:none;
1153
+ cursor:pointer;
1154
+ background-color:var(--tds-sidenav-item-background, transparent);
1155
+ border:0;
1156
+ border-radius:var(--t-border-radius);
1157
+ transition:var(--tds-sidenav-item-transition);
1149
1158
  }
1150
1159
 
1151
- :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{
1152
- display:flex;
1153
- gap:var(--tds-page-header-nav-gap);
1154
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1155
- margin:0 0 -1px;
1156
- overflow:auto;
1157
- list-style:none;
1158
- background:var(--tds-page-header-nav-background);
1160
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1161
+ display:block;
1162
+ flex:1;
1163
+ overflow:hidden;
1164
+ text-overflow:ellipsis;
1165
+ text-align:left;
1166
+ white-space:nowrap;
1159
1167
  }
1160
1168
 
1161
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1162
- position:relative;
1163
- display:inline-flex;
1164
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1165
- font-size:var(--t-font-size-sm);
1166
- line-height:22px;
1167
- color:var(--tds-page-header-nav-item-color);
1168
- white-space:nowrap;
1169
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1170
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1171
+ color:var(--t-text-color-headline);
1169
1172
  text-decoration:none;
1170
- -webkit-appearance:none;
1171
- -moz-appearance:none;
1172
- appearance:none;
1173
- cursor:pointer;
1174
- outline-offset:-2px;
1175
- background-color:var(--tds-page-header-nav-item-background-color);
1176
- background-clip:padding-box;
1177
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1178
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1179
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1180
- }
1181
-
1182
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1183
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1184
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1185
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1186
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1187
- }
1188
-
1189
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1190
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1191
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1192
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1193
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1194
- }
1195
-
1196
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1197
- background-color:var(--tds-page-header-nav-item-background-color-active);
1198
- border-color:var(--tds-page-header-nav-item-border-color-active);
1199
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1200
- }
1201
-
1202
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1203
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1204
- color:var(--tds-page-header-nav-item-color-disabled);
1205
- cursor:not-allowed;
1206
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
- opacity:1;
1208
- }
1209
-
1210
- @media (min-width: 600px){
1211
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1212
- position:absolute;
1213
- inset:auto -1px -1px;
1214
- height:1px;
1215
- pointer-events:none;
1216
- content:"";
1217
- background-color:var(--tds-page-header-bottom-border-color);
1218
- }
1219
- }
1220
-
1221
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
- position:relative;
1223
- }
1224
-
1225
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1226
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1227
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1228
- }
1229
-
1230
- :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{
1231
- position:absolute;
1232
- top:-5px;
1233
- right:-2px;
1234
- width:10px;
1235
- height:10px;
1236
- content:"";
1237
- background:var(--tds-page-header-nav-item-indicator-color);
1238
- border-radius:50%;
1239
- }
1240
-
1241
- @media (prefers-reduced-motion: no-preference){
1242
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1243
- animation:indicator-pulse 1.25s ease infinite;
1244
- }
1245
- }
1246
-
1247
- .tds-page-header__title-bar{
1248
- display:flex;
1249
- flex-direction:column;
1250
- gap:var(--t-spacing-2) var(--t-spacing-1);
1251
- align-items:flex-start;
1252
- justify-content:space-between;
1253
- padding:0 var(--tds-page-header-padding-x);
1254
- }
1255
-
1256
- .tds-page-header--profile > .tds-page-header__title-bar{
1257
- align-items:center;
1258
- }
1259
-
1260
- .tds-page-header__primary{
1261
- width:100%;
1262
- }
1263
-
1264
- .tds-page-header__primary h1{
1265
- margin:0;
1266
- font-size:var(--tds-page-header-headline-font-size);
1267
- font-weight:var(--t-font-weight-normal);
1268
- line-height:32px;
1269
- color:var(--tds-page-header-headline-color);
1270
- overflow-wrap:break-word;
1271
- }
1272
-
1273
- @media (min-width: 960px){
1274
- .tds-page-header__primary{
1275
- flex:1 1 max-content;
1276
- width:auto;
1277
- min-width:0;
1278
- max-width:100%;
1279
- }
1280
-
1281
- .tds-page-header__title-bar,
1282
- .tds-page-header--profile .tds-page-header__title-bar{
1283
- flex-flow:row nowrap;
1284
- row-gap:12px;
1285
- align-items:flex-start;
1286
- }
1287
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
- width:auto;
1289
- }
1290
-
1291
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
- justify-content:flex-end;
1293
- }
1294
- }
1295
-
1296
- .tds-page-header-phone,
1297
- .tds-page-header-email{
1298
- color:var(--tds-page-header-color);
1299
- white-space:nowrap;
1300
- }
1301
- .tds-page-header-email{
1302
- max-width:100%;
1303
- overflow:hidden;
1304
- text-overflow:ellipsis;
1305
- }
1306
-
1307
- @keyframes indicator-pulse{
1308
- 0%{
1309
- opacity:.3;
1310
- transform:scale(.9);
1311
- }
1312
-
1313
- 100%{
1314
- opacity:0;
1315
- transform:scale(1.75);
1316
- }
1317
- }
1318
-
1319
- .tds-checkbox{
1320
- --tds-checkbox-font-size:var(--t-font-size-md);
1321
- --tds-checkbox-cursor:pointer;
1322
- --tds-checkbox-line-height:1.4;
1323
- --tds-checkbox-transition-property:background-color, border-color;
1324
-
1325
- --tds-checkbox-input-size:var(--t-element-size-md);
1326
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1327
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1328
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1329
-
1330
- --tds-checkbox-input-icon:none;
1331
- --tds-checkbox-input-icon-visibility:hidden;
1332
- --tds-checkbox-input-icon-opacity:0;
1333
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1334
-
1335
- --tds-checkbox-label-color:var(--t-form-color);
1336
-
1337
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1338
- --tds-checkbox-description-line-height:1.35;
1339
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1340
- --tds-checkbox-description-invalid-icon-display:none;
1341
-
1342
- position:relative;
1343
- display:inline-grid;
1344
- grid-template-columns:auto;
1345
- grid-auto-columns:1fr;
1346
- gap:var(--t-spacing-fourth) 0;
1347
- line-height:var(--tds-checkbox-line-height);
1348
- -webkit-user-select:none;
1349
- -moz-user-select:none;
1350
- user-select:none;
1351
- }
1352
-
1353
- .tds-checkbox label{
1354
- grid-area:1 / 2;
1355
- padding-inline-start:var(--t-spacing-1);
1356
- font-size:var(--tds-checkbox-font-size);
1357
- font-weight:var(--t-font-weight-normal);
1358
- color:var(--tds-checkbox-label-color);
1359
- cursor:var(--tds-checkbox-cursor);
1360
- }
1361
-
1362
- .tds-checkbox tds-indeterminate{
1363
- display:flex;
1364
- }
1365
-
1366
- .tds-checkbox input[type="checkbox"]{
1367
- position:relative;
1368
- width:1em;
1369
- height:1em;
1370
- margin:calc((1lh - 1em) / 2) 0 0;
1371
- font-size:var(--tds-checkbox-font-size);
1372
- line-height:inherit;
1373
- -webkit-appearance:none;
1374
- -moz-appearance:none;
1375
- appearance:none;
1376
- cursor:var(--tds-checkbox-cursor);
1377
- background-color:var(--tds-checkbox-input-background-color);
1378
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1379
- border-radius:var(--tds-checkbox-input-border-radius);
1380
- transition-timing-function:var(--t-ease-in-out);
1381
- transition-duration:var(--t-duration-200);
1382
- transition-property:var(--tds-checkbox-transition-property);
1383
- }
1384
-
1385
- :is(.tds-checkbox input[type="checkbox"])::before{
1386
- position:absolute;
1387
- top:50%;
1388
- left:50%;
1389
- visibility:var(--tds-checkbox-input-icon-visibility);
1390
- width:100%;
1391
- height:100%;
1392
- content:"";
1393
- background-color:var(--tds-checkbox-input-icon-fill);
1394
- border-radius:var(--tds-checkbox-input-border-radius);
1395
- opacity:var(--tds-checkbox-input-icon-opacity);
1396
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1397
- mask-image:var(--tds-checkbox-input-icon);
1398
- -webkit-mask-repeat:no-repeat;
1399
- mask-repeat:no-repeat;
1400
- -webkit-mask-size:contain;
1401
- mask-size:contain;
1402
- transform:translate(-50%, -50%);
1403
- }
1404
-
1405
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1406
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1407
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1408
- }
1409
-
1410
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1411
- outline:var(--t-focus-ring-outline);
1412
- outline-offset:var(--t-focus-ring-offset);
1413
- }
1414
-
1415
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1416
- pointer-events:none;
1417
1173
  }
1418
1174
 
1419
- @media (prefers-reduced-motion: reduce){
1420
-
1421
- .tds-checkbox input[type="checkbox"]{
1422
- --tds-checkbox-transition-property:none;
1423
- }
1175
+ :is(.tds-sidenav-item :is(a,button)):active{
1176
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1424
1177
  }
1425
1178
 
1426
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1427
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1428
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1429
- --tds-checkbox-input-icon-visibility:visible;
1430
- --tds-checkbox-input-icon-opacity:1;
1431
- }
1432
-
1433
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1434
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1435
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1179
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1180
+ overflow:hidden;
1181
+ color:var(--tds-sidenav-item-icon-color);
1436
1182
  }
1437
1183
 
1438
- .tds-checkbox:has(input:checked){
1439
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1440
- }
1441
-
1442
- .tds-checkbox:has(input:indeterminate){
1443
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1444
- }
1445
-
1446
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1447
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1448
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1449
- --tds-checkbox-description-invalid-icon-display:inline-block;
1450
- }
1184
+ :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{
1185
+ display:block;
1186
+ width:var(--tds-sidenav-item-icon-size);
1187
+ height:var(--tds-sidenav-item-icon-size);
1188
+ }
1451
1189
 
1452
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1453
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1454
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1190
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1191
+ --tds-sidenav-indent:19px;
1455
1192
  }
1456
1193
 
1457
- :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{
1458
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1459
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1194
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1195
+ visibility:visible;
1196
+ block-size:auto;
1197
+ opacity:1;
1460
1198
  }
1461
1199
 
1462
- :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){
1463
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1464
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1465
- }
1200
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1201
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1202
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1466
1203
 
1467
- .tds-checkbox:has(input:required) label::after{
1468
- margin-left:.25ch;
1469
- color:var(--t-text-color-status-error);
1470
- content:"*";
1471
- }
1204
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1205
+ font-weight:var(--t-font-weight-semibold);
1206
+ }
1472
1207
 
1473
- .tds-checkbox:has(input:disabled){
1474
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1475
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1208
+ .tds-sidenav-item:has(.tds-sidenav-section){
1209
+ display:flex;
1210
+ flex-direction:column;
1211
+ gap:var(--t-spacing-half);
1212
+ }
1476
1213
 
1477
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1478
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1479
- --tds-checkbox-cursor:not-allowed;
1214
+ .tds-sidenav-item .tds-sidenav-section-list{
1215
+ --tds-sidenav-item-depth:1;
1216
+ gap:0;
1480
1217
  }
1481
1218
 
1482
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1483
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1219
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1220
+ visibility:hidden;
1221
+ block-size:0;
1222
+ overflow-y:clip;
1223
+ opacity:0;
1224
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1484
1225
  }
1485
1226
 
1486
- .tds-checkbox-description{
1487
- display:flex;
1488
- grid-area:2 / 2;
1489
- gap:var(--t-spacing-half);
1490
- align-items:flex-start;
1491
- padding-inline-start:var(--t-spacing-1);
1492
- margin:0;
1493
- font-size:var(--tds-checkbox-description-font-size);
1494
- line-height:var(--tds-checkbox-description-line-height);
1495
- color:var(--tds-checkbox-description-color);
1496
- cursor:text;
1497
- }
1498
-
1499
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1500
- display:var(--tds-checkbox-description-invalid-icon-display);
1501
- flex-shrink:0;
1502
- margin-top:calc(.5lh - .5em);
1503
- line-height:var(--tds-checkbox-description-line-height);
1504
- }
1227
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1228
+ --tds-sidenav-item-depth:2;
1229
+ }
1505
1230
 
1506
- .tds-checkbox--sm{
1507
- --tds-checkbox-line-height:1.35;
1508
- --tds-checkbox-input-size:var(--t-element-size-sm);
1509
- --tds-checkbox-font-size:var(--t-font-size-sm);
1510
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1511
- --tds-checkbox-description-line-height:1.3;
1512
- }
1231
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1232
+ min-height:var(--t-element-size-2xl);
1233
+ padding-block:9px;
1234
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1235
+ line-height:1;
1236
+ background-color:transparent;
1237
+ }
1513
1238
 
1514
- .tds-button-group{
1515
- display:inline-flex;
1516
- }
1517
- .tds-button-group > .tds-btn{
1518
- --tds-button-group-item-z-index:1;
1239
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1240
+ position:absolute;
1241
+ top:0;
1242
+ bottom:0;
1243
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1244
+ width:2px;
1245
+ content:"";
1246
+ background-color:var(--tds-sidenav-item-nested-border-color);
1247
+ transition:var(--tds-sidenav-item-transition);
1248
+ }
1519
1249
 
1520
- position:relative;
1521
- z-index:var(--tds-button-group-item-z-index);
1522
- border-radius:0;
1523
- }
1524
- :is(.tds-button-group > .tds-btn):not(:first-child){
1525
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1526
- }
1527
- :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{
1250
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1528
1251
  position:absolute;
1529
- inset-block:calc(var(--tds-btn-border-width) * -1);
1530
- width:var(--tds-btn-border-width);
1531
- pointer-events:none;
1252
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1253
+ z-index:-1;
1254
+ height:100%;
1532
1255
  content:"";
1533
- background-color:var(--t-border-color-white);
1256
+ background-color:var(--tds-sidenav-item-nested-background);
1257
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1258
+ transition:var(--tds-sidenav-item-transition);
1534
1259
  }
1535
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1536
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1260
+
1261
+ :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)){
1262
+ display:block;
1263
+ text-align:left;
1264
+ white-space:normal;
1537
1265
  }
1538
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1539
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1266
+
1267
+ :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{
1268
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1269
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1540
1270
  }
1541
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1542
- --tds-button-group-item-z-index:2;
1543
- }
1544
- :is(.tds-button-group > .tds-btn):focus-visible{
1545
- --tds-button-group-item-z-index:5;
1271
+
1272
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1273
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1274
+ }
1275
+
1276
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1277
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1278
+ font-weight:var(--t-font-weight-medium);
1546
1279
  }
1547
- .tds-button-group > .tds-btn:first-child{
1548
- border-start-start-radius:var(--tds-btn-border-radius);
1549
- border-end-start-radius:var(--tds-btn-border-radius);
1550
- }
1551
- .tds-button-group > .tds-btn:last-child{
1552
- border-start-end-radius:var(--tds-btn-border-radius);
1553
- border-end-end-radius:var(--tds-btn-border-radius);
1554
- }
1555
1280
 
1556
- .tds-currency-input-control{
1281
+ .tds-sidenav-responsive-header{
1557
1282
  display:flex;
1558
- gap:var(--t-spacing-half);
1283
+ gap:var(--t-spacing-2);
1559
1284
  align-items:center;
1560
- inline-size:100%;
1561
- min-block-size:var(--tds-field-min-height);
1562
- padding-inline:var(--tds-field-padding-inline);
1563
- font-size:var(--tds-field-font-size);
1564
- color:var(--tds-field-color);
1565
- cursor:text;
1566
- outline:var(--t-focus-ring-width) solid transparent;
1567
- background-color:var(--tds-field-background-color);
1568
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1569
- border-radius:var(--t-form-border-radius);
1570
- transition-timing-function:var(--t-ease-in-out);
1571
- transition-duration:var(--t-duration-200);
1572
- transition-property:background-color, border-color, outline-color, outline-offset;
1285
+ width:100%;
1573
1286
  }
1574
1287
 
1575
- .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1576
- border-color:var(--tds-field-border-color-hover);
1288
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1289
+ order:0;
1577
1290
  }
1578
1291
 
1579
- .tds-currency-input-control:has(input:focus){
1580
- outline-color:var(--t-focus-ring-color);
1581
- outline-offset:var(--t-focus-ring-offset);
1582
- border-color:var(--tds-field-border-color-active);
1292
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1293
+ flex:1;
1294
+ order:1;
1295
+ margin:0;
1296
+ font-size:var(--t-font-size-lg);
1297
+ font-weight:var(--t-font-weight-medium);
1298
+ color:var(--t-text-color-headline);
1583
1299
  }
1584
1300
 
1585
- .tds-currency-input-control input{
1586
- flex:1;
1587
- min-inline-size:0;
1301
+ @media (max-width: 719px){
1302
+ .tds-sidenav-collapse{
1303
+ z-index:10001;
1304
+ display:none;
1305
+ max-width:min(448px, calc(100vw - 48px));
1588
1306
  padding:0;
1589
- font-family:inherit;
1590
- font-size:inherit;
1591
- color:inherit;
1592
- -webkit-appearance:none;
1593
- -moz-appearance:none;
1594
- appearance:none;
1307
+ margin:12px 0;
1308
+ position-area:bottom span-right;
1309
+ overflow:hidden;
1595
1310
  outline:0;
1596
- background-color:transparent;
1311
+ background:var(--t-surface-color-card);
1597
1312
  border:0;
1313
+ border-radius:6px;
1314
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1315
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1316
+ transform:var(--tds-sidenav-collapse-open-transform);
1317
+ transition:var(--tds-sidenav-collapse-transition-enter);
1318
+ will-change:transform;
1598
1319
  }
1599
1320
 
1600
- :is(.tds-currency-input-control input)::-moz-placeholder{
1601
- color:var(--tds-field-placeholder-color);
1602
- -moz-user-select:none;
1603
- user-select:none;
1604
- }
1321
+ .tds-sidenav-scroll-container{
1322
+ --webkit-overflow-scrolling:touch;
1323
+ display:block;
1324
+ width:100%;
1325
+ height:-moz-fit-content;
1326
+ height:fit-content;
1327
+ padding:var(--t-spacing-2);
1328
+ overflow-y:auto;
1329
+ }
1605
1330
 
1606
- :is(.tds-currency-input-control input)::placeholder{
1607
- color:var(--tds-field-placeholder-color);
1608
- -webkit-user-select:none;
1609
- -moz-user-select:none;
1610
- user-select:none;
1331
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1332
+ display:none;
1333
+ }
1334
+ @supports selector(:popover-open){
1335
+ .tds-sidenav-collapse:popover-open{
1336
+ display:flex;
1611
1337
  }
1612
1338
 
1613
- .tds-currency-input-control .tds-currency-input-prefix{
1614
- flex-shrink:0;
1615
- color:var(--t-text-color-secondary);
1616
- pointer-events:none;
1617
- -webkit-user-select:none;
1618
- -moz-user-select:none;
1619
- user-select:none;
1620
- }
1339
+ .tds-sidenav-collapse:not(:popover-open){
1340
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1341
+ transition:var(--tds-sidenav-collapse-transition-exit);
1342
+ }
1621
1343
 
1622
- .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1623
- --tds-field-background-color:var(--t-form-background-color-error);
1624
- --tds-field-border-color:var(--t-form-border-color-error);
1625
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1344
+ @starting-style{
1345
+ .tds-sidenav-collapse:popover-open{
1346
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1347
+ transform:var(--tds-sidenav-collapse-closed-transform);
1348
+ }
1349
+ }
1626
1350
  }
1351
+ @supports not selector(:popover-open){
1352
+ .tds-sidenav-collapse.\:popover-open{
1353
+ display:flex;
1354
+ }
1627
1355
 
1628
- .tds-currency-input-control:has(:disabled){
1629
- --tds-field-border-color:var(--t-form-border-color-disabled);
1630
- --tds-field-background-color:var(--t-form-background-color-disabled);
1631
- --tds-field-color:var(--t-form-color-disabled);
1356
+ .tds-sidenav-collapse:not(.\:popover-open){
1357
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1358
+ transition:var(--tds-sidenav-collapse-transition-exit);
1359
+ }
1360
+ }
1361
+ }
1632
1362
 
1633
- cursor:not-allowed;
1363
+ @media (min-width: 720px){
1364
+ .tds-sidenav-responsive-header{
1365
+ display:none;
1634
1366
  }
1367
+ }
1635
1368
 
1636
- .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1637
- color:var(--tds-field-color);
1369
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1370
+ display:none;
1638
1371
  }
1639
1372
 
1640
- .tds-currency-input-control:has([readonly]){
1641
- --tds-field-border-color:var(--t-form-border-color-readonly);
1642
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1643
- --tds-field-background-color:var(--t-form-background-color-readonly);
1644
- --tds-field-color:var(--t-form-color-readonly);
1645
- }
1373
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1374
+ display:block;
1375
+ }
1646
1376
 
1647
- .tds-currency-input-control:has([readonly]):has(input:focus){
1648
- border-color:var(--t-form-border-color-hover);
1377
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1378
+ display:flex;
1379
+ flex-direction:column;
1649
1380
  }
1650
- .tds-currency-input-currency-name--hidden{
1651
- position:absolute;
1652
- width:1px;
1653
- height:1px;
1654
- overflow:hidden;
1655
- white-space:nowrap;
1656
- clip-path:inset(50%);
1657
- }
1658
1381
 
1659
1382
  .tds-checkbox-group{
1660
1383
  --tds-checkbox-group-font-size:var(--t-font-size-md);
@@ -1687,114 +1410,372 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1687
1410
  --tds-checkbox-group-description-invalid-icon-display:inline-block;
1688
1411
  }
1689
1412
 
1690
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1691
- margin-left:.25ch;
1692
- color:var(--t-text-color-status-error);
1693
- content:"*";
1413
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1414
+ margin-left:.25ch;
1415
+ color:var(--t-text-color-status-error);
1416
+ content:"*";
1417
+ }
1418
+
1419
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1420
+ content:none;
1421
+ }
1422
+
1423
+ .tds-checkbox-group-fields{
1424
+ display:flex;
1425
+ flex-direction:column;
1426
+ gap:var(--tds-checkbox-group-gap);
1427
+ align-items:flex-start;
1428
+ margin-top:var(--t-spacing-1);
1429
+ }
1430
+
1431
+ .tds-checkbox-group-description{
1432
+ display:flex;
1433
+ gap:var(--t-spacing-half);
1434
+ align-items:flex-start;
1435
+ margin:var(--t-spacing-fourth) 0 0;
1436
+ font-size:var(--tds-checkbox-group-description-font-size);
1437
+ line-height:var(--tds-checkbox-group-description-line-height);
1438
+ color:var(--tds-checkbox-group-description-color);
1439
+ cursor:text;
1440
+ }
1441
+
1442
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1443
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1444
+ flex-shrink:0;
1445
+ margin-top:calc(.5lh - .5em);
1446
+ line-height:var(--tds-checkbox-group-description-line-height);
1447
+ }
1448
+
1449
+ .tds-checkbox-group--sm{
1450
+ --tds-checkbox-group-line-height:1.35;
1451
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1452
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1453
+ --tds-checkbox-group-description-line-height:1.3;
1454
+ }
1455
+
1456
+
1457
+ :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{
1458
+ -webkit-appearance:none;
1459
+ appearance:none;
1460
+ }
1461
+
1462
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1463
+ inline-size:1em;
1464
+ block-size:2em;
1465
+ }
1466
+
1467
+ [type="file"]:is(.tds-input input){
1468
+ padding-block:var(--t-spacing-half);
1469
+ padding-inline-start:var(--t-spacing-half);
1470
+ }
1471
+
1472
+ [type="file"]:is(.tds-input input):not(:disabled){
1473
+ color:var(--t-text-color-secondary);
1474
+ }
1475
+
1476
+ [type="file"]:is(.tds-input input)::file-selector-button{
1477
+ --_file-btn-padding-block:3px;
1478
+
1479
+ padding-block:var(--_file-btn-padding-block);
1480
+ padding-inline:12px;
1481
+ margin-inline-end:12px;
1482
+ font:inherit;
1483
+ line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1484
+ color:var(--t-text-color-status-neutral);
1485
+ cursor:pointer;
1486
+ background-color:var(--t-fill-color-button-neutral-solid);
1487
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1488
+ border-radius:var(--t-border-radius-md);
1489
+ transition-timing-function:var(--t-ease-in-out);
1490
+ transition-duration:var(--t-duration-200);
1491
+ transition-property:color, background-color, border-color;
1492
+ }
1493
+
1494
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1495
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1496
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
1497
+ }
1498
+
1499
+ [type="file"]:is(.tds-input input):active::file-selector-button{
1500
+ background-color:var(--t-fill-color-button-neutral-solid-active);
1501
+ border-color:var(--t-fill-color-button-neutral-solid-active);
1502
+ }
1503
+
1504
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
1505
+ color:var(--t-text-color-disabled);
1506
+ pointer-events:none;
1507
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
1508
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
1509
+ }
1510
+ @supports (field-sizing: content){
1511
+ .tds-input--auto-width{
1512
+ inline-size:-moz-fit-content;
1513
+ inline-size:fit-content;
1514
+ min-inline-size:min(100%, 122px);
1515
+ }
1516
+
1517
+ .tds-input--auto-width input{
1518
+ field-sizing:content;
1519
+ inline-size:auto;
1520
+ }
1521
+ }
1522
+
1523
+ .tds-radio-group{
1524
+ --tds-radio-group-font-size:var(--t-font-size-md);
1525
+ --tds-radio-group-line-height:1.4;
1526
+ --tds-radio-group-gap:var(--t-spacing-1);
1527
+
1528
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1529
+ --tds-radio-group-description-line-height:1.35;
1530
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1531
+ --tds-radio-group-description-invalid-icon-display:none;
1532
+ display:flex;
1533
+ flex-direction:column;
1534
+ gap:0;
1535
+ padding:0;
1536
+ margin:0;
1537
+
1538
+ font-size:var(--tds-radio-group-font-size);
1539
+ line-height:var(--tds-radio-group-line-height);
1540
+ border:0;
1541
+ }
1542
+
1543
+ .tds-radio-group legend{
1544
+ float:left;
1545
+ padding:0;
1546
+ margin:0;
1547
+ }
1548
+
1549
+ .tds-radio-group[aria-invalid="true"]{
1550
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1551
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1552
+ }
1553
+
1554
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1555
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1556
+ }
1557
+
1558
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1559
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1560
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1561
+ }
1562
+
1563
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1564
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1565
+ }
1566
+
1567
+ .tds-radio-group:has(input:required) legend::after{
1568
+ margin-left:.25ch;
1569
+ color:var(--t-text-color-status-error);
1570
+ content:"*";
1571
+ }
1572
+
1573
+ .tds-radio-group-fields{
1574
+ display:flex;
1575
+ flex-direction:column;
1576
+ gap:var(--tds-radio-group-gap);
1577
+ align-items:flex-start;
1578
+ margin-top:var(--t-spacing-1);
1579
+ }
1580
+
1581
+ .tds-radio-group-description{
1582
+ display:flex;
1583
+ gap:var(--t-spacing-half);
1584
+ align-items:flex-start;
1585
+ margin:var(--t-spacing-fourth) 0 0;
1586
+ font-size:var(--tds-radio-group-description-font-size);
1587
+ line-height:var(--tds-radio-group-description-line-height);
1588
+ color:var(--tds-radio-group-description-color);
1589
+ cursor:text;
1590
+ }
1591
+
1592
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1593
+ display:var(--tds-radio-group-description-invalid-icon-display);
1594
+ flex-shrink:0;
1595
+ margin-top:calc(.5lh - .5em);
1596
+ line-height:var(--tds-radio-group-description-line-height);
1597
+ }
1598
+
1599
+ .tds-radio-group--sm{
1600
+ --tds-radio-group-line-height:1.35;
1601
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1602
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1603
+ --tds-radio-group-description-line-height:1.3;
1604
+ }
1605
+
1606
+ .tds-popover{
1607
+ max-inline-size:24rem;
1608
+ overflow:auto;
1609
+ overscroll-behavior:none;
1610
+ outline:0;
1611
+ scrollbar-color:#0004 var(--t-surface-color-card);
1612
+ scrollbar-width:thin;
1613
+ background:var(--t-surface-color-card);
1614
+ background-clip:padding-box;
1615
+ border:1px solid var(--t-border-color);
1616
+ border-radius:var(--t-border-radius);
1617
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1618
+ }
1619
+
1620
+ @media (prefers-reduced-motion: no-preference){
1621
+ .tds-popover[data-entering]{
1622
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1623
+ }
1624
+
1625
+ .tds-popover[data-exiting]{
1626
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1627
+ }
1628
+
1629
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1630
+ will-change:opacity, transform;
1694
1631
  }
1695
1632
 
1696
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1697
- content:none;
1633
+ @keyframes tds-popover{
1634
+ from{
1635
+ opacity:0;
1636
+ transform:translateY(-8px);
1698
1637
  }
1638
+ }
1639
+ }
1699
1640
 
1700
- .tds-checkbox-group-fields{
1641
+ .tds-popover-content{
1701
1642
  display:flex;
1702
1643
  flex-direction:column;
1703
- gap:var(--tds-checkbox-group-gap);
1704
- align-items:flex-start;
1705
- margin-top:var(--t-spacing-1);
1644
+ padding:var(--t-spacing-1);
1645
+ outline:0;
1706
1646
  }
1707
1647
 
1708
- .tds-checkbox-group-description{
1709
- display:flex;
1710
- gap:var(--t-spacing-half);
1711
- align-items:flex-start;
1712
- margin:var(--t-spacing-fourth) 0 0;
1713
- font-size:var(--tds-checkbox-group-description-font-size);
1714
- line-height:var(--tds-checkbox-group-description-line-height);
1715
- color:var(--tds-checkbox-group-description-color);
1716
- cursor:text;
1648
+ .tds-radio{
1649
+ --tds-radio-font-size:var(--t-font-size-md);
1650
+ --tds-radio-cursor:pointer;
1651
+ --tds-radio-line-height:1.4;
1652
+ --tds-radio-transition-property:border-width;
1653
+
1654
+ --tds-radio-input-size:var(--t-element-size-md);
1655
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1656
+ --tds-radio-input-border-color:var(--t-form-border-color);
1657
+ --tds-radio-input-border-width:var(--t-form-border-width);
1658
+ --tds-radio-input-background-color:var(--t-form-background-color);
1659
+
1660
+ --tds-radio-label-color:var(--t-form-color);
1661
+
1662
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1663
+ --tds-radio-description-line-height:1.35;
1664
+ --tds-radio-description-color:var(--t-text-color-secondary);
1665
+
1666
+ position:relative;
1667
+ display:inline-grid;
1668
+ grid-template-columns:auto;
1669
+ grid-auto-columns:1fr;
1670
+ gap:var(--t-spacing-fourth) 0;
1671
+ line-height:var(--tds-radio-line-height);
1672
+ -webkit-user-select:none;
1673
+ -moz-user-select:none;
1674
+ user-select:none;
1717
1675
  }
1718
1676
 
1719
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1720
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1721
- flex-shrink:0;
1722
- margin-top:calc(.5lh - .5em);
1723
- line-height:var(--tds-checkbox-group-description-line-height);
1677
+ .tds-radio label{
1678
+ grid-area:1 / 2;
1679
+ padding-inline-start:var(--t-spacing-1);
1680
+ font-size:var(--tds-radio-font-size);
1681
+ font-weight:var(--t-font-weight-normal);
1682
+ color:var(--tds-radio-label-color);
1683
+ cursor:var(--tds-radio-cursor);
1724
1684
  }
1725
1685
 
1726
- .tds-checkbox-group--sm{
1727
- --tds-checkbox-group-line-height:1.35;
1728
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1729
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1730
- --tds-checkbox-group-description-line-height:1.3;
1731
- }
1686
+ .tds-radio input[type="radio"]{
1687
+ position:relative;
1688
+ width:1em;
1689
+ height:1em;
1690
+ margin:calc((1lh - 1em) / 2) 0 0;
1691
+ font-size:var(--tds-radio-font-size);
1692
+ line-height:inherit;
1693
+ -webkit-appearance:none;
1694
+ -moz-appearance:none;
1695
+ appearance:none;
1696
+ cursor:var(--tds-radio-cursor);
1697
+ background-color:var(--tds-radio-input-background-color);
1698
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1699
+ border-radius:var(--tds-radio-input-border-radius);
1700
+ transition-timing-function:var(--t-ease-in-out);
1701
+ transition-duration:var(--t-duration-200);
1702
+ transition-property:var(--tds-radio-transition-property);
1703
+ }
1732
1704
 
1705
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1706
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1707
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1708
+ }
1733
1709
 
1734
- :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{
1735
- -webkit-appearance:none;
1736
- appearance:none;
1710
+ :is(.tds-radio input[type="radio"]):focus-visible{
1711
+ outline:var(--t-focus-ring-outline);
1712
+ outline-offset:var(--t-focus-ring-offset);
1737
1713
  }
1738
1714
 
1739
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1740
- inline-size:1em;
1741
- block-size:2em;
1715
+ :is(.tds-radio input[type="radio"]):disabled{
1716
+ pointer-events:none;
1742
1717
  }
1743
1718
 
1744
- [type="file"]:is(.tds-input input){
1745
- padding-block:var(--t-spacing-half);
1746
- padding-inline-start:var(--t-spacing-half);
1719
+ @media (prefers-reduced-motion: reduce){
1720
+
1721
+ .tds-radio input[type="radio"]{
1722
+ --tds-radio-transition-property:none;
1723
+ }
1747
1724
  }
1748
1725
 
1749
- [type="file"]:is(.tds-input input):not(:disabled){
1750
- color:var(--t-text-color-secondary);
1751
- }
1726
+ .tds-radio:has(input:checked){
1727
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1728
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1729
+ --tds-radio-input-border-width:4px;
1730
+ }
1752
1731
 
1753
- [type="file"]:is(.tds-input input)::file-selector-button{
1754
- --_file-btn-padding-block:3px;
1732
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1733
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1734
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1735
+ }
1755
1736
 
1756
- padding-block:var(--_file-btn-padding-block);
1757
- padding-inline:12px;
1758
- margin-inline-end:12px;
1759
- font:inherit;
1760
- line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1761
- color:var(--t-text-color-status-neutral);
1762
- cursor:pointer;
1763
- background-color:var(--t-fill-color-button-neutral-solid);
1764
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1765
- border-radius:var(--t-border-radius-md);
1766
- transition-timing-function:var(--t-ease-in-out);
1767
- transition-duration:var(--t-duration-200);
1768
- transition-property:color, background-color, border-color;
1769
- }
1737
+ .tds-radio:has(input:user-invalid){
1738
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1739
+ }
1770
1740
 
1771
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1772
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1773
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1774
- }
1741
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1742
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1743
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1744
+ }
1775
1745
 
1776
- [type="file"]:is(.tds-input input):active::file-selector-button{
1777
- background-color:var(--t-fill-color-button-neutral-solid-active);
1778
- border-color:var(--t-fill-color-button-neutral-solid-active);
1779
- }
1746
+ .tds-radio:has(input:disabled){
1747
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1748
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1780
1749
 
1781
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1782
- color:var(--t-text-color-disabled);
1783
- pointer-events:none;
1784
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1785
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1786
- }
1787
- @supports (field-sizing: content){
1788
- .tds-input--auto-width{
1789
- inline-size:-moz-fit-content;
1790
- inline-size:fit-content;
1791
- min-inline-size:min(100%, 122px);
1750
+ --tds-radio-label-color:var(--t-form-color-disabled);
1751
+ --tds-radio-description-color:var(--t-form-color-disabled);
1752
+ --tds-radio-cursor:not-allowed;
1792
1753
  }
1793
1754
 
1794
- .tds-input--auto-width input{
1795
- field-sizing:content;
1796
- inline-size:auto;
1797
- }
1755
+ .tds-radio:has(input:disabled) input:checked{
1756
+ --tds-radio-input-background-color:var(--t-form-background-color);
1757
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1758
+ }
1759
+
1760
+ .tds-radio-description{
1761
+ display:flex;
1762
+ grid-area:2 / 2;
1763
+ gap:var(--t-spacing-half);
1764
+ align-items:flex-start;
1765
+ padding-inline-start:var(--t-spacing-1);
1766
+ margin:0;
1767
+ font-size:var(--tds-radio-description-font-size);
1768
+ line-height:var(--tds-radio-description-line-height);
1769
+ color:var(--tds-radio-description-color);
1770
+ cursor:text;
1771
+ }
1772
+
1773
+ .tds-radio--sm{
1774
+ --tds-radio-line-height:1.35;
1775
+ --tds-radio-input-size:var(--t-element-size-sm);
1776
+ --tds-radio-font-size:var(--t-font-size-sm);
1777
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1778
+ --tds-radio-description-line-height:1.3;
1798
1779
  }
1799
1780
 
1800
1781
  .tds-modal-overlay{
@@ -1958,264 +1939,146 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1958
1939
  border-end-start-radius:var(--t-border-radius-lg);
1959
1940
  border-end-end-radius:var(--t-border-radius-lg);
1960
1941
  }
1961
- }
1962
-
1963
- .tds-popover{
1964
- max-inline-size:24rem;
1965
- overflow:auto;
1966
- overscroll-behavior:none;
1967
- outline:0;
1968
- scrollbar-color:#0004 var(--t-surface-color-card);
1969
- scrollbar-width:thin;
1970
- background:var(--t-surface-color-card);
1971
- background-clip:padding-box;
1972
- border:1px solid var(--t-border-color);
1973
- border-radius:var(--t-border-radius);
1974
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1975
- }
1976
-
1977
- @media (prefers-reduced-motion: no-preference){
1978
- .tds-popover[data-entering]{
1979
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1980
- }
1981
-
1982
- .tds-popover[data-exiting]{
1983
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1984
- }
1985
-
1986
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1987
- will-change:opacity, transform;
1988
- }
1989
-
1990
- @keyframes tds-popover{
1991
- from{
1992
- opacity:0;
1993
- transform:translateY(-8px);
1994
- }
1995
- }
1996
- }
1997
-
1998
- .tds-popover-content{
1999
- display:flex;
2000
- flex-direction:column;
2001
- padding:var(--t-spacing-1);
2002
- outline:0;
2003
- }
2004
-
2005
- .tds-radio{
2006
- --tds-radio-font-size:var(--t-font-size-md);
2007
- --tds-radio-cursor:pointer;
2008
- --tds-radio-line-height:1.4;
2009
- --tds-radio-transition-property:border-width;
1942
+ }
2010
1943
 
2011
- --tds-radio-input-size:var(--t-element-size-md);
2012
- --tds-radio-input-border-radius:var(--t-border-radius-round);
2013
- --tds-radio-input-border-color:var(--t-form-border-color);
2014
- --tds-radio-input-border-width:var(--t-form-border-width);
2015
- --tds-radio-input-background-color:var(--t-form-background-color);
1944
+ .tds-toggle-switch{
1945
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1946
+ --tds-toggle-switch-cursor:pointer;
1947
+ --tds-toggle-switch-display:inline-grid;
1948
+ --tds-toggle-switch-line-height:1.4;
2016
1949
 
2017
- --tds-radio-label-color:var(--t-form-color);
1950
+ --tds-toggle-switch-label-color:var(--t-form-color);
2018
1951
 
2019
- --tds-radio-description-font-size:var(--t-font-size-sm);
2020
- --tds-radio-description-line-height:1.35;
2021
- --tds-radio-description-color:var(--t-text-color-secondary);
1952
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1953
+ --tds-toggle-switch-track-outline:none;
1954
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1955
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1956
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1957
+
1958
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1959
+ --tds-toggle-switch-thumb-transform:translateX(0);
1960
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2022
1961
 
1962
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1963
+ --tds-toggle-switch-description-line-height:1.35;
1964
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2023
1965
  position:relative;
2024
- display:inline-grid;
1966
+
1967
+ display:var(--tds-toggle-switch-display);
2025
1968
  grid-template-columns:auto;
2026
1969
  grid-auto-columns:1fr;
2027
1970
  gap:var(--t-spacing-fourth) 0;
2028
- line-height:var(--tds-radio-line-height);
2029
1971
  -webkit-user-select:none;
2030
1972
  -moz-user-select:none;
2031
1973
  user-select:none;
2032
1974
  }
2033
1975
 
2034
- .tds-radio label{
2035
- grid-area:1 / 2;
2036
- padding-inline-start:var(--t-spacing-1);
2037
- font-size:var(--tds-radio-font-size);
2038
- font-weight:var(--t-font-weight-normal);
2039
- color:var(--tds-radio-label-color);
2040
- cursor:var(--tds-radio-cursor);
2041
- }
2042
-
2043
- .tds-radio input[type="radio"]{
2044
- position:relative;
2045
- width:1em;
2046
- height:1em;
2047
- margin:calc((1lh - 1em) / 2) 0 0;
2048
- font-size:var(--tds-radio-font-size);
2049
- line-height:inherit;
1976
+ .tds-toggle-switch input[type="checkbox"]{
1977
+ position:absolute;
1978
+ width:var(--tds-toggle-switch-track-width);
1979
+ height:var(--tds-toggle-switch-track-height);
1980
+ margin:0;
2050
1981
  -webkit-appearance:none;
2051
1982
  -moz-appearance:none;
2052
1983
  appearance:none;
2053
- cursor:var(--tds-radio-cursor);
2054
- background-color:var(--tds-radio-input-background-color);
2055
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2056
- border-radius:var(--tds-radio-input-border-radius);
2057
- transition-timing-function:var(--t-ease-in-out);
2058
- transition-duration:var(--t-duration-200);
2059
- transition-property:var(--tds-radio-transition-property);
1984
+ cursor:var(--tds-toggle-switch-cursor);
1985
+ outline:var(--tds-toggle-switch-track-outline);
1986
+ outline-offset:var(--t-focus-ring-offset);
1987
+ background-color:transparent;
1988
+ border:0;
1989
+ border-radius:var(--t-border-radius-round);
2060
1990
  }
2061
1991
 
2062
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2063
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2064
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2065
- }
2066
-
2067
- :is(.tds-radio input[type="radio"]):focus-visible{
2068
- outline:var(--t-focus-ring-outline);
2069
- outline-offset:var(--t-focus-ring-offset);
2070
- }
2071
-
2072
- :is(.tds-radio input[type="radio"]):disabled{
2073
- pointer-events:none;
1992
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1993
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2074
1994
  }
2075
1995
 
2076
- @media (prefers-reduced-motion: reduce){
2077
-
2078
- .tds-radio input[type="radio"]{
2079
- --tds-radio-transition-property:none;
1996
+ .tds-toggle-switch label{
1997
+ display:inline-flex;
1998
+ grid-area:1 / 2;
1999
+ padding-inline-start:var(--t-spacing-1);
2000
+ margin-top:-.09375em;
2001
+ font-size:var(--tds-toggle-switch-font-size);
2002
+ font-weight:var(--t-font-weight-normal);
2003
+ line-height:var(--tds-toggle-switch-line-height);
2004
+ color:var(--tds-toggle-switch-label-color);
2005
+ cursor:var(--tds-toggle-switch-cursor);
2080
2006
  }
2081
- }
2082
2007
 
2083
- .tds-radio:has(input:checked){
2084
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2085
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2086
- --tds-radio-input-border-width:4px;
2008
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2009
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2087
2010
  }
2088
2011
 
2089
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2090
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2091
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2092
- }
2093
-
2094
- .tds-radio:has(input:user-invalid){
2095
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2012
+ .tds-toggle-switch:has(input:checked){
2013
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2014
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2096
2015
  }
2097
2016
 
2098
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2099
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2100
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2017
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2018
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2101
2019
  }
2102
2020
 
2103
- .tds-radio:has(input:disabled){
2104
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2105
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2106
-
2107
- --tds-radio-label-color:var(--t-form-color-disabled);
2108
- --tds-radio-description-color:var(--t-form-color-disabled);
2109
- --tds-radio-cursor:not-allowed;
2021
+ .tds-toggle-switch:has(input:disabled){
2022
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2023
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2024
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2025
+ --tds-toggle-switch-cursor:not-allowed;
2110
2026
  }
2111
2027
 
2112
- .tds-radio:has(input:disabled) input:checked{
2113
- --tds-radio-input-background-color:var(--t-form-background-color);
2114
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2115
- }
2116
-
2117
- .tds-radio-description{
2118
- display:flex;
2119
- grid-area:2 / 2;
2120
- gap:var(--t-spacing-half);
2121
- align-items:flex-start;
2122
- padding-inline-start:var(--t-spacing-1);
2123
- margin:0;
2124
- font-size:var(--tds-radio-description-font-size);
2125
- line-height:var(--tds-radio-description-line-height);
2126
- color:var(--tds-radio-description-color);
2127
- cursor:text;
2128
- }
2129
-
2130
- .tds-radio--sm{
2131
- --tds-radio-line-height:1.35;
2132
- --tds-radio-input-size:var(--t-element-size-sm);
2133
- --tds-radio-font-size:var(--t-font-size-sm);
2134
- --tds-radio-description-font-size:var(--t-font-size-xs);
2135
- --tds-radio-description-line-height:1.3;
2136
- }
2137
-
2138
- .tds-radio-group{
2139
- --tds-radio-group-font-size:var(--t-font-size-md);
2140
- --tds-radio-group-line-height:1.4;
2141
- --tds-radio-group-gap:var(--t-spacing-1);
2142
-
2143
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2144
- --tds-radio-group-description-line-height:1.35;
2145
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2146
- --tds-radio-group-description-invalid-icon-display:none;
2147
- display:flex;
2148
- flex-direction:column;
2149
- gap:0;
2150
- padding:0;
2151
- margin:0;
2152
-
2153
- font-size:var(--tds-radio-group-font-size);
2154
- line-height:var(--tds-radio-group-line-height);
2155
- border:0;
2028
+ .tds-toggle-switch-track{
2029
+ position:relative;
2030
+ flex-shrink:0;
2031
+ width:var(--tds-toggle-switch-track-width);
2032
+ height:var(--tds-toggle-switch-track-height);
2033
+ background-color:var(--tds-toggle-switch-track-background-color);
2034
+ border-radius:var(--t-border-radius-round);
2035
+ transition:var(--tds-toggle-switch-track-transition);
2156
2036
  }
2157
2037
 
2158
- .tds-radio-group legend{
2159
- float:left;
2160
- padding:0;
2161
- margin:0;
2162
- }
2163
-
2164
- .tds-radio-group[aria-invalid="true"]{
2165
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2166
- --tds-radio-group-description-invalid-icon-display:inline-block;
2038
+ .tds-toggle-switch-track::before{
2039
+ position:absolute;
2040
+ top:var(--t-spacing-fourth);
2041
+ left:var(--t-spacing-fourth);
2042
+ width:var(--tds-toggle-switch-thumb-size);
2043
+ height:var(--tds-toggle-switch-thumb-size);
2044
+ content:"";
2045
+ background-color:#fff;
2046
+ border-radius:var(--t-border-radius-round);
2047
+ transform:var(--tds-toggle-switch-thumb-transform);
2048
+ transition:var(--tds-toggle-switch-thumb-transition);
2167
2049
  }
2168
2050
 
2169
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2170
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2171
- }
2172
-
2173
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2174
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2175
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2176
- }
2177
-
2178
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2179
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2180
- }
2181
-
2182
- .tds-radio-group:has(input:required) legend::after{
2183
- margin-left:.25ch;
2184
- color:var(--t-text-color-status-error);
2185
- content:"*";
2186
- }
2051
+ @media (prefers-reduced-motion: reduce){
2187
2052
 
2188
- .tds-radio-group-fields{
2189
- display:flex;
2190
- flex-direction:column;
2191
- gap:var(--tds-radio-group-gap);
2192
- align-items:flex-start;
2193
- margin-top:var(--t-spacing-1);
2053
+ .tds-toggle-switch-track{
2054
+ --tds-toggle-switch-track-transition:none;
2055
+ --tds-toggle-switch-thumb-transition:none;
2194
2056
  }
2057
+ }
2195
2058
 
2196
- .tds-radio-group-description{
2059
+ .tds-toggle-switch-description{
2197
2060
  display:flex;
2198
- gap:var(--t-spacing-half);
2061
+ grid-area:2 / 2;
2199
2062
  align-items:flex-start;
2200
- margin:var(--t-spacing-fourth) 0 0;
2201
- font-size:var(--tds-radio-group-description-font-size);
2202
- line-height:var(--tds-radio-group-description-line-height);
2203
- color:var(--tds-radio-group-description-color);
2063
+ padding-inline-start:var(--t-spacing-1);
2064
+ margin:0;
2065
+ font-size:var(--tds-toggle-switch-description-font-size);
2066
+ line-height:var(--tds-toggle-switch-description-line-height);
2067
+ color:var(--tds-toggle-switch-description-color);
2204
2068
  cursor:text;
2205
2069
  }
2206
2070
 
2207
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2208
- display:var(--tds-radio-group-description-invalid-icon-display);
2209
- flex-shrink:0;
2210
- margin-top:calc(.5lh - .5em);
2211
- line-height:var(--tds-radio-group-description-line-height);
2212
- }
2071
+ .tds-toggle-switch--sm{
2072
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2073
+ --tds-toggle-switch-line-height:1.35;
2074
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2075
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2076
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2077
+ --tds-toggle-switch-description-line-height:1.3;
2078
+ }
2213
2079
 
2214
- .tds-radio-group--sm{
2215
- --tds-radio-group-line-height:1.35;
2216
- --tds-radio-group-font-size:var(--t-font-size-sm);
2217
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2218
- --tds-radio-group-description-line-height:1.3;
2080
+ .tds-toggle-switch--hide-label{
2081
+ --tds-toggle-switch-display:inline-flex;
2219
2082
  }
2220
2083
 
2221
2084
  .tds-input:has(textarea){
@@ -2323,144 +2186,281 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2323
2186
  }
2324
2187
  }
2325
2188
 
2326
- .tds-toggle-switch{
2327
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2328
- --tds-toggle-switch-cursor:pointer;
2329
- --tds-toggle-switch-display:inline-grid;
2330
- --tds-toggle-switch-line-height:1.4;
2189
+ @layer t-critical{
2190
+ tds-page-header:not(.hydrated){
2191
+ display:none;
2192
+ }
2193
+ }
2331
2194
 
2332
- --tds-toggle-switch-label-color:var(--t-form-color);
2195
+ @layer t-component{
2196
+ .tds-page-header{
2197
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2198
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2199
+ --tds-page-header-color:var(--t-text-color);
2200
+ --tds-page-header-bottom-border-color:transparent;
2201
+ --tds-page-header-headline-color:var(--t-text-color-headline);
2202
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2203
+ --tds-page-header-padding-x:var(--t-spacing-2);
2204
+ --tds-page-header-padding-y:var(--t-spacing-2);
2205
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2206
+ --tds-page-header-nav-gap:var(--t-spacing-1);
2207
+ --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%);
2208
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2209
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2210
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2211
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2212
+ --tds-page-header-nav-item-border-width:1px;
2333
2213
 
2334
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2335
- --tds-toggle-switch-track-outline:none;
2336
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2337
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2338
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2214
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2215
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2339
2216
 
2340
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2341
- --tds-toggle-switch-thumb-transform:translateX(0);
2342
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2217
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
2218
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2219
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2343
2220
 
2344
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2345
- --tds-toggle-switch-description-line-height:1.35;
2346
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2347
- position:relative;
2221
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2222
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2348
2223
 
2349
- display:var(--tds-toggle-switch-display);
2350
- grid-template-columns:auto;
2351
- grid-auto-columns:1fr;
2352
- gap:var(--t-spacing-fourth) 0;
2353
- -webkit-user-select:none;
2354
- -moz-user-select:none;
2355
- user-select:none;
2356
- }
2224
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2225
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2226
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2357
2227
 
2358
- .tds-toggle-switch input[type="checkbox"]{
2359
- position:absolute;
2360
- width:var(--tds-toggle-switch-track-width);
2361
- height:var(--tds-toggle-switch-track-height);
2362
- margin:0;
2363
- -webkit-appearance:none;
2364
- -moz-appearance:none;
2365
- appearance:none;
2366
- cursor:var(--tds-toggle-switch-cursor);
2367
- outline:var(--tds-toggle-switch-track-outline);
2368
- outline-offset:var(--t-focus-ring-offset);
2369
- background-color:transparent;
2370
- border:0;
2371
- border-radius:var(--t-border-radius-round);
2228
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
2229
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2230
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2231
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2232
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2372
2233
  }
2373
2234
 
2374
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2375
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2235
+ .tds-page-header--profile{
2236
+ --tds-page-header-padding-y:20px;
2237
+ }
2238
+
2239
+ @supports (color: light-dark(#fff, #000)){
2240
+ .tds-page-header{
2241
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2242
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2376
2243
  }
2244
+ }
2377
2245
 
2378
- .tds-toggle-switch label{
2379
- display:inline-flex;
2380
- grid-area:1 / 2;
2381
- padding-inline-start:var(--t-spacing-1);
2382
- margin-top:-.09375em;
2383
- font-size:var(--tds-toggle-switch-font-size);
2384
- font-weight:var(--t-font-weight-normal);
2385
- line-height:var(--tds-toggle-switch-line-height);
2386
- color:var(--tds-toggle-switch-label-color);
2387
- cursor:var(--tds-toggle-switch-cursor);
2246
+ @media (min-width: 600px){
2247
+ .tds-page-header{
2248
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
2249
+ --tds-page-header-color:var(--t-text-color-secondary);
2250
+ --tds-page-header-bottom-border-color:var(--t-border-color);
2251
+ --tds-page-header-padding-x:var(--t-spacing-3);
2252
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2253
+ --tds-page-header-nav-gap:var(--t-spacing-half);
2254
+ --tds-page-header-nav-background:transparent;
2255
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2256
+ --tds-page-header-nav-item-border-width:1px;
2257
+ --tds-page-header-nav-item-color:var(--t-text-color);
2258
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2259
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2260
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2261
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2262
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2263
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2264
+ }
2388
2265
  }
2266
+ }
2389
2267
 
2390
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2391
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2268
+ .tds-page-header{
2269
+ display:flex;
2270
+ flex-direction:column;
2271
+ padding-top:var(--tds-page-header-padding-y);
2272
+ color:var(--tds-page-header-color);
2273
+ background:var(--tds-page-header-background-color);
2274
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2275
+ }
2276
+
2277
+ .tds-page-header:not(.has-nav){
2278
+ padding-bottom:var(--tds-page-header-padding-y);
2392
2279
  }
2393
2280
 
2394
- .tds-toggle-switch:has(input:checked){
2395
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2396
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2281
+ .tds-page-header.inactive{
2282
+ background:var(--tds-page-header-background-color-inactive);
2397
2283
  }
2398
2284
 
2399
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2400
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2285
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2286
+ width:100%;
2287
+ }
2288
+
2289
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2290
+ display:flex;
2291
+ flex-flow:row wrap;
2292
+ gap:var(--t-spacing-half) var(--t-spacing-1);
2293
+ align-items:flex-start;
2294
+ justify-content:flex-start;
2295
+ min-width:0;
2296
+ }
2297
+
2298
+ :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{
2299
+ display:flex;
2300
+ gap:var(--tds-page-header-nav-gap);
2301
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2302
+ margin:0 0 -1px;
2303
+ overflow:auto;
2304
+ list-style:none;
2305
+ background:var(--tds-page-header-nav-background);
2306
+ }
2307
+
2308
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2309
+ position:relative;
2310
+ display:inline-flex;
2311
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2312
+ font-size:var(--t-font-size-sm);
2313
+ line-height:22px;
2314
+ color:var(--tds-page-header-nav-item-color);
2315
+ white-space:nowrap;
2316
+ text-decoration:none;
2317
+ -webkit-appearance:none;
2318
+ -moz-appearance:none;
2319
+ appearance:none;
2320
+ cursor:pointer;
2321
+ outline-offset:-2px;
2322
+ background-color:var(--tds-page-header-nav-item-background-color);
2323
+ background-clip:padding-box;
2324
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2325
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2326
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2327
+ }
2328
+
2329
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2330
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2331
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2332
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2333
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2334
+ }
2335
+
2336
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2337
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2338
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2339
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2340
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2341
+ }
2342
+
2343
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2344
+ background-color:var(--tds-page-header-nav-item-background-color-active);
2345
+ border-color:var(--tds-page-header-nav-item-border-color-active);
2346
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2347
+ }
2348
+
2349
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2350
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2351
+ color:var(--tds-page-header-nav-item-color-disabled);
2352
+ cursor:not-allowed;
2353
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2354
+ opacity:1;
2355
+ }
2356
+
2357
+ @media (min-width: 600px){
2358
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2359
+ position:absolute;
2360
+ inset:auto -1px -1px;
2361
+ height:1px;
2362
+ pointer-events:none;
2363
+ content:"";
2364
+ background-color:var(--tds-page-header-bottom-border-color);
2365
+ }
2366
+ }
2367
+
2368
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2369
+ position:relative;
2401
2370
  }
2402
2371
 
2403
- .tds-toggle-switch:has(input:disabled){
2404
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2405
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2406
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2407
- --tds-toggle-switch-cursor:not-allowed;
2372
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2373
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2374
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2375
+ }
2376
+
2377
+ :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{
2378
+ position:absolute;
2379
+ top:-5px;
2380
+ right:-2px;
2381
+ width:10px;
2382
+ height:10px;
2383
+ content:"";
2384
+ background:var(--tds-page-header-nav-item-indicator-color);
2385
+ border-radius:50%;
2386
+ }
2387
+
2388
+ @media (prefers-reduced-motion: no-preference){
2389
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2390
+ animation:indicator-pulse 1.25s ease infinite;
2391
+ }
2392
+ }
2393
+
2394
+ .tds-page-header__title-bar{
2395
+ display:flex;
2396
+ flex-direction:column;
2397
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2398
+ align-items:flex-start;
2399
+ justify-content:space-between;
2400
+ padding:0 var(--tds-page-header-padding-x);
2401
+ }
2402
+
2403
+ .tds-page-header--profile > .tds-page-header__title-bar{
2404
+ align-items:center;
2408
2405
  }
2409
2406
 
2410
- .tds-toggle-switch-track{
2411
- position:relative;
2412
- flex-shrink:0;
2413
- width:var(--tds-toggle-switch-track-width);
2414
- height:var(--tds-toggle-switch-track-height);
2415
- background-color:var(--tds-toggle-switch-track-background-color);
2416
- border-radius:var(--t-border-radius-round);
2417
- transition:var(--tds-toggle-switch-track-transition);
2407
+ .tds-page-header__primary{
2408
+ width:100%;
2418
2409
  }
2419
2410
 
2420
- .tds-toggle-switch-track::before{
2421
- position:absolute;
2422
- top:var(--t-spacing-fourth);
2423
- left:var(--t-spacing-fourth);
2424
- width:var(--tds-toggle-switch-thumb-size);
2425
- height:var(--tds-toggle-switch-thumb-size);
2426
- content:"";
2427
- background-color:#fff;
2428
- border-radius:var(--t-border-radius-round);
2429
- transform:var(--tds-toggle-switch-thumb-transform);
2430
- transition:var(--tds-toggle-switch-thumb-transition);
2411
+ .tds-page-header__primary h1{
2412
+ margin:0;
2413
+ font-size:var(--tds-page-header-headline-font-size);
2414
+ font-weight:var(--t-font-weight-normal);
2415
+ line-height:32px;
2416
+ color:var(--tds-page-header-headline-color);
2417
+ overflow-wrap:break-word;
2431
2418
  }
2432
2419
 
2433
- @media (prefers-reduced-motion: reduce){
2420
+ @media (min-width: 960px){
2421
+ .tds-page-header__primary{
2422
+ flex:1 1 max-content;
2423
+ width:auto;
2424
+ min-width:0;
2425
+ max-width:100%;
2426
+ }
2434
2427
 
2435
- .tds-toggle-switch-track{
2436
- --tds-toggle-switch-track-transition:none;
2437
- --tds-toggle-switch-thumb-transition:none;
2438
- }
2428
+ .tds-page-header__title-bar,
2429
+ .tds-page-header--profile .tds-page-header__title-bar{
2430
+ flex-flow:row nowrap;
2431
+ row-gap:12px;
2432
+ align-items:flex-start;
2439
2433
  }
2434
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2435
+ width:auto;
2436
+ }
2440
2437
 
2441
- .tds-toggle-switch-description{
2442
- display:flex;
2443
- grid-area:2 / 2;
2444
- align-items:flex-start;
2445
- padding-inline-start:var(--t-spacing-1);
2446
- margin:0;
2447
- font-size:var(--tds-toggle-switch-description-font-size);
2448
- line-height:var(--tds-toggle-switch-description-line-height);
2449
- color:var(--tds-toggle-switch-description-color);
2450
- cursor:text;
2438
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2439
+ justify-content:flex-end;
2440
+ }
2451
2441
  }
2452
2442
 
2453
- .tds-toggle-switch--sm{
2454
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2455
- --tds-toggle-switch-line-height:1.35;
2456
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2457
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2458
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2459
- --tds-toggle-switch-description-line-height:1.3;
2443
+ .tds-page-header-phone,
2444
+ .tds-page-header-email{
2445
+ color:var(--tds-page-header-color);
2446
+ white-space:nowrap;
2447
+ }
2448
+ .tds-page-header-email{
2449
+ max-width:100%;
2450
+ overflow:hidden;
2451
+ text-overflow:ellipsis;
2460
2452
  }
2461
2453
 
2462
- .tds-toggle-switch--hide-label{
2463
- --tds-toggle-switch-display:inline-flex;
2454
+ @keyframes indicator-pulse{
2455
+ 0%{
2456
+ opacity:.3;
2457
+ transform:scale(.9);
2458
+ }
2459
+
2460
+ 100%{
2461
+ opacity:0;
2462
+ transform:scale(1.75);
2463
+ }
2464
2464
  }
2465
2465
 
2466
2466
  .tds-input{
@@ -4363,83 +4363,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4363
4363
  border-radius:var(--t-border-radius-round);
4364
4364
  }
4365
4365
 
4366
- .tds-pane{
4367
- --tds-pane-background-color:var(--t-surface-color-card);
4368
- --tds-pane-border-radius:var(--t-border-radius-lg);
4369
- --tds-pane-border-color:var(--t-border-color);
4370
-
4371
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
4372
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
4373
-
4374
- --tds-pane-title-color:var(--t-text-color-headline);
4375
- --tds-pane-title-font-size:var(--t-font-size-lg);
4376
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
4377
- --tds-pane-title-line-height:1.4;
4378
-
4379
- --tds-pane-body-padding:var(--t-spacing-3);
4380
-
4381
- --tds-pane-footer-padding-block:var(--t-spacing-2);
4382
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
4383
-
4384
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
4385
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
4386
-
4387
- background:var(--tds-pane-background-color);
4388
- border-radius:var(--tds-pane-border-radius);
4389
- border:var(--t-border-width) solid var(--tds-pane-border-color);
4390
- display:flex;
4391
- flex-direction:column;
4392
- }
4393
-
4394
- .tds-pane-header{
4395
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
4396
- padding-block:var(--tds-pane-header-padding-block);
4397
- padding-inline:var(--tds-pane-header-padding-inline);
4398
- }
4399
-
4400
- .tds-pane-header > .tds-helper-shelf-trigger{
4401
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
4402
- }
4403
-
4404
- .tds-pane-header > .tds-helper-shelf{
4405
- flex-basis:100%;
4406
- order:1;
4407
- }
4408
-
4409
- .tds-pane-header:has( > .tds-helper-shelf){
4410
- row-gap:var(--tds-pane-header-padding-block);
4411
- padding-block-end:0;
4412
- }
4413
-
4414
- .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
4415
- font-size:var(--t-font-size-md);
4416
- margin-block-end:var(--tds-pane-header-padding-block);
4417
- }
4418
-
4419
- .tds-pane-title{
4420
- color:var(--tds-pane-title-color);
4421
- font-size:var(--tds-pane-title-font-size);
4422
- font-weight:var(--tds-pane-title-font-weight);
4423
- line-height:var(--tds-pane-title-line-height);
4424
- margin:0;
4425
- }
4426
-
4427
- .tds-pane-body{
4428
- padding:var(--tds-pane-body-padding);
4429
- }
4430
-
4431
- .tds-pane-footer{
4432
- padding-block-end:var(--tds-pane-footer-padding-block);
4433
- padding-inline:var(--tds-pane-footer-padding-inline);
4434
- }
4435
-
4436
- .tds-pane-divider{
4437
- border:0;
4438
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
4439
- margin-block:var(--tds-pane-divider-margin-block);
4440
- margin-inline:var(--tds-pane-divider-margin-inline);
4441
- }
4442
-
4443
4366
  .tds-data-table{
4444
4367
  --tds-data-table-background-color:var(--t-surface-color-canvas);
4445
4368
  --tds-data-table-border-color:var(--t-border-color);
@@ -5163,6 +5086,83 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5163
5086
  --tds-segmented-control-background-color-disabled:transparent;
5164
5087
  }
5165
5088
 
5089
+ .tds-pane{
5090
+ --tds-pane-background-color:var(--t-surface-color-card);
5091
+ --tds-pane-border-radius:var(--t-border-radius-lg);
5092
+ --tds-pane-border-color:var(--t-border-color);
5093
+
5094
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
5095
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
5096
+
5097
+ --tds-pane-title-color:var(--t-text-color-headline);
5098
+ --tds-pane-title-font-size:var(--t-font-size-lg);
5099
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
5100
+ --tds-pane-title-line-height:1.4;
5101
+
5102
+ --tds-pane-body-padding:var(--t-spacing-3);
5103
+
5104
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
5105
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
5106
+
5107
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
5108
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
5109
+
5110
+ background:var(--tds-pane-background-color);
5111
+ border-radius:var(--tds-pane-border-radius);
5112
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
5113
+ display:flex;
5114
+ flex-direction:column;
5115
+ }
5116
+
5117
+ .tds-pane-header{
5118
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
5119
+ padding-block:var(--tds-pane-header-padding-block);
5120
+ padding-inline:var(--tds-pane-header-padding-inline);
5121
+ }
5122
+
5123
+ .tds-pane-header > .tds-helper-shelf-trigger{
5124
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
5125
+ }
5126
+
5127
+ .tds-pane-header > .tds-helper-shelf{
5128
+ flex-basis:100%;
5129
+ order:1;
5130
+ }
5131
+
5132
+ .tds-pane-header:has( > .tds-helper-shelf){
5133
+ row-gap:var(--tds-pane-header-padding-block);
5134
+ padding-block-end:0;
5135
+ }
5136
+
5137
+ .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
5138
+ font-size:var(--t-font-size-md);
5139
+ margin-block-end:var(--tds-pane-header-padding-block);
5140
+ }
5141
+
5142
+ .tds-pane-title{
5143
+ color:var(--tds-pane-title-color);
5144
+ font-size:var(--tds-pane-title-font-size);
5145
+ font-weight:var(--tds-pane-title-font-weight);
5146
+ line-height:var(--tds-pane-title-line-height);
5147
+ margin:0;
5148
+ }
5149
+
5150
+ .tds-pane-body{
5151
+ padding:var(--tds-pane-body-padding);
5152
+ }
5153
+
5154
+ .tds-pane-footer{
5155
+ padding-block-end:var(--tds-pane-footer-padding-block);
5156
+ padding-inline:var(--tds-pane-footer-padding-inline);
5157
+ }
5158
+
5159
+ .tds-pane-divider{
5160
+ border:0;
5161
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
5162
+ margin-block:var(--tds-pane-divider-margin-block);
5163
+ margin-inline:var(--tds-pane-divider-margin-inline);
5164
+ }
5165
+
5166
5166
  .search-result-grouping-4F5Lx{
5167
5167
  color:var(--t-text-color-secondary);
5168
5168
  }