@planningcenter/tapestry 4.6.0-rc.5 → 4.6.0-rc.6

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 (5) hide show
  1. package/dist/reactRender.css +1124 -1124
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1124 -1124
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -677,686 +677,519 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
-
681
- @media (prefers-reduced-motion: no-preference){
682
-
683
- :root{
684
- interpolate-size:allow-keywords;
680
+ .tds-button-group{
681
+ display:inline-flex;
685
682
  }
686
- }
683
+ .tds-button-group > .tds-btn{
684
+ --tds-button-group-item-z-index:1;
687
685
 
688
- @layer tds-component{
689
- tds-sidenav,
690
- .tds-sidenav{
691
- --tds-sidenav-indent:12px;
692
- --tds-sidenav-item-depth:0;
686
+ position:relative;
687
+ z-index:var(--tds-button-group-item-z-index);
688
+ border-radius:0;
689
+ }
690
+ :is(.tds-button-group > .tds-btn):not(:first-child){
691
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
+ }
693
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
+ position:absolute;
695
+ inset-block:calc(var(--tds-btn-border-width) * -1);
696
+ width:var(--tds-btn-border-width);
697
+ pointer-events:none;
698
+ content:"";
699
+ background-color:var(--t-border-color-white);
700
+ }
701
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
+ }
704
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
+ }
707
+ :is(.tds-button-group > .tds-btn):hover{
708
+ --tds-button-group-item-z-index:2;
709
+ }
710
+ :is(.tds-button-group > .tds-btn):focus-visible{
711
+ --tds-button-group-item-z-index:5;
712
+ }
713
+ .tds-button-group > .tds-btn:first-child{
714
+ border-start-start-radius:var(--tds-btn-border-radius);
715
+ border-end-start-radius:var(--tds-btn-border-radius);
716
+ }
717
+ .tds-button-group > .tds-btn:last-child{
718
+ border-start-end-radius:var(--tds-btn-border-radius);
719
+ border-end-end-radius:var(--tds-btn-border-radius);
720
+ }
693
721
 
694
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
722
+ @layer t-critical{
723
+ tds-page-header:not(.hydrated){
724
+ display:none;
725
+ }
726
+ }
695
727
 
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);
728
+ @layer t-component{
729
+ .tds-page-header{
730
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
731
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
732
+ --tds-page-header-color:var(--t-text-color);
733
+ --tds-page-header-bottom-border-color:transparent;
734
+ --tds-page-header-headline-color:var(--t-text-color-headline);
735
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
736
+ --tds-page-header-padding-x:var(--t-spacing-2);
737
+ --tds-page-header-padding-y:var(--t-spacing-2);
738
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
739
+ --tds-page-header-nav-gap:var(--t-spacing-1);
740
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
741
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
742
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
743
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
744
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
745
+ --tds-page-header-nav-item-border-width:1px;
702
746
 
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);
747
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
748
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
707
749
 
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;
750
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
751
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
752
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
711
753
 
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);
754
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
755
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
715
756
 
716
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
718
- }
757
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
758
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
759
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
719
760
 
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;
761
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
762
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
763
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
764
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
765
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
727
766
  }
728
- }
729
767
 
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);
768
+ .tds-page-header--profile{
769
+ --tds-page-header-padding-y:20px;
736
770
  }
737
- }
738
771
 
739
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
- display:flex;
772
+ @supports (color: light-dark(#fff, #000)){
773
+ .tds-page-header{
774
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
775
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
776
+ }
741
777
  }
742
778
 
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%;
779
+ @media (min-width: 600px){
780
+ .tds-page-header{
781
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
782
+ --tds-page-header-color:var(--t-text-color-secondary);
783
+ --tds-page-header-bottom-border-color:var(--t-border-color);
784
+ --tds-page-header-padding-x:var(--t-spacing-3);
785
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
786
+ --tds-page-header-nav-gap:var(--t-spacing-half);
787
+ --tds-page-header-nav-background:transparent;
788
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
789
+ --tds-page-header-nav-item-border-width:1px;
790
+ --tds-page-header-nav-item-color:var(--t-text-color);
791
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
792
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
793
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
794
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
795
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
796
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
797
+ }
747
798
  }
748
-
749
- .tds-sidenav-section-list{
750
- width:100%;
751
- padding:0;
752
- margin:0;
753
- list-style:none;
754
799
  }
755
800
 
756
- .tds-sidenav-section-header{
801
+ .tds-page-header{
757
802
  display:flex;
758
- align-items:baseline;
759
- justify-content:space-between;
760
- padding-top:var(--t-spacing-2);
803
+ flex-direction:column;
804
+ padding-top:var(--tds-page-header-padding-y);
805
+ color:var(--tds-page-header-color);
806
+ background:var(--tds-page-header-background-color);
807
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
761
808
  }
762
809
 
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;
810
+ .tds-page-header:not(.has-nav){
811
+ padding-bottom:var(--tds-page-header-padding-y);
770
812
  }
771
813
 
772
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
- padding-top:0;
814
+ .tds-page-header.inactive{
815
+ background:var(--tds-page-header-background-color-inactive);
774
816
  }
775
817
 
776
- .tds-sidenav-section-header [slot="label-actions"]{
777
- display:flex;
778
- gap:var(--t-spacing-half);
779
- align-items:center;
818
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
819
+ width:100%;
780
820
  }
781
821
 
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;
822
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
799
823
  display:flex;
800
- gap:12px;
801
- align-items:center;
802
- width:100%;
803
- padding:12px;
804
- overflow:hidden;
805
- font-size:var(--t-font-size-sm);
806
- line-height:18px;
807
- color:var(--t-text-color-headline);
808
- white-space:nowrap;
809
- text-decoration:none;
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);
824
+ flex-flow:row wrap;
825
+ gap:var(--t-spacing-half) var(--t-spacing-1);
826
+ align-items:flex-start;
827
+ justify-content:flex-start;
828
+ min-width:0;
818
829
  }
819
830
 
820
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
- display:block;
822
- flex:1;
823
- overflow:hidden;
824
- text-overflow:ellipsis;
825
- text-align:left;
826
- white-space:nowrap;
827
- }
828
-
829
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
- color:var(--t-text-color-headline);
832
- text-decoration:none;
833
- }
834
-
835
- :is(.tds-sidenav-item :is(a,button)):active{
836
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
831
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
832
+ display:flex;
833
+ gap:var(--tds-page-header-nav-gap);
834
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
835
+ margin:0 0 -1px;
836
+ overflow:auto;
837
+ list-style:none;
838
+ background:var(--tds-page-header-nav-background);
837
839
  }
838
840
 
839
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
- overflow:hidden;
841
- color:var(--tds-sidenav-item-icon-color);
841
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
842
+ position:relative;
843
+ display:inline-flex;
844
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
845
+ font-size:var(--t-font-size-sm);
846
+ line-height:22px;
847
+ color:var(--tds-page-header-nav-item-color);
848
+ white-space:nowrap;
849
+ text-decoration:none;
850
+ -webkit-appearance:none;
851
+ -moz-appearance:none;
852
+ appearance:none;
853
+ cursor:pointer;
854
+ outline-offset:-2px;
855
+ background-color:var(--tds-page-header-nav-item-background-color);
856
+ background-clip:padding-box;
857
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
858
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
859
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
842
860
  }
843
861
 
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);
862
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
863
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
864
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
865
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
866
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
848
867
  }
849
868
 
850
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
- --tds-sidenav-indent:19px;
852
- }
853
-
854
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
- visibility:visible;
856
- block-size:auto;
857
- opacity:1;
858
- }
859
-
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);
863
-
864
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
- font-weight:var(--t-font-weight-semibold);
866
- }
867
-
868
- .tds-sidenav-item:has(.tds-sidenav-section){
869
- display:flex;
870
- flex-direction:column;
871
- gap:var(--t-spacing-half);
872
- }
869
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
870
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
871
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
872
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
873
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
874
+ }
873
875
 
874
- .tds-sidenav-item .tds-sidenav-section-list{
875
- --tds-sidenav-item-depth:1;
876
- gap:0;
877
- }
876
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
877
+ background-color:var(--tds-page-header-nav-item-background-color-active);
878
+ border-color:var(--tds-page-header-nav-item-border-color-active);
879
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
880
+ }
878
881
 
879
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
- visibility:hidden;
881
- block-size:0;
882
- overflow-y:clip;
883
- opacity:0;
884
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
885
- }
882
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
883
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
884
+ color:var(--tds-page-header-nav-item-color-disabled);
885
+ cursor:not-allowed;
886
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
887
+ opacity:1;
888
+ }
886
889
 
