@planningcenter/tapestry 4.0.0-rc.20 → 4.0.0-rc.22

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 (14) hide show
  1. package/dist/components/DataTable/DataTable.d.ts +14 -6
  2. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  3. package/dist/components/DataTable/DataTable.js +8 -5
  4. package/dist/components/DataTable/DataTable.js.map +1 -1
  5. package/dist/components/DataTable/ResultsCount.d.ts +4 -1
  6. package/dist/components/DataTable/ResultsCount.d.ts.map +1 -1
  7. package/dist/components/DataTable/ResultsCount.js.map +1 -1
  8. package/dist/reactRender.css +1174 -1118
  9. package/dist/reactRender.css.map +1 -1
  10. package/dist/reactRenderLegacy.css +1174 -1118
  11. package/dist/reactRenderLegacy.css.map +1 -1
  12. package/dist/unstable.css +75 -19
  13. package/dist/unstable.css.map +1 -1
  14. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,881 +677,686 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- @layer t-critical{
681
- tds-page-header:not(.hydrated){
682
- display:none;
683
- }
680
+
681
+ @media (prefers-reduced-motion: no-preference){
682
+
683
+ :root{
684
+ interpolate-size:allow-keywords;
684
685
  }
686
+ }
685
687
 
686
- @layer t-component{
687
- .tds-page-header{
688
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
689
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
690
- --tds-page-header-color:var(--t-text-color);
691
- --tds-page-header-bottom-border-color:transparent;
692
- --tds-page-header-headline-color:var(--t-text-color-headline);
693
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
694
- --tds-page-header-padding-x:var(--t-spacing-2);
695
- --tds-page-header-padding-y:var(--t-spacing-2);
696
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
697
- --tds-page-header-nav-gap:var(--t-spacing-1);
698
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
699
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
700
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
701
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
702
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
703
- --tds-page-header-nav-item-border-width:1px;
688
+ @layer tds-component{
689
+ tds-sidenav,
690
+ .tds-sidenav{
691
+ --tds-sidenav-indent:12px;
692
+ --tds-sidenav-item-depth:0;
704
693
 
705
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
694
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
707
695
 
708
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
696
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
697
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
698
+ --tds-sidenav-collapse-closed-opacity:0;
699
+ --tds-sidenav-collapse-open-opacity:1;
700
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
701
+ --tds-sidenav-collapse-open-transform:translateY(0);
711
702
 
712
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
713
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
703
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
704
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
705
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
706
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
714
707
 
715
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
716
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
717
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
708
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
+ --tds-sidenav-item-nested-background-selected:transparent;
718
711
 
719
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
720
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
721
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
722
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
723
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
724
- }
712
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
725
715
 
726
- .tds-page-header--profile{
727
- --tds-page-header-padding-y:20px;
716
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
728
718
  }
729
719
 
730
- @supports (color: light-dark(#fff, #000)){
731
- .tds-page-header{
732
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
720
+ @media (prefers-reduced-motion: reduce){
721
+ tds-sidenav,
722
+ .tds-sidenav{
723
+ --tds-sidenav-collapse-transition-enter:none;
724
+ --tds-sidenav-collapse-transition-exit:none;
725
+ --tds-sidenav-collapse-closed-transform:none;
726
+ --tds-sidenav-collapse-open-transform:none;
727
+ }
734
728
  }
729
+
730
+ .tds-sidenav--theme-gray{
731
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
732
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
733
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
734
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
735
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
735
736
  }
737
+ }
736
738
 
737
- @media (min-width: 600px){
738
- .tds-page-header{
739
- --tds-page-header-background-color:var(--t-surface-color-canvas);
740
- --tds-page-header-color:var(--t-text-color-secondary);
741
- --tds-page-header-bottom-border-color:var(--t-border-color);
742
- --tds-page-header-padding-x:var(--t-spacing-3);
743
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
744
- --tds-page-header-nav-gap:var(--t-spacing-half);
745
- --tds-page-header-nav-background:transparent;
746
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
747
- --tds-page-header-nav-item-border-width:1px;
748
- --tds-page-header-nav-item-color:var(--t-text-color);
749
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
750
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
751
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
752
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
753
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
754
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
755
- }
739
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
+ display:flex;
741
+ }
742
+
743
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
744
+ flex-direction:column;
745
+ gap:var(--t-spacing-half);
746
+ width:100%;
756
747
  }
748
+
749
+ .tds-sidenav-section-list{
750
+ width:100%;
751
+ padding:0;
752
+ margin:0;
753
+ list-style:none;
757
754
  }
758
755
 
759
- .tds-page-header{
756
+ .tds-sidenav-section-header{
760
757
  display:flex;
761
- flex-direction:column;
762
- padding-top:var(--tds-page-header-padding-y);
763
- color:var(--tds-page-header-color);
764
- background:var(--tds-page-header-background-color);
765
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
758
+ align-items:baseline;
759
+ justify-content:space-between;
760
+ padding-top:var(--t-spacing-2);
766
761
  }
767
762
 
768
- .tds-page-header:not(.has-nav){
769
- padding-bottom:var(--tds-page-header-padding-y);
763
+ .tds-sidenav-section-header h2{
764
+ margin:0;
765
+ font-size:var(--t-font-size-sm);
766
+ font-weight:var(--t-font-weight-semibold);
767
+ line-height:1.35;
768
+ color:var(--t-text-color-secondary);
769
+ text-transform:uppercase;
770
770
  }
771
771
 
772
- .tds-page-header.inactive{
773
- background:var(--tds-page-header-background-color-inactive);
772
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
+ padding-top:0;
774
774
  }
775
775
 
776
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
- width:100%;
776
+ .tds-sidenav-section-header [slot="label-actions"]{
777
+ display:flex;
778
+ gap:var(--t-spacing-half);
779
+ align-items:center;
778
780
  }
779
781
 
780
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
782
+ .tds-sidenav-section [slot="section-actions"]{
783
+ display:flex;
784
+ gap:12px;
785
+ align-items:center;
786
+ min-height:42px;
787
+ padding:var(--t-spacing-1) 0;
788
+ }
789
+
790
+ .tds-sidenav-section-list,
791
+ .tds-sidenav-item{
792
+ width:100%;
793
+ padding:0;
794
+ margin:0;
795
+ }
796
+
797
+ .tds-sidenav-item :is(a,button){
798
+ position:relative;
781
799
  display:flex;
782
- flex-flow:row wrap;
783
- gap:var(--t-spacing-half) var(--t-spacing-1);
784
- align-items:flex-start;
785
- justify-content:flex-start;
786
- min-width:0;
800
+ gap:12px;
801
+ align-items:center;
802
+ width:100%;
803
+ padding:12px;
804
+ overflow:hidden;
805
+ font-size:var(--t-font-size-sm);
806
+ line-height:18px;
807
+ color:var(--t-text-color-headline);
808
+ white-space:nowrap;
809
+ text-decoration:none;
810
+ -webkit-appearance:none;
811
+ -moz-appearance:none;
812
+ appearance:none;
813
+ cursor:pointer;
814
+ background-color:var(--tds-sidenav-item-background, transparent);
815
+ border:0;
816
+ border-radius:var(--t-border-radius);
817
+ transition:var(--tds-sidenav-item-transition);
787
818
  }
788
819
 
789
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
790
- display:flex;
791
- gap:var(--tds-page-header-nav-gap);
792
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
793
- margin:0 0 -1px;
794
- overflow:auto;
795
- list-style:none;
796
- background:var(--tds-page-header-nav-background);
820
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
+ display:block;
822
+ flex:1;
823
+ overflow:hidden;
824
+ text-overflow:ellipsis;
825
+ text-align:left;
826
+ white-space:nowrap;
797
827
  }
798
828
 
799
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
- position:relative;
801
- display:inline-flex;
802
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
- font-size:var(--t-font-size-sm);
804
- line-height:22px;
805
- color:var(--tds-page-header-nav-item-color);
806
- white-space:nowrap;
829
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
+ color:var(--t-text-color-headline);
807
832
  text-decoration:none;
808
- -webkit-appearance:none;
809
- -moz-appearance:none;
810
- appearance:none;
811
- cursor:pointer;
812
- outline-offset:-2px;
813
- background-color:var(--tds-page-header-nav-item-background-color);
814
- background-clip:padding-box;
815
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
818
833
  }
819
834
 
820
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
821
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
822
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
823
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
824
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
835
+ :is(.tds-sidenav-item :is(a,button)):active{
836
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
837
+ }
838
+
839
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
+ overflow:hidden;
841
+ color:var(--tds-sidenav-item-icon-color);
842
+ }
843
+
844
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
845
+ display:block;
846
+ width:var(--tds-sidenav-item-icon-size);
847
+ height:var(--tds-sidenav-item-icon-size);
825
848
  }
826
849
 
827
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
828
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
829
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
830
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
831
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
832
- }
850
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
+ --tds-sidenav-indent:19px;
852
+ }
833
853
 
834
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
835
- background-color:var(--tds-page-header-nav-item-background-color-active);
836
- border-color:var(--tds-page-header-nav-item-border-color-active);
837
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
838
- }
854
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
+ visibility:visible;
856
+ block-size:auto;
857
+ opacity:1;
858
+ }
839
859
 
840
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
841
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
842
- color:var(--tds-page-header-nav-item-color-disabled);
843
- cursor:not-allowed;
844
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
845
- opacity:1;
846
- }
860
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
861
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
862
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
847
863
 
