@planningcenter/tapestry 4.0.0-rc.13 → 4.0.0-rc.14

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