887
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
- --tds-sidenav-item-depth:2;
889
- }
890
+ @media (min-width: 600px){
891
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
892
+ position:absolute;
893
+ inset:auto -1px -1px;
894
+ height:1px;
895
+ pointer-events:none;
896
+ content:"";
897
+ background-color:var(--tds-page-header-bottom-border-color);
898
+ }
899
+ }
890
900
 
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;
901
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
902
+ position:relative;
897
903
  }
898
904
 
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);
905
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
906
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
907
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
908
908
  }
909
909
 
910
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
910
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
911
911
  position:absolute;
912
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
- z-index:-1;
914
- height:100%;
912
+ top:-5px;
913
+ right:-2px;
914
+ width:10px;
915
+ height:10px;
915
916
  content:"";
916
- background-color:var(--tds-sidenav-item-nested-background);
917
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
- transition:var(--tds-sidenav-item-transition);
919
- }
920
-
921
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
922
- display:block;
923
- text-align:left;
924
- white-space:normal;
925
- }
926
-
927
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
928
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
917
+ background:var(--tds-page-header-nav-item-indicator-color);
918
+ border-radius:50%;
930
919
  }
931
920
 
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);
921
+ @media (prefers-reduced-motion: no-preference){
922
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
923
+ animation:indicator-pulse 1.25s ease infinite;
924
+ }
934
925
  }
935
926
 
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{
927
+ .tds-page-header__title-bar{
942
928
  display:flex;
943
- gap:var(--t-spacing-2);
944
- align-items:center;
945
- width:100%;
929
+ flex-direction:column;
930
+ gap:var(--t-spacing-2) var(--t-spacing-1);
931
+ align-items:flex-start;
932
+ justify-content:space-between;
933
+ padding:0 var(--tds-page-header-padding-x);
946
934
  }
947
935
 
948
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
- order:0;
950
- }
951
-
952
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
- flex:1;
954
- order:1;
955
- margin:0;
956
- font-size:var(--t-font-size-lg);
957
- font-weight:var(--t-font-weight-medium);
958
- color:var(--t-text-color-headline);
936
+ .tds-page-header--profile > .tds-page-header__title-bar{
937
+ align-items:center;
959
938
  }
960
939
 
961
- @media (max-width: 719px){
962
- .tds-sidenav-collapse{
963
- z-index:10001;
964
- display:none;
965
- max-width:min(448px, calc(100vw - 48px));
966
- padding:0;
967
- margin:12px 0;
968
- position-area:bottom span-right;
969
- overflow:hidden;
970
- outline:0;
971
- background:var(--t-surface-color-card);
972
- border:0;
973
- border-radius:6px;
974
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
- opacity:var(--tds-sidenav-collapse-open-opacity);
976
- transform:var(--tds-sidenav-collapse-open-transform);
977
- transition:var(--tds-sidenav-collapse-transition-enter);
978
- will-change:transform;
979
- }
940
+ .tds-page-header__primary{
941
+ width:100%;
942
+ }
980
943
 
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;
944
+ .tds-page-header__primary h1{
945
+ margin:0;
946
+ font-size:var(--tds-page-header-headline-font-size);
947
+ font-weight:var(--t-font-weight-normal);
948
+ line-height:32px;
949
+ color:var(--tds-page-header-headline-color);
950
+ overflow-wrap:break-word;
989
951
  }
990
952
 
991
- .tds-sidenav-item :is(a, button) :is(.prefix){
992
- display:none;
953
+ @media (min-width: 960px){
954
+ .tds-page-header__primary{
955
+ flex:1 1 max-content;
956
+ width:auto;
957
+ min-width:0;
958
+ max-width:100%;
993
959
  }
994
- @supports selector(:popover-open){
995
- .tds-sidenav-collapse:popover-open{
996
- display:flex;
997
- }
998
960
 
999
- .tds-sidenav-collapse:not(:popover-open){
1000
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
- transition:var(--tds-sidenav-collapse-transition-exit);
1002
- }
1003
-
1004
- @starting-style{
1005
- .tds-sidenav-collapse:popover-open{
1006
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
- transform:var(--tds-sidenav-collapse-closed-transform);
1008
- }
1009
- }
961
+ .tds-page-header__title-bar,
962
+ .tds-page-header--profile .tds-page-header__title-bar{
963
+ flex-flow:row nowrap;
964
+ row-gap:12px;
965
+ align-items:flex-start;
1010
966
  }
1011
- @supports not selector(:popover-open){
1012
- .tds-sidenav-collapse.\:popover-open{
1013
- display:flex;
967
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
968
+ width:auto;
1014
969
  }
1015
970
 
1016
- .tds-sidenav-collapse:not(.\:popover-open){
1017
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
- transition:var(--tds-sidenav-collapse-transition-exit);
971
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
972
+ justify-content:flex-end;
1019
973
  }
1020
- }
1021
974
  }
1022
975
 
1023
- @media (min-width: 720px){
1024
- .tds-sidenav-responsive-header{
1025
- display:none;
1026
- }
1027
- }
1028
-
1029
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
- display:none;
1031
- }
1032
-
1033
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
- display:block;
1035
- }
976
+ .tds-page-header-phone,
977
+ .tds-page-header-email{
978
+ color:var(--tds-page-header-color);
979
+ white-space:nowrap;
980
+ }
981
+ .tds-page-header-email{
982
+ max-width:100%;
983
+ overflow:hidden;
984
+ text-overflow:ellipsis;
985
+ }
1036
986
 
1037
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
- display:flex;
1039
- flex-direction:column;
1040
- }
987
+ @keyframes indicator-pulse{
988
+ 0%{
989
+ opacity:.3;
990
+ transform:scale(.9);
991
+ }
1041
992
 
1042
- @layer t-critical{
1043
- tds-page-header:not(.hydrated){
1044
- display:none;
993
+ 100%{
994
+ opacity:0;
995
+ transform:scale(1.75);
1045
996
  }
1046
997
  }
1047
998
 
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;
999
+ .tds-checkbox{
1000
+ --tds-checkbox-font-size:var(--t-font-size-md);
1001
+ --tds-checkbox-cursor:pointer;
1002
+ --tds-checkbox-line-height:1.4;
1003
+ --tds-checkbox-transition-property:background-color, border-color;
1066
1004
 
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);
1005
+ --tds-checkbox-input-size:var(--t-element-size-md);
1006
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1007
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1008
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1069
1009
 
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);
1010
+ --tds-checkbox-input-icon:none;
1011
+ --tds-checkbox-input-icon-visibility:hidden;
1012
+ --tds-checkbox-input-icon-opacity:0;
1013
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1073
1014
 
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);
1015
+ --tds-checkbox-label-color:var(--t-form-color);
1076
1016
 
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);
1017
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1018
+ --tds-checkbox-description-line-height:1.35;
1019
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1020
+ --tds-checkbox-description-invalid-icon-display:none;
1080
1021
 
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);
1022
+ position:relative;
1023
+ display:inline-grid;
1024
+ grid-template-columns:auto;
1025
+ grid-auto-columns:1fr;
1026
+ gap:var(--t-spacing-fourth) 0;
1027
+ line-height:var(--tds-checkbox-line-height);
1028
+ -webkit-user-select:none;
1029
+ -moz-user-select:none;
1030
+ user-select:none;
1031
+ }
1032
+
1033
+ .tds-checkbox label{
1034
+ grid-area:1 / 2;
1035
+ padding-inline-start:var(--t-spacing-1);
1036
+ font-size:var(--tds-checkbox-font-size);
1037
+ font-weight:var(--t-font-weight-normal);
1038
+ color:var(--tds-checkbox-label-color);
1039
+ cursor:var(--tds-checkbox-cursor);
1086
1040
  }
1087
1041
 
1088
- .tds-page-header--profile{
1089
- --tds-page-header-padding-y:20px;
1042
+ .tds-checkbox tds-indeterminate{
1043
+ display:flex;
1090
1044
  }
1091
1045
 
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
- }
1046
+ .tds-checkbox input[type="checkbox"]{
1047
+ position:relative;
1048
+ width:1em;
1049
+ height:1em;
1050
+ margin:calc((1lh - 1em) / 2) 0 0;
1051
+ font-size:var(--tds-checkbox-font-size);
1052
+ line-height:inherit;
1053
+ -webkit-appearance:none;
1054
+ -moz-appearance:none;
1055
+ appearance:none;
1056
+ cursor:var(--tds-checkbox-cursor);
1057
+ background-color:var(--tds-checkbox-input-background-color);
1058
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1059
+ border-radius:var(--tds-checkbox-input-border-radius);
1060
+ transition-timing-function:var(--t-ease-in-out);
1061
+ transition-duration:var(--t-duration-200);
1062
+ transition-property:var(--tds-checkbox-transition-property);
1097
1063
  }