848
- @media (min-width: 600px){
849
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
850
- position:absolute;
851
- inset:auto -1px -1px;
852
- height:1px;
853
- pointer-events:none;
854
- content:"";
855
- background-color:var(--tds-page-header-bottom-border-color);
856
- }
857
- }
864
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
+ font-weight:var(--t-font-weight-semibold);
866
+ }
858
867
 
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
868
+ .tds-sidenav-item:has(.tds-sidenav-section){
869
+ display:flex;
870
+ flex-direction:column;
871
+ gap:var(--t-spacing-half);
872
+ }
873
+
874
+ .tds-sidenav-item .tds-sidenav-section-list{
875
+ --tds-sidenav-item-depth:1;
876
+ gap:0;
877
+ }
878
+
879
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
+ visibility:hidden;
881
+ block-size:0;
882
+ overflow-y:clip;
883
+ opacity:0;
884
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
861
885
  }
862
886
 
863
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
864
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
865
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
887
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
+ --tds-sidenav-item-depth:2;
889
+ }
890
+
891
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
892
+ min-height:var(--t-element-size-2xl);
893
+ padding-block:9px;
894
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
895
+ line-height:1;
896
+ background-color:transparent;
897
+ }
898
+
899
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
900
+ position:absolute;
901
+ top:0;
902
+ bottom:0;
903
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
904
+ width:2px;
905
+ content:"";
906
+ background-color:var(--tds-sidenav-item-nested-border-color);
907
+ transition:var(--tds-sidenav-item-transition);
866
908
  }
867
909
 
868
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
910
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
869
911
  position:absolute;
870
- top:-5px;
871
- right:-2px;
872
- width:10px;
873
- height:10px;
912
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
+ z-index:-1;
914
+ height:100%;
874
915
  content:"";
875
- background:var(--tds-page-header-nav-item-indicator-color);
876
- border-radius:50%;
916
+ background-color:var(--tds-sidenav-item-nested-background);
917
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
+ transition:var(--tds-sidenav-item-transition);
877
919
  }
878
920
 
879
- @media (prefers-reduced-motion: no-preference){
880
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
881
- animation:indicator-pulse 1.25s ease infinite;
882
- }
921
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
922
+ display:block;
923
+ text-align:left;
924
+ white-space:normal;
883
925
  }
884
926
 
885
- .tds-page-header__title-bar{
886
- display:flex;
887
- flex-direction:column;
888
- gap:var(--t-spacing-2) var(--t-spacing-1);
889
- align-items:flex-start;
890
- justify-content:space-between;
891
- padding:0 var(--tds-page-header-padding-x);
892
- }
927
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
928
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
930
+ }
893
931
 
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
896
- }
932
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
933
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
934
+ }
897
935
 
898
- .tds-page-header__primary{
936
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
937
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
938
+ font-weight:var(--t-font-weight-medium);
939
+ }
940
+
941
+ .tds-sidenav-responsive-header{
942
+ display:flex;
943
+ gap:var(--t-spacing-2);
944
+ align-items:center;
899
945
  width:100%;
900
946
  }
901
947
 
902
- .tds-page-header__primary h1{
948
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
+ order:0;
950
+ }
951
+
952
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
+ flex:1;
954
+ order:1;
903
955
  margin:0;
904
- font-size:var(--tds-page-header-headline-font-size);
905
- font-weight:var(--t-font-weight-normal);
906
- line-height:32px;
907
- color:var(--tds-page-header-headline-color);
908
- overflow-wrap:break-word;
956
+ font-size:var(--t-font-size-lg);
957
+ font-weight:var(--t-font-weight-medium);
958
+ color:var(--t-text-color-headline);
909
959
  }
910
960
 
911
- @media (min-width: 960px){
912
- .tds-page-header__primary{
913
- flex:1 1 max-content;
914
- width:auto;
915
- min-width:0;
916
- max-width:100%;
961
+ @media (max-width: 719px){
962
+ .tds-sidenav-collapse{
963
+ z-index:10001;
964
+ display:none;
965
+ max-width:min(448px, calc(100vw - 48px));
966
+ padding:0;
967
+ margin:12px 0;
968
+ position-area:bottom span-right;
969
+ overflow:hidden;
970
+ outline:0;
971
+ background:var(--t-surface-color-card);
972
+ border:0;
973
+ border-radius:6px;
974
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
+ opacity:var(--tds-sidenav-collapse-open-opacity);
976
+ transform:var(--tds-sidenav-collapse-open-transform);
977
+ transition:var(--tds-sidenav-collapse-transition-enter);
978
+ will-change:transform;
917
979
  }
918
980
 
919
- .tds-page-header__title-bar,
920
- .tds-page-header--profile .tds-page-header__title-bar{
921
- flex-flow:row nowrap;
922
- row-gap:12px;
923
- align-items:flex-start;
981
+ .tds-sidenav-scroll-container{
982
+ --webkit-overflow-scrolling:touch;
983
+ display:block;
984
+ width:100%;
985
+ height:-moz-fit-content;
986
+ height:fit-content;
987
+ padding:var(--t-spacing-2);
988
+ overflow-y:auto;
924
989
  }
925
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
- width:auto;
927
- }
928
990
 
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
991
+ .tds-sidenav-item :is(a, button) :is(.prefix){
992
+ display:none;
993
+ }
994
+ @supports selector(:popover-open){
995
+ .tds-sidenav-collapse:popover-open{
996
+ display:flex;
931
997
  }
932
- }
933
998
 
934
- .tds-page-header-phone,
935
- .tds-page-header-email{
936
- color:var(--tds-page-header-color);
937
- white-space:nowrap;
938
- }
939
- .tds-page-header-email{
940
- max-width:100%;
941
- overflow:hidden;
942
- text-overflow:ellipsis;
943
- }
999
+ .tds-sidenav-collapse:not(:popover-open){
1000
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
+ transition:var(--tds-sidenav-collapse-transition-exit);
1002
+ }
944
1003
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
1004
+ @starting-style{
1005
+ .tds-sidenav-collapse:popover-open{
1006
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
+ transform:var(--tds-sidenav-collapse-closed-transform);
1008
+ }
1009
+ }
949
1010
  }
1011
+ @supports not selector(:popover-open){
1012
+ .tds-sidenav-collapse.\:popover-open{
1013
+ display:flex;
1014
+ }
950
1015
 
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
1016
+ .tds-sidenav-collapse:not(.\:popover-open){
1017
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
+ transition:var(--tds-sidenav-collapse-transition-exit);
1019
+ }
954
1020
  }
955
1021
  }
956
1022
 
957
- .tds-button-group{
958
- display:inline-flex;
1023
+ @media (min-width: 720px){
1024
+ .tds-sidenav-responsive-header{
1025
+ display:none;
1026
+ }
959
1027
  }
960
- .tds-button-group > .tds-btn{
961
- --tds-button-group-item-z-index:1;
962
1028
 
963
- position:relative;
964
- z-index:var(--tds-button-group-item-z-index);
965
- border-radius:0;
966
- }
967
- :is(.tds-button-group > .tds-btn):not(:first-child){
968
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1029
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
+ display:none;
969
1031
  }
970
- :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{
971
- position:absolute;
972
- inset-block:calc(var(--tds-btn-border-width) * -1);
973
- width:var(--tds-btn-border-width);
974
- pointer-events:none;
975
- content:"";
976
- background-color:var(--t-border-color-white);
977
- }
978
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
979
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
980
- }
981
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
982
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
983
- }
984
- :is(.tds-button-group > .tds-btn):hover{
985
- --tds-button-group-item-z-index:2;
986
- }
987
- :is(.tds-button-group > .tds-btn):focus-visible{
988
- --tds-button-group-item-z-index:5;
989
- }
990
- .tds-button-group > .tds-btn:first-child{
991
- border-start-start-radius:var(--tds-btn-border-radius);
992
- border-end-start-radius:var(--tds-btn-border-radius);
993
- }
994
- .tds-button-group > .tds-btn:last-child{
995
- border-start-end-radius:var(--tds-btn-border-radius);
996
- border-end-end-radius:var(--tds-btn-border-radius);
997
- }
998
1032
 
1033
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
+ display:block;
1035
+ }
999
1036
 
1000
- @media (prefers-reduced-motion: no-preference){
1037
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
+ display:flex;
1039
+ flex-direction:column;
1040
+ }
1001
1041
 
1002
- :root{
1003
- interpolate-size:allow-keywords;
1004
- }
1042
+ @layer t-critical{
1043
+ tds-page-header:not(.hydrated){
1044
+ display:none;
1005
1045
  }
1046
+ }
1006
1047
 
1007
- @layer tds-component{
1008
- tds-sidenav,
1009
- .tds-sidenav{
1010
- --tds-sidenav-indent:12px;
1011
- --tds-sidenav-item-depth:0;
1012
-
1013
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1014
-
1015
- --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;
1016
- --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;
1017
- --tds-sidenav-collapse-closed-opacity:0;
1018
- --tds-sidenav-collapse-open-opacity:1;
1019
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1020
- --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;
1021
1066
 
1022
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1023
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1024
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1025
- --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);
1026
1069
 
1027
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1028
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1029
- --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);
1030
1073
 
1031
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1032
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1033
- --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);
1034
1076
 
1035
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1036
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1037
- }
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);
1038
1080
 
1039
- @media (prefers-reduced-motion: reduce){
1040
- tds-sidenav,
1041
- .tds-sidenav{
1042
- --tds-sidenav-collapse-transition-enter:none;
1043
- --tds-sidenav-collapse-transition-exit:none;
1044
- --tds-sidenav-collapse-closed-transform:none;
1045
- --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);
1046
1086
  }
1047
- }
1048
1087
 
