@planningcenter/tapestry 4.4.1-rc.0 → 4.4.1-rc.2

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