1098
1064
 
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);
1065
+ :is(.tds-checkbox input[type="checkbox"])::before{
1066
+ position:absolute;
1067
+ top:50%;
1068
+ left:50%;
1069
+ visibility:var(--tds-checkbox-input-icon-visibility);
1070
+ width:100%;
1071
+ height:100%;
1072
+ content:"";
1073
+ background-color:var(--tds-checkbox-input-icon-fill);
1074
+ border-radius:var(--tds-checkbox-input-border-radius);
1075
+ opacity:var(--tds-checkbox-input-icon-opacity);
1076
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1077
+ mask-image:var(--tds-checkbox-input-icon);
1078
+ -webkit-mask-repeat:no-repeat;
1079
+ mask-repeat:no-repeat;
1080
+ -webkit-mask-size:contain;
1081
+ mask-size:contain;
1082
+ transform:translate(-50%, -50%);
1117
1083
  }
1118
- }
1119
- }
1120
1084
 
1121
- .tds-page-header{
1122
- display:flex;
1123
- flex-direction:column;
1124
- padding-top:var(--tds-page-header-padding-y);
1125
- color:var(--tds-page-header-color);
1126
- background:var(--tds-page-header-background-color);
1127
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1128
- }
1085
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1086
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1087
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1088
+ }
1129
1089
 
1130
- .tds-page-header:not(.has-nav){
1131
- padding-bottom:var(--tds-page-header-padding-y);
1090
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1091
+ outline:var(--t-focus-ring-outline);
1092
+ outline-offset:var(--t-focus-ring-offset);
1093
+ }
1094
+
1095
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1096
+ pointer-events:none;
1097
+ }
1098
+
1099
+ @media (prefers-reduced-motion: reduce){
1100
+
1101
+ .tds-checkbox input[type="checkbox"]{
1102
+ --tds-checkbox-transition-property:none;
1132
1103
  }
1104
+ }
1133
1105
 
1134
- .tds-page-header.inactive{
1135
- background:var(--tds-page-header-background-color-inactive);
1106
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1107
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1108
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1109
+ --tds-checkbox-input-icon-visibility:visible;
1110
+ --tds-checkbox-input-icon-opacity:1;
1136
1111
  }
1137
1112
 
1138
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
- width:100%;
1113
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1114
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1115
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1116
+ }
1117
+
1118
+ .tds-checkbox:has(input:checked){
1119
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1140
1120
  }
1141
1121
 
1142
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1143
- display:flex;
1144
- flex-flow:row wrap;
1145
- gap:var(--t-spacing-half) var(--t-spacing-1);
1146
- align-items:flex-start;
1147
- justify-content:flex-start;
1148
- min-width:0;
1122
+ .tds-checkbox:has(input:indeterminate){
1123
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1149
1124
  }
1150
1125
 
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);
1159
- }
1126
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1127
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1128
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1129
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1130
+ }
1160
1131
 
1161
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1162
- position:relative;
1163
- display:inline-flex;
1164
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1165
- font-size:var(--t-font-size-sm);
1166
- line-height:22px;
1167
- color:var(--tds-page-header-nav-item-color);
1168
- white-space:nowrap;
1169
- text-decoration:none;
1170
- -webkit-appearance:none;
1171
- -moz-appearance:none;
1172
- appearance:none;
1173
- cursor:pointer;
1174
- outline-offset:-2px;
1175
- background-color:var(--tds-page-header-nav-item-background-color);
1176
- background-clip:padding-box;
1177
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1178
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1179
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1132
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1133
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1134
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1180
1135
  }
1181
1136
 
1182
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1183
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1184
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1185
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1186
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1187
- }
1188
-
1189
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1190
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1191
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1192
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1193
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1194
- }
1195
-
1196
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1197
- background-color:var(--tds-page-header-nav-item-background-color-active);
1198
- border-color:var(--tds-page-header-nav-item-border-color-active);
1199
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1200
- }
1201
-
1202
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1203
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1204
- color:var(--tds-page-header-nav-item-color-disabled);
1205
- cursor:not-allowed;
1206
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
- opacity:1;
1208
- }
1209
-
1210
- @media (min-width: 600px){
1211
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1212
- position:absolute;
1213
- inset:auto -1px -1px;
1214
- height:1px;
1215
- pointer-events:none;
1216
- content:"";
1217
- background-color:var(--tds-page-header-bottom-border-color);
1218
- }
1219
- }
1220
-
1221
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
- position:relative;
1137
+ :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{
1138
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1139
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1223
1140
  }
1224
1141
 
1225
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1226
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1227
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1228
- }
1229
-
1230
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1231
- position:absolute;
1232
- top:-5px;
1233
- right:-2px;
1234
- width:10px;
1235
- height:10px;
1236
- content:"";
1237
- background:var(--tds-page-header-nav-item-indicator-color);
1238
- border-radius:50%;
1239
- }
1240
-
1241
- @media (prefers-reduced-motion: no-preference){
1242
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1243
- animation:indicator-pulse 1.25s ease infinite;
1244
- }
1142
+ :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){
1143
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1144
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1245
1145
  }
1246
1146
 
1247
- .tds-page-header__title-bar{
1248
- display:flex;
1249
- flex-direction:column;
1250
- gap:var(--t-spacing-2) var(--t-spacing-1);
1251
- align-items:flex-start;
1252
- justify-content:space-between;
1253
- padding:0 var(--tds-page-header-padding-x);
1254
- }
1255
-
1256
- .tds-page-header--profile > .tds-page-header__title-bar{
1257
- align-items:center;
1258
- }
1259
-
1260
- .tds-page-header__primary{
1261
- width:100%;
1262
- }
1263
-
1264
- .tds-page-header__primary h1{
1265
- margin:0;
1266
- font-size:var(--tds-page-header-headline-font-size);
1267
- font-weight:var(--t-font-weight-normal);
1268
- line-height:32px;
1269
- color:var(--tds-page-header-headline-color);
1270
- overflow-wrap:break-word;
1271
- }
1147
+ .tds-checkbox:has(input:required) label::after{
1148
+ margin-left:.25ch;
1149
+ color:var(--t-text-color-status-error);
1150
+ content:"*";
1151
+ }
1272
1152
 
1273
- @media (min-width: 960px){
1274
- .tds-page-header__primary{
1275
- flex:1 1 max-content;
1276
- width:auto;
1277
- min-width:0;
1278
- max-width:100%;
1279
- }
1153
+ .tds-checkbox:has(input:disabled){
1154
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1155
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1280
1156
 
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;
1157
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1158
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1159
+ --tds-checkbox-cursor:not-allowed;
1286
1160
  }
1287
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
- width:auto;
1289
- }
1290
1161
 
1291
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
- justify-content:flex-end;
1162
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1163
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1293
1164
  }
1294
- }
1295
1165
 