1049
- .tds-sidenav--theme-gray{
1050
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1051
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1052
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1053
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1054
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1088
+ .tds-page-header--profile{
1089
+ --tds-page-header-padding-y:20px;
1055
1090
  }
1056
- }
1057
1091
 
1058
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1059
- 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
+ }
1060
1097
  }
1061
1098
 
1062
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1063
- flex-direction:column;
1064
- gap:var(--t-spacing-half);
1065
- 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
+ }
1066
1118
  }
1067
-
1068
- .tds-sidenav-section-list{
1069
- width:100%;
1070
- padding:0;
1071
- margin:0;
1072
- list-style:none;
1073
1119
  }
1074
1120
 
1075
- .tds-sidenav-section-header{
1121
+ .tds-page-header{
1076
1122
  display:flex;
1077
- align-items:baseline;
1078
- justify-content:space-between;
1079
- 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);
1080
1128
  }
1081
1129
 
1082
- .tds-sidenav-section-header h2{
1083
- margin:0;
1084
- font-size:var(--t-font-size-sm);
1085
- font-weight:var(--t-font-weight-semibold);
1086
- line-height:1.35;
1087
- color:var(--t-text-color-secondary);
1088
- text-transform:uppercase;
1130
+ .tds-page-header:not(.has-nav){
1131
+ padding-bottom:var(--tds-page-header-padding-y);
1089
1132
  }
1090
1133
 
1091
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1092
- padding-top:0;
1134
+ .tds-page-header.inactive{
1135
+ background:var(--tds-page-header-background-color-inactive);
1093
1136
  }
1094
1137
 
1095
- .tds-sidenav-section-header [slot="label-actions"]{
1096
- display:flex;
1097
- gap:var(--t-spacing-half);
1098
- align-items:center;
1138
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
+ width:100%;
1099
1140
  }
1100
1141
 
1101
- .tds-sidenav-section [slot="section-actions"]{
1102
- display:flex;
1103
- gap:12px;
1104
- align-items:center;
1105
- min-height:42px;
1106
- padding:var(--t-spacing-1) 0;
1107
- }
1108
-
1109
- .tds-sidenav-section-list,
1110
- .tds-sidenav-item{
1111
- width:100%;
1112
- padding:0;
1113
- margin:0;
1114
- }
1115
-
1116
- .tds-sidenav-item :is(a,button){
1117
- position:relative;
1142
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1118
1143
  display:flex;
1119
- gap:12px;
1120
- align-items:center;
1121
- width:100%;
1122
- padding:12px;
1123
- overflow:hidden;
1124
- font-size:var(--t-font-size-sm);
1125
- line-height:18px;
1126
- color:var(--t-text-color-headline);
1127
- white-space:nowrap;
1128
- text-decoration:none;
1129
- -webkit-appearance:none;
1130
- -moz-appearance:none;
1131
- appearance:none;
1132
- cursor:pointer;
1133
- background-color:var(--tds-sidenav-item-background, transparent);
1134
- border:0;
1135
- border-radius:var(--t-border-radius);
1136
- transition:var(--tds-sidenav-item-transition);
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;
1137
1149
  }
1138
1150
 
1139
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1140
- display:block;
1141
- flex:1;
1142
- overflow:hidden;
1143
- text-overflow:ellipsis;
1144
- text-align:left;
1145
- white-space:nowrap;
1151
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1152
+ display:flex;
1153
+ gap:var(--tds-page-header-nav-gap);
1154
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1155
+ margin:0 0 -1px;
1156
+ overflow:auto;
1157
+ list-style:none;
1158
+ background:var(--tds-page-header-nav-background);
1146
1159
  }
1147
1160
 
1148
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1149
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1150
- color:var(--t-text-color-headline);
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;
1151
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;
1152
1180
  }
1153
1181
 
1154
- :is(.tds-sidenav-item :is(a,button)):active{
1155
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1156
- }
1157
-
1158
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1159
- overflow:hidden;
1160
- color:var(--tds-sidenav-item-icon-color);
1161
- }
1162
-
1163
- :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{
1164
- display:block;
1165
- width:var(--tds-sidenav-item-icon-size);
1166
- height:var(--tds-sidenav-item-icon-size);
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);
1167
1187
  }
1168
1188
 
1169
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1170
- --tds-sidenav-indent:19px;
1171
- }
1172
-
1173
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1174
- visibility:visible;
1175
- block-size:auto;
1176
- opacity:1;
1177
- }
1178
-
1179
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1180
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1181
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1182
-
1183
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1184
- font-weight:var(--t-font-weight-semibold);
1185
- }
1186
-
1187
- .tds-sidenav-item:has(.tds-sidenav-section){
1188
- display:flex;
1189
- flex-direction:column;
1190
- gap:var(--t-spacing-half);
1191
- }
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
+ }
1192
1195
 
1193
- .tds-sidenav-item .tds-sidenav-section-list{
1194
- --tds-sidenav-item-depth:1;
1195
- gap:0;
1196
- }
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
+ }
1197
1201
 
1198
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1199
- visibility:hidden;
1200
- block-size:0;
1201
- overflow-y:clip;
1202
- opacity:0;
1203
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1204
- }
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
+ }
1205
1209
 
1206
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1207
- --tds-sidenav-item-depth:2;
1208
- }
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
+ }
1209
1220
 
1210
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1211
- min-height:var(--t-element-size-2xl);
1212
- padding-block:9px;
1213
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1214
- line-height:1;
1215
- background-color:transparent;
1221
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
+ position:relative;
1216
1223
  }
1217
1224
 
1218
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1219
- position:absolute;
1220
- top:0;
1221
- bottom:0;
1222
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1223
- width:2px;
1224
- content:"";
1225
- background-color:var(--tds-sidenav-item-nested-border-color);
1226
- transition:var(--tds-sidenav-item-transition);
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);
1227
1228
  }
1228
1229
 
1229
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
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{
1230
1231
  position:absolute;
1231
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1232
- z-index:-1;
1233
- height:100%;
1232
+ top:-5px;
1233
+ right:-2px;
1234
+ width:10px;
1235
+ height:10px;
1234
1236
  content:"";
1235
- background-color:var(--tds-sidenav-item-nested-background);
1236
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1237
- transition:var(--tds-sidenav-item-transition);
1238
- }
1239
-
1240
- :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)){
1241
- display:block;
1242
- text-align:left;
1243
- white-space:normal;
1244
- }
1245
-
1246
- :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{
1247
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1248
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1237
+ background:var(--tds-page-header-nav-item-indicator-color);
1238
+ border-radius:50%;
1249
1239
  }
1250
1240
 
1251
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1252
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
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
+ }
1253
1245
  }
1254
1246
 
1255
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1256
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1257
- font-weight:var(--t-font-weight-medium);
1258
- }
1259
-
1260
- .tds-sidenav-responsive-header{
1247
+ .tds-page-header__title-bar{
1261
1248
  display:flex;
1262
- gap:var(--t-spacing-2);
1263
- align-items:center;
1264
- width:100%;
1249
+ flex-direction:column;
1250
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1251
+ align-items:flex-start;
1252
+ justify-content:space-between;
1253
+ padding:0 var(--tds-page-header-padding-x);
1265
1254
  }
1266
1255
 
1267
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1268
- order:0;
1269
- }
1270
-
1271
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1272
- flex:1;
1273
- order:1;
1274
- margin:0;
1275
- font-size:var(--t-font-size-lg);
1276
- font-weight:var(--t-font-weight-medium);
1277
- color:var(--t-text-color-headline);
1256
+ .tds-page-header--profile > .tds-page-header__title-bar{
1257
+ align-items:center;
1278
1258
  }
1279
1259
 
1280
- @media (max-width: 719px){
1281
- .tds-sidenav-collapse{
1282
- z-index:10001;
1283
- display:none;
1284
- max-width:min(448px, calc(100vw - 48px));
1285
- padding:0;
1286
- margin:12px 0;
1287
- position-area:bottom span-right;
1288
- overflow:hidden;
1289
- outline:0;
1290
- background:var(--t-surface-color-card);
1291
- border:0;
1292
- border-radius:6px;
1293
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1294
- opacity:var(--tds-sidenav-collapse-open-opacity);
1295
- transform:var(--tds-sidenav-collapse-open-transform);
1296
- transition:var(--tds-sidenav-collapse-transition-enter);
1297
- will-change:transform;
1298
- }
1260
+ .tds-page-header__primary{
1261
+ width:100%;
1262
+ }
1299
1263
 
1300
- .tds-sidenav-scroll-container{
1301
- --webkit-overflow-scrolling:touch;
1302
- display:block;
1303
- width:100%;
1304
- height:-moz-fit-content;
1305
- height:fit-content;
1306
- padding:var(--t-spacing-2);
1307
- overflow-y:auto;
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;
1308
1271
  }
1309
1272
 
1310
- .tds-sidenav-item :is(a, button) :is(.prefix){
1311
- display:none;
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%;
1312
1279
  }
1313
- @supports selector(:popover-open){
1314
- .tds-sidenav-collapse:popover-open{
1315
- display:flex;
1316
- }
1317
1280
 
1318
- .tds-sidenav-collapse:not(:popover-open){
1319
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1320
- transition:var(--tds-sidenav-collapse-transition-exit);
1321
- }
1322
-
1323
- @starting-style{
1324
- .tds-sidenav-collapse:popover-open{
1325
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1326
- transform:var(--tds-sidenav-collapse-closed-transform);
1327
- }
1328
- }
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;
1329
1286
  }
1330
- @supports not selector(:popover-open){
1331
- .tds-sidenav-collapse.\:popover-open{
1332
- display:flex;
1287
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
+ width:auto;
1333
1289
  }
1334
1290
 
1335
- .tds-sidenav-collapse:not(.\:popover-open){
1336
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1337
- transition:var(--tds-sidenav-collapse-transition-exit);
1291
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
+ justify-content:flex-end;
1338
1293
  }
1339
- }
1340
1294
  }
