@planningcenter/tapestry 4.6.0-rc.2 → 4.6.0-rc.3

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