1296
- .tds-page-header-phone,
1297
- .tds-page-header-email{
1298
- color:var(--tds-page-header-color);
1299
- white-space:nowrap;
1300
- }
1301
- .tds-page-header-email{
1302
- max-width:100%;
1303
- overflow:hidden;
1304
- text-overflow:ellipsis;
1166
+ .tds-checkbox-description{
1167
+ display:flex;
1168
+ grid-area:2 / 2;
1169
+ gap:var(--t-spacing-half);
1170
+ align-items:flex-start;
1171
+ padding-inline-start:var(--t-spacing-1);
1172
+ margin:0;
1173
+ font-size:var(--tds-checkbox-description-font-size);
1174
+ line-height:var(--tds-checkbox-description-line-height);
1175
+ color:var(--tds-checkbox-description-color);
1176
+ cursor:text;
1305
1177
  }
1306
1178
 
1307
- @keyframes indicator-pulse{
1308
- 0%{
1309
- opacity:.3;
1310
- transform:scale(.9);
1311
- }
1312
-
1313
- 100%{
1314
- opacity:0;
1315
- transform:scale(1.75);
1179
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1180
+ display:var(--tds-checkbox-description-invalid-icon-display);
1181
+ flex-shrink:0;
1182
+ margin-top:calc(.5lh - .5em);
1183
+ line-height:var(--tds-checkbox-description-line-height);
1316
1184
  }
1317
- }
1318
1185
 
1319
- .tds-button-group{
1320
- display:inline-flex;
1186
+ .tds-checkbox--sm{
1187
+ --tds-checkbox-line-height:1.35;
1188
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1189
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1190
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1191
+ --tds-checkbox-description-line-height:1.3;
1321
1192
  }
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
- }
1360
1193
 
1361
1194
  .tds-checkbox-group{
1362
1195
  --tds-checkbox-group-font-size:var(--t-font-size-md);
@@ -1432,199 +1265,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1432
1265
  --tds-checkbox-group-description-line-height:1.3;
1433
1266
  }
1434
1267
 
1435
- .tds-checkbox{
1436
- --tds-checkbox-font-size:var(--t-font-size-md);
1437
- --tds-checkbox-cursor:pointer;
1438
- --tds-checkbox-line-height:1.4;
1439
- --tds-checkbox-transition-property:background-color, border-color;
1440
-
1441
- --tds-checkbox-input-size:var(--t-element-size-md);
1442
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1443
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1444
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1445
-
1446
- --tds-checkbox-input-icon:none;
1447
- --tds-checkbox-input-icon-visibility:hidden;
1448
- --tds-checkbox-input-icon-opacity:0;
1449
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1450
1268
 
1451
- --tds-checkbox-label-color:var(--t-form-color);
1269
+ :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{
1270
+ -webkit-appearance:none;
1271
+ appearance:none;
1272
+ }
1452
1273
 
1453
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1454
- --tds-checkbox-description-line-height:1.35;
1455
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1456
- --tds-checkbox-description-invalid-icon-display:none;
1274
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1275
+ inline-size:1em;
1276
+ block-size:2em;
1277
+ }
1278
+ @supports (field-sizing: content){
1279
+ .tds-input--auto-width{
1280
+ inline-size:-moz-fit-content;
1281
+ inline-size:fit-content;
1282
+ min-inline-size:min(100%, 122px);
1283
+ }
1457
1284
 
1458
- position:relative;
1459
- display:inline-grid;
1460
- grid-template-columns:auto;
1461
- grid-auto-columns:1fr;
1462
- gap:var(--t-spacing-fourth) 0;
1463
- line-height:var(--tds-checkbox-line-height);
1464
- -webkit-user-select:none;
1465
- -moz-user-select:none;
1466
- user-select:none;
1467
- }
1468
-
1469
- .tds-checkbox label{
1470
- grid-area:1 / 2;
1471
- padding-inline-start:var(--t-spacing-1);
1472
- font-size:var(--tds-checkbox-font-size);
1473
- font-weight:var(--t-font-weight-normal);
1474
- color:var(--tds-checkbox-label-color);
1475
- cursor:var(--tds-checkbox-cursor);
1476
- }
1477
-
1478
- .tds-checkbox tds-indeterminate{
1479
- display:flex;
1480
- }
1481
-
1482
- .tds-checkbox input[type="checkbox"]{
1483
- position:relative;
1484
- width:1em;
1485
- height:1em;
1486
- margin:calc((1lh - 1em) / 2) 0 0;
1487
- font-size:var(--tds-checkbox-font-size);
1488
- line-height:inherit;
1489
- -webkit-appearance:none;
1490
- -moz-appearance:none;
1491
- appearance:none;
1492
- cursor:var(--tds-checkbox-cursor);
1493
- background-color:var(--tds-checkbox-input-background-color);
1494
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1495
- border-radius:var(--tds-checkbox-input-border-radius);
1496
- transition-timing-function:var(--t-ease-in-out);
1497
- transition-duration:var(--t-duration-200);
1498
- transition-property:var(--tds-checkbox-transition-property);
1499
- }
1500
-
1501
- :is(.tds-checkbox input[type="checkbox"])::before{
1502
- position:absolute;
1503
- top:50%;
1504
- left:50%;
1505
- visibility:var(--tds-checkbox-input-icon-visibility);
1506
- width:100%;
1507
- height:100%;
1508
- content:"";
1509
- background-color:var(--tds-checkbox-input-icon-fill);
1510
- border-radius:var(--tds-checkbox-input-border-radius);
1511
- opacity:var(--tds-checkbox-input-icon-opacity);
1512
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1513
- mask-image:var(--tds-checkbox-input-icon);
1514
- -webkit-mask-repeat:no-repeat;
1515
- mask-repeat:no-repeat;
1516
- -webkit-mask-size:contain;
1517
- mask-size:contain;
1518
- transform:translate(-50%, -50%);
1519
- }
1520
-
1521
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1522
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1523
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1524
- }
1525
-
1526
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1527
- outline:var(--t-focus-ring-outline);
1528
- outline-offset:var(--t-focus-ring-offset);
1529
- }
1530
-
1531
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1532
- pointer-events:none;
1533
- }
1534
-
1535
- @media (prefers-reduced-motion: reduce){
1536
-
1537
- .tds-checkbox input[type="checkbox"]{
1538
- --tds-checkbox-transition-property:none;
1539
- }
1540
- }
1541
-
1542
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1543
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1544
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1545
- --tds-checkbox-input-icon-visibility:visible;
1546
- --tds-checkbox-input-icon-opacity:1;
1547
- }
1548
-
1549
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1550
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1551
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1552
- }
1553
-
1554
- .tds-checkbox:has(input:checked){
1555
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1556
- }
1557
-
1558
- .tds-checkbox:has(input:indeterminate){
1559
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1560
- }
1561
-
1562
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1563
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1564
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1565
- --tds-checkbox-description-invalid-icon-display:inline-block;
1566
- }
1567
-
1568
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1569
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1570
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1571
- }
1572
-
1573
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1574
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1575
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1576
- }
1577
-
1578
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1579
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1580
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1581
- }
1582
-
1583
- .tds-checkbox:has(input:required) label::after{
1584
- margin-left:.25ch;
1585
- color:var(--t-text-color-status-error);
1586
- content:"*";
1587
- }
1588
-
1589
- .tds-checkbox:has(input:disabled){
1590
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1591
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1592
-
1593
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1594
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1595
- --tds-checkbox-cursor:not-allowed;
1596
- }
1597
-
1598
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1599
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1600
- }
1601
-
1602
- .tds-checkbox-description{
1603
- display:flex;
1604
- grid-area:2 / 2;
1605
- gap:var(--t-spacing-half);
1606
- align-items:flex-start;
1607
- padding-inline-start:var(--t-spacing-1);
1608
- margin:0;
1609
- font-size:var(--tds-checkbox-description-font-size);
1610
- line-height:var(--tds-checkbox-description-line-height);
1611
- color:var(--tds-checkbox-description-color);
1612
- cursor:text;
1613
- }
1614
-
1615
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1616
- display:var(--tds-checkbox-description-invalid-icon-display);
1617
- flex-shrink:0;
1618
- margin-top:calc(.5lh - .5em);
1619
- line-height:var(--tds-checkbox-description-line-height);
1620
- }
1621
-
1622
- .tds-checkbox--sm{
1623
- --tds-checkbox-line-height:1.35;
1624
- --tds-checkbox-input-size:var(--t-element-size-sm);
1625
- --tds-checkbox-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-description-line-height:1.3;
1285
+ .tds-input--auto-width input{
1286
+ field-sizing:content;
1287
+ inline-size:auto;
1288
+ }
1628
1289
  }
1629
1290
 
1630
1291
  .tds-modal-overlay{
@@ -1923,110 +1584,192 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1923
1584
  --tds-radio-description-line-height:1.3;
1924
1585
  }
1925
1586
 