1341
1295
 
1342
- @media (min-width: 720px){
1343
- .tds-sidenav-responsive-header{
1344
- display:none;
1345
- }
1296
+ .tds-page-header-phone,
1297
+ .tds-page-header-email{
1298
+ color:var(--tds-page-header-color);
1299
+ white-space:nowrap;
1346
1300
  }
1347
-
1348
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1349
- display:none;
1350
- }
1351
-
1352
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1353
- display:block;
1354
- }
1355
-
1356
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1357
- display:flex;
1358
- flex-direction:column;
1359
- }
1360
-
1361
- .tds-checkbox{
1362
- --tds-checkbox-font-size:var(--t-font-size-md);
1363
- --tds-checkbox-cursor:pointer;
1364
- --tds-checkbox-line-height:1.4;
1365
- --tds-checkbox-transition-property:background-color, border-color;
1366
-
1367
- --tds-checkbox-input-size:var(--t-element-size-md);
1368
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1369
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1370
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1371
-
1372
- --tds-checkbox-input-icon:none;
1373
- --tds-checkbox-input-icon-visibility:hidden;
1374
- --tds-checkbox-input-icon-opacity:0;
1375
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1376
-
1377
- --tds-checkbox-label-color:var(--t-form-color);
1378
-
1379
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1380
- --tds-checkbox-description-line-height:1.35;
1381
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1382
- --tds-checkbox-description-invalid-icon-display:none;
1383
-
1384
- position:relative;
1385
- display:inline-grid;
1386
- grid-template-columns:auto;
1387
- grid-auto-columns:1fr;
1388
- gap:var(--t-spacing-fourth) 0;
1389
- line-height:var(--tds-checkbox-line-height);
1390
- -webkit-user-select:none;
1391
- -moz-user-select:none;
1392
- user-select:none;
1301
+ .tds-page-header-email{
1302
+ max-width:100%;
1303
+ overflow:hidden;
1304
+ text-overflow:ellipsis;
1393
1305
  }
1394
1306
 
1395
- .tds-checkbox label{
1396
- grid-area:1 / 2;
1397
- padding-inline-start:var(--t-spacing-1);
1398
- font-size:var(--tds-checkbox-font-size);
1399
- font-weight:var(--t-font-weight-normal);
1400
- color:var(--tds-checkbox-label-color);
1401
- cursor:var(--tds-checkbox-cursor);
1402
- }
1403
-
1404
- .tds-checkbox tds-indeterminate{
1405
- display:flex;
1406
- }
1407
-
1408
- .tds-checkbox input[type="checkbox"]{
1409
- position:relative;
1410
- width:1em;
1411
- height:1em;
1412
- margin:calc((1lh - 1em) / 2) 0 0;
1413
- font-size:var(--tds-checkbox-font-size);
1414
- line-height:inherit;
1415
- -webkit-appearance:none;
1416
- -moz-appearance:none;
1417
- appearance:none;
1418
- cursor:var(--tds-checkbox-cursor);
1419
- background-color:var(--tds-checkbox-input-background-color);
1420
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1421
- border-radius:var(--tds-checkbox-input-border-radius);
1422
- transition-timing-function:var(--t-ease-in-out);
1423
- transition-duration:var(--t-duration-200);
1424
- transition-property:var(--tds-checkbox-transition-property);
1425
- }
1426
-
1427
- :is(.tds-checkbox input[type="checkbox"])::before{
1428
- position:absolute;
1429
- top:50%;
1430
- left:50%;
1431
- visibility:var(--tds-checkbox-input-icon-visibility);
1432
- width:100%;
1433
- height:100%;
1434
- content:"";
1435
- background-color:var(--tds-checkbox-input-icon-fill);
1436
- border-radius:var(--tds-checkbox-input-border-radius);
1437
- opacity:var(--tds-checkbox-input-icon-opacity);
1438
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1439
- mask-image:var(--tds-checkbox-input-icon);
1440
- -webkit-mask-repeat:no-repeat;
1441
- mask-repeat:no-repeat;
1442
- -webkit-mask-size:contain;
1443
- mask-size:contain;
1444
- transform:translate(-50%, -50%);
1445
- }
1446
-
1447
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1448
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1449
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1450
- }
1451
-
1452
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1453
- outline:var(--t-focus-ring-outline);
1454
- outline-offset:var(--t-focus-ring-offset);
1455
- }
1456
-
1457
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1458
- pointer-events:none;
1459
- }
1460
-
1461
- @media (prefers-reduced-motion: reduce){
1462
-
1463
- .tds-checkbox input[type="checkbox"]{
1464
- --tds-checkbox-transition-property:none;
1465
- }
1466
- }
1467
-
1468
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1469
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1470
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1471
- --tds-checkbox-input-icon-visibility:visible;
1472
- --tds-checkbox-input-icon-opacity:1;
1473
- }
1474
-
1475
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1476
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1477
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1478
- }
1479
-
1480
- .tds-checkbox:has(input:checked){
1481
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1482
- }
1483
-
1484
- .tds-checkbox:has(input:indeterminate){
1485
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1486
- }
1487
-
1488
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1489
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1490
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1491
- --tds-checkbox-description-invalid-icon-display:inline-block;
1492
- }
1493
-
1494
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1495
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1496
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1497
- }
1498
-
1499
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1500
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1501
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1502
- }
1503
-
1504
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1505
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1506
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1507
- }
1508
-
1509
- .tds-checkbox:has(input:required) label::after{
1510
- margin-left:.25ch;
1511
- color:var(--t-text-color-status-error);
1512
- content:"*";
1513
- }
1514
-
1515
- .tds-checkbox:has(input:disabled){
1516
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1517
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1518
-
1519
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1520
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1521
- --tds-checkbox-cursor:not-allowed;
1522
- }
1523
-
1524
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1525
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1526
- }
1527
-
1528
- .tds-checkbox-description{
1529
- display:flex;
1530
- grid-area:2 / 2;
1531
- gap:var(--t-spacing-half);
1532
- align-items:flex-start;
1533
- padding-inline-start:var(--t-spacing-1);
1534
- margin:0;
1535
- font-size:var(--tds-checkbox-description-font-size);
1536
- line-height:var(--tds-checkbox-description-line-height);
1537
- color:var(--tds-checkbox-description-color);
1538
- cursor:text;
1539
- }
1307
+ @keyframes indicator-pulse{
1308
+ 0%{
1309
+ opacity:.3;
1310
+ transform:scale(.9);
1311
+ }
1540
1312
 
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);
1313
+ 100%{
1314
+ opacity:0;
1315
+ transform:scale(1.75);
1546
1316
  }
1317
+ }
1547
1318
 
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;
1319
+ .tds-button-group{
1320
+ display:inline-flex;
1554
1321
  }
1322
+ .tds-button-group > .tds-btn{
1323
+ --tds-button-group-item-z-index:1;
1324
+
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);
1331
+ }
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);
1339
+ }
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);
1345
+ }
1346
+ :is(.tds-button-group > .tds-btn):hover{
1347
+ --tds-button-group-item-z-index:2;
1348
+ }
1349
+ :is(.tds-button-group > .tds-btn):focus-visible{
1350
+ --tds-button-group-item-z-index:5;
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);
1359
+ }
1555
1360
 
