@planningcenter/tapestry 4.4.0-rc.3 → 4.4.0-rc.4

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