1926
- .tds-radio-group{
1927
- --tds-radio-group-font-size:var(--t-font-size-md);
1928
- --tds-radio-group-line-height:1.4;
1929
- --tds-radio-group-gap:var(--t-spacing-1);
1587
+ .tds-input:has(textarea){
1588
+ --tds-input-padding-block:6px;
1589
+ --tds-input-resizer-size:var(--t-element-size-sm);
1590
+ --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");
1591
+ }
1930
1592
 
1931
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1932
- --tds-radio-group-description-line-height:1.35;
1933
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1934
- --tds-radio-group-description-invalid-icon-display:none;
1935
- display:flex;
1936
- flex-direction:column;
1937
- gap:0;
1938
- padding:0;
1939
- margin:0;
1593
+ @supports (x: attr(x type(*))){
1940
1594
 
1941
- font-size:var(--tds-radio-group-font-size);
1942
- line-height:var(--tds-radio-group-line-height);
1943
- border:0;
1595
+ .tds-input textarea{
1596
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1944
1597
  }
1945
-
1946
- .tds-radio-group legend{
1947
- float:left;
1948
- padding:0;
1949
- margin:0;
1950
1598
  }
1951
1599
 
1952
- .tds-radio-group[aria-invalid="true"]{
1953
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1954
- --tds-radio-group-description-invalid-icon-display:inline-block;
1955
- }
1600
+ .tds-input.tds-textarea--resize-vertical textarea{
1601
+ resize:vertical;
1602
+ }
1956
1603
 
1957
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1958
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1604
+ .tds-input.tds-textarea--resize-none textarea{
1605
+ resize:none;
1959
1606
  }
1960
1607
 
1961
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1962
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1963
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1964
- }
1608
+ .tds-input.tds-textarea--resize-auto textarea{
1609
+ resize:vertical;
1610
+ }
1965
1611
 
1966
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1967
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1612
+ @supports (field-sizing: content){
1613
+ .tds-input.tds-textarea--resize-auto textarea{
1614
+ field-sizing:content;
1615
+ resize:none;
1968
1616
  }
1969
-
1970
- .tds-radio-group:has(input:required) legend::after{
1971
- margin-left:.25ch;
1972
- color:var(--t-text-color-status-error);
1973
- content:"*";
1974
1617
  }
1975
1618
 
1976
- .tds-radio-group-fields{
1977
- display:flex;
1978
- flex-direction:column;
1979
- gap:var(--tds-radio-group-gap);
1980
- align-items:flex-start;
1981
- margin-top:var(--t-spacing-1);
1619
+ .tds-input textarea{
1620
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1621
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1622
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1623
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1624
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1625
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1626
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1627
+ --tds-input-scrollbar-thumb-border-radius:999px;
1628
+ --tds-input-scrollbar-thumb-border-width:3px;
1629
+ --tds-input-scrollbar-track-margin-block:.125rem;
1630
+ scrollbar-color:initial;
1631
+ transition-timing-function:var(--t-ease-in-out);
1632
+ transition-duration:var(--t-duration-200);
1633
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1982
1634
  }
1983
1635
 
1984
- .tds-radio-group-description{
1985
- display:flex;
1986
- gap:var(--t-spacing-half);
1987
- align-items:flex-start;
1988
- margin:var(--t-spacing-fourth) 0 0;
1989
- font-size:var(--tds-radio-group-description-font-size);
1990
- line-height:var(--tds-radio-group-description-line-height);
1991
- color:var(--tds-radio-group-description-color);
1992
- cursor:text;
1993
- }
1636
+ @media (pointer: fine){
1637
+ :is(.tds-input textarea)::-webkit-scrollbar{
1638
+ width:12px;
1639
+ height:12px;
1640
+ cursor:default;
1641
+ }
1994
1642
 
1995
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1996
- display:var(--tds-radio-group-description-invalid-icon-display);
1997
- flex-shrink:0;
1998
- margin-top:calc(.5lh - .5em);
1999
- line-height:var(--tds-radio-group-description-line-height);
2000
- }
1643
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1644
+ cursor:default;
1645
+ background:var(--tds-input-scrollbar-thumb-color);
1646
+ background-clip:content-box;
1647
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1648
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1649
+ }
2001
1650
 
2002
- .tds-radio-group--sm{
2003
- --tds-radio-group-line-height:1.35;
2004
- --tds-radio-group-font-size:var(--t-font-size-sm);
2005
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2006
- --tds-radio-group-description-line-height:1.3;
2007
- }
1651
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1652
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1653
+ }
2008
1654
 
1655
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1656
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1657
+ }
2009
1658
 
2010
- :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{
2011
- -webkit-appearance:none;
2012
- appearance:none;
1659
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1660
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2013
1661
  }
2014
1662
 
2015
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2016
- inline-size:1em;
2017
- block-size:2em;
1663
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1664
+ background:var(--tds-input-scrollbar-surface-color);
1665
+ }
1666
+
1667
+ :is(.tds-input textarea)::-webkit-resizer{
1668
+ background:var(--tds-input-resizer-icon) no-repeat;
1669
+ background-position:right bottom;
1670
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1671
+ }
1672
+
1673
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1674
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1675
+ cursor:default;
1676
+ }
1677
+
1678
+ @supports (-moz-appearance: none){
1679
+ :is(.tds-input textarea){
1680
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1681
+ scrollbar-width:thin;
1682
+ }
1683
+
1684
+ @media (hover){
1685
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1686
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1687
+ }
1688
+ }
2018
1689
  }
2019
- @supports (field-sizing: content){
2020
- .tds-input--auto-width{
2021
- inline-size:-moz-fit-content;
2022
- inline-size:fit-content;
2023
- min-inline-size:min(100%, 122px);
2024
1690
  }
2025
1691
 
2026
- .tds-input--auto-width input{
2027
- field-sizing:content;
2028
- inline-size:auto;
1692
+ .tds-radio-group{
1693
+ --tds-radio-group-font-size:var(--t-font-size-md);
1694
+ --tds-radio-group-line-height:1.4;
1695
+ --tds-radio-group-gap:var(--t-spacing-1);
1696
+
1697
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1698
+ --tds-radio-group-description-line-height:1.35;
1699
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1700
+ --tds-radio-group-description-invalid-icon-display:none;
1701
+ display:flex;
1702
+ flex-direction:column;
1703
+ gap:0;
1704
+ padding:0;
1705
+ margin:0;
1706
+
1707
+ font-size:var(--tds-radio-group-font-size);
1708
+ line-height:var(--tds-radio-group-line-height);
1709
+ border:0;
1710
+ }
1711
+
1712
+ .tds-radio-group legend{
1713
+ float:left;
1714
+ padding:0;
1715
+ margin:0;
1716
+ }
1717
+
1718
+ .tds-radio-group[aria-invalid="true"]{
1719
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1720
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1721
+ }
1722
+
1723
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1724
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1725
+ }
1726
+
1727
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1728
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1729
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1730
+ }
1731
+
1732
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1733
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1734
+ }
1735
+
1736
+ .tds-radio-group:has(input:required) legend::after{
1737
+ margin-left:.25ch;
1738
+ color:var(--t-text-color-status-error);
1739
+ content:"*";
1740
+ }
1741
+
1742
+ .tds-radio-group-fields{
1743
+ display:flex;
1744
+ flex-direction:column;
1745
+ gap:var(--tds-radio-group-gap);
1746
+ align-items:flex-start;
1747
+ margin-top:var(--t-spacing-1);
1748
+ }
1749
+
1750
+ .tds-radio-group-description{
1751
+ display:flex;
1752
+ gap:var(--t-spacing-half);
1753
+ align-items:flex-start;
1754
+ margin:var(--t-spacing-fourth) 0 0;
1755
+ font-size:var(--tds-radio-group-description-font-size);
1756
+ line-height:var(--tds-radio-group-description-line-height);
1757
+ color:var(--tds-radio-group-description-color);
1758
+ cursor:text;
1759
+ }
1760
+
1761
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1762
+ display:var(--tds-radio-group-description-invalid-icon-display);
1763
+ flex-shrink:0;
1764
+ margin-top:calc(.5lh - .5em);
1765
+ line-height:var(--tds-radio-group-description-line-height);
2029
1766
  }
1767
+
1768
+ .tds-radio-group--sm{
1769
+ --tds-radio-group-line-height:1.35;
1770
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1771
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1772
+ --tds-radio-group-description-line-height:1.3;
2030
1773
  }
2031
1774
 
2032
1775
  .tds-toggle-switch{
@@ -2169,110 +1912,367 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2169
1912
  --tds-toggle-switch-display:inline-flex;
2170
1913
  }
2171
1914
 