1556
1361
  .tds-dropdown-popover{
1557
1362
  min-inline-size:10rem;
@@ -1715,63 +1520,281 @@ a.tds-dropdown-item:is(:hover, :active){
1715
1520
  padding:0;
1716
1521
  margin:0;
1717
1522
 
1718
- font-size:var(--tds-checkbox-group-font-size);
1719
- line-height:var(--tds-checkbox-group-line-height);
1720
- border:0;
1721
- }
1523
+ font-size:var(--tds-checkbox-group-font-size);
1524
+ line-height:var(--tds-checkbox-group-line-height);
1525
+ border:0;
1526
+ }
1527
+
1528
+ .tds-checkbox-group legend{
1529
+ float:left;
1530
+ padding:0;
1531
+ margin:0;
1532
+ }
1533
+
1534
+ .tds-checkbox-group[aria-invalid="true"]{
1535
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1536
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1537
+ }
1538
+
1539
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1540
+ margin-left:.25ch;
1541
+ color:var(--t-text-color-status-error);
1542
+ content:"*";
1543
+ }
1544
+
1545
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1546
+ content:none;
1547
+ }
1548
+
1549
+ .tds-checkbox-group-fields{
1550
+ display:flex;
1551
+ flex-direction:column;
1552
+ gap:var(--tds-checkbox-group-gap);
1553
+ align-items:flex-start;
1554
+ margin-top:var(--t-spacing-1);
1555
+ }
1556
+
1557
+ .tds-checkbox-group-description{
1558
+ display:flex;
1559
+ gap:var(--t-spacing-half);
1560
+ align-items:flex-start;
1561
+ margin:var(--t-spacing-fourth) 0 0;
1562
+ font-size:var(--tds-checkbox-group-description-font-size);
1563
+ line-height:var(--tds-checkbox-group-description-line-height);
1564
+ color:var(--tds-checkbox-group-description-color);
1565
+ cursor:text;
1566
+ }
1567
+
1568
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1569
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1570
+ flex-shrink:0;
1571
+ margin-top:calc(.5lh - .5em);
1572
+ line-height:var(--tds-checkbox-group-description-line-height);
1573
+ }
1574
+
1575
+ .tds-checkbox-group--sm{
1576
+ --tds-checkbox-group-line-height:1.35;
1577
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1578
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1579
+ --tds-checkbox-group-description-line-height:1.3;
1580
+ }
1581
+
1582
+
1583
+ :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{
1584
+ -webkit-appearance:none;
1585
+ appearance:none;
1586
+ }
1587
+
1588
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1589
+ inline-size:1em;
1590
+ block-size:2em;
1591
+ }
1592
+ @supports (field-sizing: content){
1593
+ .tds-input--auto-width{
1594
+ inline-size:-moz-fit-content;
1595
+ inline-size:fit-content;
1596
+ min-inline-size:min(100%, 122px);
1597
+ }
1598
+
1599
+ .tds-input--auto-width input{
1600
+ field-sizing:content;
1601
+ inline-size:auto;
1602
+ }
1603
+ }
1604
+
1605
+ .tds-checkbox{
1606
+ --tds-checkbox-font-size:var(--t-font-size-md);
1607
+ --tds-checkbox-cursor:pointer;
1608
+ --tds-checkbox-line-height:1.4;
1609
+ --tds-checkbox-transition-property:background-color, border-color;
1610
+
1611
+ --tds-checkbox-input-size:var(--t-element-size-md);
1612
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1613
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1614
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1615
+
1616
+ --tds-checkbox-input-icon:none;
1617
+ --tds-checkbox-input-icon-visibility:hidden;
1618
+ --tds-checkbox-input-icon-opacity:0;
1619
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1620
+
1621
+ --tds-checkbox-label-color:var(--t-form-color);
1622
+
1623
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1624
+ --tds-checkbox-description-line-height:1.35;
1625
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1626
+ --tds-checkbox-description-invalid-icon-display:none;
1627
+
1628
+ position:relative;
1629
+ display:inline-grid;
1630
+ grid-template-columns:auto;
1631
+ grid-auto-columns:1fr;
1632
+ gap:var(--t-spacing-fourth) 0;
1633
+ line-height:var(--tds-checkbox-line-height);
1634
+ -webkit-user-select:none;
1635
+ -moz-user-select:none;
1636
+ user-select:none;
1637
+ }
1638
+
1639
+ .tds-checkbox label{
1640
+ grid-area:1 / 2;
1641
+ padding-inline-start:var(--t-spacing-1);
1642
+ font-size:var(--tds-checkbox-font-size);
1643
+ font-weight:var(--t-font-weight-normal);
1644
+ color:var(--tds-checkbox-label-color);
1645
+ cursor:var(--tds-checkbox-cursor);
1646
+ }
1647
+
1648
+ .tds-checkbox tds-indeterminate{
1649
+ display:flex;
1650
+ }
1651
+
1652
+ .tds-checkbox input[type="checkbox"]{
1653
+ position:relative;
1654
+ width:1em;
1655
+ height:1em;
1656
+ margin:calc((1lh - 1em) / 2) 0 0;
1657
+ font-size:var(--tds-checkbox-font-size);
1658
+ line-height:inherit;
1659
+ -webkit-appearance:none;
1660
+ -moz-appearance:none;
1661
+ appearance:none;
1662
+ cursor:var(--tds-checkbox-cursor);
1663
+ background-color:var(--tds-checkbox-input-background-color);
1664
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1665
+ border-radius:var(--tds-checkbox-input-border-radius);
1666
+ transition-timing-function:var(--t-ease-in-out);
1667
+ transition-duration:var(--t-duration-200);
1668
+ transition-property:var(--tds-checkbox-transition-property);
1669
+ }
1670
+
1671
+ :is(.tds-checkbox input[type="checkbox"])::before{
1672
+ position:absolute;
1673
+ top:50%;
1674
+ left:50%;
1675
+ visibility:var(--tds-checkbox-input-icon-visibility);
1676
+ width:100%;
1677
+ height:100%;
1678
+ content:"";
1679
+ background-color:var(--tds-checkbox-input-icon-fill);
1680
+ border-radius:var(--tds-checkbox-input-border-radius);
1681
+ opacity:var(--tds-checkbox-input-icon-opacity);
1682
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1683
+ mask-image:var(--tds-checkbox-input-icon);
1684
+ -webkit-mask-repeat:no-repeat;
1685
+ mask-repeat:no-repeat;
1686
+ -webkit-mask-size:contain;
1687
+ mask-size:contain;
1688
+ transform:translate(-50%, -50%);
1689
+ }
1690
+
1691
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1692
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1693
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1694
+ }
1695
+
1696
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1697
+ outline:var(--t-focus-ring-outline);
1698
+ outline-offset:var(--t-focus-ring-offset);
1699
+ }
1700
+
1701
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1702
+ pointer-events:none;
1703
+ }
1704
+
1705
+ @media (prefers-reduced-motion: reduce){
1706
+
1707
+ .tds-checkbox input[type="checkbox"]{
1708
+ --tds-checkbox-transition-property:none;
1709
+ }
1710
+ }
1711
+
1712
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1713
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1714
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1715
+ --tds-checkbox-input-icon-visibility:visible;
1716
+ --tds-checkbox-input-icon-opacity:1;
1717
+ }
1718
+
1719
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1720
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1721
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1722
+ }
1723
+
1724
+ .tds-checkbox:has(input:checked){
1725
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1726
+ }
1722
1727
 
1723
- .tds-checkbox-group legend{
1724
- float:left;
1725
- padding:0;
1726
- margin:0;
1728
+ .tds-checkbox:has(input:indeterminate){
1729
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1727
1730
  }
1728
1731
 
1729
- .tds-checkbox-group[aria-invalid="true"]{
1730
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1731
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1732
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1733
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1734
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1735
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1732
1736
  }
1733
1737
 
1734
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1738
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1739
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1740
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1741
+ }
1742
+
1743
+ :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{
1744
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1745
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1746
+ }
1747
+
1748
+ :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){
1749
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1750
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1751
+ }
1752
+
1753
+ .tds-checkbox:has(input:required) label::after{
1735
1754
  margin-left:.25ch;
1736
1755
  color:var(--t-text-color-status-error);
1737
1756
  content:"*";
1738
1757
  }
1739
1758
 
1740
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1741
- content:none;
1742
- }
1759
+ .tds-checkbox:has(input:disabled){
1760
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1761
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1743
1762
 
1744
- .tds-checkbox-group-fields{
1745
- display:flex;
1746
- flex-direction:column;
1747
- gap:var(--tds-checkbox-group-gap);
1748
- align-items:flex-start;
1749
- margin-top:var(--t-spacing-1);
1750
- }
1763
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1764
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1765
+ --tds-checkbox-cursor:not-allowed;
1766
+ }
1751
1767
 
1752
- .tds-checkbox-group-description{
1768
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1769
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1770
+ }
1771
+
1772
+ .tds-checkbox-description{
1753
1773
  display:flex;
1774
+ grid-area:2 / 2;
1754
1775
  gap:var(--t-spacing-half);
1755
1776
  align-items:flex-start;
1756
- margin:var(--t-spacing-fourth) 0 0;
1757
- font-size:var(--tds-checkbox-group-description-font-size);
1758
- line-height:var(--tds-checkbox-group-description-line-height);
1759
- color:var(--tds-checkbox-group-description-color);
1777
+ padding-inline-start:var(--t-spacing-1);
1778
+ margin:0;
1779
+ font-size:var(--tds-checkbox-description-font-size);
1780
+ line-height:var(--tds-checkbox-description-line-height);
1781
+ color:var(--tds-checkbox-description-color);
1760
1782
  cursor:text;
1761
1783
  }
1762
1784
 
1763
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1764
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1785
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1786
+ display:var(--tds-checkbox-description-invalid-icon-display);
1765
1787
  flex-shrink:0;
1766
1788
  margin-top:calc(.5lh - .5em);
1767
- line-height:var(--tds-checkbox-group-description-line-height);
1789
+ line-height:var(--tds-checkbox-description-line-height);
1768
1790
  }
1769
1791
 