2172
- .tds-input:has(textarea){
2173
- --tds-input-padding-block:6px;
2174
- --tds-input-resizer-size:var(--t-element-size-sm);
2175
- --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");
1915
+
1916
+ @media (prefers-reduced-motion: no-preference){
1917
+
1918
+ :root{
1919
+ interpolate-size:allow-keywords;
2176
1920
  }
1921
+ }
2177
1922
 
2178
- @supports (x: attr(x type(*))){
1923
+ @layer tds-component{
1924
+ tds-sidenav,
1925
+ .tds-sidenav{
1926
+ --tds-sidenav-indent:12px;
1927
+ --tds-sidenav-item-depth:0;
2179
1928
 
2180
- .tds-input textarea{
2181
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1929
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1930
+
1931
+ --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;
1932
+ --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;
1933
+ --tds-sidenav-collapse-closed-opacity:0;
1934
+ --tds-sidenav-collapse-open-opacity:1;
1935
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1936
+ --tds-sidenav-collapse-open-transform:translateY(0);
1937
+
1938
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1939
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1940
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1941
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1942
+
1943
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1944
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1945
+ --tds-sidenav-item-nested-background-selected:transparent;
1946
+
1947
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1948
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1949
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1950
+
1951
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1952
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1953
+ }
1954
+
1955
+ @media (prefers-reduced-motion: reduce){
1956
+ tds-sidenav,
1957
+ .tds-sidenav{
1958
+ --tds-sidenav-collapse-transition-enter:none;
1959
+ --tds-sidenav-collapse-transition-exit:none;
1960
+ --tds-sidenav-collapse-closed-transform:none;
1961
+ --tds-sidenav-collapse-open-transform:none;
1962
+ }
1963
+ }
1964
+
1965
+ .tds-sidenav--theme-gray{
1966
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1967
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1968
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1969
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1970
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1971
+ }
2182
1972
  }
1973
+
1974
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1975
+ display:flex;
2183
1976
  }
2184
1977
 
2185
- .tds-input.tds-textarea--resize-vertical textarea{
2186
- resize:vertical;
1978
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1979
+ flex-direction:column;
1980
+ gap:var(--t-spacing-half);
1981
+ width:100%;
1982
+ }
1983
+
1984
+ .tds-sidenav-section-list{
1985
+ width:100%;
1986
+ padding:0;
1987
+ margin:0;
1988
+ list-style:none;
1989
+ }
1990
+
1991
+ .tds-sidenav-section-header{
1992
+ display:flex;
1993
+ align-items:baseline;
1994
+ justify-content:space-between;
1995
+ padding-top:var(--t-spacing-2);
1996
+ }
1997
+
1998
+ .tds-sidenav-section-header h2{
1999
+ margin:0;
2000
+ font-size:var(--t-font-size-sm);
2001
+ font-weight:var(--t-font-weight-semibold);
2002
+ line-height:1.35;
2003
+ color:var(--t-text-color-secondary);
2004
+ text-transform:uppercase;
2005
+ }
2006
+
2007
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2008
+ padding-top:0;
2009
+ }
2010
+
2011
+ .tds-sidenav-section-header [slot="label-actions"]{
2012
+ display:flex;
2013
+ gap:var(--t-spacing-half);
2014
+ align-items:center;
2015
+ }
2016
+
2017
+ .tds-sidenav-section [slot="section-actions"]{
2018
+ display:flex;
2019
+ gap:12px;
2020
+ align-items:center;
2021
+ min-height:42px;
2022
+ padding:var(--t-spacing-1) 0;
2023
+ }
2024
+
2025
+ .tds-sidenav-section-list,
2026
+ .tds-sidenav-item{
2027
+ width:100%;
2028
+ padding:0;
2029
+ margin:0;
2030
+ }
2031
+
2032
+ .tds-sidenav-item :is(a,button){
2033
+ position:relative;
2034
+ display:flex;
2035
+ gap:12px;
2036
+ align-items:center;
2037
+ width:100%;
2038
+ padding:12px;
2039
+ overflow:hidden;
2040
+ font-size:var(--t-font-size-sm);
2041
+ line-height:18px;
2042
+ color:var(--t-text-color-headline);
2043
+ white-space:nowrap;
2044
+ text-decoration:none;
2045
+ -webkit-appearance:none;
2046
+ -moz-appearance:none;
2047
+ appearance:none;
2048
+ cursor:pointer;
2049
+ background-color:var(--tds-sidenav-item-background, transparent);
2050
+ border:0;
2051
+ border-radius:var(--t-border-radius);
2052
+ transition:var(--tds-sidenav-item-transition);
2053
+ }
2054
+
2055
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2056
+ display:block;
2057
+ flex:1;
2058
+ overflow:hidden;
2059
+ text-overflow:ellipsis;
2060
+ text-align:left;
2061
+ white-space:nowrap;
2187
2062
  }
2188
2063
 
2189
- .tds-input.tds-textarea--resize-none textarea{
2190
- resize:none;
2064
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2065
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2066
+ color:var(--t-text-color-headline);
2067
+ text-decoration:none;
2191
2068
  }
2192
2069
 
2193
- .tds-input.tds-textarea--resize-auto textarea{
2194
- resize:vertical;
2070
+ :is(.tds-sidenav-item :is(a,button)):active{
2071
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2195
2072
  }
2196
2073
 
2197
- @supports (field-sizing: content){
2198
- .tds-input.tds-textarea--resize-auto textarea{
2199
- field-sizing:content;
2200
- resize:none;
2074
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2075
+ overflow:hidden;
2076
+ color:var(--tds-sidenav-item-icon-color);
2077
+ }
2078
+
2079
+ :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{
2080
+ display:block;
2081
+ width:var(--tds-sidenav-item-icon-size);
2082
+ height:var(--tds-sidenav-item-icon-size);
2201
2083
  }
2084
+
2085
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2086
+ --tds-sidenav-indent:19px;
2202
2087
  }
2203
2088
 
2204
- .tds-input textarea{
2205
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2206
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2207
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2208
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2209
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2210
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2211
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2212
- --tds-input-scrollbar-thumb-border-radius:999px;
2213
- --tds-input-scrollbar-thumb-border-width:3px;
2214
- --tds-input-scrollbar-track-margin-block:.125rem;
2215
- scrollbar-color:initial;
2216
- transition-timing-function:var(--t-ease-in-out);
2217
- transition-duration:var(--t-duration-200);
2218
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2089
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2090
+ visibility:visible;
2091
+ block-size:auto;
2092
+ opacity:1;
2093
+ }
2094
+
2095
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2096
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2097
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2098
+
2099
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2100
+ font-weight:var(--t-font-weight-semibold);
2101
+ }
2102
+
2103
+ .tds-sidenav-item:has(.tds-sidenav-section){
2104
+ display:flex;
2105
+ flex-direction:column;
2106
+ gap:var(--t-spacing-half);
2107
+ }
2108
+
2109
+ .tds-sidenav-item .tds-sidenav-section-list{
2110
+ --tds-sidenav-item-depth:1;
2111
+ gap:0;
2112
+ }
2113
+
2114
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2115
+ visibility:hidden;
2116
+ block-size:0;
2117
+ overflow-y:clip;
2118
+ opacity:0;
2119
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2120
+ }
2121
+
2122
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2123
+ --tds-sidenav-item-depth:2;
2124
+ }
2125
+
2126
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2127
+ min-height:var(--t-element-size-2xl);
2128
+ padding-block:9px;
2129
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2130
+ line-height:1;
2131
+ background-color:transparent;
2132
+ }
2133
+
2134
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2135
+ position:absolute;
2136
+ top:0;
2137
+ bottom:0;
2138
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2139
+ width:2px;
2140
+ content:"";
2141
+ background-color:var(--tds-sidenav-item-nested-border-color);
2142
+ transition:var(--tds-sidenav-item-transition);
2143
+ }
2144
+
2145
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2146
+ position:absolute;
2147
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2148
+ z-index:-1;
2149
+ height:100%;
2150
+ content:"";
2151
+ background-color:var(--tds-sidenav-item-nested-background);
2152
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2153
+ transition:var(--tds-sidenav-item-transition);
2154
+ }
2155
+
2156
+ :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)){
2157
+ display:block;
2158
+ text-align:left;
2159
+ white-space:normal;
2160
+ }
2161
+
2162
+ :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{
2163
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2164
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2165
+ }
2166
+
2167
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2168
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2169
+ }
2170
+
2171
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2172
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2173
+ font-weight:var(--t-font-weight-medium);
2174
+ }
2175
+
2176
+ .tds-sidenav-responsive-header{
2177
+ display:flex;
2178
+ gap:var(--t-spacing-2);
2179
+ align-items:center;
2180
+ width:100%;
2219
2181
  }
2220
2182
 