1770
- .tds-checkbox-group--sm{
1771
- --tds-checkbox-group-line-height:1.35;
1772
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1773
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1774
- --tds-checkbox-group-description-line-height:1.3;
1792
+ .tds-checkbox--sm{
1793
+ --tds-checkbox-line-height:1.35;
1794
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1795
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1796
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1797
+ --tds-checkbox-description-line-height:1.3;
1775
1798
  }
1776
1799
 
1777
1800
  .tds-modal-overlay{
@@ -1918,161 +1941,110 @@ a.tds-dropdown-item:is(:hover, :active){
1918
1941
  margin-inline-end:auto;
1919
1942
  }
1920
1943
 
1921
-
1922
- :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{
1923
- -webkit-appearance:none;
1924
- appearance:none;
1925
- }
1926
-
1927
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1928
- inline-size:1em;
1929
- block-size:2em;
1930
- }
1931
- @supports (field-sizing: content){
1932
- .tds-input--auto-width{
1933
- inline-size:-moz-fit-content;
1934
- inline-size:fit-content;
1935
- min-inline-size:min(100%, 122px);
1936
- }
1937
-
1938
- .tds-input--auto-width input{
1939
- field-sizing:content;
1940
- inline-size:auto;
1941
- }
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");
1942
1948
  }
1943
1949
 
1944
- .tds-radio{
1945
- --tds-radio-font-size:var(--t-font-size-md);
1946
- --tds-radio-cursor:pointer;
1947
- --tds-radio-line-height:1.4;
1948
- --tds-radio-transition-property:border-width;
1949
-
1950
- --tds-radio-input-size:var(--t-element-size-md);
1951
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1952
- --tds-radio-input-border-color:var(--t-form-border-color);
1953
- --tds-radio-input-border-width:var(--t-form-border-width);
1954
- --tds-radio-input-background-color:var(--t-form-background-color);
1955
-
1956
- --tds-radio-label-color:var(--t-form-color);
1957
-
1958
- --tds-radio-description-font-size:var(--t-font-size-sm);
1959
- --tds-radio-description-line-height:1.35;
1960
- --tds-radio-description-color:var(--t-text-color-secondary);
1950
+ @supports (x: attr(x type(*))){
1961
1951
 
1962
- position:relative;
1963
- display:inline-grid;
1964
- grid-template-columns:auto;
1965
- grid-auto-columns:1fr;
1966
- gap:var(--t-spacing-fourth) 0;
1967
- line-height:var(--tds-radio-line-height);
1968
- -webkit-user-select:none;
1969
- -moz-user-select:none;
1970
- user-select:none;
1952
+ .tds-input textarea{
1953
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1971
1954
  }
1972
-
1973
- .tds-radio label{
1974
- grid-area:1 / 2;
1975
- padding-inline-start:var(--t-spacing-1);
1976
- font-size:var(--tds-radio-font-size);
1977
- font-weight:var(--t-font-weight-normal);
1978
- color:var(--tds-radio-label-color);
1979
- cursor:var(--tds-radio-cursor);
1980
1955
  }
1981
1956
 
1982
- .tds-radio input[type="radio"]{
1983
- position:relative;
1984
- width:1em;
1985
- height:1em;
1986
- margin:calc((1lh - 1em) / 2) 0 0;
1987
- font-size:var(--tds-radio-font-size);
1988
- line-height:inherit;
1989
- -webkit-appearance:none;
1990
- -moz-appearance:none;
1991
- appearance:none;
1992
- cursor:var(--tds-radio-cursor);
1993
- background-color:var(--tds-radio-input-background-color);
1994
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1995
- border-radius:var(--tds-radio-input-border-radius);
1996
- transition-timing-function:var(--t-ease-in-out);
1997
- transition-duration:var(--t-duration-200);
1998
- transition-property:var(--tds-radio-transition-property);
1999
- }
1957
+ .tds-input.tds-textarea--resize-vertical textarea{
1958
+ resize:vertical;
1959
+ }
2000
1960
 
2001
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2002
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2003
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1961
+ .tds-input.tds-textarea--resize-none textarea{
1962
+ resize:none;
2004
1963
  }
2005
1964
 
2006
- :is(.tds-radio input[type="radio"]):focus-visible{
2007
- outline:var(--t-focus-ring-outline);
2008
- outline-offset:var(--t-focus-ring-offset);
1965
+ .tds-input.tds-textarea--resize-auto textarea{
1966
+ resize:vertical;
2009
1967
  }
2010
1968
 
2011
- :is(.tds-radio input[type="radio"]):disabled{
2012
- pointer-events:none;
1969
+ @supports (field-sizing: content){
1970
+ .tds-input.tds-textarea--resize-auto textarea{
1971
+ field-sizing:content;
1972
+ resize:none;
1973
+ }
2013
1974
  }
2014
1975
 
2015
- @media (prefers-reduced-motion: reduce){
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
+ }
2016
1992
 
2017
- .tds-radio input[type="radio"]{
2018
- --tds-radio-transition-property:none;
2019
- }
1993
+ @media (pointer: fine){
1994
+ :is(.tds-input textarea)::-webkit-scrollbar{
1995
+ width:12px;
1996
+ height:12px;
1997
+ cursor:default;
2020
1998
  }
2021
1999
 
2022
- .tds-radio:has(input:checked){
2023
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2024
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2025
- --tds-radio-input-border-width:4px;
2026
- }
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
+ }
2027
2007
 
2028
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2029
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2030
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2008
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2009
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2031
2010
  }
2032
2011
 
2033
- .tds-radio:has(input:user-invalid){
2034
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2035
- }
2012
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2013
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2014
+ }
2036
2015
 
2037
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2038
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2039
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2016
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2017
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2040
2018
  }
2041
2019
 
2042
- .tds-radio:has(input:disabled){
2043
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2044
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2020
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2021
+ background:var(--tds-input-scrollbar-surface-color);
2022
+ }
2045
2023
 
2046
- --tds-radio-label-color:var(--t-form-color-disabled);
2047
- --tds-radio-description-color:var(--t-form-color-disabled);
2048
- --tds-radio-cursor:not-allowed;
2049
- }
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
+ }
2050
2029
 
2051
- .tds-radio:has(input:disabled) input:checked{
2052
- --tds-radio-input-background-color:var(--t-form-background-color);
2053
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2030
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2031
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2032
+ cursor:default;
2054
2033
  }
2055
2034
 
2056
- .tds-radio-description{
2057
- display:flex;
2058
- grid-area:2 / 2;
2059
- gap:var(--t-spacing-half);
2060
- align-items:flex-start;
2061
- padding-inline-start:var(--t-spacing-1);
2062
- margin:0;
2063
- font-size:var(--tds-radio-description-font-size);
2064
- line-height:var(--tds-radio-description-line-height);
2065
- color:var(--tds-radio-description-color);
2066
- cursor:text;
2067
- }
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
+ }
2068
2040
 
2069
- .tds-radio--sm{
2070
- --tds-radio-line-height:1.35;
2071
- --tds-radio-input-size:var(--t-element-size-sm);
2072
- --tds-radio-font-size:var(--t-font-size-sm);
2073
- --tds-radio-description-font-size:var(--t-font-size-xs);
2074
- --tds-radio-description-line-height:1.3;
2075
- }
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
+ }
2076
2048
 
2077
2049
  .tds-radio-group{
2078
2050
  --tds-radio-group-font-size:var(--t-font-size-md);
@@ -2157,240 +2129,139 @@ a.tds-dropdown-item:is(:hover, :active){
2157
2129
  --tds-radio-group-description-line-height:1.3;
2158
2130
  }
2159
2131
 
2160
- .tds-search-input-control{
2161
- --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2162
- --tds-search-input-outline-offset:0;
2163
- --tds-search-input-cursor:text;
2132
+ .tds-radio{
2133
+ --tds-radio-font-size:var(--t-font-size-md);
2134
+ --tds-radio-cursor:pointer;
2135
+ --tds-radio-line-height:1.4;
2136
+ --tds-radio-transition-property:border-width;
2164
2137
 
2165
- display:flex;
2166
- gap:var(--tds-field-padding-inline);
2167
- align-items:center;
2168
- inline-size:100%;
2169
- min-block-size:var(--tds-field-min-height);
2170
- padding-inline:var(--tds-field-padding-inline);
2171
- font-size:var(--tds-field-font-size);
2172
- color:var(--tds-field-color);
2173
- cursor:var(--tds-search-input-cursor);
2174
- outline:var(--t-focus-ring-width) solid transparent;
2175
- outline-color:var(--tds-search-input-outline-color);
2176
- outline-offset:var(--tds-search-input-outline-offset);
2177
- background-color:var(--tds-field-background-color);
2178
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
2179
- border-radius:var(--t-form-border-radius);
2180
- transition-timing-function:var(--t-ease-in-out);
2181
- transition-duration:var(--t-duration-200);
2182
- transition-property:background-color, border-color, outline-color, outline-offset;
2183
- }
2138
+ --tds-radio-input-size:var(--t-element-size-md);
2139
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2140
+ --tds-radio-input-border-color:var(--t-form-border-color);
2141
+ --tds-radio-input-border-width:var(--t-form-border-width);
2142
+ --tds-radio-input-background-color:var(--t-form-background-color);
2184
2143
 
2185
- .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
2186
- border-color:var(--tds-field-border-color-hover);
2187
- }
2144
+ --tds-radio-label-color:var(--t-form-color);
2188
2145
 
2189
- .tds-search-input-control:has(input:focus){
2190
- --tds-search-input-outline-color:var(--t-focus-ring-color);
2191
- --tds-search-input-outline-offset:var(--t-focus-ring-offset);
2146
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2147
+ --tds-radio-description-line-height:1.35;
2148
+ --tds-radio-description-color:var(--t-text-color-secondary);
2192
2149
 
2193
- border-color:var(--t-form-border-color-focus);
2150
+ position:relative;
2151
+ display:inline-grid;
2152
+ grid-template-columns:auto;
2153
+ grid-auto-columns:1fr;
2154
+ gap:var(--t-spacing-fourth) 0;
2155
+ line-height:var(--tds-radio-line-height);
2156
+ -webkit-user-select:none;
2157
+ -moz-user-select:none;
2158
+ user-select:none;
2159
+ }
2160
+
2161
+ .tds-radio label{
2162
+ grid-area:1 / 2;
2163
+ padding-inline-start:var(--t-spacing-1);
2164
+ font-size:var(--tds-radio-font-size);
2165
+ font-weight:var(--t-font-weight-normal);
2166
+ color:var(--tds-radio-label-color);
2167
+ cursor:var(--tds-radio-cursor);
2194
2168
  }
2195
2169
 
2196
- .tds-search-input-control input{
2197
- flex:1;
2198
- min-inline-size:0;
2199
- padding:0;
2200
- overflow:hidden;
2201
- text-overflow:ellipsis;
2202
- font-family:inherit;
2203
- font-size:inherit;
2204
- color:inherit;
2205
- white-space:nowrap;
2170
+ .tds-radio input[type="radio"]{
2171
+ position:relative;
2172
+ width:1em;
2173
+ height:1em;
2174
+ margin:calc((1lh - 1em) / 2) 0 0;
2175
+ font-size:var(--tds-radio-font-size);
2176
+ line-height:inherit;
2206
2177
  -webkit-appearance:none;
2207
2178
  -moz-appearance:none;
2208
2179
  appearance:none;
2209
- outline:0;
2210
- background-color:transparent;
2211
- border:0;
2212
- }
2213
-
2214
- :is(.tds-search-input-control input)::-moz-placeholder{
2215
- color:var(--tds-field-placeholder-color);
2216
- -moz-user-select:none;
2217
- user-select:none;
2218
- }
2219
-
2220
- :is(.tds-search-input-control input)::placeholder{
2221
- color:var(--tds-field-placeholder-color);
2222
- -webkit-user-select:none;
2223
- -moz-user-select:none;
2224
- user-select:none;
2225
- }
2226
-
2227
- :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
2228
- -webkit-appearance:none;
2229
- appearance:none;
2230
- }
2231
-
2232
- .tds-search-input-control .tds-search-input-icon{
2233
- flex-shrink:0;
2234
- inline-size:1em;
2235
- color:var(--t-icon-color-dim);
2236
- }
2237
-
2238
- .tds-search-input-control .tds-search-input-clear-icon{
2239
- inline-size:calc(var(--tds-field-font-size) * .8);
2240
- block-size:calc(var(--tds-field-font-size) * .8);
2241
- }
2242
-
2243
- .tds-search-input-control .tds-btn{
2244
- --tds-btn-color:var(--t-icon-color-dim);
2245
- --tds-btn-padding-truncated-x:0;
2246
- --tds-search-input-clear-button-visibility:hidden;
2247
-
2248
- visibility:var(--tds-search-input-clear-button-visibility);
2249
- flex-shrink:0;
2250
- }
2251
-
2252
- .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
2253
- --tds-field-background-color:var(--t-form-background-color-error);
2254
- --tds-field-border-color:var(--t-form-border-color-error);
2255
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2256
- }
2257
-
2258
- .tds-search-input-control:has(:disabled){
2259
- --tds-field-border-color:var(--t-form-border-color-disabled);
2260
- --tds-field-background-color:var(--t-form-background-color-disabled);
2261
- --tds-field-color:var(--t-form-color-disabled);
2262
- --tds-search-input-cursor:not-allowed;
2263
- }
2264
-
2265
- .tds-search-input-control:has([readonly]){
2266
- --tds-field-border-color:var(--t-form-border-color-readonly);
2267
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2268
- --tds-field-background-color:var(--t-form-background-color-readonly);
2269
- --tds-field-color:var(--t-form-color-readonly);
2270
- }
2271
-
2272
- .tds-search-input-control:has([readonly]):has(input:focus){
2273
- border-color:var(--t-form-border-color-hover);
2274
- }
2275
-
2276
- @media (prefers-reduced-motion: reduce){
2277
-
2278
- .tds-search-input-control{
2279
- transition-property:none;
2280
- }
2281
- }
2282
-
2283
- .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
2284
- :has(:disabled, [readonly])
2285
- ) .tds-btn{
2286
- --tds-search-input-clear-button-visibility:visible;
2287
- }
2288
-
2289
- .tds-input:has(textarea){
2290
- --tds-input-padding-block:6px;
2291
- --tds-input-resizer-size:var(--t-element-size-sm);
2292
- --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");
2293
- }
2294
-
2295
- @supports (x: attr(x type(*))){
2296
-
2297
- .tds-input textarea{
2298
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2299
- }
2300
- }
2301
-
2302
- .tds-input.tds-textarea--resize-vertical textarea{
2303
- resize:vertical;
2304
- }
2305
-
2306
- .tds-input.tds-textarea--resize-none textarea{
2307
- resize:none;
2308
- }
2309
-
2310
- .tds-input.tds-textarea--resize-auto textarea{
2311
- resize:vertical;
2312
- }
2313
-
2314
- @supports (field-sizing: content){
2315
- .tds-input.tds-textarea--resize-auto textarea{
2316
- field-sizing:content;
2317
- resize:none;
2318
- }
2319
- }
2320
-
2321
- .tds-input textarea{
2322
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2323
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2324
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2325
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2326
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2327
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2328
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2329
- --tds-input-scrollbar-thumb-border-radius:999px;
2330
- --tds-input-scrollbar-thumb-border-width:3px;
2331
- --tds-input-scrollbar-track-margin-block:.125rem;
2332
- scrollbar-color:initial;
2333
- transition-timing-function:var(--t-ease-in-out);
2334
- transition-duration:var(--t-duration-200);
2335
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2336
- }
2337
-
2338
- @media (pointer: fine){
2339
- :is(.tds-input textarea)::-webkit-scrollbar{
2340
- width:12px;
2341
- height:12px;
2342
- cursor:default;
2343
- }
2180
+ cursor:var(--tds-radio-cursor);
2181
+ background-color:var(--tds-radio-input-background-color);
2182
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2183
+ border-radius:var(--tds-radio-input-border-radius);
2184
+ transition-timing-function:var(--t-ease-in-out);
2185
+ transition-duration:var(--t-duration-200);
2186
+ transition-property:var(--tds-radio-transition-property);
2187
+ }
2344
2188
 
2345
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2346
- cursor:default;
2347
- background:var(--tds-input-scrollbar-thumb-color);
2348
- background-clip:content-box;
2349
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2350
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2189
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2190
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2191
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2351
2192
  }
2352
2193
 
2353
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2354
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2194
+ :is(.tds-radio input[type="radio"]):focus-visible{
2195
+ outline:var(--t-focus-ring-outline);
2196
+ outline-offset:var(--t-focus-ring-offset);
2355
2197
  }
2356
2198
 
2357
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2358
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2199
+ :is(.tds-radio input[type="radio"]):disabled{
2200
+ pointer-events:none;
2359
2201
  }
2360
2202
 
2361
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2362
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2363
- }
2203
+ @media (prefers-reduced-motion: reduce){
2364
2204
 
2365
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2366
- background:var(--tds-input-scrollbar-surface-color);
2205
+ .tds-radio input[type="radio"]{
2206
+ --tds-radio-transition-property:none;
2207
+ }
2367
2208
  }
2368
2209
 
2369
- :is(.tds-input textarea)::-webkit-resizer{
2370
- background:var(--tds-input-resizer-icon) no-repeat;
2371
- background-position:right bottom;
2372
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2373
- }
2210
+ .tds-radio:has(input:checked){
2211
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2212
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2213
+ --tds-radio-input-border-width:4px;
2214
+ }
2374
2215
 
2375
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2376
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2377
- cursor:default;
2216
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2217
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2218
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2378
2219
  }
2379
2220
 
2380
- @supports (-moz-appearance: none){
2381
- :is(.tds-input textarea){
2382
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2383
- scrollbar-width:thin;
2384
- }
2221
+ .tds-radio:has(input:user-invalid){
2222
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2223
+ }
2385
2224
 
2386
- @media (hover){
2387
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2388
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2389
- }
2390
- }
2225
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2226
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2227
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2391
2228
  }
2229
+
2230
+ .tds-radio:has(input:disabled){
2231
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2232
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2233
+
2234
+ --tds-radio-label-color:var(--t-form-color-disabled);
2235
+ --tds-radio-description-color:var(--t-form-color-disabled);
2236
+ --tds-radio-cursor:not-allowed;
2392
2237
  }
2393
2238
 