2221
- @media (pointer: fine){
2222
- :is(.tds-input textarea)::-webkit-scrollbar{
2223
- width:12px;
2224
- height:12px;
2225
- cursor:default;
2226
- }
2183
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2184
+ order:0;
2185
+ }
2186
+
2187
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2188
+ flex:1;
2189
+ order:1;
2190
+ margin:0;
2191
+ font-size:var(--t-font-size-lg);
2192
+ font-weight:var(--t-font-weight-medium);
2193
+ color:var(--t-text-color-headline);
2194
+ }
2195
+
2196
+ @media (max-width: 719px){
2197
+ .tds-sidenav-collapse{
2198
+ z-index:10001;
2199
+ display:none;
2200
+ max-width:min(448px, calc(100vw - 48px));
2201
+ padding:0;
2202
+ margin:12px 0;
2203
+ position-area:bottom span-right;
2204
+ overflow:hidden;
2205
+ outline:0;
2206
+ background:var(--t-surface-color-card);
2207
+ border:0;
2208
+ border-radius:6px;
2209
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2210
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2211
+ transform:var(--tds-sidenav-collapse-open-transform);
2212
+ transition:var(--tds-sidenav-collapse-transition-enter);
2213
+ will-change:transform;
2214
+ }
2215
+
2216
+ .tds-sidenav-scroll-container{
2217
+ --webkit-overflow-scrolling:touch;
2218
+ display:block;
2219
+ width:100%;
2220
+ height:-moz-fit-content;
2221
+ height:fit-content;
2222
+ padding:var(--t-spacing-2);
2223
+ overflow-y:auto;
2224
+ }
2227
2225
 
2228
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2229
- cursor:default;
2230
- background:var(--tds-input-scrollbar-thumb-color);
2231
- background-clip:content-box;
2232
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2233
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2226
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2227
+ display:none;
2228
+ }
2229
+ @supports selector(:popover-open){
2230
+ .tds-sidenav-collapse:popover-open{
2231
+ display:flex;
2234
2232
  }
2235
2233
 
2236
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2237
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2234
+ .tds-sidenav-collapse:not(:popover-open){
2235
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2236
+ transition:var(--tds-sidenav-collapse-transition-exit);
2238
2237
  }
2239
2238
 
2240
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2241
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2239
+ @starting-style{
2240
+ .tds-sidenav-collapse:popover-open{
2241
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2242
+ transform:var(--tds-sidenav-collapse-closed-transform);
2243
+ }
2242
2244
  }
2243
-
2244
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2245
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2245
+ }
2246
+ @supports not selector(:popover-open){
2247
+ .tds-sidenav-collapse.\:popover-open{
2248
+ display:flex;
2246
2249
  }
2247
2250
 
2248
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2249
- background:var(--tds-input-scrollbar-surface-color);
2251
+ .tds-sidenav-collapse:not(.\:popover-open){
2252
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2253
+ transition:var(--tds-sidenav-collapse-transition-exit);
2250
2254
  }
2255
+ }
2256
+ }
2251
2257
 
2252
- :is(.tds-input textarea)::-webkit-resizer{
2253
- background:var(--tds-input-resizer-icon) no-repeat;
2254
- background-position:right bottom;
2255
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2256
- }
2258
+ @media (min-width: 720px){
2259
+ .tds-sidenav-responsive-header{
2260
+ display:none;
2261
+ }
2262
+ }
2257
2263
 
2258
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2259
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2260
- cursor:default;
2264
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2265
+ display:none;
2261
2266
  }
2262
2267
 
2263
- @supports (-moz-appearance: none){
2264
- :is(.tds-input textarea){
2265
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2266
- scrollbar-width:thin;
2267
- }
2268
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2269
+ display:block;
2270
+ }
2268
2271
 
2269
- @media (hover){
2270
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2271
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2272
- }
2273
- }
2272
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2273
+ display:flex;
2274
+ flex-direction:column;
2274
2275
  }
2275
- }
2276
2276
 