2239
+ .tds-radio:has(input:disabled) input:checked{
2240
+ --tds-radio-input-background-color:var(--t-form-background-color);
2241
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2242
+ }
2243
+
2244
+ .tds-radio-description{
2245
+ display:flex;
2246
+ grid-area:2 / 2;
2247
+ gap:var(--t-spacing-half);
2248
+ align-items:flex-start;
2249
+ padding-inline-start:var(--t-spacing-1);
2250
+ margin:0;
2251
+ font-size:var(--tds-radio-description-font-size);
2252
+ line-height:var(--tds-radio-description-line-height);
2253
+ color:var(--tds-radio-description-color);
2254
+ cursor:text;
2255
+ }
2256
+
2257
+ .tds-radio--sm{
2258
+ --tds-radio-line-height:1.35;
2259
+ --tds-radio-input-size:var(--t-element-size-sm);
2260
+ --tds-radio-font-size:var(--t-font-size-sm);
2261
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2262
+ --tds-radio-description-line-height:1.3;
2263
+ }
2264
+
2394
2265
  .tds-toggle-switch{
2395
2266
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2396
2267
  --tds-toggle-switch-cursor:pointer;
@@ -2531,6 +2402,135 @@ a.tds-dropdown-item:is(:hover, :active){
2531
2402
  --tds-toggle-switch-display:inline-flex;
2532
2403
  }
2533
2404
 
2405
+ .tds-search-input-control{
2406
+ --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2407
+ --tds-search-input-outline-offset:0;
2408
+ --tds-search-input-cursor:text;
2409
+
2410
+ display:flex;
2411
+ gap:var(--tds-field-padding-inline);
2412
+ align-items:center;
2413
+ inline-size:100%;
2414
+ min-block-size:var(--tds-field-min-height);
2415
+ padding-inline:var(--tds-field-padding-inline);
2416
+ font-size:var(--tds-field-font-size);
2417
+ color:var(--tds-field-color);
2418
+ cursor:var(--tds-search-input-cursor);
2419
+ outline:var(--t-focus-ring-width) solid transparent;
2420
+ outline-color:var(--tds-search-input-outline-color);
2421
+ outline-offset:var(--tds-search-input-outline-offset);
2422
+ background-color:var(--tds-field-background-color);
2423
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
2424
+ border-radius:var(--t-form-border-radius);
2425
+ transition-timing-function:var(--t-ease-in-out);
2426
+ transition-duration:var(--t-duration-200);
2427
+ transition-property:background-color, border-color, outline-color, outline-offset;
2428
+ }
2429
+
2430
+ .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
2431
+ border-color:var(--tds-field-border-color-hover);
2432
+ }
2433
+
2434
+ .tds-search-input-control:has(input:focus){
2435
+ --tds-search-input-outline-color:var(--t-focus-ring-color);
2436
+ --tds-search-input-outline-offset:var(--t-focus-ring-offset);
2437
+
2438
+ border-color:var(--t-form-border-color-focus);
2439
+ }
2440
+
2441
+ .tds-search-input-control input{
2442
+ flex:1;
2443
+ min-inline-size:0;
2444
+ padding:0;
2445
+ overflow:hidden;
2446
+ text-overflow:ellipsis;
2447
+ font-family:inherit;
2448
+ font-size:inherit;
2449
+ color:inherit;
2450
+ white-space:nowrap;
2451
+ -webkit-appearance:none;
2452
+ -moz-appearance:none;
2453
+ appearance:none;
2454
+ outline:0;
2455
+ background-color:transparent;
2456
+ border:0;
2457
+ }
2458
+
2459
+ :is(.tds-search-input-control input)::-moz-placeholder{
2460
+ color:var(--tds-field-placeholder-color);
2461
+ -moz-user-select:none;
2462
+ user-select:none;
2463
+ }
2464
+
2465
+ :is(.tds-search-input-control input)::placeholder{
2466
+ color:var(--tds-field-placeholder-color);
2467
+ -webkit-user-select:none;
2468
+ -moz-user-select:none;
2469
+ user-select:none;
2470
+ }
2471
+
2472
+ :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
2473
+ -webkit-appearance:none;
2474
+ appearance:none;
2475
+ }
2476
+
2477
+ .tds-search-input-control .tds-search-input-icon{
2478
+ flex-shrink:0;
2479
+ inline-size:1em;
2480
+ color:var(--t-icon-color-dim);
2481
+ }
2482
+
2483
+ .tds-search-input-control .tds-search-input-clear-icon{
2484
+ inline-size:calc(var(--tds-field-font-size) * .8);
2485
+ block-size:calc(var(--tds-field-font-size) * .8);
2486
+ }
2487
+
2488
+ .tds-search-input-control .tds-btn{
2489
+ --tds-btn-color:var(--t-icon-color-dim);
2490
+ --tds-btn-padding-truncated-x:0;
2491
+ --tds-search-input-clear-button-visibility:hidden;
2492
+
2493
+ visibility:var(--tds-search-input-clear-button-visibility);
2494
+ flex-shrink:0;
2495
+ }
2496
+
2497
+ .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
2498
+ --tds-field-background-color:var(--t-form-background-color-error);
2499
+ --tds-field-border-color:var(--t-form-border-color-error);
2500
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2501
+ }
2502
+
2503
+ .tds-search-input-control:has(:disabled){
2504
+ --tds-field-border-color:var(--t-form-border-color-disabled);
2505
+ --tds-field-background-color:var(--t-form-background-color-disabled);
2506
+ --tds-field-color:var(--t-form-color-disabled);
2507
+ --tds-search-input-cursor:not-allowed;
2508
+ }
2509
+
2510
+ .tds-search-input-control:has([readonly]){
2511
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2512
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2513
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2514
+ --tds-field-color:var(--t-form-color-readonly);
2515
+ }
2516
+
2517
+ .tds-search-input-control:has([readonly]):has(input:focus){
2518
+ border-color:var(--t-form-border-color-hover);
2519
+ }
2520
+
2521
+ @media (prefers-reduced-motion: reduce){
2522
+
2523
+ .tds-search-input-control{
2524
+ transition-property:none;
2525
+ }
2526
+ }
2527
+
2528
+ .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
2529
+ :has(:disabled, [readonly])
2530
+ ) .tds-btn{
2531
+ --tds-search-input-clear-button-visibility:visible;
2532
+ }
2533
+
2534
2534
  .tds-input{
2535
2535
  --tds-input-border-color:var(--t-form-border-color);
2536
2536
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -4507,39 +4507,95 @@ a.tds-dropdown-item:is(:hover, :active){
4507
4507
  .tds-data-table-cell--numeric{
4508
4508
  font-variant-numeric:tabular-nums;
4509
4509
  }
4510
+
4511
+ .tds-data-table-column--selectable,
4512
+ .tds-data-table-cell--selectable{
4513
+ width:3rem;
4514
+ text-align:center;
4515
+ }
4510
4516
  .tds-data-table-selectable-checkbox{
4517
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
4518
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
4519
+ --tds-data-table-selectable-checkbox-border-radius:var(--t-border-radius-sm);
4520
+ --tds-data-table-selectable-checkbox-cursor:pointer;
4521
+ --tds-data-table-selectable-checkbox-size:var(--t-element-size-md);
4522
+ --tds-data-table-selectable-checkbox-transition-property:background-color, border-color;
4523
+
4524
+ --tds-data-table-selectable-checkbox-icon:none;
4525
+ --tds-data-table-selectable-checkbox-icon-visibility:hidden;
4526
+ --tds-data-table-selectable-checkbox-icon-opacity:0;
4527
+ --tds-data-table-selectable-checkbox-icon-fill:var(--t-icon-color-inverted);
4528
+
4511
4529
  position:relative;
4512
- display:inline-block;
4513
- width:1em;
4514
- height:1em;
4515
- vertical-align:middle;
4516
- cursor:pointer;
4517
- border:var(--t-form-border-width) solid var(--t-form-border-color);
4518
- border-radius:var(--t-border-radius-sm);
4530
+ display:block;
4531
+ width:var(--tds-data-table-selectable-checkbox-size);
4532
+ height:var(--tds-data-table-selectable-checkbox-size);
4533
+ margin-inline:auto;
4534
+ cursor:var(--tds-data-table-selectable-checkbox-cursor);
4535
+ background-color:var(--tds-data-table-selectable-checkbox-background-color);
4536
+ border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
4537
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4538
+ transition-timing-function:var(--t-ease-in-out);
4539
+ transition-duration:var(--t-duration-200);
4540
+ transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
4519
4541
  }
4542
+ .tds-data-table-selectable-checkbox::after{
4543
+ position:absolute;
4544
+ inset:0;
4545
+ content:"";
4546
+ transform:scale(2);
4547
+ }
4520
4548
  .tds-data-table-selectable-checkbox::before{
4521
4549
  position:absolute;
4522
4550
  inset:0;
4523
- display:flex;
4524
- visibility:hidden;
4525
- align-items:center;
4526
- justify-content:center;
4551
+ visibility:var(--tds-data-table-selectable-checkbox-icon-visibility);
4527
4552
  content:"";
4528
- opacity:0;
4553
+ background-color:var(--tds-data-table-selectable-checkbox-icon-fill);
4554
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4555
+ opacity:var(--tds-data-table-selectable-checkbox-icon-opacity);
4556
+ -webkit-mask-image:var(--tds-data-table-selectable-checkbox-icon);
4557
+ mask-image:var(--tds-data-table-selectable-checkbox-icon);
4558
+ -webkit-mask-repeat:no-repeat;
4559
+ mask-repeat:no-repeat;
4560
+ -webkit-mask-size:contain;
4561
+ mask-size:contain;
4562
+ }
4563
+ .tds-data-table-selectable-checkbox[data-hovered]{
4564
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4565
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-button-interaction-outline-hover);
4529
4566
  }
4530
4567
  .tds-data-table-selectable-checkbox[data-focus-visible]{
4531
4568
  outline:var(--t-focus-ring-outline);
4532
4569
  outline-offset:var(--t-focus-ring-offset);
4533
4570
  }
4534
- :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate])::before{
4535
- visibility:visible;
4536
- opacity:1;
4571
+ .tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]{
4572
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-control);
4573
+ --tds-data-table-selectable-checkbox-border-color:var(--t-border-color-control-info);
4574
+ --tds-data-table-selectable-checkbox-icon-visibility:visible;
4575
+ --tds-data-table-selectable-checkbox-icon-opacity:1;
4576
+ }
4577
+ [data-hovered]:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]){
4578
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4579
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-interaction-hover);
4537
4580
  }
4538
- .tds-data-table-selectable-checkbox[data-selected]::before{
4539
- content:"✅";
4581
+ .tds-data-table-selectable-checkbox[data-selected]{
4582
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4583
+ }
4584
+ .tds-data-table-selectable-checkbox[data-indeterminate]{
4585
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4586
+ }
4587
+ .tds-data-table-selectable-checkbox[data-disabled]{
4588
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color-disabled);
4589
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color-disabled);
4590
+ --tds-data-table-selectable-checkbox-cursor:not-allowed;
4540
4591
  }
4541
- .tds-data-table-selectable-checkbox[data-indeterminate]::before{
4542
- content:"➖";
4592
+ .tds-data-table-selectable-checkbox[data-disabled][data-selected],.tds-data-table-selectable-checkbox[data-disabled][data-indeterminate]{
4593
+ --tds-data-table-selectable-checkbox-background-color:var(--t-border-color-control-disabled);
4594
+ }
4595
+ @media (prefers-reduced-motion: reduce){
4596
+ .tds-data-table-selectable-checkbox{
4597
+ --tds-data-table-selectable-checkbox-transition-property:none;
4598
+ }
4543
4599
  }
4544
4600
 
4545
4601
  .t-banner{