2277
2277
  .tds-input{
2278
2278
  --tds-input-border-color:var(--t-form-border-color);
@@ -3941,57 +3941,223 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3941
3941
  [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
3942
3942
  [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
3943
3943
 
3944
- [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
3945
- [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3946
- [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3947
- [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3948
- [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3949
- [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3950
- [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3951
- [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3952
- [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3953
- [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3954
- [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
3944
+ [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
3945
+ [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3946
+ [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3947
+ [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3948
+ [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3949
+ [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3950
+ [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3951
+ [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3952
+ [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3953
+ [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3954
+ [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
3955
+
3956
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
3957
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
3958
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
3959
+
3960
+ [data-padding-xl="0"]{ padding:0; }
3961
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
3962
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
3963
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
3964
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
3965
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
3966
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
3967
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
3968
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
3969
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
3970
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
3971
+
3972
+ [data-padding-block-xl="0"]{ padding-block:0; }
3973
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
3974
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
3975
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
3976
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
3977
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
3978
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
3979
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
3980
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
3981
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
3982
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
3983
+
3984
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
3985
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3986
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
3987
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
3988
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3989
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
3990
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
3991
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
3992
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
3993
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
3994
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
3995
+ }
3996
+
3997
+ .tds-segmented-control{
3998
+ --tds-segmented-control-font-size:var(--t-font-size-md);
3999
+ --tds-segmented-control-padding:var(--t-spacing-half);
4000
+ --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4001
+ --tds-segmented-control-icon-size:.66666667lh;
4002
+ --tds-segmented-control-border-radius:var(--t-border-radius-md);
4003
+ --tds-segmented-control-max-width:280px;
4004
+ --tds-segmented-control-min-height:var(--t-container-size-md);
4005
+ --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4006
+ --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4007
+ --tds-segmented-control-width:fit-content;
4008
+
4009
+ display:flex;
4010
+ flex-direction:column;
4011
+ gap:var(--t-spacing-half);
4012
+ align-items:flex-start;
4013
+ width:var(--tds-segmented-control-width);
4014
+ }
4015
+
4016
+ .tds-segmented-control--sm{
4017
+ --tds-segmented-control-font-size:var(--t-font-size-sm);
4018
+ --tds-segmented-control-padding-inline:7px;
4019
+ --tds-segmented-control-min-height:var(--t-container-size-sm);
4020
+ }
4021
+
4022
+ .tds-segmented-control--full-width{
4023
+ --tds-segmented-control-width:100%;
4024
+ --tds-segmented-control-max-width:none;
4025
+ }
4026
+
4027
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
4028
+ flex:1 1 0;
4029
+ }
4030
+
4031
+ .tds-segmented-control-label{
4032
+ font-size:var(--tds-segmented-control-font-size);
4033
+ font-weight:var(--t-font-weight-normal);
4034
+ color:var(--t-text-color-headline);
4035
+ }
4036
+
4037
+ .tds-segmented-control-label--hidden{
4038
+ position:absolute;
4039
+ width:1px;
4040
+ height:1px;
4041
+ overflow:hidden;
4042
+ white-space:nowrap;
4043
+ clip-path:inset(50%);
4044
+ }
4045
+
4046
+ .tds-segmented-control-track{
4047
+ display:inline-flex;
4048
+ gap:var(--tds-segmented-control-track-gap);
4049
+ width:var(--tds-segmented-control-width);
4050
+ padding:var(--tds-segmented-control-padding);
4051
+ background-color:var(--t-form-background-color);
4052
+ border:1px solid var(--t-border-color);
4053
+ border-radius:var(--tds-segmented-control-border-radius);
4054
+ }
4055
+
4056
+ .tds-segmented-control-segment{
4057
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
4058
+ --tds-segmented-control-background-color:transparent;
4059
+
4060
+ display:inline-flex;
4061
+ gap:var(--t-spacing-1);
4062
+ align-items:center;
4063
+ justify-content:center;
4064
+ max-width:var(--tds-segmented-control-max-width);
4065
+ min-height:var(--tds-segmented-control-min-height);
4066
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4067
+ padding-inline:var(--tds-segmented-control-padding-inline);
4068
+ font:inherit;
4069
+ font-size:var(--tds-segmented-control-font-size);
4070
+ color:var(--tds-segmented-control-color);
4071
+ text-align:center;
4072
+ cursor:pointer;
4073
+ -webkit-user-select:none;
4074
+ -moz-user-select:none;
4075
+ user-select:none;
4076
+ background-color:var(--tds-segmented-control-background-color);
4077
+ border:0;
4078
+ border-radius:var(--t-border-radius-sm);
4079
+ transition-timing-function:var(--t-ease-in-out);
4080
+ transition-duration:var(--t-duration-200);
4081
+ transition-property:color, background-color;
4082
+ }
4083
+
4084
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4085
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4086
+ }
4087
+
4088
+ .tds-segmented-control-segment .symbol{
4089
+ display:block;
4090
+ flex-shrink:0;
4091
+ width:var(--tds-segmented-control-icon-size);
4092
+ height:var(--tds-segmented-control-icon-size);
4093
+ }
4094
+
4095
+ .tds-segmented-control-segment:focus-visible{
4096
+ outline:var(--t-focus-ring-outline);
4097
+ outline-offset:var(--t-focus-ring-offset);
4098
+ }
4099
+
4100
+ .tds-segmented-control-segment[aria-checked="true"]{
4101
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4102
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4103
+
4104
+ cursor:default;
4105
+ }
4106
+
4107
+ .tds-segmented-control-segment:disabled{
4108
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4109
+ --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4110
+
4111
+ pointer-events:none;
4112
+ }
4113
+
4114
+ .tds-segmented-control-segment--interaction-subtle{
4115
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4116
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4117
+ --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4118
+ --tds-segmented-control-background-color-disabled:transparent;
4119
+ }
3955
4120
 
3956
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
3957
- [data-flex-basis-xl="0"]{ flex-basis:0; }
3958
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4121
+ .tds-popover{
4122
+ max-inline-size:24rem;
4123
+ overflow:auto;
4124
+ overscroll-behavior:none;
4125
+ outline:0;
4126
+ scrollbar-color:#0004 var(--t-surface-color-card);
4127
+ scrollbar-width:thin;
4128
+ background:var(--t-surface-color-card);
4129
+ background-clip:padding-box;
4130
+ border:1px solid var(--t-border-color);
4131
+ border-radius:var(--t-border-radius);
4132
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4133
+ }
3959
4134
 
3960
- [data-padding-xl="0"]{ padding:0; }
3961
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
3962
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
3963
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
3964
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
3965
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
3966
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
3967
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
3968
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
3969
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
3970
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4135
+ @media (prefers-reduced-motion: no-preference){
4136
+ .tds-popover[data-entering]{
4137
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4138
+ }
3971
4139
 
3972
- [data-padding-block-xl="0"]{ padding-block:0; }
3973
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
3974
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
3975
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
3976
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
3977
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
3978
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
3979
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
3980
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
3981
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
3982
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4140
+ .tds-popover[data-exiting]{
4141
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4142
+ }
3983
4143
 
3984
- [data-padding-inline-xl="0"]{ padding-inline:0; }
3985
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3986
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
3987
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
3988
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3989
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
3990
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
3991
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
3992
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
3993
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
3994
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4144
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
4145
+ will-change:opacity, transform;
4146
+ }
4147
+
4148
+ @keyframes tds-popover{
4149
+ from{
4150
+ opacity:0;
4151
+ transform:translateY(-8px);
4152
+ }
4153
+ }
4154
+ }
4155
+
4156
+ .tds-popover-content{
4157
+ display:flex;
4158
+ flex-direction:column;
4159
+ padding:var(--t-spacing-1);
4160
+ outline:0;
3995
4161
  }
3996
4162
 
3997
4163
  .tds-data-table{
@@ -4471,172 +4637,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4471
4637
  }
4472
4638
  }
4473
4639
 
4474
- .tds-popover{
4475
- max-inline-size:24rem;
4476
- overflow:auto;
4477
- overscroll-behavior:none;
4478
- outline:0;
4479
- scrollbar-color:#0004 var(--t-surface-color-card);
4480
- scrollbar-width:thin;
4481
- background:var(--t-surface-color-card);
4482
- background-clip:padding-box;
4483
- border:1px solid var(--t-border-color);
4484
- border-radius:var(--t-border-radius);
4485
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4486
- }
4487
-
4488
- @media (prefers-reduced-motion: no-preference){
4489
- .tds-popover[data-entering]{
4490
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4491
- }
4492
-
4493
- .tds-popover[data-exiting]{
4494
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4495
- }
4496
-
4497
- .tds-popover[data-entering],.tds-popover[data-exiting]{
4498
- will-change:opacity, transform;
4499
- }
4500
-
4501
- @keyframes tds-popover{
4502
- from{
4503
- opacity:0;
4504
- transform:translateY(-8px);
4505
- }
4506
- }
4507
- }
4508
-
4509
- .tds-popover-content{
4510
- display:flex;
4511
- flex-direction:column;
4512
- padding:var(--t-spacing-1);
4513
- outline:0;
4514
- }
4515
-
4516
- .tds-segmented-control{
4517
- --tds-segmented-control-font-size:var(--t-font-size-md);
4518
- --tds-segmented-control-padding:var(--t-spacing-half);
4519
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4520
- --tds-segmented-control-icon-size:.66666667lh;
4521
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
4522
- --tds-segmented-control-max-width:280px;
4523
- --tds-segmented-control-min-height:var(--t-container-size-md);
4524
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4525
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4526
- --tds-segmented-control-width:fit-content;
4527
-
4528
- display:flex;
4529
- flex-direction:column;
4530
- gap:var(--t-spacing-half);
4531
- align-items:flex-start;
4532
- width:var(--tds-segmented-control-width);
4533
- }
4534
-
4535
- .tds-segmented-control--sm{
4536
- --tds-segmented-control-font-size:var(--t-font-size-sm);
4537
- --tds-segmented-control-padding-inline:7px;
4538
- --tds-segmented-control-min-height:var(--t-container-size-sm);
4539
- }
4540
-
4541
- .tds-segmented-control--full-width{
4542
- --tds-segmented-control-width:100%;
4543
- --tds-segmented-control-max-width:none;
4544
- }
4545
-
4546
- .tds-segmented-control--full-width .tds-segmented-control-segment{
4547
- flex:1 1 0;
4548
- }
4549
-
4550
- .tds-segmented-control-label{
4551
- font-size:var(--tds-segmented-control-font-size);
4552
- font-weight:var(--t-font-weight-normal);
4553
- color:var(--t-text-color-headline);
4554
- }
4555
-
4556
- .tds-segmented-control-label--hidden{
4557
- position:absolute;
4558
- width:1px;
4559
- height:1px;
4560
- overflow:hidden;
4561
- white-space:nowrap;
4562
- clip-path:inset(50%);
4563
- }
4564
-
4565
- .tds-segmented-control-track{
4566
- display:inline-flex;
4567
- gap:var(--tds-segmented-control-track-gap);
4568
- width:var(--tds-segmented-control-width);
4569
- padding:var(--tds-segmented-control-padding);
4570
- background-color:var(--t-form-background-color);
4571
- border:1px solid var(--t-border-color);
4572
- border-radius:var(--tds-segmented-control-border-radius);
4573
- }
4574
-
4575
- .tds-segmented-control-segment{
4576
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
4577
- --tds-segmented-control-background-color:transparent;
4578
-
4579
- display:inline-flex;
4580
- gap:var(--t-spacing-1);
4581
- align-items:center;
4582
- justify-content:center;
4583
- max-width:var(--tds-segmented-control-max-width);
4584
- min-height:var(--tds-segmented-control-min-height);
4585
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4586
- padding-inline:var(--tds-segmented-control-padding-inline);
4587
- font:inherit;
4588
- font-size:var(--tds-segmented-control-font-size);
4589
- color:var(--tds-segmented-control-color);
4590
- text-align:center;
4591
- cursor:pointer;
4592
- -webkit-user-select:none;
4593
- -moz-user-select:none;
4594
- user-select:none;
4595
- background-color:var(--tds-segmented-control-background-color);
4596
- border:0;
4597
- border-radius:var(--t-border-radius-sm);
4598
- transition-timing-function:var(--t-ease-in-out);
4599
- transition-duration:var(--t-duration-200);
4600
- transition-property:color, background-color;
4601
- }
4602
-
4603
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4604
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4605
- }
4606
-
4607
- .tds-segmented-control-segment .symbol{
4608
- display:block;
4609
- flex-shrink:0;
4610
- width:var(--tds-segmented-control-icon-size);
4611
- height:var(--tds-segmented-control-icon-size);
4612
- }
4613
-
4614
- .tds-segmented-control-segment:focus-visible{
4615
- outline:var(--t-focus-ring-outline);
4616
- outline-offset:var(--t-focus-ring-offset);
4617
- }
4618
-
4619
- .tds-segmented-control-segment[aria-checked="true"]{
4620
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4621
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4622
-
4623
- cursor:default;
4624
- }
4625
-
4626
- .tds-segmented-control-segment:disabled{
4627
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4628
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4629
-
4630
- pointer-events:none;
4631
- }
4632
-
4633
- .tds-segmented-control-segment--interaction-subtle{
4634
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4635
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4636
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4637
- --tds-segmented-control-background-color-disabled:transparent;
4638
- }
4639
-
4640
4640
  .tds-pagination{
4641
4641
  --tds-pagination-background-color:var(--t-surface-color-canvas);
4642
4642
  --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);